Vyuh Node Flow

The NodeFlowViewer is a specialized widget designed for displaying node flow graphs in a read-only mode. It is a wrapper around NodeFlowEditor using NodeFlowBehavior.preview, which enables navigation (panning, zooming, selecting, and dragging nodes) while strictly preventing structural changes like creating, updating, or deleting nodes and connections.

Common Use Cases

• Debug views: Visualizing workflow state during execution.
• Previews: Displaying graph thumbnails with limited interaction.
• Reports: Embedding flow visualizations in read-only contexts.
• History views: Showing saved graph versions without allowing edits.

Ports are placed on the edges of a node using PortPosition. If you do not explicitly set a PortType, the type is automatically inferred from the position:

• PortPosition.left or PortPosition.top $\rightarrow$ PortType.input (receives connections)
• PortPosition.right or PortPosition.bottom $\rightarrow$ PortType.output (emits connections)

Available positions:

• PortPosition.left (default)
• PortPosition.right
• PortPosition.top
• PortPosition.bottom

Keyboard shortcuts are automatically enabled and integrated into the NodeFlowEditor. The system is built into the NodeFlowController and requires no manual setup.

Internally, the editor wraps your content with a NodeFlowKeyboardHandler, which manages interactions using Flutter's native Actions and Shortcuts system. This ensures that shortcuts are available as soon as you provide a NodeFlowController to the NodeFlowEditor.

// Shortcuts work automatically
final controller = NodeFlowController<MyData, dynamic>();

NodeFlowEditor(
  controller: controller,
  nodeBuilder: (context, node) => MyNodeWidget(node),
)

Ports can be placed on the left, right, top, or bottom edges of a node using PortPosition.

Automatic Type Inference: If you do not explicitly specify a PortType, it is inferred from the position:

• PortPosition.left or PortPosition.top $\rightarrow$ PortType.input
• PortPosition.right or PortPosition.bottom $\rightarrow$ PortType.output

Port Types:

• PortType.input: Receives connections.
• PortType.output: Emits connections.

// Port on the left side (input by convention)
Port(
  id: 'input-port',
  name: 'Input',
  position: PortPosition.left,
  type: PortType.input,
)

// Port on the right side (output by convention)
Port(
  id: 'output-port',
  name: 'Output',
  position: PortPosition.right,
  type: PortType.output,
)

When building node-based systems, choosing the right evaluation strategy is critical for performance and stability. Below is a comparison of the approaches considered for the node_math demo:

Vyuh Node Flow provides several grid styles to balance visibility, clutter, and use cases. Choose a style based on your application's needs:

Enable DebugMode.autoPanZone or DebugMode.all to see the edge zones where auto-panning activates during drag operations. The visualization shows:

• Yellow zones: Areas where dragging triggers auto-panning.
• Dashed rectangle: Safe area boundary (no auto-pan).
• Zone widths: These match the edgePadding values from the AutoPanPlugin.

Use this when:

• Tuning edgePadding values for your UI layout.
• Verifying asymmetric edge padding works correctly.
• Testing autopan behavior with overlapping toolbars.

Properties like animated, selected, and labels are MobX observables. Modifying them after construction will trigger automatic UI updates.

// Get/set animation state
connection.animated = true;

// Get/set selection state
connection.selected = true;

// Get/set labels (use ConnectionLabel objects)
connection.startLabel = ConnectionLabel.start(text: 'Begin');
connection.label = ConnectionLabel.center(text: 'Data Flow');
connection.endLabel = ConnectionLabel.end(text: 'End');

// Get/set animation effect
connection.animationEffect = FlowingDashEffect();

// Get/set control points
connection.controlPoints = [Offset(300, 200), Offset(400, 200)];