docs: update handle docs
This commit is contained in:
@@ -946,44 +946,3 @@ const inputValue = ref('')
|
||||
@apply bg-primary rounded p-4;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Working with Dynamic Handle Positions / Adding Handles Dynamically
|
||||
|
||||
::: tip
|
||||
In Vue Flow 1.x, there's no need to manually invoke `updateNodeInternals` when dynamically adding handles.
|
||||
Upon mounting, handles will automatically attempt to attach to the node.
|
||||
However, if for any reason this isn't happening as expected, you can stick to the guideline provided below to enforce Vue Flow to update the node internals.
|
||||
:::
|
||||
|
||||
At times, you may need to modify handle positions dynamically or programmatically add new handles to a node. In this scenario, the [`updateNodeInternals`](/typedocs/types/UpdateNodeInternals) method found in Vue Flow's API comes in handy.
|
||||
|
||||
Invoking this method is vital when dealing with dynamic handles. If not, the node might fail to recognize these new handles, resulting in misaligned edges.
|
||||
|
||||
The `updateNodeInternals` function can be deployed in one of two ways:
|
||||
|
||||
- **Using the store action:** This approach allows you to update several nodes at once by passing their IDs into the method.
|
||||
- **Emitting the `updateNodeInternals` event from your customized node component:** This doesn't require any parameters to be passed.
|
||||
|
||||
::: code-group
|
||||
|
||||
```js [store action]
|
||||
import { useVueFlow } from '@vue-flow/core'
|
||||
|
||||
const { updateNodeInternals } = useVueFlow()
|
||||
|
||||
const onSomeEvent = () => {
|
||||
updateNodeInternals(['1'])
|
||||
}
|
||||
```
|
||||
|
||||
```vue [emit event]
|
||||
<script setup>
|
||||
const emits = defineEmits(['updateNodeInternals'])
|
||||
|
||||
const onSomeEvent = () => {
|
||||
emits('updateNodeInternals')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Reference in New Issue
Block a user