From 7fa9253abc1e4056d425847e2eaa5a8e107fc297 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Wed, 28 May 2025 23:20:59 +0000
Subject: [PATCH] Node 22 (#1997)
---
quartz/components/scripts/graph.inline.ts | 150 +++++++++++++++++++++++++++++++++++++++----------
1 files changed, 118 insertions(+), 32 deletions(-)
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 6bf43aa..9c8ec60 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,
@@ -67,11 +68,33 @@
stop: () => void
}
-async function renderGraph(container: string, fullSlug: FullSlug) {
+// workaround for pixijs webgpu issue: https://github.com/pixijs/pixijs/issues/11389
+async function determineGraphicsAPI(): Promise<"webgpu" | "webgl"> {
+ const adapter = await navigator.gpu?.requestAdapter().catch(() => null)
+ const device = adapter && (await adapter.requestDevice().catch(() => null))
+ if (!device) {
+ return "webgl"
+ }
+
+ const canvas = document.createElement("canvas")
+ const gl =
+ (canvas.getContext("webgl2") as WebGL2RenderingContext | null) ??
+ (canvas.getContext("webgl") as WebGLRenderingContext | null)
+
+ // we have to return webgl so pixijs automatically falls back to canvas
+ if (!gl) {
+ return "webgl"
+ }
+
+ const webglMaxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS)
+ const webgpuMaxTextures = device.limits.maxSampledTexturesPerShaderStage
+
+ return webglMaxTextures === webgpuMaxTextures ? "webgpu" : "webgl"
+}
+
+async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
const slug = simplifySlug(fullSlug)
const visited = getVisited()
- const graph = document.getElementById(container)
- if (!graph) return
removeAllChildren(graph)
let {
@@ -87,6 +110,7 @@
removeTags,
showTags,
focusOnHover,
+ enableRadial,
} = JSON.parse(graph.dataset["cfg"]!) as D3Config
const data: Map<SimpleSlug, ContentDetails> = new Map(
@@ -161,6 +185,9 @@
})),
}
+ const width = graph.offsetWidth
+ const height = Math.max(graph.offsetHeight, 250)
+
// we virtualize the simulation and use pixi to actually render it
const simulation: Simulation<NodeData, LinkData> = forceSimulation<NodeData>(graphData.nodes)
.force("charge", forceManyBody().strength(-100 * repelForce))
@@ -168,8 +195,8 @@
.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)
+ const radius = (Math.min(width, height) / 2) * 0.8
+ if (enableRadial) simulation.force("radial", forceRadial(radius).strength(0.2))
// precompute style prop strings as pixi doesn't support css variables
const cssVars = [
@@ -346,6 +373,7 @@
tweens.forEach((tween) => tween.stop())
tweens.clear()
+ const pixiPreference = await determineGraphicsAPI()
const app = new Application()
await app.init({
width,
@@ -354,7 +382,7 @@
autoStart: false,
autoDensity: true,
backgroundAlpha: 0,
- preference: "webgpu",
+ preference: pixiPreference,
resolution: window.devicePixelRatio,
eventMode: "static",
})
@@ -363,9 +391,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) {
@@ -397,7 +425,6 @@
})
.circle(0, 0, nodeRadius(n))
.fill({ color: isTagNode ? computedStyleMap["--light"] : color(n) })
- .stroke({ width: isTagNode ? 2 : 0, color: color(n) })
.on("pointerover", (e) => {
updateHoverInfo(e.target.label)
oldLabelOpacity = label.alpha
@@ -413,6 +440,10 @@
}
})
+ if (isTagNode) {
+ gfx.stroke({ width: 2, color: computedStyleMap["--tertiary"] })
+ }
+
nodesContainer.addChild(gfx)
labelsContainer.addChild(label)
@@ -517,7 +548,9 @@
)
}
+ let stopAnimation = false
function animate(time: number) {
+ if (stopAnimation) return
for (const n of nodeRenderData) {
const { x, y } = n.simulationData
if (!x || !y) continue
@@ -541,48 +574,101 @@
requestAnimationFrame(animate)
}
- const graphAnimationFrameHandle = requestAnimationFrame(animate)
- window.addCleanup(() => cancelAnimationFrame(graphAnimationFrameHandle))
+ requestAnimationFrame(animate)
+ return () => {
+ stopAnimation = true
+ app.destroy()
+ }
+}
+
+let localGraphCleanups: (() => void)[] = []
+let globalGraphCleanups: (() => void)[] = []
+
+function cleanupLocalGraphs() {
+ for (const cleanup of localGraphCleanups) {
+ cleanup()
+ }
+ localGraphCleanups = []
+}
+
+function cleanupGlobalGraphs() {
+ for (const cleanup of globalGraphCleanups) {
+ cleanup()
+ }
+ globalGraphCleanups = []
}
document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
const slug = e.detail.url
addToVisited(simplifySlug(slug))
- await renderGraph("graph-container", slug)
- const container = document.getElementById("global-graph-outer")
- const sidebar = container?.closest(".sidebar") as HTMLElement
-
- function renderGlobalGraph() {
- const slug = getFullSlug(window)
- container?.classList.add("active")
- if (sidebar) {
- sidebar.style.zIndex = "1"
+ async function renderLocalGraph() {
+ cleanupLocalGraphs()
+ const localGraphContainers = document.getElementsByClassName("graph-container")
+ for (const container of localGraphContainers) {
+ localGraphCleanups.push(await renderGraph(container as HTMLElement, slug))
}
+ }
- renderGraph("global-graph-container", slug)
- registerEscapeHandler(container, hideGlobalGraph)
+ await renderLocalGraph()
+ const handleThemeChange = () => {
+ void renderLocalGraph()
+ }
+
+ document.addEventListener("themechange", handleThemeChange)
+ window.addCleanup(() => {
+ document.removeEventListener("themechange", handleThemeChange)
+ })
+
+ const containers = [...document.getElementsByClassName("global-graph-outer")] as HTMLElement[]
+ async function renderGlobalGraph() {
+ const slug = getFullSlug(window)
+ for (const container of containers) {
+ container.classList.add("active")
+ const sidebar = container.closest(".sidebar") as HTMLElement
+ if (sidebar) {
+ sidebar.style.zIndex = "1"
+ }
+
+ const graphContainer = container.querySelector(".global-graph-container") as HTMLElement
+ registerEscapeHandler(container, hideGlobalGraph)
+ if (graphContainer) {
+ globalGraphCleanups.push(await renderGraph(graphContainer, slug))
+ }
+ }
}
function hideGlobalGraph() {
- container?.classList.remove("active")
- if (sidebar) {
- sidebar.style.zIndex = "unset"
+ cleanupGlobalGraphs()
+ for (const container of containers) {
+ container.classList.remove("active")
+ const sidebar = container.closest(".sidebar") as HTMLElement
+ if (sidebar) {
+ sidebar.style.zIndex = ""
+ }
}
}
async function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
if (e.key === "g" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
e.preventDefault()
- const globalGraphOpen = container?.classList.contains("active")
- globalGraphOpen ? hideGlobalGraph() : renderGlobalGraph()
+ const anyGlobalGraphOpen = containers.some((container) =>
+ container.classList.contains("active"),
+ )
+ anyGlobalGraphOpen ? hideGlobalGraph() : renderGlobalGraph()
}
}
- const containerIcon = document.getElementById("global-graph-icon")
- containerIcon?.addEventListener("click", renderGlobalGraph)
- window.addCleanup(() => containerIcon?.removeEventListener("click", renderGlobalGraph))
+ const containerIcons = document.getElementsByClassName("global-graph-icon")
+ Array.from(containerIcons).forEach((icon) => {
+ icon.addEventListener("click", renderGlobalGraph)
+ window.addCleanup(() => icon.removeEventListener("click", renderGlobalGraph))
+ })
document.addEventListener("keydown", shortcutHandler)
- window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler))
+ window.addCleanup(() => {
+ document.removeEventListener("keydown", shortcutHandler)
+ cleanupLocalGraphs()
+ cleanupGlobalGraphs()
+ })
})
--
Gitblit v1.10.0