This commit is contained in:
@@ -24,7 +24,8 @@
|
|||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 让 Mermaid 容器看起来可点击 */
|
/* 让 Mermaid 区域看起来可点击 */
|
||||||
.mermaid {
|
.mermaid,
|
||||||
|
.mermaid svg {
|
||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
}
|
}
|
||||||
|
|||||||
+12
-16
@@ -1,14 +1,10 @@
|
|||||||
// Mermaid 图表点击放大 — 事件委托方案
|
// Mermaid 图表点击放大 — 事件委托方案
|
||||||
;(function () {
|
;(function () {
|
||||||
// 创建 overlay
|
function openZoom(svgEl) {
|
||||||
function openZoom(mermaidEl) {
|
if (!svgEl) return;
|
||||||
var svg = mermaidEl.querySelector('svg');
|
|
||||||
if (!svg) return;
|
|
||||||
|
|
||||||
// 防止重复打开
|
|
||||||
if (document.querySelector('.mermaid-zoom-overlay')) return;
|
if (document.querySelector('.mermaid-zoom-overlay')) return;
|
||||||
|
|
||||||
var clone = svg.cloneNode(true);
|
var clone = svgEl.cloneNode(true);
|
||||||
clone.removeAttribute('width');
|
clone.removeAttribute('width');
|
||||||
clone.removeAttribute('height');
|
clone.removeAttribute('height');
|
||||||
clone.style.width = 'auto';
|
clone.style.width = 'auto';
|
||||||
@@ -39,18 +35,18 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 事件委托:点击时往上找 .mermaid
|
// 事件委托:点击 article 内的 svg(Mermaid 渲染产出)
|
||||||
document.addEventListener('click', function (e) {
|
document.addEventListener('click', function (e) {
|
||||||
var target = e.target.closest('.mermaid');
|
var svg = e.target.closest('article .mermaid svg, article .mermaid');
|
||||||
if (target) {
|
if (svg) {
|
||||||
|
// 如果点击的是 .mermaid 容器本身,找里面的 svg
|
||||||
|
if (svg.tagName !== 'svg') {
|
||||||
|
svg = svg.querySelector('svg');
|
||||||
|
}
|
||||||
|
if (!svg) return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
openZoom(target);
|
openZoom(svg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 兼容 MkDocs Material instant navigation:
|
|
||||||
// 页面切换后 Mermaid 可能重新渲染,无需重新绑定(事件委托天然兼容)
|
|
||||||
// 但需要确保 .mermaid 的 cursor 样式对新渲染的图表也生效
|
|
||||||
// (CSS 全局生效,无需额外处理)
|
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in New Issue
Block a user