more ui improvements, better defaults

3 files changed, 34 insertions, 27 deletions

diff --git a/components/config.ts b/components/config.ts
index 2cc4b54..89b6dd0 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -12,9 +12,11 @@ for (let type in Easing) {
   }
 }
 
+export const algos = algorithms
+
 export const initialPhysics = {
   enabled: true,
-  charge: -350,
+  charge: -500,
   collision: true,
   collisionStrength: 20,
   centering: true,
@@ -25,7 +27,7 @@ export const initialPhysics = {
   alphaTarget: 0,
   alphaMin: 0,
   velocityDecay: 0.25,
-  gravity: 0.5,
+  gravity: 0.3,
   gravityOn: true,
 }
 
@@ -42,21 +44,20 @@ export const initialVisuals = {
   particles: false,
   particlesNumber: 0,
   particlesWidth: 4,
-  linkOpacity: 0.7,
+  linkOpacity: 0.8,
   linkWidth: 1,
   nodeRel: 4,
-  nodeOpacity: 0.9,
-  nodeResolution: 8,
+  nodeOpacity: 1,
+  nodeResolution: 12,
   labels: 2,
   labelScale: 1.5,
   highlight: true,
   highlightNodeSize: 2,
   highlightLinkSize: 2,
-  highlightAnim: false,
-  animationSpeed: 250,
-  algorithms: algorithms,
+  highlightAnim: true,
+  animationSpeed: 700,
   algorithmOptions: options,
-  algorithmName: 'CubicOut',
+  algorithmName: 'BackOut',
   linkColorScheme: 'gray.500',
   nodeColorScheme: [
     'red.500',
@@ -71,9 +72,9 @@ export const initialVisuals = {
   nodeHighlight: '',
   linkHighlight: 'purple.500',
   backgroundColor: 'white',
-  emacsNodeColor: '',
-  labelTextColor: 'white',
-  labelBackgroundColor: 'black',
+  emacsNodeColor: 'grey.800',
+  labelTextColor: 'black',
+  labelBackgroundColor: 'white',
   labelBackgroundOpacity: 0.7,
 }
 
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index e7653df..34421f1 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -128,7 +128,7 @@ export const Tweaks = (props: TweakProps) => {
           position="relative"
           boxShadow="xl"
         >
-          <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Box display="flex" justifyContent="space-between" alignItems="center" paddingRight={2}>
             <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}>
               <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay">
                 {threeDim ? '3D' : '2D'}
@@ -300,7 +300,7 @@ export const Tweaks = (props: TweakProps) => {
                               }
                             />
                             <EnableSection
-                              label="Keeps nodes centered"
+                              label="Center nodes"
                               value={physics.centering}
                               onChange={() =>
                                 setPhysics({ ...physics, centering: !physics.centering })
diff --git a/pages/index.tsx b/pages/index.tsx
index 75e6b17..a29600d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -29,6 +29,7 @@ import {
   initialVisuals,
   initialBehavior,
   initialMouse,
+  algos,
 } from '../components/config'
 import { Tweaks } from '../components/tweaks'
 
@@ -355,10 +356,11 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       if (physics.gravityOn) {
         fg.d3Force('x', d3.forceX().strength(physics.gravity))
         fg.d3Force('y', d3.forceY().strength(physics.gravity))
+        threeDim && fg.d3Force('z', d3.forceZ().strength(physics.gravity))
       } else {
         fg.d3Force('x', null)
         fg.d3Force('y', null)
-        threeDim ? fg.d3Force('z', null) : null
+        threeDim && fg.d3Force('z', null)
       }
       physics.centering
         ? fg.d3Force('center', d3.forceCenter().strength(physics.centeringStrength))
@@ -385,12 +387,15 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
   const [opacity, setOpacity] = useState<number>(1)
   const [fadeIn, cancel] = useAnimation((x) => setOpacity(x), {
     duration: visuals.animationSpeed,
-    algorithm: visuals.algorithms[visuals.algorithmName],
-  })
-  const [fadeOut] = useAnimation((x) => setOpacity(Math.min(opacity, -1 * (x - 1))), {
-    duration: visuals.animationSpeed,
-    algorithm: visuals.algorithms[visuals.algorithmName],
+    algorithm: algos[visuals.algorithmName],
   })
+  const [fadeOut, fadeOutCancel] = useAnimation(
+    (x) => setOpacity(Math.min(opacity, -1 * (x - 1))),
+    {
+      duration: visuals.animationSpeed,
+      algorithm: algos[visuals.algorithmName],
+    },
+  )
 
   const lastHoverNode = useRef<OrgRoamNode | null>(null)
   useEffect(() => {
@@ -401,7 +406,6 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       return hoverNode ? setOpacity(1) : setOpacity(0)
     }
     if (hoverNode) {
-      console.log(getNodeColorById(lastHoverNode.current!.id!))
       fadeIn()
     } else {
       // to prevent fadeout animation from starting at 1
@@ -578,7 +582,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       }
 
       const nodeTitle = (node as OrgRoamNode).title!
-      const label = nodeTitle.substring(0, Math.min(nodeTitle.length, 30))
+      const label = nodeTitle.substring(0, Math.min(nodeTitle.length, 40))
       // const label = 'label'
       const fontSize = 12 / globalScale
       const textWidth = ctx.measureText(label).width
@@ -678,6 +682,11 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
       if (!visuals.highlight) {
         return
       }
+
+      if (!hoverNode) {
+        fadeOutCancel()
+        setOpacity(0)
+      }
       setHoverNode(node)
     },
   }
@@ -697,13 +706,10 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
             if (!visuals.labels) {
               return
             }
-            if (visuals.labels === 2) {
-              return
-            }
-            if (visuals.labels === 1 && !highlightedNodes[node.id!]) {
+            if (visuals.labels < 3 && !highlightedNodes[node.id!]) {
               return
             }
-            const sprite = new SpriteText(node.title.substring(0, 30))
+            const sprite = new SpriteText(node.title.substring(0, 40))
             sprite.color = getThemeColor(visuals.labelTextColor)
             sprite.backgroundColor = getThemeColor(visuals.labelBackgroundColor)
             sprite.padding = 2