diff --git a/demo/package.json b/demo/package.json
index 1bd01579..1e8c6b3d 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -34,11 +34,11 @@
"webpack-cli": "^5.1.4"
},
"dependencies": {
- "@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.15.7",
"@picocss/pico": "^1.5.10",
"react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react-dom": "^18.2.0",
+ "react-error-boundary": "^4.0.12"
}
}
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index e80953c9..7d80a2e7 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -1,42 +1,35 @@
import React, { useState } from "react";
import SvgDisplay from "./SvgDisplay";
-import { MemoryModels, MemoryModel } from "./MemoryModels";
-
-const DEMO_OBJECTS = [
- {
- isClass: true,
- name: "__main__",
- id: null,
- value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
- stack_frame: true,
- },
- {
- isClass: false,
- name: "str",
- id: 19,
- value: "David is cool!",
- style: ["highlight"],
- },
- { isClass: false, name: "int", id: 13, value: 7 },
-];
+import MemoryModelsUserInput from "./MemoryModels";
+import { ErrorBoundary } from "react-error-boundary";
export default function App() {
const [formData, setFormData] = useState("");
- const [jsonResult, setJsonResult] = useState([]);
+ const [jsonResult, setJsonResult] = useState(null);
const onSubmit = async (event) => {
event.preventDefault();
- setJsonResult(JSON.parse(formData));
+ try {
+ setJsonResult(JSON.parse(formData));
+ } catch (error) {
+ console.error("Error parsing inputted JSON: ", error);
+ setJsonResult(null);
+ }
};
return (
<>
-
-
+
+ Output
+ Something went wrong}>
+
+
+
);
}
diff --git a/demo/src/MemoryModels.tsx b/demo/src/MemoryModels.tsx
index 34b2e4a4..2eaff012 100644
--- a/demo/src/MemoryModels.tsx
+++ b/demo/src/MemoryModels.tsx
@@ -1,17 +1,7 @@
import React from "react";
import { Button, Card, CardContent, TextField, Grid } from "@mui/material";
-interface MemoryModel {
- isClass: boolean;
- name: string;
- id: string | number | null;
- value: any;
- stack_frame: boolean;
- show_indexes: boolean;
- style?: any[] | null;
-}
-
-function MemoryModels(props) {
+export default function MemoryModelsUserInput(props) {
const handleTextFieldChange = (event) => {
props.setFormData(event.target.value);
};
@@ -24,7 +14,7 @@ function MemoryModels(props) {
@@ -40,8 +33,9 @@ function MemoryModels(props) {
type="submit"
variant="contained"
color="primary"
+ style={{ textTransform: "none" }}
>
- Submit
+ Draw Diagram
@@ -50,6 +44,3 @@ function MemoryModels(props) {
);
}
-
-export { MemoryModels };
-export type { MemoryModel };
diff --git a/demo/src/SvgDisplay.tsx b/demo/src/SvgDisplay.tsx
index 500939fe..49f4fdda 100644
--- a/demo/src/SvgDisplay.tsx
+++ b/demo/src/SvgDisplay.tsx
@@ -1,38 +1,20 @@
import React, { useRef, useEffect } from "react";
import mem from "../../src/index"; // TODO: replace with import of the package after it's been published
-// const DEMO_OBJECTS = [
-// {
-// isClass: true,
-// name: "__main__",
-// id: null,
-// value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-// stack_frame: true,
-// },
-// {
-// isClass: false,
-// name: "str",
-// id: 19,
-// value: "David is cool!",
-// style: ["highlight"],
-// },
-// { isClass: false, name: "int", id: 13, value: 7 },
-// ];
-
export default function SvgDisplay(props) {
const canvasRef = useRef(null);
useEffect(() => {
- if (props.jsonResult.length > 0) {
+ if (props.jsonResult !== null) {
const m = mem.draw(props.jsonResult, true, { width: 1300 });
+ m.clear(canvasRef.current);
m.render(canvasRef.current);
}
}, [props.jsonResult]);
return (
-
+
);
}
diff --git a/demo/src/index.tsx b/demo/src/index.tsx
index d76f59ef..6aa66ed1 100644
--- a/demo/src/index.tsx
+++ b/demo/src/index.tsx
@@ -3,14 +3,10 @@ import { createRoot } from "react-dom/client";
import App from "./App";
import "@picocss/pico";
import "./css/styles";
-("use client");
-import { ErrorBoundary } from "react-error-boundary";
const root = createRoot(document.getElementById("app"));
root.render(
- Something went wrong}>
-
-
+
);
diff --git a/package-lock.json b/package-lock.json
index e965f32c..f3b511ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
"dependencies": {
"@xmldom/xmldom": "^0.8.6",
"deepmerge": "^4.3.1",
- "react-error-boundary": "^4.0.12",
"roughjs": "^4.5.0"
},
"devDependencies": {
@@ -41,12 +40,12 @@
"version": "0.1.0",
"license": "MIT",
"dependencies": {
- "@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.15.7",
"@picocss/pico": "^1.5.10",
"react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react-dom": "^18.2.0",
+ "react-error-boundary": "^4.0.12"
},
"devDependencies": {
"@babel/core": "^7.23.6",
@@ -2980,6 +2979,7 @@
"version": "11.11.3",
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.3.tgz",
"integrity": "sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==",
+ "peer": true,
"dependencies": {
"@babel/runtime": "^7.18.3",
"@emotion/babel-plugin": "^11.11.0",
diff --git a/package.json b/package.json
index e9881143..2dcca24d 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
"dependencies": {
"@xmldom/xmldom": "^0.8.6",
"deepmerge": "^4.3.1",
- "react-error-boundary": "^4.0.12",
"roughjs": "^4.5.0"
},
"devDependencies": {
diff --git a/src/memory_model.ts b/src/memory_model.ts
index d9f64964..bb010693 100644
--- a/src/memory_model.ts
+++ b/src/memory_model.ts
@@ -129,6 +129,15 @@ export class MemoryModel {
};
}
+ /**
+ * Clear a given canvas object.
+ * @param canvas - the element that is currently used to draw graphics
+ */
+ clear(canvas) {
+ const ctx = canvas.getContext("2d");
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ }
+
/**
* Distribute the object drawing depending on type
* @param {number} x - value for x coordinate of top left corner