Not drawing to Target

[hellochar]

Nice library. I'm trying to get an arrow to connect the tops of two adjacent elements:

const relations = [{
  targetId: "element" + (i+1),
  sourceAnchor: "top",
  targetAnchor: "top"
}]

But it seems to misunderstand where "top" is on the target:

I'd like for the line to come out the top and curve back down into the top of the target. Weirdly it works if I actually put the elements below each other:

But if I then try to go from the right->top or bottom->top, it still breaks:

It seems the library is calculating arrowhead direction based on the vertical offset of start and end points, when it should be instead dictated by the anchor itself (a "top" anchor should always have an arrowhead pointing down into it at the top)

Full code at: https://codesandbox.io/s/dynamic-number-and-ticker-and-lookatmouseelement-jy8uv , scroll down in the page and look at Arrows.tsx

[pierpo]

Hi @hellochar!

Thank you for reporting this. I had not anticipated this kind of layout when I implemented the position computation algorithm.

I need to think this through. No ETA yet, sorry 😬