Issue with Automatic Route Adjustment When Changing fromEndSegmentLength

GoJS
1

Hello!

I encountered an odd issue with the fromEndSegmentLength property. When I change this property via my UI, the link doesn’t immediately reroute — the change only becomes visible once I move one of the nodes.

Interestingly, other properties like strokeWidth and fromShortLength update the link immediately and adjust its appearance right away, but fromEndSegmentLength seems to require a manual rerouting, which isn’t triggered automatically.

I’ve already tried using invalidateRoute(), updateRoute(), and reshape(), but nothing seems to trigger the rerouting so that the change is visible immediately. Do you have any idea why the fromEndSegmentLength behaves like this and how I can ensure the route is updated instantly?

Thanks in advance for your help!

Here’s my setup to reproduce this:

<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/[email protected]/release/go.js"></script>

<div id="allSampleContent" class="p-4 w-full">

<script id="code">

  const $ = go.GraphObject.make;

  function init() {
    myDiagram = new go.Diagram('myDiagramDiv', {
      'undoManager.isEnabled': true
    });
    setupDiagram(myDiagram);
  }

  function setupDiagram(diagram) {
    diagram.nodeTemplate =
      new go.Node('Auto', { locationSpot: go.Spot.Center })
        .bindTwoWay('location', 'location', go.Point.parse, go.Point.stringify)
        .add(
          new go.Shape({
            fill: 'lightgray',
            portId: '', cursor: 'pointer',
            fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
            // fromLinkable: true, toLinkable: true
          }),
          new go.TextBlock({ margin: 10 })
            .bind('text')
        );

    diagram.linkTemplate =
      $(go.Link,
        {
          reshapable: true,
          resegmentable: true,
          relinkableFrom: true,
          relinkableTo: true,
          adjusting: go.LinkAdjusting.None,
        },
        new go.Binding("fromEndSegmentLength"),
        new go.Binding("toEndSegmentLength"),
        new go.Binding("fromShortLength"),
        new go.Binding("toShortLength"),
        new go.Binding("points").makeTwoWay(),
        $(go.Shape, {
          toArrow: "Standard"
        }),
        $(go.Shape, {
          isPanelMain: true
        },
        new go.Binding("strokeWidth"))
      )

    diagram.model = new go.GraphLinksModel({
      pointsDigits: 0,
      nodeDataArray:
      [
        { key: 1, text: 'Alpha', location: '0 0' },
        { key: 2, text: 'Beta', location: '20 100' }
      ],
      linkDataArray: [{ from: 1, to: 2 }]
    });
  }

  // Function to set fromEndSegmentLength
  function setFromEndSegmentLength(value, diagram) {
    diagram.startTransaction("Change fromEndSegmentLength");
    var linkData = diagram.model.linkDataArray[0]; // Modifying the first link
    diagram.model.setDataProperty(linkData, "fromEndSegmentLength", +value);

    // Force rerouting by invalidating the route
    // var link = diagram.findLinkForData(linkData);
    // if (link !== null) {
    //   console.log(link);
      
    //   link.invalidateRoute();  // Forces a reroute of the link
    //   link.updateRoute();
    // }
    // diagram.model.updateTargetBindings(linkData);    
    diagram.commitTransaction("Change fromEndSegmentLength");
  }

  // Function to set fromShortLength
  function setFromShortLength(value, diagram) {
    diagram.startTransaction("Change fromShortLength");
    var linkData = diagram.model.linkDataArray[0]; // Modifying the first link
    diagram.model.setDataProperty(linkData, "fromShortLength", +value);
    diagram.commitTransaction("Change fromShortLength");
  }

  // Function to set strokeWidth
  function setLinkStrokeWidth(value, diagram) {
    diagram.startTransaction("Change link strokeWidth");
    var linkData = diagram.model.linkDataArray[0]; // Modifying the first link
    diagram.model.setDataProperty(linkData, "strokeWidth", +value);
    diagram.commitTransaction("Change link strokeWidth");
  }

  window.addEventListener('DOMContentLoaded', init);
</script>

<div id="sample" style="display: flex; justify-content: space-around;">
  <div>
    <div id="myDiagramDiv" style="border: solid 1px black; width: 90vw; height: 50vh"></div>

    <div style="display: flex; flex-direction: column;">
      <div style="color: green;">Update triggers correct re-routing immediately.</div>
      <div>
        <label for="fromShortLength">From Short Length:</label>
        <input type="number" id="fromShortLength" oninput="setFromShortLength(this.value, myDiagram)" />    
      </div>
      <div>
        <label for="linkWidth">Link Width:</label>
        <input type="number" id="linkWidth" oninput="setLinkStrokeWidth(this.value, myDiagram)" />    
      </div>

      <hr>

      <div style="color: red;">Update does NOT trigger re-routing immediately. You have to move a node to see the correct route.</div>
      <div>    
        <label for="fromEndSegmentLength">From End Segment Length:</label>
        <input type="number" id="fromEndSegmentLength" oninput="setFromEndSegmentLength(this.value, myDiagram)" />
      </div>
    </div>
  </div>
</div>
</div>
</body>
</html>
3

This seems to be a caching problem involving ports whose spot(s) are …Side Spots. We’ll investigate it. Thanks for providing a reproducible sample. EDIT: this will be fixed in 3.0.12.

4

Thank you! Looking forward to updating!

5
6

Updated and it works! Thanks for the quick fix!