✨ Implement rendering of global graph

chanjunren · Feb 8, 2025 · f5cb1b2 · f5cb1b2
1 parent 324fc03
commit f5cb1b2
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 20 deletions.
diff --git a/src/plugin/context.ts b/src/plugin/context.ts
@@ -14,6 +14,8 @@ export const GraphContext = createContext<IGraphContext>({
     simulation: null,
     expanded: false,
     setExpanded: () => {},
+    globalModal: false,
+    setGlobalModal: () => {},
     containerWidth: 0,
     containerHeight: 0,
   },

diff --git a/src/plugin/hooks/useGraphManager.ts b/src/plugin/hooks/useGraphManager.ts
@@ -9,7 +9,11 @@ import {
   Simulation,
 } from "d3-force";
 import { useEffect, useMemo, useRef, useState } from "react";
-export default function useGraphManager(rawData: GraphInfo) {
+export default function useGraphManager(
+  rawData: GraphInfo,
+  global: boolean,
+  minimizeCallback?: () => void
+) {
   const graphData = useMemo(() => structuredClone(rawData), [rawData]);
 
   const [nodes, setNodes] = useState<{ [key: string]: ObsidianNoteNode }>(
@@ -24,9 +28,10 @@ export default function useGraphManager(rawData: GraphInfo) {
     useRef<Simulation<ObsidianNoteNode, ObsidianNoteLink>>(null);
 
   const [expanded, setExpanded] = useState<boolean>(false);
+  const [globalModal, setGlobalModal] = useState<boolean>(false);
 
-  const containerWidth = expanded ? 1200 : 280;
-  const containerHeight = expanded ? (containerWidth * 9) / 16 : 280;
+  const containerWidth = global ? 1800 : expanded ? 1200 : 280;
+  const containerHeight = expanded || global ? (containerWidth * 9) / 16 : 280;
   const LINK_DISTANCE = expanded ? 20 : 10;
 
   useEffect(() => {
@@ -67,6 +72,9 @@ export default function useGraphManager(rawData: GraphInfo) {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         setExpanded(false);
+        if (minimizeCallback) {
+          minimizeCallback();
+        }
       }
     };
 
@@ -85,6 +93,8 @@ export default function useGraphManager(rawData: GraphInfo) {
     setExpanded,
     containerWidth,
     containerHeight,
+    globalModal,
+    setGlobalModal,
   };
 }
 

diff --git a/src/plugin/theme/VaultusaurusGraph/GraphContent.tsx b/src/plugin/theme/VaultusaurusGraph/GraphContent.tsx
@@ -14,16 +14,23 @@ interface IGraphContent {
   expandable?: boolean;
   modal?: boolean;
   expanded?: boolean;
+  callback?: () => void;
 }
 
 export default function GraphContent({
   expandable = true,
   modal = false,
-  enableGlobal = true,
+  callback = () => {},
 }): ReactElement<IGraphContent> {
   const { graphStyle, graphManager } = useContext(GraphContext);
-  const { setExpanded, nodes, links, containerWidth, containerHeight } =
-    graphManager;
+  const {
+    setExpanded,
+    nodes,
+    links,
+    containerWidth,
+    containerHeight,
+    setGlobalModal,
+  } = graphManager;
 
   const inlineStyles = {
     "--vaultusaurus-graph-bg": graphStyle.graphBg,
@@ -48,18 +55,21 @@ export default function GraphContent({
           <ExpandIcon />
         </button>
       )}
-      {!modal && enableGlobal && (
+      {!modal && (
         <button
           className={classNames(styles.iconOverlay, styles.nextButton)}
-          onClick={() => setExpanded(true)}
+          onClick={() => setGlobalModal(true)}
         >
           <GlobalGraphIcon />
         </button>
       )}
       {modal && (
         <button
           className={classNames(styles.iconOverlay, styles.topButton)}
-          onClick={() => setExpanded(false)}
+          onClick={() => {
+            setExpanded(false);
+            callback();
+          }}
         >
           <CollapseIcon />
         </button>

diff --git a/src/plugin/theme/VaultusaurusGraph/index.tsx b/src/plugin/theme/VaultusaurusGraph/index.tsx
@@ -12,31 +12,38 @@ import { ReactElement } from "react";
 import { createPortal } from "react-dom";
 import GraphContent from "./GraphContent";
 
-interface ILocalGraph {
+interface IVaultusaurusGraph {
   customGraph?: GraphInfo;
   expandable?: boolean;
-  enableGlobal?: boolean;
+  global?: boolean;
+  minimizeGraphCallback?: () => void;
 }
 
 export default function VaultusaurusGraph({
-  customGraph,
-  expandable,
-  enableGlobal,
-}): ReactElement<ILocalGraph> {
+  customGraph = null,
+  expandable = true,
+  global,
+  minimizeGraphCallback,
+}): ReactElement<IVaultusaurusGraph> {
   const globalData = usePluginData(
     "docusaurus-plugin-vaultusaurus"
   ) as VaultusaurusGlobalData;
-  const graphInfo: GraphInfo =
-    globalData.graphInfo[window.location.pathname] || customGraph;
+  const graphInfo: GraphInfo = global
+    ? globalData.globalGraphInfo
+    : globalData.graphInfo[window.location.pathname] || customGraph;
 
   if (!graphInfo) {
     return null;
   }
   const inputGraphStyle = globalData.graphStyle;
 
-  const graphManager = useGraphManager(graphInfo);
+  const graphManager = useGraphManager(
+    graphInfo,
+    global,
+    minimizeGraphCallback
+  );
   const rawLinks = graphInfo?.links || [];
-  const expanded = graphManager.expanded;
+  const { expanded, globalModal, setGlobalModal } = graphManager;
 
   return (
     <GraphContext.Provider
@@ -50,6 +57,18 @@ export default function VaultusaurusGraph({
         },
       }}
     >
+      {global && (
+        <div
+          className={styles.modalOverlay}
+          onClick={() => minimizeGraphCallback()}
+        >
+          <GraphContent
+            modal
+            expandable={false}
+            callback={() => minimizeGraphCallback()}
+          />
+        </div>
+      )}
       {expanded &&
         createPortal(
           <div
@@ -60,7 +79,16 @@ export default function VaultusaurusGraph({
           </div>,
           document.body
         )}
-      <GraphContent enableGlobal={enableGlobal} expandable={expandable} />
+      {globalModal &&
+        createPortal(
+          <VaultusaurusGraph
+            global
+            minimizeGraphCallback={() => setGlobalModal(false)}
+          />,
+          document.body
+        )}
+
+      {!global && <GraphContent expandable={expandable} />}
     </GraphContext.Provider>
   );
 }