Merge pull request #31 from Foblex/minimap

Added Minimap

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+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.
+
+## [12.5.0](https://github.com/foblex/flow/compare/v12.3.9...v12.5.0) (2024-08-11)
+
+### Features
+
+* Add various site icons and upgrade library to Zoneless ([e561e69](https://github.com/foblex/flow/commit/e561e6972a723ea299005518057963ba260961af))
+* Added minimap functionality ([f5eece6](https://github.com/foblex/flow/commit/f5eece6df6e556a0ec0bbfa26ec623ce368f60ef))
+* Added Zoneless support ([a8c5812](https://github.com/foblex/flow/commit/a8c581285d8c9e6f246cbd2f2a07c346ce1ba131))
+* Update to f-docs v1.2.1 ([8067764](https://github.com/foblex/flow/commit/80677640c5d917b564964987b575d9fb28e28ce5))
+
+
+### Documentation
+
+* Added minimap documentation ([ccbdb99](https://github.com/foblex/flow/commit/ccbdb990935d0d9ae04d92de47752b50a6b11190))
+* Added minimap examples ([5646066](https://github.com/foblex/flow/commit/56460662d015f4ba0e6269d8f6bbc0de6e7b058f))
+* Remove old changelogs and switch to standard-version ([ff5b9e5](https://github.com/foblex/flow/commit/ff5b9e53c342ee7403813ce807e38d55a350725b))
+
 ## [12.4.0] - 2024-08-05
 
 ### Bug Fixes

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "12.4.0",
+  "version": "12.5.0",
   "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.",
   "author": "Siarhei Huzarevich",
   "homepage": "https://flow.foblex.com",
@@ -58,8 +58,8 @@
     "@angular/platform-browser": "^18.1.0",
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
-    "@foblex/core": "^1.1.2",
-    "@foblex/f-docs": "^1.2.0",
+    "@foblex/core": "^1.1.6",
+    "@foblex/f-docs": "^1.2.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

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

@@ -0,0 +1,8 @@
+<f-flow fDraggable>
+  <f-canvas>
+    <f-connection fOutputId="output1" fInputId="input1"></f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">Node 1</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fInputConnectableSide="left">Node 2</div>
+  </f-canvas>
+  <f-minimap></f-minimap>
+</f-flow>

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

@@ -0,0 +1,52 @@
+:host ::ng-deep {
+
+  .f-connection {
+    .f-connection-drag-handle {
+      fill: transparent;
+    }
+
+    .f-connection-selection {
+      fill: none;
+    }
+
+    .f-connection-path {
+      fill: none;
+      stroke: #585858;
+      stroke-width: 2;
+    }
+  }
+
+  .f-minimap {
+    background-color: var(--background-color);
+    bottom: 16px;
+    right: 16px;
+    width: 120px;
+    height: 120px;
+
+    .f-minimap-node {
+      fill: var(--primary-text);
+
+      &.f-selected {
+        fill: var(--primary-1);
+      }
+    }
+
+    .f-minimap-view {
+      fill: var(--primary-soft)
+    }
+  }
+}
+
+.f-node {
+  width: 100px;
+  padding: 12px;
+  color: #585858;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #FCFDFE;
+  border-radius: 4px;
+  box-shadow: 0 0 1px 1px #E4E3E6;
+}
+

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

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'minimap-basic-example',
+  styleUrls: [ './minimap-basic-example.component.scss' ],
+  templateUrl: './minimap-basic-example.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class MinimapBasicExampleComponent {
+
+}

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

@@ -0,0 +1,8 @@
+<f-flow fDraggable>
+  <f-canvas>
+    <f-connection fOutputId="output1" fInputId="input1"></f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">Node 1</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputId="input1" fInputConnectableSide="left">Node 2</div>
+  </f-canvas>
+  <f-minimap [fMinSize]="3000"></f-minimap>
+</f-flow>

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

@@ -0,0 +1,52 @@
+:host ::ng-deep {
+
+  .f-connection {
+    .f-connection-drag-handle {
+      fill: transparent;
+    }
+
+    .f-connection-selection {
+      fill: none;
+    }
+
+    .f-connection-path {
+      fill: none;
+      stroke: #585858;
+      stroke-width: 2;
+    }
+  }
+
+  .f-minimap {
+    background-color: var(--background-color);
+    bottom: 16px;
+    right: 16px;
+    width: 120px;
+    height: 120px;
+
+    .f-minimap-node {
+      fill: var(--primary-text);
+
+      &.f-selected {
+        fill: var(--primary-1);
+      }
+    }
+
+    .f-minimap-view {
+      fill: var(--primary-soft)
+    }
+  }
+}
+
+.f-node {
+  width: 100px;
+  padding: 12px;
+  color: #585858;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #FCFDFE;
+  border-radius: 4px;
+  box-shadow: 0 0 1px 1px #E4E3E6;
+}
+

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

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'minimap-scaled-example',
+  styleUrls: [ './minimap-scaled-example.component.scss' ],
+  templateUrl: './minimap-scaled-example.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class MinimapScaledExampleComponent {
+
+}

projects/f-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foblex/flow",
-  "version": "12.4.0",
+  "version": "12.5.0",
   "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.",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,7 +31,7 @@
   "peerDependencies": {
     "@angular/common": ">=12.0.0",
     "@angular/core": ">=12.0.0",
-    "@foblex/core": ">=1.1.2",
+    "@foblex/core": ">=1.1.6",
     "rxjs": ">=6.6.0"
   },
   "dependencies": {

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

@@ -0,0 +1,19 @@
+import { EmitTransformChangesRequest } from './emit-transform-changes.request';
+import { Injectable } from '@angular/core';
+import { FExecutionRegister, IExecution } from '../../infrastructure';
+import { FTransformStore } from '../../f-storage';
+
+@Injectable()
+@FExecutionRegister(EmitTransformChangesRequest)
+export class EmitTransformChangesExecution
+  implements IExecution<EmitTransformChangesRequest, void> {
+
+  constructor(
+    private fTransformStore: FTransformStore,
+  ) {
+  }
+
+  public handle(request: EmitTransformChangesRequest): void {
+    this.fTransformStore.changes.next();
+  }
+}

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

@@ -0,0 +1,3 @@
+export class EmitTransformChangesRequest {
+
+}

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

@@ -0,0 +1,3 @@
+export * from './emit-transform-changes.execution';
+
+export * from './emit-transform-changes.request';

projects/f-flow/src/domain/index.ts

@@ -2,6 +2,8 @@ export * from './clear-selection';
 
 export * from './create-connection-markers';
 
+export * from './emit-transform-changes';
+
 export * from './get-can-be-selected-items';
 
 export * from './get-connection-line';
@@ -30,6 +32,8 @@ export * from './select-all';
 
 export * from './select-and-update-node-layer';
 
+export * from './subscribe-on-transform-changes';
+
 export * from './intersections';
 
 export * from './update-item-layer';

projects/f-flow/src/domain/providers.ts

@@ -18,13 +18,17 @@ import { GetCanBeSelectedItemsExecution } from './get-can-be-selected-items';
 import { IsConnectionUnderNodeExecution } from './is-connection-under-node';
 import { SelectAndUpdateNodeLayerExecution } from './select-and-update-node-layer';
 import { GetExternalNodesRectExecution } from './get-external-nodes-rect';
+import { EmitTransformChangesExecution } from './emit-transform-changes';
+import { SubscribeOnTransformChangesExecution } from './subscribe-on-transform-changes';
 
 export const COMMON_PROVIDERS = [
 
   ClearSelectionExecution,
 
   CreateConnectionMarkersExecution,
 
+  EmitTransformChangesExecution,
+
   GetCanBeSelectedItemsExecution,
 
   GetConnectionLineExecution,
@@ -51,6 +55,8 @@ export const COMMON_PROVIDERS = [
 
   SelectAndUpdateNodeLayerExecution,
 
+  SubscribeOnTransformChangesExecution,
+
   UpdateItemLayerExecution,
 
 

projects/f-flow/src/domain/subscribe-on-transform-changes/index.ts

@@ -0,0 +1,3 @@
+export * from './subscribe-on-transform-changes.execution';
+
+export * from './subscribe-on-transform-changes.request';

projects/f-flow/src/domain/subscribe-on-transform-changes/subscribe-on-transform-changes.execution.ts

@@ -0,0 +1,24 @@
+import { SubscribeOnTransformChangesRequest } from './subscribe-on-transform-changes.request';
+import { Injectable } from '@angular/core';
+import { merge, Observable } from 'rxjs';
+import { FComponentsStore, FTransformStore } from '../../f-storage';
+import { FExecutionRegister, IExecution } from '../../infrastructure';
+
+@Injectable()
+@FExecutionRegister(SubscribeOnTransformChangesRequest)
+export class SubscribeOnTransformChangesExecution
+  implements IExecution<SubscribeOnTransformChangesRequest, Observable<void>> {
+
+  constructor(
+    private fTransformStore: FTransformStore,
+    private fComponentsStore: FComponentsStore
+  ) {
+  }
+
+  public handle(request: SubscribeOnTransformChangesRequest): Observable<void> {
+    return merge(
+      this.fTransformStore.changes,
+      this.fComponentsStore.changes
+    );
+  }
+}

projects/f-flow/src/domain/subscribe-on-transform-changes/subscribe-on-transform-changes.request.ts

@@ -0,0 +1,3 @@
+export class SubscribeOnTransformChangesRequest {
+
+}

projects/f-flow/src/f-canvas/f-canvas.component.scss

@@ -7,4 +7,8 @@
   top: 0;
   transform-origin: 0 0;
   pointer-events: none;
+
+  &.f-scaled-animate { // to prevent jerking when moving the canvas through the minimap
+    transition: transform 0.09s;
+  }
 }

projects/f-flow/src/f-canvas/f-canvas.component.ts

@@ -10,7 +10,7 @@ import { FCanvasChangeEvent } from './domain';
 import { FComponentsStore } from '../f-storage';
 import { FNodeBase } from '../f-node';
 import { FFlowMediator } from '../infrastructure';
-import { GetNodesRectRequest } from '../domain';
+import { EmitTransformChangesRequest, GetNodesRectRequest } from '../domain';
 
 @Component({
   selector: 'f-canvas',
@@ -67,7 +67,7 @@ export class FCanvasComponent extends FCanvasBase implements OnInit {
   constructor(
     private elementReference: ElementRef<HTMLElement>,
     private fMediator: FFlowMediator,
-    private fComponentsStore: FComponentsStore
+    private fComponentsStore: FComponentsStore,
   ) {
     super();
   }
@@ -79,6 +79,7 @@ export class FCanvasComponent extends FCanvasBase implements OnInit {
   public override redraw(): void {
     this.fComponentsStore.fBackground?.setTransform(this.transform);
     this.hostElement.setAttribute("style", `transform: ${ TransformModelExtensions.toString(this.transform) }`);
+    this.fMediator.send(new EmitTransformChangesRequest());
   }
 
   public override redrawWithAnimation(): void {

projects/f-flow/src/f-canvas/index.ts

@@ -1,7 +1,5 @@
 export * from './domain';
 
-export * from './f-zoom';
-
 export * from './f-canvas.component';
 
 export * from './f-canvas-base';

projects/f-flow/src/f-canvas/providers.ts

@@ -1,9 +1,6 @@
 import { FCanvasComponent } from './f-canvas.component';
-import { FZoomDirective } from './f-zoom';
 
 export const F_CANVAS_PROVIDERS = [
 
   FCanvasComponent,
-
-  FZoomDirective
 ];

projects/f-flow/src/f-connection/common/f-drag-handle/f-connection-drag-handle.component.ts

@@ -35,7 +35,7 @@ export class FConnectionDragHandleComponent implements IHasHostElement {
 
   private calculateCircleCenter(start: IPoint, end: IPoint, radius: number): IPoint {
     const direction = { x: end.x - start.x, y: end.y - start.y };
-    const length = Math.sqrt(direction.x * direction.x + direction.y * direction.y);
+    const length = Math.sqrt(direction.x * direction.x + direction.y * direction.y) || 1;
     const unitDirection = { x: direction.x / length, y: direction.y / length };
     const scaledDirection = { x: unitDirection.x * radius, y: unitDirection.y * radius };
     return { x: end.x - scaledDirection.x, y: end.y - scaledDirection.y };