Merge pull request #26 from terrastruct/bernie/max-container-height

settings: add max container height

README.md

@@ -28,6 +28,7 @@ Settings > Community plugins > Browse > Search for "D2"
 - `Theme ID`: For a list of available themes, visit the [D2 repository](https://github.com/terrastruct/d2/tree/master/d2themes).
 - `Pad`: Number of pixels padded around the rendered diagram.
 - `Sketch mode`: Render the diagram to look like it was sketched by hand.
+- `Container height`: Diagram max render height in pixels (Requires d2 v0.2.2 and up).
 - `Debounce`: Number of milliseconds to wait after a change has made to refresh the diagram (min 100).
 - `Path`: Customize the path to `d2` (optional). We check common places D2 might be installed, along with your system path. However, your OS or setup may require you to input your path to `d2` manually. To do so, type `where d2` into your terminal, and copy everything in the path up until `/d2` and paste it into this configuration.
 

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "d2-obsidian",
   "name": "D2",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "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",

src/processor.ts

@@ -69,14 +69,19 @@ export class D2Processor {
   insertImage(image: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) {
     const parser = new DOMParser();
     const svg = parser.parseFromString(image, "image/svg+xml");
-    const svgEl = svg.documentElement;
+    const containerEl = el.createDiv();
+
+    containerEl.style.maxHeight = `${this.plugin.settings.containerHeight}px`;
+    containerEl.style.height = "100vh";
+    containerEl.style.width = "100%";
+    containerEl.style.position = "relative";
 
-    // Have svg image be contained within the obsidian window
-    svgEl.setAttribute("preserveAspectRatio", "xMinYMin slice");
-    svgEl.removeAttribute("width");
-    svgEl.removeAttribute("height");
+    const svgEl = svg.documentElement;
+    svgEl.style.position = "absolute";
+    svgEl.style.width = "100%";
+    svgEl.style.height = "100%";
 
-    el.insertAdjacentHTML("beforeend", this.sanitizeSVGIDs(svgEl, ctx.docId));
+    containerEl.innerHTML = this.sanitizeSVGIDs(svgEl, ctx.docId);
   }
 
   export = async (

src/settings.ts

@@ -11,6 +11,7 @@ export interface D2PluginSettings {
   d2Path: string;
   pad: number;
   sketch: boolean;
+  containerHeight: number;
 }
 
 export const DEFAULT_SETTINGS: D2PluginSettings = {
@@ -21,6 +22,7 @@ export const DEFAULT_SETTINGS: D2PluginSettings = {
   d2Path: "",
   pad: 100,
   sketch: false,
+  containerHeight: 800,
 };
 
 export class D2SettingsTab extends PluginSettingTab {
@@ -136,6 +138,30 @@ export class D2SettingsTab extends PluginSettingTab {
         })
       );
 
+    new Setting(containerEl)
+      .setName("Container height")
+      .setDesc("Diagram max render height in pixels (Requires d2 v0.2.2 and up)")
+      .addText((text) =>
+        text
+          .setPlaceholder(String(DEFAULT_SETTINGS.containerHeight))
+          .setValue(String(this.plugin.settings.containerHeight))
+          .onChange(async (value) => {
+            if (isNaN(Number(value))) {
+              new Notice("Please specify a valid number");
+              this.plugin.settings.containerHeight = Number(
+                DEFAULT_SETTINGS.containerHeight
+              );
+            } else if (value === "") {
+              this.plugin.settings.containerHeight = Number(
+                DEFAULT_SETTINGS.containerHeight
+              );
+            } else {
+              this.plugin.settings.containerHeight = Number(value);
+            }
+            await this.plugin.saveSettings();
+          })
+      );
+
     new Setting(containerEl)
       .setName("Debounce")
       .setDesc("How often should the diagram refresh in milliseconds (min 100)")

versions.json

@@ -1,4 +1,5 @@
 {
+  "1.1.2": "0.15.0",
   "1.1.1": "0.15.0",
   "1.1.0": "0.15.0",
   "1.0.1": "0.15.0",