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

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 } 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,38 +91,6 @@ class Pointing extends StateNode {
     this.cancel();
   };
 
-  private getCompatibleNodeTypes = (
-    plugin: DiscourseGraphPlugin,
-    relationTypeId: string,
-    sourceNodeTypeId: string,
-  ): string[] => {
-    const compatibleTypes: string[] = [];
-
-    // Find all discourse relations that match the relation type and source
-    const relations = plugin.settings.discourseRelations.filter(
-      (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) =>
-        relation.relationshipTypeId === relationTypeId &&
-        relation.destinationId === sourceNodeTypeId,
-    );
-
-    reverseRelations.forEach((relation) => {
-      compatibleTypes.push(relation.sourceId);
-    });
-
-    return [...new Set(compatibleTypes)]; // Remove duplicates
-  };
-
   override onEnter = () => {
     this.didTimeout = false;
 
@@ -141,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);

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} />
+                </>
               ),
             }}
           />