GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 15:05:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(graph): change svg as button

Browse Source 
render global graph on toggle

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
This commit is contained in:
Aaron Pham 2024-08-15 04:35:57 -04:00
parent b88be2f767
commit 525177cf83
No known key found for this signature in database
GPG Key ID: 18974753009D2BFA
3 changed files with 36 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
quartz/components/Graph.tsx
View File

@ -65,9 +65,9 @@ export default ((opts?: GraphOptions) => {
<h3>{i18n(cfg.locale).components.graph.title}</h3> <h3>{i18n(cfg.locale).components.graph.title}</h3>
<div class="graph-outer"> <div class="graph-outer">
<div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div> <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
<button id="global-graph-icon" aria-label="Global Graph">
<svg <svg
version="1.1" version="1.1"
id="global-graph-icon"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px" x="0px"
@ -90,9 +90,10 @@ export default ((opts?: GraphOptions) => {
s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z" s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"
/> />
</svg> </svg>
</button>
</div> </div>
<div id="global-graph-outer"> <div id="global-graph-outer">
<canvas id="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></canvas> <div id="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></div>
</div> </div>
</div> </div>
) )

12
quartz/components/scripts/graph.inline.ts
View File

@ -58,16 +58,12 @@ function animate(time: number) {
} }
requestAnimationFrame(animate) requestAnimationFrame(animate)
async function renderGraph(container: string, fullSlug: FullSlug, global?: boolean) { async function renderGraph(container: string, fullSlug: FullSlug) {
const slug = simplifySlug(fullSlug) const slug = simplifySlug(fullSlug)
const visited = getVisited() const visited = getVisited()
const graph = document.getElementById(container) const graph = document.getElementById(container)
if (!graph) return if (!graph) return
global = global ?? false
if (!global) {
removeAllChildren(graph) removeAllChildren(graph)
}
let { let {
drag: enableDrag, drag: enableDrag,
@ -306,7 +302,6 @@ async function renderGraph(container: string, fullSlug: FullSlug, global?: boole
await app.init({ await app.init({
width, width,
height, height,
canvas: global ? (graph as HTMLCanvasElement) : undefined,
antialias: true, antialias: true,
autoStart: false, autoStart: false,
autoDensity: true, autoDensity: true,
@ -315,10 +310,7 @@ async function renderGraph(container: string, fullSlug: FullSlug, global?: boole
resolution: window.devicePixelRatio, resolution: window.devicePixelRatio,
eventMode: "static", eventMode: "static",
}) })
if (!global) {
graph.appendChild(app.canvas) graph.appendChild(app.canvas)
}
const stage = app.stage const stage = app.stage
stage.interactive = false stage.interactive = false
@ -535,7 +527,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
sidebar.style.zIndex = "1" sidebar.style.zIndex = "1"
} }
renderGraph("global-graph-container", slug, true) renderGraph("global-graph-container", slug)
registerEscapeHandler(container, hideGlobalGraph) registerEscapeHandler(container, hideGlobalGraph)
} }

7
quartz/components/styles/graph.scss
View File

@ -16,10 +16,13 @@
overflow: hidden; overflow: hidden;
& > #global-graph-icon { & > #global-graph-icon {
cursor: pointer;
background: none;
border: none;
color: var(--dark); color: var(--dark);
opacity: 0.5; opacity: 0.5;
width: 18px; width: 24px;
height: 18px; height: 24px;
position: absolute; position: absolute;
padding: 0.2rem; padding: 0.2rem;
margin: 0.3rem; margin: 0.3rem;