From 399dce862b96b905c2b76098f5e235ca2c98bf6e Mon Sep 17 00:00:00 2001
From: Thilo Behnke <thilo.behnke@gmx.net>
Date: Sun, 19 Jun 2022 12:57:47 +0200
Subject: [PATCH] use store for width/height to enable resize

---
 client/svelte-client/src/Canvas.svelte | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/client/svelte-client/src/Canvas.svelte b/client/svelte-client/src/Canvas.svelte
index dcc4ff8..f46ce92 100644
--- a/client/svelte-client/src/Canvas.svelte
+++ b/client/svelte-client/src/Canvas.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
     import { FieldWrapper } from "wasm-app";
     import {onMount} from "svelte";
+    import {get, writable} from "svelte/store";
     const field = FieldWrapper.new();
     let canvas: any;
     let ctx: any;
 
     const GRID_COLOR = "#CCCCCC";
-    const width = field.width();
-    const height = field.height();
-    const pixelRatio = window.devicePixelRatio;
+    const width = writable(field.width());
+    const height = writable(field.height());
+    const pixelRatio = writable(window.devicePixelRatio);
 
     let debug = false;
     let fps = 0;
@@ -35,11 +36,12 @@
     }
 
     const drawObjects = objects => {
+        const canvas_height = get(height);
         objects.forEach(obj => {
             ctx.beginPath();
             ctx.strokeStyle = GRID_COLOR;
 
-            const obj_y = height - obj.y;
+            const obj_y = canvas_height - obj.y;
             const orientation_y = obj.orientation_y * -1;
             const vel_y = obj.vel_y * -1;
 
@@ -79,14 +81,21 @@
         ctx.lineTo(to_x, to_y);
         ctx.stroke();
     }
+
+    function handleResize () {
+        width.set(window.innerWidth);
+        height.set(window.innerHeight);
+        pixelRatio.set(window.devicePixelRatio);
+    }
 </script>
 
 <canvas
         bind:this={canvas}
-        width={width * pixelRatio}
-        height={height * pixelRatio}
-        style="width: {width}px; height: {height}px;"
+        width={$width * $pixelRatio}
+        height={$height * $pixelRatio}
+        style="width: {$width}px; height: {$height}px;"
 ></canvas>
+<svelte:window on:resize|passive={handleResize} />
 
 <style>