Connections

ES Drager provides a powerful connection system that allows you to create visual relationships between elements using anchor points and bezier curves.

Basic Connections

To enable connections, set the connectable prop and provide a unique id:

<Drager
  id="node-1"
  connectable
  className="w-32 h-32 bg-blue-500"
>
  Source
</Drager>

Connection Events

Track connections using the onConnect event handler. This event provides details about the source and target nodes:

const handleConnect = (
  sourceId: string,    // ID of the source node
  sourceAnchor: string,// Position of source anchor ('top', 'right', 'bottom', 'left')
  targetId: string,    // ID of the target node
  targetAnchor: string // Position of target anchor
) => {
  console.log('Connected:', { sourceId, sourceAnchor, targetId, targetAnchor })
}

Connection Features

• Four anchor points per node (top, right, bottom, left)
• Visual feedback during connection creation
• Automatic bezier curve path calculation
• Connection lines update automatically when nodes move
• Click on connection lines to select them
• Press Delete/Backspace to remove selected connections

Complex Example

Connections work seamlessly with rotation and scaling:

Node 1

Node 2

Node 3