Connection<C> 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.

Type Parameters

• C: The type of data stored in the connection. Use void or omit for untyped.

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)
• Typed data attachment: Can carry typed data via the data property

Usage Example

// With typed data
final connection = Connection<PriorityData>(
  id: 'conn-1',
  sourceNodeId: 'node-a',
  sourcePortId: 'output-1',
  targetNodeId: 'node-b',
  targetPortId: 'input-1',
  data: PriorityData(priority: Priority.high),
  startLabel: ConnectionLabel.start(text: 'Start'),
  label: ConnectionLabel.center(text: 'Data Flow'),
  animated: true,
  style: ConnectionStyles.smoothstep,
);

// Access typed data
if (connection.data?.priority == Priority.high) {
  print('High priority connection');
}

// Without typed data (use void or omit type parameter)
final simpleConnection = Connection(
  id: 'conn-2',
  sourceNodeId: 'node-a',
  sourcePortId: 'output-1',
  targetNodeId: 'node-c',
  targetPortId: 'input-1',
);

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