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

Edges are still overlapped on bidirectional connections #10

Closed mgimenez closed 2 years ago

mgimenez commented 2 years ago

If you have something like:

{ id: 'e4-5', source: '4', target: '5', arrowHeadType: 'arrowclosed', label: 'label e-4-5', }, { id: 'e5-4', source: '5', target: '4', type: 'smoothstep', label: 'label e-5-4' },

they will look overlapped.

tisoap commented 2 years ago

@mgimenez Do you mean Edges overlapping each other? This problem is outside the scope of this component (avoiding intersections with Nodes, not Edges). You'll need to make your own custom Edge for this scenario, or try different/more connection points to avoid intersections.

Depending on the amount of Nodes and Edges, making a custom Edge that never intersects with other Edges can be impossible. It's the same scenario as the Three utilities problem.

mgimenez commented 2 years ago

Hey @tisoap, thanks for responding, I mean overlap nop intersect. Anyways I already solved. Thanks