Anchor directionality flips to go "short way"

[larissa-n]

May be related to #109.

Anchor flips to the opposite side if target is closer to that side. E.g. for targetAnchor: 'left', sourceAnchor: 'right':

And this is how it shows in react portal (without arrowheads):

[pierpo]

Hi, thanks for the issue!

Indeed this is related to #109. The library is quite limited right now when it comes to drawing shapes 😞
If you want something that looks good with what the library can provide, you may use targetAnchor: 'top', sourceAnchor: 'bottom'. I hope that's okay with you.

As for the second screenshot, it is related to the other issue that you posted with the portals.

[ivicok]

I have a similar issue with side-anchored arrows. A colleague of mine made a tool for displaying relations between words in a sentence, which are mostly top-down tree-like schemes. I wanted to modify it, so that equal-level relations appear as horizontal arrows - bumping into the issue. Unlike top/down-anchored arrows, side-anchors seem to be nudged by style properties (marginLeft/marginRight). When these overlap in calculation of the anchor position, the arrow is reversed. Compare the results with two variants of justifyContent:

[pierpo]

Sorry about that!

However, I think there might be a way to have a workaround in your case. It feels like your elements are not correctly designed!

See how there is a gap between your element and the arrow?

That's not normal. You should inspect your page, and you'll notice that your square is probably bigger than you think.

If you solve this, I think the arrow won't be reversed. It happens because two squares are too close to each other.

If you create a code sandbox reproducing this, I can maybe help finding a solution 😊

[ivicok]

Thank you for the answer. Yes, it appears, when I define margin for the square box, e.g.:

const boxStyle = { padding: "10px", border: "1px solid #ccc", borderRadius: "4px", fontSize: "12px", marginLeft: "16px", marginRight: "16px" };

When I remove the margin entries from the style definition, the arrow looks well, as long as I use the "space-between" for justifyContent in the style for the row. Editing margin here does not seem to affect the arrow.

const rowStyle = { margin: "100px 10px", display: "flex", justifyContent: "space-between" };

However, I would rather prefer "center" justification, which is otherwise more neat. I'm just not able to use horizontal arrows. When I define margins, it moves the arrow anchor, as in my first post; when I do not, all the elements are stuffed together like this (ignoring even the 10px defined in rowStyle):

[pierpo]

OK! Can you reproduce your example in a codesandbox so that I can play with it? I wonder if it's a styling tweak or if it should an option in the lib.

[ivicok]

The script uses PHP-generated variables to work, it does not work in Sandbox at all... But here is the source of the resulting web page (contain links to styles), if it helps - e5-6.txt