Wrong Handle position on nodes with dynamic height

[akoboy]

Wrong Handle position on nodes with dynamic height

Expected Behavior

When node height changes, handle position will update

Current Behavior

When node height changes, handle position not changing and edge drawn from old position

Steps to Reproduce

Custom node with textarea which changes node height.

Handle component:

<Handle
            v-if="data.outputHandleId"
            :id="data.outputHandleId"
            :position="Position.Right"
            :connectable="true"
            type="source"
        />

Detailed Description

Screencast:

VueFlowEdgePositionBug.mp4

Thank you.

[bcakmakoglu]

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?

[bcakmakoglu]

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.

[bcakmakoglu]

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

[bcakmakoglu]

@akoboy ping

[bcakmakoglu]

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

[AlexanderYW]

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 :)

[bcakmakoglu]

@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? 😅

[AlexanderYW]

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

[bcakmakoglu]

@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.

[bcakmakoglu]

@AlexanderYW
Any news for me? 😄

[AlexanderYW]

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 😵

[AlexanderYW]

@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

[bcakmakoglu]

@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.

[bcakmakoglu]

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.