Merge pull request #20 from terrastruct/18/add-pad-sketch-options

options: add pad/sketch options

Author: Bernard Xie

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "d2-obsidian",
   "name": "D2",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "minAppVersion": "0.15.0",
   "description": "The official D2 plugin for Obsidian. D2 is a modern diagram scripting language that turns text to diagrams.",
   "author": "Terrastruct",

package.json

@@ -1,29 +1,29 @@
 {
-	"name": "d2-obsidian",
-	"version": "1.0.0",
-	"description": "This is the official D2 plugin for Obsidian.",
-	"main": "main.js",
-	"scripts": {
-		"dev": "node esbuild.config.mjs",
-		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
-		"version": "node version-bump.mjs && git add manifest.json versions.json"
-	},
-	"keywords": [],
-	"author": "",
-	"license": "MIT",
-	"devDependencies": {
-		"@types/lodash.debounce": "^4.0.7",
-		"@types/node": "^16.11.6",
-		"@typescript-eslint/eslint-plugin": "5.29.0",
-		"@typescript-eslint/parser": "5.29.0",
-		"builtin-modules": "3.3.0",
-		"esbuild": "0.14.47",
-		"obsidian": "latest",
-		"tslib": "2.4.0",
-		"typescript": "4.7.4"
-	},
-	"dependencies": {
-		"child_process": "^1.0.2",
-		"lodash.debounce": "^4.0.8"
-	}
+  "name": "d2-obsidian",
+  "version": "1.1.0",
+  "description": "This is the official D2 plugin for Obsidian.",
+  "main": "main.js",
+  "scripts": {
+    "dev": "node esbuild.config.mjs",
+    "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
+    "version": "node version-bump.mjs && git add manifest.json versions.json"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/node": "^16.11.6",
+    "@typescript-eslint/eslint-plugin": "5.29.0",
+    "@typescript-eslint/parser": "5.29.0",
+    "builtin-modules": "3.3.0",
+    "esbuild": "0.14.47",
+    "obsidian": "latest",
+    "tslib": "2.4.0",
+    "typescript": "4.7.4"
+  },
+  "dependencies": {
+    "child_process": "^1.0.2",
+    "lodash.debounce": "^4.0.8"
+  }
 }

src/processor.ts

@@ -159,6 +159,8 @@ export class D2Processor {
       "-",
       `--theme=${this.plugin.settings.theme}`,
       `--layout=${this.plugin.settings.layoutEngine}`,
+      `--pad=${this.plugin.settings.pad}`,
+      `--sketch=${this.plugin.settings.sketch}`,
       "--bundle=false",
     ];
     const cmd = args.join(" ");

src/settings.ts

@@ -9,6 +9,8 @@ export interface D2PluginSettings {
   debounce: number;
   theme: number;
   d2Path: string;
+  pad: number;
+  sketch: boolean;
 }
 
 export const DEFAULT_SETTINGS: D2PluginSettings = {
@@ -17,6 +19,8 @@ export const DEFAULT_SETTINGS: D2PluginSettings = {
   theme: 0,
   apiToken: "",
   d2Path: "",
+  pad: 100,
+  sketch: false,
 };
 
 export class D2SettingsTab extends PluginSettingTab {
@@ -93,7 +97,7 @@ export class D2SettingsTab extends PluginSettingTab {
           .setPlaceholder("Enter a theme ID")
           .setValue(String(this.plugin.settings.theme))
           .onChange(async (value) => {
-            if (!isNaN(Number(value)) || value === undefined) {
+            if (!isNaN(Number(value)) || value === "") {
               this.plugin.settings.theme = Number(value || DEFAULT_SETTINGS.theme);
               await this.plugin.saveSettings();
             } else {
@@ -102,6 +106,36 @@ export class D2SettingsTab extends PluginSettingTab {
           })
       );
 
+    new Setting(containerEl)
+      .setName("Pad")
+      .setDesc("Pixels padded around the rendered diagram")
+      .addText((text) =>
+        text
+          .setPlaceholder(String(DEFAULT_SETTINGS.pad))
+          .setValue(String(this.plugin.settings.pad))
+          .onChange(async (value) => {
+            if (isNaN(Number(value))) {
+              new Notice("Please specify a valid number");
+              this.plugin.settings.pad = Number(DEFAULT_SETTINGS.pad);
+            } else if (value === "") {
+              this.plugin.settings.pad = Number(DEFAULT_SETTINGS.pad);
+            } else {
+              this.plugin.settings.pad = Number(value);
+            }
+            await this.plugin.saveSettings();
+          })
+      );
+
+    new Setting(containerEl)
+      .setName("Sketch mode")
+      .setDesc("Render the diagram to look like it was sketched by hand")
+      .addToggle((toggle) =>
+        toggle.setValue(this.plugin.settings.sketch).onChange(async (value) => {
+          this.plugin.settings.sketch = value;
+          await this.plugin.saveSettings();
+        })
+      );
+
     new Setting(containerEl)
       .setName("Debounce")
       .setDesc("How often should the diagram refresh in milliseconds (min 100)")
@@ -113,7 +147,7 @@ export class D2SettingsTab extends PluginSettingTab {
             if (isNaN(Number(value))) {
               new Notice("Please specify a valid number");
               this.plugin.settings.debounce = Number(DEFAULT_SETTINGS.debounce);
-            } else if (value === undefined) {
+            } else if (value === "") {
               this.plugin.settings.debounce = Number(DEFAULT_SETTINGS.debounce);
             } else if (Number(value) < 100) {
               new Notice("The value must be greater than 100");
@@ -128,7 +162,7 @@ export class D2SettingsTab extends PluginSettingTab {
     new Setting(containerEl)
       .setName("Path (optional)")
       .setDesc(
-        "Customize the local path to the directory `d2` is installed in. This is only necessary if `d2` is not found automatically by the plugin (but is installed)."
+        "Customize the local path to the directory `d2` is installed in (ex. if d2 is located at `/usr/local/bin/d2`, then the path is `/usr/local/bin`). This is only necessary if `d2` is not found automatically by the plugin (but is installed)."
       )
       .addText((text) => {
         text

versions.json

@@ -1,3 +1,5 @@
 {
-  "1.0.1": "0.15.0"
+  "1.1.0": "0.15.0",
+  "1.0.1": "0.15.0",
+  "1.0.0": "0.15.0"
 }