Floating edges label misplaced

[activey]

Hi again ;>

After applying all the changes we've discussed today I'm facing one more issue. Here is the sandbox url: ttps://codesandbox.io/p/sandbox/blue-dawn-zkb7yv

The problem is hard to reproduce but here is the result:

For each edge there is a custom label renderer that displays the label x and y location, as you can see on the screenshot for node8 the label value stays " x " until you move node8 or any node connected to it. Because of that one of the labels always stays at 0x0 until node is moved.

Any ideas? ;)

[bcakmakoglu]

You're missing position: 'absolute' on your edge label renderer.

Here's a working sandbox.

[activey]

Unfortunately I was still able to reproduce this issue, please see the video attached.

labels-2023-05-29_19.39.52.mp4

[activey]

I'm sending new sandbox link: https://codesandbox.io/p/sandbox/sleepy-darkness-jhdx1l
It happens when all nodes have starting position of (0,0)
After moving them a bit from initial positions I end up with something like this:

[activey]

I've just tried it with react-flow, the effect is the same ;D Both vue-flow and reac-flow are affected.

[bcakmakoglu]

It's not library code that isn't working, it's the calculation utils and I currently don't have the time to debug it.
Easiest solution: Don't use nodes that overlap on the same coordinates and don't use 0,0 and it should be fine.

[activey]

Yup, I will try to use some random initials, anyway, thanks for all your help so far ;) I will try to contact react-flow devs in order to solve it.