diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte index 87e9cbe..d3ab368 100644 --- a/frontend/src/components/Container.svelte +++ b/frontend/src/components/Container.svelte @@ -13,24 +13,42 @@ { id: 2, x: 0, y: 0 }, ]); + let width = $state(0); + let height = $state(0); + + const resize = () => { + width = image?.getBoundingClientRect().width ?? 0; + height = image?.getBoundingClientRect().height ?? 0; + }; + onMount(() => { ws = new WebSocket("/ws"); ws.onmessage = (event) => { const data = JSON.parse(event.data); trackers = data; }; + + width = image?.getBoundingClientRect().width ?? 0; + height = image?.getBoundingClientRect().height ?? 0; }); +
- +
diff --git a/frontend/src/components/Drag.svelte b/frontend/src/components/Drag.svelte index 5edb2ff..472cc39 100644 --- a/frontend/src/components/Drag.svelte +++ b/frontend/src/components/Drag.svelte @@ -15,15 +15,18 @@ parent, }: Props = $props(); - let element: HTMLElement | null = $state(null); + let element: HTMLElement; - let vis_x = $derived( - x + (parent?.clientWidth ?? 0) / 2 - (element?.clientWidth ?? 0) / 2, - ); + let vis_x = $state(0); - let vis_y = $derived( - y + (parent?.clientHeight ?? 0) / 2 - (element?.clientHeight ?? 0) / 2, - ); + let vis_y = $state(0); + + $effect(() => { + vis_x = x + (parent.clientWidth ?? 0) / 2 - (element.clientWidth ?? 0) / 2; + + vis_y = + y + (parent.clientHeight ?? 0) / 2 - (element.clientHeight ?? 0) / 2; + }); let capturedPointerId: number | null = $state(null);