Description:
I am using the LayeredDigraph layout in GoJS for my diagram, but I have encountered an issue where the links stop following their original path and instead render as straight lines when the user clicks on a node. This behaviour is unexpected and doesn’t align with the desired layout.
I have reviewed my code and haven’t found any explicit logic that modifies the link routes on click. I also checked for any custom link routing logic that could be interfering with the layout algorithm, but couldn’t find any. Additionally, I don’t have any explicit layout update code triggered on click.
(Interestingly the LayeredDigraph example seems to do the same thing)
I would like to understand why this behaviour is occurring and how I can prevent the links from deviating from their original path when clicked. Any insights, suggestions, or guidance on resolving this issue would be greatly appreciated.
Thank you for your help!
Clicking on a node will not cause any connected links to re-route themselves. You can see that in our samples such as:
Layered Digraph Layout
Beat Paths
However, if you move or resize a node, then links will need to re-route themselves, so as to keep links appearing to actually connect with their nodes.
Normally recomputing a link route will cause the routing to lose any previously determined routing, but you can set the Link.adjusting property so that the new route maintains certain aspects of the old route, depending on which value is used for adjusting.
So my guess is that you are actually shifting nodes a bit when you think you click on them – you are actually doing “mousedown”, "mousemove"s, and then a “mouseup”.
Yes, adding the line to the diagram initialization has the desired effect.
diagram.linkTemplate.adjusting = Link.End;
That’s great, thanks.
As for the mouseDown vs onClick, is there a way to change the delay before a click becomes a click/drag?
I suspect it’s not a matter of time/delay – it’s whether or not the mouse/finger/stylus moves more than a couple of pixels away from the mouse-down point.
In general a mode-less tool won’t run unless it’s canStart predicate returns true. In the case of DraggingTool.canStart, it (like other tools such as the ClickSelectingTool which implements click behavior, and other such as ContextMenuTool, DragSelectingTool, and PanningTool) calls Tool.isBeyondDragSize to decide if it’s like a click or not. Generally they do something like:
public canStart(): boolean {
if (!this.isEnabled) return false;
. . . maybe check whether the Diagram allows this tool to run . . .
if (this.isBeyondDragSize()) return false;
. . . further checks for the particular tool . . .
return true;
If you want to customize the DraggingTool, override its DraggingTool.isBeyondDragSize method.
After all that and what I said about delay, I should point out that there is also a DraggingTool.delay property. So you could increase that. But that wouldn’t help with other tools potentially being invoked that you might not want to run. Although those tools probably wouldn’t move the node, thereby invalidating the routes of connected links, so just increasing the delay would also solve your immediate problem.
So you might as well take the easy way out and increase the value of DraggingTool.delay:
new go.Diagram(. . .,
{
"draggingTool.delay": 200, // try different values here
. . .
})
But I suspect that requiring a larger motion rather than larger time motionless is what you really want. It’s hard for me to tell what’s actually causing the behavior that you don’t like, which is why I have talked about both issues.
This is interesting, by default we let the user init the diagram with one of two layouts: ForceDirected or LayeredDigraph.
When setting linkTemplate.adjusting during init works perfectly.
For ForceDirected we set Link.None, for LayeredDigraph we set Link.End.
However the user can also toggle between the layouts, and the links don’t seem to follow the linkTemplate.adjusting rule.
The links always follow what was set during the initialization.
Setting the property explicitly when toggling layouts has no effect on the behaviour. (although the prop is the correct value)
Also, invalidating the linkTemplate layout, the diagram layout, and even calling diagram.layoutDiagram(invalidateAll) don’t seem to effect the link routing.
Edit:
Calling diagram.rebuildParts() after changing linkTemplate.adjusting and diagram.layout works.
The method documentation says that this is extremely wasteful, however, I am not measuring a difference. Is this because toggling between layouts is already so expensive?
Yes, because neither of the layouts that you are using sets Link.adjusting, the value remains from however it had been set when instantiated. So you need to set that property on each Link before setting Diagram.layout.
myDiagram.commit(diag => {
diag.links.each(link => link.adjusting = . . .);
diag.layout = . . .;
});