Selector: f-connection
The FConnectionComponent is a component that represents a connection between nodes in a flow. It allows customization of the connection's appearance and behaviour, including color, type, and interactivity.
fConnectionId: string;
The unique identifier for the component instance. Automatically generated. Default: f-connection-${uniqueId++}
fReassignDisabled: boolean;
Indicates whether the connection cannot be reassigned. Default: false
.
fSelectionDisabled: boolean;
Indicates whether the connection cannot be selected. Default: false
.
fStartColor: string;
The color at the start of the connection. Default: black
.
fEndColor: string;
The color at the end of the connection. Default: black
.
fOutputId: string;
The identifier of the FNodeOutputDirective where the connection starts.
fInputId: string;
The identifier of the FNodeInputDirective where the connection ends.
fBehavior: EFConnectionBehavior;
The behaviour of the connection, affecting its positioning and flexibility. Accepts a value from EFConnectionBehavior enum. Default: EFConnectionBehavior.FIXED
fType: EFConnectionType | string;
The visual type of the connection, such as straight, bezier and etc. Accepts a value from EFConnectionType enum or string for custom connection. Default: EFConnectionType.STRAIGHT
fText: string;
The text displayed on the connection. Default: null
.f-component
A general class applied to all F components for shared styling.
.f-connection
Class specific to the connection component, providing styles for connection representation.
.f-connection-selection-disabled
Class applied to the connection when fSelectionDisabled
is true
.
.f-connection-reassign-disabled
Class applied to the connection when fReassignDisabled
is `true.
.f-selected
Class applied to the connection when it is selected.
Add the f-connection
component to the f-canvas. Provide the fOutputId
and fInputId
inputs to specify the start and end points of the connection.
<f-flow>
<f-canvas>
|:|<f-connection [fOutputId]="id1" [fInputId]="id2"></f-connection>|:|
</f-canvas>
</f-flow>
Examples of different connection types. The connection type can be set using the fType
input. Valid values are straight
, bezier
and `segment from EFConnectionType enum.
Examples of different connection behaviours. The connection behaviour can be set using the fBehavior
input. Valid values are: fixed
, fixed_center
and floating
from EFConnectionBehaviour enum.
Examples of providing custom connection types. The connection type can be set using an array of providers.
Each connection can be reassigned to another fNodeInput. The fReassignDisabled
property can be used to disable this feature. Each connection has a DragHandle
at the end, drag it to reassign the connection to another fNodeInput.