adding additional options for d2js

ci/release/changelogs/next.md

@@ -2,4 +2,6 @@
 
 #### Improvements 🧹
 
+d2js: Support additional render options [#2343](https://github.com/terrastruct/d2/pull/2343)
+
 #### Bugfixes ⛑️

d2js/d2wasm/functions.go

@@ -201,9 +201,21 @@ func Compile(args []js.Value) (interface{}, error) {
 		fontFamily = go2.Pointer(d2fonts.HandDrawn)
 		renderOpts.Sketch = input.Opts.Sketch
 	}
+	if input.Opts != nil && input.Opts.Pad != nil {
+		renderOpts.Pad = input.Opts.Pad
+	}
+	if input.Opts != nil && input.Opts.Center != nil {
+		renderOpts.Center = input.Opts.Center
+	}
 	if input.Opts != nil && input.Opts.ThemeID != nil {
 		renderOpts.ThemeID = input.Opts.ThemeID
 	}
+	if input.Opts != nil && input.Opts.DarkThemeID != nil {
+		renderOpts.DarkThemeID = input.Opts.DarkThemeID
+	}
+	if input.Opts != nil && input.Opts.Scale != nil {
+		renderOpts.Scale = input.Opts.Scale
+	}
 	diagram, g, err := d2lib.Compile(ctx, input.FS["index"], &d2lib.CompileOptions{
 		UTF16Pos:       true,
 		FS:             fs,
@@ -245,9 +257,21 @@ func Render(args []js.Value) (interface{}, error) {
 	if input.Opts != nil && input.Opts.Sketch != nil {
 		renderOpts.Sketch = input.Opts.Sketch
 	}
+	if input.Opts != nil && input.Opts.Pad != nil {
+		renderOpts.Pad = input.Opts.Pad
+	}
+	if input.Opts != nil && input.Opts.Center != nil {
+		renderOpts.Center = input.Opts.Center
+	}
 	if input.Opts != nil && input.Opts.ThemeID != nil {
 		renderOpts.ThemeID = input.Opts.ThemeID
 	}
+	if input.Opts != nil && input.Opts.DarkThemeID != nil {
+		renderOpts.DarkThemeID = input.Opts.DarkThemeID
+	}
+	if input.Opts != nil && input.Opts.Scale != nil {
+		renderOpts.Scale = input.Opts.Scale
+	}
 	out, err := d2svg.Render(input.Diagram, renderOpts)
 	if err != nil {
 		return nil, &WASMError{Message: fmt.Sprintf("render failed: %s", err.Error()), Code: 500}

d2js/d2wasm/types.go

@@ -38,8 +38,12 @@ type CompileRequest struct {
 
 type RenderOptions struct {
 	Layout      *string  `json:"layout"`
+	Pad         *int64   `json:"pad"`
 	Sketch      *bool    `json:"sketch"`
+	Center      *bool    `json:"center"`
 	ThemeID     *int64   `json:"themeID"`
+	DarkThemeID *int64   `json:"darkThemeID"`
+	Scale       *float64 `json:"scale"`
 }
 
 type CompileResponse struct {

d2js/js/README.md

@@ -56,6 +56,11 @@ Compiles D2 markup into an intermediate representation.
 Options:
 - `layout`: Layout engine to use ('dagre' | 'elk') [default: 'dagre']
 - `sketch`: Enable sketch mode [default: false]
+- `themeId`: Theme ID to use [default: 0]
+- `darkThemeId`: Theme ID to use when client is in dark mode
+- `center`: Center the SVG in the containing viewbox [default: false]
+- `pad`: Pixels padded around the rendered diagram [default: 100]
+- `scale`: Scale the output. E.g., 0.5 to halve the default size. The default will render SVG's that will fit to screen. Setting to 1 turns off SVG fitting to screen.
 
 ### `render(diagram: Diagram, options?: RenderOptions): Promise<string>`
 Renders a compiled diagram to SVG.

d2js/js/examples/customizable.html

@@ -33,7 +33,12 @@
         border-radius: 4px;
       }
       .layout-toggle,
-      .sketch-toggle {
+      .sketch-toggle,
+      .center-toggle,
+      .theme-select,
+      .dark-theme-select,
+      .padding-input,
+      .scale-input {
         display: flex;
         gap: 16px;
         align-items: center;
@@ -42,6 +47,8 @@
         display: flex;
         gap: 12px;
       }
+      .input-label,
+      .select-label,
       .radio-label,
       .checkbox-label {
         display: flex;
@@ -49,6 +56,9 @@
         align-items: center;
         cursor: pointer;
       }
+      .number-input {
+        width: 3rem;
+      }
       button {
         padding: 8px 16px;
         background: #0066cc;
@@ -96,6 +106,74 @@
             Sketch mode
           </label>
         </div>
+        <div class="center-toggle">
+          <label class="checkbox-label">
+            <input type="checkbox" id="center" />
+            Center mode
+          </label>
+        </div>
+        <div class="theme-select">
+          <label class="select-label">
+            <select id="theme" name="theme">
+              <option value="-1"></option>
+              <option value="0">Default</option>
+              <option value="1">Neutral grey</option>
+              <option value="3">Flagship Terrastruct</option>
+              <option value="4">Cool classics</option>
+              <option value="5">Mixed berry blue</option>
+              <option value="6">Grape soda</option>
+              <option value="7">Aubergine</option>
+              <option value="8">Colorblind clear</option>
+              <option value="100">Vanilla nitro cola</option>
+              <option value="101">Orange creamsicle</option>
+              <option value="102">Shirley temple</option>
+              <option value="103">Earth tones</option>
+              <option value="104">Everglade green</option>
+              <option value="105">Buttered toast</option>
+              <option value="200">Dark mauve</option>
+              <option value="300">Terminal</option>
+              <option value="301">Terminal grayscale</option>
+            </select>
+            Theme ID
+          </label>
+        </div>
+        <div class="dark-theme-select">
+          <label class="select-label">
+            <select id="dark-theme" name="dark-theme">
+              <option value="-1"></option>
+              <option value="0">Default</option>
+              <option value="1">Neutral grey</option>
+              <option value="3">Flagship Terrastruct</option>
+              <option value="4">Cool classics</option>
+              <option value="5">Mixed berry blue</option>
+              <option value="6">Grape soda</option>
+              <option value="7">Aubergine</option>
+              <option value="8">Colorblind clear</option>
+              <option value="100">Vanilla nitro cola</option>
+              <option value="101">Orange creamsicle</option>
+              <option value="102">Shirley temple</option>
+              <option value="103">Earth tones</option>
+              <option value="104">Everglade green</option>
+              <option value="105">Buttered toast</option>
+              <option value="200">Dark mauve</option>
+              <option value="300">Terminal</option>
+              <option value="301">Terminal grayscale</option>
+            </select>
+            Dark Theme ID
+          </label>
+        </div>
+        <div class="padding-input">
+          <label class="input-label">
+            <input type="number" id="padding" value="20" step="10" class="number-input" />
+            Padding
+          </label>
+        </div>
+        <div class="scale-input">
+          <label class="input-label">
+            <input type="number" id="scale" value="-1" step="1" class="number-input" />
+            Scale
+          </label>
+        </div>
       </div>
       <button onclick="compile()">Compile</button>
     </div>
@@ -104,12 +182,43 @@
       import { D2 } from "../dist/browser/index.js";
       const d2 = new D2();
       window.compile = async () => {
+        const notNegative = (value) => {
+          if (value < 0) {
+            return null;
+          } else return value;
+        };
         const input = document.getElementById("input").value;
         const layout = document.querySelector('input[name="layout"]:checked').value;
         const sketch = document.getElementById("sketch").checked;
+        const center = document.getElementById("center").checked;
+        const themeSelector = document.getElementById("theme");
+        const themeId = notNegative(
+          Number(themeSelector.options[themeSelector.selectedIndex].value)
+        );
+        const darkThemeSelector = document.getElementById("dark-theme");
+        const darkThemeId = notNegative(
+          Number(darkThemeSelector.options[darkThemeSelector.selectedIndex].value)
+        );
+        const scale = notNegative(Number(document.getElementById("scale").value));
+        const pad = Number(document.getElementById("padding").value);
         try {
-          const result = await d2.compile(input, { layout, sketch });
-          const svg = await d2.render(result.diagram, { sketch });
+          const result = await d2.compile(input, {
+            layout,
+            sketch,
+            themeId,
+            darkThemeId,
+            scale,
+            pad,
+            center,
+          });
+          const svg = await d2.render(result.diagram, {
+            sketch,
+            themeId,
+            darkThemeId,
+            scale,
+            pad,
+            center,
+          });
           document.getElementById("output").innerHTML = svg;
         } catch (err) {
           console.error(err);

d2js/js/test/unit/basic.test.js

@@ -35,6 +35,16 @@ describe("D2 Unit Tests", () => {
     await d2.worker.terminate();
   }, 20000);
 
+  test("center render works", async () => {
+    const d2 = new D2();
+    const result = await d2.compile("x -> y", { center: true });
+    const svg = await d2.render(result.diagram, { center: true });
+    expect(svg).toContain("<svg");
+    expect(svg).toContain("</svg>");
+    expect(svg).toContain("xMidYMid meet");
+    await d2.worker.terminate();
+  }, 20000);
+
   test("latex works", async () => {
     const d2 = new D2();
     const result = await d2.compile("x: |latex \\frac{f(x+h)-f(x)}{h} |");