Why are connections at the center of the node and not to the handle?

[surrealroad]

I have a custom node (in Svelteflow) with one input handle and one output handle. The connections are drawing to the center.
For example:

(Here the dots are the handles, but the connection is to the center of the div)
Why might this be happening?

[surrealroad]

OK I think I can answer my own question. If the custom node is wrapped in an {#if} block (ie to allow for svelte transitions), the edge gets drawn to the center as shown. Not sure if that's a bug or expected behaviour though?

As a workaround I can put the handles outside of the {if} block

[bcakmakoglu]

Basically what you're doing is delaying the rendering of the Handle, which causes the Edge to not know where the handle bounds are and instead just trying to use the center of the node as a fallback.

Without visible handles, edges cannot be rendered at the accurate positions - which is what you're producing by wrapping your component in an if for a transition.
If you need to do that, you'd have to call updateNodeInternals after the node has been rendered and is visible, but that would cause the edges to jump from center to the handle they are supposed to go.

TL;DR: The if isn't gonna work out the way you want it to imo.

[surrealroad]

Thanks for the explanation!