Add drag-and-drop for custom path control points

[Copilot]

Implements interactive dragging for control points in custom-path connections, enabling users to adjust connection paths by dragging handles on the canvas.

Implementation

• Control point handles: New FConnectionDragHandleControlPointComponent renders SVG circles at each control point, displayed only when fType="custom-path" and dragging is enabled
• Drag handler: FDragControlPointDragHandler updates control point positions during drag, following the existing reassign-connection pattern
• Detection: isPointerInsideControlPoint() identifies clicks within 8px radius of control points
• Integration: Hooked into draggable directive's preparation flow, executes before connection reassignment

Usage

export class DiagramComponent {
  controlPoints = [
    { x: 100, y: 50 },
    { x: 100, y: 100 },
    { x: 200, y: 100 }
  ];
}

<f-connection
  fType="custom-path"
  fOutputId="output1"
  fInputId="input1"
  [fControlPoints]="controlPoints"
  [fRadius]="8">
</f-connection>

Control point positions update in the array during drag operations.

Screenshot

Circular handles on connection paths are now draggable control points.

---

Note: Fixed unrelated test assertions using Jest syntax instead of Jasmine (toHaveLength → .length).

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• accounts.google.com
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3748 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-89818281 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9311179911372059866,8697039249773774040,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-89818281 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=89818281 (dns block)
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4047 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-36448914 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,6511647562264871906,7578666704612171257,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• clients2.google.com
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3748 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-89818281 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9311179911372059866,8697039249773774040,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-89818281 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=89818281 (dns block)
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4047 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-36448914 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,6511647562264871906,7578666704612171257,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• clientservices.googleapis.com
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3748 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-89818281 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9311179911372059866,8697039249773774040,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-89818281 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=89818281 (dns block)
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4047 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-36448914 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,6511647562264871906,7578666704612171257,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• download.cypress.io
  • Triggering command: node index.js --exec install (dns block)
• redirector.gvt1.com
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3748 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-89818281 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9311179911372059866,8697039249773774040,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-89818281 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=89818281 (dns block)
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4047 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-36448914 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,6511647562264871906,7578666704612171257,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• safebrowsingohttpgateway.googleapis.com
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3748 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-89818281 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9311179911372059866,8697039249773774040,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-89818281 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=89818281 (dns block)
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4047 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-36448914 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,6511647562264871906,7578666704612171257,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• www.google.com
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3748 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-89818281 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,9311179911372059866,8697039249773774040,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome --user-data-dir=/tmp/karma-89818281 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 --noerrdialogs --ozone-platform=headless --ozone-override-screen-size=800,600 --use-angle=swiftshader-webgl http://localhost:9876/?id=89818281 (dns block)
  • Triggering command: /opt/google/chrome/chrome --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=4047 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-36448914 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,6511647562264871906,7578666704612171257,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Implement drag-and-drop logic for the custom path connection type introduced in PR #250. This feature is intended to make the control points of a CUSTOM_PATH connection draggable. Users should be able to interact with these points intuitively by dragging them to define custom connection paths — much in the manner of the example custom-path-control-points component but enhanced with the drag-and-drop interactivity.

Key Functional Requirements:

1. Ensure that the control points array (fControlPoints) is updated dynamically as the user moves the draggable handles along the canvas.
2. Render a handle for each control point.
3. Use existing drag-and-drop helpers from the library to streamline implementation and maintain integration with the existing codebase.

Expected Flow:

• On user interaction, points should immediately visually reflect changes.
• Maintain compatibility and backward compatibility (as this should not affect older connection types).
• Update README or documentation references as necessary to include usage examples about the dragging behavior.

Supporting Information:
This builds upon the feature branch copilot/add-custom-connection-paths which already adds the CUSTOM_PATH along with configurable rounded-corner inputs.

Sample configuration affected:

export class DiagramComponent {
  controlPoints = [
    { x: 100, y: 50 },
    { x: 100, y: 100 },
    { x: 200, y: 100 }
  ];
}

Ensure thorough testing is performed to check behavior across browsers and devices.

This pull request was created as a result of the following prompt from Copilot chat.

Implement drag-and-drop logic for the custom path connection type introduced in PR #250. This feature is intended to make the control points of a CUSTOM_PATH connection draggable. Users should be able to interact with these points intuitively by dragging them to define custom connection paths — much in the manner of the example custom-path-control-points component but enhanced with the drag-and-drop interactivity.

Key Functional Requirements:

1. Ensure that the control points array (fControlPoints) is updated dynamically as the user moves the draggable handles along the canvas.
2. Render a handle for each control point.
3. Use existing drag-and-drop helpers from the library to streamline implementation and maintain integration with the existing codebase.

Expected Flow:

• On user interaction, points should immediately visually reflect changes.
• Maintain compatibility and backward compatibility (as this should not affect older connection types).
• Update README or documentation references as necessary to include usage examples about the dragging behavior.

Supporting Information:
This builds upon the feature branch copilot/add-custom-connection-paths which already adds the CUSTOM_PATH along with configurable rounded-corner inputs.

Sample configuration affected:

export class DiagramComponent {
  controlPoints = [
    { x: 100, y: 50 },
    { x: 100, y: 100 },
    { x: 200, y: 100 }
  ];
}

Ensure thorough testing is performed to check behavior across browsers and devices.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.