[ENG-1546] Relation creation via drag handles (Roam)

[trangdoan982]

Summary

• Adds drag handle dots on selected discourse nodes (4 edge midpoints) for creating relations by dragging to another node
• Shows a relation type dropdown at the midpoint between source/target nodes after a successful drag
• On type selection, creates the relation shape with correct type and bindings, and persists via handleCreateRelationsInRoam (supports both stored/reified relations and legacy triple-based approach)
• Adapted from the Obsidian implementation ([ENG-1547] Relation creation via drag handle (Obsidian) #909) to fit Roam's per-relation-type shape architecture — uses SVG overlay line during drag instead of temporary tldraw shapes

Test plan

• Select a single discourse node — 4 drag handle dots appear at edge midpoints
• Drag from a handle to another discourse node — SVG line follows cursor, turns blue on hover over valid target
• Release on a valid target — relation type dropdown appears at midpoint
• Select a relation type — arrow shape created with correct color/label, relation persisted (check stored relations page or triple blocks)
• Release on empty space — toast warning, no arrow created
• Release on a node with no valid relation types — toast warning, no arrow created
• Escape or click outside dropdown — dropdown dismissed, no arrow created
• Handles reappear when selecting a different discourse node after any flow

🤖 Generated with Claude Code

---

[linear]

ENG-1546 Implement relation creation via drag handles in tldraw (Roam)

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 5 additional findings in Devin Review.

[devin-ai-integration]

🔴 Missing pointer capture causes drag state to get permanently stuck when pointer leaves container

The handlePointerDown handler attaches pointermove and pointerup listeners to containerEl (the tldraw container) without calling setPointerCapture. If the user starts dragging a handle and moves the pointer outside the container boundary before releasing, the pointerup event never fires on containerEl, so onPointerUp never executes. This leaves isDragging = true permanently — the SVG drag line stays visible, the handles disappear, and there is no recovery mechanism (no Escape key handler during drag, no fallback timeout). The user must navigate away and back to restore the canvas.

The existing codebase consistently uses setPointerCapture for similar drag interactions: DiscourseToolPanel.tsx:211 calls target.setPointerCapture(e.pointerId), and Clipboard.tsx:772 does the same.

Prompt for agents

The drag handle overlay attaches pointermove/pointerup listeners to the tldraw container element but does not use setPointerCapture. This means if the pointer leaves the container during a drag and is released outside, the pointerup handler never fires, leaving isDragging=true permanently with no recovery path.

To fix this, follow the existing pattern used in DiscourseToolPanel.tsx (line 211) and Clipboard.tsx (line 772):

1. In handlePointerDown (DragHandleOverlay.tsx around line 124), after stopping propagation, call e.currentTarget.setPointerCapture(e.pointerId) (or use the nativeEvent to capture on the handle element).

2. In onPointerUp, call containerEl.releasePointerCapture(upEvent.pointerId) (or the captured element).

3. Alternatively, attach the pointermove/pointerup listeners to window/document instead of containerEl, which would also ensure events are received even when the pointer leaves the container. If using this approach, remember to remove the window listeners in cleanup.

4. As a belt-and-suspenders measure, consider adding a pointercancel handler that resets drag state, and/or a keydown handler for Escape during drag.

The key files involved are DragHandleOverlay.tsx (handlePointerDown callback, lines 119-243) and the existing pattern examples in DiscourseToolPanel.tsx (lines 208-211, 155-159) and Clipboard.tsx (lines 772, 734).

---

Was this helpful? React with 👍 or 👎 to provide feedback.