Skip to content

fix(ui): restore Mermaid fullscreen wheel zoom - #544

Merged
su-fen merged 1 commit into
Stack-Cairn:mainfrom
loto585:fix/mermaid-fullscreen-wheel-zoom
Aug 18, 2026
Merged

fix(ui): restore Mermaid fullscreen wheel zoom#544
su-fen merged 1 commit into
Stack-Cairn:mainfrom
loto585:fix/mermaid-fullscreen-wheel-zoom

Conversation

@loto585

@loto585 loto585 commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

Linked issue

Closes #522

Summary

修复 Mermaid 全屏模式下无法通过鼠标滚轮缩放的问题。

PR #535 将 Mermaid 全屏实现切换为共享 Dialog 后,滚轮监听仍然绑定在全屏视口的冒泡阶段。SVG 子元素或弹层事件传播可能在事件到达监听器前将其截断,导致按钮缩放正常,但鼠标滚轮缩放失效。

本次修改将滚轮处理移动到全屏视口的捕获阶段,并阻止事件继续传播到外层 Dialog,继续使用 SVG viewBox 进行无损缩放,不会重新引入缩放模糊问题。

Change scope

  • Modules: agent-ui
  • Key paths:
    • crates/agent-ui/src/components/MarkdownMermaidFullscreen.tsx

Screenshots / preview

image

Verification

  • node --test crates/agent-gui/test/chat/mermaid-viewbox.test.mjs
  • pnpm build:gui
  • pnpm build:webui
  • pnpm --filter @liveagent/ui exec biome check src/components/MarkdownMermaidFullscreen.tsx
  • git diff --check upstream/main...HEAD

Behavior

  • 鼠标滚轮向上:放大 Mermaid
  • 鼠标滚轮向下:缩小 Mermaid
  • 放大、缩小和重置按钮保持正常
  • 缩放继续通过 SVG viewBox 完成,不使用 CSS 位图缩放

Pre-submit checklist

  • A requirement issue is linked (or this is a trivial fix that needs no issue, as explained in the summary).
  • Synced with the target branch; no merge conflicts.
  • The change is focused, with no unrelated modifications.
  • No secrets, tokens, or personal data included.
  • Docs are updated for changes affecting user behavior, deployment, or configuration.(改动未修改操作方式和配置, 无需更新文档)

@su-fen
su-fen merged commit 9eed6d0 into Stack-Cairn:main Aug 18, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Mermaid 全屏缩放在 WKWebView 中持续模糊

2 participants