fix(useMermaidZoom): fix the scrolling issue

[hy-lmh]

fix #398

Summary by CodeRabbit

• Style
  • Optimized Mermaid diagram display and interactions for mobile devices with improved scrolling, touch handling, and iOS gesture support.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR addresses mobile scrolling issues in the Mermaid component by adding device-specific detection and CSS media queries. Changes include enabling horizontal/vertical scrolling and smooth touch interactions on mobile devices, plus refactoring touch handler logic to conditionally allow scrolling based on device type.

Changes

Cohort / File(s)	Summary
Mobile Styling Optimization packages/core/src/components/XMarkdownCore/components/Mermaid/style.scss	Adds @media (max-width: 768px) blocks to .markdown-mermaid and .mermaid-content with overflow: auto and -webkit-overflow-scrolling: touch for smooth iOS scrolling. Adds touch-action properties (pan-x pan-y, manipulation) to toolbar and SVG elements within mobile media queries for improved touch interaction.
Mobile Device Detection & Touch Handling packages/core/src/components/XMarkdownCore/hooks/useMermaidZoom.ts	Introduces isMobileDevice helper for runtime device detection. Conditions drag and touch interaction logic to cache mobile state and allow optional scrolling on mobile when not actively dragging. Normalizes code formatting with single-line conditionals and return statements without altering control flow or public API.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Focus areas: Verify CSS media query breakpoints are appropriate for intended mobile device sizes; confirm touch-action property values are compatible across iOS and Android browsers; ensure mobile device detection logic correctly identifies target platforms and doesn't introduce false positives.

Possibly related PRs

• fix: 移除Mermaid组件中操作栏的用户选择禁用样式 #282: Modifies Mermaid component styles for touch/pan/selection behavior, addressing related interaction concerns in the same component.

Poem

🐰 A touch of magic on mobile screens,
Scrolling smooth where once were scenes,
Of frozen views and frozen fate,
Now pans and glides feel light and great,
The Mermaid swims on every phone! 🌊

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix: addressing a scrolling issue in useMermaidZoom, which is the core problem addressed in issue #398.
Linked Issues check	✅ Passed	Changes add mobile scroll support via CSS overflow properties and touch-action, plus mobile device detection in useMermaidZoom to restore scrolling on H5 pages.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing mobile scrolling: CSS media queries for mobile overflow/scrolling and mobile detection logic for touch interactions.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/core/src/components/XMarkdownCore/hooks/useMermaidZoom.ts (1)

72-72: Consider using English for code comments.

The inline comment is in Chinese. For better international collaboration, consider translating code comments to English.

-      if (e.button !== 0) return; // ⭐️ 只响应鼠标左键
+      if (e.button !== 0) return; // Only respond to left mouse button

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0e36c64 and 72d5806.

📒 Files selected for processing (2)

• packages/core/src/components/XMarkdownCore/components/Mermaid/style.scss (3 hunks)
• packages/core/src/components/XMarkdownCore/hooks/useMermaidZoom.ts (4 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/core/src/components/XMarkdownCore/hooks/useMermaidZoom.ts (1)

packages/core/src/components/XMarkdownCore/components/Mermaid/types.d.ts (1)

• MermaidExposedMethods (46-54)

🔇 Additional comments (6)

packages/core/src/components/XMarkdownCore/hooks/useMermaidZoom.ts (3)

37-42: Mobile detection approach is acceptable for UI optimization.

User agent sniffing is generally fragile but acceptable here for optimizing touch behavior based on device type. The regex pattern covers common mobile platforms adequately.

---

141-141: LGTM! Early return pattern improves readability.

The refactoring to use early returns instead of else blocks follows best practices and makes the code more readable.

Also applies to: 151-151

---

48-48: Verify the touch handling logic and mobile scrolling behavior.

There's a potential logic issue with the touch event handlers: onTouchStart sets isDragging.value = true immediately (via onStart at line 51), which means by the time onTouchMove executes, the condition isMobile && !isDragging.value on line 88 will be false, and preventDefault() will still be called on line 91. This could prevent scrolling even on mobile devices, contradicting the stated intent.

The CSS touch-action properties may compensate for this, but the JavaScript logic appears inconsistent. Consider:

1. Adding a movement threshold before setting isDragging to true
2. Tracking initial touch position and only enabling drag after significant movement
3. Relying entirely on CSS touch-action and removing the conditional JavaScript logic

Also applies to: 85-94

packages/core/src/components/XMarkdownCore/components/Mermaid/style.scss (3)

13-17: Mobile scrolling optimization looks good.

The media query appropriately enables scrolling on mobile devices by changing overflow from hidden to auto and adding iOS smooth scrolling support. The 768px breakpoint is a standard mobile threshold.

---

96-101: Touch-action property properly enables native panning on mobile.

The touch-action: pan-x pan-y declaration allows native horizontal and vertical panning gestures, which should enable smooth scrolling on mobile devices. Combined with overflow: auto, this provides the expected mobile scrolling behavior.

---

113-116: Appropriate touch-action for interactive SVG.

Setting touch-action: manipulation on the SVG disables double-tap-to-zoom while preserving pinch-zoom, which improves touch responsiveness for the interactive diagram. This works well with the custom zoom controls provided by the component.

[hy-lmh]

close: #398