tags | kshao-blog-前端知识记录

` 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) } const attachMermaidViewerButton = wrap => { let btn = wrap.querySelector('.mermaid-open-btn') if (!btn) { btn = document.createElement('button') btn.type = 'button' btn.className = 'mermaid-open-btn' wrap.appendChild(btn) } btn.innerHTML = '' if (!btn.__mermaidViewerBound) { btn.addEventListener('click', e => { e.preventDefault() e.stopPropagation() 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 } } // Zoom around a point (px, py) in the SVG viewport (in viewBox coordinates) const zoomAtPoint = (vb, factor, px, py) => { const w = vb[2] * factor const h = vb[3] * factor const nx = px - (px - vb[0]) * factor const ny = py - (py - vb[1]) * factor return [nx, ny, w, h] } const initMermaidGestures = wrap => { const svg = wrap.querySelector('svg') if (!svg) return // Ensure viewBox exists so gestures always work const initVb = getSvgViewBox(svg) wrap.__mermaidInitViewBox = initVb wrap.__mermaidCurViewBox = initVb.slice() setSvgViewBox(svg, initVb) // Avoid binding multiple times on themeChange/pjax if (wrap.__mermaidGestureBound) return wrap.__mermaidGestureBound = true // 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 } } 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) } const onPointerDown = e => { // Allow only primary button for mouse if (e.pointerType === 'mouse' && e.button !== 0) return svg.setPointerCapture(e.pointerId) state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }) if (state.pointers.size === 1) { state.startVb = (wrap.__mermaidCurViewBox || getSvgViewBox(svg)).slice() } 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 } } } 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 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]]) 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 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 onPointerUpOrCancel = e => { 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] } } // Wheel zoom (mouse/trackpad) const onWheel = e => { // ctrlKey on mac trackpad pinch; we treat both as zoom 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)) } const onDblClick = () => { const init = wrap.__mermaidInitViewBox if (!init) return wrap.__mermaidCurViewBox = init.slice() setSvgViewBox(svg, 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) } const runMermaid = ele => { window.loadMermaid = true const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default' ele.forEach((item, index) => { const mermaidSrc = item.firstElementChild // Clear old render (themeChange/pjax will rerun) const oldSvg = item.querySelector('svg') if (oldSvg) oldSvg.remove() item.__mermaidGestureBound = false const config = mermaidSrc.dataset.config ? JSON.parse(mermaidSrc.dataset.config) : {} if (!config.theme) { config.theme = theme } const mermaidThemeConfig = `%%{init: ${JSON.stringify(config)}}%%\n` const mermaidID = `mermaid-${index}` const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent const renderFn = mermaid.render(mermaidID, mermaidDefinition) const renderMermaid = svg => { mermaidSrc.insertAdjacentHTML('afterend', svg) if (true) initMermaidGestures(item) item.__mermaidOriginalSvg = svg if (true) attachMermaidViewerButton(item) } // mermaid v9 and v10 compatibility typeof renderFn === 'string' ? renderMermaid(renderFn) : renderFn.then(({ svg }) => renderMermaid(svg)) }) } const codeToMermaid = () => { const codeMermaidEle = document.querySelectorAll('pre > code.mermaid') if (codeMermaidEle.length === 0) return codeMermaidEle.forEach(ele => { const preEle = document.createElement('pre') preEle.className = 'mermaid-src' preEle.hidden = true preEle.textContent = ele.textContent const newEle = document.createElement('div') newEle.className = 'mermaid-wrap' newEle.appendChild(preEle) ele.parentNode.replaceWith(newEle) }) } const loadMermaid = () => { if (false) codeToMermaid() const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap') if ($mermaid.length === 0) return const runMermaidFn = () => runMermaid($mermaid) btf.addGlobalFn('themeChange', runMermaidFn, 'mermaid') window.loadMermaid ? runMermaidFn() : btf.getScript('https://s4.zstatic.net/npm/mermaid@11.12.2/dist/mermaid.min.js').then(runMermaidFn) } btf.addGlobalFn('encrypt', loadMermaid, 'mermaid') window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid) })()

数据加载中