Links are getting overlapped across nodes when nodes are expanded/collapsed

GoJS
1

I have a GoJS organizational chart, where nodes have the functionality of expand and collapse. For each node its child can have the following structure:

image
image823×652 18 KB

Now both A and B type nodes can be multiple but following the same design structure respectively.

I have a linkTemplate method in my diagram in which I am assigning the diagram.LinkTemplate to a custom class of GroupedLink which extends my go.Link class which has some overidden methods.

LinkTemplate() {
this.diagram.linkTemplate = new GroupedLink(go.Link.Orthogonal)
.add(
new go.Shape({ stroke: connector.lineColor, strokeWidth: 2 }),
new go.Shape({ fromArrow: ‘Circle’, scale: 0.65, fill: connector.fromCircleColor }),
new go.Shape({ toArrow: ‘Circle’, scale: 0.65, fill: connector.toCircleColor })
)
.bind(‘fromSpot’, ‘fromSpot’)
.bind(‘toSpot’, ‘toSpot’);
}

In groupedLink class, I have a computePoints() method to customize the point for routes.

computePoints() {
const result = super.computePoints();
if (result && this.toNode && this.toNode.containingGroup !== null) {
const loc = this.toNode.containingGroup.position;
const pt2 = this.getPoint(2);
const pt4 = this.getPoint(4);
this.setPoint(2, new go.Point(pt2.x, loc.y - 10));
this.setPoint(3, new go.Point(loc.x - 5, loc.y - 10));
this.setPoint(4, new go.Point(loc.x - 5, pt4.y));
}
return result;
}

Now the if condition will be executed if my current node type is of A and loc will be the position of that node type A.

According to my analysis, these points are working fine when whole diagram is completely expanded but as soon as nodes are getting collapsed, the position is getting changed and thus all the coordinates of point and in collapsed scenario sometimes I dont even need 3 points (in this case, pt at index 2, 3, 4).

Is there a way so that even in collapsed form, my points remain same and it doesn’t change with respect to collapsed/expanded form.

2

Do you mean when the subtree is collapsed, or when the Group (subgraph) is collapsed?

In the case of collapsed subtrees, why does it matter what the route is – the node isn’t visible, so the link is either not visible or needs to be routed differently anyway.

In the case of collapsed subgraphs, the link if still visible would need to be rerouted anyway.

It isn’t clear where the Groups are and which Nodes are members.

3

Okay, maybe I missed a point earlier. The routes and points are getting affected by the other nodes which I have in organizational chart.

So if my whole diagram is completely expanded, then the points are correct and there is no case of overlapping but as soon as some other subgraph are getting collapsed it starts affecting the position of other subgraph and thus the points.

4

Yes, when a node is moved, its connected links need to be re-routed.

That happens automatically, so your override of Link.computePoints (or another method that it calls) should just work with the updated node locations.

5

Yep, but still the links are getting overlapped. Is there any other way to avoid overlapping of links across nodes.
I have already intialized routing of links to go.Link.AvoidNodes.

Any suggestions would be very helpful

6

When Link.routing is AvoidNodes, links will normally route so that their paths do not cross over any nodes. However, nodes might change size or be moved, and that will not necessarily cause any link routes that they then overlap to be re-routed. But the DraggingTool does do such re-routing if needed, as you can see in samples such as the FlowChart sample. And if there’s a layout that happens because some nodes change size, that should cause the nodes to move and thus the links to be re-routed.

The AvoidsNodes routing can only work if there’s enough room between the nodes for the links to pass between them. Might your nodes actually be bigger than they appear to be? Try temporarily setting Node.background to “lime” or some other obvious color so that you can see whether there is enough space between the nodes.