Connection class

Represents a visual connection between two ports on different nodes in a node flow diagram.

A Connection links a source port on one node to a target port on another node, creating a visual edge that can be styled, animated, and labeled. Connections are reactive and use MobX observables for state management.

Key Features

• Port-to-port linking: Connects specific ports between nodes
• Reactive state: Uses MobX observables for animated, selected, and label properties
• Customizable styling: Supports custom ConnectionStyle and ConnectionEndPoints
• Three label positions: Supports startLabel (anchor 0.0), label (anchor 0.5), and endLabel (anchor 1.0)
• Data attachment: Can carry arbitrary data via the data property

Usage Example

final connection = Connection(
  id: 'conn-1',
  sourceNodeId: 'node-a',
  sourcePortId: 'output-1',
  targetNodeId: 'node-b',
  targetPortId: 'input-1',
  startLabel: ConnectionLabel.start(text: 'Start'),
  label: ConnectionLabel.center(text: 'Data Flow'),
  endLabel: ConnectionLabel.end(text: 'End', offset: 10.0),
  animated: true,
  style: ConnectionStyles.smoothstep,
);

// Update labels directly
connection.label = ConnectionLabel.center(text: 'Updated Flow');
connection.startLabel = null; // Remove start label

// Check node/port involvement
if (connection.involvesNode('node-a')) {
  print('Connection involves node-a');
}

Observable Properties

The following properties are reactive and will trigger UI updates when changed:

• animated: Whether the connection has flowing animation
• selected: Whether the connection is currently selected
• startLabel: Label at the start of the connection (anchor 0.0)
• label: Label at the center of the connection (anchor 0.5)
• endLabel: Label at the end of the connection (anchor 1.0)

See also:

• ConnectionLabel for label configuration
• ConnectionStyle for styling options
• ConnectionEndPoint for endpoint marker configuration
• NodeFlowController for managing connections in the flow