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
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
You can’t perform that action at this time.
0 commit comments