From fa74e1e15a4c390915f14bd5e1efeab78cd20ab2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20T=C3=B8n=20L=C3=B8vhaug?=
 <henrik.lovhaug@gmail.com>
Date: Mon, 2 Dec 2024 17:43:32 +0100
Subject: [PATCH] Bounding box

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

diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte
index c8cb555..f5dd952 100644
--- a/frontend/src/components/Container.svelte
+++ b/frontend/src/components/Container.svelte
@@ -4,6 +4,7 @@
   import Drag from "./Drag.svelte";
 
   let ws: WebSocket | null = $state(null);
+  let image: HTMLImageElement | null = $state(null);
 
   let parent: HTMLElement | null = $state(null);
 
@@ -21,15 +22,26 @@
   });
 </script>
 
-<div bind:this={parent} class="relative border border-red-500">
-  <img src="/scene_drawing.png" alt="moradi" class="absolute" />
-  {#each trackers as tracker}
-    <Drag
-      bind:id={tracker.id}
-      bind:x={tracker.x}
-      bind:y={tracker.y}
-      {ws}
-      {parent}
-    />
-  {/each}
+<div class="relative">
+  <img src="/bg.png" alt="" bind:this={image} class="scale-50" />
+  <div
+    bind:this={parent}
+    class="absolute inset-0 border border-red-500"
+    style={"width: " +
+      image?.getBoundingClientRect().width +
+      "px; height: " +
+      image?.getBoundingClientRect().height +
+      "px;" +
+      "transform: translate(50%, 50%);"}
+  >
+    {#each trackers as tracker}
+      <Drag
+        bind:id={tracker.id}
+        bind:x={tracker.x}
+        bind:y={tracker.y}
+        {ws}
+        {parent}
+      />
+    {/each}
+  </div>
 </div>
diff --git a/frontend/src/components/Drag.svelte b/frontend/src/components/Drag.svelte
index d87fa7b..5edb2ff 100644
--- a/frontend/src/components/Drag.svelte
+++ b/frontend/src/components/Drag.svelte
@@ -68,7 +68,7 @@
   onpointerup={onPointerUp}
   onpointermove={onPointerMove}
   style={`transform: translate(${vis_x}px, ${vis_y}px)`}
-  class="absolute flex h-40 w-40 touch-none items-center justify-center rounded-full border-red-400 bg-red-400"
+  class="absolute flex h-40 w-40 touch-none select-none items-center justify-center rounded-full border-red-400 bg-red-400"
 >
   Tracker {id}
 </div>