How can I adding handles dynamically?

[karenwanga]

Hello,
In the document I can see I need to use the updateNodeInternals method.
https://vueflow.dev/guide/node.html#dynamic-handle-positions-adding-handles-dynamically

But before I call updateNodeInternals(['1']),
Do I need to call applyNodeChanges first?

  applyNodeChanges([
    {
      id: '1',
      type: 'dimensions',
      handleBounds: bounds,
      resizing: true,
      updateStyle: true
    }
  ])

Or can I using this way to add a source type handle?

let node = findNode('1')
node?.handleBounds.source.push({ id: 'm1', position: 'top', height: 16, width: 16, x: 10, y: 10 })
updateNodeInternals(['1'])

My use case is let end user to add/remove handle (for different meanings) on node.

Thank you.

[bcakmakoglu]

You should basically never use applyNodeChanges to apply changes you create yourself.
Changes are always emitted by the internal state management itself and all you need to do is either forward those to applyNodeChanges or let them be auto-applied (which is the default setting).

The second way is also not okay, you cannot just add some arbitrary values for the handle, the values are calculated by the internal state management itself.

Could you first describe what isn't working for you? Handles should automatically be detected, even without calling updateNodeInternals (as they will try to add themselves to the correct handlebounds on mount of an handle if the handle doesn't exist yet).

[bcakmakoglu]

If there is an issue with adding/removing handles, a sandbox demonstrating that would also be helpful.

[karenwanga]

Thank you for your explanation, I'm really sorry that I used wrong way to add/remove handles.

Now, I am trying to use v-for to dynamically create handles in CustomNode. And this is working now.

<Handle v-for="(item, index) in data.handles" :key="index" type="item.type" :id="item.id" :position="Position.Left" :style="item.css"  />

As you said, handles automatically be detected, even without calling updateNodeInternals.

One more question, is there have a space-round function for auto layout each handle position?
I calcuated the handle position by myself, set top: '..px', bottom: '..px' in style for now, is this correct?

[bcakmakoglu]

No need to be sorry, the docs aren't super clear about this right now and I'll update them soon ^^

Mh... there's not functionality to automatically place handles at even distances, no.
You'd have to calculate it yourself as you said, which sounds good to me 😄.

[karenwanga]

Ok, thank you so much :)