diff --git a/.prettierrc.json b/.prettierrc.json index 7ed5d6a71..f1bc35a4d 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,19 +1,6 @@ { - "arrowParens": "always", - "bracketSameLine": false, - "bracketSpacing": true, - "embeddedLanguageFormatting": "auto", - "htmlWhitespaceSensitivity": "css", - "insertPragma": false, - "jsxSingleQuote": false, "printWidth": 100, - "proseWrap": "preserve", "quoteProps": "as-needed", - "requirePragma": false, - "semi": true, - "singleQuote": false, - "tabWidth": 2, - "trailingComma": "es5", - "useTabs": false, - "vueIndentScriptAndStyle": false + "trailingComma": "all", + "tabWidth": 2 } diff --git a/assets/js/graph.js b/assets/js/graph.js index b7c95b3a6..a1cbba9ab 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -1,6 +1,8 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) { - if (!document.getElementById("graph-container")) return; - document.getElementById("graph-container").textContent = ""; + const container = document.getElementById("graph-container"); + // We should clear the graph in case there is anything within it + if (!container) return; + container.textContent = ""; const { index, links, content } = await fetchData; const curPage = url.replace(baseUrl, ""); @@ -8,6 +10,10 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege const parseIdsFromLinks = (links) => [ ...new Set(links.flatMap((link) => [link.source, link.target])), ]; + + // links is mutated by d3 + // we want to use links later on, so we make a copy and pass + // that one to d3 const copyLinks = JSON.parse(JSON.stringify(links)); const neighbours = new Set(); @@ -77,8 +83,8 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege .on("end", enableDrag ? dragended : noop); }; - const height = Math.max(document.getElementById("graph-container").offsetHeight, 250); - const width = document.getElementById("graph-container").offsetWidth; + const height = Math.max(container.offsetHeight, 250); + const width = container.offsetWidth; const simulation = d3 .forceSimulation(data.nodes) @@ -88,7 +94,7 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege d3 .forceLink(data.links) .id((d) => d.id) - .distance(40) + .distance(40), ) .force("center", d3.forceCenter()); @@ -224,7 +230,7 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege const scale = transform.k; const scaledOpacity = Math.max((scale - 1) / 3.75, 0); labels.attr("transform", transform).style("opacity", scaledOpacity); - }) + }), ); } diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 4824d9b5c..ec37f8816 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -51,6 +51,7 @@ window.navigate = navigate; router(".singlePage"); const callback = () => { + // RAF waits for Million to complete diffing, then draw requestAnimationFrame(() => { drawGraph( {{strings.TrimRight "/" .Page.Permalink}}, @@ -63,6 +64,7 @@ )} ); }; + // We need on initial load, then subsequent redirs window.addEventListener("million:navigate", callback); window.addEventListener("DOMContentLoaded", callback);