henrik/followspot-psn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove parent binding to child

Browse Source
This commit is contained in:
Henrik Tøn Løvhaug
2025-01-09 18:58:31 +01:00
parent 4d6b61e90e
commit 0e5dd00816
5 changed files with 991 additions and 893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/package.json
View File

@@ -10,15 +10,15 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/check": "^0.9.4", "@astrojs/check": "^0.9.4",
"@astrojs/svelte": "^6.0.2", "@astrojs/svelte": "^7.0.3",
"@astrojs/tailwind": "^5.1.2", "@astrojs/tailwind": "^5.1.4",
"astro": "^4.16.16", "astro": "^5.1.4",
"svelte": "^5.4.0", "svelte": "^5.17.2",
"tailwindcss": "^3.4.15", "tailwindcss": "^3.4.17",
"typescript": "^5.7.2" "typescript": "^5.7.3"
}, },
"devDependencies": { "devDependencies": {
"prettier": "^3.4.1", "prettier": "^3.4.2",
"prettier-plugin-astro": "^0.14.1", "prettier-plugin-astro": "^0.14.1",
"prettier-plugin-svelte": "^3.3.2", "prettier-plugin-svelte": "^3.3.2",
"prettier-plugin-tailwindcss": "^0.6.9" "prettier-plugin-tailwindcss": "^0.6.9"

1811
frontend/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

18
frontend/src/components/Container.svelte
View File

@@ -6,8 +6,6 @@
let ws: WebSocket | null = $state(null); let ws: WebSocket | null = $state(null);
let image: HTMLImageElement | null = $state(null); let image: HTMLImageElement | null = $state(null);
let parent: HTMLElement | null = $state(null);
let trackers: TrackerData[] = $state([ let trackers: TrackerData[] = $state([
{ id: 1, x: 0, y: 0 }, { id: 1, x: 0, y: 0 },
{ id: 2, x: 0, y: 0 }, { id: 2, x: 0, y: 0 },
@@ -39,26 +37,18 @@
src="/scene_drawing.png" src="/scene_drawing.png"
alt="" alt=""
bind:this={image} bind:this={image}
class="scale-50" class="max-w-screen max-h-screen"
onload={resize} onload={resize}
/> />
<div <div class="absolute inset-0 border border-red-500">
bind:this={parent}
class="absolute inset-0 border border-red-500"
style={"width: " +
width +
"px; height: " +
height +
"px;" +
"transform: translate(50%, 50%);"}
>
{#each trackers as tracker} {#each trackers as tracker}
<Drag <Drag
bind:id={tracker.id} bind:id={tracker.id}
bind:x={tracker.x} bind:x={tracker.x}
bind:y={tracker.y} bind:y={tracker.y}
bind:width
bind:height
{ws} {ws}
{parent}
/> />
{/each} {/each}
</div> </div>

25
frontend/src/components/Drag.svelte
View File

@@ -3,8 +3,9 @@
id: number; id: number;
x: number; x: number;
y: number; y: number;
width: number;
height: number;
ws: WebSocket | null; ws: WebSocket | null;
parent: HTMLElement | null;
}; };
let { let {
@@ -12,7 +13,8 @@
x = $bindable(), x = $bindable(),
y = $bindable(), y = $bindable(),
ws = $bindable(), ws = $bindable(),
parent, width = $bindable(),
height = $bindable(),
}: Props = $props(); }: Props = $props();
let element: HTMLElement; let element: HTMLElement;
@@ -22,10 +24,9 @@
let vis_y = $state(0); let vis_y = $state(0);
$effect(() => { $effect(() => {
vis_x = x + (parent?.clientWidth ?? 0) / 2 - (element.clientWidth ?? 0) / 2; vis_x = x + width / 2 - (element.clientWidth ?? 0) / 2;
vis_y = vis_y = y + height / 2 - (element.clientHeight ?? 0) / 2;
y + (parent?.clientHeight ?? 0) / 2 - (element.clientHeight ?? 0) / 2;
}); });
let capturedPointerId: number | null = $state(null); let capturedPointerId: number | null = $state(null);
@@ -44,17 +45,10 @@
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
x = Math.min( x = Math.min(width / 2, Math.max(-width / 2, x + e.movementX));
(parent?.clientWidth ?? 0) / 2, y = Math.min(height / 2, Math.max(-height / 2, y + e.movementY));
Math.max(-(parent?.clientWidth ?? 0) / 2, x + e.movementX),
);
y = Math.min(
(parent?.clientHeight ?? 0) / 2,
Math.max(-(parent?.clientHeight ?? 0) / 2, y + e.movementY),
);
if (ws) { ws?.send(
ws.send(
JSON.stringify({ JSON.stringify({
id, id,
x, x,
@@ -62,7 +56,6 @@
}), }),
); );
} }
}
</script> </script>
<div <div

4
frontend/src/pages/index.astro
View File

@@ -9,11 +9,11 @@ import Container from "../components/Container.svelte";
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/> />
<title>Astro</title> <title>Astro</title>
</head> </head>
<body class="flex h-dvh w-screen items-center justify-center"> <body class="flex h-dvh w-screen items-center justify-center overflow-hidden">
<Container client:load /> <Container client:load />
</body> </body>
</html> </html>