jsPlumb: how to make Flowchart connectors avoid intersecting elements?

Question

Is it possible to make jsPlumb Flowchart connectors not to cross connectable items or specified elements (in the example: elements with \'item\' class)?

Default Flowchar

Answer 1

Actually, the solution to your problem is deeper, especially if you're working with dynamic data.

After some hours of digging I finally found a "crack", not a pretty solution, but a crack.

I just did this change for Flowchart connectors, also I am not familiar at all with the other connectors, never used them.

After considering various things like midx and midy and initial stubs (those should be used in the complete solution but I abandoned them), simplest thing to do is to search for the addSegment function in connectors-flowchart.js file. That's where the segments are added.

Prior to adding the current segment (push it in the segments array), you check if it will intersect with any of your elements, just calculate some intermediary points (thus adding additional segments, breaking the initial one into pieces) so it basically takes a detour around the intersected element.

If more details are needed, I'd be happy to share.