feat: 优化 Mermaid 拖拽功能
- 7.1 改进拖拽响应:使用 requestAnimationFrame 优化性能,避免频繁的 DOM 操作 - 7.2 优化拖拽视觉反馈:增强光标样式,添加跨浏览器的文本选择禁用 - 7.3 智能启用拖拽:检测图表是否需要拖拽,未缩放且完全可见时自动禁用 需求:13.1, 13.2, 13.3, 13.4, 13.5
This commit is contained in:
15
style.css
15
style.css
@@ -1053,7 +1053,6 @@ html.darkmode .mermaid-zoom-controls {
|
||||
html.darkmode .mermaid-zoom-level {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮 tooltip */
|
||||
.mermaid-zoom-btn[title] {
|
||||
@@ -1114,16 +1113,28 @@ html.darkmode .mermaid-hint {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 拖拽时的光标 */
|
||||
/* 拖拽时的光标和视觉反馈 */
|
||||
/* 需求 13.1, 13.2, 13.4: 优化拖拽视觉反馈 */
|
||||
.mermaid-container-inner.dragging {
|
||||
cursor: grabbing !important;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.mermaid-container-inner:not(.dragging) {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
/* 拖拽时禁用 SVG 内的文本选择 */
|
||||
.mermaid-container-inner.dragging svg {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
/* Mermaid 淡入动画 */
|
||||
@keyframes mermaidFadeIn {
|
||||
from {
|
||||
|
||||
Reference in New Issue
Block a user