docs: update handle docs

This commit is contained in:
braks
2024-06-13 19:29:46 +02:00
parent c30222eec3
commit 532d52232d
2 changed files with 117 additions and 52 deletions

View File

@@ -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>
```
:::