Merge pull request #560 from berniexie/540/fit-to-screen-on-load

watch: set width/height of svg to fit screen

ci/release/changelogs/next.md

@@ -6,6 +6,8 @@
 
 #### Improvements 🧹
 
+- Watch mode now renders fit to screen. [#560](https://github.com/terrastruct/d2/pull/560)
+
 #### Bugfixes ⛑️
 
 - Restricts where `near` key constant values can be used, with good error messages, instead of erroring (e.g. setting `near: top-center` on a container would cause bad layouts or error). [#538](https://github.com/terrastruct/d2/pull/538)

static/watch.js

@@ -31,6 +31,25 @@ function init(reconnectDelay) {
       // setting innerHTML to only the actual svg innards. However then you also need to parse
       // out the width, height and viewbox out of the top level SVG tag and update those manually.
       d2SVG.innerHTML = msg.svg;
+
+      const svgEl = d2SVG.querySelector("svg");
+      let width = parseInt(svgEl.getAttribute("width"), 10);
+      let height = parseInt(svgEl.getAttribute("height"), 10);
+      let ratio;
+      if (width > height) {
+        if (width > window.innerWidth) {
+          ratio = window.innerWidth / width;
+        }
+      } else if (height > window.innerHeight) {
+        ratio = window.innerHeight / height;
+      }
+      // Scale svg fit to zoom
+      if (ratio) {
+        // body padding is 8px
+        svgEl.setAttribute("width", width * ratio - 16);
+        svgEl.setAttribute("height", height * ratio - 16);
+      }
+
       d2ErrDiv.style.display = "none";
     }
     if (msg.err) {