Skip to content

Commit 1149be1

Browse files
siarheihuzarevichsiarheihuzarevich
authored
Merge pull request #31 from Foblex/minimap
Added Minimap
2 parents 22b4947 + 9fe36ee commit 1149be1

File tree

77 files changed

+1135
-64
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+1135
-64
lines changed

‎CHANGELOG.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
11
# Changelog
22

3+
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4+
5+
## [12.5.0](https://github.com/foblex/flow/compare/v12.3.9...v12.5.0) (2024-08-11)
6+
7+
### Features
8+
9+
* Add various site icons and upgrade library to Zoneless ([e561e69](https://github.com/foblex/flow/commit/e561e6972a723ea299005518057963ba260961af))
10+
* Added minimap functionality ([f5eece6](https://github.com/foblex/flow/commit/f5eece6df6e556a0ec0bbfa26ec623ce368f60ef))
11+
* Added Zoneless support ([a8c5812](https://github.com/foblex/flow/commit/a8c581285d8c9e6f246cbd2f2a07c346ce1ba131))
12+
* Update to f-docs v1.2.1 ([8067764](https://github.com/foblex/flow/commit/80677640c5d917b564964987b575d9fb28e28ce5))
13+
14+
15+
### Documentation
16+
17+
* Added minimap documentation ([ccbdb99](https://github.com/foblex/flow/commit/ccbdb990935d0d9ae04d92de47752b50a6b11190))
18+
* Added minimap examples ([5646066](https://github.com/foblex/flow/commit/56460662d015f4ba0e6269d8f6bbc0de6e7b058f))
19+
* Remove old changelogs and switch to standard-version ([ff5b9e5](https://github.com/foblex/flow/commit/ff5b9e53c342ee7403813ce807e38d55a350725b))
20+
321
## [12.4.0] - 2024-08-05
422

523
### Bug Fixes

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "12.4.0",
2+
"version": "12.5.0",
33
"description": "An Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.",
44
"author": "Siarhei Huzarevich",
55
"homepage": "https://flow.foblex.com",
@@ -58,8 +58,8 @@
5858
"@angular/platform-browser": "^18.1.0",
5959
"@angular/platform-browser-dynamic": "^18.1.0",
6060
"@angular/router": "^18.1.0",
61-
"@foblex/core": "^1.1.2",
62-
"@foblex/f-docs": "^1.2.0",
61+
"@foblex/core": "^1.1.6",
62+
"@foblex/f-docs": "^1.2.1",
6363
"rxjs": "~7.8.0",
6464
"tslib": "^2.3.0",
6565
"zone.js": "~0.14.3"

‎projects/f-examples/minimap-basic-example/minimap-basic-example.component.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<f-flow fDraggable>
2+
<f-canvas>
3+
<f-connection fOutputId="output1" fInputId="input1"></f-connection>
4+
<div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">Node 1</div>
5+
<div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fInputConnectableSide="left">Node 2</div>
6+
</f-canvas>
7+
<f-minimap></f-minimap>
8+
</f-flow>

‎projects/f-examples/minimap-basic-example/minimap-basic-example.component.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
:host ::ng-deep {
2+
3+
.f-connection {
4+
.f-connection-drag-handle {
5+
fill: transparent;
6+
}
7+
8+
.f-connection-selection {
9+
fill: none;
10+
}
11+
12+
.f-connection-path {
13+
fill: none;
14+
stroke: #585858;
15+
stroke-width: 2;
16+
}
17+
}
18+
19+
.f-minimap {
20+
background-color: var(--background-color);
21+
bottom: 16px;
22+
right: 16px;
23+
width: 120px;
24+
height: 120px;
25+
26+
.f-minimap-node {
27+
fill: var(--primary-text);
28+
29+
&.f-selected {
30+
fill: var(--primary-1);
31+
}
32+
}
33+
34+
.f-minimap-view {
35+
fill: var(--primary-soft)
36+
}
37+
}
38+
}
39+
40+
.f-node {
41+
width: 100px;
42+
padding: 12px;
43+
color: #585858;
44+
display: inline-flex;
45+
justify-content: center;
46+
align-items: center;
47+
text-align: center;
48+
background: #FCFDFE;
49+
border-radius: 4px;
50+
box-shadow: 0 0 1px 1px #E4E3E6;
51+
}
52+

‎projects/f-examples/minimap-basic-example/minimap-basic-example.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { FFlowModule } from '@foblex/flow';
3+
4+
@Component({
5+
selector: 'minimap-basic-example',
6+
styleUrls: [ './minimap-basic-example.component.scss' ],
7+
templateUrl: './minimap-basic-example.component.html',
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
standalone: true,
10+
imports: [
11+
FFlowModule
12+
]
13+
})
14+
export class MinimapBasicExampleComponent {
15+
16+
}

‎projects/f-examples/minimap-scaled-example/minimap-scaled-example.component.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<f-flow fDraggable>
2+
<f-canvas>
3+
<f-connection fOutputId="output1" fInputId="input1"></f-connection>
4+
<div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">Node 1</div>
5+
<div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fInputConnectableSide="left">Node 2</div>
6+
</f-canvas>
7+
<f-minimap [fMinSize]="3000"></f-minimap>
8+
</f-flow>

‎projects/f-examples/minimap-scaled-example/minimap-scaled-example.component.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
:host ::ng-deep {
2+
3+
.f-connection {
4+
.f-connection-drag-handle {
5+
fill: transparent;
6+
}
7+
8+
.f-connection-selection {
9+
fill: none;
10+
}
11+
12+
.f-connection-path {
13+
fill: none;
14+
stroke: #585858;
15+
stroke-width: 2;
16+
}
17+
}
18+
19+
.f-minimap {
20+
background-color: var(--background-color);
21+
bottom: 16px;
22+
right: 16px;
23+
width: 120px;
24+
height: 120px;
25+
26+
.f-minimap-node {
27+
fill: var(--primary-text);
28+
29+
&.f-selected {
30+
fill: var(--primary-1);
31+
}
32+
}
33+
34+
.f-minimap-view {
35+
fill: var(--primary-soft)
36+
}
37+
}
38+
}
39+
40+
.f-node {
41+
width: 100px;
42+
padding: 12px;
43+
color: #585858;
44+
display: inline-flex;
45+
justify-content: center;
46+
align-items: center;
47+
text-align: center;
48+
background: #FCFDFE;
49+
border-radius: 4px;
50+
box-shadow: 0 0 1px 1px #E4E3E6;
51+
}
52+

‎projects/f-examples/minimap-scaled-example/minimap-scaled-example.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { FFlowModule } from '@foblex/flow';
3+
4+
@Component({
5+
selector: 'minimap-scaled-example',
6+
styleUrls: [ './minimap-scaled-example.component.scss' ],
7+
templateUrl: './minimap-scaled-example.component.html',
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
standalone: true,
10+
imports: [
11+
FFlowModule
12+
]
13+
})
14+
export class MinimapScaledExampleComponent {
15+
16+
}

‎projects/f-flow/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@foblex/flow",
3-
"version": "12.4.0",
3+
"version": "12.5.0",
44
"description": "An Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.",
55
"main": "index.js",
66
"types": "index.d.ts",
@@ -31,7 +31,7 @@
3131
"peerDependencies": {
3232
"@angular/common": ">=12.0.0",
3333
"@angular/core": ">=12.0.0",
34-
"@foblex/core": ">=1.1.2",
34+
"@foblex/core": ">=1.1.6",
3535
"rxjs": ">=6.6.0"
3636
},
3737
"dependencies": {

‎projects/f-flow/src/domain/emit-transform-changes/emit-transform-changes.execution.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { EmitTransformChangesRequest } from './emit-transform-changes.request';
2+
import { Injectable } from '@angular/core';
3+
import { FExecutionRegister, IExecution } from '../../infrastructure';
4+
import { FTransformStore } from '../../f-storage';
5+
6+
@Injectable()
7+
@FExecutionRegister(EmitTransformChangesRequest)
8+
export class EmitTransformChangesExecution
9+
implements IExecution<EmitTransformChangesRequest, void> {
10+
11+
constructor(
12+
private fTransformStore: FTransformStore,
13+
) {
14+
}
15+
16+
public handle(request: EmitTransformChangesRequest): void {
17+
this.fTransformStore.changes.next();
18+
}
19+
}

0 commit comments

Comments
 (0)