Merge pull request #944 from gavin-ts/fix-watch-mode-zoom

fix zoom in watch mode

ci/release/changelogs/next.md

@@ -7,3 +7,4 @@
 #### Bugfixes ⛑️
 
 - Fixes a regression where PNG backgrounds could be cut off in the appendix. [#941](https://github.com/terrastruct/d2/pull/941)
+- Fixes zooming not working in watch mode. [#944](https://github.com/terrastruct/d2/pull/944)

d2cli/static/watch.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-}
-
-#d2-svg-container > svg {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
 #d2-err {
   /* This style was copied from Chrome's svg parser error style. */
   white-space: pre-wrap;

d2cli/static/watch.js

@@ -11,6 +11,8 @@ function init(reconnectDelay) {
   const ws = new WebSocket(
     `ws://${window.location.host}${window.location.pathname}watch`
   );
+  let isInit = true;
+  let ratio;
   ws.onopen = () => {
     reconnectDelay = 1000;
     console.info("watch websocket opened");
@@ -31,6 +33,29 @@ 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("#d2-svg");
+      // just use inner SVG in watch mode
+      svgEl.parentElement.replaceWith(svgEl);
+      let width = parseInt(svgEl.getAttribute("width"), 10);
+      let height = parseInt(svgEl.getAttribute("height"), 10);
+      if (isInit) {
+        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
+        isInit = false;
+      }
+      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) {