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

Test

Browse Source
This commit is contained in:
Henrik Tøn Løvhaug
2024-12-02 17:02:44 +01:00
parent 742338f515
commit ffc15e4d52
7 changed files with 76 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
{#each trackers as tracker}
<Drag bind:id={tracker.id} bind:x={tracker.x} bind:y={tracker.y} {ws} />
{/each}
<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}
{parent}
/>
{/each}
</div>

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

@@ -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;
y += e.movementY;
x = Math.min(
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}

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

@@ -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>