The path that a link takes is its route, and the calculation of that path is routing. In GoJS the route of a Link is held by the Link.points property, a List. If the route of an AvoidsNodes Link crosses a Node that it is not connected with, when there is room to do so, that will normally not happen.
However there are ways of achieving what you show in your screenshot. As I said above, programmatically moving that Node is the most likely way, but it is not the only one. That us why I keep asking what change(s) your app made just before the screenshot.
Do the new Arrays have data that is at all related to what was there before you called Diagram.clear? Why are you calling clear? Why are you replacing those two Arrays?
Does your link template have a TwoWay Binding on the Link.points property, or are you saving and restoring link routes in some other way? Or is your app not saving any link routes at all?
Q: Do the new Arrays have data that is at all related to what was there before you called Diagram.clear ?
A:Yes.
Q: Why are you calling clear ?
A: to clear the previous diagram as we are uploading new diagram data via excel
Q: Why are you replacing those two Arrays?
A: So that diagram should get updated as per uploaded data
Q: Does your link template have a TwoWay Binding on the Link.points property, or are you saving and restoring link routes in some other way?
A:No Idea ,any way to check that
If you are merely updating a diagram rather than replacing it with a completely different one, it is very wasteful to replace the Arrays, because that causes the Nodes and Links to be discarded and new ones created. The call to clear has already done the discarding part, but it would happen even if you didn’t call clear. It’s “clear” to me that you don’t need to call clear if you are just going to replace the Arrays. And Diagram.clear will also clear out the UndoManager, which you might not want to do.
Does the new data use the same key values as the old data? If so, I suggest that instead you call Model.mergeNodeDataArray and GraphLinksModel.mergeLinkDataArray. If the unique key values are not the same, then calling merge… methods won’t work.
After replacing the Arrays, do you ask the router to update the link routes again? I’m wondering if you need to wait until the normal routing has been computed.
Judging from your posts last September, above in this topic, you are already calling AvoidsLinksRouter.avoidOrthogonalOverlaps. I’m just asking you whether it is being called again after you replace the model Arrays, just as you did before after loading the model originally.
Remember also that it does not guarantee to avoid crossing over nodes.
Are you using gojs-react or gojs-angular? If not, is there a reason you aren’t creating a new model and then assigning Diagram.model in order to show a new diagram?
The reason I ask is because I think before you call AvoidsLinksRouter.avoidOrthogonalOverlaps the link routes need already to have been routed in the normal manner. So it would be natural to call that in an “InitialLayoutCompleted” DiagramEvent listener. But because you are setting Model.nodeDataArray and GraphLinksModel.linkDataArray, there won’t be any “InitialLayoutCompleted” event nor any other processing of Diagram.initial… properties.
If it is not reasonable to create a new model and assign Diagram.model, perhaps because you really are just updating a few things rather than showing a completely new model, then you should be calling Model.mergeNodeDataArray and GraphLinksModel.mergeLinkDataArray instead. Something like:
$(go.Diagram, . . .,
{
"LayoutCompleted": e => {
new AvoidsLinksRouter().avoidOrthgonalOverlaps(e.diagram.links);
},
. . .
})
Did you check that avoidOrthogonalOverlaps is being called? It should be called by your “LayoutCompleted” DiagramEvent listener, at the end of the transaction.
That’s exactly what the “LayoutCompleted” listener is doing, but (I hope) at the correct time.
For example, in other apps I have called that method in other listeners:
"LayoutCompleted": e => myRouter.avoidOrthogonalOverlaps(e.diagram.links),
"SelectionMoved": e => myRouter.avoidOrthogonalOverlaps(e.diagram.links),
"PartResized": e => myRouter.avoidOrthogonalOverlaps(e.diagram.links)
But remember that this functionality is experimental. It is not supported functionality of the GoJS library. There will be cases where it does not produce the ideal results.
I was depending on the “LayoutCompleted” event to let you calll avoidOrthogonalOverlaps at the right time.
Another way to test it interactively is to add an HTML button that calls myRouter.avoidOrthogonalOverlaps(myDiagram.links). Then once you see that everything has been updated, you can press the button to call that code. If the link routes are improved, then you know it works. If not, then maybe there is some other problem.
tried the above approach to call the code on click , the result is same , maybe we need some another approach for this , do you have any other workaround ?
If the user moves any of the nodes slightly, do the links whose routes were crossing over any nodes get rerouted to avoid those nodes?
The way to decide whether a link crosses over a node is to see whether any of its segments intersect with the rectangular area that the node occupies. That area is the Node.actualBounds plus the Node.avoidableMargin. Have you set Node.avoidableMargin to have negative values?
Also, please check that you do not set Node.avoidable to false. The default value is true.
I’m wondering if there is some code that is running later to cause the link routes to be invalidated, causing them to be routed again, thereby discarding the results of your call to AvoidsLinksRouter. Do you have any code that modifies any Link properties? If so, when do they execute? You could set a breakpoint there to see if it’s called after your call to AvoidsLinksRouter.avoidOrthogonalOverlaps.