Node

Selector: [fNode]
Class: FNodeDirective

FNodeDirective turns any element into a node inside a Foblex Flow diagram: it can be positioned on the canvas, selected, dragged (with fDraggable), and used as a host for connectors.

Nodes must be placed inside f-canvas (which itself must be inside f-flow).

Quick start

A node with a fixed position

Make it draggable

To drag nodes, enable fDraggable on the flow and provide a drag handle inside the node:

Add connectors (optional)

Place connector directives inside the node and connect them using f-connection.

How it works

• A node registers itself in the internal flow store and participates in rendering and hit-testing.
• During interactions (drag/resize/rotate), the library updates the node internally for smooth UX.
• Your app typically persists changes on “final” outputs (for example fNodePositionChange after a drag ends), keeping your data model as the source of truth.

With the optional Managed Flow State plugin, completed move gestures update the node records automatically. User resize and rotation are not captured by managed state v1, so applications using those interactions still persist their final outputs themselves.

API

Inputs

• fNodeId: InputSignal<string>; Node identifier. Default: f-node-${uniqueId++}. Use a stable id if you want selection/state to survive rerenders.

• fNodeParentId: InputSignal<string | null | undefined>; Parent node/group id (logical hierarchy). Default: null. Enables container behaviors such as bounds restrictions and auto-size rules (when used).

• fNodePosition: ModelSignal<IPoint>; Node position in flow coordinates. This is the primary property that defines where the node is rendered.

• fNodeSize: InputSignal<ISize | undefined>; Optional fixed size. If omitted, the size is measured from content (content changes can affect connection routing).

• fNodeRotate: ModelSignal<number>; Default: 0. Rotation (degrees). Affects node geometry and connector placement.

• fConnectOnNode: InputSignal<boolean>; Default: true. Allows dropping a connection onto the node body (not directly on an input). The library will choose the first available connectable input.

• fMinimapClass: InputSignal<string | string[]>; Extra CSS class(es) applied in the minimap only.

• fNodeDraggingDisabled: InputSignal<boolean>; Default: false. Locks dragging for this node (useful for read-only/locked nodes).

• fNodeSelectionDisabled: InputSignal<boolean>; Default: false. Prevents selecting this node.

• fIncludePadding: InputSignal<boolean>; Default: true. When the node has a child, this controls whether the parent’s CSS padding is considered when restricting child movement.

• fAutoExpandOnChildHit: InputSignal<boolean>; Default: false. Container UX: auto-expand a collapsed parent when a child is dragged into it.

• fAutoSizeToFitChildren: InputSignal<boolean>; Default: false. Container UX: resize the parent node so all children fit inside it.

Outputs

Important: outputs are designed for state persistence.
In typical drag flows, you react to the final result (not per-mousemove streaming).

• fNodePositionChange: OutputEmitterRef<IPoint>;
  Emits when the final node position is committed by an interaction (for example, after drag ends).

• fNodeRotateChange: OutputEmitterRef<number>;
  Emits when rotation is committed (after rotate interaction ends).

• fNodeSizeChange: OutputEmitterRef<IRect>;
  Emits when resize is committed (after resize ends). Payload is the resulting rect.

Methods

• refresh(): void; Forces a node refresh for cases where geometry/connector placement must be recalculated (for example, after significant DOM/content changes that affect size/anchors).

Types

IPoint

ISize

IRect

Styling

• .f-component Base class for flow primitives.
• .f-node Node host class.
• .f-node-dragging-disabled Applied when fNodeDraggingDisabled = true.
• .f-node-selection-disabled Applied when fNodeSelectionDisabled = true.
• .f-selected Applied when the node is selected.

Notes and pitfalls

• If you render multiple nodes at the same position, they will overlap.
• If you rely on content-based sizing (no fNodeSize), dynamic content changes can cause re-measuring and affect connection routes — this is expected.
• When using fNodeParentId, make sure the referenced parent id exists; otherwise hierarchy-based behaviors won’t apply.
• Connector directives should normally live inside a node; “node-as-connector” patterns are only valid where explicitly documented by an example.

Example

[example.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/nodes/custom-nodes/example.html [example.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/nodes/custom-nodes/example.ts [example.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/nodes/custom-nodes/example.scss