Eliav2 / react-xarrows

Draw arrows (or lines) between components in React!
https://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark
MIT License
584 stars 75 forks source link

Support for Overlapping Arrows Labels/Multi-Arrows between the same nodes #129

Open mjsokolo opened 2 years ago

mjsokolo commented 2 years ago

Is your feature request related to a problem? Please describe. I have a use case where users generate an arbitrary number of draggable nodes and can add multiple arrows going back and forth between them along with labels on those arrows.

If two nodes share multiple arrows, by default, the arrows and labels will be drawn superimposed on each other. This can be manually fixed using the anchor offset option. However, it would be nice for offsets to be automatically adjusted to not be superimposed. This would be helpful for my use case where the number and positions of anchor points is not known in advance.

Describe the solution you'd like in addition to the auto option for anchor positioning, an option like smart-auto where anchor positions are moved to not coincide.

Describe alternatives you've considered I've considered writing my own smart-auto tool that offsets so that labels don't overlap. I'd need to dig into the source to figure out how the auto algorithm determines anchor position.

Additional context This is an example where I've manually created offsets so arrows do not overlap. It would be great if this could be automatic. image

vikasacharya16 commented 2 years ago

For one particular Id there will be many lines going out and coming in. So, it's possible to calculate the gap between them and curve. Still i'm looking into it but simply want to know @mjsokolo did u found any solution for this?

msreptrak commented 2 years ago

Hi @vikasacharya16 I haven't found a simple fix for my application. I imagine there could be a function that calculates offsets or curvatures based on number of arrows and where they attach (top, right, bottom, or left)