ArrowsBetweenDivs: arrow should start _outside_ of the div, even if its not the shortest path.

[larissa-n]

This is a great library! One of the few svg arrow libraries that works well in portals. Thanks for creating and maintaining it.

Here's an interesting case: if it's the shortest path, arrow ends will flip and cut straight through elements the arrow is supposed to connect. Here:

Try it: https://codesandbox.io/s/popout-diagram-react-simple-arrows-edp0x

[uladkasach]

thanks! glad you find it useful :)

the ArrowsBetweenDivs component lets you (requires you to, really :P) customize where to start and end the arrow (as well as whether its horizontal or vertical)

by updating

            <ArrowBetweenDivs
              from={{ id: "el2", placement: ArrowAnchorPlacement.BOTTOM }}
              to={{ id: "el3", placement: ArrowAnchorPlacement.TOP }}
            />
            <ArrowBetweenDivs
              from={{ id: "el3", placement: ArrowAnchorPlacement.RIGHT }}
              to={{ id: "el4", placement: ArrowAnchorPlacement.LEFT }}
              orientation={LineOrientation.HORIZONTAL}
            />

to

            <ArrowBetweenDivs
              from={{ id: "el2", placement: ArrowAnchorPlacement.BOTTOM }}
              to={{ id: "el3", placement: ArrowAnchorPlacement.TOP }}
            />
            <ArrowBetweenDivs
              from={{ id: "el3", placement: ArrowAnchorPlacement.BOTTOM }}
              to={{ id: "el4", placement: ArrowAnchorPlacement.TOP }}
              orientation={LineOrientation.VERTICAL}
            />

you can make the connection look like this: (like the first arrow you made)

My hope was that letting the user customize the arrow placement and orientation would be sufficient for most use cases. Do you have a use case that this is not sufficient for?

[larissa-n]

Thank you. So then you could not do something like this:

[uladkasach]

Ah. I see what you mean now.

Unfortunately this library does not support that use case yet. It would be great to do though.