Hello Team,
We have used AvoidsLinksRouter.js file to resolve the horizontal and vertical links overlapping alignment issue. Now the links alignment is fine but the links are crossing over the nodes. Because of this links overlapping on nodes issue the links connections are not showing properly.
Is there any way to fix this? Please help us.
I had already responded to your earlier email message. You can decide whether to continue here or via email. But there isn’t much reason to continue in both channels.
Thanks Walter. We will continue here. I will send you the details in few mins.
Please find the attached image, check the links marked in red color box for the overlaps.
What is your link template?
It is normal go.Link and it’s like below
myDiagram.linkTemplate =
$(go.Link,
{
//some code
},
$(go.Shape,
{
//some code
}
When are you calling the AvoidsLinksRouter?
“LayoutCompleted”: function (e) { myRouter.avoidOrthogonalOverlaps(e.diagram.links); }
Could you please fill in the properties that you set on your Link template? Its Shape doesn’t matter.
$(go.Link,
// $(CustomLink,
{
routing: go.Link.AvoidsNodes,// routing: go.Link.Orthogonal, Orthogonal routing
corner: 5, // with rounded corners
curve: go.Link.JumpOver,
relinkableFrom: true, relinkableTo: true,
reshapable: true,
resegmentable: true,
},
What are the results if you set Link.routing to go.Link.Orthogonal instead of AvoidsNodes?
On top of orange device and green device now there are no overlaps. But there are more overlaps on top of blue color devices
.
Please check the below images:
Could you please make the first screenshot available in higher resolution? It’s just a thumbnail, so I can’t see the details.
Please find the image:
We have only these kind of overlapping issues Walter, Everything else is fine.
I’ll see if we can easily make some improvements there. This may take a while…
Yeah, Please check and help us Walter. Thanks.
Did you set any properties on the AvoidsLinksRouter?
If you did, try not doing so.
I will check and let you know Walter. Thank you so much.
Also, have you tried increasing the Node.avoidableMargin?
We are not assigning any properties to AvoidsLinksRouter. We tried setting Node.avoidableMargin but there were overlaps, so we removed it again.
I was suggesting that you use AvoidsNodes Link.routing and a Node.avoidableMargin that is 20 or so.
But I do not understand why your links are spread out so far from each other when AvoidsLinksRouter.linkSpacing is 4, the default value. Unless you have modified that code, coincident link segments should be spaced 4 units apart, but your screenshots show them much farther apart.
Some one else worked on this Walter. I am new here. I found below code in AvoidsLinksRouter.js file function
AvoidsLinksRouter() {
this.linkSpacing = 30;
this.maxIterations = 100;
this._segs = [];
this._list = new go.List();
}
Oh, so the code was modified. Try setting it to 4, and increasing the avoidableMargin on the nodes.
