You've been asking how to deal with a situation when two or more links connect the same elements, they are covering each other and therefore it's quite hard to interact with them. The solution introduced in this tutorial shows a function that automatically creates vertices so that they cross control points in a way that makes the links shape a cluster with gaps between them. JointJS has a built-in geometry library that we can use to find those control points.
The core of the solution is wrapped in one function named adjustVertices
. It accepts a graph
and a cell
(either link or element). If the cell
is a link, it will find all links
with the same source and target and then set vertices on them. We'll be calling those links 'siblings'. If
the cell
is an element, we execute our function for each distinct (in terms of its source and
target) connected link to the element.
Now we have to figure out when to call our function. Vertices need to be adjusted any time user changes the source or target of a link or he adds/removes one. Additionally we might want to recalculate the vertices when user translates an element.
Well, that's it. We can take a look at the result.
Try to move an element to see how the links follow. Then try to reconnect a link by dragging its arrowhead to see how the links shape a cluster.