How to reconnect links in an existing file given a new NodeTemplate in the code

GoJS
1

During the course of UI development I sometimes tweak the size of nodes in the NodeTemplate initialization code only to find that when loading an old file the links no longer line up perfectly with the edges of the node. I assume this is to be expected if nodeTemplates change out from under an existing diagram stored in a file.

Nonetheless, I want to reconnect all the links to the node edges in this case (equivalent to moving each node a little with the mouse).

I tried going through every link and calling invalidateRoute or updateRoute, but neither of those changed anything.

What’s the right way of reconnecting links when a nodeTemplate changes out from under an existing file?

Thank you

2

What you describe should have worked:

    modifiedNode.linksConnected.each(function(l) { l.invalidateRoute(); });

Did you make this change, as one always should, within a transaction?

3

Thank you. I tried that (modified to fix up every node) but still don’t see a change. My code looks like this:

        let model = this.loadFromFile(this.props.editor.uri);
        myDiagram.model = model;
        fixupLinks(myDiagram);

Then:

function fixupLinks(diagram) {
    diagram.model.startTransaction("fixup-links");
    for (let nodeData of diagram.model.nodeDataArray) {
        let node = diagram.findNodeForData(nodeData);
        node.linksConnected.each(function(l) { l.invalidateRoute(); });
    }
    diagram.model.commitTransaction("fixup-links");
}

Then

  myDiagram.requestUpdate();

Screen Shot 2016-07-18 at 9.48.48 PM.png500×640 14.6 KB

After moving the “Start With You” shape:

Screen Shot 2016-07-18 at 9.51.05 PM.png396×631 13.6 KB

4

It works when I try it. First, I’ll start with the FlowChart sample, Flowchart. Here’s a test diagram:

Save the model, and get this:

. . .
  "nodeDataArray": [ 
{"text":"Step", "key":-2, "loc":"-19 87.83332824707031"},
{"text":"Step", "key":-3, "loc":"73 177.8333282470703"}
 ],
  "linkDataArray": [ {"from":-2, "to":-3, "fromPort":"B", "toPort":"T", "points":[-19,104.78332824707032,-19,114.78332824707032,-19,132.8333282470703,73,132.8333282470703,73,150.88332824707032,73,160.88332824707032]} ]}

Then modify the text of the first node:

{"text":"Step\n2\n3\n4\n5\n6", "key":-2, "loc":"-19 87.83332824707031"},

and Load it to get the misconnected link that you describe:

This is due to the Binding of Link.points – the diagram is properly restoring the link with the route that it originally had.

Then execute:

    myDiagram.startTransaction();
    myDiagram.links.each(function(l) { l.invalidateRoute(); });
    myDiagram.commitTransaction("rerouted");

and get:

As I think you would expect.

5

Does not work for me. In my case what has changed is not the model data, but the NodeTemplate initialization code which has increased one of the margins (along with some other similar changes. see : THIS HAS CHANGED below).

        // This is what activities look like by default:
        diagram.nodeTemplateMap.add("",
            $(go.Node, "Spot", this.nodeStyle(),
                // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
                $(go.Panel, "Auto",
                    $(go.Shape, "RoundedRectangle", {
                        cursor: "pointer",
                        name: 'activity-shape',
                        fill: background,
                        minSize: forPalette? new go.Size(140, NaN) : new go.Size(NaN, NaN),
                        stroke: jiboBlue,
                        strokeWidth: 3},
                        new go.Binding("stroke", "", colorize)),
                    $(go.Panel, "Vertical",
                        {
                            margin: 3, // Make an easily selectable boarder for dragging out new transitions.
                            cursor: "move"
                        },
                        $(go.TextBlock, // The TextBlock for the Activity Name in big text in the middle.
                            {
                                name: "node-label",
                                font: "11pt Helvetica, Arial, sans-serif",
                                stroke: white,
                                margin: new go.Margin(8, 8, 0, 8),
                                wrap: go.TextBlock.WrapFit,
                                editable: true,
                                isMultiline: false,
                                fromLinkable: false,
                                toLinkable: false
                            },
                            new go.Binding("visible", "", compactor),
                            new go.Binding("text", "name").makeTwoWay()),
                        $(go.TextBlock, // The TextBlock for the Class name in small text at the bottom.
                            {
                                font: "8pt Helvetica, Arial, sans-serif",
                                stroke: jiboBlue,
                                margin: 3,  // **************** THIS HAS CHANGED ***************
                                wrap: go.TextBlock.WrapFit,
                                editable: false,
                                fromLinkable: false,
                                toLinkable: false
                            },
                            new go.Binding("stroke", "", colorize),
                            new go.Binding("text", "clazz")
                        )
                    )
                )
            ));
6

I just tried modifying the node template to have the TextBlock have a bigger margin. I loaded the same saved data as before, resulting in links starting/ending inside nodes. Then I executed:

myDiagram.startTransaction();
myDiagram.links.each(function(l) { l.invalidateRoute(); });
myDiagram.commitTransaction("rerouted");

And all of the links were properly reconnecting with the nodes.