From 1e9f91e0bcfab46fe0880528ecea78cbd2c2d0db Mon Sep 17 00:00:00 2001 From: yoonieaj Date: Sun, 8 Sep 2024 21:17:42 -0400 Subject: [PATCH 1/9] install zoom library and add preliminary functionality --- demo/src/SvgDisplay.tsx | 21 +++++++++++++++------ package-lock.json | 17 +++++++++++++++++ package.json | 3 +++ 3 files changed, 35 insertions(+), 6 deletions(-) diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx index cfede943..75769b81 100644 --- 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; @@ -37,12 +38,20 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) { }} variant="outlined" > - + + + + + ); } diff --git a/package-lock.json b/package-lock.json index 4a675d83..0f6e2b13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,9 @@ "demo", "docs" ], + "dependencies": { + "react-zoom-pan-pinch": "^3.6.1" + }, "devDependencies": { "husky": "^9.1.5", "lint-staged": "^15.2.10", @@ -18048,6 +18051,20 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-zoom-pan-pinch": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.1.tgz", + "integrity": "sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==", + "license": "MIT", + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", diff --git a/package.json b/package.json index c3836a17..aa3b6c96 100644 --- a/package.json +++ b/package.json @@ -16,5 +16,8 @@ }, "lint-staged": { "**/*": "prettier --write --ignore-unknown" + }, + "dependencies": { + "react-zoom-pan-pinch": "^3.6.1" } } From b119a49a58fdcaa93840a89797ac2efd9b106e8a Mon Sep 17 00:00:00 2001 From: yoonieaj Date: Sun, 8 Sep 2024 22:00:42 -0400 Subject: [PATCH 2/9] fix panning --- demo/src/SvgDisplay.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx index 75769b81..962868fc 100644 --- a/demo/src/SvgDisplay.tsx +++ b/demo/src/SvgDisplay.tsx @@ -1,6 +1,6 @@ import React, { useRef, useEffect } from "react"; import mem from "memory-viz"; -import { Paper } from "@mui/material"; +import { Paper, Box } from "@mui/material"; import { configDataPropTypes } from "./MemoryModelsUserInput"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; @@ -34,21 +34,20 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) { - + From f9c34754f0be94e920d37ff1d93f2bd95e7dadce Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Tue, 10 Sep 2024 17:06:44 -0400 Subject: [PATCH 3/9] Fix panning issues again --- demo/src/SvgDisplay.tsx | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx index 962868fc..d97ecd77 100644 --- a/demo/src/SvgDisplay.tsx +++ b/demo/src/SvgDisplay.tsx @@ -41,16 +41,31 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) { }} variant="outlined" > - +
+ + + + + +
+ + {/* - + */} ); } From d2f19e58f2a0812d64f92efa60311616063af8eb Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Wed, 11 Sep 2024 10:55:36 -0400 Subject: [PATCH 4/9] adjust zoom speed --- demo/src/SvgDisplay.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx index d97ecd77..88201843 100644 --- a/demo/src/SvgDisplay.tsx +++ b/demo/src/SvgDisplay.tsx @@ -41,31 +41,24 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) { }} variant="outlined" > -
- +
+
- - {/* - - - - */} ); } From b87000e83ed452c8b8fd4abb8175ebdcdb4bcd76 Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Wed, 11 Sep 2024 11:02:39 -0400 Subject: [PATCH 5/9] Update changelog and remove unused imports --- CHANGELOG.md | 1 + demo/src/SvgDisplay.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 774643fb..7b118ff3 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx index 88201843..eb6fcae1 100644 --- a/demo/src/SvgDisplay.tsx +++ b/demo/src/SvgDisplay.tsx @@ -1,6 +1,6 @@ import React, { useRef, useEffect } from "react"; import mem from "memory-viz"; -import { Paper, Box } from "@mui/material"; +import { Paper } from "@mui/material"; import { configDataPropTypes } from "./MemoryModelsUserInput"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; From fc92c061956242463274dc56e5ef970c889509be Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Wed, 11 Sep 2024 19:00:17 -0400 Subject: [PATCH 6/9] move dependencies --- demo/package.json | 3 ++- demo/src/SvgDisplay.tsx | 41 ++++++++++++++++++++++------------------- package.json | 3 --- 3 files changed, 24 insertions(+), 23 deletions(-) diff --git a/demo/package.json b/demo/package.json index 8dac0e46..71785672 100644 --- 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 index eb6fcae1..aa1b99cd 100644 --- a/demo/src/SvgDisplay.tsx +++ b/demo/src/SvgDisplay.tsx @@ -34,31 +34,34 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) { -
- - - - - -
+ {/*
*/} + + + + + + {/*
*/} ); } diff --git a/package.json b/package.json index aa3b6c96..c3836a17 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,5 @@ }, "lint-staged": { "**/*": "prettier --write --ignore-unknown" - }, - "dependencies": { - "react-zoom-pan-pinch": "^3.6.1" } } From 9f4124229591ea959a884b6748310d2045c9a1b3 Mon Sep 17 00:00:00 2001 From: yoonie-jang Date: Wed, 11 Sep 2024 19:03:49 -0400 Subject: [PATCH 7/9] adjust svgdisplay components --- demo/src/SvgDisplay.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx index aa1b99cd..edd87c84 100644 --- a/demo/src/SvgDisplay.tsx +++ b/demo/src/SvgDisplay.tsx @@ -34,16 +34,13 @@ export default function SvgDisplay(props: SvgDisplayPropTypes) { - {/*
*/} - {/*
*/} ); } From efa25ed8d4a6a263a976feb54c8c7fea92951483 Mon Sep 17 00:00:00 2001 From: yoonieaj Date: Thu, 12 Sep 2024 16:25:45 -0400 Subject: [PATCH 8/9] fix dependencies --- package-lock.json | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0f6e2b13..4a675d83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,6 @@ "demo", "docs" ], - "dependencies": { - "react-zoom-pan-pinch": "^3.6.1" - }, "devDependencies": { "husky": "^9.1.5", "lint-staged": "^15.2.10", @@ -18051,20 +18048,6 @@ "react-dom": ">=16.6.0" } }, - "node_modules/react-zoom-pan-pinch": { - "version": "3.6.1", - "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.1.tgz", - "integrity": "sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==", - "license": "MIT", - "engines": { - "node": ">=8", - "npm": ">=5" - }, - "peerDependencies": { - "react": "*", - "react-dom": "*" - } - }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", From a1cbfea72a762a2c66e9c80cf8bc74ed6986ffc7 Mon Sep 17 00:00:00 2001 From: yoonieaj Date: Thu, 12 Sep 2024 16:30:43 -0400 Subject: [PATCH 9/9] fix dependencies --- package-lock.json | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 4a675d83..11490247 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,8 @@ "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" }, "devDependencies": { "@babel/core": "^7.23.6", @@ -18048,6 +18049,20 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-zoom-pan-pinch": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.1.tgz", + "integrity": "sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==", + "license": "MIT", + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",