Merge pull request #43 from Foblex/v12.6.1

fix: Fixed create connection target incorrect position with scale
Foblex · Sep 8, 2024 · 1d6e488 · 1d6e488
2 parents d2e76da + ec323c5
commit 1d6e488
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 33 deletions.
diff --git a/...on-preparation/create-connection-drag-handler/create-connection-drag-handler.execution.ts b/...on-preparation/create-connection-drag-handler/create-connection-drag-handler.execution.ts
@@ -11,6 +11,10 @@ import { CreateConnectionDragHandler } from '../../create-connection.drag-handle
 export class CreateConnectionDragHandlerExecution
   implements IHandler<CreateConnectionDragHandlerRequest, void> {
 
+  private get flowHost(): HTMLElement {
+    return this.fComponentsStore.flowHost;
+  }
+
   private get transform(): ITransformModel {
     return this.fComponentsStore.fCanvas!.transform;
   }
@@ -27,11 +31,14 @@ export class CreateConnectionDragHandlerExecution
     this.fComponentsStore.fTempConnection!.initialize();
 
     this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
+    const positionRelativeToFlowComponent = Point.fromPoint(request.onPointerDownPosition).elementTransform(this.flowHost).div(this.transform.scale);
+    this.fDraggableDataContext.onPointerDownPosition = positionRelativeToFlowComponent;
 
-    this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.position).div(this.transform.scale);
+    const positionRelativeToCanvasComponent = Point.fromPoint(positionRelativeToFlowComponent).mult(this.transform.scale)
+      .sub(this.transform.position).sub(this.transform.scaledPosition).div(this.transform.scale);
 
     this.fDraggableDataContext.draggableItems = [
-      new CreateConnectionDragHandler(this.fMediator, this.fComponentsStore.fTempConnection!, request.connectorCenter)
+      new CreateConnectionDragHandler(this.fMediator, this.fComponentsStore.fTempConnection!, positionRelativeToCanvasComponent)
     ];
   }
 }
diff --git a/...tion-preparation/create-connection-drag-handler/create-connection-drag-handler.request.ts b/...tion-preparation/create-connection-drag-handler/create-connection-drag-handler.request.ts
@@ -4,9 +4,8 @@ import { FConnectorBase } from '../../../../../f-connectors';
 export class CreateConnectionDragHandlerRequest {
 
   constructor(
-    public position: IPoint,
-    public connector: FConnectorBase,
-    public connectorCenter: IPoint
+    public onPointerDownPosition: IPoint,
+    public connector: FConnectorBase
   ) {
   }
 }
diff --git a/...connection-from-outlet-preparation/create-connection-from-outlet-preparation.execution.ts b/...connection-from-outlet-preparation/create-connection-from-outlet-preparation.execution.ts
@@ -1,10 +1,9 @@
-import { IHandler, IPoint, IRect, Point } from '@foblex/core';
+import { IHandler, IPoint } from '@foblex/core';
 import { Injectable } from '@angular/core';
 import { CreateConnectionFromOutletPreparationRequest } from './create-connection-from-outlet-preparation.request';
 import { FComponentsStore } from '../../../../../f-storage';
 import { FExecutionRegister, FFlowMediator } from '../../../../../infrastructure';
 import { FConnectorBase, FNodeOutletBase, FNodeOutputBase } from '../../../../../f-connectors';
-import { GetElementRectInFlowRequest } from '../../../../../domain';
 import { GetCanBeConnectedOutputByOutletRequest } from '../../get-can-be-connected-output-by-outlet';
 import { RequiredOutput } from '../../../../../errors';
 import { CreateConnectionDragHandlerRequest } from '../create-connection-drag-handler';
@@ -14,10 +13,6 @@ import { CreateConnectionDragHandlerRequest } from '../create-connection-drag-ha
 export class CreateConnectionFromOutletPreparationExecution
   implements IHandler<CreateConnectionFromOutletPreparationRequest, void> {
 
-  private get flowHost(): HTMLElement {
-    return this.fComponentsStore.fFlow!.hostElement;
-  }
-
   constructor(
     private fComponentsStore: FComponentsStore,
     private fMediator: FFlowMediator,
@@ -27,7 +22,6 @@ export class CreateConnectionFromOutletPreparationExecution
   public handle(request: CreateConnectionFromOutletPreparationRequest): void {
     const { event } = request;
     const node = this.fComponentsStore.findNode(event.targetElement)!;
-    const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
 
     const outlet = this.fComponentsStore.fOutlets.find((x) => {
       return x.hostElement.contains(event.targetElement);
@@ -40,23 +34,22 @@ export class CreateConnectionFromOutletPreparationExecution
 
     if (outlet.canBeConnected) {
 
-      const outletCenter = this.fMediator.send<IRect>(new GetElementRectInFlowRequest(outlet.hostElement)).gravityCenter;
       if ((outlet as FNodeOutletBase).isConnectionFromOutlet) {
 
-        this.createDragHandler(pointerPositionInFlow, outlet, outletCenter);
+        this.createDragHandler(event.getPosition(), outlet);
       } else {
         const output = this.fMediator.send<FNodeOutputBase>(
           new GetCanBeConnectedOutputByOutletRequest(outlet as FNodeOutletBase)
         );
         if (!output) {
           throw RequiredOutput();
         }
-        this.createDragHandler(pointerPositionInFlow, output, outletCenter);
+        this.createDragHandler(event.getPosition(), output);
       }
     }
   }
 
-  private createDragHandler(position: IPoint, output: FConnectorBase, outletCenter: IPoint): void {
-    this.fMediator.send(new CreateConnectionDragHandlerRequest(position, output, outletCenter));
+  private createDragHandler(position: IPoint, output: FConnectorBase): void {
+    this.fMediator.send(new CreateConnectionDragHandlerRequest(position, output));
   }
 }
diff --git a/...connection-from-output-preparation/create-connection-from-output-preparation.execution.ts b/...connection-from-output-preparation/create-connection-from-output-preparation.execution.ts
@@ -1,4 +1,4 @@
-import { IHandler, IPoint, IRect, Point } from '@foblex/core';
+import { IHandler, IPoint, IRect } from '@foblex/core';
 import { Injectable } from '@angular/core';
 import { CreateConnectionFromOutputPreparationRequest } from './create-connection-from-output-preparation.request';
 import { FConnectorBase } from '../../../../../f-connectors';
@@ -12,10 +12,6 @@ import { GetElementRectInFlowRequest } from '../../../../../domain';
 export class CreateConnectionFromOutputPreparationExecution
   implements IHandler<CreateConnectionFromOutputPreparationRequest, void> {
 
-  private get flowHost(): HTMLElement {
-    return this.fComponentsStore.fFlow!.hostElement;
-  }
-
   constructor(
     private fComponentsStore: FComponentsStore,
     private fMediator: FFlowMediator,
@@ -24,7 +20,6 @@ export class CreateConnectionFromOutputPreparationExecution
 
   public handle(request: CreateConnectionFromOutputPreparationRequest): void {
     const { event } = request;
-    const pointerPositionInFlow = Point.fromPoint(event.getPosition()).elementTransform(this.flowHost);
 
     const output = this.fComponentsStore.fOutputs.find((x) => {
       return x.hostElement.contains(event.targetElement);
@@ -33,12 +28,11 @@ export class CreateConnectionFromOutputPreparationExecution
       throw new Error('Output not found');
     }
     if (output.canBeConnected) {
-      const outputCenter = this.fMediator.send<IRect>(new GetElementRectInFlowRequest(output.hostElement)).gravityCenter;
-      this.createDragHandler(pointerPositionInFlow, output, outputCenter);
+      this.createDragHandler(event.getPosition(), output);
     }
   }
 
-  private createDragHandler(position: IPoint, output: FConnectorBase, outletCenter: IPoint): void {
-    this.fMediator.send(new CreateConnectionDragHandlerRequest(position, output, outletCenter));
+  private createDragHandler(position: IPoint, output: FConnectorBase): void {
+    this.fMediator.send(new CreateConnectionDragHandlerRequest(position, output));
   }
 }
diff --git a/...ts/f-flow/src/f-draggable/connections/create-connection/create-connection.drag-handler.ts b/...ts/f-flow/src/f-draggable/connections/create-connection/create-connection.drag-handler.ts
@@ -1,4 +1,4 @@
-import { ILine, IPoint, Point, RectExtensions, } from '@foblex/core';
+import { ILine, IPoint, Point, PointExtensions, RectExtensions, } from '@foblex/core';
 import { IDraggableItem } from '../../i-draggable-item';
 import {
   GetConnectionLineRequest, GetOutputRectInFlowRequest, GetOutputRectInFlowResponse, RoundedRect
@@ -17,7 +17,7 @@ export class CreateConnectionDragHandler implements IDraggableItem {
   constructor(
     private fMediator: FFlowMediator,
     public connection: FConnectionBase,
-    private mouseDownPoint: IPoint
+    private onPointerDownPosition: IPoint
   ) {
   }
 
@@ -27,11 +27,14 @@ export class CreateConnectionDragHandler implements IDraggableItem {
     );
     this.outputSide = outputRect.fConnectableSide;
     this.onPointerDownFromConnectorRect = RoundedRect.fromRoundedRect(outputRect.rect);
+    console.log('onPointerDown1', this.onPointerDownFromConnectorRect.x, this.onPointerDownFromConnectorRect.y);
+
     this.onPointerDownToConnectorRect = RoundedRect.fromRect(
-      RectExtensions.initialize(this.mouseDownPoint.x, this.mouseDownPoint.y, 0, 0)
+      RectExtensions.initialize(this.onPointerDownPosition.x, this.onPointerDownPosition.y, 0, 0)
     );
+    console.log('onPointerDown2', this.onPointerDownPosition);
     (this.connection as FConnectionBase).show();
-    this.move(new Point(0, 0));
+    this.move(PointExtensions.initialize());
   }
 
   public move(difference: IPoint): void {

diff --git a/projects/f-flow/src/f-draggable/f-draggable.directive.ts b/projects/f-flow/src/f-draggable/f-draggable.directive.ts
@@ -12,7 +12,7 @@ import { F_DRAGGABLE, FDraggableBase } from './f-draggable-base';
 import { FComponentsStore } from '../f-storage';
 import { FDraggableDataContext } from './f-draggable-data-context';
 import { Subscription } from 'rxjs';
-import { IPointerEvent, Point } from '@foblex/core';
+import { IPoint, IPointerEvent, Point } from '@foblex/core';
 import { NodeMoveFinalizeRequest, NodeMovePreparationRequest } from './node';
 import { CanvasMoveFinalizeRequest, CanvasMovePreparationRequest } from './canvas';
 import { DOCUMENT } from '@angular/common';
@@ -165,7 +165,7 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
 
   public override onPointerMove(event: IPointerEvent): void {
     const pointerPositionInCanvas = Point.fromPoint(event.getPosition()).elementTransform(this.hostElement);
-    const difference = pointerPositionInCanvas.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
+    const difference: IPoint = pointerPositionInCanvas.div(this.fDraggableDataContext.onPointerDownScale).sub(this.fDraggableDataContext.onPointerDownPosition);
     this.fDraggableDataContext.draggableItems.forEach((item) => {
       item.move({ ...difference });
     });