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": {
"@astrojs/check": "^0.9.4",
"@astrojs/svelte": "^6.0.2",
"@astrojs/tailwind": "^5.1.2",
"astro": "^4.16.16",
"svelte": "^5.4.0",
"tailwindcss": "^3.4.15",
"typescript": "^5.7.2"
"@astrojs/svelte": "^7.0.3",
"@astrojs/tailwind": "^5.1.4",
"astro": "^5.1.4",
"svelte": "^5.17.2",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.3"
},
"devDependencies": {
"prettier": "^3.4.1",
"prettier": "^3.4.2",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-svelte": "^3.3.2",
"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 image: HTMLImageElement | null = $state(null);
let parent: HTMLElement | null = $state(null);
let trackers: TrackerData[] = $state([
{ id: 1, x: 0, y: 0 },
{ id: 2, x: 0, y: 0 },
@@ -39,26 +37,18 @@
src="/scene_drawing.png"
alt=""
bind:this={image}
class="scale-50"
class="max-w-screen max-h-screen"
onload={resize}
/>
<div
bind:this={parent}
class="absolute inset-0 border border-red-500"
style={"width: " +
width +
"px; height: " +
height +
"px;" +
"transform: translate(50%, 50%);"}
>
<div class="absolute inset-0 border border-red-500">
{#each trackers as tracker}
<Drag
bind:id={tracker.id}
bind:x={tracker.x}
bind:y={tracker.y}
bind:width
bind:height
{ws}
{parent}
/>
{/each}
</div>

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

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

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="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>
</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 />
</body>
</html>