feat: 添加 Mermaid 图表拖拽和提示功能

- 添加鼠标左键拖拽移动图表
- 拖拽时显示 grabbing 光标,平时显示 grab 光标
- 添加底部提示文本:按住 Ctrl+滚轮缩放 | 拖拽移动
- 提示文本鼠标悬停时显示,支持夜间模式
- 防止拖拽时选中文本
This commit is contained in:
2026-01-24 23:41:02 +08:00
parent a163e7a2a0
commit dde868021e
2 changed files with 91 additions and 0 deletions

View File

@@ -5198,6 +5198,12 @@ void 0;
container.appendChild(controls);
// 创建提示文本
const hint = document.createElement('div');
hint.className = 'mermaid-hint';
hint.textContent = '按住 Ctrl+滚轮缩放 | 拖拽移动';
container.appendChild(hint);
// 缩放状态
let scale = 1;
const minScale = 0.5;
@@ -5243,6 +5249,54 @@ void 0;
}
}
}, { passive: false });
// 拖拽功能
let isDragging = false;
let startX = 0;
let startY = 0;
let scrollLeft = 0;
let scrollTop = 0;
inner.addEventListener('mousedown', (e) => {
// 只响应左键
if (e.button !== 0) return;
isDragging = true;
inner.classList.add('dragging');
startX = e.pageX - inner.offsetLeft;
startY = e.pageY - inner.offsetTop;
scrollLeft = inner.scrollLeft;
scrollTop = inner.scrollTop;
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
e.preventDefault();
const x = e.pageX - inner.offsetLeft;
const y = e.pageY - inner.offsetTop;
const walkX = (x - startX) * 2;
const walkY = (y - startY) * 2;
inner.scrollLeft = scrollLeft - walkX;
inner.scrollTop = scrollTop - walkY;
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
inner.classList.remove('dragging');
}
});
// 防止拖拽时选中文本
inner.addEventListener('dragstart', (e) => {
e.preventDefault();
});
},
// ---------- 主题切换监听 ----------