Improve resizing of bounding box

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%);"}
   >

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(
+  let vis_x = $state(0);
-    x + (parent?.clientWidth ?? 0) / 2 - (element?.clientWidth ?? 0) / 2,
-  );
 
-  let vis_y = $derived(
+  let vis_y = $state(0);
-    y + (parent?.clientHeight ?? 0) / 2 - (element?.clientHeight ?? 0) / 2,
+
-  );
+  $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);