From 0580db6c68ea00594415369a01437c5789cdbb99 Mon Sep 17 00:00:00 2001
From: lqdev <liquidev@tutanota.com>
Date: Sun, 18 Feb 2024 10:58:57 +0100
Subject: [PATCH] automatically resize sandbox iframes

---
 static/css/main.css  |  1 +
 static/js/sandbox.js |  6 ------
 template/sandbox.hbs | 18 +++++++++++++++++-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 8178a68..c9c8fdf 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -574,6 +574,7 @@ th-literate-program[data-mode="graphics"] {
     & iframe {
         border-style: none;
         border-radius: 4px;
+        display: block;
     }
 
     /* The inner iframe is hidden until something requests display. */
diff --git a/static/js/sandbox.js b/static/js/sandbox.js
index c26bd9c..7893a7d 100644
--- a/static/js/sandbox.js
+++ b/static/js/sandbox.js
@@ -6,11 +6,5 @@ export class Sketch {
         this.ctx = this.canvas.getContext("2d");
 
         document.body.appendChild(this.canvas);
-
-        postMessage({
-            kind: "resize",
-            width,
-            height,
-        });
     }
 }
diff --git a/template/sandbox.hbs b/template/sandbox.hbs
index 12d8d67..d000df8 100644
--- a/template/sandbox.hbs
+++ b/template/sandbox.hbs
@@ -10,13 +10,28 @@
             margin: 0;
             overflow: hidden;
         }
+
+        canvas {
+            display: block;
+        }
     </style>
 
     <script type="importmap">{ "imports": { "treehouse/": "{{ config.site }}/static/js/" } }</script>
 
     <script type="module">
         import { evaluate } from "treehouse/components/literate-programming/eval.js";
-        console.log("yo");
+
+        // I'm aware there's also ResizeObserver but it didn't seem to fire off any events when a
+        // canvas was added, rendering it pretty much useless.
+        let mutationObserver = new MutationObserver(() => {
+            postMessage({
+                kind: "resize",
+                width: document.body.scrollWidth,
+                height: document.body.scrollHeight,
+            });
+        });
+        mutationObserver.observe(document.body, { subtree: true, childList: true });
+
         addEventListener("message", async event => {
             let message = event.data;
             if (message.action == "eval") {
@@ -24,6 +39,7 @@
                 evaluate(message.input);
             }
         });
+
     </script>
 </head>