Zoom canvas

CHANGELOG.md

@@ -18,6 +18,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### 📚 Documentation and demo website changes
 
 -   Reformatted demo website to horizontal layout.
+-   Added zoom functionality to output canvas.
 
 ### 🔧 Internal changes
 

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,31 @@ 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}
-            />
+            <div style={{ height: 500, justifyContent: "center" }}>
+                <TransformWrapper
+                    minScale={0.2}
+                    wheel={{ step: 0.2, smoothStep: 0.01 }}
+                >
+                    <TransformComponent>
+                        <canvas
+                            style={{
+                                height: 500,
+                            }}
+                            data-testid="memory-models-canvas"
+                            ref={canvasRef}
+                            width={canvasWidth}
+                            height={canvasHeight}
+                        />
+                    </TransformComponent>
+                </TransformWrapper>
+            </div>
         </Paper>
     );
 }

package.json

@@ -16,5 +16,8 @@
     },
     "lint-staged": {
         "**/*": "prettier --write --ignore-unknown"
+    },
+    "dependencies": {
+        "react-zoom-pan-pinch": "^3.6.1"
     }
 }