✨ Improved simulation configurations / UX enhancements

chanjunren · Feb 7, 2025 · e6d9749 · e6d9749
1 parent 6bd818a
commit e6d9749
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 15 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: () => {},
+    containerWidth: 0,
+    containerHeight: 0,
   },
   graphStyle: {},
 });
diff --git a/src/plugin/css/index.module.css b/src/plugin/css/index.module.css
@@ -1,7 +1,7 @@
 :root {
     --vaultusaurus-modal-width: 80%;
     --vaultusaurus-modal-height: 60%;
-    --vaultusaurus-icon-size: 1.7rem;
+    --vaultusaurus-icon-size: 1.6rem;
 }
 
 .container {
@@ -50,11 +50,12 @@
     transition-property: all;
     transition-duration: 0.3s;
     cursor: pointer;
-    color: var(--default-color);
+    color: var(--vaultusaurus-default-color);
 }
 
 .actionIcon:hover {
     opacity: 1;
+    scale: 110%;
 }
 
 .graphComponent {

diff --git a/src/plugin/hooks/useGraphManager.ts b/src/plugin/hooks/useGraphManager.ts
@@ -9,11 +9,6 @@ import {
   Simulation,
 } from "d3-force";
 import { useEffect, useMemo, useRef, useState } from "react";
-
-const WIDTH = 240;
-const HEIGHT = 240;
-const LINK_DISTANCE = 50;
-
 export default function useGraphManager(rawData: GraphInfo) {
   const graphData = useMemo(() => structuredClone(rawData), [rawData]);
 
@@ -30,6 +25,10 @@ export default function useGraphManager(rawData: GraphInfo) {
 
   const [expanded, setExpanded] = useState<boolean>(false);
 
+  const containerWidth = expanded ? 800 : 320;
+  const containerHeight = expanded ? 450 : 320;
+  const LINK_DISTANCE = expanded ? 55 : 40;
+
   useEffect(() => {
     if (!graphData?.nodes) {
       return;
@@ -40,15 +39,17 @@ export default function useGraphManager(rawData: GraphInfo) {
       ObsidianNoteLink
     >(Object.values(nodes))
       .alphaDecay(0.01)
+      .velocityDecay(0.1)
       .force(
         "link",
         forceLink<ObsidianNoteNode, ObsidianNoteLink>(links)
           .id((d) => d.id)
           .distance(LINK_DISTANCE)
+          .strength(0.01) // Softer link strength to reduce rigidity
       )
-      .force("center", forceCenter(WIDTH / 2, HEIGHT / 2))
-      .force("charge", forceManyBody())
-      .force("collision", forceCollide())
+      .force("center", forceCenter(containerWidth / 2, containerHeight / 2)) // Center the graph
+      .force("charge", forceManyBody().strength(-5)) // Softer repulsion
+      .force("collision", forceCollide().radius(10).strength(0.01)) // Smoother collision
       .on("tick", () => {
         const newNodes = toNodeMap(currentSimulation.nodes());
         setNodes(newNodes);
@@ -61,9 +62,31 @@ export default function useGraphManager(rawData: GraphInfo) {
       console.log("STOPPING");
       currentSimulation.stop();
     };
-  }, [graphData]);
+  }, [graphData, expanded]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setExpanded(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
 
-  return { nodes, links, simulation, expanded, setExpanded };
+  return {
+    nodes,
+    links,
+    simulation,
+    expanded,
+    setExpanded,
+    containerWidth,
+    containerHeight,
+  };
 }
 
 function toNodeMap(nodes: ObsidianNoteNode[]) {

diff --git a/src/plugin/theme/VaultusaurusGraph/GraphContent.tsx b/src/plugin/theme/VaultusaurusGraph/GraphContent.tsx
@@ -29,7 +29,8 @@ export default function GraphContent({
   modal = false,
 }): ReactElement<IGraphContent> {
   const { graphStyle, graphManager } = useContext(GraphContext);
-  const { setExpanded, nodes, links } = graphManager;
+  const { setExpanded, nodes, links, containerWidth, containerHeight } =
+    graphManager;
 
   const inlineStyles = {
     "--vaultusaurus-graph-bg": graphStyle.graphBg,
@@ -44,6 +45,7 @@ export default function GraphContent({
     <div
       className={modal ? styles.modalContainer : styles.container}
       style={inlineStyles}
+      onClick={(e) => e.stopPropagation()}
     >
       {!modal && expandable && (
         <ExpandIcon
@@ -57,7 +59,11 @@ export default function GraphContent({
           onClick={() => setExpanded(false)}
         />
       )}
-      <svg viewBox={`0 0 300 300`} ref={container}>
+      <svg
+        viewBox={`0 0 ${containerWidth} ${containerHeight}`}
+        preserveAspectRatio="xMidYMid meet"
+        ref={container}
+      >
         <g transform={transform}>
           {links.map((link, idx) => {
             return <GraphLink key={`obsidian-link-${idx}`} link={link} />;

diff --git a/src/plugin/theme/VaultusaurusGraph/index.tsx b/src/plugin/theme/VaultusaurusGraph/index.tsx
@@ -49,7 +49,10 @@ export default function VaultusaurusGraph({
     >
       {expanded &&
         createPortal(
-          <div className={expanded ? styles.modalOverlay : styles.hidden}>
+          <div
+            className={expanded ? styles.modalOverlay : styles.hidden}
+            onClick={() => graphManager.setExpanded(false)}
+          >
             <GraphContent modal expandable={false} />
           </div>,
           document.body