283 lines
8.5 KiB
TypeScript
283 lines
8.5 KiB
TypeScript
import { registerEscapeHandler, removeAllChildren } from "./util"
|
|
import {
|
|
argdown,
|
|
IArgdownRequest,
|
|
ParserPlugin,
|
|
ModelPlugin,
|
|
ColorPlugin,
|
|
HtmlExportPlugin
|
|
} from "@argdown/node"
|
|
|
|
interface Position {
|
|
x: number
|
|
y: number
|
|
}
|
|
|
|
class DiagramPanZoom {
|
|
private isDragging = false
|
|
private startPan: Position = { x: 0, y: 0 }
|
|
private currentPan: Position = { x: 0, y: 0 }
|
|
private scale = 1
|
|
private readonly MIN_SCALE = 0.5
|
|
private readonly MAX_SCALE = 3
|
|
|
|
cleanups: (() => void)[] = []
|
|
|
|
constructor(
|
|
private container: HTMLElement,
|
|
private content: HTMLElement,
|
|
) {
|
|
this.setupEventListeners()
|
|
this.setupNavigationControls()
|
|
this.resetTransform()
|
|
}
|
|
|
|
private setupEventListeners() {
|
|
// Mouse drag events
|
|
const mouseDownHandler = this.onMouseDown.bind(this)
|
|
const mouseMoveHandler = this.onMouseMove.bind(this)
|
|
const mouseUpHandler = this.onMouseUp.bind(this)
|
|
const resizeHandler = this.resetTransform.bind(this)
|
|
|
|
this.container.addEventListener("mousedown", mouseDownHandler)
|
|
document.addEventListener("mousemove", mouseMoveHandler)
|
|
document.addEventListener("mouseup", mouseUpHandler)
|
|
window.addEventListener("resize", resizeHandler)
|
|
|
|
this.cleanups.push(
|
|
() => this.container.removeEventListener("mousedown", mouseDownHandler),
|
|
() => document.removeEventListener("mousemove", mouseMoveHandler),
|
|
() => document.removeEventListener("mouseup", mouseUpHandler),
|
|
() => window.removeEventListener("resize", resizeHandler),
|
|
)
|
|
}
|
|
|
|
cleanup() {
|
|
for (const cleanup of this.cleanups) {
|
|
cleanup()
|
|
}
|
|
}
|
|
|
|
private setupNavigationControls() {
|
|
const controls = document.createElement("div")
|
|
controls.className = "argdown-controls"
|
|
|
|
// Zoom controls
|
|
const zoomIn = this.createButton("+", () => this.zoom(0.1))
|
|
const zoomOut = this.createButton("-", () => this.zoom(-0.1))
|
|
const resetBtn = this.createButton("Reset", () => this.resetTransform())
|
|
|
|
controls.appendChild(zoomOut)
|
|
controls.appendChild(resetBtn)
|
|
controls.appendChild(zoomIn)
|
|
|
|
this.container.appendChild(controls)
|
|
}
|
|
|
|
private createButton(text: string, onClick: () => void): HTMLButtonElement {
|
|
const button = document.createElement("button")
|
|
button.textContent = text
|
|
button.className = "argdown-control-button"
|
|
button.addEventListener("click", onClick)
|
|
window.addCleanup(() => button.removeEventListener("click", onClick))
|
|
return button
|
|
}
|
|
|
|
private onMouseDown(e: MouseEvent) {
|
|
if (e.button !== 0) return // Only handle left click
|
|
this.isDragging = true
|
|
this.startPan = { x: e.clientX - this.currentPan.x, y: e.clientY - this.currentPan.y }
|
|
this.container.style.cursor = "grabbing"
|
|
}
|
|
|
|
private onMouseMove(e: MouseEvent) {
|
|
if (!this.isDragging) return
|
|
e.preventDefault()
|
|
|
|
this.currentPan = {
|
|
x: e.clientX - this.startPan.x,
|
|
y: e.clientY - this.startPan.y,
|
|
}
|
|
|
|
this.updateTransform()
|
|
}
|
|
|
|
private onMouseUp() {
|
|
this.isDragging = false
|
|
this.container.style.cursor = "grab"
|
|
}
|
|
|
|
private zoom(delta: number) {
|
|
const newScale = Math.min(Math.max(this.scale + delta, this.MIN_SCALE), this.MAX_SCALE)
|
|
|
|
// Zoom around center
|
|
const rect = this.content.getBoundingClientRect()
|
|
const centerX = rect.width / 2
|
|
const centerY = rect.height / 2
|
|
|
|
const scaleDiff = newScale - this.scale
|
|
this.currentPan.x -= centerX * scaleDiff
|
|
this.currentPan.y -= centerY * scaleDiff
|
|
|
|
this.scale = newScale
|
|
this.updateTransform()
|
|
}
|
|
|
|
private updateTransform() {
|
|
this.content.style.transform = `translate(${this.currentPan.x}px, ${this.currentPan.y}px) scale(${this.scale})`
|
|
}
|
|
|
|
private resetTransform() {
|
|
this.scale = 1
|
|
const svg = this.content.querySelector("svg")!
|
|
this.currentPan = {
|
|
x: svg.getBoundingClientRect().width / 2,
|
|
y: svg.getBoundingClientRect().height / 2,
|
|
}
|
|
this.updateTransform()
|
|
}
|
|
}
|
|
|
|
// const cssVars = [
|
|
// "--secondary",
|
|
// "--tertiary",
|
|
// "--gray",
|
|
// "--light",
|
|
// "--lightgray",
|
|
// "--highlight",
|
|
// "--dark",
|
|
// "--darkgray",
|
|
// "--codeFont",
|
|
// ] as const
|
|
|
|
const argdownParser = new ParserPlugin()
|
|
argdown.addPlugin(argdownParser, "parse-input")
|
|
const argdownModeler = new ModelPlugin()
|
|
argdown.addPlugin(argdownModeler, "model-input")
|
|
const argdownPainter = new ColorPlugin()
|
|
argdown.addPlugin(argdownPainter, "paint-input")
|
|
const argdownHTML = new HtmlExportPlugin()
|
|
argdown.addPlugin(argdownHTML, "html")
|
|
|
|
// let argdownImport = undefined
|
|
document.addEventListener("nav", async () => {
|
|
const center = document.querySelector(".center") as HTMLElement
|
|
const nodes = center.querySelectorAll("code.argdown") as NodeListOf<HTMLElement>
|
|
if (nodes.length === 0) return
|
|
|
|
// argdownImport ||= await import(
|
|
// // @ts-ignore
|
|
// "https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/argdown.esm.min.mjs"
|
|
// )
|
|
// const mermaid = argdownImport.default
|
|
|
|
const textMapping: WeakMap<HTMLElement, string> = new WeakMap()
|
|
for (const node of nodes) {
|
|
textMapping.set(node, node.innerText)
|
|
}
|
|
|
|
async function renderArgdown() {
|
|
// de-init any other diagrams
|
|
let requests: Array<IArgdownRequest> = []
|
|
for (const node of nodes) {
|
|
node.removeAttribute("data-processed")
|
|
const oldText = textMapping.get(node)
|
|
if (oldText) {
|
|
node.innerHTML = oldText
|
|
requests.push(
|
|
{
|
|
node,
|
|
process: ["parse-input", "model-input", "paint-input", "html"]
|
|
}
|
|
)
|
|
}
|
|
}
|
|
|
|
// 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"
|
|
// argdown.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 argdown.run({ requests })
|
|
}
|
|
|
|
await renderArgdown()
|
|
document.addEventListener("themechange", renderArgdown)
|
|
window.addCleanup(() => document.removeEventListener("themechange", renderArgdown))
|
|
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
const codeBlock = nodes[i] as HTMLElement
|
|
const pre = codeBlock.parentElement as HTMLPreElement
|
|
const clipboardBtn = pre.querySelector(".clipboard-button") as HTMLButtonElement
|
|
const expandBtn = pre.querySelector(".expand-button") as HTMLButtonElement
|
|
|
|
const clipboardStyle = window.getComputedStyle(clipboardBtn)
|
|
const clipboardWidth =
|
|
clipboardBtn.offsetWidth +
|
|
parseFloat(clipboardStyle.marginLeft || "0") +
|
|
parseFloat(clipboardStyle.marginRight || "0")
|
|
|
|
// Set expand button position
|
|
expandBtn.style.right = `calc(${clipboardWidth}px + 0.3rem)`
|
|
pre.prepend(expandBtn)
|
|
|
|
// query popup container
|
|
const popupContainer = pre.querySelector("#argdown-container") as HTMLElement
|
|
if (!popupContainer) return
|
|
|
|
let panZoom: DiagramPanZoom | null = null
|
|
function showArgdown() {
|
|
const container = popupContainer.querySelector("#argdown-space") as HTMLElement
|
|
const content = popupContainer.querySelector(".argdown-content") as HTMLElement
|
|
if (!content) return
|
|
removeAllChildren(content)
|
|
|
|
// Clone the mermaid content
|
|
const argdownContent = codeBlock.querySelector("svg")!.cloneNode(true) as SVGElement
|
|
content.appendChild(argdownContent)
|
|
|
|
// Show container
|
|
popupContainer.classList.add("active")
|
|
container.style.cursor = "grab"
|
|
|
|
// Initialize pan-zoom after showing the popup
|
|
panZoom = new DiagramPanZoom(container, content)
|
|
}
|
|
|
|
function hideArgdown() {
|
|
popupContainer.classList.remove("active")
|
|
panZoom?.cleanup()
|
|
panZoom = null
|
|
}
|
|
|
|
expandBtn.addEventListener("click", showArgdown)
|
|
registerEscapeHandler(popupContainer, hideArgdown)
|
|
|
|
window.addCleanup(() => {
|
|
panZoom?.cleanup()
|
|
expandBtn.removeEventListener("click", showArgdown)
|
|
})
|
|
}
|
|
})
|