fix scales

frontend/src/lib/App.svelte

@@ -111,7 +111,7 @@
 </script>
 
 <!-- Show the current user's cursor location -->
-<div class="text">
+<div class="text touch-none pointer-events-none">
 	{$myPresence?.cursor
 		? `${$myPresence.cursor.x} × ${$myPresence.cursor.y}`
 		: 'Move your cursor to broadcast its position to other people in the room.'}
@@ -121,7 +121,7 @@
 {#if $isPrompting}
 	<PromptModal on:prompt={onPrompt} on:close={onClose} />
 {/if}
-<div class="fixed top-0 left-0 z-0 w-screen h-screen cursor-none">
+<div class="fixed top-0 left-0 z-0 w-screen h-screen">
 	<Canvas />
 
 	<main class="z-10 relative">
@@ -132,6 +132,7 @@
 					position={$imagesList.get(i).position}
 					images={$imagesList.get(i).images}
 					transform={$currZoomTransform}
+					dumped={false}
 				/>
 			{/each}
 		{/if}

frontend/src/lib/Canvas.svelte

@@ -14,12 +14,6 @@
 	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]);
@@ -27,12 +21,14 @@
 		const scale = width / containerEl.clientWidth;
 		const zoomHandler = zoom()
 			.scaleExtent([1 / scale / 1.5, 1])
-			// .translateExtent([
+			// .extent([
 			// 	[0, 0],
 			// 	[width, height]
 			// ])
-			// .translateExtent(extent)
-			.clickDistance(2)
+			.translateExtent([
+				[-width * 0.1, -height * 0.1],
+				[width * 1.1, height * 1.1]
+			])
 			.on('zoom', zoomed);
 
 		select(canvasEl.parentElement)
@@ -65,16 +61,20 @@
 	function round(p, n) {
 		return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
 	}
-	const grid = 8;
+	const grid = 10;
 
 	// 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 = Math.round($currZoomTransform.invertX(event.layerX) / grid) * grid;
+		const y = Math.round($currZoomTransform.invertY(event.layerY) / grid) * grid;
+		// 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);
 
+		console.log(x, y);
+
 		$myPresence = {
 			cursor: {
 				x,
@@ -91,10 +91,7 @@
 	}
 </script>
 
-<div
-	bind:this={containerEl}
-	class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden border-4 border-black z-0"
->
+<div bind:this={containerEl} class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0">
 	<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0" />
 </div>
 

frontend/src/lib/Cursor.svelte

@@ -14,12 +14,15 @@
 		damping: 0.35
 	});
 	// Update spring when x and y change
-	$: coords.set(position);
+	$: coords.set({
+		x: transform.applyX(position.x),
+		y: transform.applyY(position.y)
+	});
 </script>
 
 <div
-	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);`}
+	class="cursor"
+	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k});`}
 >
 	<svg
 		class="block z-0 col-span-2 row-span-2"
@@ -42,4 +45,8 @@
 </div>
 
 <style lang="postcss" scoped>
+	.cursor {
+		@apply absolute top-0 left-0 grid grid-cols-3 touch-none pointer-events-none;
+		transform-origin: 0 0;
+	}
 </style>

frontend/src/lib/Frame.svelte

@@ -8,6 +8,7 @@
 	export let color = '';
 	export let position = { x: 0, y: 0 };
 	export let images: string[];
+	export let dumped: boolean = true;
 
 	// Spring animation for cursor
 	const coords = spring(position, {
@@ -15,12 +16,22 @@
 		damping: 0.35
 	});
 	// Update spring when x and y change
-	$: coords.set(position);
+	$: coords.set({
+		x: transform.applyX(position.x),
+		y: transform.applyY(position.y)
+	});
+
+	$: ncoord = dumped
+		? $coords
+		: {
+				x: transform.applyX(position.x),
+				y: transform.applyY(position.y)
+		  };
 </script>
 
 <div
 	class="frame z-0 flex relative"
-	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k});
+	style={`transform: translateX(${ncoord.x}px) translateY(${ncoord.y}px) scale(${transform.k});
 			background-image: linear-gradient(${color}, rgba(255,255,255,0));
 			color: ${color};
 	`}
@@ -38,7 +49,7 @@
 
 <style lang="postcss" scoped>
 	.frame {
-		@apply pointer-events-none touch-none absolute top-0 left-0 border-2 border-sky-500 w-[512px] h-[512px];
+		@apply pointer-events-none touch-none absolute top-0 left-0 border-2 border-spacing-3 border-sky-500 w-[512px] h-[512px];
 		transform-origin: 0 0;
 	}
 </style>

frontend/src/routes/+page.svelte

@@ -42,7 +42,7 @@
 	});
 </script>
 
-<div class="max-w-screen-md mx-auto p-5 relative  cursor-none touch-none z-10">
+<div class="max-w-screen-md mx-auto p-5 relative pointer-events-none touch-none z-10">
 	<h1 class="text-lg md:text-3xl font-bold leading-normal">
 		Stable Diffussion Outpainting Multiplayer
 	</h1>