What is the (0,0) reference for Node positions ?

[gitHoussem]

Hello,
We are currently using this library for a project, we are trying to code a feature where an edge between 2 nodes is drawn using the shortest distance between the nodes. Meaning the position of the start of the edge and the position of the destination of the edge will depend on the nodes position.

Below is an example

The position of "MySuperCoolTable2" (Source node) is x: -200 y: -122
while the position of "MySuperCoolTable1" (Destination node) is x: 274 y: -120

As you can see the y position is correct and consistent however the x position we think is not. The nodes are close to each other there shouldn't be this difference.

Could you please give us more context about how the positions are calculated and what is the (0,0) for vueflow

[bcakmakoglu]

It's calculated from your mouse position projected onto the viewport, you can think of the coordinates as pixels basically.

Where did you read the positions from? The node itself?
Other than that I really don't see any issue here, the image doesn't really give me an idea on how far zoomed out you might be and how large your nodes are.
Positions are, I am pretty certain, accurate ^^

[bcakmakoglu]

You might also just want to check out the floating edges example, as that already demonstrates what you're trying to build.

[gitHoussem]

Hey @bcakmakoglu Thanks for the prompt response.
First of all, I appreciate your time and I want to thank you for this very cool library.
I do not doubt that the positions are accurate and properly defined. I (along with some peers) have a hard time understanding the logic and the meaning behind them.
The positions in my screenshots are read from the node itself using the position key.

Here's a better screenshot that shows the entire viewer so that you can get a better view on the zoom.

In this example. I tried to find where the (0,0) coordinates are.
I was expecting the (0;0) coordinates to be on the top right corner of the vueflow or at least at the exact center of the port. (50% from top & bottom and 50% from the sides). But in my example, I'm finding that the (0,0) is in a very odd place : neither a corner not a center.

My nodes have a width of 230px and a height of 270px

So my initial question is how is the position (0,0) defined ?
I hope this clarifies my initial question.

PS : the floating edge example is exactly what we need (+/- some tinkering) Thank you very much. I didn't see it in the documentation website. That's why we started to code it internally.

[bcakmakoglu]

If you don't move the viewport at all (i.e. no dragging, no fit view etc.) the 0,0 coordinates are top-left.
See this example.

[gitHoussem]

Thank you very much! I get it now. We were using fit-view-on-init