Table of Contents

Namespace FlowGraph.Avalonia.Rendering

Classes

ArrowGeometryHelper

Helper class for calculating arrow geometry points. Provides shared calculations for both retained-mode (PathGeometry) and immediate-mode (DrawingContext) rendering.

BezierHelper
CanvasElementManager

Coordinates rendering of all graph elements (nodes, ports, edges, handles). Acts as a facade over specialized visual managers for clean separation of concerns.

CanvasRenderModel

Central model that calculates all rendering geometry for a graph. This is the single source of truth for node bounds, port positions, edge paths, etc. Both VisualTree rendering and DirectDraw rendering use this model to ensure 100% visual parity.

CanvasRenderService

Unified graph render service that abstracts the difference between retained mode (CanvasElementManager) and direct rendering mode (DirectCanvasRenderer).

This service ensures that all rendering operations work correctly regardless of which rendering mode is active, solving the recurring issue of handlers only implementing one rendering path.

DesignTokens

Design tokens for consistent styling across all FlowGraph components. Inspired by React Flow's CSS variables and design system.

Usage:

  • Reference these constants throughout renderers for consistency
  • All values are in logical pixels (unscaled)
  • Scale factor is applied by the renderer context when needed
DirectCanvasRenderer

A high-performance graph renderer that draws directly to a DrawingContext, bypassing the Avalonia visual tree for nodes and edges. This is optimized for large graphs (500+ nodes) where per-element Controls are too slow.

Uses GraphRenderModel for all geometry calculations to ensure 100% visual parity with the normal VisualTree renderer.

EdgePathHelper

Helper class for creating edge path geometries between points.

EdgeVisualManager

Manages rendering and tracking of edge visuals including paths, markers, and labels. Responsible for creating, updating, and removing edge UI elements.

NodeVisualManager

Manages rendering and tracking of node and port visuals. Responsible for creating, updating, and removing node/port UI elements. Uses GraphRenderModel for all geometry calculations to ensure visual parity with DirectCanvasRenderer.

RenderContext

Shared rendering context containing settings, viewport state, and coordinate transformation utilities. Used by all visual managers to ensure consistent rendering behavior.

TRANSFORM-BASED RENDERING (Phase 2):

Renderers create visuals at "logical size" (unscaled). The MatrixTransform on MainCanvas handles all zoom/pan transformations. This enables O(1) zoom operations.

  • Scale always returns 1.0 - use for visual sizing
  • ViewportZoom returns actual zoom - use for calculations
  • InverseScale returns 1/zoom - use for constant-size elements
RenderTargetAdapter

Implementation of IRenderTarget that provides mode-aware temporary visual rendering for interaction states.

This adapter automatically selects the correct container and coordinate space:

  • Visual Tree mode: MainCanvas with canvas coordinates (MatrixTransform handles viewport)
  • Direct Rendering mode: RootPanel with viewport coordinates (self-transformed)
ResizeHandleManager

Manages rendering and tracking of resize handle visuals for nodes. Responsible for creating, updating, and removing resize handle UI elements.

ThemeResources

Provides theme-aware resource access for FlowCanvas components.

All colors can be customized by defining resources in your App.axaml: 

<Application.Resources>
    <SolidColorBrush x:Key="FlowCanvasNodeBackground" Color="#2D2D30"/>
    <SolidColorBrush x:Key="FlowCanvasNodeBorder" Color="#4682B4"/>
    <!-- etc. -->
</Application.Resources>

Available resource keys:

  • Canvas: FlowCanvasBackground, FlowCanvasGridColor
  • Node: FlowCanvasNodeBackground, FlowCanvasNodeBorder, FlowCanvasNodeSelectedBorder, FlowCanvasNodeText
  • Input Node: FlowCanvasInputNodeBackground, FlowCanvasInputNodeBorder, FlowCanvasInputNodeText, FlowCanvasInputNodeIcon
  • Output Node: FlowCanvasOutputNodeBackground, FlowCanvasOutputNodeBorder, FlowCanvasOutputNodeText, FlowCanvasOutputNodeIcon
  • Edge: FlowCanvasEdgeStroke, FlowCanvasEdgeSelectedStroke
  • Port: FlowCanvasPortBackground, FlowCanvasPortBorder, FlowCanvasPortHover, FlowCanvasPortValidConnection, FlowCanvasPortInvalidConnection
  • Group: FlowCanvasGroupBackground, FlowCanvasGroupBorder, FlowCanvasGroupLabelText
  • Selection: FlowCanvasSelectionBoxFill, FlowCanvasSelectionBoxStroke
  • Minimap: FlowCanvasMinimapBackground, FlowCanvasMinimapViewportFill, FlowCanvasMinimapViewportStroke
ViewportOverlayPositioner

Provides unified positioning for overlay elements that need to appear at specific viewport coordinates, regardless of the parent container type.

Problem this solves: FlowGraph has two rendering modes with different container types:

  • Retained Mode: Uses MainCanvas (Canvas) with MatrixTransform - Canvas.SetLeft/SetTop work
  • Direct Rendering: Uses RootPanel (Panel) - Canvas.SetLeft/SetTop are IGNORED

Key insight: Canvas attached properties (Canvas.Left, Canvas.Top) only work when the parent element is a Canvas. When attached to a Panel child, they have no effect.

Interfaces

ICanvasRenderService

Unified interface for graph rendering operations that abstracts away the difference between retained mode (VisualTree) and direct rendering modes. This prevents the recurring issue of handlers only implementing one rendering path.

IConnectionPreviewHandle

Handle for managing a temporary connection preview line.

IRenderTarget

Abstraction for adding temporary visual elements during interaction.

This interface provides a rendering-mode agnostic way to create temporary visuals such as connection preview lines, selection boxes, and drag previews. It handles coordinate transforms and container selection internally based on the current rendering mode (Visual Tree vs Direct Rendering).

Key principle: All coordinates passed to this interface are in canvas space. The implementation handles conversion to viewport coordinates when necessary (e.g., in Direct Rendering mode).

ISelectionBoxHandle

Handle for managing a temporary selection box.

Enums

ResizeHandlePosition

Positions for resize handles on a node.