From 48e2ad35352efbc4da50e9b55e133634362085cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20T=C3=B8n=20L=C3=B8vhaug?=
 <henrik.lovhaug@gmail.com>
Date: Mon, 9 Dec 2024 09:56:41 +0100
Subject: [PATCH] Improve resizing of bounding box

---
 frontend/src/components/Container.svelte | 24 +++++++++++++++++++++---
 frontend/src/components/Drag.svelte      | 17 ++++++++++-------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte
index 87e9cbe..d3ab368 100644
--- a/frontend/src/components/Container.svelte
+++ b/frontend/src/components/Container.svelte
@@ -13,24 +13,42 @@
     { id: 2, x: 0, y: 0 },
   ]);
 
+  let width = $state(0);
+  let height = $state(0);
+
+  const resize = () => {
+    width = image?.getBoundingClientRect().width ?? 0;
+    height = image?.getBoundingClientRect().height ?? 0;
+  };
+
   onMount(() => {
     ws = new WebSocket("/ws");
     ws.onmessage = (event) => {
       const data = JSON.parse(event.data);
       trackers = data;
     };
+
+    width = image?.getBoundingClientRect().width ?? 0;
+    height = image?.getBoundingClientRect().height ?? 0;
   });
 </script>
 
+<svelte:window onresize={resize} />
 <div class="relative">
-  <img src="/scene_drawing.png" alt="" bind:this={image} class="scale-50" />
+  <img
+    src="/scene_drawing.png"
+    alt=""
+    bind:this={image}
+    class="scale-50"
+    onload={resize}
+  />
   <div
     bind:this={parent}
     class="absolute inset-0 border border-red-500"
     style={"width: " +
-      image?.getBoundingClientRect().width +
+      width +
       "px; height: " +
-      image?.getBoundingClientRect().height +
+      height +
       "px;" +
       "transform: translate(50%, 50%);"}
   >
diff --git a/frontend/src/components/Drag.svelte b/frontend/src/components/Drag.svelte
index 5edb2ff..472cc39 100644
--- a/frontend/src/components/Drag.svelte
+++ b/frontend/src/components/Drag.svelte
@@ -15,15 +15,18 @@
     parent,
   }: Props = $props();
 
-  let element: HTMLElement | null = $state(null);
+  let element: HTMLElement;
 
-  let vis_x = $derived(
-    x + (parent?.clientWidth ?? 0) / 2 - (element?.clientWidth ?? 0) / 2,
-  );
+  let vis_x = $state(0);
 
-  let vis_y = $derived(
-    y + (parent?.clientHeight ?? 0) / 2 - (element?.clientHeight ?? 0) / 2,
-  );
+  let vis_y = $state(0);
+
+  $effect(() => {
+    vis_x = x + (parent.clientWidth ?? 0) / 2 - (element.clientWidth ?? 0) / 2;
+
+    vis_y =
+      y + (parent.clientHeight ?? 0) / 2 - (element.clientHeight ?? 0) / 2;
+  });
 
   let capturedPointerId: number | null = $state(null);