Skip to content

Commit fcfce91

Browse files
siarheihuzarevichsiarheihuzarevich
committed
docs: Added custom connections example
1 parent 377b610 commit fcfce91

9 files changed

Lines changed: 118 additions & 7 deletions

File tree

‎projects/f-examples/_flow-common.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88

99
--connection-color: rgba(60, 60, 67, 0.78);
1010
--snap-connection-color: rgba(60, 60, 67, 0.38);
11-
--connection-gradient-1: #915930;
12-
--connection-gradient-2: #18794e;
11+
--connection-gradient-1: #b8272c;
12+
--connection-gradient-2: #30a46c;
1313

1414
--outlet-color: #3451b2;
1515
--input-output-color: rgba(60, 60, 67, 0.78);
@@ -29,8 +29,8 @@
2929

3030
--connection-color: rgba(235, 235, 245, 0.6);
3131
--snap-connection-color: rgba(235, 235, 245, 0.2);
32-
--connection-gradient-1: #f9b44e;
33-
--connection-gradient-2: #3dd68c;
32+
--connection-gradient-1: #f66f81;
33+
--connection-gradient-2: #298459;
3434

3535
--outlet-color: #a8b1ff;
3636
--input-output-color: rgba(235, 235, 245, 0.6);

‎projects/f-examples/connections/custom-connections/custom-connections.component.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<f-flow fDraggable (fLoaded)="onLoaded()">
2+
<f-canvas>
3+
<f-connection [fReassignDisabled]="true"
4+
fOutputId="1" fInputId="2" fBehavior="fixed" fType="segment"
5+
class="gradient-color"
6+
fStartColor="var(--connection-gradient-1)" fEndColor="var(--connection-gradient-2)">
7+
</f-connection>
8+
<div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1" fOutputConnectableSide="bottom">
9+
I'm a node
10+
</div>
11+
<div fNode fDragHandle [fNodePosition]="{ x: 300, y: 0 }" fNodeInput fInputId="2" fInputConnectableSide="top">
12+
I'm a node
13+
</div>
14+
15+
<f-connection [fReassignDisabled]="true" fOutputId="3" fInputId="4" fBehavior="floating">
16+
</f-connection>
17+
<div fNode fDragHandle [fNodePosition]="{ x: 0, y: 150 }" fNodeOutput fOutputId="3" fOutputConnectableSide="right">
18+
I'm a node
19+
</div>
20+
<div fNode fDragHandle [fNodePosition]="{ x: 300, y: 150 }" fNodeInput fInputId="4" fInputConnectableSide="left">
21+
I'm a node
22+
</div>
23+
</f-canvas>
24+
</f-flow>

‎projects/f-examples/connections/custom-connections/custom-connections.component.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@use "../../flow-common";
2+
3+
::ng-deep custom-connections {
4+
.f-connection {
5+
6+
.f-connection-drag-handle {
7+
fill: none;
8+
stroke: none;
9+
}
10+
11+
.f-connection-selection {
12+
fill: none;
13+
stroke-width: 20;
14+
}
15+
16+
.f-connection-path {
17+
fill: none;
18+
stroke-width: 6;
19+
}
20+
21+
&:not(.gradient-color) {
22+
.f-connection-path {
23+
stroke: #db2777;
24+
stroke-width: 4;
25+
}
26+
}
27+
&:hover {
28+
stroke: var(--minimap-view-color);
29+
}
30+
}
31+
}
32+
33+
.f-node {
34+
@include flow-common.node;
35+
}

‎projects/f-examples/connections/custom-connections/custom-connections.component.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
2+
import { FCanvasComponent, FFlowModule } from '@foblex/flow';
3+
4+
@Component({
5+
selector: 'custom-connections',
6+
styleUrls: [ './custom-connections.component.scss' ],
7+
templateUrl: './custom-connections.component.html',
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
standalone: true,
10+
imports: [
11+
FFlowModule
12+
]
13+
})
14+
export class CustomConnectionsComponent {
15+
16+
@ViewChild(FCanvasComponent, { static: true })
17+
public fCanvas!: FCanvasComponent;
18+
19+
public onLoaded(): void {
20+
this.fCanvas.resetScaleAndCenter(false);
21+
}
22+
}

‎public/markdown/examples/custom-connections.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Custom Connections
2+
3+
## Description
4+
5+
This guide shows how to customize connections between connectors, allowing for custom connection styles to be applied to connections between connectors.
6+
7+
## Example
8+
9+
::: ng-component <custom-connections></custom-connections> [height]="600"
10+
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/custom-connections/custom-connections.component.html
11+
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/custom-connections/custom-connections.component.ts
12+
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/custom-connections/custom-connections.component.scss
13+
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
14+
:::
15+
16+
17+
18+
19+

‎public/markdown/examples/environment.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ function createEnvironment(): IDocsEnvironment {
5656
{ tag: 'custom-connection-type', component: import('../../../projects/f-examples/connections/custom-connection-type/custom-connection-type.component') },
5757
{ tag: 'connection-behaviours', component: import('../../../projects/f-examples/connections/connection-behaviours/connection-behaviours.component') },
5858
{ tag: 'connection-markers', component: import('../../../projects/f-examples/connections/connection-markers/connection-markers.component') },
59+
{ tag: 'custom-connections', component: import('../../../projects/f-examples/connections/custom-connections/custom-connections.component') },
5960

6061
{ tag: 'dagre-layout-example', component: import('../../../projects/f-examples/layouts/dagre-layout-example/dagre-layout-example.component') },
6162
{ tag: 'elkjs-layout-example', component: import('../../../projects/f-examples/layouts/elkjs-layout-example/elkjs-layout-example.component') },
@@ -292,6 +293,16 @@ function connectionGroup(): INavigationGroup {
292293
image_height: 600,
293294
image_type: 'image/png',
294295
},
296+
{
297+
link: 'custom-connections',
298+
text: 'Custom Connections',
299+
description: 'Explore how to customize connections. This example demonstrates how to create custom connections, providing a comprehensive guide to building interactive flow-based diagrams.',
300+
image: './previews/examples/custom-connections.light.png',
301+
image_dark: './previews/examples/custom-connections.dark.png',
302+
image_width: 791,
303+
image_height: 600,
304+
image_type: 'image/png',
305+
},
295306
// {
296307
// link: 'connection-text',
297308
// text: 'Connection Text',

‎public/previews/examples/custom-connections.dark.png‎

24.4 KB
Loading

‎public/previews/examples/custom-connections.light.png‎

24.3 KB
Loading

‎src/app/app.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<router-outlet></router-outlet>
2-
<button class="take-screenshot" (click)="takeScreenshot()">
3-
Take Screenshot
4-
</button>
2+
<!--<button class="take-screenshot" (click)="takeScreenshot()">-->
3+
<!-- Take Screenshot-->
4+
<!--</button>-->

0 commit comments

Comments
 (0)