feat: implement node rotation functionality

siarheihuzarevich · siarheihuzarevich · commit b58f982244fc · 2025-02-23T18:21:36.000+01:00
diff --git a/projects/f-flow/src/f-draggable/f-draggable.directive.ts b/projects/f-flow/src/f-draggable/f-draggable.directive.ts
@@ -52,6 +52,7 @@ import {
   FNodeDropToGroupFinalizeRequest,
   FNodeDropToGroupPreparationRequest
 } from './f-drop-to-group';
+import { FNodeRotateFinalizeRequest, FNodeRotatePreparationRequest } from './f-node-rotate';
 
 @Directive({
   selector: "f-flow[fDraggable]",
@@ -88,6 +89,9 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
   @Input()
   public fNodeResizeTrigger: FEventTrigger = defaultEventTrigger;
 
+  @Input()
+  public fNodeRotateTrigger: FEventTrigger = defaultEventTrigger;
+
   @Input()
   public fNodeMoveTrigger: FEventTrigger = defaultEventTrigger;
 
@@ -184,6 +188,8 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
 
     this._fMediator.execute<void>(new FNodeResizePreparationRequest(event, this.fNodeResizeTrigger));
 
+    this._fMediator.execute<void>(new FNodeRotatePreparationRequest(event, this.fNodeRotateTrigger));
+
     this._fMediator.execute<void>(new FNodeMovePreparationRequest(event, this.fNodeMoveTrigger));
 
     this._fMediator.execute<void>(new FNodeDropToGroupPreparationRequest(event));
@@ -214,6 +220,8 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
 
     this._fMediator.execute<void>(new FNodeResizeFinalizeRequest(event));
 
+    this._fMediator.execute<void>(new FNodeRotateFinalizeRequest(event));
+
     this._fMediator.execute<void>(new FNodeMoveFinalizeRequest(event));
 
     this._fMediator.execute<void>(new FNodeDropToGroupFinalizeRequest(event));
diff --git a/projects/f-flow/src/f-draggable/f-node-rotate/f-node-rotate.drag-handler.ts b/projects/f-flow/src/f-draggable/f-node-rotate/f-node-rotate.drag-handler.ts
@@ -0,0 +1,76 @@
+import { IPoint, IRect, ITransformModel, PointExtensions } from '@foblex/2d';
+import { IFDragHandler } from '../f-drag-handler';
+import { FNodeBase } from '../../f-node';
+import { FMediator } from '@foblex/mediator';
+import { GetNormalizedElementRectRequest } from '../../domain';
+import { fInject } from '../f-injector';
+import { FDraggableDataContext } from '../f-draggable-data-context';
+import { FComponentsStore } from '../../f-storage';
+
+export class FNodeRotateDragHandler implements IFDragHandler {
+
+  private readonly _fMediator = fInject(FMediator);
+  private readonly _fComponentsStore = fInject(FComponentsStore);
+  private readonly _fDraggableDataContext = fInject(FDraggableDataContext);
+
+  public fEventType = 'node-rotate';
+  public fData: any;
+
+  private _startAngle: number = 0;
+
+  private _fNodeRect!: IRect;
+  private _onDownPoint!: IPoint;
+
+  private get _transform(): ITransformModel {
+    return this._fComponentsStore.fCanvas!.transform;
+  }
+
+  constructor(
+    private _fNode: FNodeBase,
+  ) {
+    this.fData = {
+      fNodeId: _fNode.fId,
+    };
+  }
+
+  public prepareDragSequence(): void {
+    this._onDownPoint = this._calculateDownPoint();
+    this._fNodeRect = this._getOriginalNodeRect();
+    this._startAngle = this._calculateAngleBetweenVectors(this._onDownPoint) - this._fNode.rotate;
+  }
+
+  private _calculateDownPoint(): IPoint {
+    const fCanvasPosition = PointExtensions.sum(this._transform.position, this._transform.scaledPosition);
+    return PointExtensions.sub(this._fDraggableDataContext.onPointerDownPosition, fCanvasPosition);
+  }
+
+  private _calculateAngleBetweenVectors(position: IPoint): number {
+    return Math.atan2(
+      position.y - this._fNodeRect.gravityCenter.y,
+      position.x - this._fNodeRect.gravityCenter.x
+    ) * (180 / Math.PI);
+  }
+
+  private _getOriginalNodeRect(): IRect {
+    return this._fMediator.execute<IRect>(new GetNormalizedElementRectRequest(this._fNode.hostElement, false));
+  }
+
+  public onPointerMove(difference: IPoint): void {
+    const position = PointExtensions.sum(this._onDownPoint, difference);
+    const angle = this._calculateAngleBetweenVectors(position) - this._startAngle!;
+    this._updateNodeRendering(this._normalizeAngle(angle));
+  }
+
+  private _normalizeAngle(angle: number): number {
+    return ((angle + 180) % 360) - 180;
+  }
+
+  private _updateNodeRendering(angle: number): void {
+    this._fNode.updateRotate(angle);
+    this._fNode.redraw();
+  }
+
+  public onPointerUp(): void {
+    this._fNode.rotateChange.emit(this._fNode.rotate);
+  }
+}
diff --git a/projects/f-flow/src/f-draggable/f-node-rotate/index.ts b/projects/f-flow/src/f-draggable/f-node-rotate/index.ts
@@ -0,0 +1,7 @@
+export * from './rotate-finalize';
+
+export * from './rotate-preparation';
+
+export * from './f-node-rotate.drag-handler';
+
+export * from './providers';
diff --git a/projects/f-flow/src/f-draggable/f-node-rotate/providers.ts b/projects/f-flow/src/f-draggable/f-node-rotate/providers.ts
@@ -0,0 +1,9 @@
+import { FNodeRotateFinalizeExecution } from './rotate-finalize';
+import { FNodeRotatePreparationExecution } from './rotate-preparation';
+
+export const NODE_ROTATE_PROVIDERS = [
+
+  FNodeRotateFinalizeExecution,
+
+  FNodeRotatePreparationExecution,
+];
diff --git a/projects/f-flow/src/f-draggable/f-node-rotate/rotate-finalize/f-node-rotate-finalize.execution.ts b/projects/f-flow/src/f-draggable/f-node-rotate/rotate-finalize/f-node-rotate-finalize.execution.ts
@@ -0,0 +1,27 @@
+import { inject, Injectable } from '@angular/core';
+import { FNodeRotateFinalizeRequest } from './f-node-rotate-finalize.request';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { FDraggableDataContext } from '../../f-draggable-data-context';
+import { FNodeRotateDragHandler } from '../f-node-rotate.drag-handler';
+
+@Injectable()
+@FExecutionRegister(FNodeRotateFinalizeRequest)
+export class FNodeRotateFinalizeExecution implements IExecution<FNodeRotateFinalizeRequest, void> {
+
+  private readonly _fDraggableDataContext = inject(FDraggableDataContext);
+
+  public handle(request: FNodeRotateFinalizeRequest): void {
+    if (!this._isValid()) {
+      return;
+    }
+    this._fDraggableDataContext.draggableItems.forEach((x) => {
+      x.onPointerUp?.();
+    });
+  }
+
+  private _isValid(): boolean {
+    return this._fDraggableDataContext.draggableItems.some((x) =>
+      x instanceof FNodeRotateDragHandler
+    );
+  }
+}
diff --git a/projects/f-flow/src/f-draggable/f-node-rotate/rotate-finalize/f-node-rotate-finalize.request.ts b/projects/f-flow/src/f-draggable/f-node-rotate/rotate-finalize/f-node-rotate-finalize.request.ts
@@ -0,0 +1,9 @@
+import { IPointerEvent } from '@foblex/drag-toolkit';
+
+export class FNodeRotateFinalizeRequest {
+
+  constructor(
+    public event: IPointerEvent
+  ) {
+  }
+}
diff --git a/projects/f-flow/src/f-draggable/f-node-rotate/rotate-finalize/index.ts b/projects/f-flow/src/f-draggable/f-node-rotate/rotate-finalize/index.ts
@@ -0,0 +1,3 @@
+export * from './f-node-rotate-finalize.execution';
+
+export * from './f-node-rotate-finalize.request';
diff --git a/projects/f-flow/src/f-draggable/f-node-rotate/rotate-preparation/f-node-rotate-preparation.execution.ts b/projects/f-flow/src/f-draggable/f-node-rotate/rotate-preparation/f-node-rotate-preparation.execution.ts
@@ -0,0 +1,77 @@
+import { inject, Injectable } from '@angular/core';
+import { FNodeRotatePreparationRequest } from './f-node-rotate-preparation.request';
+import { ITransformModel, Point } from '@foblex/2d';
+import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
+import { FComponentsStore } from '../../../f-storage';
+import { FDraggableDataContext } from '../../f-draggable-data-context';
+import {
+  isValidEventTrigger,
+  SelectAndUpdateNodeLayerRequest,
+} from '../../../domain';
+import { FNodeBase, isRotateHandle } from '../../../f-node';
+import { FNodeRotateDragHandler } from '../f-node-rotate.drag-handler';
+
+@Injectable()
+@FExecutionRegister(FNodeRotatePreparationRequest)
+export class FNodeRotatePreparationExecution implements IExecution<FNodeRotatePreparationRequest, void> {
+
+  private readonly _fMediator = inject(FMediator);
+  private readonly _fComponentsStore = inject(FComponentsStore);
+  private readonly _fDraggableDataContext = inject(FDraggableDataContext);
+
+  private get _transform(): ITransformModel {
+    return this._fComponentsStore.fCanvas!.transform;
+  }
+
+  private get _fHost(): HTMLElement {
+    return this._fComponentsStore.fFlow!.hostElement;
+  }
+
+  private _fNode: FNodeBase | undefined;
+
+  public handle(request: FNodeRotatePreparationRequest): void {
+    if(!this._isValid(request) || !this._isValidTrigger(request)) {
+      return;
+    }
+
+    this._selectAndUpdateNodeLayer();
+
+    this._fDraggableDataContext.onPointerDownScale = this._transform.scale;
+    this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
+      .elementTransform(this._fHost).div(this._transform.scale);
+
+    this._fDraggableDataContext.draggableItems = [
+      new FNodeRotateDragHandler(this._fNode!)
+    ];
+  }
+
+  private _isValid(request: FNodeRotatePreparationRequest): boolean {
+    return this._fDraggableDataContext.isEmpty()
+      && isRotateHandle(request.event.targetElement)
+      && this._isNodeCanBeDragged(this._getNode(request.event.targetElement));
+  }
+
+  private _isNodeCanBeDragged(fNode?: FNodeBase): boolean {
+    return !!fNode && !fNode.fDraggingDisabled;
+  }
+
+  private _getNode(element: HTMLElement): FNodeBase | undefined {
+    this._fNode = this._fComponentsStore
+      .fNodes.find(x => x.isContains(element));
+    return this._fNode;
+  }
+
+  private _isValidTrigger(request: FNodeRotatePreparationRequest): boolean {
+    return isValidEventTrigger(request.event.originalEvent, request.fTrigger);
+  }
+
+  private _selectAndUpdateNodeLayer() {
+    this._fMediator.execute(
+      new SelectAndUpdateNodeLayerRequest(this._fNode!)
+    );
+  }
+
+  // private _getHandleType(element: HTMLElement): keyof typeof EFResizeHandleType {
+  //   return getDataAttrValueFromClosestElementWithClass(element, 'fResizeHandleType', '.f-resize-handle');
+  // }
+}
diff --git a/projects/f-flow/src/f-draggable/f-node-rotate/rotate-preparation/f-node-rotate-preparation.request.ts b/projects/f-flow/src/f-draggable/f-node-rotate/rotate-preparation/f-node-rotate-preparation.request.ts
@@ -0,0 +1,11 @@
+import { IPointerEvent } from '@foblex/drag-toolkit';
+import { FEventTrigger } from '../../../domain';
+
+export class FNodeRotatePreparationRequest {
+
+  constructor(
+    public event: IPointerEvent,
+    public fTrigger: FEventTrigger
+  ) {
+  }
+}
diff --git a/projects/f-flow/src/f-draggable/f-node-rotate/rotate-preparation/index.ts b/projects/f-flow/src/f-draggable/f-node-rotate/rotate-preparation/index.ts
@@ -0,0 +1,3 @@
+export * from './f-node-rotate-preparation.execution';
+
+export * from './f-node-rotate-preparation.request';
diff --git a/projects/f-flow/src/f-draggable/index.ts b/projects/f-flow/src/f-draggable/index.ts
@@ -12,6 +12,8 @@ export * from './f-node-move';
 
 export * from './f-node-resize';
 
+export * from './f-node-rotate';
+
 export * from './f-single-select';
 
 export * from './f-draggable.directive';
diff --git a/projects/f-flow/src/f-draggable/providers.ts b/projects/f-flow/src/f-draggable/providers.ts
@@ -8,6 +8,7 @@ import { F_EXTERNAL_ITEM_DRAG_AND_DROP_PROVIDERS } from '../f-external-item';
 import { F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS } from '../f-selection-area';
 import { DRAG_AND_DROP_COMMON_PROVIDERS } from './domain';
 import { NODE_DROP_TO_GROUP_PROVIDERS } from './f-drop-to-group';
+import { NODE_ROTATE_PROVIDERS } from './f-node-rotate';
 
 export const F_DRAGGABLE_PROVIDERS = [
 
@@ -27,6 +28,8 @@ export const F_DRAGGABLE_PROVIDERS = [
 
   ...NODE_RESIZE_PROVIDERS,
 
+  ...NODE_ROTATE_PROVIDERS,
+
   ...F_SELECTION_AREA_DRAG_AND_DROP_PROVIDERS,
 
   ...F_MINIMAP_DRAG_AND_DROP_PROVIDERS
diff --git a/projects/f-flow/src/f-node/f-group.directive.ts b/projects/f-flow/src/f-node/f-group.directive.ts
@@ -53,7 +53,24 @@ export class FGroupDirective extends FNodeBase
     return this._position;
   }
   @Output('fGroupPositionChange')
-  public override positionChange: EventEmitter<IPoint> = new EventEmitter<IPoint>();
+  public override positionChange = new EventEmitter<IPoint>();
+
+
+  @Input('fGroupRotate')
+  public override set rotate(value: number) {
+    if(this._rotate !== value) {
+      this._rotate = value;
+      this.redraw();
+      this.refresh();
+    }
+  }
+  public override get rotate(): number {
+    return this._rotate;
+  }
+
+  @Output('fGroupRotateChange')
+  public override rotateChange = new EventEmitter<number>();
+
 
   @Input('fGroupSize')
   public override set size(value: ISize) {
@@ -67,7 +84,7 @@ export class FGroupDirective extends FNodeBase
     return this._size!;
   }
   @Output('fGroupSizeChange')
-  public override sizeChange: EventEmitter<IRect> = new EventEmitter<IRect>();
+  public override sizeChange = new EventEmitter<IRect>();
 
   @Input({ alias: 'fGroupDraggingDisabled', transform: booleanAttribute })
   public override fDraggingDisabled: boolean = false;
diff --git a/projects/f-flow/src/f-node/f-node-base.ts b/projects/f-flow/src/f-node/f-node-base.ts
@@ -10,12 +10,12 @@ import { FChannel } from '../reactivity';
 export const F_NODE = new InjectionToken<FNodeBase>('F_NODE');
 
 const MIXIN_BASE = mixinChangeSelection(
-    class {
-      constructor(
-        public hostElement: HTMLElement
-      ) {
-      }
-    });
+  class {
+    constructor(
+      public hostElement: HTMLElement
+    ) {
+    }
+  });
 
 export abstract class FNodeBase extends MIXIN_BASE implements ISelectable, IHasHostElement {
 
@@ -33,6 +33,13 @@ export abstract class FNodeBase extends MIXIN_BASE implements ISelectable, IHasH
   protected _position: IPoint = PointExtensions.initialize();
 
 
+  public abstract rotateChange: EventEmitter<number>;
+
+  public abstract rotate: number;
+
+  protected _rotate: number = 0;
+
+
   public abstract sizeChange: EventEmitter<IRect>;
 
   public abstract size: ISize;
@@ -66,13 +73,17 @@ export abstract class FNodeBase extends MIXIN_BASE implements ISelectable, IHasH
       this.setStyle('height', '' + this.size.height + 'px');
     }
 
-    this.setStyle('transform', `translate(${ this.position.x }px,${ this.position.y }px)`);
+    this.setStyle('transform', `translate(${ this.position.x }px,${ this.position.y }px) rotate(${ this.rotate }deg)`);
   }
 
   public updatePosition(position: IPoint): void {
     this._position = position;
   }
 
+  public updateRotate(rotate: number): void {
+    this._rotate = rotate;
+  }
+
   public updateSize(value: ISize): void {
     this._size = value;
   }
diff --git a/projects/f-flow/src/f-node/f-node.directive.ts b/projects/f-flow/src/f-node/f-node.directive.ts
diff --git a/projects/f-flow/src/f-node/f-rotate-handle/f-rotate-handle.directive.ts b/projects/f-flow/src/f-node/f-rotate-handle/f-rotate-handle.directive.ts
diff --git a/projects/f-flow/src/f-node/f-rotate-handle/index.ts b/projects/f-flow/src/f-node/f-rotate-handle/index.ts
diff --git a/projects/f-flow/src/f-node/f-rotate-handle/is-rotate-handle.ts b/projects/f-flow/src/f-node/f-rotate-handle/is-rotate-handle.ts
diff --git a/projects/f-flow/src/f-node/providers.ts b/projects/f-flow/src/f-node/providers.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export * from './f-node-rotate-finalize.execution';`
	`2`	`+`
	`3`	`+export * from './f-node-rotate-finalize.request';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export * from './f-node-rotate-preparation.execution';`
	`2`	`+`
	`3`	`+export * from './f-node-rotate-preparation.request';`