From 84f7d31672a0445c3e67fb171843319bc2b8cf71 Mon Sep 17 00:00:00 2001
From: Aaron Pham <contact@aarnphm.xyz>
Date: Fri, 16 Aug 2024 17:05:50 -0400
Subject: [PATCH] fix(graph): fix anchor position and zIndex behaviour

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
---
 quartz/components/Graph.tsx               | 4 ++--
 quartz/components/scripts/graph.inline.ts | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx
index 389a977b8..0df3e3d22 100644
--- a/quartz/components/Graph.tsx
+++ b/quartz/components/Graph.tsx
@@ -44,9 +44,9 @@ const defaultOptions: GraphOptions = {
     drag: true,
     zoom: true,
     depth: -1,
-    scale: 1.1,
+    scale: 1,
     repelForce: 0.5,
-    centerForce: 0.3,
+    centerForce: 0.1,
     linkDistance: 30,
     fontSize: 12,
     opacityScale: 1,
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 0cfe258aa..3be18f946 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -148,7 +148,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
   }
 
   const simulation: d3.Simulation<NodeData, LinkNodes> = d3
-    .forceSimulation(graphData.nodes)
+    .forceSimulation<NodeData>(graphData.nodes)
     .force("charge", d3.forceManyBody().strength(-100 * repelForce))
     .force("center", d3.forceCenter().strength(centerForce))
     .force(
@@ -332,7 +332,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
     const label = new PIXI.Text({
       text: n.text,
       alpha: 0,
-      anchor: { x: 0.5, y: -0.5 },
+      anchor: { x: 0.5, y: -1 },
       style: {
         fontSize,
         fill: computedStyleMap.get("--dark"),
@@ -352,6 +352,8 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
     })
       .circle(0, 0, nodeRadius(n))
       .on("pointerover", () => {
+        nodesContainer.zIndex = 2
+        labelsContainer.zIndex = 1
         if (!dragging) {
           tweens.get(nodeId)?.stop()
           const tweenScale = { x: 1, y: 1 }
@@ -378,6 +380,8 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
         currentHoverNodeId = undefined
       })
       .on("pointerleave", () => {
+        nodesContainer.zIndex = 1
+        labelsContainer.zIndex = 2
         if (!dragging) {
           tweens.get(nodeId)?.stop()
           const tweenScale = {
@@ -398,6 +402,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
         }
       })
     n.gfx = gfx
+    n.r = nodeRadius(n)
 
     if (n.id.startsWith("tags/")) {
       gfx.fill({ color: computedStyleMap.get("--light") }).stroke({ width: 0.5, color: color(n) })