test: fixed remove on drop and drag to reassign tests

cypress/e2e/drag-to-connect.component.cy.ts

@@ -4,6 +4,7 @@ describe('DragToConnectComponent', () => {
   })
 
   it('should start creating a connection and show connection-for-create element', function () {
+    cy.get('f-flow').scrollIntoView();
     cy.get('.f-connection-for-create').should('exist')
       .invoke('css', 'display').should('equal', 'none');
 

cypress/e2e/drag-to-reassign.component.cy.ts

@@ -3,19 +3,27 @@ describe('DragToReassignComponent', () => {
     cy.visit('http://localhost:4200/examples/drag-to-reassign')
   })
 
-  it('should drag from input to anoyher input and reassign the connection', function() {
-    cy.get('#connection_f-connection-012').should('exist');
-
-    cy.get('.f-connection-drag-handle')
-      .trigger('mousedown', { button: 0, force: true })
-      .trigger('mousemove', { clientX: 0, clientY: 0 })
-      .trigger('mousemove', { clientX: 20, clientY: 10 })
-      .get('div[data-f-input-id=\'f-node-input-1\']')
-      .trigger('mousemove', { clientX: 20, clientY: 10 })
-      .trigger('mouseup');
-
-    cy.get('#connection_f-connection-012').should('not.exist');
-    cy.get('#connection_for_selection_f-connection-11f-node-input-1').should('exist');
+  it('should drag from input to anoyher input and reassign the connection', function () {
+    cy.get('f-flow').scrollIntoView();
+
+    cy.get('#connection_f-connection-01input-1').should('exist');
+    cy.get('div[data-f-input-id=\'input-1\']').should('exist');
+    cy.get('div[data-f-input-id=\'input-2\']').should('exist');
+
+    cy.get('div[data-f-input-id="input-2"]').then(($target) => {
+      const targetRect = $target[ 0 ].getBoundingClientRect();
+      const endY = targetRect.y + targetRect.height / 2;
+
+      cy.get('.f-connection-drag-handle')
+        .trigger('mousedown', { button: 0, force: true })
+        .trigger('mousemove', { clientY: 0, force: true })
+        .get('div[data-f-input-id=\'input-2\']')
+        .trigger('mousemove', { clientY: endY, force: true })
+        .trigger('mouseup', { force: true });
+
+      cy.get('#connection_f-connection-01input-1').should('not.exist');
+      cy.get('#connection_for_selection_f-connection-11input-2').should('exist');
+    });
   });
 })
 

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

@@ -4,14 +4,17 @@ describe('RemoveConnectionOnDropComponent', () => {
   })
 
   it('should drag connection from input to any place and remove the connection', function () {
+    cy.get('f-flow').scrollIntoView();
     cy.get('#connection_f-connection-012').should('exist');
     cy.get('.f-connection').should('have.length', 2);
 
-    cy.get('.f-connection-drag-handle').first()
+    cy.get('.f-connection-drag-handle')
+      .first()
       .trigger('mousedown', { button: 0, force: true })
-      .trigger('mousemove', { clientX: 0, clientY: 0 })
-      .trigger('mousemove', { clientX: 420, clientY: 110 })
-      .trigger('mouseup');
+      .trigger('mousemove', { clientY: 0, force: true })
+      .trigger('mousemove', { clientY: 200, clientX: 0, force: true })
+      .trigger('mouseup', { force: true });
+
 
     cy.get('#connection_f-connection-012').should('not.exist');
     cy.get('.f-connection').should('have.length', 1);

package.json

@@ -67,7 +67,7 @@
     "@angular/router": "^18.2.0",
     "@angular/ssr": "^18.2.3",
     "@cypress/angular": "^2.1.0",
-    "@foblex/2d": "1.1.0",
+    "@foblex/2d": "1.1.4",
     "@foblex/drag-toolkit": "1.1.0",
     "@foblex/f-docs": "1.4.9",
     "@foblex/mediator": "1.1.0",

projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.html

@@ -8,8 +8,8 @@
     }
 
     <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="1">Output</div>
-    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 24 }" fNodeInput fInputId="2">Input</div>
-    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 124 }" fNodeInput>Input</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 24 }" fNodeInput fInputId="input-1">Input</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 124 }" fNodeInput fInputId="input-2">Input</div>
   </f-canvas>
 </f-flow>
 

projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component, ElementRef, inject,
+  ViewChild
+} from '@angular/core';
 import { FCanvasComponent, FFlowModule, FReassignConnectionEvent } from '@foblex/flow';
 
 @Component({
@@ -13,24 +18,22 @@ import { FCanvasComponent, FFlowModule, FReassignConnectionEvent } from '@foblex
 })
 export class DragToReassignComponent {
 
+  private _elementReference = inject(ElementRef);
+  private _changeDetectorRef = inject(ChangeDetectorRef);
+
   @ViewChild(FCanvasComponent, { static: true })
   public fCanvas!: FCanvasComponent;
 
   public connections: { outputId: string, inputId: string }[] = [
-    { outputId: '1', inputId: '2' },
+    { outputId: '1', inputId: 'input-1' },
   ];
 
-  constructor(
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
-  }
-
   public reassignConnection(event: FReassignConnectionEvent): void {
-    if(!event.newFInputId) {
+    if (!event.newFInputId) {
       return;
     }
     this.connections = [ { outputId: event.fOutputId, inputId: event.newFInputId } ];
-    this.changeDetectorRef.detectChanges();
+    this._changeDetectorRef.detectChanges();
   }
 
   public onLoaded(): void {

projects/f-examples/connections/remove-connection-on-drop/remove-connection-on-drop.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, inject, ViewChild } from '@angular/core';
 import {
   FCanvasComponent,
   FFlowComponent,
@@ -19,6 +19,9 @@ import { IPoint } from '@foblex/2d';
 })
 export class RemoveConnectionOnDropComponent {
 
+  private _elementReference = inject(ElementRef);
+  private _changeDetectorRef = inject(ChangeDetectorRef);
+
   @ViewChild(FCanvasComponent, { static: true })
   public fCanvas!: FCanvasComponent;
 
@@ -41,18 +44,13 @@ export class RemoveConnectionOnDropComponent {
     { outputId: this.nodes[1].id, inputId: this.nodes[2].id }
   ];
 
-  constructor(
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
-  }
-
   public onConnectionDropped(event: FReassignConnectionEvent): void {
     if (!event.newFInputId) {
       this.removeConnection(event);
     } else {
       this.reassignConnection(event);
     }
-    this.changeDetectorRef.detectChanges();
+    this._changeDetectorRef.detectChanges();
   }
 
   private removeConnection(event: FReassignConnectionEvent): void {

projects/f-flow/package.json

@@ -33,7 +33,7 @@
     "@angular/core": ">=15.0.0",
     "@foblex/platform": "1.0.4",
     "@foblex/mediator": "1.1.0",
-    "@foblex/2d": "1.1.0",
+    "@foblex/2d": "1.1.4",
     "@foblex/drag-toolkit": "1.1.0",
     "@foblex/utils": "1.1.0"
   },

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

@@ -3,7 +3,7 @@ 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 { GetNodesRectRequest, RedrawCanvasWithAnimationRequest } from '../../../domain';
+import { CalculateNodesBoundingBoxRequest, RedrawCanvasWithAnimationRequest } from '../../../domain';
 
 @Injectable()
 @FExecutionRegister(FitToFlowRequest)
@@ -18,7 +18,7 @@ export class FitToFlowExecution implements IExecution<FitToFlowRequest, void> {
   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 CalculateNodesBoundingBoxRequest()) || RectExtensions.initialize();
     if (fNodesRect.width === 0 || fNodesRect.height === 0) {
       return;
     }

projects/f-flow/src/domain/f-canvas/reset-scale-and-center/reset-scale-and-center.execution.ts

@@ -2,7 +2,7 @@ import { inject, Injectable } from '@angular/core';
 import { ResetScaleAndCenterRequest } from './reset-scale-and-center-request';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { IPoint, IRect, ITransformModel, PointExtensions, RectExtensions } from '@foblex/2d';
-import { GetNodesRectRequest, RedrawCanvasWithAnimationRequest } from '../../../domain';
+import { CalculateNodesBoundingBoxRequest, RedrawCanvasWithAnimationRequest } from '../../../domain';
 import { FComponentsStore } from '../../../f-storage';
 
 @Injectable()
@@ -18,7 +18,7 @@ export class ResetScaleAndCenterExecution implements IExecution<ResetScaleAndCen
   private _fMediator = inject(FMediator);
 
   public handle(request: ResetScaleAndCenterRequest): void {
-    const fNodesRect = this._fMediator.send<IRect | null>(new GetNodesRectRequest()) || RectExtensions.initialize();
+    const fNodesRect = this._fMediator.send<IRect | null>(new CalculateNodesBoundingBoxRequest()) || RectExtensions.initialize();
     if (fNodesRect.width === 0 || fNodesRect.height === 0) {
       return;
     }

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

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

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

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

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

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

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

@@ -1,5 +1,7 @@
 export * from './add-flow-to-store';
 
+export * from './get-flow';
+
 export * from './get-flow-host-element';
 
 export * from './remove-flow-from-store';

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

@@ -1,11 +1,14 @@
 import { GetFlowHostElementExecution } from './get-flow-host-element';
 import { AddFlowToStoreExecution } from './add-flow-to-store';
 import { RemoveFlowFromStoreExecution } from './remove-flow-from-store';
+import { GetFlowExecution } from './get-flow';
 
 export const F_FLOW_FEATURES = [
 
   AddFlowToStoreExecution,
 
+  GetFlowExecution,
+
   GetFlowHostElementExecution,
 
   RemoveFlowFromStoreExecution

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

@@ -0,0 +1,24 @@
+import { IRect, RectExtensions } from '@foblex/2d';
+import { CalculateNodesBoundingBoxRequest } from './calculate-nodes-bounding-box.request';
+import { inject, Injectable } from '@angular/core';
+import { FComponentsStore } from '../../../f-storage';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+
+@Injectable()
+@FExecutionRegister(CalculateNodesBoundingBoxRequest)
+export class CalculateNodesBoundingBoxExecution implements IExecution<CalculateNodesBoundingBoxRequest, IRect | null> {
+
+  private _fComponentsStore = inject(FComponentsStore);
+
+  public handle(request: CalculateNodesBoundingBoxRequest): IRect | null {
+    return RectExtensions.union(this._getNodesRects());
+  }
+
+  private _getNodesRects(): IRect[] {
+    return this._fComponentsStore.fNodes.map((x) => this._getElementRect(x.hostElement));
+  }
+
+  private _getElementRect(element: HTMLElement): IRect {
+    return RectExtensions.fromElement(element);
+  }
+}

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

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

projects/f-flow/src/domain/f-node/calculate-nodes-bounding-box/index.ts

@@ -0,0 +1,3 @@
+export * from './calculate-nodes-bounding-box.execution';
+
+export * from './calculate-nodes-bounding-box.request';

projects/f-flow/src/domain/f-node/get-nodes/get-nodes-request.ts

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

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

@@ -0,0 +1,16 @@
+import { inject, Injectable } from '@angular/core';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { GetNodesRequest } from './get-nodes-request';
+import { FComponentsStore } from '../../../f-storage';
+import { FNodeBase } from '../../../f-node';
+
+@Injectable()
+@FExecutionRegister(GetNodesRequest)
+export class GetNodesExecution implements IExecution<GetNodesRequest, FNodeBase[]> {
+
+  private _fComponentsStore = inject(FComponentsStore);
+
+  public handle(request: GetNodesRequest): FNodeBase[] {
+    return this._fComponentsStore.fNodes;
+  }
+}

projects/f-flow/src/domain/f-node/get-nodes/index.ts

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

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

@@ -1,5 +1,9 @@
 export * from './add-node-to-store';
 
+export * from './calculate-nodes-bounding-box';
+
+export * from './get-nodes';
+
 export * from './update-node-when-state-or-size-changed';
 
 export * from './remove-node-from-store';

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

@@ -1,11 +1,17 @@
 import { AddNodeToStoreExecution } from './add-node-to-store';
 import { RemoveNodeFromStoreExecution } from './remove-node-from-store';
 import { UpdateNodeWhenStateOrSizeChangedExecution } from './update-node-when-state-or-size-changed';
+import { GetNodesExecution } from './get-nodes';
+import { CalculateNodesBoundingBoxExecution } from './calculate-nodes-bounding-box';
 
 export const F_NODE_FEATURES = [
 
   AddNodeToStoreExecution,
 
+  CalculateNodesBoundingBoxExecution,
+
+  GetNodesExecution,
+
   UpdateNodeWhenStateOrSizeChangedExecution,
 
   RemoveNodeFromStoreExecution

projects/f-flow/src/domain/f-node/update-node-when-state-or-size-changed/update-node-when-state-or-size-changed.execution.ts

@@ -12,7 +12,8 @@ import { FResizeChannel } from '../../../reactivity';
 
 @Injectable()
 @FExecutionRegister(UpdateNodeWhenStateOrSizeChangedRequest)
-export class UpdateNodeWhenStateOrSizeChangedExecution implements IExecution<UpdateNodeWhenStateOrSizeChangedRequest, void> {
+export class UpdateNodeWhenStateOrSizeChangedExecution
+  implements IExecution<UpdateNodeWhenStateOrSizeChangedRequest, void> {
 
   private _fMediator = inject(FMediator);