Flow Editor API

Import the editor, template directives, graph types, event types, and validation helper from @tailng-ui/flow.

Editor inputs

Editor outputs

Foblex gesture callbacks may run outside Angular's zone. Flow Editor re-enters the zone before every public output is emitted.

Graph models

Built-in statuses include idle, queued, running, waiting, completed, failed, paused, retrying, skipped, cancelled, and awaiting-input. Supply a custom string union through the editor's TStatus generic when your runtime needs additional states.

TngFlowPortComponent is the reusable visual port shell used by the editor. Foblex connector directives remain private to TngFlowEditorComponent.

Connection routing

Persist path geometry in connection.routing. A connection override wins over options.defaultConnection, which wins over TailNG's compatibility default. Existing definitions remain Bézier unless an application opts into another default.

offset and radius are non-negative canvas values. waypoints are canvas coordinates. Set connectionWaypointsEnabled: true to show editing handles on selected connections in edit mode; inspect and readonly modes only render the saved route.

Connection motion

Set connection motion through presentation.connections. Motion changes only the SVG path presentation, so straight, Bézier, segmented, and adaptive connections retain their existing geometry. Multiple connections can animate at the same time.

options.motionPreference accepts system, enabled, or disabled. Reduced motion preserves a static emphasized path, so execution state remains visible without movement.

Node template context

Add <ng-template tngFlowNode="node-type"> as editor content. The template replaces only the node body; Flow Editor retains node geometry, drag handling, connectors, selection, and accessibility.

Connection labels and template context

A connection with label receives a default, visually truncated path label while retaining its complete accessible name. description supplies additional accessible and hover context. Add <ng-template tngFlowConnectionLabel> to replace only the default label content. The earlier tngFlowConnection spelling remains supported. Flow Editor retains the path, true-path midpoint shell, validation badge, selection, reassignment, and accessibility behavior.

The first connection-template contract deliberately omits midpoint. Foblex positions the editor-owned shell at the configured start, center, or end position along the true path for adaptive, Bézier, orthogonal, and straight connections.

Palette items

Apply [tngFlowPaletteItem] to a native button to make a typed catalog item draggable. Bind (tngFlowPaletteItemActivate) to editor.requestNodeCreate(...) for click and keyboard placement at the visible viewport center.

• tngFlowPaletteItemDisabled disables drag and activation.
• tngFlowPaletteItemPreview accepts a drag-preview template.
• tngFlowPaletteItemPlaceholder accepts a source placeholder template.
• tngFlowPaletteItemPreviewMatchSize controls preview sizing.

The directive and editor exchange a private payload. Foblex external-item data is not part of the TailNG public contract.

Imperative methods

Access these through #editor="tngFlowEditor" or viewChild().

Alignment, distribution, and smart guides

alignTngFlowNodes(bounds, alignment, options?) and distributeTngFlowNodes(bounds, axis, options?) are renderer-neutral pure utilities. They accept measured, unscaled bounds and return stable position-only moves without changing the input records. Disabled nodes are ignored; locked nodes are fixed anchors by default or can be excluded with lockedNodes: 'ignore'.

Distribution uses equal edge-to-edge gaps for mixed-size nodes. Grid snapping is applied last, so it deterministically wins when an exact guide or computed gap does not fall on the grid. Editor smart-guide thresholds are specified in CSS-screen pixels and converted for the current canvas scale, keeping the magnetic distance consistent at every zoom level.

Smart guides are disabled by default and render only in edit mode. A configured suppression modifier is sampled on the initiating pointer down for the entire drag. Locked nodes remain selectable TailNG anchors but are excluded from Foblex's movable selection.

Commands and context menus

Command requests carry the current controlled selection and an optional canvas anchor. Copy is available in edit and inspect modes; undo, redo, cut, paste, and duplicate are edit-only. TailNG never reads or writes clipboard payloads and does not maintain history.

Context-menu targets distinguish canvas, node, connection, and port requests. Pointer requests expose browser clientPosition coordinates for overlay placement and transformed canvasPosition coordinates for graph actions. Keyboard requests use the active graph element's visual centre or the viewport centre.

For an unselected selectable node or connection, selectionChange emits first in the same interaction turn. contextMenuRequested then carries that proposed selection even before the application writes it back.

Validation

Supply application issues through validation. Read editor.resolvedValidation() for application and structural issues together, or call validateTngFlowDefinition(definition) before persistence or execution.

• Empty or duplicate node, port, and connection ids
• Missing endpoints and input/output direction mismatches
• Incompatible categories or explicit target allow-lists
• Disallowed self-connections and port multiplicity violations