Adding a node/link to a TreeModel diagram doesn't trigger the animation

GoJS
1

Hi there, loving GoJS!

I’m working on a prototype that is much similar to the Org Chat example.

From the example you get

nodeContainer.mouseDrop = function (e, node) {
  const diagram = node.diagram;
  // #TODO - Support more than 1 node
  const selNode = diagram.selection.first();
  if (mayWorkFor(selNode, node)) {
    // find any existing link into the selected node
    const link = selNode.findTreeParentLink();
    if (link !== null) {
      // reconnect any existing link
      link.fromNode = node;
    } else {
      // else create a new link
      diagram.toolManager.linkingTool.insertLink(
        node,
        node.port,
        selNode,
        selNode.port
      );
    }
  }
};

which animates and works well. By animate, I mean the nodes gracefully reposition themselves.

Where as if I run that code but in my own custom function (not the mouseDrop click handler), it just triggers a refresh/flicker as oppose to the nice graceful repositioning animation.

I’m curious as to if this a known behavior?

2

Whenever you make a change to an existing model or diagram’s nodes or links, you have to make sure it happens within a transaction. Did you add the node/link during a transaction? It’s common to call Model.commit.

3

Thanks for the quick reply!

I have not tried commiting the transaction yeah, I will try now.

In the interim, the org chart example doesn’t seem to start/commit when dragging and dropping a new link → GoJS/orgChartEditor.html at master · NorthwoodsSoftware/GoJS · GitHub

4

Alright, wrapping the code in a transaction makes the animation works, thank you very much!

(It would still be great to know why the above linked example doesn’t have the start/commit in the drop handler)

5

The DraggingTool conducts a transaction. Also, please read: