Bounding box

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,8 +22,18 @@
   });
 </script>
 
-<div bind:this={parent} class="relative border border-red-500">
+<div class="relative">
-  <img src="/scene_drawing.png" alt="moradi" class="absolute" />
+  <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}
@@ -33,3 +44,4 @@
       />
     {/each}
   </div>
+</div>

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>