feat: change connector ids to signals

Author: siarheihuzarevich

projects/f-flow/src/domain/f-connection/redraw-connections/redraw-connections.execution.ts

@@ -7,7 +7,7 @@ import { FConnectorBase } from '../../../f-connectors';
 import { FConnectionBase } from '../../../f-connection';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { CreateConnectionMarkersRequest } from '../create-connection-markers';
-import { GetNormalizedConnectorRectRequest } from "../../get-normalized-connector-rect";
+import { GetNormalizedConnectorRectRequest } from '../../get-normalized-connector-rect';
 
 /**
  * Execution that redraws connections in the FComponentsStore.
@@ -17,11 +17,10 @@ import { GetNormalizedConnectorRectRequest } from "../../get-normalized-connecto
 @Injectable()
 @FExecutionRegister(RedrawConnectionsRequest)
 export class RedrawConnectionsExecution implements IExecution<RedrawConnectionsRequest, void> {
-
-  private readonly _fMediator = inject(FMediator);
+  private readonly _mediator = inject(FMediator);
   private readonly _store = inject(FComponentsStore);
 
-  public handle(request: RedrawConnectionsRequest): void {
+  public handle(_request: RedrawConnectionsRequest): void {
     this._resetConnectors();
 
     if (this._store.fTempConnection) {
@@ -38,7 +37,7 @@ export class RedrawConnectionsExecution implements IExecution<RedrawConnectionsR
   }
 
   private _getOutput(id: string): FConnectorBase {
-    const result = this._store.fOutputs.find((x) => x.fId === id)!;
+    const result = this._store.fOutputs.find((x) => x.fId() === id);
     if (!result) {
       throw new Error(`Output with id ${id} not found`);
     }
@@ -47,7 +46,7 @@ export class RedrawConnectionsExecution implements IExecution<RedrawConnectionsR
   }
 
   private _getInput(id: string): FConnectorBase {
-    const result = this._store.fInputs.find((x) => x.fId === id)!;
+    const result = this._store.fInputs.find((x) => x.fId() === id);
     if (!result) {
       throw new Error(`Input with id ${id} not found`);
     }
@@ -60,7 +59,11 @@ export class RedrawConnectionsExecution implements IExecution<RedrawConnectionsR
     this._store.fInputs.forEach((x) => x.resetConnected());
   }
 
-  private _setupConnection(fOutput: FConnectorBase, fInput: FConnectorBase, fConnection: FConnectionBase): void {
+  private _setupConnection(
+    fOutput: FConnectorBase,
+    fInput: FConnectorBase,
+    fConnection: FConnectionBase,
+  ): void {
     fOutput.setConnected(fInput);
     fInput.setConnected(fOutput);
 
@@ -74,10 +77,19 @@ export class RedrawConnectionsExecution implements IExecution<RedrawConnectionsR
     fConnection.isSelected() ? fConnection.markAsSelected() : null;
   }
 
-  private _getLine(output: FConnectorBase, input: FConnectorBase, connection: FConnectionBase): ILine {
-    return this._fMediator.execute(new CalculateConnectionLineByBehaviorRequest(
-        this._fMediator.execute<IRoundedRect>(new GetNormalizedConnectorRectRequest(output.hostElement)),
-        this._fMediator.execute<IRoundedRect>(new GetNormalizedConnectorRectRequest(input.hostElement)),
+  private _getLine(
+    output: FConnectorBase,
+    input: FConnectorBase,
+    connection: FConnectionBase,
+  ): ILine {
+    return this._mediator.execute(
+      new CalculateConnectionLineByBehaviorRequest(
+        this._mediator.execute<IRoundedRect>(
+          new GetNormalizedConnectorRectRequest(output.hostElement),
+        ),
+        this._mediator.execute<IRoundedRect>(
+          new GetNormalizedConnectorRectRequest(input.hostElement),
+        ),
         connection.fBehavior,
         output.fConnectableSide,
         input.fConnectableSide,
@@ -86,9 +98,6 @@ export class RedrawConnectionsExecution implements IExecution<RedrawConnectionsR
   }
 
   private _setMarkers(connection: FConnectionBase): void {
-    this._fMediator.execute(
-      new CreateConnectionMarkersRequest(connection),
-    );
+    this._mediator.execute(new CreateConnectionMarkersRequest(connection));
   }
 }
-

projects/f-flow/src/domain/f-connectors/find-closest-connector/find-closest-connector.execution.spec.ts

@@ -7,59 +7,64 @@ import { FindClosestConnectorExecution } from '@foblex/flow';
 import { FindClosestConnectorRequest } from '@foblex/flow';
 import { FConnectorBase } from '@foblex/flow';
 import { IClosestConnector } from '@foblex/flow';
+import { signal } from '@angular/core';
 
 describe('FindClosestConnectorExecution', () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let fDraggableDataContext: FDraggableDataContext;
   let fMediator: FMediator;
 
   beforeEach(() => {
-    setupTestModule([ FindClosestConnectorExecution ]);
-    fDraggableDataContext = TestBed.inject(FDraggableDataContext) as jasmine.SpyObj<FDraggableDataContext>;
+    setupTestModule([FindClosestConnectorExecution]);
+    fDraggableDataContext = TestBed.inject(
+      FDraggableDataContext,
+    ) as jasmine.SpyObj<FDraggableDataContext>;
     fMediator = TestBed.inject(FMediator) as jasmine.SpyObj<FMediator>;
   });
 
   it('should return undefined when connectors is empty', () => {
-    const result = fMediator.execute(
-      new FindClosestConnectorRequest({ x: 50, y: 50 }, []),
-    );
+    const result = fMediator.execute(new FindClosestConnectorRequest({ x: 50, y: 50 }, []));
     expect(result).toBeUndefined();
   });
 
   it('should return the only element if its distance is less than snapThreshold', () => {
-
     const result = fMediator.execute<IClosestConnector>(
-      new FindClosestConnectorRequest({ x: 10, y: 10 }, [ {
-        fConnector: {
-          fId: 'input1',
-        } as FConnectorBase,
-        fRect: RoundedRect.fromRect(RectExtensions.initialize(12, 12, 10, 10)),
-      }, {
-        fConnector: {
-          fId: 'input2',
-        } as FConnectorBase,
-        fRect: RoundedRect.fromRect(RectExtensions.initialize(22, 22, 10, 10)),
-      } ]),
+      new FindClosestConnectorRequest({ x: 10, y: 10 }, [
+        {
+          fConnector: {
+            fId: signal('input1').asReadonly(),
+          } as FConnectorBase,
+          fRect: RoundedRect.fromRect(RectExtensions.initialize(12, 12, 10, 10)),
+        },
+        {
+          fConnector: {
+            fId: signal('input2').asReadonly(),
+          } as FConnectorBase,
+          fRect: RoundedRect.fromRect(RectExtensions.initialize(22, 22, 10, 10)),
+        },
+      ]),
     );
     expect(result).toBeDefined();
-    expect(result?.fConnector.fId).toBe('input1');
+    expect(result?.fConnector.fId()).toBe('input1');
   });
 
   it('should return 10 if the only element is exactly at snapThreshold distance', () => {
     const result = fMediator.execute<IClosestConnector>(
-      new FindClosestConnectorRequest({ x: 0, y: 0 }, [ {
-        fConnector: {
-          fId: 'input1',
-        } as FConnectorBase,
-        fRect: RoundedRect.fromRect(RectExtensions.initialize(10, 0, 10, 10)),
-      }, {
-        fConnector: {
-          fId: 'input2',
-        } as FConnectorBase,
-        fRect: RoundedRect.fromRect(RectExtensions.initialize(22, 22, 10, 10)),
-      } ]),
+      new FindClosestConnectorRequest({ x: 0, y: 0 }, [
+        {
+          fConnector: {
+            fId: signal('input1').asReadonly(),
+          } as FConnectorBase,
+          fRect: RoundedRect.fromRect(RectExtensions.initialize(10, 0, 10, 10)),
+        },
+        {
+          fConnector: {
+            fId: signal('input2').asReadonly(),
+          } as FConnectorBase,
+          fRect: RoundedRect.fromRect(RectExtensions.initialize(22, 22, 10, 10)),
+        },
+      ]),
     );
     expect(result?.distance).toBe(10);
   });
 });
-
-

projects/f-flow/src/domain/f-connectors/get-all-can-be-connected-inputs-and-rects/get-all-can-be-connected-inputs-and-rects.execution.ts

@@ -12,8 +12,8 @@ import { GetConnectorAndRectRequest } from '../get-connector-and-rect';
 @Injectable()
 @FExecutionRegister(GetAllCanBeConnectedInputsAndRectsRequest)
 export class GetAllCanBeConnectedInputsAndRectsExecution
-  implements IExecution<GetAllCanBeConnectedInputsAndRectsRequest, IConnectorAndRect[]> {
-
+  implements IExecution<GetAllCanBeConnectedInputsAndRectsRequest, IConnectorAndRect[]>
+{
   private readonly _mediator = inject(FMediator);
   private _store = inject(FComponentsStore);
 
@@ -27,22 +27,27 @@ export class GetAllCanBeConnectedInputsAndRectsExecution
     });
   }
 
-  private _getCanBeConnectedInputs(fOutputOrOutlet: FNodeOutputBase | FNodeOutletBase): FConnectorBase[] {
+  private _getCanBeConnectedInputs(
+    fOutputOrOutlet: FNodeOutputBase | FNodeOutletBase,
+  ): FConnectorBase[] {
     let fInputs: FConnectorBase[] = [];
     if (fOutputOrOutlet.canBeConnectedInputs?.length) {
-      fInputs = this._fInputs.filter((x) => fOutputOrOutlet.canBeConnectedInputs.includes(x.fId));
+      fInputs = this._fInputs.filter((x) => fOutputOrOutlet.canBeConnectedInputs.includes(x.fId()));
     } else {
       fInputs = this._fInputs.filter((x) => x.canBeConnected);
 
-      if(!fOutputOrOutlet.isSelfConnectable) {
+      if (!fOutputOrOutlet.isSelfConnectable) {
         fInputs = this._filterSelfConnectable(fInputs, fOutputOrOutlet);
       }
     }
 
     return fInputs;
   }
 
-  private _filterSelfConnectable(fInputs: FConnectorBase[], fOutputOrOutlet: FConnectorBase): FConnectorBase[] {
+  private _filterSelfConnectable(
+    fInputs: FConnectorBase[],
+    fOutputOrOutlet: FConnectorBase,
+  ): FConnectorBase[] {
     return fInputs.filter((x) => fOutputOrOutlet.fNodeId !== x.fNodeId);
   }
 }

projects/f-flow/src/domain/f-connectors/get-all-can-be-connected-source-connectors-and-rects/get-all-can-be-connected-source-connectors-and-rects.execution.ts

@@ -1,6 +1,4 @@
-import {
-  GetAllCanBeConnectedSourceConnectorsAndRectsRequest,
-} from './get-all-can-be-connected-source-connectors-and-rects.request';
+import { GetAllCanBeConnectedSourceConnectorsAndRectsRequest } from './get-all-can-be-connected-source-connectors-and-rects.request';
 import { inject, Injectable } from '@angular/core';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { FConnectorBase, FNodeInputBase, FNodeOutputBase } from '../../../f-connectors';
@@ -16,8 +14,8 @@ import { GetConnectorAndRectRequest } from '../get-connector-and-rect';
 @Injectable()
 @FExecutionRegister(GetAllCanBeConnectedSourceConnectorsAndRectsRequest)
 export class GetAllCanBeConnectedSourceConnectorsAndRectsExecution
-  implements IExecution<GetAllCanBeConnectedSourceConnectorsAndRectsRequest, IConnectorAndRect[]> {
-
+  implements IExecution<GetAllCanBeConnectedSourceConnectorsAndRectsRequest, IConnectorAndRect[]>
+{
   private readonly _mediator = inject(FMediator);
   private readonly _store = inject(FComponentsStore);
 
@@ -35,7 +33,7 @@ export class GetAllCanBeConnectedSourceConnectorsAndRectsExecution
     return this._fSourceConnectors.filter((x) => {
       let result = x.canBeConnected;
       if (result && x.canBeConnectedInputs?.length) {
-        result = x.canBeConnectedInputs?.includes(fTargetConnector.fId);
+        result = x.canBeConnectedInputs?.includes(fTargetConnector.fId());
       }
 
       return result;

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

@@ -10,40 +10,47 @@ import { IFFlowStateConnector } from '../i-f-flow-state-connector';
  */
 @Injectable()
 @FExecutionRegister(GetFlowStateNodesRequest)
-export class GetFlowStateNodesExecution implements IExecution<GetFlowStateNodesRequest, IFFlowStateNode[]> {
-
+export class GetFlowStateNodesExecution
+  implements IExecution<GetFlowStateNodesRequest, IFFlowStateNode[]>
+{
   private readonly _store = inject(FComponentsStore);
 
   public handle(request: GetFlowStateNodesRequest): IFFlowStateNode[] {
-    return this._store.fNodes.filter((x) => x instanceof request.type).map((x) => {
-      return {
-        id: x.fId(),
-        parent: x.fParentId(),
-        position: x._position,
-        size: x._size,
-        rotate: x._rotate,
-        fOutputs: this._getOutputs(x.hostElement),
-        fInputs: this._getInputs(x.hostElement),
-        isSelected: x.isSelected(),
-      };
-    });
+    return this._store.fNodes
+      .filter((x) => x instanceof request.type)
+      .map((x) => {
+        return {
+          id: x.fId(),
+          parent: x.fParentId(),
+          position: x._position,
+          size: x._size,
+          rotate: x._rotate,
+          fOutputs: this._getOutputs(x.hostElement),
+          fInputs: this._getInputs(x.hostElement),
+          isSelected: x.isSelected(),
+        };
+      });
   }
 
   private _getOutputs(hostElement: HTMLElement): IFFlowStateConnector[] {
-    return this._store.fOutputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
-      return {
-        id: x.fId,
-        fConnectableSide: x.fConnectableSide,
-      }
-    });
+    return this._store.fOutputs
+      .filter((x) => hostElement.contains(x.hostElement))
+      .map((x) => {
+        return {
+          id: x.fId(),
+          fConnectableSide: x.fConnectableSide,
+        };
+      });
   }
 
   private _getInputs(hostElement: HTMLElement): IFFlowStateConnector[] {
-    return this._store.fInputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
-      return {
-        id: x.fId,
-        fConnectableSide: x.fConnectableSide,
-      }
-    });
+    return this._store.fInputs
+      .filter((x) => hostElement.contains(x.hostElement))
+      .map((x) => {
+        return {
+          id: x.fId(),
+          fConnectableSide: x.fConnectableSide,
+        };
+      });
   }
 }

projects/f-flow/src/domain/f-node/calculate-input-connections/calculate-input-connections.ts

@@ -10,24 +10,20 @@ import { FConnectionBase } from '../../../f-connection';
  */
 @Injectable()
 @FExecutionRegister(CalculateInputConnectionsRequest)
-export class CalculateInputConnections implements IExecution<CalculateInputConnectionsRequest, FConnectionBase[]> {
-
+export class CalculateInputConnections
+  implements IExecution<CalculateInputConnectionsRequest, FConnectionBase[]>
+{
   private readonly _store = inject(FComponentsStore);
 
   public handle(request: CalculateInputConnectionsRequest): FConnectionBase[] {
-    return this._calculateConnections(
-      new Set(this._calculateConnectors(request.fNode)),
-    );
+    return this._calculateConnections(new Set(this._calculateConnectors(request.fNode)));
   }
 
   private _calculateConnectors(fNode: FNodeBase): string[] {
-    return this._store.fInputs
-      .filter((x) => fNode.isContains(x.hostElement))
-      .map((x) => x.fId);
+    return this._store.fInputs.filter((x) => fNode.isContains(x.hostElement)).map((x) => x.fId());
   }
 
   private _calculateConnections(ids: Set<string>): FConnectionBase[] {
-    return this._store.fConnections
-      .filter((x) => ids.has(x.fInputId));
+    return this._store.fConnections.filter((x) => ids.has(x.fInputId));
   }
 }

projects/f-flow/src/domain/f-node/calculate-output-connections/calculate-output-connections.ts

@@ -11,24 +11,19 @@ import { FConnectionBase } from '../../../f-connection';
 @Injectable()
 @FExecutionRegister(CalculateOutputConnectionsRequest)
 export class CalculateOutputConnections
-  implements IExecution<CalculateOutputConnectionsRequest, FConnectionBase[]> {
-
+  implements IExecution<CalculateOutputConnectionsRequest, FConnectionBase[]>
+{
   private readonly _store = inject(FComponentsStore);
 
   public handle(request: CalculateOutputConnectionsRequest): FConnectionBase[] {
-    return this._calculateConnections(
-      new Set(this._calculateConnectors(request.fNode)),
-    );
+    return this._calculateConnections(new Set(this._calculateConnectors(request.fNode)));
   }
 
   private _calculateConnectors(fNode: FNodeBase): string[] {
-    return this._store.fOutputs
-      .filter((x) => fNode.isContains(x.hostElement))
-      .map((x) => x.fId);
+    return this._store.fOutputs.filter((x) => fNode.isContains(x.hostElement)).map((x) => x.fId());
   }
 
   private _calculateConnections(ids: Set<string>): FConnectionBase[] {
-    return this._store.fConnections
-      .filter((x) => ids.has(x.fOutputId));
+    return this._store.fConnections.filter((x) => ids.has(x.fOutputId));
   }
 }