68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
// 等待 Mermaid 渲染完成（Mermaid 在 DOMContentLoaded 之后异步渲染）
|
|
const observer = new MutationObserver(function () {
|
|
const svgs = document.querySelectorAll('.mermaid svg');
|
|
if (svgs.length > 0) {
|
|
observer.disconnect();
|
|
initMermaidZoom();
|
|
}
|
|
});
|
|
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
|
|
// 也尝试立即初始化（以防 Mermaid 已经渲染完）
|
|
setTimeout(initMermaidZoom, 1000);
|
|
});
|
|
|
|
function initMermaidZoom() {
|
|
// 避免重复绑定
|
|
if (document.querySelector('.mermaid-zoom-overlay')) return;
|
|
|
|
document.querySelectorAll('.mermaid').forEach(function (el) {
|
|
if (el.dataset.zoomBound) return;
|
|
el.dataset.zoomBound = 'true';
|
|
|
|
el.addEventListener('click', function () {
|
|
const svg = el.querySelector('svg');
|
|
if (!svg) return;
|
|
|
|
const clone = svg.cloneNode(true);
|
|
// 让克隆的 SVG 自适应放大
|
|
clone.removeAttribute('width');
|
|
clone.removeAttribute('height');
|
|
clone.style.width = 'auto';
|
|
clone.style.height = 'auto';
|
|
clone.style.maxWidth = '95vw';
|
|
clone.style.maxHeight = '95vh';
|
|
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'mermaid-zoom-overlay';
|
|
overlay.appendChild(clone);
|
|
|
|
// 点击 overlay 关闭
|
|
overlay.addEventListener('click', function (e) {
|
|
if (e.target === overlay || e.target.closest('svg')) {
|
|
overlay.classList.remove('active');
|
|
setTimeout(function () { overlay.remove(); }, 200);
|
|
}
|
|
});
|
|
|
|
// ESC 关闭
|
|
function onKey(e) {
|
|
if (e.key === 'Escape') {
|
|
overlay.classList.remove('active');
|
|
setTimeout(function () { overlay.remove(); }, 200);
|
|
document.removeEventListener('keydown', onKey);
|
|
}
|
|
}
|
|
document.addEventListener('keydown', onKey);
|
|
|
|
document.body.appendChild(overlay);
|
|
// 触发动画
|
|
requestAnimationFrame(function () {
|
|
overlay.classList.add('active');
|
|
});
|
|
});
|
|
});
|
|
}
|