[ENG-1547] Relation creation via drag handle (Obsidian) (#909)

* drag handle works

* fix: reset isDragging on early returns and use e.currentTarget for hover

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

* format and lint

* format

* address PR comment + fix z-position

* some updates naming etc

* address PR comments

* dry as much as possible

* further DRY and styling fixes

* prettier

* clean dead code

---------

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

Author: trangdoan982

apps/obsidian/src/components/canvas/DiscourseRelationTool.ts

@@ -2,9 +2,12 @@ import { StateNode, TLEventHandlers, TLStateNodeConstructor } from "tldraw";
 import { createShapeId } from "tldraw";
 import type { TFile } from "obsidian";
 import DiscourseGraphPlugin from "~/index";
-import { getRelationTypeById, isAcceptedSchema } from "~/utils/typeUtils";
+import { getNodeTypeById, getRelationTypeById } from "~/utils/typeUtils";
+import {
+  getCompatibleTargetNodeTypeIds,
+  getDiscourseNodeTypeId,
+} from "~/components/canvas/utils/relationTypeUtils";
 import { DiscourseRelationShape } from "./shapes/DiscourseRelationShape";
-import { getNodeTypeById } from "~/utils/typeUtils";
 import { showToast } from "./utils/toastUtils";
 import { toTldrawColor } from "~/utils/tldrawColors";
 
@@ -88,40 +91,6 @@ class Pointing extends StateNode {
     this.cancel();
   };
 
-  private getCompatibleNodeTypes = (
-    plugin: DiscourseGraphPlugin,
-    relationTypeId: string,
-    sourceNodeTypeId: string,
-  ): string[] => {
-    const compatibleTypes: string[] = [];
-
-    // Find all accepted discourse relations that match the relation type and source
-    const relations = plugin.settings.discourseRelations.filter(
-      (relation) =>
-        isAcceptedSchema(relation) &&
-        relation.relationshipTypeId === relationTypeId &&
-        relation.sourceId === sourceNodeTypeId,
-    );
-
-    relations.forEach((relation) => {
-      compatibleTypes.push(relation.destinationId);
-    });
-
-    // Also check reverse relations (where current node is destination)
-    const reverseRelations = plugin.settings.discourseRelations.filter(
-      (relation) =>
-        isAcceptedSchema(relation) &&
-        relation.relationshipTypeId === relationTypeId &&
-        relation.destinationId === sourceNodeTypeId,
-    );
-
-    reverseRelations.forEach((relation) => {
-      compatibleTypes.push(relation.sourceId);
-    });
-
-    return [...new Set(compatibleTypes)]; // Remove duplicates
-  };
-
   override onEnter = () => {
     this.didTimeout = false;
 
@@ -143,20 +112,19 @@ class Pointing extends StateNode {
       return;
     }
 
-    const sourceNodeTypeId = (target as { props?: { nodeTypeId?: string } })
-      .props?.nodeTypeId;
+    const sourceNodeTypeId = getDiscourseNodeTypeId(target);
     if (!sourceNodeTypeId) {
       this.showWarning("Source node must have a valid node type");
       return;
     }
 
     // Check if this source node type can create relations of this type
     if (sourceNodeTypeId) {
-      const compatibleTargetTypes = this.getCompatibleNodeTypes(
-        plugin,
+      const compatibleTargetTypes = getCompatibleTargetNodeTypeIds({
+        discourseRelations: plugin.settings.discourseRelations,
         relationTypeId,
         sourceNodeTypeId,
-      );
+      });
 
       if (compatibleTargetTypes.length === 0) {
         const sourceNodeType = getNodeTypeById(plugin, sourceNodeTypeId);
@@ -168,11 +136,7 @@ class Pointing extends StateNode {
       }
     }
 
-    if (!target) {
-      this.createArrowShape();
-    } else {
-      this.editor.setHintingShapes([target.id]);
-    }
+    this.editor.setHintingShapes([target.id]);
 
     this.startPreciseTimeout();
   };

apps/obsidian/src/components/canvas/TldrawViewComponent.tsx

@@ -46,6 +46,7 @@ import {
 } from "~/components/canvas/shapes/DiscourseRelationBinding";
 import ToastListener from "./ToastListener";
 import { RelationsOverlay } from "./overlays/RelationOverlay";
+import { DragHandleOverlay } from "./overlays/DragHandleOverlay";
 import { WHITE_LOGO_SVG } from "~/icons";
 import { CustomContextMenu } from "./CustomContextMenu";
 import {
@@ -474,7 +475,10 @@ export const TldrawPreviewComponent = ({
                 );
               },
               InFrontOfTheCanvas: () => (
-                <RelationsOverlay plugin={plugin} file={file} />
+                <>
+                  <RelationsOverlay plugin={plugin} file={file} />
+                  <DragHandleOverlay plugin={plugin} file={file} />
+                </>
               ),
             }}
           />