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,15 +22,26 @@
   });
 </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" />
-  {#each trackers as tracker}
+  <div
-    <Drag
+    bind:this={parent}
-      bind:id={tracker.id}
+    class="absolute inset-0 border border-red-500"
-      bind:x={tracker.x}
+    style={"width: " +
-      bind:y={tracker.y}
+      image?.getBoundingClientRect().width +
-      {ws}
+      "px; height: " +
-      {parent}
+      image?.getBoundingClientRect().height +
-    />
+      "px;" +
-  {/each}
+      "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>

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>