Skip to content

Commit 71bf4fc

Browse files
siarheihuzarevichsiarheihuzarevich
committed
docs: Added selection area example
1 parent 044452f commit 71bf4fc

14 files changed

Lines changed: 141 additions & 25 deletions

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
::ng-deep :root {
22
--background-element-color: rgba(0, 0, 0, 0.1);
3+
--selection-area-color: rgba(100, 108, 255, 0.14);
34

45
--disabled-color: #e2e2e2;
56
--node-background-color: #ffffff;
67
--node-border-radius: 2px;
78
--node-border-color: rgba(60, 60, 67, 0.36);
9+
--node-selected-border-color: #3451b2;
810
--node-color: rgba(60, 60, 67, 0.78);
911
--node-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
1012

@@ -23,11 +25,13 @@
2325

2426
&.dark {
2527
--background-element-color: rgba(255, 255, 255, 0.1);
28+
--selection-area-color: rgba(100, 108, 255, 0.16);
2629

2730
--disabled-color: #2c2c2e;
2831
--node-background-color: #000000;
2932
--node-border-radius: 2px;
3033
--node-border-color: rgba(235, 235, 245, 0.38);
34+
--node-selected-border-color: #a8b1ff;
3135
--node-color: rgba(235, 235, 245, 0.6);
3236
--node-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
3337

‎projects/f-examples/extensions/selection-area/selection-area.component.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<f-flow fDraggable (fLoaded)="onLoaded()">
2+
<f-selection-area></f-selection-area>
3+
<f-canvas>
4+
<f-connection fOutputId="output1" fInputId="input1" fBehavior="floating"></f-connection>
5+
<div fNode [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fDragHandle>I'm a node</div>
6+
<div fNode [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fDragHandle>I'm a node</div>
7+
</f-canvas>
8+
</f-flow>
9+

‎projects/f-examples/extensions/selection-area/selection-area.component.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@use "../../flow-common";
2+
@use "../../mdc-controls";
3+
4+
::ng-deep selection-area {
5+
@include flow-common.connection;
6+
@include flow-common.background;
7+
8+
.f-connection {
9+
10+
&.f-selected {
11+
.f-connection-path {
12+
stroke: var(--node-selected-border-color);
13+
}
14+
}
15+
}
16+
}
17+
18+
.f-selection-area {
19+
background-color: var(--selection-area-color);
20+
}
21+
22+
.f-node {
23+
@include flow-common.node;
24+
25+
&.f-selected {
26+
border: 1px solid var(--node-selected-border-color);
27+
}
28+
}

‎projects/f-examples/extensions/selection-area/selection-area.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: 'selection-area',
6+
styleUrls: [ './selection-area.component.scss' ],
7+
templateUrl: './selection-area.component.html',
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
standalone: true,
10+
imports: [
11+
FFlowModule
12+
]
13+
})
14+
export class SelectionAreaComponent {
15+
16+
@ViewChild(FCanvasComponent, { static: true })
17+
public fCanvas!: FCanvasComponent;
18+
19+
public onLoaded(): void {
20+
this.fCanvas.resetScaleAndCenter(false);
21+
}
22+
}

projects/f-examples/extensions/zoom-example/zoom-example.component.html renamed to projects/f-examples/extensions/zoom/zoom.component.html

File renamed without changes.

projects/f-examples/extensions/zoom-example/zoom-example.component.scss renamed to projects/f-examples/extensions/zoom/zoom.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use "../../flow-common";
22

3-
::ng-deep zoom-example {
3+
::ng-deep zoom {
44
@include flow-common.connection;
55
}
66

projects/f-examples/extensions/zoom-example/zoom-example.component.ts renamed to projects/f-examples/extensions/zoom/zoom.component.ts

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

55
@Component({
6-
selector: 'zoom-example',
7-
styleUrls: [ './zoom-example.component.scss' ],
8-
templateUrl: './zoom-example.component.html',
6+
selector: 'zoom',
7+
styleUrls: [ './zoom.component.scss' ],
8+
templateUrl: './zoom.component.html',
99
changeDetection: ChangeDetectionStrategy.OnPush,
1010
standalone: true,
1111
imports: [
1212
FFlowModule,
1313
FCheckboxComponent
1414
]
1515
})
16-
export class ZoomExampleComponent {
16+
export class ZoomComponent {
1717

1818
@ViewChild(FCanvasComponent, { static: true })
1919
public fCanvas!: FCanvasComponent;

‎public/markdown/examples/environment.ts‎

Lines changed: 49 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -120,13 +120,17 @@ function createEnvironment(): IDocsEnvironment {
120120
tag: 'elkjs-layout-example',
121121
component: import('../../../projects/f-examples/layouts/elkjs-layout-example/elkjs-layout-example.component')
122122
},
123+
{
124+
tag: 'selection-area',
125+
component: import('../../../projects/f-examples/extensions/selection-area/selection-area.component')
126+
},
123127
{
124128
tag: 'help-in-positioning-example',
125129
component: import('../../../projects/f-examples/extensions/help-in-positioning-example/help-in-positioning-example.component')
126130
},
127131
{
128-
tag: 'zoom-example',
129-
component: import('../../../projects/f-examples/extensions/zoom-example/zoom-example.component')
132+
tag: 'zoom',
133+
component: import('../../../projects/f-examples/extensions/zoom/zoom.component')
130134
},
131135
{
132136
tag: 'minimap-example',
@@ -205,6 +209,16 @@ function nodesGroup(): INavigationGroup {
205209
image_height: 600,
206210
image_type: 'image/png',
207211
},
212+
// {
213+
// link: 'node-selection',
214+
// text: 'Node Selection',
215+
// description: 'Select nodes in Foblex Flow diagrams for Angular.',
216+
// image: './previews/examples/node-selection.light.png',
217+
// image_dark: './previews/examples/node-selection.dark.png',
218+
// image_width: 806,
219+
// image_height: 600,
220+
// image_type: 'image/png',
221+
// },
208222
{
209223
link: 'resize-handle',
210224
text: 'Resize Handle',
@@ -341,6 +355,16 @@ function connectionGroup(): INavigationGroup {
341355
image_height: 600,
342356
image_type: 'image/png',
343357
},
358+
// {
359+
// link: 'connection-selection',
360+
// text: 'Connection Selection',
361+
// description: 'Select connections in Foblex Flow diagrams for Angular.',
362+
// image: './previews/examples/connection-selection.light.png',
363+
// image_dark: './previews/examples/connection-selection.dark.png',
364+
// image_width: 806,
365+
// image_height: 600,
366+
// image_type: 'image/png',
367+
// },
344368
{
345369
link: 'connection-types',
346370
text: 'Connection Types',
@@ -439,6 +463,16 @@ function extensionGroup(): INavigationGroup {
439463
// link: 'add-node-from-palette',
440464
// text: 'Add Node from Palette',
441465
// },
466+
{
467+
link: 'selection-area',
468+
text: 'Selection Area',
469+
description: 'Add a selection area for multiple node selection in Foblex Flow for Angular.',
470+
image: './previews/examples/selection-area.light.png',
471+
image_dark: './previews/examples/selection-area.dark.png',
472+
image_width: 821,
473+
image_height: 600,
474+
image_type: 'image/png',
475+
},
442476
{
443477
link: 'help-in-positioning',
444478
text: 'Help in Positioning',
@@ -463,8 +497,8 @@ function extensionGroup(): INavigationGroup {
463497
link: 'zoom',
464498
text: 'Zoom',
465499
description: 'Add zoom controls to Foblex Flow diagrams for Angular.',
466-
image: './previews/examples/zoom-example.light.png',
467-
image_dark: './previews/examples/zoom-example.dark.png',
500+
image: './previews/examples/zoom.light.png',
501+
image_dark: './previews/examples/zoom.dark.png',
468502
image_width: 821,
469503
image_height: 600,
470504
image_type: 'image/png',
@@ -513,16 +547,17 @@ function proExamplesGroup(): INavigationGroup {
513547
image_width: 821,
514548
image_height: 600,
515549
image_type: 'image/png',
516-
}, {
517-
text: 'Mind Map',
518-
link: 'f-mind-map-example',
519-
description: 'Design a mind map using Angular and Foblex Flow.',
520-
image: './previews/examples/mind-map-example.light.png',
521-
image_dark: './previews/examples/mind-map-example.dark.png',
522-
image_width: 821,
523-
image_height: 600,
524-
image_type: 'image/png',
525-
}
550+
},
551+
// {
552+
// text: 'Mind Map',
553+
// link: 'f-mind-map-example',
554+
// description: 'Design a mind map using Angular and Foblex Flow.',
555+
// image: './previews/examples/mind-map-example.light.png',
556+
// image_dark: './previews/examples/mind-map-example.dark.png',
557+
// image_width: 821,
558+
// image_height: 600,
559+
// image_type: 'image/png',
560+
// }
526561
// {
527562
// text: 'Call Center Flow',
528563
// link: 'https://github.com/Foblex/f-flow-example',

‎public/markdown/examples/selection-area.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Selection Area
2+
3+
## Description
4+
5+
This guide shows how to add a [selection area](./docs/f-selection-area-component) to the canvas. Use `SHIFT` key and `MOUSE` to select multiple nodes.
6+
7+
## Example
8+
9+
::: ng-component <selection-area></selection-area> [height]="600"
10+
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/selection-area/selection-area.component.html
11+
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/selection-area/selection-area.component.ts
12+
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/selection-area/selection-area.component.scss
13+
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
14+
:::
15+
16+
17+

‎public/markdown/examples/zoom.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22

33
## Description
44

5-
This guide shows how to zoom in and out of the canvas using the mouse wheel, double click, and buttons.
5+
This guide shows how to `zoom in` and `out` of the [canvas](./docs/f-canvas-component) using the `mouse wheel`, `double click`, and `buttons`.
6+
To enable zooming, you need to add the [fZoom directive](./docs/f-zoom-directive) to the [f-canvas](./docs/f-canvas-component).
67

78
## Example
89

9-
::: ng-component <zoom-example></zoom-example> [height]="600"
10-
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom-example/zoom-example.component.html
11-
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom-example/zoom-example.component.ts
12-
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom-example/zoom-example.component.scss
10+
::: ng-component <zoom></zoom> [height]="600"
11+
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom/zoom.component.html
12+
[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom/zoom.component.ts
13+
[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom/zoom.component.scss
1314
[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
1415
:::
1516

0 commit comments

Comments
 (0)