How to retain the relative position of nodes when moving one node in Go.Diagram?

GoJS
1

In my GoJS diagram, I have several Go.Group objects, each containing multiple Go.Node objects.
Here is some code snippet for the diagram:

const diagram = $(go.Diagram,
        {
            ...
            isReadOnly: false,
            maxSelectionCount: 1,
            initialAutoScale: Diagram.Uniform,
            scrollMode: Diagram.InfiniteScroll,
        }
    );

const groupTemplate = $(go.Group, go.Group.Auto,
        {
            ...
            isSubGraphExpanded: false,
            layout: $(go.LayeredDigraphLayout, { direction: 90 }),
            movable: true,
        }
     );

const nodeTemplate = $(go.Node, go.Node.Auto,
        {
            ...
            movable: false,
        }
     );

When the mouse is positioned over the canvas (but not inside any nodes), holding down and moving the mouse to a new position causes the entire diagram to move along with the mouse. However, when the mouse is positioned inside a node, the same action only causes that one node to move.

My question is: How can I achieve the same behavior when dragging a node, so that all other nodes also move along with it, while maintaining their relative positions?

I attempted to use the SelectionMoved listener, but it only activates after the movement has been completed, also resulting in the entire diagram moving, which is not the expected behavior.

diagram.addDiagramListener('SelectionMoved', (e: go.DiagramEvent) => {
        const startPoint = e.diagram.firstInput.documentPoint;
        const endPoint = e.diagram.lastInput.documentPoint;
        diagram.position.add(startPoint.subtract(endPoint));
        diagram.selection.first()?.position.add(endPoint.subtract(startPoint));
    });
2

By definition, “moving a node” means changing its Node.location, not its apparent position in the viewport. GoJS Coordinate Systems-- Northwoods Software

I think you want to disable the DraggingTool and thereby allow the PanningTool to scroll the diagram no matter where the mouse-down occurs. You can do that by either setting Diagram.allowMove and maybe Diagram.allowCopy to false, or by setting DraggingTool.isEnabled to false.

  new go.Diagram("myDiagramDiv",
    {
      // EITHER:
      allowMove: false,
      allowCopy: false,
      // OR:
      "draggingTool.isEnabled": false
    })

The “SelectionMoved” DiagramEvent can be useful, but not for what you are imagining, so don’t bother with it.

3

Thanks! I never imagined that such a straightforward configuration would achieve my desired outcome.
I attempted various methods, but none were successful.

Ultimately, I opted for the second approach, which involved simply adding 'draggingTool.isEnabled': false to the go.Diagram property.