scrollToPart resets links in the custom layout

GoJS
1

Hi,

I have a very simple diagram with two nodes and a link connecting them. I am using my own layout, which hard-coded the position of the two nodes and the points of the link.

I have a ChangeSelection event handler, which scrollToPart the clicked node. However, scrollToPart resets my custom link, as shown below. Note that the positions of the nodes are still kept.

selection

Any idea how to prevent the link with points from being reset? Any advice would be really appreciated!

My html file with JS code is posted below. You can run it in your browser and check the behavior.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      id="myDiagramDiv"
      style="width: 1500px; height: 800px; background-color: #dae4e4"
    ></div>
    <script src="../../release/go-debug.js"></script>
    <script>
      // ===== PART ONE: custom layout =====
      function TestLayout() {
        go.Layout.call(this);
      }

      go.Diagram.inherit(TestLayout, go.Layout);

      TestLayout.prototype.doLayout = function () {
        let alpha;
        let beta;
        const it = this.diagram.nodes.iterator;
        while (it.next()) {
          const node = it.value;
          if (node.key === "Alpha") {
            alpha = node;
          } else if (node.key === "Beta") {
            beta = node;
          }
        }

        if (!alpha || !beta) return;

        const link = alpha.findLinksOutOf().first();

        if (!link) return;

        this.diagram.startTransaction("Flow Diagram Layout");

        alpha.moveTo(100, 100);
        beta.moveTo(100, 500);

        const pts = link.points.copy();
        pts.clear();
        pts.add(new go.Point(200, 125));
        pts.add(new go.Point(400, 125));
        pts.add(new go.Point(400, 525));
        pts.add(new go.Point(200, 525));
        link.points = pts;

        this.diagram.commitTransaction("Flow Diagram Layout");
      };

      // ===== PART TWO: basic GoJS configuration =====
      const $ = go.GraphObject.make;

      const myDiagram = $(go.Diagram, "myDiagramDiv", {
        layout: $(TestLayout),
      });

      myDiagram.nodeTemplate = $(
        go.Node,
        "Auto",
        $(go.Shape, "Rectangle", {
          width: 100,
          height: 50,
          fill: "white",
        }),
        $(go.TextBlock, { margin: 5 }, new go.Binding("text", "key"))
      );

      myDiagram.linkTemplate = $(
        go.Link,
        { routing: go.Link.AvoidsNodes },
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard" })
      );

      myDiagram.model = new go.GraphLinksModel(
        [{ key: "Alpha" }, { key: "Beta" }],
        [{ from: "Alpha", to: "Beta" }]
      );

      myDiagram.addDiagramListener("ChangedSelection", (evt) => {
        const selection = evt.subject.first();
        myDiagram.commandHandler.scrollToPart(selection);
      });
    </script>
  </body>
</html>
2

That’s very odd. It’s late, so I’ll look at it tomorrow.

3

Thank you so much, Walter! Have a great night!

4

Yes, that seems to be a bug that got introduced when we introduced new animation support. As a work-around, if you disable the AnimationManager, you shouldn’t have this problem.

$(go.Diagram, . . ., { "animationManager.isEnabled": false, . . . })
5

Thank you so much, Walter! Your suggested workaround works perfectly!

6

Hello,

Thank you for reporting this issue with a clear example. We have fixed this, and it will be out with the next release, 2.1.52. Since we just released, this may be a week or so.

7

Thank you, Simon, for the quick turn-around! We will try the next release.