tisoap / react-flow-smart-edge

Custom Edge for React Flow that never intersects with other nodes
https://tisoap.github.io/react-flow-smart-edge/
MIT License
256 stars 35 forks source link

Make edges not overlap each other #43

Closed albohlabs closed 1 year ago

albohlabs commented 1 year ago

Is your feature request related to a problem? Please describe.

There are multiple nodes layouted^TM by elkjs and afterwards painted on the canvas. The nodes are not draggable, so the user can change the position and trigger the recalculation of the edges by PathFinding.js. The Problem here is, that the user is not able to recognize which edge connects which nodes.

Describe the solution you'd like

I thought that marking the edge path points via setWalkableAt as not walkable would force the edges to not overlay each other anymore. What do you think about this?

Describe alternatives you've considered

Hacking on the PathFinding.js implementation.

Additional context

image

tisoap commented 1 year ago

Hey @albohlabs ! Making edges not overlap with each other is outside the scope of this package, and trying to do so it's actually impossible depending on the number of nodes and edges. It's the same as trying to solve the three utilities problem.