Merge pull request #97 from Foblex/refactoring/isolate-component-store

Refactoring/isolate component store

cypress/e2e/remove-connection-on-drop.component.cy.ts

@@ -10,8 +10,7 @@ describe('RemoveConnectionOnDropComponent', () => {
     cy.get('.f-connection-drag-handle').first()
       .trigger('mousedown', { button: 0, force: true })
       .trigger('mousemove', { clientX: 0, clientY: 0 })
-      .trigger('mousemove', { clientX: 20, clientY: 10 })
-      .trigger('mousemove', { clientX: 120, clientY: 110 })
+      .trigger('mousemove', { clientX: 420, clientY: 110 })
       .trigger('mouseup');
 
     cy.get('#connection_f-connection-012').should('not.exist');

projects/f-examples/nodes/resize-handle/resize-handle.component.html

@@ -3,6 +3,7 @@
     <div fNode fDragHandle
          [fNodePosition]="{ x: 0, y: 0 }"
          [fNodeSize]="{ width: 120, height: 150 }"
+         [fIncludePadding]="false"
          (fNodeSizeChange)="onNodeSizeChanged($event)">
       <div fResizeHandle [fResizeHandleType]="eResizeHandleType.LEFT_TOP"></div>
       <div class="node-content">

projects/f-examples/nodes/resize-handle/resize-handle.component.scss

@@ -7,12 +7,13 @@
 .f-node {
   position: relative;
   @include flow-common.node;
+  padding: 0;
 }
 
 .node-content {
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .f-resize-handle {

projects/f-flow/package.json

@@ -29,8 +29,8 @@
     "foblex"
   ],
   "peerDependencies": {
-    "@angular/common": ">=12.0.0",
-    "@angular/core": ">=12.0.0",
+    "@angular/common": ">=15.0.0",
+    "@angular/core": ">=15.0.0",
     "@foblex/platform": "1.0.4",
     "@foblex/mediator": "1.1.0",
     "@foblex/2d": "1.1.0",

projects/f-flow/src/domain/f-background/add-background-to-store/add-background-to-store-request.ts

@@ -0,0 +1,9 @@
+import { FBackgroundBase } from '../../../f-backgroud';
+
+export class AddBackgroundToStoreRequest {
+
+    constructor(
+        public fBackground: FBackgroundBase
+    ) {
+    }
+}

projects/f-flow/src/domain/f-background/add-background-to-store/add-background-to-store.execution.ts

@@ -0,0 +1,15 @@
+import { inject, Injectable } from '@angular/core';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { AddBackgroundToStoreRequest } from './add-background-to-store-request';
+import { FComponentsStore } from '../../../f-storage';
+
+@Injectable()
+@FExecutionRegister(AddBackgroundToStoreRequest)
+export class AddBackgroundToStoreExecution implements IExecution<AddBackgroundToStoreRequest, void> {
+
+  private _fComponentsStore = inject(FComponentsStore);
+
+  public handle(request: AddBackgroundToStoreRequest): void {
+    this._fComponentsStore.fBackground = request.fBackground;
+  }
+}

projects/f-flow/src/domain/f-background/add-background-to-store/index.ts

@@ -0,0 +1,3 @@
+export * from './add-background-to-store.execution';
+
+export * from './add-background-to-store-request';

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

@@ -1,3 +1,9 @@
+export * from './add-background-to-store';
+
 export * from './add-pattern-to-background';
 
+export * from './remove-background-from-store';
+
+export * from './set-background-transform';
+
 export * from './providers';

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

@@ -1,6 +1,15 @@
 import { AddPatternToBackgroundExecution } from './add-pattern-to-background';
+import { AddBackgroundToStoreExecution } from './add-background-to-store';
+import { RemoveBackgroundFromStoreExecution } from './remove-background-from-store';
+import { SetBackgroundTransformExecution } from './set-background-transform';
 
 export const F_BACKGROUND_FEATURES = [
 
-  AddPatternToBackgroundExecution
+  AddBackgroundToStoreExecution,
+
+  AddPatternToBackgroundExecution,
+
+  RemoveBackgroundFromStoreExecution,
+
+  SetBackgroundTransformExecution
 ];

projects/f-flow/src/domain/f-background/remove-background-from-store/index.ts

@@ -0,0 +1,3 @@
+export * from './remove-background-from-store.execution';
+
+export * from './remove-background-from-store-request';

projects/f-flow/src/domain/f-background/remove-background-from-store/remove-background-from-store-request.ts

@@ -0,0 +1,9 @@
+import { FBackgroundBase } from '../../../f-backgroud';
+
+export class RemoveBackgroundFromStoreRequest {
+
+  constructor(
+    public fConnection: FBackgroundBase
+  ) {
+  }
+}

projects/f-flow/src/domain/f-background/remove-background-from-store/remove-background-from-store.execution.ts

@@ -0,0 +1,15 @@
+import { inject, Injectable } from '@angular/core';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { RemoveBackgroundFromStoreRequest } from './remove-background-from-store-request';
+import { FComponentsStore } from '../../../f-storage';
+
+@Injectable()
+@FExecutionRegister(RemoveBackgroundFromStoreRequest)
+export class RemoveBackgroundFromStoreExecution implements IExecution<RemoveBackgroundFromStoreRequest, void> {
+
+  private _fComponentsStore = inject(FComponentsStore);
+
+  public handle(request: RemoveBackgroundFromStoreRequest): void {
+    this._fComponentsStore.fBackground = undefined;
+  }
+}

projects/f-flow/src/domain/f-background/set-background-transform/index.ts

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

projects/f-flow/src/domain/f-background/set-background-transform/set-background-transform-request.ts

@@ -0,0 +1,9 @@
+import { ITransformModel } from '@foblex/2d';
+
+export class SetBackgroundTransformRequest {
+
+    constructor(
+        public fTransform: ITransformModel
+    ) {
+    }
+}

projects/f-flow/src/domain/f-background/set-background-transform/set-background-transform.execution.ts

@@ -0,0 +1,15 @@
+import { inject, Injectable } from '@angular/core';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { SetBackgroundTransformRequest } from './set-background-transform-request';
+import { FComponentsStore } from '../../../f-storage';
+
+@Injectable()
+@FExecutionRegister(SetBackgroundTransformRequest)
+export class SetBackgroundTransformExecution implements IExecution<SetBackgroundTransformRequest, void> {
+
+  private _fComponentsStore = inject(FComponentsStore);
+
+  public handle(request: SetBackgroundTransformRequest): void {
+    this._fComponentsStore.fBackground?.setTransform(request.fTransform);
+  }
+}

projects/f-flow/src/domain/f-canvas/add-canvas-to-store/add-canvas-to-store-request.ts

@@ -0,0 +1,9 @@
+import { FCanvasBase } from '../../../f-canvas';
+
+export class AddCanvasToStoreRequest {
+
+  constructor(
+    public fCanvas: FCanvasBase
+  ) {
+  }
+}

projects/f-flow/src/domain/f-canvas/add-canvas-to-store/add-canvas-to-store.execution.ts

@@ -0,0 +1,15 @@
+import { inject, Injectable } from '@angular/core';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { AddCanvasToStoreRequest } from './add-canvas-to-store-request';
+import { FComponentsStore } from '../../../f-storage';
+
+@Injectable()
+@FExecutionRegister(AddCanvasToStoreRequest)
+export class AddCanvasToStoreExecution implements IExecution<AddCanvasToStoreRequest, void> {
+
+  private _fComponentsStore = inject(FComponentsStore);
+
+  public handle(request: AddCanvasToStoreRequest): void {
+    this._fComponentsStore.fCanvas = request.fCanvas;
+  }
+}

projects/f-flow/src/domain/f-canvas/add-canvas-to-store/index.ts

@@ -0,0 +1,3 @@
+export * from './add-canvas-to-store.execution';
+
+export * from './add-canvas-to-store-request';

projects/f-flow/src/domain/f-canvas/center-group-or-node/center-group-or-node.execution.ts

@@ -1,23 +1,22 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { CenterGroupOrNodeRequest } from './center-group-or-node-request';
-import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { IPoint, IRect, ITransformModel, PointExtensions, RectExtensions } from '@foblex/2d';
 import { FComponentsStore } from '../../../f-storage';
 import { FNodeBase } from '../../../f-node';
-import { F_CANVAS_ANIMATION_DURATION } from '../../../domain';
+import { RedrawCanvasWithAnimationRequest } from '../../../domain';
 
 @Injectable()
 @FExecutionRegister(CenterGroupOrNodeRequest)
 export class CenterGroupOrNodeExecution implements IExecution<CenterGroupOrNodeRequest, void> {
 
+  private _fComponentsStore = inject(FComponentsStore);
+
   private get transform(): ITransformModel {
-    return this.fComponentsStore.fCanvas!.transform;
+    return this._fComponentsStore.fCanvas!.transform;
   }
 
-  constructor(
-    private fComponentsStore: FComponentsStore,
-  ) {
-  }
+  private _fMediator = inject(FMediator);
 
   public handle(request: CenterGroupOrNodeRequest): void {
     const fNode = this.getNode(request.id);
@@ -27,9 +26,7 @@ export class CenterGroupOrNodeExecution implements IExecution<CenterGroupOrNodeR
 
     this.toCenter(this.getNodeRect(fNode), this.getFlowRect(), fNode.position);
 
-    request.animated ? this.fComponentsStore.fCanvas!.redrawWithAnimation() : this.fComponentsStore.fCanvas!.redraw();
-    this.fComponentsStore.fCanvas!.emitCanvasChangeEvent();
-    setTimeout(() => this.fComponentsStore.componentDataChanged(), F_CANVAS_ANIMATION_DURATION);
+    this._fMediator.send(new RedrawCanvasWithAnimationRequest(request.animated));
   }
 
   public toCenter(fNodeRect: IRect, fFlowRect: IRect, position: IPoint): void {
@@ -41,14 +38,14 @@ export class CenterGroupOrNodeExecution implements IExecution<CenterGroupOrNodeR
   }
 
   private getNode(id: string): FNodeBase | undefined {
-    return this.fComponentsStore.fNodes.find((x) => x.fId === id);
+    return this._fComponentsStore.fNodes.find((x) => x.fId === id);
   }
 
   private getNodeRect(fNode: FNodeBase): IRect {
     return RectExtensions.fromElement(fNode.hostElement);
   }
 
   private getFlowRect(): IRect {
-    return RectExtensions.fromElement(this.fComponentsStore.fFlow!.hostElement);
+    return RectExtensions.fromElement(this._fComponentsStore.fFlow!.hostElement);
   }
 }

projects/f-flow/src/domain/f-canvas/fit-to-flow/fit-to-flow.execution.ts

@@ -1,39 +1,36 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { FitToFlowRequest } from './fit-to-flow-request';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { IPoint, IRect, ITransformModel, PointExtensions, RectExtensions } from '@foblex/2d';
 import { FComponentsStore } from '../../../f-storage';
-import { F_CANVAS_ANIMATION_DURATION, GetNodesRectRequest } from '../../../domain';
+import { GetNodesRectRequest, RedrawCanvasWithAnimationRequest } from '../../../domain';
 
 @Injectable()
 @FExecutionRegister(FitToFlowRequest)
 export class FitToFlowExecution implements IExecution<FitToFlowRequest, void> {
 
+  private _fComponentsStore = inject(FComponentsStore);
+
   private get transform(): ITransformModel {
-    return this.fComponentsStore.fCanvas!.transform;
+    return this._fComponentsStore.fCanvas!.transform;
   }
 
-  constructor(
-    private fComponentsStore: FComponentsStore,
-    private fMediator: FMediator
-  ) {
-  }
+  private _fMediator = inject(FMediator);
 
   public handle(request: FitToFlowRequest): void {
-    const fNodesRect = this.fMediator.send<IRect | null>(new GetNodesRectRequest()) || RectExtensions.initialize();
+    const fNodesRect = this._fMediator.send<IRect | null>(new GetNodesRectRequest()) || RectExtensions.initialize();
     if (fNodesRect.width === 0 || fNodesRect.height === 0) {
       return;
     }
 
     this.fitToParent(
       fNodesRect,
-      RectExtensions.fromElement(this.fComponentsStore.fFlow!.hostElement),
-      this.fComponentsStore.fNodes.map((x) => x.position),
+      RectExtensions.fromElement(this._fComponentsStore.fFlow!.hostElement),
+      this._fComponentsStore.fNodes.map((x) => x.position),
       request.toCenter
     );
-    request.animated ? this.fComponentsStore.fCanvas!.redrawWithAnimation() : this.fComponentsStore.fCanvas!.redraw();
-    this.fComponentsStore.fCanvas!.emitCanvasChangeEvent();
-    setTimeout(() => this.fComponentsStore.componentDataChanged(), F_CANVAS_ANIMATION_DURATION);
+
+    this._fMediator.send(new RedrawCanvasWithAnimationRequest(request.animated));
   }
 
   public fitToParent(rect: IRect, parentRect: IRect, points: IPoint[], toCenter: IPoint): void {

projects/f-flow/src/domain/f-canvas/get-canvas/get-canvas-request.ts

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

projects/f-flow/src/domain/f-canvas/get-canvas/get-canvas.execution.ts

@@ -0,0 +1,20 @@
+import { inject, Injectable } from '@angular/core';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { GetCanvasRequest } from './get-canvas-request';
+import { FComponentsStore } from '../../../f-storage';
+import { FCanvasBase } from '../../../f-canvas';
+
+@Injectable()
+@FExecutionRegister(GetCanvasRequest)
+export class GetCanvasExecution implements IExecution<GetCanvasRequest, FCanvasBase> {
+
+  private _fComponentsStore = inject(FComponentsStore);
+
+  public handle(request: GetCanvasRequest): FCanvasBase {
+    const result = this._fComponentsStore.fCanvas;
+    if (!result) {
+      throw new Error(`Canvas not found in store`);
+    }
+    return result;
+  }
+}

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

@@ -0,0 +1,3 @@
+export * from './get-canvas.execution';
+
+export * from './get-canvas-request';

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

@@ -1,11 +1,19 @@
+export * from './add-canvas-to-store';
+
 export * from './center-group-or-node';
 
 export * from './fit-to-flow';
 
+export * from './get-canvas';
+
 export * from './input-canvas-position';
 
 export * from './input-canvas-scale';
 
+export * from './redraw-canvas-with-animation';
+
+export * from './remove-canvas-from-store';
+
 export * from './reset-scale';
 
 export * from './reset-scale-and-center';