Interaction Model

SelectionManager

SelectionManager (355 lines) handles all selection-state logic for components, connection lines, and connection points. It works in tandem with DrawingManager to provide a cohesive selection experience:

Selection Operations

Clipboard Operations

drawingManager.SelectionManager.SelectComponent(node1);
drawingManager.SelectionManager.AddToSelection(node2);

foreach (var comp in drawingManager.SelectionManager.SelectedComponents)
{
    comp.NodeProperties["StrokeColor"].ParameterCurrentValue = SKColors.DodgerBlue;
    comp.InvalidateVisual();
}

drawingManager.SelectionManager.SelectComponentsInRect(
    new SKRect(100, 100, 500, 400),
    drawingManager.GetComponents());

drawingManager.CopySelectedComponents();
drawingManager.DeleteSelectedComponents();
drawingManager.PasteComponents(new SKPoint(20, 20));

drawingManager.SelectionManager.ClearSelection();
drawingManager.RequestRedraw();

InteractionHelper

InteractionHelper processes raw mouse and keyboard events from the canvas surface and routes them to the appropriate handler based on the current interaction context. It manages a state machine with distinct drag modes:

public void OnMouseDown(SKPoint screenPoint, MouseButton button)
{
    var worldPoint = drawingManager.ScreenToWorld(screenPoint);

    if (button == MouseButton.Middle ||
        (button == MouseButton.Left && IsSpaceHeld))
    {
        _dragMode = DragMode.CanvasPan;
        _dragStart = screenPoint;
        _panStart = drawingManager.PanOffset;
        return;
    }

    var hitResult = HitTestChain(worldPoint);

    switch (hitResult.Type)
    {
        case HitTestType.ConnectionPoint:
            _dragMode = DragMode.PortConnect;
            _connectSource = hitResult.Point;
            break;

        case HitTestType.ResizeHandle:
            _dragMode = DragMode.Resize;
            _resizeHandle = hitResult.Handle;
            _dragStart = worldPoint;
            break;

        case HitTestType.Component:
            _dragMode = DragMode.ComponentMove;
            _dragStart = worldPoint;
            if (!IsCtrlHeld)
                SelectionManager.ClearSelection();
            SelectionManager.Select(hitResult.Component);
            break;

        case HitTestType.ConnectionLine:
            SelectionManager.Select(hitResult.Connection);
            break;

        case HitTestType.None:
            _dragMode = DragMode.MarqueeSelect;
            _marqueeStart = worldPoint;
            SelectionManager.ClearSelection();
            break;
    }
}

Hit-Test Priority Chain

When the user clicks on the canvas, the hit-test chain determines which entity receives the event. The chain is evaluated in strict priority order — the first match wins:

private HitTestResult HitTestChain(SKPoint worldPoint)
{
    var portHit = FindConnectionPointAt(worldPoint, PortHitRadius);
    if (portHit != null)
        return HitTestResult.ConnectionPoint(portHit);

    foreach (var comp in GetSelectedComponents())
    {
        var handle = comp.GetResizeHandleAt(worldPoint, ResizeHandleRadius);
        if (handle != ResizeHandle.None)
            return HitTestResult.ResizeHandle(comp, handle);
    }

    for (int i = Components.Count - 1; i >= 0; i--)
    {
        var comp = Components[i];
        if (comp.HitTest(worldPoint))
            return HitTestResult.Component(comp);
    }

    foreach (var conn in Connections)
    {
        if (conn.HitTest(worldPoint, ConnectionHitTolerance))
            return HitTestResult.ConnectionLine(conn);
    }

    return HitTestResult.None;
}

Drag & Drop

Beep.Skia supports two distinct drag-and-drop workflows:

1. Component Palette Drag-Drop

The palette raises ComponentDragEnded with the dragged ComponentItem and the pointer position. The host creates the instance through the registry and converts the screen point to world coordinates using the manager's viewport (PanOffset and Zoom):

palette.ComponentDragEnded += (s, args) =>
{
    if (args.State != ComponentDragState.Ended) return;

    var component = SkiaComponentRegistry.CreateComponentInstance(args.Component.ClassDefinition);
    if (component == null) return;

    // Screen -> world: subtract the pan offset, then divide by zoom
    float zoom = drawingManager.Zoom == 0 ? 1f : drawingManager.Zoom;
    component.X = (args.MousePosition.X - drawingManager.PanOffset.X) / zoom;
    component.Y = (args.MousePosition.Y - drawingManager.PanOffset.Y) / zoom;

    drawingManager.AddComponent(component);   // pushed onto the undo stack
    drawingManager.RequestRedraw();
};

2. Within-Canvas Repositioning

Dragging existing components is handled by InteractionHelper. While a component drag is in progress, IsDragging and DraggingComponent report the state; when the drag ends, the manager raises ComponentDropped with the final canvas and screen positions:

drawingManager.ComponentDropped += (s, e) =>
{
    // e.Component     - the dropped component
    // e.CanvasPosition - final position in world space (e.Location is an alias)
    // e.ScreenPosition - final position in screen space
    // e.Bounds         - final bounds in world space
    Console.WriteLine($"Dropped {e.Component.Name} at {e.CanvasPosition}");
};

// Programmatic move of the current selection (undoable)
drawingManager.MoveSelectedComponents(new SKPoint(dx: 20, dy: 0));

// Undo/redo is exposed directly on the manager
if (drawingManager.CanUndo)
    drawingManager.Undo();

HistoryManager

HistoryManager implements a command-pattern undo/redo system that records every mutation to the diagram state. Each operation is represented as a DrawingAction subclass with Execute() and Undo() methods:

Undo/Redo Architecture

The history manager maintains two stacks: an undo stack (past actions) and a redo stack (undone actions that can be re-applied). The redo stack is cleared whenever a new action is pushed, following the standard undo/redo model:

public class HistoryManager
{
    private Stack<DrawingAction> _undoStack = new();
    private Stack<DrawingAction> _redoStack = new();
    private const int MaxHistory = 256;

    public bool CanUndo => _undoStack.Count > 0;
    public bool CanRedo => _redoStack.Count > 0;

    public void Push(DrawingAction action)
    {
        _undoStack.Push(action);
        _redoStack.Clear();

        if (_undoStack.Count > MaxHistory)
        {
            var oldest = new Stack<DrawingAction>(
                _undoStack.Take(MaxHistory));
            _undoStack = oldest;
        }
    }

    public void Undo()
    {
        if (!CanUndo) return;
        var action = _undoStack.Pop();
        action.Undo(drawingManager);
        _redoStack.Push(action);
        drawingManager.Invalidate();
    }

    public void Redo()
    {
        if (!CanRedo) return;
        var action = _redoStack.Pop();
        action.Execute(drawingManager);
        _undoStack.Push(action);
        drawingManager.Invalidate();
    }
}

Keyboard Shortcuts

The interaction system defines a standard set of keyboard shortcuts that are processed by InteractionHelper before any canvas-level key handling: