keb/jpg-quartz
1
0
Fork 0
mirror of https://github.com/ZetaKebab/quartz.git synced 2025-06-21 16:24:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(graph): enable radial mode (#1738)

Browse Source
This commit is contained in:
Aaron Pham
2025-02-01 16:22:29 -05:00
committed by GitHub
parent 7be47742a6
commit fbc45548f7
3 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import {
forceCenter,
forceLink,
forceCollide,
forceRadial,
zoomIdentity,
select,
drag,
@ -87,6 +88,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
removeTags,
showTags,
focusOnHover,
enableRadial,
} = JSON.parse(graph.dataset["cfg"]!) as D3Config
const data: Map<SimpleSlug, ContentDetails> = new Map(
@ -161,15 +163,20 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
})),
}
const width = graph.offsetWidth
const height = Math.max(graph.offsetHeight, 250)
// we virtualize the simulation and use pixi to actually render it
// Calculate the radius of the container circle
const radius = Math.min(width, height) / 2 - 40 // 40px padding
const simulation: Simulation<NodeData, LinkData> = forceSimulation<NodeData>(graphData.nodes)
.force("charge", forceManyBody().strength(-100 * repelForce))
.force("center", forceCenter().strength(centerForce))
.force("link", forceLink(graphData.links).distance(linkDistance))
.force("collide", forceCollide<NodeData>((n) => nodeRadius(n)).iterations(3))
const width = graph.offsetWidth
const height = Math.max(graph.offsetHeight, 250)
if (enableRadial)
simulation.force("radial", forceRadial(radius * 0.8, width / 2, height / 2).strength(0.3))
// precompute style prop strings as pixi doesn't support css variables
const cssVars = [