From d618a4e3f376028902e481b78466e8fbedd860aa Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 10 Mar 2025 06:36:10 +0000
Subject: [PATCH] fix(explorer): dont rely on data to get slug, compute it in trie
---
quartz/components/scripts/graph.inline.ts | 32 ++++++++++++++++++++++++++------
1 files changed, 26 insertions(+), 6 deletions(-)
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 6bf43aa..8342460 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -8,6 +8,7 @@
forceCenter,
forceLink,
forceCollide,
+ forceRadial,
zoomIdentity,
select,
drag,
@@ -87,6 +88,7 @@
removeTags,
showTags,
focusOnHover,
+ enableRadial,
} = JSON.parse(graph.dataset["cfg"]!) as D3Config
const data: Map<SimpleSlug, ContentDetails> = new Map(
@@ -161,15 +163,20 @@
})),
}
+ const width = graph.offsetWidth
+ const height = Math.max(graph.offsetHeight, 250)
+
// we virtualize the simulation and use pixi to actually render it
+ // Calculate the radius of the container circle
+ const radius = Math.min(width, height) / 2 - 40 // 40px padding
const simulation: Simulation<NodeData, LinkData> = forceSimulation<NodeData>(graphData.nodes)
.force("charge", forceManyBody().strength(-100 * repelForce))
.force("center", forceCenter().strength(centerForce))
.force("link", forceLink(graphData.links).distance(linkDistance))
.force("collide", forceCollide<NodeData>((n) => nodeRadius(n)).iterations(3))
- const width = graph.offsetWidth
- const height = Math.max(graph.offsetHeight, 250)
+ if (enableRadial)
+ simulation.force("radial", forceRadial(radius * 0.8, width / 2, height / 2).strength(0.3))
// precompute style prop strings as pixi doesn't support css variables
const cssVars = [
@@ -363,9 +370,9 @@
const stage = app.stage
stage.interactive = false
- const labelsContainer = new Container<Text>({ zIndex: 3 })
- const nodesContainer = new Container<Graphics>({ zIndex: 2 })
- const linkContainer = new Container<Graphics>({ zIndex: 1 })
+ const labelsContainer = new Container<Text>({ zIndex: 3, isRenderGroup: true })
+ const nodesContainer = new Container<Graphics>({ zIndex: 2, isRenderGroup: true })
+ const linkContainer = new Container<Graphics>({ zIndex: 1, isRenderGroup: true })
stage.addChild(nodesContainer, labelsContainer, linkContainer)
for (const n of graphData.nodes) {
@@ -550,6 +557,19 @@
addToVisited(simplifySlug(slug))
await renderGraph("graph-container", slug)
+ // Function to re-render the graph when the theme changes
+ const handleThemeChange = () => {
+ renderGraph("graph-container", slug)
+ }
+
+ // event listener for theme change
+ document.addEventListener("themechange", handleThemeChange)
+
+ // cleanup for the event listener
+ window.addCleanup(() => {
+ document.removeEventListener("themechange", handleThemeChange)
+ })
+
const container = document.getElementById("global-graph-outer")
const sidebar = container?.closest(".sidebar") as HTMLElement
@@ -567,7 +587,7 @@
function hideGlobalGraph() {
container?.classList.remove("active")
if (sidebar) {
- sidebar.style.zIndex = "unset"
+ sidebar.style.zIndex = ""
}
}
--
Gitblit v1.10.0