feat(connection): implement waypoints management with drag-and-drop support

- Added FConnectionWaypoints component for managing waypoints
- Created HTML template for rendering waypoints and candidates
- Implemented methods for inserting, selecting, moving, and removing waypoints
- Introduced findExistingWaypoint utility for waypoint detection
- Updated moveConnectionWaypointHandler to support waypoint manipulation

Author: shuzarevich

projects/f-flow/src/f-connection-v2/components/connection-control-points/f-connection-control-points.html

@@ -0,0 +1,24 @@
+@if (visibility()) {
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <g>
+      @for (candidate of candidates(); track $index) {
+        <circle
+          [attr.r]="radius()"
+          class="f-candidate"
+          [attr.cx]="candidate.point.x"
+          [attr.cy]="candidate.point.y"
+        ></circle>
+      }
+      @for (point of waypoints(); track $index) {
+        <circle
+          [attr.r]="radius()"
+          (contextmenu)="$event.preventDefault();"
+          class="f-waypoint"
+          [attr.cx]="point.x"
+          [attr.cy]="point.y"
+        ></circle>
+      }
+    </g>
+  </svg>
+}
+

projects/f-flow/src/f-connection-v2/components/connection-control-points/f-connection-control-points.ts

@@ -0,0 +1,32 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  numberAttribute,
+} from '@angular/core';
+import { F_CONNECTION_WAYPOINTS, FConnectionWaypointsBase } from './models';
+import { IPoint } from '@foblex/2d';
+
+@Component({
+  selector: 'f-connection-waypoints',
+  templateUrl: './f-connection-waypoints.html',
+  styleUrls: ['./f-connection-waypoints.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'f-component f-connection-waypoints',
+  },
+  providers: [{ provide: F_CONNECTION_WAYPOINTS, useExisting: FConnectionWaypoints }],
+})
+export class FConnectionWaypoints extends FConnectionWaypointsBase {
+  public override readonly radius = input(4, {
+    transform: numberAttribute,
+  });
+  public override readonly waypoints = model<IPoint[]>([]);
+
+  public override readonly visibility = input(true, {
+    transform: booleanAttribute,
+  });
+}

projects/f-flow/src/f-connection-v2/components/connection-control-points/models/f-connection-control-points-base.ts

@@ -0,0 +1,55 @@
+import { ElementRef, inject, InjectionToken, ModelSignal, signal, Signal } from '@angular/core';
+import { IWaypointCandidate } from './i-waypoint-candidate';
+import { IPoint, PointExtensions } from '@foblex/2d';
+
+export const F_CONNECTION_WAYPOINTS = new InjectionToken<FConnectionWaypointsBase>(
+  'F_CONNECTION_WAYPOINTS',
+);
+
+export abstract class FConnectionWaypointsBase {
+  public readonly hostElement = inject(ElementRef<SVGElement>).nativeElement;
+
+  public readonly candidates = signal<IWaypointCandidate[]>([]);
+
+  public abstract waypoints: ModelSignal<IPoint[]>;
+  public abstract radius: Signal<number>;
+  public abstract visibility: Signal<boolean>;
+
+  protected _activeIndex = signal(-1)
+  private _pivots: IPoint[] = [];
+
+  public insert(candidate: IWaypointCandidate): void {
+    const current = this.waypoints().slice();
+
+    this._activeIndex.set(Math.max(0, Math.min(candidate.chainIndex, current.length)));
+
+    current.splice(this._activeIndex(), 0, { ...candidate.point });
+    this.waypoints.set(current);
+    this._pivots = current;
+  }
+
+  public select(pivot: IPoint): void {
+    this._activeIndex.set(this.waypoints().findIndex((x) => PointExtensions.isEqual(pivot, x)));
+    this._pivots = this.waypoints();
+  }
+
+  public remove(pivot: IPoint): void {
+    const index = this.waypoints().findIndex((x) => PointExtensions.isEqual(pivot, x));
+    if (index === -1) {
+      throw new Error('Waypoint to delete not found');
+    }
+    const current = this.waypoints().slice();
+    current.splice(index, 1);
+    this.waypoints.set(current);
+    this._activeIndex.set(-1);
+  }
+
+  public move(point: IPoint): void {
+    this._pivots[this._activeIndex()] = { ...point };
+  }
+
+  public update(): void {
+    this.waypoints.set([...this._pivots]);
+   // this._activeIndex.set(-1);
+  }
+}

projects/f-flow/src/f-connection-v2/components/connection-control-points/models/index.ts

@@ -0,0 +1,2 @@
+export * from './f-connection-waypoints-base';
+export * from './i-waypoint-candidate';