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)
startPoint: Custom start endpoint marker
endPoint: Custom end endpoint marker
color: Custom color for the connection line
selectedColor: Custom color when selected
strokeWidth: Custom stroke width for the connection line
selectedStrokeWidth: Custom stroke width when selected

Constructors

Connection({required String id, required String sourceNodeId, required String sourcePortId, required String targetNodeId, required String targetPortId, bool animated = false, bool selected = false, bool visible = true, C? data, ConnectionStyle? style, ConnectionLabel? startLabel, ConnectionLabel? label, ConnectionLabel? endLabel, ConnectionEndPoint? startPoint, ConnectionEndPoint? endPoint, double? startGap, double? endGap, ConnectionEffect? animationEffect, bool locked = false, Color? color, Color? selectedColor, double? strokeWidth, double? selectedStrokeWidth}): Creates a connection between two ports.
Connection.fromJson(Map<String, dynamic> json, C fromJsonC(Object? json)): Creates a Connection from a JSON map.
factory

Properties

animated ↔ bool: Whether the connection shows flowing animation.
getter/setter pair
animationEffect ↔ ConnectionEffect?: The animation effect to apply to this connection.
getter/setter pair
color ↔ Color?: Optional custom color for the connection line.
getter/setter pair
data → C?: Optional typed data to attach to the connection.
final
endGap → double?: Optional gap between target port and end endpoint in logical pixels.
final
endLabel ↔ ConnectionLabel?: The label at the end of the connection (anchor 1.0).
getter/setter pair
endPoint ↔ ConnectionEndPoint?: Optional custom end endpoint marker.
getter/setter pair
hashCode → int: The hash code for this object.
no setterinherited
id → String: Unique identifier for this connection.
final
label ↔ ConnectionLabel?: The label at the center of the connection (anchor 0.5).
getter/setter pair
labels → List<ConnectionLabel>: The list of all non-null labels displayed along the connection path.
no setter
locked → bool: Whether this connection is locked from deletion.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
selected ↔ bool: Whether the connection is currently selected.
getter/setter pair
selectedColor ↔ Color?: Optional custom color when the connection is selected.
getter/setter pair
selectedStrokeWidth ↔ double?: Optional custom stroke width when selected.
getter/setter pair
sourceNodeId → String: ID of the node containing the source port.
final
sourcePortId → String: ID of the source port on the source node.
final
startGap → double?: Optional gap between source port and start endpoint in logical pixels.
final
startLabel ↔ ConnectionLabel?: The label at the start of the connection (anchor 0.0).
getter/setter pair
startPoint ↔ ConnectionEndPoint?: Optional custom start endpoint marker.
getter/setter pair
strokeWidth ↔ double?: Optional custom stroke width for the connection line.
getter/setter pair
style → ConnectionStyle?: Optional custom style override for this connection.
final
targetNodeId → String: ID of the node containing the target port.
final
targetPortId → String: ID of the target port on the target node.
final
visible ↔ bool: Whether the connection is currently visible.
getter/setter pair

Methods

dispose() → void: Disposes resources used by this connection.
getEffectiveAnimationEffect(ConnectionEffect? themeAnimationEffect) → ConnectionEffect?: Gets the effective animation effect for rendering.
getEffectiveColor(Color themeColor, Color themeSelectedColor) → Color: Gets the effective color for rendering based on selection state.
getEffectiveEndPoint(ConnectionEndPoint themeEndPoint) → ConnectionEndPoint: Gets the effective end endpoint marker for rendering.
getEffectiveStartPoint(ConnectionEndPoint themeStartPoint) → ConnectionEndPoint: Gets the effective start endpoint marker for rendering.
getEffectiveStrokeWidth(double themeStrokeWidth, double themeSelectedStrokeWidth) → double: Gets the effective stroke width for rendering based on selection state.
getEffectiveStyle(ConnectionStyle themeStyle) → ConnectionStyle: Gets the effective connection style for rendering.
involvesNode(String nodeId) → bool: Checks if this connection involves the given node.
involvesPort(String nodeId, String portId) → bool: Checks if this connection involves the given port on a specific node.
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
observeSceneChanges(VoidCallback listener) → VoidCallback: Registers a lightweight listener for renderer-relevant state changes.
toJson(Object? toJsonC(C value)) → Map<String, dynamic>: Converts this Connection to a JSON map.
toString() → String: A string representation of this object.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited