isolate components store

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';

projects/f-flow/src/domain/f-canvas/input-canvas-position/input-canvas-position.execution.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { InputCanvasPositionRequest } from './input-canvas-position-request';
 import { FExecutionRegister, IExecution } from '@foblex/mediator';
 import { PointExtensions } from '@foblex/2d';
@@ -8,11 +8,7 @@ import { FComponentsStore } from '../../../f-storage';
 @FExecutionRegister(InputCanvasPositionRequest)
 export class InputCanvasPositionExecution implements IExecution<InputCanvasPositionRequest, void> {
 
-
-  constructor(
-    private fComponentsStore: FComponentsStore
-  ) {
-  }
+  private _fComponentsStore = inject(FComponentsStore);
 
   public handle(request: InputCanvasPositionRequest): void {
     if (!request.position) {
@@ -22,7 +18,7 @@ export class InputCanvasPositionExecution implements IExecution<InputCanvasPosit
     if (!PointExtensions.isEqual(position, request.position)) {
       request.transform.position = request.position;
       request.transform.scaledPosition = PointExtensions.initialize();
-      this.fComponentsStore.fCanvas?.redraw();
+      this._fComponentsStore.fCanvas?.redraw();
     }
   }
 }

projects/f-flow/src/domain/f-canvas/input-canvas-scale/input-canvas-scale.execution.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { InputCanvasScaleRequest } from './input-canvas-scale-request';
 import { FExecutionRegister, IExecution } from '@foblex/mediator';
 import { FComponentsStore } from '../../../f-storage';
@@ -7,17 +7,13 @@ import { FComponentsStore } from '../../../f-storage';
 @FExecutionRegister(InputCanvasScaleRequest)
 export class InputCanvasScaleExecution implements IExecution<InputCanvasScaleRequest, void> {
 
-
-  constructor(
-    private fComponentsStore: FComponentsStore
-  ) {
-  }
+  private _fComponentsStore = inject(FComponentsStore);
 
   public handle(request: InputCanvasScaleRequest): void {
     if (!request.scale) {
       return;
     }
     request.transform.scale = request.scale;
-    this.fComponentsStore.fCanvas?.redraw();
+    this._fComponentsStore.fCanvas?.redraw();
   }
 }