From 906f91f8eed5e91a7afae95c7002a3e4553d6aae Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 13 Jul 2023 07:19:35 +0000
Subject: [PATCH] base path refactor, more docs
---
quartz/components/scripts/graph.inline.ts | 38 ++++++++++++++++++--------------------
1 files changed, 18 insertions(+), 20 deletions(-)
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 194a23b..6682d70 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -1,24 +1,25 @@
import { ContentDetails } from "../../plugins/emitters/contentIndex"
import * as d3 from 'd3'
-import { registerEscapeHandler, relative, removeAllChildren } from "./util"
+import { registerEscapeHandler, clientSideRelativePath, removeAllChildren } from "./util"
+import { CanonicalSlug } from "../../path"
type NodeData = {
- id: string,
+ id: CanonicalSlug,
text: string,
tags: string[]
} & d3.SimulationNodeDatum
type LinkData = {
- source: string,
- target: string
+ source: CanonicalSlug,
+ target: CanonicalSlug
}
const localStorageKey = "graph-visited"
-function getVisited(): Set<string> {
+function getVisited(): Set<CanonicalSlug> {
return new Set(JSON.parse(localStorage.getItem(localStorageKey) ?? "[]"))
}
-function addToVisited(slug: string) {
+function addToVisited(slug: CanonicalSlug) {
const visited = getVisited()
visited.add(slug)
localStorage.setItem(localStorageKey, JSON.stringify([...visited]))
@@ -72,7 +73,7 @@
}
}
} else {
- links.flatMap(l => [l.source, l.target]).forEach((id) => neighbourhood.add(id))
+ Object.keys(data).forEach(id => neighbourhood.add(id))
}
const graphData: { nodes: NodeData[], links: LinkData[] } = {
@@ -167,7 +168,7 @@
.attr("fill", color)
.style("cursor", "pointer")
.on("click", (_, d) => {
- const targ = relative(slug, d.id)
+ const targ = clientSideRelativePath(slug, d.id)
window.spaNavigate(new URL(targ))
})
.on("mouseover", function(_, d) {
@@ -225,7 +226,7 @@
const labels = graphNode
.append("text")
.attr("dx", 0)
- .attr("dy", (d) => nodeRadius(d) - 8 + "px")
+ .attr("dy", (d) => -nodeRadius(d) + "px")
.attr("text-anchor", "middle")
.text((d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
.style('opacity', (opacityScale - 1) / 3.75)
@@ -274,12 +275,20 @@
function renderGlobalGraph() {
const slug = document.body.dataset["slug"]!
const container = document.getElementById("global-graph-outer")
+ const sidebar = container?.closest(".sidebar") as HTMLElement
container?.classList.add("active")
+ if (sidebar) {
+ sidebar.style.zIndex = "1"
+ }
+
renderGraph("global-graph-container", slug)
function hideGlobalGraph() {
container?.classList.remove("active")
const graph = document.getElementById("global-graph-container")
+ if (sidebar) {
+ sidebar.style.zIndex = "unset"
+ }
if (!graph) return
removeAllChildren(graph)
}
@@ -297,14 +306,3 @@
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