From c538c151c7462ad0395ff2c15c5e11e89e362aa8 Mon Sep 17 00:00:00 2001
From: Striven <sg.striven@cutecat.club>
Date: Sat, 04 Apr 2026 19:47:16 +0000
Subject: [PATCH] Initial commit
---
quartz/components/scripts/mermaid.inline.ts | 182 ++++++++++++++++++++++++++++++---------------
1 files changed, 120 insertions(+), 62 deletions(-)
diff --git a/quartz/components/scripts/mermaid.inline.ts b/quartz/components/scripts/mermaid.inline.ts
index 77a3ebe..1039973 100644
--- a/quartz/components/scripts/mermaid.inline.ts
+++ b/quartz/components/scripts/mermaid.inline.ts
@@ -1,5 +1,4 @@
-import { removeAllChildren } from "./util"
-import mermaid from "mermaid"
+import { registerEscapeHandler, removeAllChildren } from "./util"
interface Position {
x: number
@@ -13,7 +12,8 @@
private scale = 1
private readonly MIN_SCALE = 0.5
private readonly MAX_SCALE = 3
- private readonly ZOOM_SENSITIVITY = 0.001
+
+ cleanups: (() => void)[] = []
constructor(
private container: HTMLElement,
@@ -21,19 +21,47 @@
) {
this.setupEventListeners()
this.setupNavigationControls()
+ this.resetTransform()
}
private setupEventListeners() {
// Mouse drag events
- this.container.addEventListener("mousedown", this.onMouseDown.bind(this))
- document.addEventListener("mousemove", this.onMouseMove.bind(this))
- document.addEventListener("mouseup", this.onMouseUp.bind(this))
+ const mouseDownHandler = this.onMouseDown.bind(this)
+ const mouseMoveHandler = this.onMouseMove.bind(this)
+ const mouseUpHandler = this.onMouseUp.bind(this)
- // Wheel zoom events
- this.container.addEventListener("wheel", this.onWheel.bind(this), { passive: false })
+ // Touch drag events
+ const touchStartHandler = this.onTouchStart.bind(this)
+ const touchMoveHandler = this.onTouchMove.bind(this)
+ const touchEndHandler = this.onTouchEnd.bind(this)
- // Reset on window resize
- window.addEventListener("resize", this.resetTransform.bind(this))
+ const resizeHandler = this.resetTransform.bind(this)
+
+ this.container.addEventListener("mousedown", mouseDownHandler)
+ document.addEventListener("mousemove", mouseMoveHandler)
+ document.addEventListener("mouseup", mouseUpHandler)
+
+ this.container.addEventListener("touchstart", touchStartHandler, { passive: false })
+ document.addEventListener("touchmove", touchMoveHandler, { passive: false })
+ document.addEventListener("touchend", touchEndHandler)
+
+ window.addEventListener("resize", resizeHandler)
+
+ this.cleanups.push(
+ () => this.container.removeEventListener("mousedown", mouseDownHandler),
+ () => document.removeEventListener("mousemove", mouseMoveHandler),
+ () => document.removeEventListener("mouseup", mouseUpHandler),
+ () => this.container.removeEventListener("touchstart", touchStartHandler),
+ () => document.removeEventListener("touchmove", touchMoveHandler),
+ () => document.removeEventListener("touchend", touchEndHandler),
+ () => window.removeEventListener("resize", resizeHandler),
+ )
+ }
+
+ cleanup() {
+ for (const cleanup of this.cleanups) {
+ cleanup()
+ }
}
private setupNavigationControls() {
@@ -85,26 +113,30 @@
this.container.style.cursor = "grab"
}
- private onWheel(e: WheelEvent) {
- e.preventDefault()
+ private onTouchStart(e: TouchEvent) {
+ if (e.touches.length !== 1) return
+ this.isDragging = true
+ const touch = e.touches[0]
+ this.startPan = { x: touch.clientX - this.currentPan.x, y: touch.clientY - this.currentPan.y }
+ }
- const delta = -e.deltaY * this.ZOOM_SENSITIVITY
- const newScale = Math.min(Math.max(this.scale + delta, this.MIN_SCALE), this.MAX_SCALE)
+ private onTouchMove(e: TouchEvent) {
+ if (!this.isDragging || e.touches.length !== 1) return
+ e.preventDefault() // Prevent scrolling
- // Calculate mouse position relative to content
- const rect = this.content.getBoundingClientRect()
- const mouseX = e.clientX - rect.left
- const mouseY = e.clientY - rect.top
+ const touch = e.touches[0]
+ this.currentPan = {
+ x: touch.clientX - this.startPan.x,
+ y: touch.clientY - this.startPan.y,
+ }
- // Adjust pan to zoom around mouse position
- const scaleDiff = newScale - this.scale
- this.currentPan.x -= mouseX * scaleDiff
- this.currentPan.y -= mouseY * scaleDiff
-
- this.scale = newScale
this.updateTransform()
}
+ private onTouchEnd() {
+ this.isDragging = false
+ }
+
private zoom(delta: number) {
const newScale = Math.min(Math.max(this.scale + delta, this.MIN_SCALE), this.MAX_SCALE)
@@ -126,8 +158,16 @@
}
private resetTransform() {
+ const svg = this.content.querySelector("svg")!
+ const rect = svg.getBoundingClientRect()
+ const width = rect.width / this.scale
+ const height = rect.height / this.scale
+
this.scale = 1
- this.currentPan = { x: 0, y: 0 }
+ this.currentPan = {
+ x: (this.container.clientWidth - width) / 2,
+ y: (this.container.clientHeight - height) / 2,
+ }
this.updateTransform()
}
}
@@ -144,37 +184,65 @@
"--codeFont",
] as const
+let mermaidImport = undefined
document.addEventListener("nav", async () => {
const center = document.querySelector(".center") as HTMLElement
const nodes = center.querySelectorAll("code.mermaid") as NodeListOf<HTMLElement>
if (nodes.length === 0) return
- const computedStyleMap = cssVars.reduce(
- (acc, key) => {
- acc[key] = getComputedStyle(document.documentElement).getPropertyValue(key)
- return acc
- },
- {} as Record<(typeof cssVars)[number], string>,
+ mermaidImport ||= await import(
+ // @ts-ignore
+ "https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.esm.min.mjs"
)
+ const mermaid = mermaidImport.default
- const darkMode = document.documentElement.getAttribute("saved-theme") === "dark"
- mermaid.initialize({
- startOnLoad: false,
- securityLevel: "loose",
- theme: darkMode ? "dark" : "base",
- themeVariables: {
- fontFamily: computedStyleMap["--codeFont"],
- primaryColor: computedStyleMap["--light"],
- primaryTextColor: computedStyleMap["--darkgray"],
- primaryBorderColor: computedStyleMap["--tertiary"],
- lineColor: computedStyleMap["--darkgray"],
- secondaryColor: computedStyleMap["--secondary"],
- tertiaryColor: computedStyleMap["--tertiary"],
- clusterBkg: computedStyleMap["--light"],
- edgeLabelBackground: computedStyleMap["--highlight"],
- },
- })
- await mermaid.run({ nodes })
+ const textMapping: WeakMap<HTMLElement, string> = new WeakMap()
+ for (const node of nodes) {
+ textMapping.set(node, node.innerText)
+ }
+
+ async function renderMermaid() {
+ // de-init any other diagrams
+ for (const node of nodes) {
+ node.removeAttribute("data-processed")
+ const oldText = textMapping.get(node)
+ if (oldText) {
+ node.innerHTML = oldText
+ }
+ }
+
+ const computedStyleMap = cssVars.reduce(
+ (acc, key) => {
+ acc[key] = window.getComputedStyle(document.documentElement).getPropertyValue(key)
+ return acc
+ },
+ {} as Record<(typeof cssVars)[number], string>,
+ )
+
+ const darkMode = document.documentElement.getAttribute("saved-theme") === "dark"
+ mermaid.initialize({
+ startOnLoad: false,
+ securityLevel: "loose",
+ theme: darkMode ? "dark" : "base",
+ themeVariables: {
+ fontFamily: computedStyleMap["--codeFont"],
+ primaryColor: computedStyleMap["--light"],
+ primaryTextColor: computedStyleMap["--darkgray"],
+ primaryBorderColor: computedStyleMap["--tertiary"],
+ lineColor: computedStyleMap["--darkgray"],
+ secondaryColor: computedStyleMap["--secondary"],
+ tertiaryColor: computedStyleMap["--tertiary"],
+ clusterBkg: computedStyleMap["--light"],
+ edgeLabelBackground: computedStyleMap["--highlight"],
+ },
+ })
+
+ await mermaid.run({ nodes })
+ }
+
+ await renderMermaid()
+ document.addEventListener("themechange", renderMermaid)
+ window.addCleanup(() => document.removeEventListener("themechange", renderMermaid))
for (let i = 0; i < nodes.length; i++) {
const codeBlock = nodes[i] as HTMLElement
@@ -197,7 +265,6 @@
if (!popupContainer) return
let panZoom: DiagramPanZoom | null = null
-
function showMermaid() {
const container = popupContainer.querySelector("#mermaid-space") as HTMLElement
const content = popupContainer.querySelector(".mermaid-content") as HTMLElement
@@ -218,25 +285,16 @@
function hideMermaid() {
popupContainer.classList.remove("active")
+ panZoom?.cleanup()
panZoom = null
}
- function handleEscape(e: any) {
- if (e.key === "Escape") {
- hideMermaid()
- }
- }
-
- const closeBtn = popupContainer.querySelector(".close-button") as HTMLButtonElement
-
- closeBtn.addEventListener("click", hideMermaid)
expandBtn.addEventListener("click", showMermaid)
- document.addEventListener("keydown", handleEscape)
+ registerEscapeHandler(popupContainer, hideMermaid)
window.addCleanup(() => {
- closeBtn.removeEventListener("click", hideMermaid)
+ panZoom?.cleanup()
expandBtn.removeEventListener("click", showMermaid)
- document.removeEventListener("keydown", handleEscape)
})
}
})
--
Gitblit v1.10.0