model.toJson saving issue

GoJS
1

Hello Nortwoods staff,

I’m trying to save my diagram model as JSON and I can kind of do it. When I mouse-drag an existing link’s endpoint to another port, I can view the change with model.toJson(). But when I click to a port and create a new link from it (not dragging an existing link) some data is missing in variable that I get with model.toJson (modelAsText).

This is the original text of the model when I first initialize the diagram without any changes.

image
This is when I drag one link from whichever node it goes and connect it to another node.
As you can see the “to” element of linkDataArray’s first object has changed.

image

And this is when I click-drag on the same node and create a whole new link and connect it to some other node.

image
You can see that there is a new object is created in the linkDataArray to define link. But it doesn’t contain “topid” element unlike others despite of the link is created successfully.

Can anyone help?

Thanks.

2

Have you set GraphLinksModel | GoJS API and GraphLinksModel | GoJS API to “frompid” and “topid”, respectively? Preferably before providing any link data.

3

It solved my problem Walter, thank you. I have one more question that I just came across.

I have nodes with editable TextBlock and an data inspector like this.
image

When I edit node.TextBlock by clicking or via inspector, this occurs:
image

Links and key data remains same but the whole node is losing it’s shape. Also my binding in the TextBlock is TwoWay.

Can you help me to solve this? Thanks.

4

Have you set Model | GoJS API to “type”? If you have and the user edits that property to be a non-existing template name, I think that is what one will see. I am also guessing that you have not specified the default node template, which is what is used for an unrecognized category/template name.

5

Actually this is where the node is being created.

  function makeTemplate(name, inports, outports, DTMFcount) {
    var node = $(go.Node, "Table", {
      isShadowed: true,
      contextMenu: nodeMenu,
      reshapable:true
    },
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
      $(go.Panel, "Auto", {
        width: 220,
        height: 60 + (DTMFcount * 20)
      },
        $(go.Shape, "RoundedRectangle", {
          fill: "forestgreen",
          stroke: null,
          strokeWidth: 0,
        }),
        $(go.Panel, "Auto",
          {
            alignment: go.Spot.Left,
            margin: 10
          },
          $(go.TextBlock, name, { // name of the node. shape disappears when this is edited by clicking on the textblock
            column: 0,
            row: 0,
            maxSize: new go.Size(93, NaN),
            stroke: "white",
            font: "bold 11pt sans-serif",
            editable: true,
            textAlign: "left"
          },
            new go.Binding("text", "type").makeTwoWay()))
      ),
      $(go.Panel, "Vertical", {
        alignment: go.Spot.Left,
        alignmentFocus: go.Spot.Left
      },
        inports),
      $(go.Panel, "Vertical", {
        alignment: go.Spot.Right,
        alignmentFocus: go.Spot.Right
      },
        outports)
    );
    ivrDiagram.nodeTemplateMap.set(name, node);
  }

I’m sorry but I don’t understand what’s wrong here.

6

Have you set Model.nodeCategoryProperty at all? If so, to what value?

Do you have any calls to makeTemplate with a name argument that is the empty string? I am guessing that you haven’t.

7

I’m sorry, at first I haven’t set model.nodeCategoryProperty to anything but then I’ve set it model.nodeCategoryProperty=“type”. In both scenarios same problem occurs and I’m not calling makeTemplate with empty string.

8

I’m saying that if you have set Model.nodeCategoryProperty to “type”, then you had better make sure that any new value for any data.type property is a legitimate node template name. In the Data Inspector you could list all of the permissible choices, rather than letting the user enter any string.

But I would recommend not setting Model.nodeCategoryProperty unless you really want the data to control which template is used to represent it. If you do want to control which template is used, don’t allow editing of the template name unless you do it safely, only to known template names.

9

Hi Walter. I’m trying to do same.

We spoke about it yesterday in here: model.toJson saving issue - #3 by tantum I did what I need but something was certainly missing.

When I edit a TextBlock by clicking it, the “type” value was changing in Image 1 (this is the jsonNodes variable in the code block). But the node was losing it’s shape because that changed “type” value also needs to assigned as “name” in Image 2 (and this is jsonTemplates). “type” in the image 1 has to have the same value with “name” in the image 2. Click-editing on the node only changes “type”. When that two variables have the same value, shape is being displayed on the diagram with no problem.

image

image

So I did this:

ivrDiagram.addDiagramListener("ObjectDoubleClicked",
    function (e) {
      var selectedNode = e.subject.part;
      if (!(selectedNode instanceof go.Link)) {
        for (var i = 0; i < jsonTemplates.length; i++) {
          for (var j = 0; j < jsonNodes.nodeDataArray.length; j++) {
            if (jsonTemplates[i].id === jsonNodes.nodeDataArray[j].key) {
              jsonTemplates[i].name = jsonNodes.nodeDataArray[j].type;
              console.log(jsonTemplates[i].name)
              console.log(jsonNodes.nodeDataArray[j].type)
            }
          }
        }
      }
    })

When I double click on the node, it supposed to reassign the “name” value in the jsonTemplates same as “type” in jsonNodes. As you can see I also can that they have the same value on the console.

image

But still, even when the “type” and “name” have the same value the shape is missing.
Any thoughts to fix this?

Thanks in advance,
Best regards.