Connection System

ConnectionLine

ConnectionLine is a 1145-line class that renders a visual link between two IConnectionPoint instances. It manages the full lifecycle of a connection: path computation, visual styling, hit testing, label placement, and animation. Connection lines are the primary mechanism for expressing relationships in Beep.Skia diagrams.

Animation Styles

Connection lines support configurable animations that provide visual feedback about flow direction and connection state. Animations are rendered on a separate frame timer and composited onto the line:

AnimatedFlowLines

The AnimatedFlowLines feature is a higher-level abstraction that batches multiple animated connections and manages their shared animation timer. When enabled:

• A single System.Timers.Timer drives all animated connections at a configurable frame rate (default: 30 FPS).
• Each connection tracks its own phase offset for independent animation timing.
• The timer is automatically paused when the diagram is not visible (tab switch, minimize) to conserve CPU.
• Animation speed is controlled per-connection via AnimationSpeed (range: 0.25x to 4.0x).

var connection = drawingManager.ConnectComponents(sourcePort, targetPort);
connection.AnimationStyle = AnimationStyle.Arrows;
connection.AnimationSpeed = 2.0f;
connection.AnimatedFlowLines = true;

drawingManager.EnableFlowAnimation();

Routing Modes

The connection system supports three routing modes that determine how the line path is computed between the start and end ports:

Orthogonal Routing Details

Orthogonal routing is the most sophisticated mode. The algorithm:

1. Determines the exit direction from the start port (North, South, East, West) based on port placement.
2. Determines the entry direction into the end port.
3. Computes intermediate bend points that produce a clean, axis-aligned path with minimal crossings.
4. Applies a configurable CornerRadius to round the 90-degree bends for a polished appearance.
5. Automatically adjusts when components are moved, calling RecalculateRoute() on the next render cycle.

connection.RoutingMode = RoutingMode.Orthogonal;
connection.CornerRadius = 6;
connection.RecomputeOnMove = true;

connection.RoutingMode = RoutingMode.Curved;
connection.CurveTension = 0.5f;

connection.RoutingMode = RoutingMode.Straight;

ERD Multiplicity

The connection system includes specialized support for Entity-Relationship Diagram (ERD) semantics, including multiplicity markers and row-level connections:

Endpoint Markers

Multiplicity is expressed as visual markers at each end of the connection line. The marker set follows standard ERD notation:

Row-Level Connection Semantics

For ERD diagrams, connections can be established at the column level rather than the entity level. When a ConnectionPoint has a RowId set, the connection targets a specific field (row) within an entity. This enables:

• Foreign key relationships that link a specific column in one entity to a primary key column in another.
• Visual connection lines that attach to individual row entries within an ERD entity box.
• Schema generation that correctly emits FOREIGN KEY (column) REFERENCES table(column) constraints.

// Create the relationship, then apply ERD multiplicity markers
drawingManager.ConnectComponents(ordersEntity, customersEntity);

var fkConnection = drawingManager.GetLines().Last();
fkConnection.StartMultiplicity = ERDMultiplicity.ZeroOrMany;
fkConnection.EndMultiplicity = ERDMultiplicity.OneOnly;

Connection Validation

Before a connection is established, the ConnectionManager runs a validation pipeline to ensure diagram integrity:

public static bool CanConnect(IConnectionPoint source, IConnectionPoint target)
{
    if (source == null || target == null)
        return false;

    if (source.Type == target.Type)
        return false;   // cannot connect out-to-out or in-to-in

    if (ReferenceEquals(source.Component, target.Component))
        return false;   // cannot self-connect

    if (target.Connection != null)
        return false;   // target input already has a connection

    // Optional: compare the declared data types
    if (!string.IsNullOrEmpty(target.DataType) &&
        !string.Equals(target.DataType, source.DataType, StringComparison.Ordinal))
        return false;

    return true;
}

Labels

Connection lines support multiple text labels positioned at configurable locations along the line path. Labels are stored in the Labels collection and rendered during the line's draw cycle:

connection.Labels.Add(new ConnectionLabel
{
    Text = "has many",
    Position = LabelPosition.Middle,
    Offset = new SKPoint(0, -12),
    FontColor = SKColors.DarkSlateGray
});

connection.Labels.Add(new ConnectionLabel
{
    Text = "1",
    Position = LabelPosition.Start,
    Offset = new SKPoint(8, -8),
    FontSize = 10f
});

connection.Labels.Add(new ConnectionLabel
{
    Text = "N",
    Position = LabelPosition.End,
    Offset = new SKPoint(-8, -8),
    FontSize = 10f
});