Moving nodes doesn't trigger layout redrawing

GoJS
1

I want to move nodes in the following manner: A user drags the node away from its position. Then the previous and the next node of the dragged node will be connected with a single link.
When the user drops the node on a link the node should be inserted between the two nodes which are connected through this link.

The image shows the current behavior. If the user drops the node at the end of the group the behavior is as expected. Otherwise the layout redrawing is not triggered (you can see this in the console; when doLayout() is called a message appears on the console).
The Layout manager is a extended version of Parallel Layout

Here is my code:

let tool = this.diagram.toolManager.draggingTool;

tool.doMouseMove = function() {
    go.DraggingTool.prototype.doMouseMove.call(tool);
};

tool.doActivate = function() {

     go.DraggingTool.prototype.doActivate.call(tool);

         let draggedPart = tool.currentPart;
         if (draggedPart instanceof go.Node) {

             // User drags a node -> Connect the previous and next node
             this.diagram.startTransaction('startMoving');
             draggedPart.findLinksInto().iterator.first().toNode = draggedPart.findNodesOutOf().iterator.first();
             this.diagram.remove(draggedPart.findLinksOutOf().iterator.first());
             this.diagram.commitTransaction('startMoving');

         } else {
              go.ToolManager.prototype.stopTool.call(tool);
         }
};

tool.doMouseUp = function() {

    let linksNearBy = this.diagram.findObjectsNear(this.diagram.lastInput.documentPoint, 5, (obj => obj), (obj) => (obj.part instanceof go.Link));
        let parts: go.Map<go.Part, go.DraggingInfo> = this.diagram.toolManager.draggingTool.draggedParts;

        if (linksNearBy.iterator.count == 0 || parts == null) {
            go.ToolManager.prototype.stopTool.call(tool);
            return;
        }
    
        let link = linksNearBy.iterator.first().part as go.Link;
        let part = parts.first().key;

        if (part instanceof go.Node) {

            go.DraggingTool.prototype.doMouseUp.call(tool);

            let canPerformResult = MovePageElement.canPerform(part as go.Node, link);
            if (canPerformResult[0] == true) {

                MovePageElement.perform(part as go.Node, link);
                go.DraggingTool.prototype.doMouseUp.call(tool);
                    
             } else {
                go.ToolManager.prototype.stopTool.call(tool);
             }
         } else {
             go.ToolManager.prototype.stopTool.call(tool);
         }
};
```

I think the problem is `go.DraggingTool.prototype.doMouseUp.call(tool);`. Sometimes the layout redrawing is triggered sometimes not. (The links are drawn correctly).
How can I get this to work correctly?
2

I believe you should not be overriding methods of the DraggingTool. Instead implement a GraphObject.mouseDrop event on your Links and Nodes to handle cases where you want to restructure the relationships.

And implement a “SelectionMoved” DiagramEvent listener to call Layout.invalidateLayout on the Layout of the Group (if Node.containingGroup is non-null) or Diagram of the moved nodes. Read GoJS Layouts -- Northwoods Software for discussion about layout invalidation.

3

Thank you for your tip.
It works perfectly with a “SelectionMoved” Listener.

diagram.addDiagramListener("SelectionMoved", () => {

    let it = diagram.selection.iterator;
    while (it.next()) {

        let val = it.value;

        if (val instanceof go.Group) {
            diagram.layout.invalidateLayout();

        } else if (val instanceof go.Node) {
            if ((val as go.Node).containingGroup != null) {
                (val as go.Node).containingGroup.invalidateLayout();
            }
        }
    }
});