[ENG-968] Obsidian - Open node functionalities (#524)

* new ways to open file

* sm fix

Author: trangdoan982

apps/obsidian/src/components/canvas/TldrawViewComponent.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) => {

apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.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">

apps/obsidian/src/components/canvas/utils/openFileUtils.ts

@@ -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);
+};
+