canvas

Makefile

@@ -1,9 +1,9 @@
 build-client:
 	cd frontend && npm install && PUBLIC_DEV_MODE=PROD npm run build && rm -rf ../static && cp -r build/ ../static/
 build-dev:
-	cd frontend && npm install && PUBLIC_DEV_MODE=DEV npm run build-dev && rm -rf ../static && cp -r build/ ../static/
+	cd frontend && npm install && npm run build-dev && rm -rf ../static && cp -r build/ ../static/
 run-front-dev:
-	cd frontend && npm install && PUBLIC_DEV_MODE=DEV npm run dev
+	cd frontend && npm install && npm run dev
 run-dev:
 	rm -rf .data/ && FLASK_ENV=development python app.py
 run-prod:

frontend/package.json

@@ -17,6 +17,8 @@
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/line-clamp": "^0.4.2",
 		"@types/cookie": "^0.5.1",
+		"@types/d3-selection": "^3.0.3",
+		"@types/d3-zoom": "^3.0.1",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"autoprefixer": "^10.4.11",
@@ -37,6 +39,8 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/fira-mono": "^4.5.0",
-		"@liveblocks/client": "^0.18.2"
+		"@liveblocks/client": "^0.18.2",
+		"d3-selection": "^3.0.0",
+		"d3-zoom": "^3.0.0"
 	}
 }

frontend/src/app.d.ts

@@ -1,6 +1,7 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 // and what to do when importing types
+import type { ZoomTransform } from 'd3-zoom';
 
 declare global {
 	namespace App {
@@ -12,4 +13,7 @@ declare global {
 			parentIFrame: unknown;
 		}
 	}
+	interface Event {
+		transform: ZoomTransform;
+	}
 }

frontend/src/lib/App.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import Cursor from '$lib/Cursor.svelte';
+	import Canvas from '$lib/Canvas.svelte';
+	import type { Room } from '@liveblocks/client';
+	import { onDestroy } from 'svelte';
+	/**
+	 * The main Liveblocks code for the example.
+	 * Check in src/routes/index.svelte to see the setup code.
+	 */
+
+	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();
+	});
+
+	// Update cursor presence to current pointer location
+	function handlePointerMove(event: PointerEvent) {
+		event.preventDefault();
+		room.updatePresence({
+			cursor: {
+				x: Math.round(event.clientX),
+				y: Math.round(event.clientY)
+			}
+		});
+	}
+
+	// When the pointer leaves the page, set cursor presence to null
+	function handlePointerLeave() {
+		room.updatePresence({
+			cursor: null
+		});
+	}
+
+	const COLORS = [
+		'#E57373',
+		'#9575CD',
+		'#4FC3F7',
+		'#81C784',
+		'#FFF176',
+		'#FF8A65',
+		'#F06292',
+		'#7986CB'
+	];
+</script>
+
+<main on:pointerleave={handlePointerLeave} on:pointermove={handlePointerMove}>
+	<!-- Show the current user's cursor location -->
+	<div class="text">
+		{myPresence?.cursor
+			? `${myPresence.cursor.x} × ${myPresence.cursor.y}`
+			: 'Move your cursor to broadcast its position to other people in the room.'}
+	</div>
+
+	<!-- When others connected, iterate through others and show their cursors -->
+	{#if others}
+		{#each [...others] as { connectionId, presence } (connectionId)}
+			{#if presence?.cursor}
+				<Cursor
+					color={COLORS[connectionId % COLORS.length]}
+					x={presence.cursor.x}
+					y={presence.cursor.y}
+				/>
+			{/if}
+		{/each}
+	{/if}
+
+</main>
+
+<Canvas />
+<h3 class="text-xl">TESTS</h3>
+<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,103 +1,51 @@
 <script lang="ts">
-	import Cursor from '$lib/Cursor.svelte';
-	import type { Room } from '@liveblocks/client';
-	import { onDestroy } from 'svelte';
-	/**
-	 * The main Liveblocks code for the example.
-	 * Check in src/routes/index.svelte to see the setup code.
-	 */
-
-	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();
+	import { zoom, zoomIdentity } from 'd3-zoom';
+	import { select, type Selection } from 'd3-selection';
+	import { onMount, tick } from 'svelte';
+
+	const width = 512 * 2;
+	const height = 512 * 2;
+
+	let canvasEl: HTMLCanvasElement;
+	let canvasCtx: CanvasRenderingContext2D;
+
+	const margin = { top: 50, right: 50, bottom: 50, left: 50 };
+	const extent = [
+		[margin.left, margin.top],
+		[width - margin.right, height - margin.top]
+	] as [[number, number], [number, number]];
+
+	const zoomHandler = zoom()
+		.scaleExtent([0.5, 2])
+		// .translateExtent(extent)
+		.extent(extent)
+		.on('zoom', zoomed);
+
+	onMount(() => {
+		select(canvasEl.parentElement)
+			.call(zoomHandler as any)
+			.call(zoomHandler.transform as any, zoomIdentity);
+		canvasCtx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
+		canvasCtx.fillStyle = 'red';
+		canvasCtx.rect(100, 100, 500, 500);
+		canvasCtx.fill();
 	});
 
-	// Update cursor presence to current pointer location
-	function handlePointerMove(event: PointerEvent) {
-		event.preventDefault();
-		room.updatePresence({
-			cursor: {
-				x: Math.round(event.clientX),
-				y: Math.round(event.clientY)
-			}
+	function zoomed(e: Event) {
+		const transform = e.transform;
+		console.log(canvasEl.style.transform, transform);
+		tick().then(() => {
+			canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
 		});
 	}
-
-	// When the pointer leaves the page, set cursor presence to null
-	function handlePointerLeave() {
-		room.updatePresence({
-			cursor: null
-		});
-	}
-
-	const COLORS = [
-		'#E57373',
-		'#9575CD',
-		'#4FC3F7',
-		'#81C784',
-		'#FFF176',
-		'#FF8A65',
-		'#F06292',
-		'#7986CB'
-	];
 </script>
 
-<main on:pointerleave={handlePointerLeave} on:pointermove={handlePointerMove}>
-	<!-- Show the current user's cursor location -->
-	<div class="text">
-		{myPresence?.cursor
-			? `${myPresence.cursor.x} × ${myPresence.cursor.y}`
-			: 'Move your cursor to broadcast its position to other people in the room.'}
-	</div>
-
-	<!-- When others connected, iterate through others and show their cursors -->
-	{#if others}
-		{#each [...others] as { connectionId, presence } (connectionId)}
-			{#if presence?.cursor}
-				<Cursor
-					color={COLORS[connectionId % COLORS.length]}
-					x={presence.cursor.x}
-					y={presence.cursor.y}
-				/>
-			{/if}
-		{/each}
-	{/if}
-</main>
+<div class="fixed w-screen h-screen top-0 left-0 overflow-hidden border-4 border-black">
+	<canvas bind:this={canvasEl} {width} {height} />
+</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;
+	canvas {
+		transform-origin: 0 0;
 	}
 </style>

frontend/src/lib/store.ts

@@ -5,7 +5,14 @@ import { browser } from '$app/environment';
 export const loadingState = writable<string>('');
 export const isLoading = writable<boolean>(false);
 
-const initialUser: User = crypto.randomUUID();
+let initialUser: User;
+if (typeof crypto['randomUUID'] === 'undefined') {
+	initialUser = (1e7 + '').replace(/\d/g, (c) =>
+		(c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+	);
+} else {
+	initialUser = crypto.randomUUID();
+}
 
 export const currentUser = writable<User>(
 	browser ? JSON.parse(localStorage['user'] || JSON.stringify(initialUser)) : initialUser

frontend/src/routes/+page.svelte

@@ -6,14 +6,14 @@
 	import { createClient } from '@liveblocks/client';
 	import { currentUser } from '$lib/store';
 
-	import Canvas from '$lib/Canvas.svelte';
+	import App from '$lib/App.svelte';
 	import type { Presence, Storage } from '$lib/types';
-
+	console.log('PUBLIC_DEV_MODE', PUBLIC_DEV_MODE);
 	const apiUrl =
 		PUBLIC_DEV_MODE === 'DEV'
 			? 'http://localhost:7860'
 			: '/embed/huggingface-projects/color-palette-generator-sd';
-
+	console.log(apiUrl);
 	let client: Client;
 	let room: Room;
 	let roomId = 'sveltekit-live-cursors';
@@ -42,27 +42,29 @@
 	});
 </script>
 
-<div class="max-w-screen-md mx-auto px-3 py-8 relative z-0">
-	<h1 class="text-3xl font-bold leading-normal">Stable Diffussion Outpainting Multiplayer</h1>
-	<p class="text-sm" />
-	<div class="relative top-0 z-50 bg-white dark:bg-black py-3">
-		<form class="grid grid-cols-6">
-			<input
-				class="input"
-				placeholder="A photo of a beautiful sunset in San Francisco"
-				title="Input prompt to generate image and obtain palette"
-				type="text"
-				name="prompt"
-				disabled={$isLoading}
-			/>
-			<button class="button" disabled={$isLoading} title="Generate Palette">
-				Create Palette
-			</button>
-		</form>
+<div class="max-w-screen-md mx-auto px-3 py-8 relative">
+	<div class="relative z-10">
+		<h1 class="text-3xl font-bold leading-normal">Stable Diffussion Outpainting Multiplayer</h1>
+		<p class="text-sm" />
+		<div class="relative bg-white dark:bg-black py-3">
+			<form class="grid grid-cols-6">
+				<input
+					class="input"
+					placeholder="A photo of a beautiful sunset in San Francisco"
+					title="Input prompt to generate image and obtain palette"
+					type="text"
+					name="prompt"
+					disabled={$isLoading}
+				/>
+				<button class="button" disabled={$isLoading} title="Generate Palette">
+					Create Palette
+				</button>
+			</form>
+		</div>
 	</div>
-	<div class="relative">
+	<div class="relative z-0">
 		{#if room}
-			<Canvas {room} />
+			<App {room} />
 		{/if}
 	</div>
 </div>

frontend/vite.config.dev.ts

@@ -4,6 +4,7 @@ import type { UserConfig } from 'vite';
 const config: UserConfig = {
 	plugins: [sveltekit()],
 	server: {
+		host: "0.0.0.0",
 		proxy: {
 			'/moon': {
 				target: 'https://huggingface.co',