Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add --roughjs_config option for MemoryViz CLI #48

Merged
merged 3 commits into from
Jun 28, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,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

Expand Down
24 changes: 22 additions & 2 deletions docs/docs/06-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,28 @@ $ 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.

#### `--height` and `--width`
sarahsonder marked this conversation as resolved.
Show resolved Hide resolved

Specifies the height and width of the generated SVG.

```console
$ npx memory-viz <path-to-file> --width=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
```
30 changes: 22 additions & 8 deletions memory-viz/bin/cli.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,18 @@ const path = require("path");
const { draw } = require("memory-viz");
const { program } = require("commander");

function parseRoughjsConfig(input) {
let config = {};
const pairs = input.split(",");

pairs.forEach((pair) => {
sarahsonder marked this conversation as resolved.
Show resolved Hide resolved
const [key, val] = pair.split("=");
config[key] = val;
});

return config;
}

program
.description(
"Command line interface for generating memory model diagrams with MemoryViz"
Expand All @@ -14,14 +26,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,...>",
"various options to configure how the SVG is drawn" +
sarahsonder marked this conversation as resolved.
Show resolved Hide resolved
" - 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.`);
Expand All @@ -40,17 +58,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);
}

Expand Down
Loading
Loading