Links have a tendency to get close to the node

mlerman · July 18, 2018, 2:52pm

Hello!

I have a simple diagram using the LayeredDigraphLayout, with a loop, like so:

The diagram’s allowMove is set to false. If I select any node, the layout does not change. However, if I click the node named “More questions”, or the one named “PriorTickets” and without releasing the button, move the mouse a bit as if I were trying to move the node, the link will, once the button is release, be shown very close to the node:

If I set allowMove to true, and then try to actually move the “MoreQuestions” node, the link will follow while being very close to the node, as above:

Would you have any idea as to what I could do to keep the original horizontal separation between the nodes and the links? I tried changing the columnSpacing, but that worked only when the layout was good (as shown in the first screenshot) but it would not change anything otherwise.

Thanks!
Marc.

walter · July 18, 2018, 3:31pm

It’s the LayeredDigraphLayout that is routing the Links, resulting in the horizontal spacing that you like.

But when the user moves a node, all connected link routes are invalidated and then recomputed again with the default routing. The layout is not involved.

I don’t understand why the links are being routed again even when the node has not actually moved because you set Diagram.allowMove to false. I suppose we should investigate that.

So if you want to change the default routing so that it leaves more space between the route and nearby nodes, it depends on whether Link.routing is AvoidsNodes or just Orthogonal.

If your links use AvoidsNodes routing, you could try setting Node.avoidableMargin to a value that is larger than the default value.

mlerman · August 8, 2018, 4:57pm

Thanks Walter, setting Node.avoidableMargin did make things work as I was hoping.

I checked again (just in case) and Diagram.allowMove was false. There may be an issue there.

mlerman · August 14, 2018, 6:59am

Hi Walter,

Sorry I’m reopening this: with Node.avoidableMargin, I get the opposite effect to what I had without it: the first time the diagram is laid out, the link is very close to the node. When I try to move a node (it does not move of course because Diagram.allowMove is false) then the link is positioned properly.

walter · August 14, 2018, 11:07am

Are you asking about the routing that LayeredDigraphLayout is producing, before the default link routing happens that is determined by AvoidsNodes Link.routing?

Maybe you need to decrease the LayeredDigraphLayout.columnSpacing property and implement an override on your instance of LayeredDigraphLayout like:

  $(go.LayeredDigraphLayout,
    { . . .,
      columnSpacing: 10,
      nodeMinColumnSpacing: function(v, topleft) {
        if (v.node === null) return 1;
        return go.LayeredDigraphLayout.prototype.nodeMinColumnSpacing.call(this, v, topleft);
      }
    })

Caution: I haven’t had time to try this – please pardon me if this produces weird results. If it doesn’t work for you I can look into this later this morning.

mlerman · August 23, 2018, 8:28am

Thanks for this Walter (sorry it took me a while to respond).

I tried what you suggested (but I replaced minColumnSpacing with minColumnSpace since it was the actual method name).

Unfortunately, it did not change anything: I’m getting the same behavior as in my first message in this thread…

walter · August 23, 2018, 1:30pm

But you said that increasing the Node.avoidableMargin did help. What has changed?

If you have AvoidsNodes routing of Links, I think the LayeredDigraphLayout routing does not happen, so what I suggested for minColumnSpace does not matter. (BTW, thanks for the spelling correction.) Unless you had changed the routing of Links to be just Orthogonal, in which case the LayeredDigraphLayout will do its own routing of the links.

mlerman · August 24, 2018, 9:50am

Hi Walter,

Node.avoidableMargin did help by itself. When I added your suggested override of minColumnSpace, things got worse as nodes overlapped each other horizontally. I then significantly increased columnSpacing to avoid that but then it sort of counter-balanced the avoidableMargin.

And yes, I do have the routing of links set to Link.AvoidsNode. As a matter of interest, I changed the routing to Link.Orthogonal and the loop again was laid out very close to the node (but this time, consistently, with no change of layout as I try to move nodes). Maybe this gives you a hint as to where my problem could come from.

In the meantime, I am going to keep Link.AvoidsNodes and Node.avoidableMargin. This still tries to relayout the links as I try to move nodes (even though Diagram.allowMove is false) but not as badly as before.

I would however appreciate if you could check why a layout would take place when trying to move a node in a diagram where moves are not allowed.

Thanks very much in advance,
Marc.

walter · August 24, 2018, 11:12am

What’s going on (with link rerouting upon a drag that was unsuccessful because Diagram.allowMove is false) is that even though the node has not moved, if the avoidable area for that node is intersected by a link’s route, that link’s route will be invalidated.

The problem is that in the general case, even though a node may not have moved, other nodes and links may have been moved, and that might cause a link to be too close to or overlapping with the unmoved node. And we would want to reroute those links, or else someone will complain that there’s a link that crosses over a node.

In the situation that you have, where none of the nodes can move, perhaps we could treat that as a special case. That requires further thought.

By the way, if you had also set Diagram.allowCopy to false, then the DraggingTool would have no reason to run, thereby avoiding that problem. (I’m also assuming you haven’t set Diagram.allowDragOut to true.)

mlerman · August 24, 2018, 1:22pm

Thanks Walter. I did not have Diagram.allowCopy set to false (incorrectly). Now that it is false, I do not get the spurious relayout anymore.