Skip to content

Commit 3c45636

Browse files
JusterZhuclaude
andcommitted
fix(docs): add wheel scroll zoom to mermaid modal
Attach wheel event listener on modal body that forwards to panzoom's zoomWithWheel, so users can zoom in/out by scrolling the mouse wheel. Co-Authored-By: Claude <noreply@anthropic.com>
1 parent cea16d9 commit 3c45636

1 file changed

Lines changed: 17 additions & 0 deletions

File tree

website/src/theme/Mermaid/index.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,22 @@ function MermaidRenderResult({ renderResult }) {
4848
});
4949
instanceRef.current = instance;
5050

51+
// Wheel zoom: forward wheel events from modal body to panzoom
52+
const handleWheel = (e) => {
53+
e.preventDefault();
54+
const delta = e.deltaY > 0 ? -0.3 : 0.3;
55+
// Calculate zoom around cursor position
56+
const rect = svgEl.getBoundingClientRect();
57+
const x = e.clientX - rect.left;
58+
const y = e.clientY - rect.top;
59+
instance.zoomWithWheel(e, {
60+
step: 0.3,
61+
minScale: 0.05,
62+
maxScale: 10,
63+
});
64+
};
65+
modalEl.addEventListener('wheel', handleWheel, { passive: false });
66+
5167
// Auto-fit: scale the SVG to fill the modal while keeping aspect ratio
5268
const fitToScreen = () => {
5369
const parent = modalRef.current;
@@ -105,6 +121,7 @@ function MermaidRenderResult({ renderResult }) {
105121

106122
return () => {
107123
clearTimeout(fitTimer);
124+
modalEl.removeEventListener('wheel', handleWheel);
108125
window.removeEventListener('resize', fitToScreen);
109126
window.removeEventListener('keydown', handleKeyDown);
110127
if (instanceRef.current) {

0 commit comments

Comments
 (0)