search

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

Option for Parallel Lines #40

Closed vinnymicale closed 3 years ago

vinnymicale commented 3 years ago

Hey!

I think it would be a great addition to have the option of having parallel lines in the case of something like:

Currently, if this is the case, the lines would show as overlapping each other, since they'd both be taking the shortest path when using automatic anchors.

Although basic, I had something like this in mind:

parallel lines

Eliav2 commented 3 years ago

you can absolutely do it with the current API, just pass offset the anchors similar to the example here.

vinnymicale commented 3 years ago

Hey thanks for the response - that was one of the things I had tried originally, and it does seem to work well, but in the case of the example I had in my first post where the elements are aligned horizontally, passing an offset (with rightness, for example), will cause the lines to render a bit diagonally instead of a straight/vertical line between the two elements. It doesn't seem like changing the position would help fix this at all. Not a huge issue, but since the original point can be accomplished with an offset, are there any solutions to not have the lines be diagonal?

EDIT - Didn't fully read your response - the diagonal lines were caused by only specifying a startAnchor and not an endAnchor as well - passing args for both of those show the lines as straight. Thanks!

mkhoussid commented 3 years ago

@Eliav2 Are you talking about this component here? The property offset doesn't exist.