💄 style supports mermaid to zoom in and out and pan using the mouse wheel without entering preview mode

[RidiculousBuffal]

💻 变更类型 | Change Type

• ✨ feat
• 🐛 fix
• ♻️ refactor
• 💄 style
• 🔨 chore
• 📝 docs

🔀 变更说明 | Description of Change

支持mermaid 组件在不进入预览模式的情况下使用鼠标滚轮进行缩放,以及使用鼠标或者触摸板进行拖动

supports mermaid to zoom in and out and pan using the mouse wheel without entering preview mode

可以通过{"enableNonPreviewWheelZoom":true} 来开启或者关闭该属性

📝 补充信息 | Additional Information

Here is a demo video

video.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Updated (UTC)
lobe-ui	⬜️ Ignored (Inspect)	Visit Preview	May 27, 2025 8:17am

[lobehubbot]

👍 @RidiculousBuffal


Thank you for raising your pull request and contributing to our Community
Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
If you encounter any problems, please feel free to connect with us.
非常感谢您提出拉取请求并为我们的社区做出贡献，请确保您已经遵循了我们的贡献指南，我们会尽快审查它。
如果您遇到任何问题，请随时与我们联系。

[gru-agent]

TestGru Assignment

Summary

Link	CommitId	Status	Reason
Detail	c2537d2	✅ Finished

Files

File	Pull Request
src/Mermaid/Mermaid.tsx	❌ Failed (The test file tests/Mermaid.test.ts contains invalid JSX syntax. The children of the component are written as plain text (e.g., graph TD, A[Client] --> B[Load Balancer]) directly inside the JSX without wrapping them in a string or a JSX element. This causes parsing errors such as 'Expected ")" but found "TD"'. This is a test code issue, not a source code bug. The source file src/Mermaid/Mermaid.tsx does not have a bug related to this failure.)
src/Mermaid/SyntaxMermaid/index.tsx	❌ Failed (The test job failed due to syntax errors in the test file (tests/index.test.ts), not because of a bug in the source code. The errors are caused by the use of JSX syntax in a non-TSX/JSX file or missing necessary imports/configuration for JSX parsing. The error messages indicate that the parser expected a ',' or ')' but found 'diagram', which points to invalid JSX usage. The source file (src/Mermaid/SyntaxMermaid/index.tsx) does not have a bug related to this failure.)

Tip

You can @gru-agent and leave your feedback. TestGru will make adjustments based on your input