Release v0.3.0

Author: trangdoan982

main.js

@@ -1,7 +1,7 @@
 {
   "id": "discourse-graphs",
   "name": "Discourse Graph",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "minAppVersion": "1.7.0",
   "description": "Discourse Graph Plugin for Obsidian",
   "author": "Discourse Graphs",

manifest.json

@@ -8,7 +8,7 @@ import { ConfirmationModal } from "./ConfirmationModal";
 import { getTemplateFiles, getTemplatePluginInfo } from "~/utils/templates";
 
 const generateTagPlaceholder = (format: string, nodeName?: string): string => {
-  if (!format) return "Enter tag (e.g., clm-candidate or #clm-candidate)";
+  if (!format) return "Enter tag (e.g., clm-candidate)";
 
   // Extract the prefix before " - {content}" or " -{content}" or " -{content}" etc.
   const match = format.match(/^([A-Z]+)\s*-\s*\{content\}/i);
@@ -360,7 +360,7 @@ const NodeTypeSettings = () => {
     const modal = new ConfirmationModal(plugin.app, {
       title: "Delete Node Type",
       message: `Are you sure you want to delete the node type "${nodeType.name}"?`,
-      onConfirm: () => handleDeleteNodeType(index),
+      onConfirm: () => void handleDeleteNodeType(index),
     });
     modal.open();
   };
@@ -581,7 +581,7 @@ const NodeTypeSettings = () => {
               Cancel
             </button>
             <button
-              onClick={handleSave}
+              onClick={() => void handleSave()}
               className="mod-cta"
               disabled={
                 Object.keys(errors).length > 0 ||

src/components/NodeTypeSettings.tsx

@@ -51,6 +51,7 @@ import { RelationsOverlay } from "./overlays/RelationOverlay";
 import { showToast } from "./utils/toastUtils";
 import { WHITE_LOGO_SVG } from "~/icons";
 import { CustomContextMenu } from "./CustomContextMenu";
+import { openFileInSidebar, openFileInNewTab } from "./utils/openFileUtils";
 
 type TldrawPreviewProps = {
   store: TLStore;
@@ -235,8 +236,10 @@ export const TldrawPreviewComponent = ({
           isCreatingRelationRef.current = false;
         }
 
-        if (e.shiftKey) {
+        // Handle Shift+Click (open in sidebar) or Cmd+Click (open in new tab)
+        if (e.shiftKey || e.metaKey) {
           const now = Date.now();
+          const openInNewTab = e.metaKey; // Cmd on Mac, Ctrl on other platforms
 
           // Debounce to prevent double opening
           if (now - lastShiftClickRef.current < SHIFT_CLICK_DEBOUNCE_MS) {
@@ -295,21 +298,12 @@ export const TldrawPreviewComponent = ({
                 return;
               }
 
-              const rightSplit = plugin.app.workspace.rightSplit;
-              const rightLeaf = plugin.app.workspace.getRightLeaf(false);
-
-              if (rightLeaf) {
-                if (rightSplit && rightSplit.collapsed) {
-                  rightSplit.expand();
-                }
-                await rightLeaf.openFile(linkedFile);
-                plugin.app.workspace.setActiveLeaf(rightLeaf);
+              // Open in sidebar (Shift+Click) or new tab (Cmd+Click)
+              if (openInNewTab) {
+                await openFileInNewTab(plugin.app, linkedFile);
               } else {
-                const leaf = plugin.app.workspace.getLeaf("split", "vertical");
-                await leaf.openFile(linkedFile);
-                plugin.app.workspace.setActiveLeaf(leaf);
+                await openFileInSidebar(plugin.app, linkedFile);
               }
-
               editor.selectNone();
             })
             .catch((error) => {

src/components/canvas/TldrawViewComponent.tsx

@@ -6,6 +6,7 @@ import {
   TLBaseShape,
   TLResizeInfo,
   useEditor,
+  useValue,
 } from "tldraw";
 import type { App, TFile } from "obsidian";
 import { memo, createElement, useEffect } from "react";
@@ -18,6 +19,8 @@ import {
 import { resolveLinkedFileFromSrc } from "~/components/canvas/stores/assetStore";
 import { getNodeTypeById } from "~/utils/typeUtils";
 import { calcDiscourseNodeSize } from "~/utils/calcDiscourseNodeSize";
+import { openFileInSidebar } from "~/components/canvas/utils/openFileUtils";
+import { showToast } from "~/components/canvas/utils/toastUtils";
 
 export type DiscourseNodeShape = TLBaseShape<
   "discourse-node",
@@ -140,6 +143,14 @@ const discourseNodeContent = memo(
     const { src, title, nodeTypeId } = shape.props;
     const nodeType = getNodeTypeById(plugin, nodeTypeId);
 
+    const isHovered = useValue(
+      "is hovered",
+      () => {
+        return editor.getHoveredShapeId() === shape.id;
+      },
+      [editor, shape.id],
+    );
+
     useEffect(() => {
       const loadNodeData = async () => {
         if (!src) {
@@ -255,17 +266,89 @@ const discourseNodeContent = memo(
       nodeType?.keyImage,
     ]);
 
+    const handleOpenInSidebar = async (): Promise<void> => {
+      if (!src) {
+        showToast({
+          severity: "warning",
+          title: "Cannot open node",
+          description: "No source file linked",
+        });
+        return;
+      }
+      try {
+        const linkedFile = await resolveLinkedFileFromSrc({
+          app,
+          canvasFile,
+          src,
+        });
+
+        if (!linkedFile) {
+          showToast({
+            severity: "warning",
+            title: "Cannot open node",
+            description: "Linked file not found",
+          });
+          return;
+        }
+
+        await openFileInSidebar(app, linkedFile);
+        editor.selectNone();
+      } catch (error) {
+        console.error("Error opening linked file:", error);
+        showToast({
+          severity: "error",
+          title: "Error",
+          description: "Failed to open linked file",
+        });
+      }
+    };
+
     return (
       <div
         style={{
           backgroundColor: nodeType?.color ?? "",
         }}
-        // NOTE: These Tailwind classes (p-2, border-2, rounded-md, m-1, text-base, m-0, text-sm)
+         // NOTE: These Tailwind classes (p-2, border-2, rounded-md, m-1, text-base, m-0, text-sm)
         // correspond to constants in nodeConstants.ts. If you change these classes, update the
         // constants and the measureNodeText function to keep measurements accurate.
-        className="box-border flex h-full w-full flex-col items-start justify-start rounded-md border-2 p-2"
+        className="relative box-border flex h-full w-full flex-col items-start justify-center rounded-md border-2 p-2"
       >
-        <h1 className="m-1 text-base">{title || "..."}</h1>
+        {isHovered && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              void handleOpenInSidebar();
+            }}
+            onPointerDown={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+            }}
+            onPointerUp={(e) => {
+              e.stopPropagation();
+            }}
+            className="absolute left-1 top-1 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-black/10 bg-white/90 p-1 shadow-sm transition-all duration-200 hover:bg-white"
+            style={{
+              pointerEvents: "auto",
+            }}
+            title="Open in sidebar"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+              <line x1="15" y1="3" x2="15" y2="21" />
+            </svg>
+          </button>
+        )}
+        <h1 className="m-0 text-base">{title || "..."}</h1>
         <p className="m-0 text-sm opacity-80">{nodeType?.name || ""}</p>
         {shape.props.imageSrc ? (
           <div className="mt-2 flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden">

src/components/canvas/shapes/DiscourseNodeShape.tsx

@@ -0,0 +1,25 @@
+import { App, TFile } from "obsidian";
+
+export const openFileInSidebar = async (app: App, file: TFile): Promise<void> => {
+  const rightSplit = app.workspace.rightSplit;
+  const rightLeaf = app.workspace.getRightLeaf(false);
+
+  if (rightLeaf) {
+    if (rightSplit && rightSplit.collapsed) {
+      rightSplit.expand();
+    }
+    await rightLeaf.openFile(file);
+    app.workspace.setActiveLeaf(rightLeaf);
+  } else {
+    const leaf = app.workspace.getLeaf("split", "vertical");
+    await leaf.openFile(file);
+    app.workspace.setActiveLeaf(leaf);
+  }
+};
+
+export const openFileInNewTab = async (app: App, file: TFile): Promise<void> => {
+  const leaf = app.workspace.getLeaf("tab");
+  await leaf.openFile(file);
+  app.workspace.setActiveLeaf(leaf);
+};
+ 

src/components/canvas/utils/openFileUtils.ts

@@ -13,14 +13,14 @@ export const DEFAULT_NODE_TYPES: Record<string, DiscourseNode> = {
     name: "Claim",
     format: "CLM - {content}",
     color: "#7DA13E",
-    tag: "#clm-candidate",
+    tag: "clm-candidate",
   },
   Evidence: {
     id: generateUid("node"),
     name: "Evidence",
     format: "EVD - {content}",
     color: "#DB134A",
-    tag: "#evd-candidate",
+    tag: "evd-candidate",
   },
 };
 export const DEFAULT_RELATION_TYPES: Record<string, DiscourseRelationType> = {

src/constants.ts

@@ -379,11 +379,75 @@ export class TagNodeHandler {
     }
 
     let hoverTimeout: number | null = null;
+    let currentMouseY = 0;
+    let currentMouseX = 0;
+
+    // Track mouse position to determine which part of multi-line tag is hovered
+    const handleMouseMove = (e: MouseEvent) => {
+      currentMouseY = e.clientY;
+      currentMouseX = e.clientX;
+
+      // Update tooltip position if it's already visible
+      if (this.currentTooltip) {
+        updateTooltipPosition();
+      }
+    };
+
+    const getClosestRect = (): DOMRect => {
+      const range = document.createRange();
+      range.selectNodeContents(tagElement);
+      const clientRects = range.getClientRects();
+
+      if (clientRects.length > 0) {
+        // If tag spans multiple lines, find the rect closest to mouse position
+        if (clientRects.length > 1) {
+          let closestRect: DOMRect | null = null;
+          let minDistance = Infinity;
+
+          for (let i = 0; i < clientRects.length; i++) {
+            const r = clientRects.item(i);
+            if (!r) continue;
+
+            // Calculate distance from mouse position to center of this rect
+            const rectCenterY = r.top + r.height / 2;
+            const rectCenterX = r.left + r.width / 2;
+            const distanceY = Math.abs(currentMouseY - rectCenterY);
+            const distanceX = Math.abs(currentMouseX - rectCenterX);
+            // Weight Y distance more heavily since we care more about vertical proximity
+            const distance = distanceY * 2 + distanceX;
+
+            if (distance < minDistance) {
+              minDistance = distance;
+              closestRect = r;
+            }
+          }
+
+          return (
+            closestRect ||
+            clientRects.item(clientRects.length - 1) ||
+            tagElement.getBoundingClientRect()
+          );
+        } else {
+          // Single line tag - use the only rect
+          return clientRects.item(0) || tagElement.getBoundingClientRect();
+        }
+      }
+
+      return tagElement.getBoundingClientRect();
+    };
+
+    const updateTooltipPosition = () => {
+      if (!this.currentTooltip) return;
+
+      const rect = getClosestRect();
+      this.currentTooltip.style.top = `${rect.top - TOOLTIP_OFFSET}px`;
+      this.currentTooltip.style.left = `${rect.left + rect.width / 2}px`;
+    };
 
     const showTooltip = () => {
       if (this.currentTooltip) return;
 
-      const rect = tagElement.getBoundingClientRect();
+      const rect = getClosestRect();
 
       this.currentTooltip = document.createElement("div");
       this.currentTooltip.className = "discourse-tag-popover";
@@ -443,6 +507,8 @@ export class TagNodeHandler {
       hoverTimeout = window.setTimeout(showTooltip, HOVER_DELAY);
     });
 
+    tagElement.addEventListener("mousemove", handleMouseMove);
+
     tagElement.addEventListener("mouseleave", (e) => {
       if (hoverTimeout) {
         clearTimeout(hoverTimeout);
@@ -456,6 +522,7 @@ export class TagNodeHandler {
     });
 
     const cleanup = () => {
+      tagElement.removeEventListener("mousemove", handleMouseMove);
       if (hoverTimeout) {
         clearTimeout(hoverTimeout);
       }