Fix for #123

package.json

@@ -123,8 +123,8 @@
         "category": "d2"
       },
       {
-        "command": "D2.ToggleSketch",
-        "title": "Toggle Preview Sketch Rendering",
+        "command": "D2.PickSketch",
+        "title": "Pick Preview Sketch Rendering",
         "category": "d2"
       }
     ],
@@ -185,20 +185,32 @@
           "type": "string",
           "default": "dagre",
           "enum": [
+            "default",
             "dagre",
             "elk",
             "tala"
           ],
           "enumDescriptions": [
+            "",
             "The directed graph layout library Dagre",
             "Eclipse Layout Kernel (ELK) with the Layered algorithm",
             "Terrastruct's AutoLayout Approach - available if installed"
           ],
           "description": "Layout used for preview."
         },
         "D2.previewSketch": {
-          "type": "boolean",
-          "default": false,
+          "type": "string",
+          "default": "none",
+          "enum": [
+            "default",
+            "true",
+            "false"
+          ],
+          "enumDescription": [
+            "",
+            "Use sketch rendering in preview.",
+            "Do Not use sketch rendering in preview."
+          ],
           "description": "Use sketch rendering in preview."
         },
         "D2.execPath": {
@@ -236,7 +248,7 @@
           "group": "d2"
         },
         {
-          "command": "D2.ToggleSketch",
+          "command": "D2.PickSketch",
           "when": "resourceLangId == d2",
           "group": "d2"
         }

src/extension.ts

@@ -27,6 +27,7 @@ import { d2Tasks } from "./tasks";
 import { util } from "./utility";
 import path = require("path");
 import { TextEncoder } from "util";
+import { sketchPicker } from "./sketchPicker";
 
 const d2Ext = "d2";
 const d2Lang = "d2";
@@ -209,12 +210,16 @@ export function activate(context: ExtensionContext): any {
   );
 
   context.subscriptions.push(
-    commands.registerCommand("D2.ToggleSketch", () => {
+    commands.registerCommand("D2.PickSketch", () => {
       const activeEditor = window.activeTextEditor;
 
       if (activeEditor?.document.languageId === d2Ext) {
-        const current: boolean = ws.get("previewSketch", false);
-        ws.update("previewSketch", !current, true);
+        const sketchPick = new sketchPicker();
+        sketchPick.showPicker().then((sketch) => {
+          if (sketch) {
+            ws.update("previewSketch", sketch.label, true);
+          }
+        });
       }
     })
   );

src/layoutPicker.ts

@@ -7,26 +7,46 @@ import { util } from "./utility";
 class LayoutItem implements QuickPickItem {
   label: string;
   description: string;
+  value: number;
 
-  constructor(l: string, d: string) {
+  constructor(l: string, v: number, d: string) {
     this.label = l;
     this.description = d;
+    this.value = v;
   }
 }
 
 /**
  * List of Layouts
  */
-const layouts: QuickPickItem[] = [
-  new LayoutItem("dagre", "The directed graph layout library Dagre"),
-  new LayoutItem("elk", "Eclipse Layout Kernel (ELK) with the Layered algorithm"),
+const layouts: LayoutItem[] = [
+  new LayoutItem("default", -1, "As directored by the d2 file"),
+  new LayoutItem("dagre", 0, "The directed graph layout library Dagre"),
+  new LayoutItem("elk", 1, "Eclipse Layout Kernel (ELK) with the Layered algorithm"),
 ];
 
-const layoutTala = new LayoutItem("tala", "Terrastruct's AutoLayout Approach");
+const layoutTala = new LayoutItem("tala", 2, "Terrastruct's AutoLayout Approach");
 
 const talaPluginName: string =
   process.platform === "win32" ? "d2plugin-tala.exe" : "d2plugin-tala";
 
+const LayoutSwitch = "--layout=";
+
+export function GetLayoutSwitch(layout: string): string {
+  let layoutVal = 0;
+  for (const l in layouts) {
+    if (layouts[l].label === layout) {
+      layoutVal = layouts[l].value;
+    }
+  }
+
+  if (layoutVal === -1) {
+    return "";
+  }
+
+  return LayoutSwitch + layout;
+}
+
 /**
  * layouPicker - This will show the quick pick list in
  * the command pallette when called

src/sketchPicker.ts

@@ -0,0 +1,54 @@
+import { QuickPickItem, window } from "vscode";
+
+/**
+ * Container for D2 Sketch Mode
+ */
+class SketchItem implements QuickPickItem {
+  label: string;
+  value: number;
+
+  constructor(l: string, n: number) {
+    this.label = l;
+    this.value = n;
+  }
+}
+
+/**
+ * List of sketch modes with their numeric values
+ */
+const sketches: SketchItem[] = [
+  new SketchItem("default", -1),
+  new SketchItem("false", 0),
+  new SketchItem("true", 1),
+];
+
+const SketchSwitch = "--sketch=";
+
+export function GetSketchSwitch(sketch: string): string {
+  let sketchVal = 0;
+  for (const s in sketches) {
+    if (sketches[s].label === sketch) {
+      sketchVal = sketches[s].value;
+    }
+  }
+
+  if (sketchVal === -1) {
+    return "";
+  }
+
+  return SketchSwitch + sketch;
+}
+
+/**
+ * themePicker - This will show the quick pick list in
+ * the command pallette when called
+ */
+export class sketchPicker {
+  showPicker(): Thenable<QuickPickItem | undefined> {
+    return window.showQuickPick(sketches, {
+      title: "Sketch",
+      canPickMany: false,
+      placeHolder: "Choose show as sketch...",
+    });
+  }
+}

src/tasks.ts

@@ -3,8 +3,10 @@ import * as path from "path";
 import { Range, TextEditor } from "vscode";
 import { outputChannel, ws } from "./extension";
 import { TaskOutput } from "./taskRunner";
-import { NameToThemeNumber } from "./themePicker";
+import { GetThemeSwitch } from "./themePicker";
 import { util, VT } from "./utility";
+import { GetLayoutSwitch } from "./layoutPicker";
+import { GetSketchSwitch } from "./sketchPicker";
 
 /**
  * D2Tasks - static functions to be used in tasks.  Functions need
@@ -19,8 +21,7 @@ class D2Tasks {
   ): string {
     const layout: string = ws.get("previewLayout", "dagre");
     const theme: string = ws.get("previewTheme", "default");
-    const sketch: boolean = ws.get("previewSketch", false);
-    const themeNumber: number = NameToThemeNumber(theme);
+    const sketch: string = ws.get("previewSketch", "none");
     const d2Path: string = ws.get("execPath", "d2");
 
     terminal?.(`${VT.Green}Starting Compile...${VT.Reset}`);
@@ -30,12 +31,21 @@ class D2Tasks {
     terminal?.(`Current Working Directory: ${VT.Yellow}${filePath}${VT.Reset}`);
     terminal?.("");
 
-    const args: string[] = [
-      `--layout=${layout}`,
-      `--theme=${themeNumber}`,
-      `--sketch=${sketch}`,
-      "-",
-    ];
+    const lsw = GetLayoutSwitch(layout);
+    const tsw = GetThemeSwitch(theme);
+    const ssw = GetSketchSwitch(sketch);
+
+    const args: string[] = [];
+    if (lsw.length > 0) {
+      args.push(lsw);
+    }
+    if (tsw.length > 0) {
+      args.push(tsw);
+    }
+    if (ssw.length > 0) {
+      args.push(ssw);
+    }
+    args.push("-");
 
     // spawnSync doesn't like blank working directories
     if (filePath === "") {

src/themePicker.ts

@@ -17,7 +17,7 @@ class ThemeItem implements QuickPickItem {
  * List of themes with their numeric values
  */
 const themes: ThemeItem[] = [
-  new ThemeItem("default", 0),
+  new ThemeItem("default", -1),
   new ThemeItem("Neutral gray", 1),
   new ThemeItem("Flagship Terrastruct", 3),
   new ThemeItem("Cool classics", 4),
@@ -38,11 +38,23 @@ const themes: ThemeItem[] = [
   new ThemeItem("Origami", 302),
 ];
 
+const ThemeSwitch = "--theme=";
+
+export function GetThemeSwitch(theme: string): string {
+  const tn = NameToThemeNumber(theme);
+
+  if (tn === -1) {
+    return "";
+  }
+
+  return ThemeSwitch + tn;
+}
+
 /**
  * NameToThemeNumber - Given a theme name, return the numeric
  * value that is used on the D2 commandline
  */
-export function NameToThemeNumber(theme: string): number {
+function NameToThemeNumber(theme: string): number {
   for (const t in themes) {
     if (themes[t].label === theme) {
       return themes[t].value;