Add history and scale as QOL improvements

.vscode/settings.json

@@ -23,4 +23,4 @@
   },
   // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
   "typescript.tsc.autoDetect": "off"
-}
+}

README.md

@@ -14,8 +14,9 @@ Requires [coq-lsp](https://github.com/ejgallego/coq-lsp/) `0.1.7` for automatic
 This extension contributes the following settings:
 
 - `vizx.render`: render a valid ZX diagram via manual input.
-- `vizx.scaleUp`: increase the scale of the generated diagram by 10%.
-- `vizx.scaleDown`: decrease the scale of the generated diagram by 10%.
+- `vizx.scale`: edit scale of the generated diagram
+- `vizx.exportscale`: set scale for export
+- `vizx.viewscale`: set scale for viewing
 - `vizx.lspRender`: to communicate with coq-lsp for automatic rendering. should not be used manually.
 - `vizx.activateRendering`: activates automatic rendering of goal state.
 - `vizx.deactivateRendering`: deactivates automatic rendering of goal state.

package.json

@@ -18,11 +18,33 @@
   ],
   "main": "./out/extension.js",
   "contributes": {
+    "configuration": {
+      "type": "object",
+      "properties": {
+        "vizx.historyLength": {
+          "type": "number",
+          "default": 20,
+          "description": "Maximum number of items to keep in history"
+        }
+      }
+    },
     "commands": [
       {
         "command": "vizx.render",
         "title": "ZXViz: Render expressions with ZXViz"
       },
+      {
+        "command": "vizx.scale",
+        "title": "ZXViz: Edit scale size of diagrams"
+      },
+      {
+        "command": "vizx.exportscale",
+        "title": "ZXViz: Set diagram scale to be export ready"
+      },
+      {
+        "command": "vizx.viewscale",
+        "title": "ZXViz: Set diagram scale to be view ready"
+      },
       {
         "command": "vizx.lspRender",
         "title": "ZXViz: Render expressions with ZXViz using CoqLSP information"
@@ -69,4 +91,4 @@
     "esbuild-plugin-copy": "^2.0.2",
     "typescript-parsec": "^0.3.2"
   }
-}
+}

src/constants/variableconsts.ts

@@ -1,29 +1,55 @@
+export function changeScale(scale: number) {
+  SCALE = scale * 1.1;
+  LINE_WIDTH = scale / 200;
+  BASE_SIZE = 1 * scale;
+  PAD_SIZE = 0.1 * scale;
+  PROPTO_SIZE = 0.2 * scale;
+  CAST_SIZE = 0.3 * scale;
+  TEXT_PAD_SIZE = 0.08 * scale;
+  DOTS_PAD_SIZE = 0.1 * scale;
+  FUNC_ARG_SIZE = 0.7 * scale;
+  REALLY_SMALL_TEXT = (scale / 15).toString().concat("px");
+  SMALL_TEXT = (scale / 10).toString().concat("px");
+  MEDIUM_TEXT = (scale / 7).toString().concat("px");
+  LARGE_TEXT = (scale / 2).toString().concat("px");
+  MONOSPACE_FONT = "Monospace";
+  ARIAL_FONT = "Arial";
+  HOR_PAD = 0.1 * scale;
+  VER_PAD = 0.1 * scale;
+  STACK_DASH = [0.06 * scale, 0.06 * scale];
+  COMPOSE_DASH = [0.16 * scale, 0.16 * scale];
+  CAST_DASH = [0.02 * scale, 0.02 * scale];
+  PROPTO_DASH = [0.005 * scale, 0.005 * scale];
+  FUNCTION_DASH = [0.03 * scale, 0.01 * scale];
+}
+
 export let CANVAS_WIDTH = 100;
 export let CANVAS_HEIGHT = 100;
 
 // SCALE = size of base square, ideally do not go below 100 or it'll be too small
-export let SCALE = 100;
-export let LINE_WIDTH = SCALE / 200;
-export let BASE_SIZE = 1 * SCALE;
-export let PAD_SIZE = 0.1 * SCALE;
-export let PROPTO_SIZE = 0.2 * SCALE;
-export let CAST_SIZE = 0.3 * SCALE;
-export let TEXT_PAD_SIZE = 0.08 * SCALE;
-export let DOTS_PAD_SIZE = 0.1 * SCALE;
-export let FUNC_ARG_SIZE = 0.7 * SCALE;
-export let REALLY_SMALL_TEXT = (SCALE / 10).toString().concat("px");
-export let SMALL_TEXT = (SCALE / 8).toString().concat("px");
-export let MEDIUM_TEXT = (SCALE / 5).toString().concat("px");
-export let LARGE_TEXT = (SCALE / 2.5).toString().concat("px");
-export let MONOSPACE_FONT = "Helvetica";
-export let ARIAL_FONT = "Arial";
-export let HOR_PAD = 0.1 * SCALE;
-export let VER_PAD = 0.1 * SCALE;
-export let STACK_DASH: [number, number] = [0.06 * SCALE, 0.06 * SCALE];
-export let COMPOSE_DASH: [number, number] = [0.16 * SCALE, 0.16 * SCALE];
-export let CAST_DASH: [number, number] = [0.02 * SCALE, 0.02 * SCALE];
-export let PROPTO_DASH: [number, number] = [0.005 * SCALE, 0.005 * SCALE];
-export let FUNCTION_DASH: [number, number] = [0.03 * SCALE, 0.01 * SCALE];
+export let SCALE: number;
+export let LINE_WIDTH: number;
+export let BASE_SIZE: number;
+export let PAD_SIZE: number;
+export let PROPTO_SIZE: number;
+export let CAST_SIZE: number;
+export let TEXT_PAD_SIZE: number;
+export let DOTS_PAD_SIZE: number;
+export let FUNC_ARG_SIZE: number;
+export let REALLY_SMALL_TEXT: string;
+export let SMALL_TEXT: string;
+export let MEDIUM_TEXT: string;
+export let LARGE_TEXT: string;
+export let MONOSPACE_FONT: string;
+export let ARIAL_FONT: string;
+export let HOR_PAD: number;
+export let VER_PAD: number;
+export let STACK_DASH: [number, number];
+export let COMPOSE_DASH: [number, number];
+export let CAST_DASH: [number, number];
+export let PROPTO_DASH: [number, number];
+export let FUNCTION_DASH: [number, number];
+changeScale(100); // Default scale
 
 export let boundary = {
   tl: {

src/extension.ts

@@ -7,27 +7,67 @@ import * as coord from "./parsing/coords";
 import {
   boundary,
   setCanvasWidthHeight,
+  changeScale,
 } from "./constants/variableconsts";
 import * as vconsts from "./constants/variableconsts";
 import * as ast from "./parsing/ast";
 import { getCanvasHtml } from "./webview/webview";
 
 let openWebview: vscode.WebviewPanel | undefined = undefined;
+let history: string[] = [];
+const HISTORY_LENGTH = vscode.workspace.getConfiguration('vizx').get<number>('historyLength', 25);
+const HISTORY_KEY = 'vizxInputHistory';
+const SCALE_KEY = 'vizxScale';
+
+function updateScale(context: vscode.ExtensionContext, scale: number) {
+  context.workspaceState.update(SCALE_KEY, scale); // Save to workspaceState
+  return changeScale(scale);
+}
 
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
   // Use the console to output diagnostic information (console.log) and errors (console.error)
   // This line of code will only be executed once when your extension is activated
   console.log('Congratulations, your extension "ViZX" is now active!');
+  history = context.workspaceState.get<string[]>(HISTORY_KEY, []);
+  let default_scale = context.workspaceState.get<number>(SCALE_KEY, 100);
+  changeScale(default_scale);
   // The command has been defined in the package.json file
   // Now provide the implementation of the command with registerCommand
   // The commandId parameter must match the command field in package.json
   let disposable = vscode.commands.registerCommand("vizx.render", () => {
+    const newDiag = 'New...';
     const inputBox = vscode.window
-      .showInputBox()
-      .then((expr) => renderCallback(context, expr));
+      .showQuickPick([...history, newDiag], {
+        placeHolder: 'Diagram syntax with notations',
+        title: 'Enter or choose diagram'
+      }
+      ).then((selected) => {
+        if (selected === undefined) {
+          return;
+        }
+        else if (selected === newDiag) {
+          vscode.window.showInputBox({ prompt: 'Enter diagram syntax with notations' })
+            .then(value => {
+              if (value) {
+                history.unshift(value); // Add to history
+                if (history.length > HISTORY_LENGTH) {
+                  history.pop(); // Limit history size
+                }
+                context.workspaceState.update(HISTORY_KEY, history); // Save to workspaceState
+                renderCallback(context, value);
+              }
+            });
+        } else {
+          history = history.filter(item => item !== selected);
+          history.unshift(selected); // Add to the front of history
+          context.workspaceState.update(HISTORY_KEY, history);
+          renderCallback(context, selected);
+        }
+      });
   });
+
   context.subscriptions.push(disposable);
   disposable = vscode.commands.registerCommand("vizx.lspRender", (expr) =>
     renderCallback(context, expr)
@@ -48,6 +88,46 @@ export function activate(context: vscode.ExtensionContext) {
       );
     }
   );
+
+  context.subscriptions.push(disposable);
+
+  disposable = vscode.commands.registerCommand("vizx.exportscale", () => {
+    updateScale(context, 1000);
+    vscode.window.showInformationMessage(
+      "ViZX now renders in export scale. Diagrams may seem overly large but will generate great PNGs. Please rerender to see effect"
+    );
+  });
+
+  context.subscriptions.push(disposable);
+
+  disposable = vscode.commands.registerCommand("vizx.viewscale", () => {
+    updateScale(context, 100);
+    vscode.window.showInformationMessage(
+      "ViZX now renders in view scale. Exporting diagrams is not recommended in this scale. Please rerender to see effect."
+    );
+  });
+
+  disposable = vscode.commands.registerCommand("vizx.scale", () => {
+    const inputBox = vscode.window
+      .showInputBox({
+        placeHolder: "100",
+        prompt: "Enter relative scale value (default: 100)",
+      }).then(scale => {
+        if (scale !== undefined) {
+          const match = scale.match(/^(\d+)(%)?$/);
+          if (match) {
+            const number = parseInt(match[1], 10);
+            if (number > 0 && number < 10000) {
+              updateScale(context, number);
+              return;
+            }
+          }
+        }
+        vscode.window.showErrorMessage(
+          "Please enter a valid number for the scale in the range of [1, 9999]"
+        );
+      })
+  });
   context.subscriptions.push(disposable);
 }
 
@@ -107,4 +187,4 @@ function renderCallback(context: vscode.ExtensionContext, expr: any) {
 }
 
 // this method is called when your extension is deactivated
-export function deactivate() {}
+export function deactivate() { }