Link ends when shape size changes

GoJS
1

I have a diagram similar to state chart
State Chart

I do save the diagram in the database

now when I open the diagram again after reading the nodes position and the transitions points everything is OK.

the above diagram is kind of template to a more complicate diagram

now I open the complicated diagram , it has more information in its nodes.
that diagram is read only
the problem I have is that the transition are not connected to the nodes. sometimes there is a gap between them and sometimes the transition is drawn on the node.

is there a way to connect the transition lines with the shape correctly (and try to keep the points)
note that the new nodes size are only slightly bigger

2

You could try to fix up the link routes once the link points have been loaded, in case the saved routes do not match any new node bounds due to changed content.

The following example depends on Link.adjusting being different than the default None:

<!DOCTYPE html>
<html>
<head>
  <title>State Chart</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="go.js"></script>
  <script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "InitialLayoutCompleted": function(e) {
            setTimeout(function() {
              e.diagram.commit(function(diag) {
                diag.links.each(function(l) { l.invalidateRoute(); });
              });
            }, 1);
          }
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { locationSpot: go.Spot.Center },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape, "RoundedRectangle",
          {
            parameter1: 20,  // the corner has a large radius
            fill: "goldenrod",
            portId: "", cursor: "pointer",
            fromLinkable: true, fromLinkableDuplicates: true,
            toLinkable: true, toLinkableDuplicates: true
          }),
        $(go.TextBlock,
          { margin: 10, editable: true },
          new go.Binding("text").makeTwoWay())
      );

    myDiagram.linkTemplate =
      $(go.Link,
        {
          curve: go.Link.Bezier, adjusting: go.Link.End,
          relinkableFrom: true, relinkableTo: true,
          reshapable: true
        },
        new go.Binding("points").makeTwoWay(),
        $(go.Shape, { strokeWidth: 1.5 }),
        $(go.Shape, { toArrow: "standard", stroke: null })
      );

    load();
  }

  function save() {
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  }
  </script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="background-color: whitesmoke; border: solid 1px black; width: 100%; height: 400px"></div>
  <button id="SaveButton" onclick="save()">Save</button>
  <button onclick="load()">Load</button>
  Diagram Model saved in JSON format:
  <textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "GraphLinksModel",
  "nodeKeyProperty": "id",
  "linkLabelKeysProperty": "labelKeys",
  "nodeDataArray": [
{"id":0,"loc":"100 0","text":"Initial"},
{"id":1,"loc":"300 100","text":"First down"}
],
  "linkDataArray": [
{"from":0,"to":1,"points":[136.11678575286592,11.05067617248961,180.67065784598805,24.68285308049549,333.3333282470703,8.333328247070312,310.42384936552855,71.33440828022111]},
{"from":0,"to":1,"points":[134.05877709763718,17.029388548818595,174.40966750898863,37.20483375449432,214.7605579203401,57.38027896017004,255.11144833169152,77.55572416584576]},
{"from":1,"to":0,"points":[257.67734129427646,124.35836106274874,207.3333282470703,153.3333282470703,168.1486771719892,49.726814428493135,130.3060807629716,22.113779998280563]}
]}
  </textarea>
</div>
</body>
</html>
3

this is working!!
why do we need to set timeout?
can we do without it?
why 10ms do we need more time in some cases?

4

It could be done within the initial transaction that happens when you replace a Diagram.model, and that might be better for undo/redo usage. But I thought for your purposes this was easier to implement.

Maybe I should have used 1 millisecond instead. It’s quite plausible that 0 milliseconds would work too, but I haven’t tested that and would want to try it on different browsers and different platforms. I just wanted a follow-on transaction to happen after the loading of the model and initialization of all of the Nodes and Links in the Diagram.