The rectangle doesn't save correctly in model

GoJS
1

The code looks as following:

var image9Template =
    $(go.Node, "Vertical", nodeStyle(),
        {
            resizable: true,
            resizeObjectName: "SHAPE", selectionObjectName: "SHAPE"
        },
    $(go.Shape, "Rectangle",
        {
            name: "SHAPE",
            fill: transparent,
            width: 60,
            height: 40,
            stroke: black,
            strokeWidth: 1,
            strokeDashArray: [5, 5]
        })
    );

The diagram looks as following:

ss1.png729×519 6.78 KB

The diagram model looks as following:

{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [ {"guid":119, "category":"image9", "key":-9, "loc":"-482.3833312988281 -279.9499969482422"} ],
  "linkDataArray": []}

But, when I load the model I’ve got the small rectangle as the one in palette:

2

I’ve tried to introduce the “size” property in this way:

var image9Template =
    $(go.Node, "Vertical", nodeStyle(),
        {
            resizable: true,
            resizeObjectName: "SHAPE", selectionObjectName: "SHAPE"
        },
    $(go.Shape, "Rectangle",
        {
            name: "SHAPE",
            fill: transparent,
            width: 60,
            height: 40,
            stroke: black,
            strokeWidth: 1,
            strokeDashArray: [5, 5]
        }),
      new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
    );

But, the same result that is the size is not saved.

3

Ah, yes, you found the solution – add a TwoWay Binding on any GraphObject property that you want to save in the model whenever code sets that property.

And you correctly put the TwoWay Binding of GraphObject.desiredSize on the object that the user resizes, not on the Node itself.

I cannot explain why it is not now working for you. Many samples do what you have done.

4

I’ve figured out what was the issue. This is correct code:

var image9Template =
    $(go.Node, "Vertical", nodeStyle(),
        {
            resizable: true,
            resizeObjectName: "SHAPE", selectionObjectName: "SHAPE"
        },
    $(go.Shape, "Rectangle",
        {
            name: "SHAPE",
            fill: transparent,
            width: 60,
            height: 40,
            stroke: black,
            strokeWidth: 1,
            strokeDashArray: [5, 5]
        },
      new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify))
    );