You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: public/markdown/guides/f-connection-component.md
+28-23Lines changed: 28 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,46 +2,47 @@
2
2
3
3
**Selector:** f-connection
4
4
5
-
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.
5
+
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.
6
6
7
7
## Inputs
8
8
9
-
-`fConnectionId: InputSignal<string>;` The unique identifier for the component instance. Automatically generated. Default: `f-connection-${uniqueId++}`
9
+
-`fConnectionId: InputSignal<string>;` The unique identifier for the component instance. Automatically generated. Default: `f-connection-${uniqueId++}`
10
10
11
-
-`fReassignDisabled: InputSignal<boolean>;` Indicates whether the connection cannot be reassigned. Default: `false`.
11
+
-`fReassignDisabled: InputSignal<boolean>;` Indicates whether the connection cannot be reassigned. Default: `false`.
12
12
13
-
-`fSelectionDisabled: InputSignal<boolean>;` Indicates whether the connection cannot be selected. Default: `false`.
13
+
-`fSelectionDisabled: InputSignal<boolean>;` Indicates whether the connection cannot be selected. Default: `false`.
14
14
15
-
-`fStartColor: InputSignal<string>;` Sets the color at the start of the connection line. Combined with fEndColor, this produces a gradient from start to end. Default: `black`.
15
+
-`fStartColor: InputSignal<string>;` Sets the color at the start of the connection line. Combined with fEndColor, this produces a gradient from start to end. Default: `black`.
16
16
17
-
-`fEndColor: InputSignal<string>;` Sets the color at the end of the connection line. Use this together with fStartColor to create a two-stop gradient along the connection. Default: `black`.
17
+
-`fEndColor: InputSignal<string>;` Sets the color at the end of the connection line. Use this together with fStartColor to create a two-stop gradient along the connection. Default: `black`.
18
18
19
-
-`fOutputId: InputSignal<string>;` The identifier of the [FNodeOutputDirective](f-node-output-directive) where the connection starts.
19
+
-`fOutputId: InputSignal<string>;` The identifier of the [FNodeOutputDirective](f-node-output-directive) where the connection starts.
20
20
21
-
-`fInputId: InputSignal<string>;` The identifier of the [FNodeInputDirective](f-node-input-directive) where the connection ends.
21
+
-`fInputId: InputSignal<string>;` The identifier of the [FNodeInputDirective](f-node-input-directive) where the connection ends.
22
22
23
-
-`fBehavior: InputSignal<EFConnectionBehavior>;` The behaviour of the connection, affecting its positioning and flexibility. Accepts a value from [EFConnectionBehavior]() enum. Default: `EFConnectionBehavior.FIXED`
23
+
-`fBehavior: InputSignal<EFConnectionBehavior>;` The behaviour of the connection, affecting its positioning and flexibility. Accepts a value from [EFConnectionBehavior]() enum. Default: `EFConnectionBehavior.FIXED`
24
24
25
-
-`fType: InputSignal<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`
25
+
-`fType: InputSignal<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`
26
26
27
-
-`fText: InputSignal<string>;` The text displayed on the connection. Default: `null`
27
+
-`fText: InputSignal<string>;` The text displayed on the connection. Default: `null`
28
28
29
-
-`fTextStartOffset: InputSignal<number>;` The offset of the text from the start of the connection. Default: `50%`
29
+
-`fTextStartOffset: InputSignal<number>;` The offset of the text from the start of the connection. Default: `50%`
30
30
31
-
-`fOffset: InputSignal<number>;` Minimum length of the connection before a curve can occur. Default: `12`
31
+
-`fOffset: InputSignal<number>;` Minimum length of the connection before a curve can occur. Default: `12`
32
32
33
-
-`fRadius: InputSignal<number>;` Radius used for curves. Default: `8`
33
+
-`fRadius: InputSignal<number>;` Radius used for curves. Default: `8`
34
34
35
35
## Styles
36
-
-`.f-component` A general class applied to all F components for shared styling.
37
36
38
-
-`.f-connection` Class specific to the connection component, providing styles for connection representation.
37
+
-`.f-component` A general class applied to all F components for shared styling.
39
38
40
-
-`.f-connection-selection-disabled` Class applied to the connection when `fSelectionDisabled` is `true`.
39
+
-`.f-connection` Class specific to the connection component, providing styles for connection representation.
41
40
42
-
-`.f-connection-reassign-disabled` Class applied to the connection when `fReassignDisabled` is `true.
41
+
-`.f-connection-selection-disabled` Class applied to the connection when `fSelectionDisabled` is `true`.
43
42
44
-
-`.f-selected` Class applied to the connection when it is selected.
43
+
-`.f-connection-reassign-disabled` Class applied to the connection when `fReassignDisabled` is `true.
44
+
45
+
-`.f-selected` Class applied to the connection when it is selected.
45
46
46
47
## Usage
47
48
@@ -58,6 +59,7 @@ Add the `f-connection` component to the [f-canvas](f-canvas-component). Provide
58
59
## Examples
59
60
60
61
#### Different Connection Types
62
+
61
63
Examples of different connection types. The connection type can be set using the `fType` input. Valid values are `straight`, `bezier` and `segment from [EFConnectionType](e-f-connection-type) enum.
@@ -67,6 +69,7 @@ Examples of different connection types. The connection type can be set using the
67
69
:::
68
70
69
71
#### Different Connection Behaviours
72
+
70
73
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](e-f-connection-behaviour) enum.
Each connection can be reassigned to another [fNodeInput](f-node-input-directive). 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](f-node-input-directive).
0 commit comments