Skip to content

Commit 1c1ecf9

Browse files
JusterZhuclaude
andauthored
fix(docs): allow zooming out from initial auto-fit scale in mermaid modal (#138)
* fix(docs): allow zooming out from initial auto-fit scale in mermaid modal Changed panzoom contain from 'outside' to false so users can freely zoom out beyond the auto-fit size. Also reduced minScale to 0.05 to allow more zoom-out range. Co-Authored-By: Claude <noreply@anthropic.com> * 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> --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent f4570b1 commit 1c1ecf9

1 file changed

Lines changed: 19 additions & 2 deletions

File tree

website/src/theme/Mermaid/index.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,29 @@ function MermaidRenderResult({ renderResult }) {
4141

4242
const instance = panzoom(svgEl, {
4343
maxScale: 10,
44-
minScale: 0.1,
44+
minScale: 0.05,
4545
step: 0.15,
46-
contain: 'outside',
46+
contain: false,
4747
pinchAndPan: true,
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)