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

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* DRY

* Fix DragHandleOverlay lint warnings

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

* Apply handle padding in viewport space

Matches the Obsidian (eng-1547) pattern: padding is now applied after
pageToViewport conversion so dots remain a fixed screen distance from
the node edge regardless of zoom level.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

* Fix relation direction and label color in drag handle flow

- Show complement label when creating relation in reverse direction
- DRY checkConnectionType into canvasUtils (used by RelationUtil + overlays)
- Remove labelColor override to match DiscourseRelationTool convention

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

* change to tailwind as much as possible

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: trangdoan982

apps/roam/src/components/canvas/DiscourseRelationShape/DiscourseRelationUtil.tsx

@@ -107,6 +107,7 @@ import {
   BaseDiscourseNodeUtil,
   DiscourseNodeShape,
 } from "~/components/canvas/DiscourseNodeUtil";
+import { checkConnectionType } from "~/components/canvas/canvasUtils";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import { AddReferencedNodeType } from "./DiscourseRelationTool";
 import { dispatchToastEvent } from "~/components/canvas/ToastListener";
@@ -1705,15 +1706,7 @@ export class BaseDiscourseRelationUtil extends ShapeUtil<DiscourseRelationShape>
     sourceNodeType: string,
     targetNodeType: string,
   ): { isDirect: boolean; isReverse: boolean } {
-    const isDirect =
-      sourceNodeType === relation.source &&
-      targetNodeType === relation.destination;
-
-    const isReverse =
-      sourceNodeType === relation.destination &&
-      targetNodeType === relation.source;
-
-    return { isDirect, isReverse };
+    return checkConnectionType(relation, sourceNodeType, targetNodeType);
   }
 
   checkConnectionTypeAcrossLabel(

apps/roam/src/components/canvas/Tldraw.tsx

@@ -55,6 +55,8 @@ import {
 } from "tldraw";
 import "tldraw/tldraw.css";
 import tldrawStyles from "./tldrawStyles";
+import { DragHandleOverlay } from "./overlays/DragHandleOverlay";
+import { isDiscourseNodeShape } from "./canvasUtils";
 import getDiscourseNodes, { DiscourseNode } from "~/utils/getDiscourseNodes";
 import getDiscourseRelations, {
   DiscourseRelation,
@@ -533,12 +535,6 @@ const TldrawCanvasShared = ({
     );
   };
 
-  const isDiscourseNodeShape = (
-    shape: TLShape,
-  ): shape is DiscourseNodeShape => {
-    return allNodes.some((node) => node.type === shape.type);
-  };
-
   // Add state for tracking relation creation
   const relationCreationRef = useRef<{
     isCreating: boolean;
@@ -563,7 +559,7 @@ const TldrawCanvasShared = ({
         relationCreationRef.current.toolType = currentToolId;
 
         // If we clicked on a discourse node, record it as the source
-        if (shapeAtPoint && isDiscourseNodeShape(shapeAtPoint)) {
+        if (shapeAtPoint && isDiscourseNodeShape(app, shapeAtPoint)) {
           relationCreationRef.current.sourceShapeId = shapeAtPoint.id;
         }
       }
@@ -588,7 +584,7 @@ const TldrawCanvasShared = ({
           relationCreationRef.current.relationShapeId = relationShape.id;
 
           // Check if we have a target shape
-          if (shapeAtPoint && isDiscourseNodeShape(shapeAtPoint)) {
+          if (shapeAtPoint && isDiscourseNodeShape(app, shapeAtPoint)) {
             posthog.capture("Canvas: Relation Created", {
               relationType: relationShape.type,
               toolType: relationCreationRef.current.toolType || "",
@@ -693,6 +689,7 @@ const TldrawCanvasShared = ({
   const editorComponents: TLEditorComponents = {
     ...defaultEditorComponents,
     OnTheCanvas: ToastListener,
+    InFrontOfTheCanvas: DragHandleOverlay,
   };
   const customUiComponents: TLUiComponents = createUiComponents({
     allNodes,

apps/roam/src/components/canvas/canvasUtils.ts

@@ -0,0 +1,43 @@
+import { Editor, TLShape } from "tldraw";
+import {
+  BaseDiscourseNodeUtil,
+  DiscourseNodeShape,
+} from "~/components/canvas/DiscourseNodeUtil";
+import { discourseContext } from "~/components/canvas/Tldraw";
+
+export const isDiscourseNodeShape = (
+  editor: Editor,
+  shape: TLShape,
+): shape is DiscourseNodeShape => {
+  try {
+    return editor.getShapeUtil(shape) instanceof BaseDiscourseNodeUtil;
+  } catch {
+    return false;
+  }
+};
+
+export const getAllRelations = () =>
+  Object.values(discourseContext.relations).flat();
+
+export const checkConnectionType = (
+  relation: { source: string; destination: string },
+  sourceNodeType: string,
+  targetNodeType: string,
+): { isDirect: boolean; isReverse: boolean } => ({
+  isDirect:
+    sourceNodeType === relation.source &&
+    targetNodeType === relation.destination,
+  isReverse:
+    sourceNodeType === relation.destination &&
+    targetNodeType === relation.source,
+});
+
+export const hasValidRelationTypes = (
+  sourceNodeType: string,
+  targetNodeType: string,
+): boolean =>
+  getAllRelations().some(
+    (r) =>
+      (r.source === sourceNodeType && r.destination === targetNodeType) ||
+      (r.source === targetNodeType && r.destination === sourceNodeType),
+  );