Get Diagram Nodes Actual Size On Saving

GoJS
1

Hi,
Is there any way threw which i can get the current size of nodes which are drawn on my canvas and there position,color all info because i have to save that info and reload when needed.

Actual Diagram

image.png831×486 17.4 KB

dataSource :
{ “class”: “go.GraphLinksModel”,
“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
“nodeDataArray”: [
{“key”:-1, “category”:“Start”, “text”:“Start”, “item”:“start”, “loc”:“178.533”},
{“key”:-4, “category”:“End”, “text”:“End”, “item”:“start”, “loc”:“178.5152”},
{“text”:"", “category”:“Rectangle”, “key”:-3, “loc”:“140 115.04668018429783”},
{“text”:"", “figure”:“Circle”, “key”:-2, “loc”:“350 211.7730160546988”},
{“figure”:“RoundedRectangle”, “text”:"", “key”:-5, “loc”:“153.23857625084597 385.0000000000002”},
{“figure”:“RoundedRectangle”, “text”:"", “key”:-6, “loc”:"-111.76142374915395 138.3081039334518"},
{“text”:"", “figure”:“Circle”, “key”:-7, “loc”:“5.535087878753018 280”}
],
“linkDataArray”: [
{“from”:-1, “to”:-3, “fromPort”:“B”, “toPort”:“T”},
{“from”:-3, “to”:-2, “fromPort”:“R”, “toPort”:“T”},
{“from”:-2, “to”:-5, “fromPort”:“B”, “toPort”:“T”},
{“from”:-5, “to”:-4, “fromPort”:“L”, “toPort”:“R”},
{“from”:-3, “to”:-6, “fromPort”:“L”, “toPort”:“T”},
{“from”:-6, “to”:-7, “fromPort”:“B”, “toPort”:“T”},
{“from”:-7, “to”:-2, “fromPort”:“R”, “toPort”:“L”}
]}
Getting Diagram after saving data:

image.png437×553 12.9 KB

2

For properties which you expect to change that you want saved in the Model, you should have a two-way data binding.

https://gojs.net/latest/intro/dataBinding.html#TwoWayDataBinding
https://gojs.net/latest/intro/dataBinding.html#ReasonsForTwoWayBindings

3

i have already done two-way binding

new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

Example:
myDiagram.nodeTemplateMap.add(“Rectangle”,
$(go.Node, “Spot”, nodeStyle(),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, “Auto”,
$(go.Shape, “Rectangle”,
{ minSize: new go.Size(25, 25), fill: fill, stroke: stroke }),
new go.Binding(“fill”, “color”),
$(go.TextBlock, “End”,
{ font: “bold 11pt Helvetica, Arial, sans-serif”, stroke: lightText },
new go.Binding(“text”, “text”).makeTwoWay())
),
// three named ports, one on each side except the bottom, all input only:
makePort(“T”, go.Spot.Top, true, true),
makePort(“L”, go.Spot.Left, true, true),
makePort(“R”, go.Spot.Right, true, true),
makePort(“B”, go.Spot.Bottom, true, true)
));

4

Note that your data does not have any text for those nodes.