Sync Bevy canvas size with browser viewport size

studio-frontend/src/app/app.element.ts

@@ -1,5 +1,6 @@
 import * as studio from "@storyteller/studio";
 import { ViewportSize } from "@storyteller/studio";
+import { throttle } from "lodash";
 
 import "./app.element.scss";
 
@@ -7,11 +8,29 @@ export class AppElement extends HTMLElement {
 	static observedAttributes = [];
 
 	connectedCallback(): void {
-		// TODO: This siezes up the whole browser for several seconds, presumably
-		// while the WASM binary is loading. Is there any way to do this
-		// asynchronously?
-		const { width, height } = document.body.getBoundingClientRect();
-		studio.init(new ViewportSize(width, height));
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+		try {
+			// TODO: This siezes up the whole browser for several seconds, presumably
+			// while the WASM binary is loading. Is there any way to do this
+			// asynchronously?
+			studio.init(new ViewportSize(width, height));
+		} catch (err) {
+			if (!(err as Error).message?.startsWith("Using exceptions for control flow"))
+				throw err;
+		}
+
+		window.addEventListener("resize", this.onResize);
 	}
+
+	disconnectedCallback(): void {
+		window.removeEventListener("resize", this.onResize);
+	}
+
+	onResize = throttle(() => {
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+		studio.resize(new ViewportSize(width, height));
+	}, 16.666);
 }
 customElements.define("app-root", AppElement);