Nodes and edges within group node are misaligned when we drag the group node on the diagram

In our diagram we have a group node with go.TreeLayout, which can be expanded/ collapsed by clicking on a link. So when a few nodes are added to the group node, everything works fine. For instance, this is the original state of the diagram with a group node, “For Loop”:

Now when we move a node within the group node, followed by dragging the group node itself on the canvas, all the nodes/ edges within the group node are misaligned.

Say, we first moved “Start” node within the “For Loop” node and diagram’s state changes as below:

Now, when we drag the “For Loop” group node on the canvas, everything within the “For Loop” node misaligns as below:

FYI, Both diagram and group node are using go.TreeLayout. Also collapsing and re-expanding the group nodes realigns everything properly.

Could you please try setting Layout.isRealtime to false on all of your layout instances? I’m wondering if that might help.

Much better than the original issue. I could still see a minor distortion where edges don’t exactly meet ports on nodes:

Hmmm, I don’t know what the problem might be. Precisely which version of GoJS are you using? We did just yesterday fix an obscure bug with the shifting of links when DraggingTool.isGridSnapEnabled was true and the grid cell size wasn’t an integer.

We are using go js v2.1.4

Well, I suppose it should be easy to try the latest version.

But I still think you actually want to use ParallelLayout, as this sample does: Flowgrammer