Merge branch 'master' of https://github.com/david-yz-liu/memory-viz i…

…nto minimum-width
david-yz-liu · Jun 28, 2024 · 33175bc · 33175bc
2 parents 972e23f + 98b5f18
commit 33175bc
Show file tree

Hide file tree

Showing 7 changed files with 439 additions and 579 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,18 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### 🚨 Breaking changes
 
+### ✨ Enhancements
+
+### 🐛 Bug fixes
+
+### 📚 Documentation and demo website changes
+
+### 🔧 Internal changes
+
+## [0.2.0] - 2024-06-28
+
+### 🚨 Breaking changes
+
 -   Changed the `name` attribute to `type` when drawing objects.
 -   Removed the `isClass` and `stack_frame` attributes and embedded them as the types `.class` and `.frame`.
 -   Renamed the input for blank objects from `BLANK` to `.blank`.
@@ -19,6 +31,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 -   Created a CLI for MemoryViz.
 -   Added `--height` and `--width` options to MemoryViz CLI.
+-   Added `--roughjs_config` option to MemoryViz CLI.
 
 ### 🐛 Bug fixes
 

diff --git a/docs/docs/06-cli.md b/docs/docs/06-cli.md
@@ -16,8 +16,36 @@ $ npx memory-viz <path-to-file>
 
 replacing `<path-to-file>` with the path to a file containing MemoryViz-compatible JSON. If the file content is not compatible with MemoryViz, an error will be thrown.
 
-Optional arguments `--height` and `--width` can be used to specify the height and width of the generated SVG.
-
 ## Output
 
 The output is an SVG image generated by MemoryViz and the image is saved in the current working directory. The name of the SVG will be the same as that of the inputted file (i.e., if the inputted file is `david-is-cool.json`, the output will be `david-is-cool.svg`).
+
+## Options
+
+Below are optional arguments used to specify the way in which the SVG image is generated.
+
+### `--width`
+
+Specifies the width of the generated SVG.
+
+```console
+$ npx memory-viz <path-to-file> --width=700
+```
+
+### `--height`
+
+Specifies the height of the generated SVG.
+
+```console
+$ npx memory-viz <path-to-file> --height=700
+```
+
+### `--roughjs_config`
+
+Specifies the style of the generated SVG. Please refer to the [Rough.js documentation](https://github.com/rough-stuff/rough/wiki#options) for available options.
+
+The argument is a comma-separated list of key-value pairs in the form `<key1=value1,key2=value2,...>`.
+
+```console
+$ npx memory-viz <path-to-file> --roughjs-config fill=red,fillStyle=solid
+```
diff --git a/memory-viz/bin/cli.js b/memory-viz/bin/cli.js
@@ -5,6 +5,12 @@ const path = require("path");
 const { draw } = require("memory-viz");
 const { program } = require("commander");
 
+function parseRoughjsConfig(input) {
+    const pairs = input.split(",");
+    const keyValuePairs = pairs.map((pair) => pair.split("="));
+    return Object.fromEntries(keyValuePairs);
+}
+
 program
     .description(
         "Command line interface for generating memory model diagrams with MemoryViz"
@@ -14,14 +20,20 @@ program
         "path to a file containing MemoryViz-compatible JSON"
     )
     .option("--width <value>", "width of generated SVG", "1300")
-    .option("--height <value>", "height of generated SVG");
+    .option("--height <value>", "height of generated SVG")
+    .option(
+        "--roughjs-config <key1=value1,key2=value2,...>",
+        "options to configure how the SVG is drawn" +
+            " - refer to rough.js documentation for available options",
+        parseRoughjsConfig
+    );
 
 program.parse();
 
 const filePath = program.args[0];
 const absolutePath = path.resolve(process.cwd(), filePath);
 
-// Checks if absolutePath exists and that it is a JSON file
+// Checks if absolutePath exists
 let fileContent;
 if (!fs.existsSync(absolutePath)) {
     console.error(`Error: File ${absolutePath} does not exist.`);
@@ -40,17 +52,13 @@ try {
 
 let m;
 try {
-    // TODO: Replace seed with command-line arguments
     m = draw(data, true, {
         width: program.opts().width,
         height: program.opts().height,
-        roughjs_config: { options: { seed: 12345 } },
+        roughjs_config: { options: program.opts().roughjsConfig },
     });
 } catch (err) {
-    console.error(
-        `This is valid JSON but not valid Memory Models JSON.` +
-            `Please refer to the repo for more details.`
-    );
+    console.error(`Error: ${err.message}`);
     process.exit(1);
 }
 

diff --git a/memory-viz/package.json b/memory-viz/package.json
@@ -1,6 +1,6 @@
 {
     "name": "memory-viz",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "Library for creating beginner-friendly memory model diagrams.",
     "main": "dist/memory-viz.bundle.js",
     "homepage": "https://www.cs.toronto.edu/~david/memory-viz",

diff --git a/memory-viz/src/tests/__snapshots__/cli.spec.tsx.snap b/memory-viz/src/tests/__snapshots__/cli.spec.tsx.snap
diff --git a/memory-viz/src/tests/cli.spec.tsx b/memory-viz/src/tests/cli.spec.tsx
@@ -23,7 +23,7 @@ describe("memory-viz cli", () => {
     it("should produce an svg that matches snapshot", (done) => {
         fs.writeFileSync(filePath, input);
 
-        exec(`memory-viz ${filePath}`, (err) => {
+        exec(`memory-viz ${filePath} --roughjs-config seed=12345`, (err) => {
             if (err) throw err;
             const svgFilePath = path.resolve(
                 process.cwd(),
@@ -39,49 +39,77 @@ describe("memory-viz cli", () => {
     it("produces consistent svg when provided width option", (done) => {
         fs.writeFileSync(filePath, input);
 
-        exec(`memory-viz ${filePath} --width=700`, (err) => {
-            if (err) throw err;
-            const svgFilePath = path.resolve(
-                process.cwd(),
-                path.basename(filePath.replace(".json", ".svg"))
-            );
-            const fileContent = fs.readFileSync(svgFilePath, "utf8");
-            expect(fileContent).toMatchSnapshot();
-            fs.unlinkSync(svgFilePath);
-            done();
-        });
+        exec(
+            `memory-viz ${filePath} --width=700 --roughjs-config seed=12345`,
+            (err) => {
+                if (err) throw err;
+                const svgFilePath = path.resolve(
+                    process.cwd(),
+                    path.basename(filePath.replace(".json", ".svg"))
+                );
+                const fileContent = fs.readFileSync(svgFilePath, "utf8");
+                expect(fileContent).toMatchSnapshot();
+                fs.unlinkSync(svgFilePath);
+                done();
+            }
+        );
     });
 
     it("produces consistent svg when provided height option", (done) => {
         fs.writeFileSync(filePath, input);
 
-        exec(`memory-viz ${filePath} --height=700`, (err) => {
-            if (err) throw err;
-            const svgFilePath = path.resolve(
-                process.cwd(),
-                path.basename(filePath.replace(".json", ".svg"))
-            );
-            const fileContent = fs.readFileSync(svgFilePath, "utf8");
-            expect(fileContent).toMatchSnapshot();
-            fs.unlinkSync(svgFilePath);
-            done();
-        });
+        exec(
+            `memory-viz ${filePath} --height=700 --roughjs-config seed=12345`,
+            (err) => {
+                if (err) throw err;
+                const svgFilePath = path.resolve(
+                    process.cwd(),
+                    path.basename(filePath.replace(".json", ".svg"))
+                );
+                const fileContent = fs.readFileSync(svgFilePath, "utf8");
+                expect(fileContent).toMatchSnapshot();
+                fs.unlinkSync(svgFilePath);
+                done();
+            }
+        );
     });
 
     it("produces consistent svg when provided height and width options", (done) => {
         fs.writeFileSync(filePath, input);
 
-        exec(`memory-viz ${filePath} --height=700 width=1200`, (err) => {
-            if (err) throw err;
-            const svgFilePath = path.resolve(
-                process.cwd(),
-                path.basename(filePath.replace(".json", ".svg"))
-            );
-            const fileContent = fs.readFileSync(svgFilePath, "utf8");
-            expect(fileContent).toMatchSnapshot();
-            fs.unlinkSync(svgFilePath);
-            done();
-        });
+        exec(
+            `memory-viz ${filePath} --height=700 width=1200 --roughjs-config seed=12345`,
+            (err) => {
+                if (err) throw err;
+                const svgFilePath = path.resolve(
+                    process.cwd(),
+                    path.basename(filePath.replace(".json", ".svg"))
+                );
+                const fileContent = fs.readFileSync(svgFilePath, "utf8");
+                expect(fileContent).toMatchSnapshot();
+                fs.unlinkSync(svgFilePath);
+                done();
+            }
+        );
+    });
+
+    it("produces consistent svg when provided a variety of rough-config options", (done) => {
+        fs.writeFileSync(filePath, input);
+
+        exec(
+            `memory-viz ${filePath} --roughjs-config seed=1234,fill=red,fillStyle=solid`,
+            (err) => {
+                if (err) throw err;
+                const svgFilePath = path.resolve(
+                    process.cwd(),
+                    path.basename(filePath.replace(".json", ".svg"))
+                );
+                const fileContent = fs.readFileSync(svgFilePath, "utf8");
+                expect(fileContent).toMatchSnapshot();
+                fs.unlinkSync(svgFilePath);
+                done();
+            }
+        );
     });
 });
 
@@ -107,9 +135,7 @@ describe.each([
     },
     {
         errorType: "invalid memory-viz json",
-        expectedErrorMessage:
-            "This is valid JSON but not valid Memory Models JSON." +
-            "Please refer to the repo for more details.",
+        expectedErrorMessage: "Error:",
     },
 ])(
     "these incorrect inputs to the memory-viz cli",