Interface INodeRenderer

Namespace

FlowGraph.Avalonia.Rendering.NodeRenderers

Assembly

FlowGraph.Avalonia.dll

Interface for custom node renderers. Implement this interface to create custom visual representations for node types.

public interface INodeRenderer

Properties

HasCompositeVisual

Indicates whether this renderer creates composite visuals with multiple children that need individual size updates. Used for validation and debugging.

bool HasCompositeVisual { get; }

Property Value

bool

Remarks

If true, the framework may validate that UpdateSize properly handles child elements. Renderers should return true if they create visuals with backgrounds, borders, content areas, or other elements that need size updates beyond the root container.

Consider using ResizableVisual to automatically track and update children.

Methods

CreateNodeVisual(Node, NodeRenderContext)

Creates the visual representation for a node.

Control CreateNodeVisual(Node node, NodeRenderContext context)

Parameters

node Node

The node data to render.

context NodeRenderContext

The rendering context with theme, scale, and settings.

Returns

Control

A Control representing the node visual.

GetHeight(Node, FlowCanvasSettings)

Gets the default height of the node in canvas units (before scaling). Return null to use the default height from settings.

double? GetHeight(Node node, FlowCanvasSettings settings)

Parameters

node Node

settings FlowCanvasSettings

Returns

double?

GetMinHeight(Node, FlowCanvasSettings)

Gets the minimum height for resizing. Return null for no minimum.

double? GetMinHeight(Node node, FlowCanvasSettings settings)

Parameters

node Node

settings FlowCanvasSettings

Returns

double?

GetMinWidth(Node, FlowCanvasSettings)

Gets the minimum width for resizing. Return null for no minimum.

double? GetMinWidth(Node node, FlowCanvasSettings settings)

Parameters

node Node

settings FlowCanvasSettings

Returns

double?

GetWidth(Node, FlowCanvasSettings)

Gets the default width of the node in canvas units (before scaling). Return null to use the default width from settings.

double? GetWidth(Node node, FlowCanvasSettings settings)

Parameters

node Node

settings FlowCanvasSettings

Returns

double?

UpdateSelection(Control, Node, NodeRenderContext)

Updates the visual state when selection changes.

void UpdateSelection(Control visual, Node node, NodeRenderContext context)

Parameters

visual Control

The node's visual control.

node Node

The node data.

context NodeRenderContext

The rendering context.

UpdateSize(Control, Node, NodeRenderContext, double, double)

Updates the size of an existing node visual.

void UpdateSize(Control visual, Node node, NodeRenderContext context, double width, double height)

Parameters

visual Control

The node's visual control.

node Node

The node data.

context NodeRenderContext

The rendering context.

width double

The new width in canvas units.

height double

The new height in canvas units.

Remarks

IMPORTANT: Implementations MUST update ALL child elements within the visual, not just the root container. Failing to update child elements will cause the visual to appear unchanged during resize operations until a full re-render occurs.

For composite visuals (e.g., a Grid containing Rectangles, Borders, or Canvases), iterate through children and update their Width/Height properties accordingly.

public void UpdateSize(Control visual, Node node, NodeRenderContext context, double width, double height)
{
    var scaledWidth = width * context.Scale;
    var scaledHeight = height * context.Scale;

    if (visual is Grid grid)
    {
        grid.Width = scaledWidth;
        grid.Height = scaledHeight;

        // CRITICAL: Also update all child elements
        foreach (var child in grid.Children)
        {
            if (child is Rectangle rect)
            {
                rect.Width = scaledWidth;
                rect.Height = scaledHeight;
            }
        }
    }
}

UpdateStyle(Control, Node, NodeRenderContext)

Updates the visual style when the node's Data property changes. Override this to react to custom data changes (e.g., execution state, validation errors).

void UpdateStyle(Control visual, Node node, NodeRenderContext context)

Parameters

visual Control

The node's visual control.

node Node

The node data (check node.Data for custom state).

context NodeRenderContext

The rendering context.

Remarks

This method is called when Data changes and allows renderers to update visual appearance based on custom data stored in the node.

Common use cases:

• Execution visualization (border colors for running/completed/failed states)
• Validation feedback (error highlights)
• Custom styling based on application-specific data

public void UpdateStyle(Control visual, Node node, NodeRenderContext context)
{
    if (visual is Border border && node.Data is Dictionary<string, object?> data)
    {
        if (data.TryGetValue("BorderColor", out var colorObj) && colorObj is Color color)
        {
            border.BorderBrush = new SolidColorBrush(color);
        }
    }
}