Retaining Link Position On load of a flow chart

GoJS
1



As seen in the image the flow chart was drawn and saved. On load of the flow chart the link between the nodes re positions itself as shown in the below image.


how should i avoid this. how should i save the link positions? Please help.

2

Do you have a TwoWay Binding of “points” on the Link in your link template?

Several samples demonstrate this.

3

Yes i have , my node template is as follows

myDiagram.nodeTemplateMap.add(“Step”,
$(go.Node, go.Panel.Spot, { selectionAdornmentTemplate: UndesiredEventAdornment },{resizable: true,isShadowed:false}, nodeStyle(),new go.Binding(“text”, “key”),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify,{routing:go.Link.AvoidsNodes}),
$(go.Panel, go.Panel.Auto,
$(go.Shape, “Rectangle”,
{ fill: “white” },
new go.Binding(“figure”, “figure”)),
$(go.Panel, “Vertical”,
$(go.Picture,
{ maxSize: new go.Size(24,24) },
new go.Binding(“source”, “source”)),
$(go.TextBlock,
{ font: “8pt Helvetica, Arial, sans-serif”,
stroke: “black”,
textAlign: “center”,
margin: 5,
maxSize: new go.Size(100, NaN),
wrap: go.TextBlock.WrapFit,
editable: true },
new go.Binding(“text”, “text”).makeTwoWay()))),
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)
));

and my link template is

myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5, toShortLength: 4,
relinkableFrom: true, relinkableTo: true, reshapable:true },
$(go.Shape, // the link path shape
{ isPanelMain: true,
stroke: “gray”, strokeWidth: 2 }),
$(go.Shape, // the arrowhead
{ toArrow: “standard”,
stroke: null, fill: “black”}),
$(go.Panel, “Auto”,
{ visible: false, name: “LABEL”, segmentIndex: 2, segmentFraction: 0.5},
new go.Binding(“visible”, “visible”).makeTwoWay(),
$(go.Shape, “RoundedRectangle”, // the link shape
{ fill: “#F8F8F8”, stroke: null }),
$(go.TextBlock, “Yes” ,// the label
{ textAlign: “center”,
font: “10pt helvetica, arial, sans-serif”,
stroke: “#919191”,
margin: 2, editable: true },
new go.Binding(“text”, “text”).makeTwoWay())
)
);



4

I’m sorry, but you do not appear to have a:
new go.Binding(“points”).makeTwoWay()
on your go.Link object in your link template.