Disable position animation of newly added node

Hi,

When a new node is added, I noticed that the default animation flies in the newly added node from the left-hand side of the diagram. How can I disable the fly-in animation and let the new node fade in at its final location automatically calculated by the layout.

The following code snippet enables the opacity animation but does not disable the position animation.

        var animation = new go.Animation();
        const newNode = myDiagram.findPartForKey("Box3");
        animation.add(newNode, "opacity", 0, newNode.opacity);
        let newLink = myDiagram.findPartForKey("Link1");
        animation.add(newLink, "opacity", 0, newLink.opacity);
        newLink = myDiagram.findPartForKey("Link2");
        animation.add(newLink, "opacity", 0, newLink.opacity);

        animation.start();

animation1

I looked at the custom animation page and its source code. Seems to me the fadeIn animation is as simple as setting the opacity. However, it does not work for me :( Where is the source code that disables the position animation when a node is added by double clicking the diagram?

If I set animation.duration = 10000; it demonstrates the behavior that I want. But of course I hacked it. The position animation happened before the nodes and links became visible. And moreover 10-second animation is too long.

animation2

Note that I just want to disable the position animation of Box3. The position animation of Box1 and Box2 is desirable.

Please let me know if my requirement is not 100% clear to you.

I am attaching my HTML + JS code below. Looking forward to your recommendation! Thanks for your time.

<!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="border: solid 1px black; width: 100%; height: 700px"
    ></div>
    <div class="toolbar">
      <button id="addNode">Add Node</button>
    </div>
    <script src="../../release/go-debug.js"></script>
    <script>
      let myDiagram;

      function init() {
        const $ = go.GraphObject.make;
        myDiagram = $(go.Diagram, "myDiagramDiv", {
          layout: $(go.LayeredDigraphLayout, {
            layerSpacing: 80,
          }),
        });

        myDiagram.nodeTemplate = $(
          go.Node,
          "Spot",
          $(go.Shape, "RoundedRectangle", {
            fill: "white",
            width: 100,
            height: 50,
            portId: "",
            fromLinkable: true,
            toLinkable: true,
            cursor: "pointer",
          }),
          $(
            go.TextBlock, // the text label
            new go.Binding("text", "key"),
            {
              verticalAlignment: go.Spot.Center,
              textAlign: "center",
            },
          ),
        );

        myDiagram.linkTemplate = $(
          go.Link,
          {
            curve: go.Link.Bezier,
            toShortLength: 8,
            fromEndSegmentLength: 50,
            toEndSegmentLength: 50,
          },
          $(go.Shape, { isPanelMain: true, strokeWidth: 2 }),
          $(go.Shape, { toArrow: "Standard", stroke: null }),
        );

        const nodeDataArray = [
          {
            key: "Box1",
          },
          {
            key: "Box2",
          },
        ];

        const linkDataArray = [
          {
            from: "Box1",
            to: "Box2",
          },
        ];

        const model = new go.GraphLinksModel();
        model.linkKeyProperty = "key";
        model.nodeDataArray = nodeDataArray;
        model.linkDataArray = linkDataArray;
        myDiagram.model = model;
      }

      window.addEventListener("DOMContentLoaded", init);

      document.getElementById("addNode").addEventListener("click", e => {
        myDiagram.startTransaction("Add Node");

        myDiagram.model.addNodeData({
          key: "Box3",
        });
        myDiagram.model.addLinkData({
          key: "Link1",
          from: "Box1",
          to: "Box3",
        });
        myDiagram.model.addLinkData({
          key: "Link2",
          from: "Box3",
          to: "Box2",
        });

        var animation = new go.Animation();
        // animation.duration = 10000;
        const newNode = myDiagram.findPartForKey("Box3");
        animation.add(newNode, "opacity", 0, newNode.opacity);
        let newLink = myDiagram.findPartForKey("Link1");
        animation.add(newLink, "opacity", 0, newLink.opacity);
        newLink = myDiagram.findPartForKey("Link2");
        animation.add(newLink, "opacity", 0, newLink.opacity);

        animation.start();
        myDiagram.commitTransaction("Add Node");
      });
    </script>
  </body>
</html>

Another acceptable approach is to have the position animation from Box1 to Box3. I think I can get the position of Box1. But I could not get the final position of Box3 (both X and Y are NaN) when I set animation because I think the Box3 position is calculated by doLayout, which happens after the diagram transaction. Am I supposed to override the doLayout method to put the animation specification there instead of between startTransaction and commitTransaction? Thanks for your time!

I hope I understand you correctly: You just want to turn off the default animation in this case, and substitute your own? If you add:

myDiagram.animationManager.canStart = function(reason) {
  if (reason === "Layout") return false;
  return true;
}

After your diagram initialization, do you get the behavior you want?

Hi Simon,

Thanks for your suggestion. What if I still want to keep the animation of the distance increment between Box1 and Box2 when Box3 is added?

The default animation is good and we want to keep it. The only thing that we want to change is that every time when a node is added, the node is flying in from the left side of the diagram. Do we have any other configuration options on how a node can be added in a different animated style?

Thanks,
Min

When you create the node make sure it has the location that you want it to “fly” from. I think by default it “flies in” from (0, 0), unless it’s a child of an expanded tree node or a member of an expanded group.

Yes, something like: https://codepen.io/simonsarris/pen/bGLOaxM?editors=1010

Hi Walter and Simon, this approach is exactly what I need. Thank you so much for your help!