Flow

Selector: f-flow
Class: FFlowComponent

f-flow is the required root container for every diagram in Foblex Flow.
All primitives (f-canvas, nodes, connectors, connections, and extensions) must be placed under a single f-flow.

Role in the hierarchy

f-flow bootstraps the internal runtime and acts as the main integration point for:

• registration of nodes/connectors/connections,
• selection and utility APIs,
• extension components/directives like fDraggable, fZoom, minimap, magnetic helpers, etc.

If you render a diagram with Foblex Flow, you always start with f-flow.

What it’s for

Use f-flow when you need:

• a predictable place to listen for “ready” (fNodesRendered / fFullRendered),
• imperative APIs for selection, bounding boxes, and exporting the current flow state,
• a host for extensions like fDraggable, minimap, magnetic helpers, etc.

Foblex Flow is “interaction + rendering infrastructure”.
Your application still owns the data model (nodes list, positions, connections, persistence).

How it works

f-flow registers itself in the internal store, watches data changes, redraws connection layers, and emits render lifecycle events as the flow stabilizes. Public methods like select, clearSelection, and getState call into that same store.

API

Inputs

• fFlowId: InputSignal<string>; The unique identifier for the flow instance. Default: f-flow-${uniqueId++}

Outputs

• fNodesRendered: OutputEmitterRef<string>; Emits once when the current render cycle has finished rendering nodes and groups. Payload is the current flow id. Typical usage: run logic that only depends on node registration and measurement.

• fFullRendered: OutputEmitterRef<string>; Emits once when the current render cycle has finished the full render cycle for nodes and connections. Payload is the current flow id. Typical usage: center the canvas, apply initial zoom, or run logic that depends on final connection geometry.

• fLoaded: OutputEmitterRef<string>; Deprecated alias for fFullRendered.

Methods

• redraw(): void; Forces a redraw of nodes and connections.

• reset(): void; Resets internal loaded state. Next render will emit fNodesRendered and fFullRendered again.

• getNodesBoundingBox(): IRect | null; Returns a bounding rectangle that covers all nodes and groups in the current flow.

• getSelection(): ICurrentSelection; Returns selected node/group/connection ids.

• getPositionInFlow(position: IPoint): IRect; Converts a point from the viewport into flow coordinates (relative to the flow).

• getState(): IFFlowState; Exports the full flow state: nodes, groups and connections (including their current transforms/positions).

• selectAll(): void; Selects all selectable items.

• select(nodesAndGroups: string[], connections: string[], isSelectedChanged: boolean = true): void; Selects the specified nodes, groups and connections.

• clearSelection(): void; Clears current selection.

These “imperative” APIs are meant for toolbars, keyboard shortcuts, and integration with external UI (side panels, inspectors, etc.).

Types

IPoint

IRect

IFFlowState

ICurrentSelection

Styling

• .f-component Base class for flow primitives.
• .f-flow Host class for the root container.
• .f-node, .f-group, .f-connection Internal layout classes used by flow rendering.

Notes / Pitfalls

• fNodesRendered and fFullRendered are one-time per internal render cycle; if you call reset(), a later render can emit again.
• fLoaded still works for backward compatibility, but new code should prefer fFullRendered.
• Programmatic select(...) runs after data-change notification, so call it when ids are already present in the flow.

Example