feat: add pan and zoom diagram viewer

Author: adibhanna

packages/app-core/src/components/EditorPane.tsx

@@ -67,7 +67,7 @@ import { livePreviewPlugin } from '../lib/cm-live-preview'
 import { slashCommandSource, slashCommandRender } from '../lib/cm-slash-commands'
 import { dateShortcutSource } from '../lib/cm-date-shortcuts'
 import { wikilinkSource } from '../lib/cm-wikilinks'
-import { LazyPreview as Preview } from './LazyPreview'
+import { LazyDiagramTabView, LazyPreview as Preview } from './LazyPreview'
 import { ConnectionsPanel } from './ConnectionsPanel'
 import { OutlinePanel } from './OutlinePanel'
 import { CommentsPanel, type CommentDraft } from './CommentsPanel'
@@ -144,6 +144,11 @@ import {
   assetTitleFromPath,
   isAssetTabPath
 } from '../lib/asset-tabs'
+import {
+  diagramFromTabPath,
+  diagramTitleFromTabPath,
+  isDiagramTabPath
+} from '../lib/diagram-tabs'
 import { classifyLocalAssetHref } from '../lib/local-assets'
 import { getKeymapDisplay, type KeymapId } from '../lib/keymaps'
 import { isTabStripOverflowing } from '../lib/tab-strip-overflow'
@@ -1909,118 +1914,80 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
     () => {
       const pinnedSet = new Set(pinnedTabs)
       return tabs.map((path) => {
+        const base = {
+          path,
+          pinned: pinnedSet.has(path),
+          isQuick: false,
+          isTasks: false,
+          isTag: false,
+          isHelp: false,
+          isArchive: false,
+          isTrash: false,
+          isAsset: false,
+          isDiagram: false
+        }
         if (isTasksTabPath(path)) {
           return {
-            path,
+            ...base,
             title: 'Tasks',
-            pinned: pinnedSet.has(path),
-            isQuick: false,
-            isTasks: true,
-            isTag: false,
-            isHelp: false,
-            isArchive: false,
-            isTrash: false,
-            isAsset: false
+            isTasks: true
           }
         }
         if (isQuickNotesTabPath(path)) {
           return {
-            path,
+            ...base,
             title: folderLabels.quick,
-            pinned: pinnedSet.has(path),
-            isQuick: true,
-            isTasks: false,
-            isTag: false,
-            isHelp: false,
-            isArchive: false,
-            isTrash: false,
-            isAsset: false
+            isQuick: true
           }
         }
         if (isTagsTabPath(path)) {
           return {
-            path,
+            ...base,
             title: 'Tags',
-            pinned: pinnedSet.has(path),
-            isQuick: false,
-            isTasks: false,
-            isTag: true,
-            isHelp: false,
-            isArchive: false,
-            isTrash: false,
-            isAsset: false
+            isTag: true
           }
         }
         if (isHelpTabPath(path)) {
           return {
-            path,
+            ...base,
             title: 'Help',
-            pinned: pinnedSet.has(path),
-            isQuick: false,
-            isTasks: false,
-            isTag: false,
-            isHelp: true,
-            isArchive: false,
-            isTrash: false,
-            isAsset: false
+            isHelp: true
           }
         }
         if (isArchiveTabPath(path)) {
           return {
-            path,
+            ...base,
             title: folderLabels.archive,
-            pinned: pinnedSet.has(path),
-            isQuick: false,
-            isTasks: false,
-            isTag: false,
-            isHelp: false,
-            isArchive: true,
-            isTrash: false,
-            isAsset: false
+            isArchive: true
           }
         }
         if (isTrashTabPath(path)) {
           return {
-            path,
+            ...base,
             title: folderLabels.trash,
-            pinned: pinnedSet.has(path),
-            isQuick: false,
-            isTasks: false,
-            isTag: false,
-            isHelp: false,
-            isArchive: false,
-            isTrash: true,
-            isAsset: false
+            isTrash: true
           }
         }
         if (isAssetTabPath(path)) {
           const assetPath = assetPathFromTab(path)
           return {
-            path,
+            ...base,
             title: assetTitleFromPath(assetPath),
-            pinned: pinnedSet.has(path),
-            isQuick: false,
-            isTasks: false,
-            isTag: false,
-            isHelp: false,
-            isArchive: false,
-            isTrash: false,
             isAsset: true
           }
         }
+        if (isDiagramTabPath(path)) {
+          return {
+            ...base,
+            title: diagramTitleFromTabPath(path),
+            isDiagram: true
+          }
+        }
         const meta = path === content?.path ? content : notes.find((n) => n.path === path)
         const title = meta?.title ?? path.split('/').pop()?.replace(/\.md$/i, '') ?? path
         return {
-          path,
+          ...base,
           title,
-          pinned: pinnedSet.has(path),
-          isQuick: false,
-          isTasks: false,
-          isTag: false,
-          isHelp: false,
-          isArchive: false,
-          isTrash: false,
-          isAsset: false
         }
       })
     },
@@ -2090,7 +2057,8 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
       isHelpTabPath(path) ||
       isArchiveTabPath(path) ||
       isTrashTabPath(path) ||
-      isAssetTabPath(path)
+      isAssetTabPath(path) ||
+      isDiagramTabPath(path)
     ) {
       return [
         { label: 'Close', onSelect: async () => closeTabInPane(paneId, path) },
@@ -2194,6 +2162,7 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
       isArchive: boolean
       isTrash: boolean
       isAsset: boolean
+      isDiagram: boolean
     }) => {
       const active = tab.path === activeTab
       const isVirtual =
@@ -2203,7 +2172,8 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
         tab.isHelp ||
         tab.isArchive ||
         tab.isTrash ||
-        tab.isAsset
+        tab.isAsset ||
+        tab.isDiagram
       return (
         <div
           key={tab.path}
@@ -2326,6 +2296,9 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
               {tab.isAsset && (
                 <DocumentIcon width={13} height={13} className="shrink-0 text-accent" />
               )}
+              {tab.isDiagram && (
+                <DocumentIcon width={13} height={13} className="shrink-0 text-accent" />
+              )}
               <span className="min-w-0 flex-1 truncate">{tab.title}</span>
             </button>
             <button
@@ -2691,6 +2664,8 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
             <TrashView />
           ) : activeTab && isAssetTabPath(activeTab) ? (
             <AssetTabView tabPath={activeTab} vaultRoot={vault?.root ?? null} />
+          ) : activeTab && isDiagramTabPath(activeTab) ? (
+            <LazyDiagramTabView diagram={diagramFromTabPath(activeTab)} />
           ) : content ? (
             <div
               className={[

packages/app-core/src/components/LazyPreview.tsx

@@ -1,9 +1,14 @@
 import { lazy, Suspense } from 'react'
+import type { DiagramTabPayload } from '../lib/diagram-tabs'
 
 const PreviewImpl = lazy(() =>
   import('./Preview').then((mod) => ({ default: mod.Preview }))
 )
 
+const DiagramTabViewImpl = lazy(() =>
+  import('./Preview').then((mod) => ({ default: mod.DiagramTabView }))
+)
+
 export function LazyPreview({
   markdown,
   notePath,
@@ -26,3 +31,15 @@ export function LazyPreview({
     </Suspense>
   )
 }
+
+export function LazyDiagramTabView({
+  diagram
+}: {
+  diagram: DiagramTabPayload | null
+}): JSX.Element {
+  return (
+    <Suspense fallback={null}>
+      <DiagramTabViewImpl diagram={diagram} />
+    </Suspense>
+  )
+}