💥 Major refactoring / fixed modal display issues

src/plugin/context.ts

@@ -1,10 +1,19 @@
-import { LocalGraphContext } from "@vaultusaurus/plugin/types";
+import { IGraphContext } from "@vaultusaurus/plugin/types";
 
 import { createContext } from "react";
 
-export const GraphContext = createContext<LocalGraphContext>({
-  setHoveredNode: () => {},
-  adjacencyMap: {},
-  simulation: null,
+export const GraphContext = createContext<IGraphContext>({
+  hoverManager: {
+    hoveredNode: null,
+    setHoveredNode: () => {},
+    adjacencyMap: {},
+  },
+  graphManager: {
+    nodes: {},
+    links: [],
+    simulation: null,
+    expanded: false,
+    setExpanded: () => {},
+  },
   graphStyle: {},
 });

src/plugin/css/index.module.css

@@ -5,7 +5,7 @@
 }
 
 .container {
-    background: var(--graph-bg);
+    background: var(--vaultusaurus-graph-bg);
     aspect-ratio: 1 / 1;
     border-radius: 8px;
     position: relative;
@@ -16,7 +16,7 @@
 }
 
 .modalContainer {
-    background: var(--graph-bg);
+    background: var(--vaultusaurus-graph-bg);
     aspect-ratio: 16 / 9;
     border-radius: 8px;
     z-index: 9999;

src/plugin/hooks/index.ts

@@ -1,6 +1,6 @@
+import useGraphManager from "./useGraphManager";
 import useGraphNode from "./useGraphNode";
-import useHover from "./useHover";
-import useLocalGraph from "./useLocalGraph";
+import useHoverManager from "./useHoverManager";
 import useZoom from "./useZoom";
 
-export { useGraphNode, useHover, useLocalGraph, useZoom };
+export { useGraphManager, useGraphNode, useHoverManager, useZoom };

src/plugin/hooks/useLocalGraph.ts → src/plugin/hooks/useGraphManager.ts

@@ -14,7 +14,7 @@ const WIDTH = 240;
 const HEIGHT = 240;
 const LINK_DISTANCE = 50;
 
-export default function useLocalGraph(rawData: GraphInfo) {
+export default function useGraphManager(rawData: GraphInfo) {
   const graphData = useMemo(() => structuredClone(rawData), [rawData]);
 
   const [nodes, setNodes] = useState<{ [key: string]: ObsidianNoteNode }>(
@@ -58,6 +58,7 @@ export default function useLocalGraph(rawData: GraphInfo) {
     simulation.current = currentSimulation;
 
     return () => {
+      console.log("STOPPING");
       currentSimulation.stop();
     };
   }, [graphData]);

src/plugin/hooks/useGraphNode.ts

@@ -1,16 +1,16 @@
-import {
-  LocalGraphContext,
-  ObsidianNoteNode,
-} from "@vaultusaurus/plugin/types";
+import { IGraphContext, ObsidianNoteNode } from "@vaultusaurus/plugin/types";
 import { drag } from "d3-drag";
 import { select } from "d3-selection";
 import { useCallback, useEffect, useRef } from "react";
 
 export default function useGraphNode(
-  context: LocalGraphContext,
+  context: IGraphContext,
   node: ObsidianNoteNode
 ) {
-  const { hoveredNode, adjacencyMap, simulation } = context;
+  const { hoverManager, graphManager } = context;
+  const { hoveredNode, adjacencyMap } = hoverManager;
+  const { simulation } = graphManager;
+
   const nodeRef = useRef(null);
 
   const imBeingHovered = hoveredNode?.id === node.id;

src/plugin/theme-vaultusaurus.d.ts

@@ -10,5 +10,5 @@ declare module "vaultusaurus" {
 }
 
 declare module "@theme/LocalGraph" {
-  export default function LocalGraph(props: any): ReactElement;
+  export default function VaultusaurusGraph(props: any): ReactElement;
 }

src/plugin/theme/GraphLink/index.tsx

@@ -15,7 +15,8 @@ export default function GraphLink({ link }: GraphLinkProps) {
     return null;
   }
 
-  const { hoveredNode, graphStyle } = useContext(GraphContext);
+  const { hoverManager, graphStyle } = useContext(GraphContext);
+  const { hoveredNode } = hoverManager;
   const someNodeIsHovered = hoveredNode?.id;
   const focused =
     someNodeIsHovered &&

src/plugin/theme/GraphNode/index.tsx

@@ -10,7 +10,8 @@ type GraphNodeProps = {
 
 export default function GraphNode({ node }: GraphNodeProps) {
   const context = useContext(GraphContext);
-  const { setHoveredNode, graphStyle } = context;
+  const { hoverManager, graphStyle } = context;
+  const { setHoveredNode } = hoverManager;
   const { imBeingHovered, otherNodeIsHovered, focused, nodeRef } = useGraphNode(
     context,
     node

src/plugin/theme/VaultusaurusGraph/GraphContent.tsx

@@ -0,0 +1,72 @@
+import { ReactElement, useContext, useRef } from "react";
+
+import { GraphStyle } from "@vaultusaurus/common/options";
+import {
+  GraphInfo,
+  GraphNodeInfo,
+  GraphNodeLinkInfo,
+} from "@vaultusaurus/common/types";
+import { GraphContext } from "@vaultusaurus/plugin/context";
+import styles from "@vaultusaurus/plugin/css/index.module.css";
+import { useZoom } from "@vaultusaurus/plugin/hooks";
+import CollapseIcon from "@vaultusaurus/plugin/resources/CollapseIcon.svg";
+import ExpandIcon from "@vaultusaurus/plugin/resources/ExpandIcon.svg";
+import GraphLink from "@vaultusaurus/plugin/theme/GraphLink";
+import GraphNode from "@vaultusaurus/plugin/theme/GraphNode";
+
+interface IGraphContent {
+  info: GraphInfo;
+  modal: boolean;
+  style: GraphStyle;
+  nodes: GraphNodeInfo[];
+  links: GraphNodeLinkInfo[];
+  expanded: boolean;
+  setExpanded: () => void;
+}
+
+export default function GraphContent({
+  expandable = true,
+  modal = false,
+}): ReactElement<IGraphContent> {
+  const { graphStyle, graphManager } = useContext(GraphContext);
+  const { setExpanded, nodes, links } = graphManager;
+
+  const inlineStyles = {
+    "--vaultusaurus-graph-bg": graphStyle.graphBg,
+    "--vaultusaurus-default-color": graphStyle.defaultColor,
+    "--vaultusaurus-active-color": graphStyle.defaultColor,
+  } as React.CSSProperties;
+
+  const container = useRef(null);
+  const { transform } = useZoom(container);
+
+  return (
+    <div
+      className={modal ? styles.modalContainer : styles.container}
+      style={inlineStyles}
+    >
+      {!modal && expandable && (
+        <ExpandIcon
+          className={styles.actionIcon}
+          onClick={() => setExpanded(true)}
+        />
+      )}
+      {modal && (
+        <CollapseIcon
+          className={styles.actionIcon}
+          onClick={() => setExpanded(false)}
+        />
+      )}
+      <svg viewBox={`0 0 300 300`} ref={container}>
+        <g transform={transform}>
+          {links.map((link, idx) => {
+            return <GraphLink key={`obsidian-link-${idx}`} link={link} />;
+          })}
+          {Object.values(nodes).map((node) => (
+            <GraphNode key={node.id} node={node} />
+          ))}
+        </g>
+      </svg>
+    </div>
+  );
+}

src/plugin/theme/VaultusaurusGraph/index.tsx

@@ -0,0 +1,60 @@
+import { usePluginData } from "@docusaurus/useGlobalData";
+import { GraphInfo, VaultusaurusGlobalData } from "@vaultusaurus/common/types";
+import { GraphContext } from "@vaultusaurus/plugin/context";
+import styles from "@vaultusaurus/plugin/css/index.module.css";
+import { useGraphManager, useHoverManager } from "@vaultusaurus/plugin/hooks";
+import {
+  FALLBACK_ACTIVE_COLOR,
+  FALLBACK_BACKGROUND_COLOR,
+  FALLBACK_DEFAULT_COLOR,
+} from "@vaultusaurus/plugin/utils";
+import { ReactElement } from "react";
+import { createPortal } from "react-dom";
+import GraphContent from "./GraphContent";
+
+interface ILocalGraph {
+  customGraph?: GraphInfo;
+  expandable?: boolean;
+}
+
+export default function VaultusaurusGraph({
+  customGraph,
+}): ReactElement<ILocalGraph> {
+  const globalData = usePluginData(
+    "docusaurus-plugin-vaultusaurus"
+  ) as VaultusaurusGlobalData;
+  const graphInfo: GraphInfo =
+    globalData.graphInfo[window.location.pathname] || customGraph;
+
+  if (!graphInfo) {
+    return null;
+  }
+  const inputGraphStyle = globalData.graphStyle;
+
+  const graphManager = useGraphManager(graphInfo);
+  const rawLinks = graphInfo?.links || [];
+  const expanded = graphManager.expanded;
+
+  return (
+    <GraphContext.Provider
+      value={{
+        hoverManager: useHoverManager(rawLinks),
+        graphManager: graphManager,
+        graphStyle: {
+          activeColor: inputGraphStyle.activeColor || FALLBACK_ACTIVE_COLOR,
+          defaultColor: inputGraphStyle.defaultColor || FALLBACK_DEFAULT_COLOR,
+          graphBg: inputGraphStyle.graphBg || FALLBACK_BACKGROUND_COLOR,
+        },
+      }}
+    >
+      {expanded &&
+        createPortal(
+          <div className={expanded ? styles.modalOverlay : styles.hidden}>
+            <GraphContent modal expandable={false} />
+          </div>,
+          document.body
+        )}
+      <GraphContent />
+    </GraphContext.Provider>
+  );
+}