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): fix anchor position and zIndex behaviour

Browse Source 
Signed-off-by: Aaron Pham <contact@aarnphm.xyz>
This commit is contained in:
Aaron Pham 2024-08-16 17:05:50 -04:00
parent 525177cf83
commit 84f7d31672
No known key found for this signature in database
GPG Key ID: 18974753009D2BFA
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
quartz/components/Graph.tsx
View File

@ -44,9 +44,9 @@ const defaultOptions: GraphOptions = {
drag: true, drag: true,
zoom: true, zoom: true,
depth: -1, depth: -1,
scale: 1.1, scale: 1,
repelForce: 0.5, repelForce: 0.5,
centerForce: 0.3, centerForce: 0.1,
linkDistance: 30, linkDistance: 30,
fontSize: 12, fontSize: 12,
opacityScale: 1, opacityScale: 1,

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

@ -148,7 +148,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
} }
const simulation: d3.Simulation<NodeData, LinkNodes> = d3 const simulation: d3.Simulation<NodeData, LinkNodes> = d3
.forceSimulation(graphData.nodes) .forceSimulation<NodeData>(graphData.nodes)
.force("charge", d3.forceManyBody().strength(-100 * repelForce)) .force("charge", d3.forceManyBody().strength(-100 * repelForce))
.force("center", d3.forceCenter().strength(centerForce)) .force("center", d3.forceCenter().strength(centerForce))
.force( .force(
@ -332,7 +332,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
const label = new PIXI.Text({ const label = new PIXI.Text({
text: n.text, text: n.text,
alpha: 0, alpha: 0,
anchor: { x: 0.5, y: -0.5 }, anchor: { x: 0.5, y: -1 },
style: { style: {
fontSize, fontSize,
fill: computedStyleMap.get("--dark"), fill: computedStyleMap.get("--dark"),
@ -352,6 +352,8 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
}) })
.circle(0, 0, nodeRadius(n)) .circle(0, 0, nodeRadius(n))
.on("pointerover", () => { .on("pointerover", () => {
nodesContainer.zIndex = 2
labelsContainer.zIndex = 1
if (!dragging) { if (!dragging) {
tweens.get(nodeId)?.stop() tweens.get(nodeId)?.stop()
const tweenScale = { x: 1, y: 1 } const tweenScale = { x: 1, y: 1 }
@ -378,6 +380,8 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
currentHoverNodeId = undefined currentHoverNodeId = undefined
}) })
.on("pointerleave", () => { .on("pointerleave", () => {
nodesContainer.zIndex = 1
labelsContainer.zIndex = 2
if (!dragging) { if (!dragging) {
tweens.get(nodeId)?.stop() tweens.get(nodeId)?.stop()
const tweenScale = { const tweenScale = {
@ -398,6 +402,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
} }
}) })
n.gfx = gfx n.gfx = gfx
n.r = nodeRadius(n)
if (n.id.startsWith("tags/")) { if (n.id.startsWith("tags/")) {
gfx.fill({ color: computedStyleMap.get("--light") }).stroke({ width: 0.5, color: color(n) }) gfx.fill({ color: computedStyleMap.get("--light") }).stroke({ width: 0.5, color: color(n) })