classes

Import these from @grafloria/renderer.

Classes

CanvasStyleResolver

Resolves VNode props → concrete paint values, reproducing the SVG cascade. The CLASS-RULE layer is the export card's flattener; this adds priority order, inheritance and typed parsing on top.

ts
Copy
class CanvasStyleResolver

Properties

Methods

• constructor(options: StyleResolverOptions)
• setTheme(theme: Theme, varOverrides?: Record<string, string>): void
• getTheme(): Theme
• rootStyle(): ComputedStyle — The root style every diagram starts from (theme font, no paint inherited).
• resolve(props: VNodeProps | undefined, inherited: ComputedStyle): ComputedStyle — Compute an element's style: inherit from the parent, then apply presentation attributes < matched class rules < inline style.

DiagramRenderBackend

One diagram, two backends, one VNode tree.

The host owns a container element; the backend owns whatever goes inside it (<svg> or <canvas>) and swaps that out on setMode.

ts
Copy
class DiagramRenderBackend

Methods

• constructor(engine: DiagramEngine, container: Element, options: RenderBackendOptions = {})
• getMode(): BackendMode
• getRenderer(): SVGRenderer | CanvasRenderer — The renderer currently driving the picture.
• getProducer(): SVGRenderer — The shared VNode producer (identical object in both modes).
• setMode(mode: BackendMode, options: { force?: boolean } = {}): boolean — Switch backend on a LIVE diagram. The producer, the engine, the theme and the camera all survive; only the paint target changes. The next render() repaints from scratch into the new target.
• render(viewport: Rectangle, zoom: number): VNode
• canvasSafety(): CanvasSafety — What canvas mode would cost this diagram right now. safe iff it would cost nothing.
• setAccessibilityActive(active: boolean): void — Tell the backend an assistive-technology surface is live for this diagram (an outline view, a live region, keyboard navigation).
• hitTest(worldX: number, worldY: number): CanvasPick | null
• setTheme(theme: Theme): void
• dispose(): void

DirtyRegionTracker

ts
Copy
class DirtyRegionTracker

Methods

• invalidateAll(): void — Next frame repaints everything (camera moved, theme swapped, resized …).
• reset(): void — Forget everything (a new diagram, or a disposed renderer).
• diff(current: Map<string, VNode>, measure: (vnode: VNode) => Bounds | null): DirtyDiff — Diff this frame's entities against the last one.
• getBounds(key: string): Bounds | null | undefined — Bounds recorded for an entity on the last frame (testing / diagnostics).
• get size(): number

VNodePainter

Paints VNode trees. Stateless between frames apart from the colour-key allocator the caller injects.

ts
Copy
class VNodePainter

Methods

• constructor(private readonly resolver: CanvasStyleResolver)
• paint(ctx: Canvas2DLike, root: VNode, options: PaintOptions): PaintResult
• measure(vnode: VNode, worldToDevice: Matrix = IDENTITY): Bounds | null — World bounds of a subtree, drawing nothing. Used by the dirty tracker to measure the entities that actually changed (and only those).