Connection Limit

This is an example of a custom node with a custom handle that can limit the amount of connections a handle can have using the isConnectable prop. You can use a boolean, a number (the number of max. connections the handle should have) or a callback function that returns a boolean as an arg for the isConnectable prop of the CustomHandle component.


import { Position, type Node, type Edge } from '@xyflow/svelte';
 
export const initialNodes: Node[] = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 0, y: 25 },
    sourcePosition: Position.Right,
  },
  {
    id: '2',
    type: 'custom',
    data: {},
    position: { x: 250, y: 50 },
  },
  {
    id: '3',
    type: 'input',
    data: { label: 'Node 2' },
    position: { x: 0, y: 100 },
    sourcePosition: Position.Right,
  },
];
 
export const initialEdges: Edge[] = [];