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 | 44 +++++++++++++++++++++++++++++++-------------
1 files changed, 31 insertions(+), 13 deletions(-)
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 1c1149d..169b8c4 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -1,6 +1,6 @@
import { ContentDetails } from "../../plugins/emitters/contentIndex"
import * as d3 from 'd3'
-import { registerEscapeHandler } from "./handler"
+import { registerEscapeHandler, relative, removeAllChildren } from "./util"
type NodeData = {
id: string,
@@ -13,19 +13,19 @@
target: string
}
-function relative(from: string, to: string) {
- const pieces = [location.protocol, '//', location.host, location.pathname]
- const url = pieces.join('').slice(0, -from.length) + to
- return url
+const localStorageKey = "graph-visited"
+function getVisited(): Set<string> {
+ return new Set(JSON.parse(localStorage.getItem(localStorageKey) ?? "[]"))
}
-function removeAllChildren(node: HTMLElement) {
- while (node.firstChild) {
- node.removeChild(node.firstChild)
- }
+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)
@@ -117,9 +117,14 @@
// calculate radius
const color = (d: NodeData) => {
- // TODO: does this handle the index page
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>) => {
@@ -261,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")
@@ -280,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