Misplaced egdes (Unaligned edges)

[aryankarim]

When using a custom node. All the handles seems to placed at the (0,0) position of the div. Anyone has an idea why is that?

[aryankarim]

After 7 hours of debugging, I figured it out. It was because the parent element of the VueFlow was a pop-up and had a scaling transition on it.

[bcakmakoglu]

Sorry I was already sleeping when you posted this 😅
Yeah I was suspecting that this was the issue.

Problem is an animation that has a scaling transition as you correctly identified. To fix this you can either

1. Hide the Flow until the transition is done
2. Call updateNodeInternals when the transition is done
3. Use a transition that does not use a transform

[AkshayReddyEmmadi]

Can you share the snippet for the same 🙃

[bcakmakoglu]

Snippet for what? ^^

[AkshayReddyEmmadi]

I am also the facing the same issue, can you share the code snippet for the solution you have suggested

[bcakmakoglu]

Well solution 1. and 3. is up to you, I have no code-snippets for these.
You can hide a flow with css or v-show or whatever you wanna use to hide it.
Using a different transition is also not something I can show you a code snippet for - I don't know what Modal you use etc., that's for you to figure out 😄

As for 2. - there's a section in the docs for it.