react-xarrows icon indicating copy to clipboard operation
react-xarrows copied to clipboard

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

Open mjsokolo opened this issue 3 years ago • 2 comments

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

mjsokolo avatar Mar 17 '22 22:03 mjsokolo

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?

vikasacharya16 avatar Oct 03 '22 08:10 vikasacharya16

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)

msreptrak avatar Oct 03 '22 15:10 msreptrak