SkiaComponent Base Class

Overview

SkiaComponent is the abstract base class for every visual element rendered on a Beep.Skia canvas. It provides the foundational infrastructure that all diagram nodes, UI controls, and custom visual components share:

• Position & Sizing: Absolute X/Y position, Width, Height, and computed bounding boxes in both local and world coordinate spaces.
• IDisposable: Proper resource cleanup for SkiaSharp objects (paints, surfaces, paths) through the Dispose() pattern.
• NodeProperties: A configurable parameter dictionary that enables dynamic property editors without requiring reflection. Every component can expose its editable fields as a Dictionary<string, ParameterInfo>.
• ConnectionPoints: Collections of input and output ports (InPoints / OutPoints) with lazy layout recomputation for performance.
• DrawContent: A virtual method that subclasses override to render their specific visual content using a SKCanvas.
• Invalidation: Mark the component or its region as dirty to trigger a redraw on the next render cycle.
• Hit Testing: Point-inside-bounds and per-feature hit test methods for precise mouse interaction routing.
• Absolute Coordinate System: All positioning uses an absolute, unscrolled coordinate space. Pan and zoom transforms are applied once globally by RenderingHelper.

The class implements IDrawableComponent and serves as the trunk of a deep inheritance tree spanning 200+ node types across 18 diagram families.

Key Properties

NodeProperties System

Every SkiaComponent exposes its configurable fields as a Dictionary<string, ParameterInfo>. This enables rich, dynamic property editors — such as the in-app property grid — to discover and edit component settings without runtime reflection overhead.

The ParameterInfo class captures:

• ParameterName: Internal key and property grid label.
• ParameterCurrentValue: The current value (as object).
• DefaultParameterValue: The value restored when resetting the property.
• ParameterType: Underlying CLR type (string, int, float, bool, SKColor, enum, etc.).
• Description: Tooltip/help text shown by the property grid.
• Choices: Optional fixed list of allowed string values, rendered as a dropdown.

Subclasses populate the dictionary in their constructor or InitializeComponent() override:

protected override void InitializeComponent()
{
    base.InitializeComponent();

    NodeProperties["Text"] = new ParameterInfo
    {
        ParameterName = "Text",
        ParameterCurrentValue = "New Node",
        DefaultParameterValue = "New Node",
        ParameterType = typeof(string),
        Description = "Label text"
    };

    NodeProperties["FillColor"] = new ParameterInfo
    {
        ParameterName = "FillColor",
        ParameterCurrentValue = SKColors.CornflowerBlue,
        DefaultParameterValue = SKColors.CornflowerBlue,
        ParameterType = typeof(SKColor),
        Description = "Fill color"
    };

    NodeProperties["FontSize"] = new ParameterInfo
    {
        ParameterName = "FontSize",
        ParameterCurrentValue = 14f,
        DefaultParameterValue = 14f,
        ParameterType = typeof(float),
        Description = "Font size in points"
    };
}

At runtime, the property grid reads GetProperties() to enumerate editable values and calls SetProperties(dict) to apply changes. GetProperties() returns a Dictionary<string, object> of plain values (not ParameterInfo instances), so write back through SetProperties and invalidate the component to reflect the new values on the next draw:

var properties = myComponent.GetProperties();

float currentSize = (float)properties["FontSize"];

properties["FontSize"] = 18f;
myComponent.SetProperties(properties);

myComponent.InvalidateVisual();
drawingManager.RequestRedraw();

Connection Points

Connection points (ports) are the anchor locations where ConnectionLine segments attach to a component. Each point is an instance of IConnectionPoint stored in the component's InConnectionPoints (input) or OutConnectionPoints (output) collections.

Lazy Port Layout

Port positions are recomputed only when needed. The flow is:

1. MarkPortsDirty() (protected, on SkiaComponent) sets the dirty flag. OnBoundsChanged() calls it automatically, so moves and resizes always mark the layout stale.
2. Inside DrawContent, call EnsurePortLayout(() => LayoutPorts()) (protected, on MaterialControl). It invokes your layout action only when ArePortsDirty is true, then clears the flag.
3. LayoutPorts() recomputes port centers, positions and bounds from the current Bounds.

This keeps rapid drags cheap: geometry changes only set a flag, and the expensive layout runs once, on the next draw.

ConnectionPoint Properties

protected override void DrawContent(SKCanvas canvas, DrawingContext context)
{
    // Re-layout ports only when the dirty flag is set
    EnsurePortLayout(() => LayoutPorts());

    // ... draw the component content
}

protected override void LayoutPorts()
{
    var b = Bounds;
    float midY = b.MidY;

    InConnectionPoints.Clear();
    OutConnectionPoints.Clear();

    InConnectionPoints.Add(new ConnectionPoint
    {
        Type = ConnectionPointType.In,
        Center = new SKPoint(b.Left, midY),
        Position = new SKPoint(b.Left, midY),
        DataType = "string",
        Component = this,
        IsAvailable = true
    });

    OutConnectionPoints.Add(new ConnectionPoint
    {
        Type = ConnectionPointType.Out,
        Center = new SKPoint(b.Right, midY),
        Position = new SKPoint(b.Right, midY),
        DataType = "string",
        Component = this,
        IsAvailable = true
    });
}

Lifecycle

Every SkiaComponent follows a defined lifecycle from creation through disposal:

var node = new ProcessNode { Name = "Process Step" };
node.X = 100;
node.Y = 200;

drawingManager.AddComponent(node);

drawingManager.RequestRedraw();

drawingManager.RemoveComponent(node);
node.Dispose();

Inheritance Hierarchy

The SkiaComponent class sits at the center of a deep inheritance chain that spans from the abstract interface down to concrete diagram nodes: