Skip to content

Commit afdd469

Browse files
siarheihuzarevichsiarheihuzarevich
committed
docs: Added drag to connect and drag to reassign examples
1 parent 766e456 commit afdd469

14 files changed

Lines changed: 73 additions & 17 deletions

‎projects/f-examples/connections/drag-to-connect/drag-to-connect.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<f-flow fDraggable (fCreateConnection)="addConnection($event)">
1+
<f-flow fDraggable (fLoaded)="onLoaded()" (fCreateConnection)="addConnection($event)">
22
<f-canvas>
33
<f-connection-for-create></f-connection-for-create>
44

‎projects/f-examples/connections/drag-to-connect/drag-to-connect.component.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
2-
import { FCreateConnectionEvent, FFlowModule } from '@foblex/flow';
1+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
2+
import { FCanvasComponent, FCreateConnectionEvent, FFlowModule } from '@foblex/flow';
33

44
@Component({
55
selector: 'drag-to-connect',
@@ -13,6 +13,9 @@ import { FCreateConnectionEvent, FFlowModule } from '@foblex/flow';
1313
})
1414
export class DragToConnectComponent {
1515

16+
@ViewChild(FCanvasComponent, { static: true })
17+
public fCanvas!: FCanvasComponent;
18+
1619
public connections: { outputId: string, inputId: string }[] = [];
1720

1821
constructor(
@@ -27,4 +30,8 @@ export class DragToConnectComponent {
2730
this.connections.push({ outputId: event.fOutputId, inputId: event.fInputId });
2831
this.changeDetectorRef.detectChanges();
2932
}
33+
34+
public onLoaded(): void {
35+
this.fCanvas.resetScaleAndCenter(false);
36+
}
3037
}

‎projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<f-flow fDraggable (fReassignConnection)="reassignConnection($event)">
1+
<f-flow fDraggable (fLoaded)="onLoaded()" (fReassignConnection)="reassignConnection($event)">
22
<f-canvas>
33
@for (connection of connections;track connection.inputId) {
44
<f-connection fBehavior="floating"

‎projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
2-
import { FFlowModule, FReassignConnectionEvent } from '@foblex/flow';
1+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
2+
import { FCanvasComponent, FFlowModule, FReassignConnectionEvent } from '@foblex/flow';
33

44
@Component({
55
selector: 'drag-to-reassign',
@@ -13,6 +13,9 @@ import { FFlowModule, FReassignConnectionEvent } from '@foblex/flow';
1313
})
1414
export class DragToReassignComponent {
1515

16+
@ViewChild(FCanvasComponent, { static: true })
17+
public fCanvas!: FCanvasComponent;
18+
1619
public connections: { outputId: string, inputId: string }[] = [
1720
{ outputId: '1', inputId: '2' },
1821
];
@@ -29,4 +32,8 @@ export class DragToReassignComponent {
2932
this.connections = [ { outputId: event.fOutputId, inputId: event.newFInputId } ];
3033
this.changeDetectorRef.detectChanges();
3134
}
35+
36+
public onLoaded(): void {
37+
this.fCanvas.resetScaleAndCenter(false);
38+
}
3239
}

‎public/docs/en/examples/drag-to-connect.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Drag to Connect
2+
3+
## Description
4+
5+
This guide shows how to create connection between connectors using drag and drop events, providing a comprehensive approach to building interactive flow-based diagrams.
6+
7+
## Example
8+
9+
::: ng-component <drag-to-connect></drag-to-connect> [height]="600"
10+
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-connect/drag-to-connect.component.html
11+
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-connect/drag-to-connect.component.ts
12+
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-connect/drag-to-connect.component.scss
13+
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
14+
:::
15+
16+
17+

‎public/docs/en/examples/drag-to-reassign.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Drag to Reassign
2+
3+
## Description
4+
5+
This example demonstrates how to reassign connections between connectors using drag and drop events, providing a comprehensive approach to building interactive flow-based diagrams.
6+
7+
## Example
8+
9+
::: ng-component <drag-to-reassign></drag-to-reassign> [height]="600"
10+
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.html
11+
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.ts
12+
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.scss
13+
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
14+
:::
15+

‎public/docs/en/examples/environment.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ function createEnvironment(): IDocsEnvironment {
4040
{ tag: 'resize-handle', component: import('../../../../projects/f-examples/nodes/resize-handle/resize-handle.component') },
4141
{ tag: 'grouping', component: import('../../../../projects/f-examples/nodes/grouping/grouping.component') },
4242

43+
{ tag: 'drag-to-connect', component: import('../../../../projects/f-examples/connections/drag-to-connect/drag-to-connect.component') },
44+
{ tag: 'drag-to-reassign', component: import('../../../../projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component') },
45+
4346
{ tag: 'dagre-layout-example', component: import('../../../../projects/f-examples/layouts/dagre-layout-example/dagre-layout-example.component') },
4447
{ tag: 'elkjs-layout-example', component: import('../../../../projects/f-examples/layouts/elkjs-layout-example/elkjs-layout-example.component') },
4548

@@ -144,10 +147,16 @@ function connectionGroup(): INavigationGroup {
144147
{
145148
link: 'drag-to-connect',
146149
text: 'Drag to Connect',
150+
image: './previews/examples/drag-to-connect.light.png',
151+
image_dark: './previews/examples/drag-to-connect.dark.png',
152+
description: 'Learn how to connect nodes by dragging a connection between them. This example demonstrates how to create connections between nodes, providing a comprehensive guide to building interactive flow-based diagrams.',
147153
},
148154
{
149155
link: 'drag-to-reassign',
150156
text: 'Drag to Reassign',
157+
image: './previews/examples/drag-to-reassign.light.png',
158+
image_dark: './previews/examples/drag-to-reassign.dark.png',
159+
description: 'Discover how to reassign connections by dragging them to a new connector. This example demonstrates how to move connections between nodes, enabling users to reassign them easily within Angular and Foblex Flow.',
151160
},
152161
{
153162
link: 'add-node-on-connection-drop',

‎public/docs/en/guides/environment.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ function createEnvironment(): IDocsEnvironment {
3939
{ tag: 'connection-type', component: import('../../../../projects/f-guides-examples/connection-type/connection-type.component') },
4040
{ tag: 'connection-behaviour', component: import('../../../../projects/f-guides-examples/connection-behaviour/connection-behaviour.component') },
4141
{ tag: 'custom-connection-type', component: import('../../../../projects/f-guides-examples/custom-connection-type/custom-connection-type.component') },
42-
{ tag: 'drag-to-connect', component: import('../../../../projects/f-guides-examples/drag-to-connect/drag-to-connect.component') },
43-
{ tag: 'drag-to-reassign', component: import('../../../../projects/f-guides-examples/drag-to-reassign/drag-to-reassign.component') },
42+
{ tag: 'drag-to-connect', component: import('../../../../projects/f-examples/connections/drag-to-connect/drag-to-connect.component') },
43+
{ tag: 'drag-to-reassign', component: import('../../../../projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component') },
4444
{ tag: 'drag-snap-connection', component: import('../../../../projects/f-guides-examples/drag-snap-connection/drag-snap-connection.component') },
4545
{ tag: 'connectable-side', component: import('../../../../projects/f-guides-examples/connectable-side/connectable-side.component') },
4646
{ tag: 'connection-from-outlet', component: import('../../../../projects/f-guides-examples/connection-from-outlet/connection-from-outlet.component') },

‎public/docs/en/guides/f-connection-component.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,9 @@ Examples of providing custom connection types. The connection type can be set us
8080

8181
#### Reassign Connection
8282
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).
83-
::: ng-component <drag-to-reassign></drag-to-reassign>
84-
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/drag-to-reassign/drag-to-reassign.component.html
85-
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/drag-to-reassign/drag-to-reassign.component.ts
86-
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/drag-to-reassign/drag-to-reassign.component.scss
87-
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/_flow-common.scss
83+
::: ng-component <drag-to-reassign></drag-to-reassign>
84+
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.html
85+
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.ts
86+
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.scss
87+
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
8888
:::

‎public/docs/en/guides/f-connection-for-create-component.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,9 @@ Add the `f-connection-for-create` component to the [f-canvas](f-canvas-component
3131
The following example shows how to create a connection between two nodes.
3232

3333
::: ng-component <drag-to-connect></drag-to-connect>
34-
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/drag-to-connect/drag-to-connect.component.html
35-
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/drag-to-connect/drag-to-connect.component.ts
36-
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/drag-to-connect/drag-to-connect.component.scss
37-
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/_flow-common.scss
34+
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-connect/drag-to-connect.component.html
35+
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-connect/drag-to-connect.component.ts
36+
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/drag-to-connect/drag-to-connect.component.scss
37+
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
3838
:::
39+

0 commit comments

Comments
 (0)