refactor(pinch-to-zoom): rename and reorganize pinch-to-zoom components

- Renamed SingleSelect to SelectByPointer and updated related files
- Updated references from SingleSelectRequest to SelectByPointerRequest
- Refactored PinchToZoomHandler and PinchToZoomPreparation for clarity
- Adjusted imports and exports in multiple files for consistency
- Improved handling of selection logic in SelectByPointer

Author: shuzarevich

projects/f-flow/src/domain/f-background/add-background-to-store/add-background-to-store-request.ts

@@ -1,10 +1,7 @@
 import { FBackgroundBase } from '../../../f-backgroud';
 
 export class AddBackgroundToStoreRequest {
-    static readonly fToken = Symbol('AddBackgroundToStoreRequest');
+  static readonly fToken = Symbol('AddBackgroundToStoreRequest');
 
-    constructor(
-        public fBackground: FBackgroundBase,
-    ) {
-    }
+  constructor(public fBackground: FBackgroundBase) {}
 }

projects/f-flow/src/f-draggable/f-draggable.directive.ts

@@ -47,7 +47,7 @@ import {
   FExternalItemPreparationRequest,
   PreventDefaultIsExternalItemRequest,
 } from '../f-external-item';
-import { SingleSelectRequest } from './single-select';
+import { SelectByPointerRequest } from './select-by-pointer';
 import { NodeResizeFinalizeRequest, NodeResizePreparationRequest } from './f-node-resize';
 import {
   F_AFTER_MAIN_PLUGIN,
@@ -212,7 +212,7 @@ export class FDraggableDirective
 
     this._mediator.execute<void>(new PinchToZoomPreparationRequest(event));
 
-    this._mediator.execute<void>(new SingleSelectRequest(event, this.fMultiSelectTrigger));
+    this._mediator.execute<void>(new SelectByPointerRequest(event, this.fMultiSelectTrigger));
 
     this._mediator.execute<void>(
       new ReassignConnectionPreparationRequest(event, this.fReassignConnectionTrigger),

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

@@ -14,7 +14,7 @@ export * from './f-node-resize';
 
 export * from './f-node-rotate';
 
-export * from './single-select';
+export * from './select-by-pointer';
 
 export * from './pinch-to-zoom';
 

projects/f-flow/src/f-draggable/infrastructure/drag-handler-injector.ts

@@ -12,6 +12,7 @@ import {
   DragNodeConnectionTargetHandler,
   DragNodeHandler,
 } from '../drag-node';
+import { PinchToZoomHandler } from '../pinch-to-zoom';
 
 type NoArgsCtor<T> = new () => T;
 
@@ -73,6 +74,10 @@ export class DragHandlerInjector {
           provide: DragNodeHandler,
           useClass: DragNodeHandler,
         },
+        {
+          provide: PinchToZoomHandler,
+          useClass: PinchToZoomHandler,
+        },
       ],
       parent: this._injector,
     });

projects/f-flow/src/f-draggable/pinch-to-zoom/constants/constants.ts

@@ -2,23 +2,24 @@ import { inject, Injectable } from '@angular/core';
 import { PinchToZoomFinalizeRequest } from './pinch-to-zoom-finalize-request';
 import { FExecutionRegister, IExecution } from '@foblex/mediator';
 import { FDraggableDataContext } from '../../f-draggable-data-context';
-import { FNodeRotateDragHandler, FNodeRotateFinalizeRequest } from '../../f-node-rotate';
+import { PinchToZoomHandler } from '../handler';
 
 @Injectable()
 @FExecutionRegister(PinchToZoomFinalizeRequest)
 export class PinchToZoomFinalize implements IExecution<PinchToZoomFinalizeRequest, void> {
-  private readonly _dragContext = inject(FDraggableDataContext);
+  private readonly _dragSession = inject(FDraggableDataContext);
 
-  public handle(_request: FNodeRotateFinalizeRequest): void {
-    if (!this._isValid()) {
+  public handle(_: PinchToZoomFinalizeRequest): void {
+    if (!this._hasPinchZoomHandler()) {
       return;
     }
-    this._dragContext.draggableItems.forEach((x) => {
-      x.onPointerUp?.();
-    });
+
+    for (const item of this._dragSession.draggableItems) {
+      item.onPointerUp?.();
+    }
   }
 
-  private _isValid(): boolean {
-    return this._dragContext.draggableItems.some((x) => x instanceof FNodeRotateDragHandler);
+  private _hasPinchZoomHandler(): boolean {
+    return this._dragSession.draggableItems.some((x) => x instanceof PinchToZoomHandler);
   }
 }

projects/f-flow/src/f-draggable/pinch-to-zoom/constants/index.ts

@@ -0,0 +1 @@
+export * from './pinch-to-zoom-handler';

projects/f-flow/src/f-draggable/pinch-to-zoom/finalize/pinch-to-zoom-finalize.ts

@@ -0,0 +1,112 @@
+import { inject, Injectable } from '@angular/core';
+import { IPoint, Point, PointExtensions } from '@foblex/2d';
+import { DragHandlerBase } from '../../infrastructure';
+import { FComponentsStore } from '../../../f-storage';
+import { FCanvasBase } from '../../../f-canvas';
+import { FZoomBase } from '../../../f-zoom';
+import { F_ZOOM_TAG } from '../../../domain';
+import { IPointerEvent } from '../../../drag-toolkit';
+
+const PINCH_MOVEMENT_THRESHOLD = 0.5;
+
+@Injectable()
+export class PinchToZoomHandler extends DragHandlerBase<unknown> {
+  protected readonly type = 'pinch-to-zoom';
+  protected readonly kind = 'pinch-to-zoom';
+
+  private readonly _store = inject(FComponentsStore);
+
+  private get _flowHost(): HTMLElement {
+    return this._store.flowHost;
+  }
+
+  private get _canvas(): FCanvasBase {
+    return this._store.fCanvas as FCanvasBase;
+  }
+
+  private get _zoomComponent(): FZoomBase {
+    return this._store.fComponents[F_ZOOM_TAG] as FZoomBase;
+  }
+
+  private _startDistance: number | null = null;
+  private _startScale: number | null = null;
+  private _touches!: TouchList;
+
+  public initialize(touches: TouchList): void {
+    this._touches = touches;
+  }
+
+  public override prepareDragSequence(): void {
+    const distance = calculateTouchDistance(this._touches);
+    if (distance == null) return;
+
+    this._startDistance = distance;
+    this._startScale = this._canvas.transform.scale;
+  }
+
+  public override onPointerMove(_: IPoint, event: IPointerEvent): void {
+    if (event.touches.length !== 2 || this._startDistance == null || this._startScale == null) {
+      return;
+    }
+
+    const distance = calculateTouchDistance(event.touches);
+    const center = calculateTouchCenter(event.touches);
+    if (distance == null || center == null) {
+      this._reset();
+
+      return;
+    }
+
+    if (Math.abs(distance - this._startDistance) < PINCH_MOVEMENT_THRESHOLD) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const ratio = distance / this._startDistance;
+    const nextScale = this._clamp(this._startScale * ratio);
+
+    this._canvas.setScale(nextScale, this._castPositionToFlow(center));
+    this._canvas.redraw();
+  }
+
+  private _clamp(value: number): number {
+    return Math.max(this._zoomComponent.minimum, Math.min(value, this._zoomComponent.maximum));
+  }
+
+  private _castPositionToFlow(position: IPoint): IPoint {
+    return Point.fromPoint(position).elementTransform(this._flowHost);
+  }
+
+  private _reset(): void {
+    this._startScale = null;
+    this._startDistance = null;
+  }
+
+  public override onPointerUp(): void {
+    this._reset();
+    this._canvas.emitCanvasChangeEvent();
+  }
+}
+
+function calculateTouchCenter(touches: TouchList): IPoint | null {
+  if (touches.length !== 2) {
+    return null;
+  }
+
+  const a = touches[0];
+  const b = touches[1];
+
+  return PointExtensions.initialize((a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2);
+}
+
+function calculateTouchDistance(touches: TouchList): number | null {
+  if (touches.length !== 2) {
+    return null;
+  }
+
+  const a = touches[0];
+  const b = touches[1];
+
+  return Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
+}

projects/f-flow/src/f-draggable/pinch-to-zoom/handler/index.ts

@@ -1,6 +1,4 @@
-export * from './constants';
 export * from './finalize';
+export * from './handler';
 export * from './preparation';
-export * from './utils';
-export * from './pinch-to-zoom-handler';
 export * from './providers';