Namespace FlowGraph.Avalonia.Rendering.NodeRenderers

Classes

ColorDisplayNodeRenderer: Renders a color display output node. Shows a large color swatch with the received color value.

ColorPickerNodeRenderer: Renders a color picker input node. Uses Avalonia's built-in ColorView for full color selection with hex input fallback. The selected color is persisted in Node.Data as a uint (ARGB).

DataNodeRendererBase: Base class for data-bound node renderers. Provides common functionality for interactive nodes.

DefaultNodeRenderer: Default node renderer that creates a standard bordered box with text. Supports inline label editing via IEditableNodeRenderer.

DirectNodeRenderContext: Context passed to DrawNode(DrawingContext, Node, DirectNodeRenderContext) with pre-calculated values.

DisplayNodeRenderer: Renders a display/output node.

DropdownData

DropdownNodeRenderer: Renders a dropdown node. Value persisted in Node.Data as DropdownData.

GroupCollapseEventArgs: Event args for group collapse toggle.

GroupNodeRenderer

Renderer for group nodes that contain other nodes. Uses a translucent background similar to React Flow's grouping style. Supports inline label editing via IEditableNodeRenderer.

IMPORTANT: This renderer uses constants from GraphRenderModel to ensure 100% visual parity with DirectCanvasRenderer.

HeaderedNodeRendererBase: Base class for nodes with a header section and content area (React Flow style). Structure: Outer border (rounded) -> Header (semi-transparent) + Body (solid white) Uses true container resize (like React Flow, Rete.js, Node-RED) - content stays fixed size, container grows/shrinks to provide more/less space.

InputNodeRenderer: Renderer for input nodes with a distinctive green color scheme. Displays a ">" icon and supports inline label editing.

NodeRenderContext

Context information passed to node renderers.

TRANSFORM-BASED RENDERING:

Scale is always 1.0 - create visuals at logical size. The MatrixTransform on MainCanvas handles zoom. This enables O(1) zoom.

NodeRendererRegistry: Registry for custom node type renderers. Register custom renderers to handle specific node types.

NodeVisualHelper: Helper methods for updating node visuals consistently. Use these methods in INodeRenderer.UpdateSize implementations to ensure all child elements are properly updated.

NumberInputNodeRenderer: Renders a numeric input node. Value persisted in Node.Data as double.

OutputDisplayNodeRenderer: Renders an output display node using the white headered base with large content area.

OutputNodeRenderer: Renderer for output nodes with a distinctive red/coral color scheme. Displays a target/circle icon and supports inline label editing.

RadioButtonData

RadioButtonNodeRenderer: Renders a radio button group node using the white headered base. Value persisted in Node.Data as RadioButtonData.

ResizableVisual

A wrapper that tracks resizable child elements within a node visual. When UpdateSize is called, all registered children are automatically updated.

Use this in CreateNodeVisual to ensure UpdateSize properly propagates to all children.

ResizableVisual.ResizeMetadata: Metadata attached to the root visual that tracks child resize requirements.

SimplifiedNodeRenderer: A simplified node renderer optimized for large graphs. Uses minimal visual elements for better performance with 500+ nodes.

SliderNodeRenderer: Renders a slider input node. Value persisted in Node.Data as double.

StyledHeaderedNodeRendererBase: Headered node with accent-colored header (pink/rose tint). The header has a glassy semi-transparent pink background and pink text. Override methods use fixed accent colors rather than theme resources.

StyledNodeRendererBase

Base class for styled node renderers with icon and label support. Provides customizable colors, icons (text or geometry), and inline editing.

Override the abstract properties to customize appearance: - DefaultLabel: Default text when no label is set - GetNodeBackground(ThemeResources), GetNodeBorder(ThemeResources): Node colors - GetIconForeground(ThemeResources), GetTextForeground(ThemeResources): Text/icon colors

For icons, override ONE of: - IconText: Simple text icon (e.g., ">", "O", "?") - IconGeometry: Vector path for scalable icons (compatible with any icon library)

Using a Lucide icon path:

// Get path data from any icon library (Lucide, Material, etc.)
protected override Geometry? IconGeometry => 
    Geometry.Parse("M5 12h14M12 5l7 7-7 7"); // arrow-right

TextInputNodeRenderer: Renders a text input node. Value persisted in Node.Data as string.

ToggleNodeRenderer: Renders a checkbox/toggle node. Value persisted in Node.Data as bool.

WhiteHeaderedNodeRendererBase: Headered node with neutral gray header (subtle gray tint). Uses the default theme resources - provided for explicit naming.

ZoomSliderNodeRenderer: Renders a zoom slider node using the white headered base. Value persisted in Node.Data as double.

Interfaces

IDataNodeRenderer: Extended node renderer that supports data binding to port values. Implement this for nodes with interactive controls (sliders, color pickers, etc.).

IDirectNodeRenderer: Interface for custom node renderers that support direct DrawingContext rendering. Implement this interface in addition to INodeRenderer to provide custom drawing logic for the high-performance DirectCanvasRenderer mode.

IEditableNodeRenderer: Interface for node renderers that support inline label editing.

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

IResizableNodeRenderer: Marker interface for renderers that use ResizableVisual for automatic child element updates. Implementing this interface signals that the renderer follows the recommended pattern for composite visuals.

Table of Contents

Namespace FlowGraph.Avalonia.Rendering.NodeRenderers

Classes

Interfaces