Skip to content

Expand node magnet area to full interior; click selects, drag draws edge#12

Merged
jpmccu merged 1 commit into
mainfrom
copilot/update-node-magnet-area
May 6, 2026
Merged

Expand node magnet area to full interior; click selects, drag draws edge#12
jpmccu merged 1 commit into
mainfrom
copilot/update-node-magnet-area

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 6, 2026

Clicking anywhere in the node ring immediately started edge drawing, making it hard to select nodes without accidentally triggering the draw mode. The magnet area also didn't cover the node interior.

Changes

  • isInNodeOrRing — new helper that matches the full outer ellipse (ring + interior), vs isInRing which only matched the outer band
  • updatePointerEvents — now enables pointer-events for the entire node area via isInNodeOrRing; cursor stays crosshair in the ring band and switches to default in the interior as a visual hint
  • _ehStartDrawing — replaced immediate _eh.start() call with drag-threshold detection:
    • mousedown records start position and installs temporary window listeners
    • cursor moves > EH_DRAG_THRESHOLD (4 px) → edge drawing starts
    • mouseup without crossing the threshold → node is selected (Shift/Ctrl/Meta multi-select honoured); handle is removed so Cytoscape can handle a follow-up drag to reposition the node
  • EH_DRAG_THRESHOLD = 4 — extracted as a module-level constant
  • _ehPendingMousemove / _ehPendingMouseup — track the in-flight temporary listeners; cleaned up in removeHandle(), _destroyEdgeHandle(), and at the top of _ehStartDrawing to guard against missed mouseup events

…aw edge, click to select

- Add EH_DRAG_THRESHOLD module-level constant (4px)
- Add isInNodeOrRing() helper that matches the full outer ellipse (ring + interior)
- updatePointerEvents now enables pointer-events for the entire node area
  using isInNodeOrRing; crosshair cursor only in the ring band, default in interior
- Rewrite _ehStartDrawing with drag-threshold detection:
  - mousedown: record start position, install temp mousemove/mouseup on window
  - drag (> 4px): call _eh.start() to begin edge drawing
  - click (no drag): select the node + removeHandle() so Cytoscape can move it
- Add _ehPendingMousemove/_ehPendingMouseup instance fields; cleaned up in
  removeHandle(), _destroyEdgeHandle(), and at the top of _ehStartDrawing
  to guard against missed mouseup events

Agent-Logs-Url: https://github.com/jpmccu/boxes/sessions/9dfbac6a-f8ad-4e4f-ba47-bd849f2c90a7

Co-authored-by: jpmccu <602385+jpmccu@users.noreply.github.com>
@jpmccu jpmccu marked this pull request as ready for review May 6, 2026 17:24
@jpmccu jpmccu merged commit f056541 into main May 6, 2026
2 checks passed
@jpmccu jpmccu deleted the copilot/update-node-magnet-area branch May 6, 2026 17:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants