From e455c9974a1517fca80ad9fe1584ca3dc7960fab Mon Sep 17 00:00:00 2001
From: Bernard Xie <bernard@terrastruct.com>
Date: Thu, 29 Dec 2022 16:26:54 -0800
Subject: [PATCH] set width/height to fit screen

---
 static/watch.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/static/watch.js b/static/watch.js
index 868fb741b..0ebeddeeb 100644
--- a/static/watch.js
+++ b/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) {