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

[trangdoan982]

https://www.loom.com/share/253732c148ca4cb39907c564e6b53e77

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.

[graphite-app]

If either the source or target node is deleted between the drop and relation type selection, sourceNode or targetNode will be null/undefined. The code uses nullish coalescing to default to empty strings (sourceNode?.type ?? ""), but doesn't validate that both nodes still exist before proceeding.

This will cause checkConnectionType to return { isDirect: false, isReverse: false } for empty string types, potentially creating the relation with the wrong label (using primary label instead of complement).

Fix: Add validation after getting the shapes:

const sourceNode = editor.getShape(pending.sourceId);
const targetNode = editor.getShape(pending.targetId);
if (!sourceNode || !targetNode || !isDiscourseNodeShape(editor, sourceNode) || !isDiscourseNodeShape(editor, targetNode)) {
  setPending(null);
  sourceNodeRef.current = null;
  return;
}

const { isReverse } = checkConnectionType(
  selectedRelation,
  sourceNode.type,
  targetNode.type,
);

Suggested change

	const sourceNode = editor.getShape(pending.sourceId);
	const targetNode = editor.getShape(pending.targetId);
	const { isReverse } = checkConnectionType(
	selectedRelation,
	sourceNode?.type ?? "",
	targetNode?.type ?? "",
	);
	const sourceNode = editor.getShape(pending.sourceId);
	const targetNode = editor.getShape(pending.targetId);
	if (
	!sourceNode ||
	!targetNode ||
	!isDiscourseNodeShape(editor, sourceNode) ||
	!isDiscourseNodeShape(editor, targetNode)
	) {
	setPending(null);
	sourceNodeRef.current = null;
	return;
	}
	const { isReverse } = checkConnectionType(
	selectedRelation,
	sourceNode.type,
	targetNode.type,
	);

Spotted by Graphite



Is this helpful? React 👍 or 👎 to let us know.