From e0ebee5aa9b3646de722f139f1d8d15591df538e Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 02 Jul 2023 20:08:29 +0000
Subject: [PATCH] various polish
---
quartz/components/scripts/graph.inline.ts | 37 ++++++++++++++++++++++++++++++++++---
1 files changed, 34 insertions(+), 3 deletions(-)
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 4ff2dfe..169b8c4 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -13,7 +13,19 @@
target: string
}
+const localStorageKey = "graph-visited"
+function getVisited(): Set<string> {
+ return new Set(JSON.parse(localStorage.getItem(localStorageKey) ?? "[]"))
+}
+
+function addToVisited(slug: string) {
+ const visited = getVisited()
+ visited.add(slug)
+ localStorage.setItem(localStorageKey, JSON.stringify([...visited]))
+}
+
async function renderGraph(container: string, slug: string) {
+ const visited = getVisited()
const graph = document.getElementById(container)
if (!graph) return
removeAllChildren(graph)
@@ -106,7 +118,13 @@
// calculate radius
const color = (d: NodeData) => {
const isCurrent = d.id === slug
- return isCurrent ? "var(--secondary)" : "var(--gray)"
+ if (isCurrent) {
+ return "var(--secondary)"
+ } else if (visited.has(d.id)) {
+ return "var(--tertiary)"
+ } else {
+ return "var(--gray)"
+ }
}
const drag = (simulation: d3.Simulation<NodeData, LinkData>) => {
@@ -248,9 +266,9 @@
})
}
-function renderGlobalGraph() {
+async function renderGlobalGraph() {
const slug = document.body.dataset["slug"]!
- renderGraph("global-graph-container", slug)
+ await renderGraph("global-graph-container", slug)
const container = document.getElementById("global-graph-outer")
container?.classList.add("active")
@@ -267,9 +285,22 @@
document.addEventListener("nav", async (e: unknown) => {
const slug = (e as CustomEventMap["nav"]).detail.url
+ addToVisited(slug)
await renderGraph("graph-container", slug)
const containerIcon = document.getElementById("global-graph-icon")
containerIcon?.removeEventListener("click", renderGlobalGraph)
containerIcon?.addEventListener("click", renderGlobalGraph)
})
+
+let resizeEventDebounce: number | undefined = undefined
+window.addEventListener('resize', () => {
+ if (resizeEventDebounce) {
+ clearTimeout(resizeEventDebounce)
+ }
+
+ resizeEventDebounce = window.setTimeout(async () => {
+ const slug = document.body.dataset["slug"]!
+ await renderGraph("graph-container", slug)
+ }, 50)
+})
--
Gitblit v1.10.0