Canvas

Selector: f-canvas
Class: FCanvasComponent

f-canvas is the viewport layer inside f-flow. It is responsible for the transform of the whole diagram - pan (position) and zoom (scale).
Everything that should move/scale together (nodes, groups, connections) must be placed inside f-canvas.

Role in the flow structure

A typical diagram structure is always:

• f-flow is the root container and the integration point for plugins (drag, selection, zoom, helpers, minimap).
• f-canvas is the viewport that applies position + scale to its content.
• Nodes / groups / connections outside of f-canvas won’t participate in transforms and interaction logic.

What you get

• Pan/zoom transform state for the whole diagram.
• Imperative viewport methods (fitToScreen, centerGroupOrNode, scale control).
• Debounced fCanvasChange notifications for sync with external UI.

API

Inputs

• position: InputSignal<IPoint>; Canvas position (pan). When it changes, the canvas is redrawn.

• scale: InputSignal<number>; Canvas scale (zoom). When it changes, the canvas is redrawn.

• debounceTime: InputSignal<number>; Debounce time (ms) for fCanvasChange. Values below 0 are normalized to 0.

Outputs

• fCanvasChange: OutputEmitterRef<FCanvasChangeEvent>; Emits when the canvas transform changes (position/scale). Useful for syncing external UI (toolbar, status).

Methods

• redraw(): void; Triggers an immediate redraw.

• getPosition(): IPoint; Returns current canvas position.

• setPosition(position: IPoint): void; Sets canvas position.

• getScale(): number; Returns current scale.

• setScale(scale: number, toPosition: IPoint = { x: 0, y: 0 }): void; Sets scale. Optionally zooms around a point (useful for “zoom to cursor” UX).

• resetScale(): void; Resets scale to 1.

• resetScaleAndCenter(animated: boolean = true): void; Resets scale to 1 and centers the viewport.

• fitToScreen(padding: IPoint = { x: 0, y: 0 }, animated: boolean = true): void; Fits all nodes/groups into the viewport. Padding adds extra space around content.

• centerGroupOrNode(groupOrNodeId: string, animated: boolean = true): void; Centers the viewport on a group or node by id.

Types

IPoint

FCanvasChangeEvent

ITransformModel

Styling

• .f-component Base class for flow primitives.
• .f-canvas Host class for the canvas layer.
• .f-connections-container Connection layer container.
• .f-canvas-dragging Temporary host class used during drag transitions.
• .canvas-dragging Deprecated compatibility alias for .f-canvas-dragging.

Notes / Pitfalls

• f-canvas depends on a parent f-flow; using it alone is not supported.
• High-frequency transform updates can flood consumers if debounceTime is 0; use debouncing when syncing external UI.
• Prefer fitToScreen or resetScaleAndCenter after fFullRendered so nodes and connection geometry are already stable.

Common tasks

Fit content after the first render

Call viewport helpers after fFullRendered, when nodes and connections are already fully rendered.

Center a node from a side panel

When a user clicks an item in a list, center the canvas:

Sync external UI

Listen to fCanvasChange to reflect current pan/zoom outside the canvas.