feat: Added minimap functionality

#26

package.json

@@ -58,7 +58,7 @@
     "@angular/platform-browser": "^18.1.0",
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
-    "@foblex/core": "^1.1.2",
+    "@foblex/core": "^1.1.4",
     "@foblex/f-docs": "^1.2.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

projects/f-flow/package.json

@@ -31,7 +31,7 @@
   "peerDependencies": {
     "@angular/common": ">=12.0.0",
     "@angular/core": ">=12.0.0",
-    "@foblex/core": ">=1.1.2",
+    "@foblex/core": ">=1.1.4",
     "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,20 @@
+import { SubscribeOnTransformChangesRequest } from './subscribe-on-transform-changes.request';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { FTransformStore } from '../../f-storage';
+import { FExecutionRegister, IExecution } from '../../infrastructure';
+
+@Injectable()
+@FExecutionRegister(SubscribeOnTransformChangesRequest)
+export class SubscribeOnTransformChangesExecution
+  implements IExecution<SubscribeOnTransformChangesRequest, Observable<void>> {
+
+  constructor(
+    private fTransformStore: FTransformStore,
+  ) {
+  }
+
+  public handle(request: SubscribeOnTransformChangesRequest): Observable<void> {
+    return this.fTransformStore.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-draggable/e-f-draggable-type.ts

@@ -4,14 +4,14 @@ export enum EFDraggableType {
 
   NODE_RESIZE = 'node-resize',
 
-  NODE_ROTATE = 'node-rotate',
-
   REASSIGN_CONNECTION = 'reassign-connection',
 
   CREATE_CONNECTION = 'create-connection',
 
   CONNECTION = 'connection',
 
+  MINI_MAP = 'minimap',
+
   CANVAS = 'canvas',
 
   PALETTE_ITEM = 'palette-item',

projects/f-flow/src/f-draggable/f-draggable-base.ts

@@ -60,7 +60,6 @@ export abstract class FDraggableBase implements IHasHostElement {
   protected constructor(
     protected ngZone: ICanRunOutsideAngular | undefined
   ) {
-    console.log('FDraggableBase', this.ngZone);
   }
 
   private onMouseDown = (event: MouseEvent) => {

projects/f-flow/src/f-draggable/f-draggable.directive.ts

@@ -1,12 +1,12 @@
 import {
-  AfterViewInit,
+  AfterViewInit, ContentChild, ContentChildren,
   Directive,
   ElementRef,
   EventEmitter, Inject,
   Input,
   NgZone,
   OnDestroy,
-  OnInit, Optional, Output
+  OnInit, Optional, Output, QueryList
 } from "@angular/core";
 import { F_DRAGGABLE, FDraggableBase } from './f-draggable-base';
 import { FComponentsStore } from '../f-storage';
@@ -27,12 +27,13 @@ import {
 } from './connections';
 import { FSelectionChangeEvent } from './f-selection-change-event';
 import { FFlowMediator } from '../infrastructure';
-import { GetSelectionRequest } from '../domain';
+import { EmitTransformChangesRequest, GetSelectionRequest } from '../domain';
 import { isExternalItem } from '../f-external-item';
 import { SingleSelectRequest } from './single-select';
 import { NodeResizeFinalizeRequest, NodeResizePreparationRequest } from './node-resize';
 import { SelectionAreaFinalizeRequest, SelectionAreaPreparationRequest } from './selection-area';
 import { ICanRunOutsideAngular } from './i-can-run-outside-angular';
+import { F_DRAG_AND_DROP_PLUGIN, IFDragAndDropPlugin } from './i-f-drag-and-drop-plugin';
 
 @Directive({
   selector: "f-flow[fDraggable]",
@@ -67,6 +68,9 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
   @Output()
   public override fCreateConnection: EventEmitter<FCreateConnectionEvent> = new EventEmitter<FCreateConnectionEvent>();
 
+  @ContentChildren(F_DRAG_AND_DROP_PLUGIN, { descendants: true })
+  private plugins!: QueryList<IFDragAndDropPlugin>;
+
   constructor(
     private elementReference: ElementRef<HTMLElement>,
     private fDraggableDataContext: FDraggableDataContext,
@@ -90,6 +94,10 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
     this.fDraggableDataContext.reset();
     let result: boolean = event.isMouseLeftButton();
 
+    this.plugins.forEach((p) => {
+      p.onPointerDown?.(event);
+    });
+
     this.fMediator.send<void>(new SingleSelectRequest(event));
 
     this.fMediator.send<void>(new ReassignConnectionPreparationRequest(event));
@@ -99,11 +107,15 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
     if (!result) {
       this.finalizeDragSequence();
     }
-
     return result;
   }
 
   protected override prepareDragSequence(event: IPointerEvent) {
+
+    this.plugins.forEach((p) => {
+      p.prepareDragSequence?.(event);
+    });
+
     this.fMediator.send<void>(new SelectionAreaPreparationRequest(event));
 
     this.fMediator.send<void>(new NodeResizePreparationRequest(event));
@@ -125,6 +137,11 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
   }
 
   protected override onSelect(event: Event): void {
+
+    this.plugins.forEach((p) => {
+      p.onSelect?.(event);
+    });
+
     if (this.isTargetItemExternal(event)) {
       event.preventDefault();
     }
@@ -154,6 +171,11 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
   }
 
   public override onPointerUp(event: IPointerEvent): void {
+
+    this.plugins.forEach((p) => {
+      p.onPointerUp?.(event);
+    });
+
     this.fMediator.send<void>(new ReassignConnectionFinalizeRequest(event));
 
     this.fMediator.send<void>(new CreateConnectionFinalizeRequest(event));
@@ -185,6 +207,7 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
     }
     this.fSelectionChange.emit(this.fMediator.send<FSelectionChangeEvent>(new GetSelectionRequest()));
     this.fDraggableDataContext.isSelectedChanged = false;
+    this.fMediator.send<void>(new EmitTransformChangesRequest());
   }
 
   public ngOnDestroy(): void {

projects/f-flow/src/f-draggable/i-f-drag-and-drop-plugin.ts

@@ -0,0 +1,15 @@
+import { IPointerEvent } from '@foblex/core';
+import { InjectionToken } from '@angular/core';
+
+export const F_DRAG_AND_DROP_PLUGIN: InjectionToken<IFDragAndDropPlugin> = new InjectionToken<IFDragAndDropPlugin>('F_DRAG_AND_DROP_PLUGIN');
+
+export interface IFDragAndDropPlugin {
+
+  onSelect?(event: Event): void;
+
+  onPointerDown?(event: IPointerEvent): void;
+
+  prepareDragSequence?(event: IPointerEvent): void;
+
+  onPointerUp?(event: IPointerEvent): void;
+}

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

@@ -24,6 +24,8 @@ export * from './f-selection-change-event';
 
 export * from './i-can-run-outside-angular';
 
+export * from './i-f-drag-and-drop-plugin';
+
 export * from './i-draggable-item';
 
 export * from './providers';

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

@@ -5,6 +5,7 @@ import { EXTERNAL_ITEM_PROVIDERS } from './external-item';
 import { NODE_PROVIDERS } from './node';
 import { NODE_RESIZE_PROVIDERS } from './node-resize';
 import { SELECTION_AREA_PROVIDERS } from './selection-area';
+import { F_MINIMAP_DRAG_AND_DROP_PROVIDERS } from '../f-minimap';
 
 export const F_DRAGGABLE_PROVIDERS = [
 
@@ -20,5 +21,7 @@ export const F_DRAGGABLE_PROVIDERS = [
 
   ...NODE_RESIZE_PROVIDERS,
 
-  ...SELECTION_AREA_PROVIDERS
+  ...SELECTION_AREA_PROVIDERS,
+
+  ...F_MINIMAP_DRAG_AND_DROP_PROVIDERS
 ];

projects/f-flow/src/f-draggable/selection-area/selection-area.drag-handle.ts

@@ -3,7 +3,7 @@ import { IDraggableItem } from '../i-draggable-item';
 import { EFDraggableType } from '../e-f-draggable-type';
 import { FComponentsStore } from '../../f-storage';
 import { FDraggableDataContext } from '../f-draggable-data-context';
-import { ISelectableWithRect } from '../../domain';
+import { EmitTransformChangesRequest, ISelectableWithRect } from '../../domain';
 import { ISelectable } from '../../f-connection';
 import { FFlowMediator } from '../../infrastructure';
 import { GetCanBeSelectedItemsRequest } from '../../domain/get-can-be-selected-items/get-can-be-selected-items-request';
@@ -61,6 +61,7 @@ export class SelectionAreaDragHandle implements IDraggableItem {
         this.selectedByMove.push(item.element);
       }
     });
+    this.fMediator.send<void>(new EmitTransformChangesRequest());
   }
 
   public complete(): void {

projects/f-flow/src/f-draggable/single-select/single-select.validator.ts

@@ -2,17 +2,20 @@ import { Injectable } from '@angular/core';
 import { FValidatorRegister, IValidator } from '../../infrastructure';
 import { SingleSelectRequest } from './single-select.request';
 import { FComponentsStore } from '../../f-storage';
+import { FDraggableDataContext } from '../f-draggable-data-context';
 
 @Injectable()
 @FValidatorRegister(SingleSelectRequest)
 export class SingleSelectValidator implements IValidator<SingleSelectRequest> {
 
   constructor(
-    private fComponentsStore: FComponentsStore
+    private fComponentsStore: FComponentsStore,
+    private fDraggableDataContext: FDraggableDataContext
   ) {
   }
 
   public handle(request: SingleSelectRequest): boolean {
-    return this.fComponentsStore.fFlow!.hostElement.contains(request.event.targetElement);
+    return this.fComponentsStore.fFlow!.hostElement.contains(request.event.targetElement)
+      && !this.fDraggableDataContext.draggableItems.length;
   }
 }