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

fmt

Browse Source
This commit is contained in:
Jacky Zhao 2024-08-25 00:27:48 -07:00
parent 34ecff05d2
commit 448960a3e7
1 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -153,12 +153,12 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
}) })
const graphData: { nodes: NodeData[]; links: LinkData[] } = { const graphData: { nodes: NodeData[]; links: LinkData[] } = {
nodes, nodes,
links: links.filter( links: links
(l) => neighbourhood.has(l.source) && neighbourhood.has(l.target), .filter((l) => neighbourhood.has(l.source) && neighbourhood.has(l.target))
).map((l) => ({ .map((l) => ({
source: nodes.find((n) => n.id === l.source)!, source: nodes.find((n) => n.id === l.source)!,
target: nodes.find((n) => n.id === l.target)! target: nodes.find((n) => n.id === l.target)!,
})), })),
} }
// we virtualize the simulation and use pixi to actually render it // we virtualize the simulation and use pixi to actually render it
@ -182,10 +182,13 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
"--darkgray", "--darkgray",
"--bodyFont", "--bodyFont",
] as const ] as const
const computedStyleMap = cssVars.reduce((acc, key) => { const computedStyleMap = cssVars.reduce(
acc[key] = getComputedStyle(document.documentElement).getPropertyValue(key) (acc, key) => {
return acc acc[key] = getComputedStyle(document.documentElement).getPropertyValue(key)
}, {} as Record<typeof cssVars[number], string>) return acc
},
{} as Record<(typeof cssVars)[number], string>,
)
// calculate color // calculate color
const color = (d: NodeData) => { const color = (d: NodeData) => {
@ -200,7 +203,9 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
} }
function nodeRadius(d: NodeData) { function nodeRadius(d: NodeData) {
const numLinks = graphData.links.filter((l) => l.source.id === d.id || l.target.id === d.id).length const numLinks = graphData.links.filter(
(l) => l.source.id === d.id || l.target.id === d.id,
).length
return 2 + Math.sqrt(numLinks) return 2 + Math.sqrt(numLinks)
} }
@ -278,17 +283,23 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
if (hoveredNodeId === nodeId) { if (hoveredNodeId === nodeId) {
tweenGroup.add( tweenGroup.add(
new Tweened<Text>(n.label).to({ new Tweened<Text>(n.label).to(
alpha: 1, {
scale: { x: activeScale, y: activeScale } alpha: 1,
}, 100) scale: { x: activeScale, y: activeScale },
},
100,
),
) )
} else { } else {
tweenGroup.add( tweenGroup.add(
new Tweened<Text>(n.label).to({ new Tweened<Text>(n.label).to(
alpha: n.label.alpha, {
scale: { x: defaultScale, y: defaultScale } alpha: n.label.alpha,
}, 100) scale: { x: defaultScale, y: defaultScale },
},
100,
),
) )
} }
} }
@ -375,7 +386,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
}) })
label.scale.set(1 / scale) label.scale.set(1 / scale)
let oldLabelOpacity = 0; let oldLabelOpacity = 0
const isTagNode = nodeId.startsWith("tags/") const isTagNode = nodeId.startsWith("tags/")
const gfx = new Graphics({ const gfx = new Graphics({
interactive: true, interactive: true,
@ -418,7 +429,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
} }
for (const l of graphData.links) { for (const l of graphData.links) {
const gfx = new Graphics({ interactive: false, eventMode: 'none' }) const gfx = new Graphics({ interactive: false, eventMode: "none" })
linkContainer.addChild(gfx) linkContainer.addChild(gfx)
const linkRenderDatum: LinkRenderData = { const linkRenderDatum: LinkRenderData = {
@ -495,16 +506,14 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
// zoom adjusts opacity of labels too // zoom adjusts opacity of labels too
const scale = transform.k * opacityScale const scale = transform.k * opacityScale
let scaleOpacity = Math.max((scale - 1) / 3.75, 0) let scaleOpacity = Math.max((scale - 1) / 3.75, 0)
const activeNodes = nodeRenderData const activeNodes = nodeRenderData.filter((n) => n.active).flatMap((n) => n.label)
.filter((n) => n.active)
.flatMap((n) => n.label)
for (const label of labelsContainer.children) { for (const label of labelsContainer.children) {
if (!activeNodes.includes(label)) { if (!activeNodes.includes(label)) {
label.alpha = scaleOpacity label.alpha = scaleOpacity
} }
} }
}) }),
) )
} }