Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
File size: 2,110 Bytes
61d29fc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import React from 'react';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
import Mermaid from '@theme/Mermaid';
import styles from './styles.module.css';
interface ZoomableMermaidProps {
value: string;
title?: string;
}
export default function ZoomableMermaid({ value, title }: ZoomableMermaidProps): JSX.Element {
return (
<div className={styles.zoomableContainer}>
{title && <h3 className={styles.diagramTitle}>{title}</h3>}
<div className={styles.controls}>
<span className={styles.controlsLabel}>
💡 <strong>Tip:</strong> Use mouse wheel to zoom, click and drag to pan, or use the controls below
</span>
</div>
<TransformWrapper
initialScale={6}
minScale={0.5}
maxScale={12}
centerOnInit={true}
wheel={{ step: 0.3 }}
doubleClick={{ disabled: false }}
panning={{ velocityDisabled: true }}
limitToBounds={false}
centerZoomedOut={true}
>
{({ zoomIn, zoomOut, resetTransform }) => (
<>
<div className={styles.zoomControls}>
<button
onClick={() => zoomIn()}
className={styles.zoomButton}
title="Zoom In"
>
🔍+
</button>
<button
onClick={() => zoomOut()}
className={styles.zoomButton}
title="Zoom Out"
>
🔍−
</button>
<button
onClick={() => resetTransform()}
className={styles.zoomButton}
title="Reset View"
>
⟲ Reset
</button>
</div>
<TransformComponent wrapperClass={styles.transformWrapper} contentClass={styles.transformContent}>
<div className={styles.mermaidWrapper}>
<Mermaid value={value} />
</div>
</TransformComponent>
</>
)}
</TransformWrapper>
</div>
);
}
|