We have few components and connected using few links. We are using AvoidNodes in that. If we move the Nodes on canvas it sets links accordingly such that it bypass the Node. We store locations of Nodes in database, so whenever a page refresh happens we set Location from database.
But the problem is Link position changes automatically. The path of the link does not remain same as it was done previously on canvas.
Is there any way to keep the link path as it was left ?
It sounds like you may not have a two-way data binding on your Link.points. This is necessary to keep the information on save/load.
Many examples have this in their link template, such as: State Chart
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
// ...
},
new go.Binding("points").makeTwoWay(), // <-- this binding
Thanks Simon,
We tried your approach. I can say it worked but partially.
Steps:
You can notice that the 1st and 2nd part in the image shows the link difference. Only 1 link was rendered differently. others rendered as it is.
Can you tell me what can be the issue now ?
Link data array looks like following:
“linkDataArray”: [
{“from”:-4, “to”:-79, “fromName”:null, “toName”:null, “oldFrom”:null, “oldTo”:null, “protocolIds”:[ 488 ], “protocolGuids”:null, “protocols”:null, “Name”:“HTTPS”, “Color”:"#078181", “toArrow”:“OpenTriangle”, “IsBiDirectional”:false, “strokeWidth”:1.7, “Id”:13222, “routing”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“AvoidsNodes”}, “corner”:5, “curve”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“JumpOver”}, “points”:[278.82568359375,-129.2584716796875,288.82568359375,-129.2584716796875,292,-129.2584716796875,292,-129.2584716796875,492,-129.2584716796875,492,-159.516943359375,507,-159.516943359375,517,-159.516943359375]},
{“from”:-4, “to”:0, “fromName”:null, “toName”:null, “oldFrom”:null, “oldTo”:null, “protocolIds”:[ 488 ], “protocolGuids”:null, “protocols”:null, “Name”:“HTTPS”, “Color”:"#078181", “toArrow”:“OpenTriangle”, “IsBiDirectional”:false, “strokeWidth”:1.7, “Id”:13223, “routing”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“AvoidsNodes”}, “corner”:5, “curve”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“JumpOver”}, “points”:[278.82568359375,-129.2584716796875,288.82568359375,-129.2584716796875,292,-129.2584716796875,292,-129.2584716796875,492,-129.2584716796875,492,-235.516943359375,507,-235.516943359375,517,-235.516943359375]},
{“from”:0, “to”:-24, “fromName”:null, “toName”:null, “oldFrom”:null, “oldTo”:null, “protocolIds”:[ 488 ], “protocolGuids”:null, “protocols”:null, “Name”:“HTTPS”, “Color”:"#078181", “toArrow”:“OpenTriangle”, “IsBiDirectional”:false, “strokeWidth”:1.7, “Id”:13224, “routing”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“AvoidsNodes”}, “corner”:5, “curve”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“JumpOver”}, “points”:[517,-235.516943359375,507,-235.516943359375,507,-235.516943359375,507,-154.2584716796875,352.52734375,-154.2584716796875,342.52734375,-154.2584716796875]},
{“from”:-4, “to”:-24, “fromName”:null, “toName”:null, “oldFrom”:null, “oldTo”:null, “protocolIds”:[ 488 ], “protocolGuids”:null, “protocols”:null, “Name”:“HTTPS”, “Color”:"#078181", “toArrow”:“OpenTriangle”, “IsBiDirectional”:false, “strokeWidth”:1.7, “Id”:13225, “routing”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“AvoidsNodes”}, “corner”:5, “curve”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“JumpOver”}, “points”:[278.82568359375,-129.2584716796875,288.82568359375,-129.2584716796875,292.412841796875,-129.2584716796875,292.412841796875,-154.2584716796875,296,-154.2584716796875,306,-154.2584716796875]},
{“from”:-7, “to”:-12, “fromName”:null, “toName”:null, “oldFrom”:null, “oldTo”:null, “protocolIds”:[ 488 ], “protocolGuids”:null, “protocols”:null, “Name”:“HTTPS”, “Color”:"#078181", “toArrow”:“OpenTriangle”, “IsBiDirectional”:false, “strokeWidth”:1.7, “Id”:13226, “routing”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“AvoidsNodes”}, “corner”:5, “curve”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“JumpOver”}, “points”:[466.333984375,-133.2584716796875,476.333984375,-133.2584716796875,476,-133.2584716796875,476,-133.2584716796875,492,-133.2584716796875,492,-208.516943359375,576,-208.516943359375,586,-208.516943359375]},
{“from”:-7, “to”:-20, “fromName”:null, “toName”:null, “oldFrom”:null, “oldTo”:null, “protocolIds”:[ 488 ], “protocolGuids”:null, “protocols”:null, “Name”:“HTTPS”, “Color”:"#078181", “toArrow”:“OpenTriangle”, “IsBiDirectional”:false, “strokeWidth”:1.7, “Id”:13227, “routing”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“AvoidsNodes”}, “corner”:5, “curve”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“JumpOver”}, “points”:[466.333984375,-133.2584716796875,476.333984375,-133.2584716796875,476,-133.2584716796875,476,-133.2584716796875,492,-133.2584716796875,492,-113.2584716796875,718,-113.2584716796875,728,-113.2584716796875]},
{“from”:-12, “to”:-20, “fromName”:null, “toName”:null, “oldFrom”:null, “oldTo”:null, “protocolIds”:[ 488 ], “protocolGuids”:null, “protocols”:null, “Name”:“HTTPS”, “Color”:"#078181", “toArrow”:“OpenTriangle”, “IsBiDirectional”:false, “strokeWidth”:1.7, “Id”:13228, “routing”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“AvoidsNodes”}, “corner”:5, “curve”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“JumpOver”}, “points”:[640.8212890625,-208.516943359375,650.8212890625,-208.516943359375,684.41064453125,-208.516943359375,684.41064453125,-113.2584716796875,718,-113.2584716796875,728,-113.2584716796875]},
{“from”:-20, “to”:-65, “fromName”:null, “toName”:null, “oldFrom”:null, “oldTo”:null, “protocolIds”:[ 488 ], “protocolGuids”:null, “protocols”:null, “Name”:“HTTPS”, “Color”:"#078181", “toArrow”:“OpenTriangle”, “IsBiDirectional”:false, “strokeWidth”:1.7, “Id”:13229, “routing”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“AvoidsNodes”}, “corner”:5, “curve”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“JumpOver”}, “points”:[784.02978515625,-113.2584716796875,794.02978515625,-113.2584716796875,816.514892578125,-113.2584716796875,816.514892578125,-105.2584716796875,839,-105.2584716796875,849,-105.2584716796875]},
{“from”:-65, “to”:-10, “fromName”:null, “toName”:null, “oldFrom”:null, “oldTo”:null, “protocolIds”:[ 488 ], “protocolGuids”:null, “protocols”:null, “Name”:“HTTPS”, “Color”:"#078181", “toArrow”:“OpenTriangle”, “IsBiDirectional”:false, “strokeWidth”:1.7, “Id”:13230, “routing”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“AvoidsNodes”}, “corner”:5, “curve”:{“class”:“go.EnumValue”, “classType”:“Link”, “name”:“JumpOver”}, “points”:[849,-105.2584716796875,839,-105.2584716796875,836,-105.2584716796875,836,-76,508,-76,508,-243.2584716796875,259.05419921875,-243.2584716796875,249.05419921875,-243.2584716796875]}
]
Are you using a layout? Layouts can invalidate link routes, so if you are using one, you may want to set isInitial to false.
Yes we are using layouts.
Following is the layout syntax we are using.
this.diagram.layout = $(go.TreeLayout, {isInitial: false, isOngoing: false}); // for all diagram.
Still facing the same issue.
It seems to be working when I create a small sample: https://codepen.io/jhardy/pen/OeaPab?editors=1010. Try reshaping a link, saving, moving some things around, then loading the saved model. The link returns to how it was reshaped. What are you doing differently?
