feat: add drag-and-drop functionality for custom path control points

Copilot · siarheihuzarevich · Copilot · commit 408d006053fc · 2025-11-11T11:34:06.000Z
Co-authored-by: siarheihuzarevich &lt;13272876+siarheihuzarevich@users.noreply.github.com&gt;
diff --git a/projects/f-flow/src/f-connection/common/f-connection-base.ts b/projects/f-flow/src/f-connection/common/f-connection-base.ts
@@ -130,6 +130,11 @@ export abstract class FConnectionBase
 
   private _penultimatePoint = PointExtensions.initialize();
   private _secondPoint = PointExtensions.initialize();
+  private _pathPoints: IPoint[] = [];
+
+  public get pathPoints(): IPoint[] {
+    return this._pathPoints;
+  }
 
   protected constructor() {
     super(inject(ElementRef<HTMLElement>).nativeElement);
@@ -153,6 +158,7 @@ export abstract class FConnectionBase
     this.path = pathResult.path;
     this._penultimatePoint = pathResult.penultimatePoint || point1;
     this._secondPoint = pathResult.secondPoint || point2;
+    this._pathPoints = pathResult.points || [];
 
     new ConnectionContentLayoutEngine().layout(this.line, pathResult, this._contents());
 
diff --git a/projects/f-flow/src/f-connection/common/f-drag-handle/f-connection-drag-handle-control-point.component.ts b/projects/f-flow/src/f-connection/common/f-drag-handle/f-connection-drag-handle-control-point.component.ts
@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  input,
+} from '@angular/core';
+import { IPoint } from '@foblex/2d';
+import { IHasHostElement } from '../../../i-has-host-element';
+import { F_CSS_CLASS } from '../../../domain/css-cls';
+
+@Component({
+  selector: 'circle[f-connection-drag-handle-control-point]',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'class',
+    '[attr.data-index]': 'index()',
+  },
+})
+export class FConnectionDragHandleControlPointComponent implements IHasHostElement {
+  private readonly _elementReference = inject(ElementRef);
+
+  protected readonly class: string = F_CSS_CLASS.CONNECTION.DRAG_HANDLE;
+
+  public readonly index = input.required<number>();
+
+  public point!: IPoint;
+
+  public get hostElement(): SVGCircleElement {
+    return this._elementReference.nativeElement;
+  }
+
+  public redraw(point: IPoint): void {
+    this.point = point;
+    this.hostElement.setAttribute('cx', point.x.toString());
+    this.hostElement.setAttribute('cy', point.y.toString());
+  }
+}
diff --git a/projects/f-flow/src/f-connection/common/f-drag-handle/index.ts b/projects/f-flow/src/f-connection/common/f-drag-handle/index.ts
@@ -1,3 +1,5 @@
 export * from './f-connection-drag-handle-start.component';
 
 export * from './f-connection-drag-handle-end.component';
+
+export * from './f-connection-drag-handle-control-point.component';
diff --git a/projects/f-flow/src/f-connection/f-connection/f-connection.component.html b/projects/f-flow/src/f-connection/f-connection/f-connection.component.html
@@ -10,6 +10,11 @@
         <circle f-connection-drag-handle-start r="8"></circle>
       }
       <circle f-connection-drag-handle-end r="8"></circle>
+      @if (fType === 'custom-path' && !fDraggingDisabled()) {
+        @for (point of controlPointsToRender(); track $index) {
+          <circle f-connection-drag-handle-control-point r="8" [index]="$index"></circle>
+        }
+      }
     </g>
     @if (fText) {
       <text f-connection-text></text>
diff --git a/projects/f-flow/src/f-connection/f-connection/f-connection.component.ts b/projects/f-flow/src/f-connection/f-connection/f-connection.component.ts
@@ -2,15 +2,22 @@ import {
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
+  computed,
   inject,
   input,
   Input,
   numberAttribute,
   OnChanges,
   OnDestroy,
   OnInit,
+  viewChildren,
 } from '@angular/core';
-import { EFConnectionBehavior, EFConnectionConnectableSide, EFConnectionType } from '../common';
+import {
+  EFConnectionBehavior,
+  EFConnectionConnectableSide,
+  EFConnectionType,
+  FConnectionDragHandleControlPointComponent,
+} from '../common';
 import { NotifyDataChangedRequest } from '../../f-storage';
 import { F_CONNECTION } from '../common/f-connection.injection-token';
 //TODO: Need to deal with cyclic dependencies, since in some cases an error occurs when importing them ../common
@@ -99,6 +106,37 @@ export class FConnectionComponent extends FConnectionBase implements OnInit, OnC
 
   private readonly _mediator = inject(FMediator);
 
+  public readonly fDragHandleControlPoints = viewChildren(
+    FConnectionDragHandleControlPointComponent,
+  );
+
+  public readonly controlPointsToRender = computed(() => {
+    // Only render control points for custom-path connections
+    if (this.fType !== EFConnectionType.CUSTOM_PATH) {
+      return [];
+    }
+    return this.fControlPoints;
+  });
+
+  public override redraw(): void {
+    super.redraw();
+    // Redraw control point handles for custom-path connections
+    if (this.fType === EFConnectionType.CUSTOM_PATH) {
+      this._redrawControlPointHandles();
+    }
+  }
+
+  private _redrawControlPointHandles(): void {
+    const handles = this.fDragHandleControlPoints();
+    const controlPoints = this.fControlPoints;
+
+    handles.forEach((handle, index) => {
+      if (index < controlPoints.length) {
+        handle.redraw(controlPoints[index]);
+      }
+    });
+  }
+
   public ngOnInit(): void {
     this._mediator.execute(new AddConnectionToStoreRequest(this));
   }
diff --git a/projects/f-flow/src/f-connection/providers.ts b/projects/f-flow/src/f-connection/providers.ts
@@ -1,6 +1,10 @@
 import {
-  FConnectionDragHandleEndComponent, FConnectionDragHandleStartComponent,
-  FConnectionGradientComponent, FConnectionPathComponent, FConnectionSelectionComponent,
+  FConnectionDragHandleEndComponent,
+  FConnectionDragHandleStartComponent,
+  FConnectionDragHandleControlPointComponent,
+  FConnectionGradientComponent,
+  FConnectionPathComponent,
+  FConnectionSelectionComponent,
   FConnectionTextComponent,
   FConnectionTextPathDirective,
 } from './common';
@@ -16,6 +20,7 @@ export const F_CONNECTION_PROVIDERS = [
   FConnectionTextPathDirective,
   FConnectionDragHandleStartComponent,
   FConnectionDragHandleEndComponent,
+  FConnectionDragHandleControlPointComponent,
   FConnectionGradientComponent,
   FConnectionPathComponent,
   FConnectionSelectionComponent,
diff --git a/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/drag-control-point-preparation/f-drag-control-point-preparation.execution.ts b/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/drag-control-point-preparation/f-drag-control-point-preparation.execution.ts
@@ -0,0 +1,100 @@
+import { inject, Injectable, Injector } from '@angular/core';
+import { FDragControlPointPreparationRequest } from './f-drag-control-point-preparation.request';
+import { IPoint, ITransformModel, Point } from '@foblex/2d';
+import { FComponentsStore } from '../../../../f-storage';
+import { FDraggableDataContext } from '../../../f-draggable-data-context';
+import { isValidEventTrigger, UpdateItemAndChildrenLayersRequest } from '../../../../domain';
+import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
+import { FConnectionBase } from '../../../../f-connection';
+import { FDragControlPointDragHandler } from '../f-drag-control-point.drag-handler';
+import { isPointerInsideControlPoint } from './is-pointer-inside-control-point';
+
+@Injectable()
+@FExecutionRegister(FDragControlPointPreparationRequest)
+export class FDragControlPointPreparationExecution
+  implements IExecution<FDragControlPointPreparationRequest, void>
+{
+  private readonly _fMediator = inject(FMediator);
+  private readonly _store = inject(FComponentsStore);
+  private readonly _dragContext = inject(FDraggableDataContext);
+  private readonly _injector = inject(Injector);
+
+  private _fConnection: FConnectionBase | undefined;
+  private _controlPointIndex: number = -1;
+
+  private get _transform(): ITransformModel {
+    return this._store.fCanvas!.transform;
+  }
+
+  private get _fHost(): HTMLElement {
+    return this._store.fFlow!.hostElement;
+  }
+
+  private get _fConnections(): FConnectionBase[] {
+    return this._store.fConnections;
+  }
+
+  public handle(request: FDragControlPointPreparationRequest): void {
+    const position = this._getPointInFlow(request);
+    if (!this._isValid(position) || !this._isValidTrigger(request)) {
+      return;
+    }
+
+    this._dragContext.onPointerDownScale = this._transform.scale;
+    this._dragContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
+      .elementTransform(this._fHost)
+      .div(this._transform.scale);
+
+    this._dragContext.draggableItems = [
+      new FDragControlPointDragHandler(
+        this._injector,
+        this._fConnection!,
+        this._controlPointIndex,
+      ),
+    ];
+
+    setTimeout(() => this._updateConnectionLayer());
+  }
+
+  private _isValid(position: IPoint): boolean {
+    const result = this._getConnectionWithControlPoint(position);
+    this._fConnection = result.connection;
+    this._controlPointIndex = result.controlPointIndex;
+
+    return !!this._fConnection && this._controlPointIndex >= 0 && !this._dragContext.draggableItems.length;
+  }
+
+  private _isValidTrigger(request: FDragControlPointPreparationRequest): boolean {
+    return isValidEventTrigger(request.event.originalEvent, request.fTrigger);
+  }
+
+  private _getPointInFlow(request: FDragControlPointPreparationRequest): IPoint {
+    return Point.fromPoint(request.event.getPosition())
+      .elementTransform(this._fHost)
+      .sub(this._transform.scaledPosition)
+      .sub(this._transform.position)
+      .div(this._transform.scale);
+  }
+
+  private _getConnectionWithControlPoint(
+    position: IPoint,
+  ): { connection: FConnectionBase | undefined; controlPointIndex: number } {
+    for (const connection of this._fConnections) {
+      const result = isPointerInsideControlPoint(connection, position);
+      if (result.isInside) {
+        return { connection, controlPointIndex: result.controlPointIndex };
+      }
+    }
+
+    return { connection: undefined, controlPointIndex: -1 };
+  }
+
+  private _updateConnectionLayer(): void {
+    this._fMediator.execute<void>(
+      new UpdateItemAndChildrenLayersRequest(
+        this._fConnection!,
+        this._store.fCanvas!.fConnectionsContainer().nativeElement,
+      ),
+    );
+  }
+}
diff --git a/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/drag-control-point-preparation/f-drag-control-point-preparation.request.ts b/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/drag-control-point-preparation/f-drag-control-point-preparation.request.ts
@@ -0,0 +1,9 @@
+import { FEventTrigger } from '../../../../domain';
+import { IPointerEvent } from '../../../../drag-toolkit';
+
+export class FDragControlPointPreparationRequest {
+  constructor(
+    public event: IPointerEvent,
+    public fTrigger: FEventTrigger,
+  ) {}
+}
diff --git a/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/drag-control-point-preparation/index.ts b/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/drag-control-point-preparation/index.ts
@@ -0,0 +1,3 @@
+export * from './f-drag-control-point-preparation.request';
+export * from './f-drag-control-point-preparation.execution';
+export * from './is-pointer-inside-control-point';
diff --git a/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/drag-control-point-preparation/is-pointer-inside-control-point.ts b/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/drag-control-point-preparation/is-pointer-inside-control-point.ts
@@ -0,0 +1,28 @@
+import { IPoint } from '@foblex/2d';
+import { FConnectionBase } from '../../../../f-connection';
+import { EFConnectionType } from '../../../../f-connection/common';
+
+export function isPointerInsideControlPoint(
+  connection: FConnectionBase,
+  position: IPoint,
+): { isInside: boolean; controlPointIndex: number } {
+  // Only check for custom-path connections
+  if (connection.fType !== EFConnectionType.CUSTOM_PATH || connection.fDraggingDisabled()) {
+    return { isInside: false, controlPointIndex: -1 };
+  }
+
+  const controlPoints = connection.fControlPoints;
+
+  // Check each control point
+  for (let i = 0; i < controlPoints.length; i++) {
+    if (_isPointInsideCircle(position, controlPoints[i])) {
+      return { isInside: true, controlPointIndex: i };
+    }
+  }
+
+  return { isInside: false, controlPointIndex: -1 };
+}
+
+function _isPointInsideCircle(point: IPoint, circleCenter: IPoint): boolean {
+  return (point.x - circleCenter.x) ** 2 + (point.y - circleCenter.y) ** 2 <= 8 ** 2;
+}
diff --git a/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/f-drag-control-point.drag-handler.ts b/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/f-drag-control-point.drag-handler.ts
@@ -0,0 +1,56 @@
+import { IPoint, PointExtensions } from '@foblex/2d';
+import { IFDragHandler } from '../../f-drag-handler';
+import { FConnectionBase } from '../../../f-connection';
+import { Injector } from '@angular/core';
+import { FComponentsStore } from '../../../f-storage';
+import { FDragHandlerResult } from '../../f-drag-handler';
+
+export class FDragControlPointDragHandler implements IFDragHandler {
+  public fEventType = 'drag-control-point';
+  public fData: unknown;
+
+  private readonly _result: FDragHandlerResult<any>;
+  private readonly _store: FComponentsStore;
+  private readonly _startPosition: IPoint;
+
+  constructor(
+    private readonly _injector: Injector,
+    private readonly _connection: FConnectionBase,
+    private readonly _controlPointIndex: number,
+  ) {
+    this._result = _injector.get(FDragHandlerResult);
+    this._store = _injector.get(FComponentsStore);
+
+    this.fData = {
+      fConnectionId: this._connection.fId(),
+      controlPointIndex: this._controlPointIndex,
+    };
+
+    // Store the initial position of the control point
+    this._startPosition = { ...this._connection.fControlPoints[this._controlPointIndex] };
+  }
+
+  public prepareDragSequence(): void {
+    // Mark the connection as being edited
+    this._connection.hostElement.classList.add('control-point-dragging');
+  }
+
+  public onPointerMove(difference: IPoint): void {
+    // Calculate the new position based on the difference
+    const newPosition = PointExtensions.sum(this._startPosition, difference);
+
+    // Update the control point in place
+    this._connection.fControlPoints[this._controlPointIndex] = newPosition;
+
+    // Trigger a redraw of the connection
+    this._store.fCanvas?.redraw();
+  }
+
+  public onPointerUp(): void {
+    // Remove the dragging class
+    this._connection.hostElement.classList.remove('control-point-dragging');
+
+    // Emit the connection change event if needed
+    this._store.fCanvas?.emitCanvasChangeEvent();
+  }
+}
diff --git a/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/index.ts b/projects/f-flow/src/f-draggable/f-connection/f-drag-control-point/index.ts
@@ -0,0 +1,2 @@
+export * from './f-drag-control-point.drag-handler';
+export * from './drag-control-point-preparation';
diff --git a/projects/f-flow/src/f-draggable/f-connection/index.ts b/projects/f-flow/src/f-draggable/f-connection/index.ts
@@ -2,4 +2,6 @@ export * from './f-create-connection';
 
 export * from './f-reassign-connection';
 
+export * from './f-drag-control-point';
+
 export * from './providers';
diff --git a/projects/f-flow/src/f-draggable/f-connection/providers.ts b/projects/f-flow/src/f-draggable/f-connection/providers.ts
@@ -10,6 +10,7 @@ import {
   FReassignConnectionFinalizeExecution,
   FReassignConnectionPreparationExecution,
 } from './f-reassign-connection';
+import { FDragControlPointPreparationExecution } from './f-drag-control-point';
 
 export const CONNECTIONS_PROVIDERS = [
   FCreateConnectionFinalizeExecution,
@@ -27,4 +28,6 @@ export const CONNECTIONS_PROVIDERS = [
   FReassignConnectionFinalizeExecution,
 
   FReassignConnectionPreparationExecution,
+
+  FDragControlPointPreparationExecution,
 ];
diff --git a/projects/f-flow/src/f-draggable/f-draggable.directive.ts b/projects/f-flow/src/f-draggable/f-draggable.directive.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export * from './f-drag-control-point-preparation.request';`
	`2`	`+export * from './f-drag-control-point-preparation.execution';`
	`3`	`+export * from './is-pointer-inside-control-point';`