Dragged nodes' links misaligned in SideTreeLayout

GoJS
1

Hello,

I have been trying to replace the TreeLayout we are using in our app by the SideTreeLayout.
First results were very good :

diag1
diag11302×374 10.3 KB

Unfortunately I have trouble when dragging nodes around. The links redraw themselves to this :
image

Note : the problem is also present in the SideTreeLayout example.

I have been trying to fix this issue after seeing this post using Link.AvoidsNodes.
But it doesn’t seem to help.
gojs anim

Here is how I implemented the layout :

layout: $(SideTreeLayout, {
    treeStyle: go.TreeLayout.StyleLayered,
    angle: 90,
    layerSpacing: 40,
    nodeSpacing: 20
}),
2

Does setting Link.adjusting to go.Link.End help? But that won’t help if the user moves the node too far.

3

Well it has solved the problem indeed, thank you :)

Unfortunately it has caused another. :(
We are hidding some of the nodes, and we are displaying them by clicking a button.
The links of the newly displayed nodes go haywire if I set Link.adjusting.
gojs anim2

Without setting Link.adjusting this animation plays out fine :
gojs anim3

Edit :
If that’s any help, the hidden nodes have their visibilty property set to false.
To display them I simply set their position to the parent’s position and set the visibily property to true.

4

Here’s a possibility, where you don’t set Link.adjusting in your link template:

    class AdjustingDraggingTool extends go.DraggingTool {
      doActivate() {
        super.doActivate();
        if (this.draggedParts) {
          this.draggedParts.iteratorKeys.each(p => {
            if (p instanceof go.Node) p.findLinksInto().each(l => l.adjusting = go.Link.End);
          })
        }
      }
      doDeactivate() {
        if (this.draggedParts) {
          this.draggedParts.iteratorKeys.each(p => {
            if (p instanceof go.Node) p.findLinksInto().each(l => l.adjusting = go.Link.None);
          })
        }
        super.doDeactivate();
      }
    }

Install this customized DraggingTool by replacing the standard one:

$(go.Diagram, . . .,
  {
    draggingTool: new AdjustingDraggingTool(),
    . . .
  })
5

Yep, that seems to work fine :)

Thank you Walter, it’s exactly what I needed.