demo: Implement canvas zooming (#85)

Uses react-pinch-pan-zoom library. --------- Co-authored-by: David Liu <[email protected]>
david-yz-liu · Sep 13, 2024 · 5d594ee · 5d594ee
1 parent 1255dcd
commit 5d594ee
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 -   Reformatted demo website to horizontal layout.
 -   Added more documentation for the `--output` flag.
+-   Added zoom functionality to output canvas.
 
 ### 🔧 Internal changes
 

diff --git a/demo/package.json b/demo/package.json
@@ -48,6 +48,7 @@
         "memory-viz": "*",
         "react": "^18.3.1",
         "react-dom": "^18.2.0",
-        "react-error-boundary": "^4.0.12"
+        "react-error-boundary": "^4.0.12",
+        "react-zoom-pan-pinch": "^3.6.1"
     }
 }
diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from "react";
 import mem from "memory-viz";
 import { Paper } from "@mui/material";
 import { configDataPropTypes } from "./MemoryModelsUserInput";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 
 type SvgDisplayPropTypes = {
     jsonResult: object | null;
@@ -33,16 +34,30 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) {
         <Paper
             sx={{
                 height: 500,
-                overflow: "auto",
+                overflow: "hidden",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
             }}
             variant="outlined"
         >
-            <canvas
-                data-testid="memory-models-canvas"
-                ref={canvasRef}
-                width={canvasWidth}
-                height={canvasHeight}
-            />
+            <TransformWrapper
+                minScale={0.2}
+                wheel={{ step: 0.2, smoothStep: 0.01 }}
+            >
+                <TransformComponent>
+                    <canvas
+                        style={{
+                            height: "100%",
+                            width: "100%",
+                        }}
+                        data-testid="memory-models-canvas"
+                        ref={canvasRef}
+                        width={canvasWidth}
+                        height={canvasHeight}
+                    />
+                </TransformComponent>
+            </TransformWrapper>
         </Paper>
     );
 }

diff --git a/package-lock.json b/package-lock.json