feat: Add touch drag support for Mermaid diagrams

[artsbymat]

This PR introduces touch-based dragging for Mermaid diagrams, enabling interaction on touch devices such as phones. The implementation extends the existing mouse-based panning behavior with equivalent touch gesture support.

Key changes

• Added touchstart, touchmove, and touchend event handlers for panning.
• Used passive: false on relevant events to allow preventing default scrolling during drag.
• Included proper cleanup functions for all newly added touch events.
• Adjusted initial pan calculation to behave consistently when starting a drag via touch.
• Updated resetTransform to better center the diagram based on container dimensions.
• Removed default padding from .mermaid-content to avoid unwanted offsets during pan/zoom.

Impact

• Diagrams can now be dragged on mobile devices.
• Transform calculations behave more predictably when the window is resized.
• Existing mouse interactions remain unchanged.

output.mp4

• Tested on brave and google chrome android device

Additional notes

If any edge cases appear on specific mobile browsers or devices, I’m open to refining the behavior further.

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
quartz	✅ Ready (View Log)	Visit Preview	9a17e2d