Connection Content

Description

The fConnectionContent directive lets you attach any custom content to a connection line: text, icons, buttons, or widgets. The element can be positioned along the path, shifted perpendicularly, and optionally rotated to follow the connection.

This is useful for adding labels, statuses, metrics, or interactive controls directly on diagram edges. In real products, it is one of the features that turns a passive edge into a meaningful UI element.

Example

[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-content/connection-content.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-content/connection-content.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-content/connection-content.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss

API

position: number (0..1) positions the content along the connection.
offset: number shifts it perpendicularly in pixels.
align: 'none' | 'along' controls whether the content rotates with the path.

When to use it

Add labels or states to workflow transitions.
Show metrics or diagnostics on graph edges.
Place buttons directly on connections for quick actions.
Build richer diagram semantics without an extra overlay layer.

It is especially helpful when edge semantics are important and the user should not have to inspect a side panel to understand the state of a transition.