Test

compose.yaml

@@ -1,6 +1,4 @@
 services:
   followspot-psn:
     build: .
-    ports:
-      - "8000:8000"
     network_mode: host

frontend/package.json

@@ -13,7 +13,7 @@
     "@astrojs/svelte": "^6.0.2",
     "@astrojs/tailwind": "^5.1.2",
     "astro": "^4.16.16",
-    "svelte": "^5.2.12",
+    "svelte": "^5.4.0",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.7.2"
   },

frontend/pnpm-lock.yaml

@@ -13,7 +13,7 @@ importers:
         version: 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.4.1)(typescript@5.7.2)
       '@astrojs/svelte':
         specifier: ^6.0.2
-        version: 6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.2.12)(typescript@5.7.2)
+        version: 6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.4.0)(typescript@5.7.2)
       '@astrojs/tailwind':
         specifier: ^5.1.2
         version: 5.1.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(tailwindcss@3.4.15)
@@ -21,8 +21,8 @@ importers:
         specifier: ^4.16.16
         version: 4.16.16(rollup@4.28.0)(typescript@5.7.2)
       svelte:
-        specifier: ^5.2.12
+        specifier: ^5.4.0
-        version: 5.2.12
+        version: 5.4.0
       tailwindcss:
         specifier: ^3.4.15
         version: 3.4.15
@@ -38,10 +38,10 @@ importers:
         version: 0.14.1
       prettier-plugin-svelte:
         specifier: ^3.3.2
-        version: 3.3.2(prettier@3.4.1)(svelte@5.2.12)
+        version: 3.3.2(prettier@3.4.1)(svelte@5.4.0)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.9
-        version: 0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.2.12))(prettier@3.4.1)
+        version: 0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0))(prettier@3.4.1)
 
 packages:
 
@@ -798,8 +798,8 @@ packages:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
     engines: {node: '>=16'}
 
-  caniuse-lite@1.0.30001684:
+  caniuse-lite@1.0.30001685:
-    resolution: {integrity: sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==}
+    resolution: {integrity: sha512-e/kJN1EMyHQzgcMEEgoo+YTCO1NGCmIYHk5Qk8jT6AazWemS5QFKJ5ShCJlH3GZrNIdZofcNCEwZqbMjjKzmnA==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -1922,8 +1922,8 @@ packages:
       svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
       typescript: ^4.9.4 || ^5.0.0
 
-  svelte@5.2.12:
+  svelte@5.4.0:
-    resolution: {integrity: sha512-lcrJVygO05nzQkgRLxaz3qd0kamyhujfpCxalzzKabJUueVrnpc0bhHgR2hUa/335XvOHO39wtc79C72g+5ftw==}
+    resolution: {integrity: sha512-2I/mjD8cXDpKfdfUK+T6yo/OzugMXIm8lhyJUFM5F/gICMYnkl3C/+4cOSpia8TqpDsi6Qfm5+fdmBNMNmaf2g==}
     engines: {node: '>=18'}
 
   tailwindcss@3.4.15:
@@ -1967,8 +1967,8 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  type-fest@4.29.0:
+  type-fest@4.29.1:
-    resolution: {integrity: sha512-RPYt6dKyemXJe7I6oNstcH24myUGSReicxcHTvCLgzm4e0n8y05dGvcGB15/SoPRBmhlMthWQ9pvKyL81ko8nQ==}
+    resolution: {integrity: sha512-Y1zUveI92UYM/vo1EFlQSsNf74+hfKH+7saZJslF0Fw92FRaiTAnHPIvo9d7SLxXt/gAYqA4RXyDTioMQCCp0A==}
     engines: {node: '>=16'}
 
   typesafe-path@0.2.2:
@@ -2339,12 +2339,12 @@ snapshots:
     dependencies:
       prismjs: 1.29.0
 
-  '@astrojs/svelte@6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.2.12)(typescript@5.7.2)':
+  '@astrojs/svelte@6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.4.0)(typescript@5.7.2)':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.2.12)(vite@5.4.11)
+      '@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.4.0)(vite@5.4.11)
       astro: 4.16.16(rollup@4.28.0)(typescript@5.7.2)
-      svelte: 5.2.12
+      svelte: 5.4.0
-      svelte2tsx: 0.7.28(svelte@5.2.12)(typescript@5.7.2)
+      svelte2tsx: 0.7.28(svelte@5.4.0)(typescript@5.7.2)
       typescript: 5.7.2
       vite: 5.4.11
     transitivePeerDependencies:
@@ -2808,23 +2808,23 @@ snapshots:
 
   '@shikijs/vscode-textmate@9.3.0': {}
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.12)(vite@5.4.11))(svelte@5.2.12)(vite@5.4.11)':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.4.0)(vite@5.4.11))(svelte@5.4.0)(vite@5.4.11)':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.2.12)(vite@5.4.11)
+      '@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.4.0)(vite@5.4.11)
       debug: 4.3.7
-      svelte: 5.2.12
+      svelte: 5.4.0
       vite: 5.4.11
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.12)(vite@5.4.11)':
+  '@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.4.0)(vite@5.4.11)':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.12)(vite@5.4.11))(svelte@5.2.12)(vite@5.4.11)
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.4.0)(vite@5.4.11))(svelte@5.4.0)(vite@5.4.11)
       debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.14
-      svelte: 5.2.12
+      svelte: 5.4.0
       vite: 5.4.11
       vitefu: 1.0.4(vite@5.4.11)
     transitivePeerDependencies:
@@ -3055,7 +3055,7 @@ snapshots:
   autoprefixer@10.4.20(postcss@8.4.49):
     dependencies:
       browserslist: 4.24.2
-      caniuse-lite: 1.0.30001684
+      caniuse-lite: 1.0.30001685
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -3079,7 +3079,7 @@ snapshots:
       chalk: 5.3.0
       cli-boxes: 3.0.0
       string-width: 7.2.0
-      type-fest: 4.29.0
+      type-fest: 4.29.1
       widest-line: 5.0.0
       wrap-ansi: 9.0.0
 
@@ -3093,7 +3093,7 @@ snapshots:
 
   browserslist@4.24.2:
     dependencies:
-      caniuse-lite: 1.0.30001684
+      caniuse-lite: 1.0.30001685
       electron-to-chromium: 1.5.67
       node-releases: 2.0.18
       update-browserslist-db: 1.1.1(browserslist@4.24.2)
@@ -3102,7 +3102,7 @@ snapshots:
 
   camelcase@8.0.0: {}
 
-  caniuse-lite@1.0.30001684: {}
+  caniuse-lite@1.0.30001685: {}
 
   ccount@2.0.1: {}
 
@@ -4108,17 +4108,17 @@ snapshots:
       prettier: 3.4.1
       sass-formatter: 0.7.9
 
-  prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.2.12):
+  prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0):
     dependencies:
       prettier: 3.4.1
-      svelte: 5.2.12
+      svelte: 5.4.0
 
-  prettier-plugin-tailwindcss@0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.2.12))(prettier@3.4.1):
+  prettier-plugin-tailwindcss@0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0))(prettier@3.4.1):
     dependencies:
       prettier: 3.4.1
     optionalDependencies:
       prettier-plugin-astro: 0.14.1
-      prettier-plugin-svelte: 3.3.2(prettier@3.4.1)(svelte@5.2.12)
+      prettier-plugin-svelte: 3.3.2(prettier@3.4.1)(svelte@5.4.0)
 
   prettier@2.8.7:
     optional: true
@@ -4421,14 +4421,14 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte2tsx@0.7.28(svelte@5.2.12)(typescript@5.7.2):
+  svelte2tsx@0.7.28(svelte@5.4.0)(typescript@5.7.2):
     dependencies:
       dedent-js: 1.0.1
       pascal-case: 3.1.2
-      svelte: 5.2.12
+      svelte: 5.4.0
       typescript: 5.7.2
 
-  svelte@5.2.12:
+  svelte@5.4.0:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -4497,7 +4497,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  type-fest@4.29.0: {}
+  type-fest@4.29.1: {}
 
   typesafe-path@0.2.2: {}
 

frontend/src/components/Container.svelte

@@ -5,9 +5,11 @@
 
   let ws: WebSocket | null = $state(null);
 
+  let parent: HTMLElement | null = $state(null);
+
   let trackers: TrackerData[] = $state([
     { id: 1, x: 0, y: 0 },
-    { id: 2, x: 400, y: 40 },
+    { id: 2, x: 0, y: 0 },
   ]);
 
   onMount(() => {
@@ -19,6 +21,15 @@
   });
 </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} />
+    <Drag
+      bind:id={tracker.id}
+      bind:x={tracker.x}
+      bind:y={tracker.y}
+      {ws}
+      {parent}
+    />
   {/each}
+</div>

frontend/src/components/Drag.svelte

@@ -4,6 +4,7 @@
     x: number;
     y: number;
     ws: WebSocket | null;
+    parent: HTMLElement;
   };
 
   let {
@@ -11,19 +12,28 @@
     x = $bindable(),
     y = $bindable(),
     ws = $bindable(),
+    parent,
   }: Props = $props();
 
-  let element: HTMLElement;
+  let element: HTMLElement | null = $state(null);
+
+  let vis_x = $derived(
+    x + (parent?.clientWidth ?? 0) / 2 - (element?.clientWidth ?? 0) / 2,
+  );
+
+  let vis_y = $derived(
+    y + (parent?.clientHeight ?? 0) / 2 - (element?.clientHeight ?? 0) / 2,
+  );
 
   let capturedPointerId: number | null = $state(null);
 
   function onPointerDown(e: PointerEvent) {
-    element.setPointerCapture(e.pointerId);
+    element!.setPointerCapture(e.pointerId);
     capturedPointerId = e.pointerId;
   }
   function onPointerUp(e: PointerEvent) {
     capturedPointerId = null;
-    element.releasePointerCapture(e.pointerId);
+    element!.releasePointerCapture(e.pointerId);
   }
   function onPointerMove(e: PointerEvent) {
     if (capturedPointerId != e.pointerId) return;
@@ -31,8 +41,14 @@
     e.preventDefault();
     e.stopPropagation();
 
-    x += e.movementX;
+    x = Math.min(
-    y += e.movementY;
+      parent.clientWidth / 2,
+      Math.max(-parent.clientWidth / 2, x + e.movementX),
+    );
+    y = Math.min(
+      parent.clientHeight / 2,
+      Math.max(-parent.clientHeight / 2, y + e.movementY),
+    );
 
     if (ws) {
       ws.send(
@@ -51,7 +67,7 @@
   onpointerdown={onPointerDown}
   onpointerup={onPointerUp}
   onpointermove={onPointerMove}
-  style={`transform: translate(${x}px, ${y}px)`}
+  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"
 >
   Tracker {id}

frontend/src/pages/index.astro

@@ -7,10 +7,13 @@ import Container from "../components/Container.svelte";
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <title>Astro</title>
   </head>
-  <body class="h-dvh w-screen">
+  <body class="flex h-dvh w-screen items-center justify-center">
     <Container client:load />
   </body>
 </html>