Wrong Handle position on nodes with dynamic height about vue-flow HOT 14 CLOSED

Thanks, might look at the updateNodeInternals if i encounter that issue again

Regarding the reproduction repo, sure I can provide one, but it will earliest be in 10 days time ish

from vue-flow.

Hey, thanks for reporting.
Can you tell me what exact version you were using?

Also can you provide a rough node structure?
Are the nodes inside the containers child-nodes?

from vue-flow.

Can you maybe provide a codesandbox example?
Here's a template.

I can't seem to be able to reproduce the issue locally - any resizing of the nodes results in recalculation of handle-bounds, so the edges connect properly.
Maybe I am missing something that is part of the way you structure your custom nodes that blocks the positioning.

Do all handles have a unique id? They need one if you're going to use multiple source/target handle types.

from vue-flow.

@akoboy have you seen my comments? :) I need a little help reproducing the issue properly

from vue-flow.

@akoboy ping

from vue-flow.

@akoboy ping, can you help me with a sandbox or anything which reproduces the issue?

from vue-flow.

Hi @bcakmakoglu, I also experience something similar to this, when using dynamic generated handles / dynamic height and added css transform with translate -50% to the node to make centered on the XY coordinates

I did disable this due to that bug tho. But was thinking to look into your example with Teleport and shrink animation, to see if it can be centered with javascript instead visually when dropped :)

from vue-flow.

@AlexanderYW When you dynamically generate handles you need to call the updateNodeInternals function (or emit that event from your custom node) so the node itself is aware of new handles. Otherwise your node does not recognize handles that have been created after the node was already parsed and placed.

If possible, can you provide a minimal reproduction so I can possibly debug the issue? 😅

from vue-flow.

@AlexanderYW Anytime you can provide is fine with me =) I just can't seem to reproduce it myself for some reason.
Any resizing I have been using did not produce the issue shown here, so I must be doing something wrong in reproducing it.

from vue-flow.

@AlexanderYW
Any news for me? 😄

from vue-flow.

Sadly not @bcakmakoglu ! I had an hour on Thursday and tried doing what I did to experience the issue, but i could not reproduce it, will look at it again later today or beginning next week, I think I'm forgetting something 😵

from vue-flow.

@bcakmakoglu I'm unable to reproduce the issue again

I did a basic implementation of what i did when last time when i first met the issue, and i dont see it now. What I did was I implemented "drag n drop components to canvas" and a custom node component with transform -50% on x and y axis to center the dropped component.

Maybe the issue is i wasn't using script setup back then.. But I have no clue what it could be

from vue-flow.

@AlexanderYW I'm not sure if it's a really good idea to use transform to position your node after dropping - that would most certainly de-sync what Vue Flow holds as the nodes' position with what you visually see as the nodes' position.
Edges don't really care about how you visualize your node components on top of the node that Vue Flow holds for you, it will always be relative to the position Vue Flow holds.
So you should rather just drop it in, add the node, and reposition it after adding it (which should not be noticable I'd assume) or, if you can set a fixed size on your nodes, just use that in a projection.

from vue-flow.

If this problem still persists, please re-open an issue with a possible reproduction of the problem, otherwise I can't really do anything about it.

from vue-flow.