Table of Contents

Namespace FlowGraph.Core.Rendering

Classes

CoordinateSpaceAttribute

Marks a parameter, property, or method with its expected coordinate space. Use this attribute for documentation and potential static analysis tools.

CoordinateTransformerExtensions

Extension methods for ICoordinateTransformer.

StandardLayers

Standard layer identifiers for consistent layer management.

Interfaces

ICoordinateTransformer

Provides bidirectional coordinate transformation between canvas and viewport space.

Coordinate Spaces:

  • Canvas Space: Logical coordinates where graph elements live. Node positions (e.g., node.Position.X = 100) are in canvas space. These values are stable regardless of zoom/pan.
  • Viewport Space: Coordinates within the viewport window (the visible area). The viewport origin (0,0) is the top-left corner of the visible canvas area. These coordinates change as the user zooms and pans.

IMPORTANT - Viewport vs Control Coordinates:

  • Viewport coordinates assume (0,0) is at the viewport's visual origin.
  • Control coordinates (e.g., from e.GetPosition(RootPanel)) may have an offset if the canvas is not at (0,0) within the control (e.g., due to toolbars, margins).
  • For pointer events, prefer e.GetPosition(MainCanvas) which gives canvas coords directly, or use the viewport position if you need to account for the transform manually.

Transform Formulas: 

ViewportToCanvas: canvasPoint = (viewportPoint - offset) / zoom
CanvasToViewport: viewportPoint = canvasPoint * zoom + offset

Inspired by:

  • react-diagrams: CanvasEngine.getRelativeMousePoint(), getRelativePoint()
  • Konva.js: Stage.getPointerPosition() vs Node.getRelativePointerPosition()
  • AnyChart: scale.transform() / scale.inverseTransform()
IReadOnlyViewportState

Read-only viewport state for observing pan/zoom changes.

The viewport defines the visible area of the infinite canvas and provides coordinate transformation between canvas space (where elements live) and screen space (what the user sees).

Inspired by:

  • react-diagrams: CanvasModel with offsetX, offsetY, zoom
  • Konva.js: Stage with scale, position properties
  • mxGraph: mxGraphView with scale and translate
IRenderLayer

Represents a rendering layer in the graph canvas. Layers control Z-ordering and transform behavior for groups of elements.

Inspired by:

  • react-diagrams: Multiple layer types (LinkLayer, NodeLayer) with transform flags
  • Konva.js: Stage → Layer → Group → Shape hierarchy
  • Photoshop/Figma: Layer-based compositing model
IViewportState

Mutable viewport state for controlling pan/zoom operations.

Use this interface to programmatically control the viewport, such as centering on elements, fitting to bounds, or implementing custom navigation.

Enums

CoordinateSpace

Specifies which coordinate space a parameter, property, or return value uses.

LayerTransformMode

Defines how a rendering layer participates in viewport transformations.

This is inspired by react-diagrams' LayerModel.options.transformed flag, which allows layers to opt in or out of viewport transforms. In FlowGraph, we extend this to three modes to handle direct rendering scenarios.