File tree Expand file tree Collapse file tree 1 file changed +24
-0
lines changed Expand file tree Collapse file tree 1 file changed +24
-0
lines changed Original file line number Diff line number Diff line change @@ -125,6 +125,30 @@ You cannot hide a handle by removing it from the DOM (for example using `v-if` o
125
125
<Handle type="source" :position="Position.Right" style="opacity: 0" />
126
126
```
127
127
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
+
128
152
## Dynamic Handle Positions & Adding/Removing Handles Dynamically
129
153
130
154
::: tip
You can’t perform that action at this time.
0 commit comments