various polish

Jacky Zhao

2023-07-02 e0ebee5aa9b3646de722f139f1d8d15591df538e

 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)
})