Updating Titles of Children Nodes in nodeDataArray

GoJS
1

I have an implementation that has a node with an expandable section that contains multiple nodes ie. In the expansion area there is a list of items made of shapes, which is of an itemArray structure. The implementation display of the expandable section looks as follows:
image

I am trying to implement so that it is possible to be able to edit the titles of the children nodes. When a children nodes’ title is double clicked, a custom implementation of a texteditor opens and the command used for this is:

obj.diagram.commandHandler.editTextBlock(textBlock);

Please also take note of the type of binding on the TextBlock:

                                    new go.Binding('text', 'title').makeTwoWay((text: string, targetData: any, model: go.Model) => {
                                        model.setDataProperty(targetData, "title", text);
                                        return text;
                                    })

This works correctly for the first child in the itemArray and updates the title. As soon as the second child’s title is updated, a console error of Maximum Call Stack Size exceeded occurs on the return text/model.setDataProperty.

2

It’s a bit unusual to use a conversion function in one direction but not the other. In this case I would use:

new go.Binding('text', 'title').makeTwoWay()

Which should have the same effect.

So, what is the repeating part of the stack trace, and which version of GoJS are you using?

3

Hi @walter .Thank you for your reply.

Yes, I originally used the Binding as new go.Binding('text', 'title').makeTwoWay() and it does do the same. I changed it to the binding above to be able to add breakpoints and see where the error specifically occurs.

The specific console error looks like this:

ERROR RangeError: Maximum call stack size exceeded
    at vr (go.mjs:1821:12)
    at vr (go.mjs:1821:114)
    at vr (go.mjs:1821:246)
    at vr (go.mjs:1821:246)
    at vr (go.mjs:1821:114)
    at vr (go.mjs:1821:246)
    at vr (go.mjs:1821:246)
    at vr (go.mjs:1821:114)
    at vr (go.mjs:1821:246)
    at vr (go.mjs:1821:246)

The version of GoJS is:

    "gojs": "2.3.15",
    "gojs-angular": "2.0.7",
    "@types/go": "^1.6.28",
4

We’ll look into it.

By the way, ever since 2.0 when we reimplemented the whole library in TypeScript, you should not use @types/go.

5

I’m unable to reproduce the problem. When I tried a simple case, everything worked well.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:300px"></div>
  <textarea id="mySavedModel" style="width:100%;height:150px"></textarea>

  <script id="code" type="module">
import * as go from "https://unpkg.com/gojs@2.3.15/release/go.mjs";
const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  new go.Node("Vertical")
    .add(
      new go.TextBlock()
        .bind("text"),
      new go.Panel("Auto")
        .add(
          new go.Shape({ fill: "white" })
            .bind("fill", "color"),
          new go.Panel("Vertical", {
              margin: 4,
              itemTemplate:
                new go.Panel()
                  .add(
                    new go.TextBlock({
                        click: (e, tb) => e.diagram.commandHandler.editTextBlock(tb)
                      })
                    .bind("text", "title", null, null)
                  )
            })
            .bind("itemArray", "items")
        )
    );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue",
    items: [
      { title: "first" },
      { title: "second" },
      { title: "third" },
    ]
  },
]);
  </script>
</body>
</html>

So, looking at the code that is recursing infinitely, it seems to be caused by a cyclical reference in the model data when writing incremental JSON. Please confirm this and remove any such references, since JSON by itself does not support cycles of references so we require the data to be tree-structured.

6

Thank you for your reply.

I have resolved the issue after investigating the references. There was a this.parent reference in my ChildNodeData pointing to a NodeData.

7

If you really want such a reference, and if you are using Model methods for writing and reading JSON, then you could prefix the property name with “_”. Those properties are ignored, as are all properties that have functions as values. Model | GoJS API