mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-08-08 19:48:42 +08:00
improvement
This commit is contained in:
myw
+133
-95
@@ -51,7 +51,7 @@ script.
|
||||
clone.setAttribute('viewBox', initViewBox.join(' '))
|
||||
}
|
||||
if (!clone.getAttribute('xmlns')) clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
|
||||
if (!clone.getAttribute('xmlns:xlink') && clone.outerHTML.includes('xlink:')) {
|
||||
if (!clone.getAttribute('xmlns:xlink') && clone.innerHTML.includes('xlink:')) {
|
||||
clone.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
|
||||
}
|
||||
// inject background to match current theme
|
||||
@@ -70,7 +70,8 @@ script.
|
||||
const blob = new Blob([htmlSource], { type: 'text/html;charset=utf-8' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
window.open(url, '_blank', 'noopener')
|
||||
setTimeout(() => URL.revokeObjectURL(url), 30000)
|
||||
|
||||
setTimeout(() => URL.revokeObjectURL(url), 5000)
|
||||
}
|
||||
|
||||
const attachMermaidViewerButton = wrap => {
|
||||
@@ -91,10 +92,6 @@ script.
|
||||
const svg = wrap.__mermaidOriginalSvg || wrap.querySelector('svg')
|
||||
if (!svg) return
|
||||
const initViewBox = wrap.__mermaidInitViewBox
|
||||
if (typeof svg === 'string') {
|
||||
openSvgInNewTab({ source: svg, initViewBox })
|
||||
return
|
||||
}
|
||||
openSvgInNewTab({ source: svg, initViewBox })
|
||||
})
|
||||
btn.__mermaidViewerBound = true
|
||||
@@ -111,6 +108,13 @@ script.
|
||||
}
|
||||
|
||||
const initMermaidGestures = wrap => {
|
||||
// Clean up previous event listeners and pending frames
|
||||
if (wrap.__mermaidAbortController) {
|
||||
wrap.__mermaidAbortController.abort()
|
||||
if (wrap.__mermaidRafId) cancelAnimationFrame(wrap.__mermaidRafId)
|
||||
}
|
||||
const ac = new AbortController()
|
||||
wrap.__mermaidAbortController = ac
|
||||
const svg = wrap.querySelector('svg')
|
||||
if (!svg) return
|
||||
|
||||
@@ -119,158 +123,177 @@ script.
|
||||
wrap.__mermaidInitViewBox = initVb
|
||||
wrap.__mermaidCurViewBox = initVb.slice()
|
||||
setSvgViewBox(svg, initVb)
|
||||
// Disable default gestures to prevent scroll chaining and pinch-zoom penetration in Chrome
|
||||
svg.style.touchAction = 'none'
|
||||
|
||||
// Avoid binding multiple times on themeChange/pjax
|
||||
if (wrap.__mermaidGestureBound) return
|
||||
wrap.__mermaidGestureBound = true
|
||||
// Cache BoundingClientRect, throttled on scroll to reduce reflow
|
||||
let cachedRect = svg.getBoundingClientRect()
|
||||
let rectDirty = false
|
||||
const markRectDirty = () => { rectDirty = true }
|
||||
window.addEventListener('resize', markRectDirty, { signal: ac.signal })
|
||||
window.addEventListener('scroll', markRectDirty, { signal: ac.signal, capture: true })
|
||||
const getRect = () => {
|
||||
if (rectDirty) {
|
||||
cachedRect = svg.getBoundingClientRect()
|
||||
rectDirty = false
|
||||
}
|
||||
return cachedRect
|
||||
}
|
||||
|
||||
// Helper: map client (viewport) coordinate -> viewBox coordinate
|
||||
const clientToViewBox = (clientX, clientY) => {
|
||||
const rect = svg.getBoundingClientRect()
|
||||
const vb = wrap.__mermaidCurViewBox || getSvgViewBox(svg)
|
||||
const x = vb[0] + (clientX - rect.left) * (vb[2] / rect.width)
|
||||
const y = vb[1] + (clientY - rect.top) * (vb[3] / rect.height)
|
||||
return { x, y, rect, vb }
|
||||
// Precompute clamp bounds from initial viewBox
|
||||
const minW = initVb[2] * 0.1
|
||||
const maxW = initVb[2] * 10
|
||||
const minH = initVb[3] * 0.1
|
||||
const maxH = initVb[3] * 10
|
||||
const clampVb = vb => {
|
||||
const out = vb.slice()
|
||||
out[2] = clamp(out[2], minW, maxW)
|
||||
out[3] = clamp(out[3], minH, maxH)
|
||||
return out
|
||||
}
|
||||
|
||||
// Throttle DOM updates using requestAnimationFrame
|
||||
let pendingVb = null
|
||||
let rafId = null
|
||||
const applyVb = () => {
|
||||
if (pendingVb) {
|
||||
wrap.__mermaidCurViewBox = pendingVb
|
||||
setSvgViewBox(svg, pendingVb)
|
||||
pendingVb = null
|
||||
}
|
||||
rafId = null
|
||||
wrap.__mermaidRafId = null
|
||||
}
|
||||
const setCurVb = vb => {
|
||||
pendingVb = clampVb(vb)
|
||||
if (!rafId) {
|
||||
rafId = requestAnimationFrame(applyVb)
|
||||
wrap.__mermaidRafId = rafId
|
||||
}
|
||||
}
|
||||
|
||||
const state = {
|
||||
pointers: new Map(),
|
||||
startVb: null,
|
||||
startDist: 0,
|
||||
startCenter: null
|
||||
}
|
||||
|
||||
const clampVb = vb => {
|
||||
const init = wrap.__mermaidInitViewBox || vb
|
||||
const minW = init[2] * 0.1
|
||||
const maxW = init[2] * 10
|
||||
const minH = init[3] * 0.1
|
||||
const maxH = init[3] * 10
|
||||
vb[2] = clamp(vb[2], minW, maxW)
|
||||
vb[3] = clamp(vb[3], minH, maxH)
|
||||
return vb
|
||||
}
|
||||
|
||||
const setCurVb = vb => {
|
||||
vb = clampVb(vb)
|
||||
wrap.__mermaidCurViewBox = vb
|
||||
setSvgViewBox(svg, vb)
|
||||
lastPointerX: 0,
|
||||
lastPointerY: 0
|
||||
}
|
||||
|
||||
const onPointerDown = e => {
|
||||
// Allow only primary button for mouse
|
||||
if (e.pointerType === 'mouse' && e.button !== 0) return
|
||||
svg.setPointerCapture(e.pointerId)
|
||||
const curVb = wrap.__mermaidCurViewBox
|
||||
state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
|
||||
|
||||
if (state.pointers.size === 1) {
|
||||
state.startVb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice()
|
||||
state.startVb = curVb.slice()
|
||||
state.lastPointerX = e.clientX
|
||||
state.lastPointerY = e.clientY
|
||||
} else if (state.pointers.size === 2) {
|
||||
const pts = [...state.pointers.values()]
|
||||
const dx = pts[0].x - pts[1].x
|
||||
const dy = pts[0].y - pts[1].y
|
||||
state.startDist = Math.hypot(dx, dy)
|
||||
state.startVb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice()
|
||||
state.startCenter = { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 }
|
||||
state.startVb = curVb.slice()
|
||||
}
|
||||
}
|
||||
|
||||
const onPointerMove = e => {
|
||||
if (!state.pointers.has(e.pointerId)) return
|
||||
state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY })
|
||||
|
||||
// Pan with 1 pointer
|
||||
const curVb = wrap.__mermaidCurViewBox
|
||||
const rect = getRect()
|
||||
if (state.pointers.size === 1 && state.startVb) {
|
||||
const p = [...state.pointers.values()][0]
|
||||
const prev = { x: e.clientX - e.movementX, y: e.clientY - e.movementY }
|
||||
// movementX/Y unreliable on touch, compute from stored last position
|
||||
const last = wrap.__mermaidLastSinglePointer || p
|
||||
const dxClient = p.x - last.x
|
||||
const dyClient = p.y - last.y
|
||||
wrap.__mermaidLastSinglePointer = p
|
||||
|
||||
const { rect } = clientToViewBox(p.x, p.y)
|
||||
const vb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice()
|
||||
const dx = dxClient * (vb[2] / rect.width)
|
||||
const dy = dyClient * (vb[3] / rect.height)
|
||||
setCurVb([vb[0] - dx, vb[1] - dy, vb[2], vb[3]])
|
||||
const p = state.pointers.values().next().value
|
||||
const dxClient = p.x - state.lastPointerX
|
||||
const dyClient = p.y - state.lastPointerY
|
||||
state.lastPointerX = p.x
|
||||
state.lastPointerY = p.y
|
||||
const dx = dxClient * (curVb[2] / rect.width)
|
||||
const dy = dyClient * (curVb[3] / rect.height)
|
||||
setCurVb([curVb[0] - dx, curVb[1] - dy, curVb[2], curVb[3]])
|
||||
return
|
||||
}
|
||||
|
||||
// Pinch zoom with 2 pointers
|
||||
if (state.pointers.size === 2 && state.startVb && state.startDist > 0) {
|
||||
const pts = [...state.pointers.values()]
|
||||
const dx = pts[0].x - pts[1].x
|
||||
const dy = pts[0].y - pts[1].y
|
||||
const dist = Math.hypot(dx, dy)
|
||||
if (!dist) return
|
||||
const factor = state.startDist / dist // dist bigger => zoom in (viewBox smaller)
|
||||
|
||||
const factor = state.startDist / dist
|
||||
const cx = (pts[0].x + pts[1].x) / 2
|
||||
const cy = (pts[0].y + pts[1].y) / 2
|
||||
const centerClient = { x: cx, y: cy }
|
||||
|
||||
const pxy = clientToViewBox(centerClient.x, centerClient.y)
|
||||
const cpx = pxy.x
|
||||
const cpy = pxy.y
|
||||
|
||||
const vb = zoomAtPoint(state.startVb, factor, cpx, cpy)
|
||||
setCurVb(vb)
|
||||
const px = curVb[0] + (cx - rect.left) * (curVb[2] / rect.width)
|
||||
const py = curVb[1] + (cy - rect.top) * (curVb[3] / rect.height)
|
||||
setCurVb(zoomAtPoint(state.startVb, factor, px, py))
|
||||
}
|
||||
}
|
||||
|
||||
const onPointerUpOrCancel = e => {
|
||||
// Release PointerCapture to avoid event capture anomalies
|
||||
if (svg.hasPointerCapture && svg.hasPointerCapture(e.pointerId)) {
|
||||
svg.releasePointerCapture(e.pointerId)
|
||||
}
|
||||
state.pointers.delete(e.pointerId)
|
||||
if (state.pointers.size === 0) {
|
||||
state.startVb = null
|
||||
state.startDist = 0
|
||||
state.startCenter = null
|
||||
wrap.__mermaidLastSinglePointer = null
|
||||
} else if (state.pointers.size === 1) {
|
||||
// reset single pointer baseline to avoid jump
|
||||
wrap.__mermaidLastSinglePointer = [...state.pointers.values()][0]
|
||||
const p = state.pointers.values().next().value
|
||||
state.lastPointerX = p.x
|
||||
state.lastPointerY = p.y
|
||||
}
|
||||
}
|
||||
|
||||
// Wheel zoom (mouse/trackpad)
|
||||
const onWheel = e => {
|
||||
// ctrlKey on mac trackpad pinch; we treat both as zoom
|
||||
// Prevent event bubbling from triggering external scroll
|
||||
e.preventDefault()
|
||||
const delta = e.deltaY
|
||||
const zoomFactor = delta > 0 ? 1.1 : 0.9
|
||||
const { x, y } = clientToViewBox(e.clientX, e.clientY)
|
||||
const vb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice()
|
||||
setCurVb(zoomAtPoint(vb, zoomFactor, x, y))
|
||||
e.stopPropagation()
|
||||
// Normalize deltaY across deltaMode (Chrome uses pixels, Safari uses lines)
|
||||
let delta = e.deltaY
|
||||
if (e.deltaMode === 1) delta *= 16
|
||||
else if (e.deltaMode === 2) delta *= 400
|
||||
|
||||
// Continuous zoom factor: smoother than fixed 1.1/0.9 steps
|
||||
const zoomFactor = Math.pow(1.001, delta)
|
||||
|
||||
const curVb = wrap.__mermaidCurViewBox
|
||||
const rect = getRect()
|
||||
const px = curVb[0] + (e.clientX - rect.left) * (curVb[2] / rect.width)
|
||||
const py = curVb[1] + (e.clientY - rect.top) * (curVb[3] / rect.height)
|
||||
setCurVb(zoomAtPoint(curVb, zoomFactor, px, py))
|
||||
}
|
||||
|
||||
const onDblClick = () => {
|
||||
const init = wrap.__mermaidInitViewBox
|
||||
if (!init) return
|
||||
wrap.__mermaidCurViewBox = init.slice()
|
||||
setSvgViewBox(svg, init)
|
||||
if (init) setCurVb(init)
|
||||
}
|
||||
|
||||
svg.addEventListener('pointerdown', onPointerDown)
|
||||
svg.addEventListener('pointermove', onPointerMove)
|
||||
svg.addEventListener('pointerup', onPointerUpOrCancel)
|
||||
svg.addEventListener('pointercancel', onPointerUpOrCancel)
|
||||
svg.addEventListener('wheel', onWheel, { passive: false })
|
||||
svg.addEventListener('dblclick', onDblClick)
|
||||
svg.addEventListener('pointerdown', onPointerDown, { signal: ac.signal })
|
||||
svg.addEventListener('pointermove', onPointerMove, { signal: ac.signal })
|
||||
svg.addEventListener('pointerup', onPointerUpOrCancel, { signal: ac.signal })
|
||||
svg.addEventListener('pointercancel', onPointerUpOrCancel, { signal: ac.signal })
|
||||
svg.addEventListener('wheel', onWheel, { passive: false, signal: ac.signal })
|
||||
svg.addEventListener('dblclick', onDblClick, { signal: ac.signal })
|
||||
}
|
||||
|
||||
const runMermaid = ele => {
|
||||
window.loadMermaid = true
|
||||
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
|
||||
|
||||
ele.forEach((item, index) => {
|
||||
const mermaidSrc = item.firstElementChild
|
||||
|
||||
// Clear old render (themeChange/pjax will rerun)
|
||||
// Clean up event listeners before removing old SVG
|
||||
if (item.__mermaidAbortController) {
|
||||
item.__mermaidAbortController.abort()
|
||||
}
|
||||
const oldSvg = item.querySelector('svg')
|
||||
if (oldSvg) oldSvg.remove()
|
||||
item.__mermaidGestureBound = false
|
||||
|
||||
const config = mermaidSrc.dataset.config ? JSON.parse(mermaidSrc.dataset.config) : {}
|
||||
let config = {}
|
||||
try {
|
||||
config = mermaidSrc.dataset.config ? JSON.parse(mermaidSrc.dataset.config) : {}
|
||||
} catch (e) {
|
||||
console.warn('[mermaid] failed to parse dataset.config:', e)
|
||||
}
|
||||
if (!config.theme) {
|
||||
config.theme = theme
|
||||
}
|
||||
@@ -278,7 +301,6 @@ script.
|
||||
const mermaidID = `mermaid-${index}`
|
||||
const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
|
||||
|
||||
const renderFn = mermaid.render(mermaidID, mermaidDefinition)
|
||||
const renderMermaid = svg => {
|
||||
mermaidSrc.insertAdjacentHTML('afterend', svg)
|
||||
if (!{theme.mermaid.zoom_pan}) initMermaidGestures(item)
|
||||
@@ -286,9 +308,25 @@ script.
|
||||
if (!{theme.mermaid.open_in_new_tab}) attachMermaidViewerButton(item)
|
||||
}
|
||||
|
||||
const handleError = err => {
|
||||
console.error(`[mermaid] render failed for block #${index}:`, err)
|
||||
const errorEl = document.createElement('div')
|
||||
errorEl.className = 'mermaid-error'
|
||||
errorEl.textContent = `Mermaid render error: ${err.message || err}`
|
||||
mermaidSrc.insertAdjacentElement('afterend', errorEl)
|
||||
}
|
||||
|
||||
// mermaid v9 and v10 compatibility
|
||||
typeof renderFn === 'string' ? renderMermaid(renderFn) : renderFn.then(({ svg }) => renderMermaid(svg))
|
||||
try {
|
||||
const renderFn = mermaid.render(mermaidID, mermaidDefinition)
|
||||
// mermaid v9 and v10 compatibility
|
||||
if (typeof renderFn === 'string') {
|
||||
renderMermaid(renderFn)
|
||||
} else {
|
||||
renderFn.then(({ svg }) => renderMermaid(svg)).catch(handleError)
|
||||
}
|
||||
} catch (err) {
|
||||
handleError(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user