How to resolve overlapping issue with joint js links

Question

I need a solution to resolve the over lapping issue with joint js links.

For example

Image1

to

Image2

I'm implementing a process flow diagram in JointJS where the user can delete elements as well as add new ones, and re-link things in a variety of orderings. The graph is using the auto-layout features of the joint.layout.DirectedGraph library with Dagre to re-organize the graph each time something is deleted, added, unlinked or re-linked. One odd issue has cropped up and I'm not sure yet how to handle it.

Say I have a "fork" process with two out ports, one on each side, and a single in port at the top. Depending on the ordering of the elements in the array, the auto layout can sometimes place the child element of the left-hand port to the right of the child element of the right-hand port, so the resulting links are crossed.

Is there some straightforward way to influence the rank ordering in the layout?

I have tried the below soluiton

joint.layout.DirectedGraph.layout(this.graph, { setLinkVertices: true, ranker: 'longer-path', rankDir: 'TB', dagre: dagre, rankSep: parseInt(70, 10), edgeSep: parseInt(30, 10), marginX: 100, marginY: 270 });