Skip to content

Commit ea59a71

Browse files
committed
docs: add info on handle limit
1 parent e94e0e8 commit ea59a71

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

docs/src/guide/handle.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,30 @@ You cannot hide a handle by removing it from the DOM (for example using `v-if` o
125125
<Handle type="source" :position="Position.Right" style="opacity: 0" />
126126
```
127127

128+
## Limiting Connections
129+
130+
You can limit the number of connections a handle can have by setting the `connectable` prop on the `<Handle>` component.
131+
132+
This prop accepts a boolean value (defaults to `true`), a number (the maximum number of connections), or a function that returns a boolean.
133+
134+
Using a function allows you to implement custom logic to determine if a handle can be connected to or not.
135+
```vue
136+
<script lang="ts" setup>
137+
import { Position, Handle, type HandleConnectableFunc } from '@vue-flow/core'
138+
139+
const handleConnectable: HandleConnectableFunc = (node, connectedEdges) => {
140+
// only allow connections if the node has less than 3 connections
141+
return connectedEdges.length < 3
142+
}
143+
</script>
144+
145+
<template>
146+
<Handle type="source" :position="Position.Right" :connectable="handleConnectable" />
147+
</template>
148+
```
149+
150+
151+
128152
## Dynamic Handle Positions & Adding/Removing Handles Dynamically
129153

130154
::: tip

0 commit comments

Comments
 (0)