diff --git a/package.json b/package.json index d4446d4..f4b5c04 100644 --- a/package.json +++ b/package.json @@ -109,8 +109,8 @@ "category": "d2" }, { - "command": "D2.ToggleSketch", - "title": "Toggle Preview Sketch Rendering", + "command": "D2.PickSketch", + "title": "Pick Preview Sketch Rendering", "category": "d2" } ], @@ -171,11 +171,13 @@ "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" @@ -183,8 +185,18 @@ "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": { @@ -222,7 +234,7 @@ "group": "d2" }, { - "command": "D2.ToggleSketch", + "command": "D2.PickSketch", "when": "resourceLangId == d2", "group": "d2" } diff --git a/src/extension.ts b/src/extension.ts index c6c56ba..4fa26ab 100644 --- a/src/extension.ts +++ b/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); + } + }); } }) ); diff --git a/src/layoutPicker.ts b/src/layoutPicker.ts index 3023383..6b7176f 100644 --- a/src/layoutPicker.ts +++ b/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 diff --git a/src/sketchPicker.ts b/src/sketchPicker.ts new file mode 100644 index 0000000..e0e85be --- /dev/null +++ b/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 { + return window.showQuickPick(sketches, { + title: "Sketch", + canPickMany: false, + placeHolder: "Choose show as sketch...", + }); + } +} diff --git a/src/tasks.ts b/src/tasks.ts index 4c03dff..d115656 100644 --- a/src/tasks.ts +++ b/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 === "") { diff --git a/src/themePicker.ts b/src/themePicker.ts index 9eb34a3..7832cd4 100644 --- a/src/themePicker.ts +++ b/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;