no

frontend/src/lib/App.svelte

@@ -4,7 +4,6 @@
 	import Canvas from '$lib/Canvas.svelte';
 	import Menu from '$lib/Menu.svelte';
 	import type { Room } from '@liveblocks/client';
-	import { onDestroy } from 'svelte';
 	import { COLORS, EMOJIS } from '$lib/constants';
 	import { currZoomTransform, myPresence, others } from '$lib/store';
 
@@ -14,61 +13,6 @@
 	 */
 
 	export let room: Room;
-
-	// // Get initial values for presence and others
-	// let myPresence = room.getPresence();
-	// let others = room.getOthers();
-
-	// // Subscribe to further changes
-	// const unsubscribeMyPresence = room.subscribe('my-presence', (presence) => {
-	// 	myPresence = presence;
-	// });
-
-	// const unsubscribeOthers = room.subscribe('others', (otherUsers) => {
-	// 	others = otherUsers;
-	// });
-
-	// // Unsubscribe when unmounting
-	// onDestroy(() => {
-	// 	unsubscribeMyPresence();
-	// 	unsubscribeOthers();
-	// });
-
-	// $: {
-	// 	console.log('myPresence', $myPresence);
-	// 	console.log('others', $others);
-	// }
-	$: {
-		console.log('Sefl', room.getSelf());
-	}
-	const r = 8;
-	function round(p, n) {
-		return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
-	}
-	const grid = 8;
-
-	// Update cursor presence to current pointer location
-	function handlePointerMove(event: PointerEvent) {
-		event.preventDefault();
-		const x = Math.round(event.layerX / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), 100);
-		const y = Math.round(event.layerY / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), 100);
-		// const x = round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), grid);
-		// const y = round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), grid);
-
-		$myPresence = {
-			cursor: {
-				x,
-				y
-			}
-		};
-	}
-
-	// When the pointer leaves the page, set cursor presence to null
-	function handlePointerLeave() {
-		$myPresence = {
-			cursor: null
-		};
-	}
 </script>
 
 <!-- Show the current user's cursor location -->
@@ -77,27 +21,17 @@
 		? `${$myPresence.cursor.x} × ${$myPresence.cursor.y}`
 		: 'Move your cursor to broadcast its position to other people in the room.'}
 </div>
-<div
-	class="relative z-0 w-screen h-screen cursor-none"
-	on:pointerleave={handlePointerLeave}
-	on:pointermove={handlePointerMove}
->
+<div class="fixed left-0 z-0 w-screen h-screen cursor-none">
 	<Canvas />
 
 	<main class="z-10 relative">
-
 		{#if $myPresence?.cursor}
-			<!-- <Frame
-				color={COLORS[0]}
-				x={$myPresence.cursor.x}
-				y={$myPresence.cursor.y}
-				transform={$currZoomTransform}
-			/> -->
+			<Frame color={COLORS[0]} position={$myPresence.cursor} transform={$currZoomTransform} />
 			<Cursor
 				emoji={EMOJIS[0]}
 				color={COLORS[0]}
-				x={$myPresence.cursor.x}
-				y={$myPresence.cursor.y}
+				position={$myPresence.cursor}
+				transform={$currZoomTransform}
 			/>
 		{/if}
 
@@ -105,18 +39,17 @@
 		{#if others}
 			{#each [...$others] as { connectionId, presence } (connectionId)}
 				{#if presence?.cursor}
-					<!-- <Frame
+					<Frame
 						color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
-						x={presence.cursor.x}
-						y={presence.cursor.y}
+						position={presence.cursor}
 						transform={$currZoomTransform}
-					/> -->
+					/>
 
 					<Cursor
 						emoji={EMOJIS[1 + (connectionId % (EMOJIS.length - 1))]}
 						color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
-						x={presence.cursor.x}
-						y={presence.cursor.y}
+						position={presence.cursor}
+						transform={$currZoomTransform}
 					/>
 				{/if}
 			{/each}
@@ -128,23 +61,4 @@
 </div>
 
 <style lang="postcss" scoped>
-	main {
-		/* @apply fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center touch-none bg-white; */
-		/* position: absolute;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		display: flex;
-		place-content: center;
-		place-items: center;
-		touch-action: none;
-        background-color: white; */
-	}
-
-	.text {
-		max-width: 380px;
-		margin: 0 16px;
-		text-align: center;
-	}
 </style>

frontend/src/lib/Canvas.svelte

@@ -1,28 +1,36 @@
 <script lang="ts">
 	import { zoom, type ZoomTransform, zoomIdentity } from 'd3-zoom';
 	import { select } from 'd3-selection';
+	import { scaleLinear } from 'd3-scale';
 	import { onMount } from 'svelte';
-	import { currZoomTransform } from '$lib/store';
+	import { currZoomTransform, myPresence, others } from '$lib/store';
+
 	const height = 512 * 5;
 	const width = 512 * 5;
 
 	let canvasEl: HTMLCanvasElement;
 	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;
+	let xScale: (x: number) => number;
+	let yScale: (y: number) => number;
 
 	const margin = { top: 100, right: 100, bottom: 100, left: 100 };
 	const extent = [
 		[-margin.left, -margin.top],
 		[width + margin.right, height + margin.bottom]
 	] as [[number, number], [number, number]];
+
 	onMount(() => {
+		xScale = scaleLinear().domain([0, width]).range([0, width]);
+		yScale = scaleLinear().domain([0, height]).range([0, height]);
+
 		const scale = width / containerEl.clientWidth;
 		const zoomHandler = zoom()
-			.scaleExtent([1 / scale, 2])
-			.translateExtent([
-				[0, 0],
-				[width, height]
-			])
+			.scaleExtent([1/scale,1])
+			// .translateExtent([
+			// 	[0, 0],
+			// 	[width, height]
+			// ])
 			// .translateExtent(extent)
 			.clickDistance(2)
 			.on('zoom', zoomed);
@@ -46,11 +54,34 @@
 		const transform = ($currZoomTransform = e.transform);
 		canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
 	}
-	function handlePointerMove(e: PointerEvent) {
-		// console.log(e);
+
+	const r = 8;
+	function round(p, n) {
+		return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
+	}
+	const grid = 8;
+
+	// Update cursor presence to current pointer location
+	function handlePointerMove(event: PointerEvent) {
+		event.preventDefault();
+		const x = Math.round(event.layerX / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), 100);
+		const y = Math.round(event.layerY / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), 100);
+		// const x = round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), grid);
+		// const y = round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), grid);
+
+		$myPresence = {
+			cursor: {
+				x,
+				y
+			}
+		};
 	}
-	function handlePointerLeave(e: PointerEvent) {
-		// console.log(e);
+
+	// When the pointer leaves the page, set cursor presence to null
+	function handlePointerLeave() {
+		$myPresence = {
+			cursor: null
+		};
 	}
 </script>
 

frontend/src/lib/Cursor.svelte

@@ -1,25 +1,24 @@
 <script lang="ts">
 	import { spring } from 'svelte/motion';
 
+	import type { ZoomTransform } from 'd3-zoom';
+
+	export let transform: ZoomTransform;
 	export let color = '';
 	export let emoji = '';
-	export let x = 0;
-	export let y = 0;
+	export let position = { x: 0, y: 0 };
 
 	// Spring animation for cursor
-	const coords = spring(
-		{ x, y },
-		{
-			stiffness: 0.07,
-			damping: 0.35
-		}
-	);
+	const coords = spring(position, {
+		stiffness: 0.07,
+		damping: 0.35
+	});
 	// Update spring when x and y change
-	$: coords.set({ x, y });
+	$: coords.set(position);
 </script>
 
 <div
-	class="absolute top-0 left-0 grid grid-cols-3"
+	class="absolute top-0 left-0 grid grid-cols-3 touch-none pointer-events-none"
 	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px);`}
 >
 	<svg

frontend/src/lib/Frame.svelte

@@ -6,19 +6,15 @@
 
 	export let transform: ZoomTransform;
 	export let color = '';
-	export let x = 0;
-	export let y = 0;
+	export let position = { x: 0, y: 0 };
 
 	// Spring animation for cursor
-	const coords = spring(
-		{ x, y },
-		{
-			stiffness: 0.07,
-			damping: 0.35
-		}
-	);
+	const coords = spring(position, {
+		stiffness: 0.07,
+		damping: 0.35
+	});
 	// Update spring when x and y change
-	$: coords.set({ x, y });
+	$: coords.set(position);
 </script>
 
 <div