add line features

projects/f-flow/src/domain/f-flow/get-flow-state/get-flow-state-connections/get-flow-state-connections.execution.ts

@@ -1,28 +1,28 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { GetFlowStateConnectionsRequest } from './get-flow-state-connections-request';
 import { FExecutionRegister, IExecution } from '@foblex/mediator';
 import { FComponentsStore } from '../../../../f-storage';
 import { IFFlowStateConnection } from '../i-f-flow-state-connection';
+import { FConnectionBase } from '../../../../f-connection';
 
 @Injectable()
 @FExecutionRegister(GetFlowStateConnectionsRequest)
 export class GetFlowStateConnectionsExecution implements IExecution<GetFlowStateConnectionsRequest, IFFlowStateConnection[]> {
 
-  constructor(
-    private fComponentsStore: FComponentsStore,
-  ) {
-  }
+  private _fComponentsStore = inject(FComponentsStore);
 
   public handle(request: GetFlowStateConnectionsRequest): IFFlowStateConnection[] {
-    return this.fComponentsStore.fConnections.map((x) => {
-      return {
-        id: x.fId,
-        fOutputId: x.fOutputId,
-        fInputId: x.fInputId,
-        fType: x.fType,
-        fBehavior: x.fBehavior,
-        isSelected: x.isSelected()
-      }
-    });
+    return this._fComponentsStore.fConnections.map(this._mapToConnectionState);
+  }
+
+  private _mapToConnectionState(x: FConnectionBase): IFFlowStateConnection {
+    return {
+      id: x.fId,
+      fOutputId: x.fOutputId,
+      fInputId: x.fInputId,
+      fType: x.fType,
+      fBehavior: x.fBehavior,
+      isSelected: x.isSelected()
+    }
   }
 }

projects/f-flow/src/domain/f-flow/get-flow-state/get-flow-state-nodes/get-flow-state-nodes.execution.ts

@@ -21,14 +21,14 @@ export class GetFlowStateNodesExecution implements IExecution<GetFlowStateNodesR
         parent: x.fParentId,
         position: x.position,
         size: x.size,
-        fOutputs: this.getOutputs(x.hostElement),
-        fInputs: this.getInputs(x.hostElement),
+        fOutputs: this._getOutputs(x.hostElement),
+        fInputs: this._getInputs(x.hostElement),
         isSelected: x.isSelected()
       };
     });
   }
 
-  private getOutputs(hostElement: HTMLElement): IFFlowStateConnector[] {
+  private _getOutputs(hostElement: HTMLElement): IFFlowStateConnector[] {
     return this.fComponentsStore.fOutputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
       return {
         id: x.fId,
@@ -37,7 +37,7 @@ export class GetFlowStateNodesExecution implements IExecution<GetFlowStateNodesR
     });
   }
 
-  private getInputs(hostElement: HTMLElement): IFFlowStateConnector[] {
+  private _getInputs(hostElement: HTMLElement): IFFlowStateConnector[] {
     return this.fComponentsStore.fInputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
       return {
         id: x.fId,

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

@@ -1,5 +1,5 @@
 import { GetFlowStateRequest } from './get-flow-state.request';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { IFFlowState } from './i-f-flow-state';
 import { FComponentsStore } from '../../../f-storage';
@@ -12,23 +12,20 @@ import { GetFlowStateConnectionsRequest } from './get-flow-state-connections';
 @FExecutionRegister(GetFlowStateRequest)
 export class GetFlowStateExecution implements IExecution<GetFlowStateRequest, IFFlowState> {
 
-  constructor(
-    private fComponentsStore: FComponentsStore,
-    private fMediator: FMediator
-  ) {
-  }
+  private _fMediator = inject(FMediator);
+  private _fComponentsStore = inject(FComponentsStore);
 
   public handle(payload: GetFlowStateRequest): IFFlowState {
     return {
-      position: this.getCanvasPosition(this.fComponentsStore.fCanvas!.transform),
-      scale: this.fComponentsStore.fCanvas!.transform.scale,
-      nodes: this.fMediator.send(new GetFlowStateNodesRequest(FNodeDirective)),
-      groups: this.fMediator.send(new GetFlowStateNodesRequest(FGroupDirective)),
-      connections: this.fMediator.send(new GetFlowStateConnectionsRequest())
+      position: this._getCanvasPosition(this._fComponentsStore.fCanvas!.transform),
+      scale: this._fComponentsStore.fCanvas!.transform.scale,
+      nodes: this._fMediator.send(new GetFlowStateNodesRequest(FNodeDirective)),
+      groups: this._fMediator.send(new GetFlowStateNodesRequest(FGroupDirective)),
+      connections: this._fMediator.send(new GetFlowStateConnectionsRequest())
     }
   }
 
-  private getCanvasPosition(transform: ITransformModel): IPoint {
+  private _getCanvasPosition(transform: ITransformModel): IPoint {
     return PointExtensions.sum(transform.position, transform.scaledPosition);
   }
 }

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

@@ -10,6 +10,6 @@ export class AddLineAlignmentToStoreExecution implements IExecution<AddLineAlign
   private _fComponentsStore = inject(FComponentsStore);
 
   public handle(request: AddLineAlignmentToStoreRequest): void {
-    //this._fComponentsStore.fFlow = request.fComponent;
+    this._fComponentsStore.fLineAlignment = request.fComponent;
   }
 }

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

@@ -1,5 +1,9 @@
 export * from './add-line-alignment-to-store';
 
+export * from './line-alignment-preparation';
+
 export * from './remove-line-alignment-from-store';
 
+export * from './line-alignment.drag-handler';
+
 export * from './providers';

projects/f-flow/src/domain/f-line-alignment/line-alignment-preparation/index.ts

@@ -0,0 +1,3 @@
+export * from './line-alignment-preparation.execution';
+
+export * from './line-alignment-preparation.request';

projects/f-flow/src/domain/f-line-alignment/line-alignment-preparation/line-alignment-preparation.execution.ts

@@ -0,0 +1,37 @@
+import { inject, Injectable } from '@angular/core';
+import { LineAlignmentPreparationRequest } from './line-alignment-preparation.request';
+import { IRect, ISize, RectExtensions } from '@foblex/2d';
+import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
+import { GetFlowHostElementRequest } from '../../f-flow';
+import { GetNormalizedElementRectRequest } from '../../get-normalized-element-rect';
+import { FComponentsStore } from '../../../f-storage';
+
+@Injectable()
+@FExecutionRegister(LineAlignmentPreparationRequest)
+export class LineAlignmentPreparationExecution implements IExecution<LineAlignmentPreparationRequest, void> {
+
+  private _fMediator = inject(FMediator);
+  private _fComponentsStore = inject(FComponentsStore);
+
+  public handle(request: LineAlignmentPreparationRequest): void {
+    // this.size = this._getFlowHostSize();
+    // this.rects = [];
+    // const draggedNodeRects = request.fNodes.map((x) => {
+    //   return this._fMediator.execute<IRect>(new GetNormalizedElementRectRequest(x.hostElement, false));
+    // });
+    // this.draggedNodeRect = RectExtensions.union(draggedNodeRects) || RectExtensions.initialize();
+    //
+    // const allNodesExcludeCurrents = this._fComponentsStore.fNodes.filter((x) => {
+    //   return !request.fNodes.includes(x);
+    // });
+    //
+    // this.rects = allNodesExcludeCurrents.map((x) => {
+    //   return this._fMediator.execute<IRect>(new GetNormalizedElementRectRequest(x.hostElement, false));
+    // });
+  }
+
+  private _getFlowHostSize(): ISize {
+    return this._fMediator.send<HTMLElement>(new GetFlowHostElementRequest())
+      .getBoundingClientRect();
+  }
+}

projects/f-flow/src/domain/f-line-alignment/line-alignment-preparation/line-alignment-preparation.request.ts

@@ -0,0 +1,9 @@
+import { FNodeBase } from '../../../f-node';
+
+export class LineAlignmentPreparationRequest {
+
+  constructor(
+    public fNodes: FNodeBase[]
+  ) {
+  }
+}

projects/f-flow/src/domain/f-line-alignment/line-alignment.drag-handler.ts

@@ -0,0 +1,26 @@
+import { IPoint, Point, PointExtensions } from '@foblex/2d';
+import { IDraggableItem } from '../../f-draggable';
+import { FComponentsStore } from '../../f-storage';
+
+export class LineAlignmentDragHandler implements IDraggableItem {
+
+  private readonly _onPointerDownPosition = PointExtensions.initialize();
+
+  constructor(
+    private _fComponentsStore: FComponentsStore,
+    public minDistance: IPoint,
+    public maxDistance: IPoint,
+  ) {
+    //this._onPointerDownPosition = { ...fNode.position };
+  }
+
+  public onPointerMove(difference: IPoint): void {
+  }
+
+  private _getPosition(difference: IPoint): IPoint {
+    return Point.fromPoint(this._onPointerDownPosition).add(difference);
+  }
+
+  public onPointerUp(): void {
+  }
+}

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

@@ -1,9 +1,12 @@
 import { AddLineAlignmentToStoreExecution } from './add-line-alignment-to-store';
 import { RemoveLineAlignmentFromStoreExecution } from './remove-line-alignment-from-store';
+import { LineAlignmentPreparationExecution } from './line-alignment-preparation';
 
 export const F_LINE_ALIGNMENT_FEATURES = [
 
   AddLineAlignmentToStoreExecution,
 
+  LineAlignmentPreparationExecution,
+
   RemoveLineAlignmentFromStoreExecution
 ];

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

@@ -10,6 +10,6 @@ export class RemoveLineAlignmentFromStoreExecution implements IExecution<RemoveL
   private _fComponentsStore = inject(FComponentsStore);
 
   public handle(request: RemoveLineAlignmentFromStoreRequest): void {
-    this._fComponentsStore.fFlow = undefined;
+    this._fComponentsStore.fLineAlignment = undefined;
   }
 }

projects/f-flow/src/domain/f-node/calculate-nodes-bounding-box-normalized-position/calculate-nodes-bounding-box-normalized-position.execution.ts

@@ -12,11 +12,11 @@ export class CalculateNodesBoundingBoxNormalizedPositionExecution implements IEx
   private _fComponentsStore = inject(FComponentsStore);
 
   public handle(request: CalculateNodesBoundingBoxNormalizedPositionRequest): IRect | null {
-    return RectExtensions.union(this._getNodesRects());
+    return RectExtensions.union(this._getNodesRects(request.fNodes || this._fComponentsStore.fNodes));
   }
 
-  private _getNodesRects(): IRect[] {
-    return this._fComponentsStore.fNodes.map((x) => {
+  private _getNodesRects(fNodes: FNodeBase[]): IRect[] {
+    return fNodes.map((x) => {
       return this._getElementRect(x, RectExtensions.fromElement(x.hostElement));
     });
   }

projects/f-flow/src/domain/f-node/calculate-nodes-bounding-box-normalized-position/calculate-nodes-bounding-box-normalized-position.request.ts

@@ -1,3 +1,9 @@
+import { FNodeBase } from '../../../f-node';
+
 export class CalculateNodesBoundingBoxNormalizedPositionRequest {
 
+  constructor(
+    public fNodes?: FNodeBase[],
+  ) {
+  }
 }

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

@@ -34,6 +34,8 @@ export * from './i-map';
 
 export * from './is-mobile';
 
+export * from './log-execution-time';
+
 export * from './providers';
 
 export * from './transition-end';

projects/f-flow/src/domain/log-execution-time.ts

@@ -0,0 +1,22 @@
+export function LogExecutionTime(label?: string): MethodDecorator {
+  return function (
+    target: Object,
+    propertyKey: string | symbol,
+    descriptor: TypedPropertyDescriptor<any>
+  ): TypedPropertyDescriptor<any> | void {
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args: any[]) {
+      console.time(label || String(propertyKey));
+      const result = originalMethod.apply(this, args);
+
+      if (result instanceof Promise) {
+        return result.finally(() => console.timeEnd(label || String(propertyKey)));
+      }
+
+      console.timeEnd(label || String(propertyKey));
+      return result;
+    };
+
+    return descriptor;
+  };
+}

projects/f-flow/src/f-draggable/connections/create-connection/create-connection.drag-handler.ts

@@ -78,7 +78,7 @@ export class CreateConnectionDragHandler implements IDraggableItem {
   }
 
   private _drawConnectionForCreate(fInputRect: RoundedRect, fSide: EFConnectableSide): void {
-    const line = this.fMediator.send<ILine>(new CalculateConnectionLineByBehaviorRequest(
+    const line = this.fMediator.execute<ILine>(new CalculateConnectionLineByBehaviorRequest(
         this.fOutputWithRect.fRect,
         fInputRect,
         this.fConnection.fBehavior,
@@ -93,7 +93,7 @@ export class CreateConnectionDragHandler implements IDraggableItem {
 
   private _drawSnapConnection(fClosestInput: IClosestInput | undefined): void {
     if (fClosestInput) {
-      const line = this.fMediator.send<ILine>(new CalculateConnectionLineByBehaviorRequest(
+      const line = this.fMediator.execute<ILine>(new CalculateConnectionLineByBehaviorRequest(
           this.fOutputWithRect.fRect,
           fClosestInput.fRect,
           this.fSnapConnection!.fBehavior,