In manhattan routing, link path overlaps whenever routes are same.

[csruchitaoza]

Introduction

I need the following functionality:

1. Smart routing algorithm that avoids other cells while drawing a line
2. The line should not overlap with other line

Tried solutions :
Multiple connection siblings ( but I still need smart routing )
ELK ( In this algorithm also there are some colids)
Jump overs ( after adding a jump, the line is going to the same path )
Other routings ( manhattan seems a good option but it overlaps the line)

A quick answer would be helpful. Thank you.

Using tech - Angular 17, JointJs/Core

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

The manhattan router does not avoid other links.

You can check libavoid library example, here.

[kumilingus]

I think it's the dist folder the files are served from in Angular.

[csruchitaoza]

Hi. I solved that error by providing a path in the Load function

But there's one issue in drawing lines

As you can see in this image, Lines are drawn slightly higher. Even for a single line, it is a bit higher. Any idea?

it gives below warning in console
ShapeConnectionPin constructor not between 0 and 1.

[kumilingus]

Not sure. You can try to debug why x / width is not between 0..1 here.

[kumilingus]

It reads the position of the ports from the model. There is a restriction that the port must be on the boundary of the element for the router to work.
Either redefine your ports or adjust the ShapeConnectionPin accordingly.

[kumilingus]

You could try increasing the shapeBufferDistance or rewriting the router to return a bounding box instead of element.getBBox(), which returns a rectangle that includes the ports.