EditableSmoothStepConnectionStyle class

An editable connection style that creates smooth step paths with rounded corners.

This style maintains the 90-degree turn characteristic of smooth step connections while allowing users to customize the path by adding, moving, or removing control points. The path is rendered as a series of horizontal and vertical segments with smoothly rounded corners.

Features

• Editable flat edges: Users can tweak the horizontal and vertical segments
• Add control points: Insert intermediate waypoints along the path
• Maintain orthogonal routing: All segments remain horizontal or vertical
• Smooth corners: Configurable corner radius for rounded turns

Path Behavior

Without Control Points (Algorithmic Mode)

Uses the standard smooth step algorithm to automatically calculate an optimal path between the source and target ports based on their positions.

With Control Points (Manual Mode)

Creates a path that passes through all control points while maintaining the smooth step visual style (90-degree turns with rounded corners).

Usage Example

// Create a connection with editable smooth step style
final connection = Connection(
  id: 'conn-1',
  sourceNodeId: 'node-a',
  sourcePortId: 'output-1',
  targetNodeId: 'node-b',
  targetPortId: 'input-1',
  style: editableSmoothStepStyle,
  controlPoints: [
    Offset(150, 100),  // First bend point
    Offset(150, 200),  // Second bend point
  ],
);

See also:

• EditablePathConnectionStyle for the base editable path functionality
• SmoothstepPathCalculator for the underlying path algorithm