show frames from others

frontend/src/lib/App.svelte

@@ -58,8 +58,11 @@
 
 	function onPaintMode(e: CustomEvent) {
 		const mode = e.detail.mode;
-		if (mode == 'paint') {
+		if (mode == 'paint' && !isPrompting) {
 			showModal = true;
+			myPresence.update({
+				isPrompting: true
+			});
 		}
 	}
 	function onClose() {
@@ -91,7 +94,7 @@
 		return base64Crop;
 	}
 	async function generateImage() {
-		// if (isPrompting) return;
+		if (isPrompting) return;
 		$loadingState = 'Pending';
 		const prompt = $myPresence.currentPrompt;
 		const position = $myPresence.frame;
@@ -196,25 +199,15 @@
 	<Canvas bind:value={canvasEl} />
 
 	<main class="z-10 relative">
-		<PaintFrame transform={$currZoomTransform} />
-
-		{#if promptImgList && $showFrames}
-			{#each promptImgList as promptImg}
-				<Frame
-					color={COLORS[0]}
-					transform={$currZoomTransform}
-					position={promptImg?.position}
-					prompt={promptImg?.prompt}
-				/>
-			{/each}
-		{/if}
+		<PaintFrame transform={$currZoomTransform} interactive={!isPrompting} />
+
 		<!-- When others connected, iterate through others and show their cursors -->
 		{#if $others}
 			{#each [...$others] as { connectionId, presence } (connectionId)}
-				{#if presence?.isPrompting && presence?.cursor}
+				{#if presence?.isPrompting && presence?.frame}
 					<Frame
 						color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
-						position={presence?.cursor}
+						position={presence?.frame}
 						prompt={presence?.currentPrompt}
 						transform={$currZoomTransform}
 					/>

frontend/src/lib/Canvas.svelte

@@ -41,7 +41,7 @@
 	onMount(() => {
 		const scale = width / containerEl.clientWidth;
 		const translatePadding = 0.1;
-		const scalePadding = 1.2;
+		const scalePadding = 3;
 		const zoomHandler = zoom()
 			.scaleExtent([1 / scale / scalePadding, 1])
 			// .extent([
@@ -57,7 +57,7 @@
 
 		const selection = select(canvasEl.parentElement)
 			.call(zoomHandler as any)
-			.call(zoomHandler.scaleTo as any, 1 / scale / scalePadding)
+			.call(zoomHandler.scaleTo as any, 1 / scale / 2)
 			.on('pointermove', handlePointerMove)
 			.on('pointerleave', handlePointerLeave);
 
@@ -65,8 +65,8 @@
 		function zoomReset() {
 			console.log('zoom reset');
 			const scale = width / containerEl.clientWidth;
-			zoomHandler.scaleExtent([1 / scale / scalePadding, 1])
-			selection.call(zoomHandler.scaleTo as any, 1 / scale / scalePadding);
+			zoomHandler.scaleExtent([1 / scale / scalePadding, 1]);
+			selection.call(zoomHandler.scaleTo as any, 1 / scale / 2);
 		}
 		window.addEventListener('resize', zoomReset);
 		return () => {
@@ -125,9 +125,9 @@
 
 	// When the pointer leaves the page, set cursor presence to null
 	function handlePointerLeave() {
-		// myPresence.update({
-		// 	cursor: null
-		// });
+		myPresence.update({
+			cursor: null
+		});
 	}
 </script>
 

frontend/src/lib/Frame.svelte

@@ -7,6 +7,7 @@
 	export let color = '';
 	export let position = { x: 0, y: 0 };
 	export let prompt = '';
+	export let interactive = false;
 
 	$: coord = {
 		x: transform.applyX(position.x),
@@ -15,7 +16,7 @@
 </script>
 
 <div
-	class="frame z-0 flex relative"
+	class="frame z-0 flex relative {!interactive ? 'pointer-events-none touch-none' : ''}"
 	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});
 			background-image: linear-gradient(${color}, rgba(255,255,255,0));
 			color: ${color};
@@ -30,7 +31,7 @@
 
 <style lang="postcss" scoped>
 	.frame {
-		@apply pointer-events-none touch-none absolute top-0 left-0 border-2 border-spacing-3 border-sky-500 w-[512px] h-[512px];
+		@apply absolute top-0 left-0 border-2 border-spacing-3 border-sky-500 w-[512px] h-[512px];
 		transform-origin: 0 0;
 	}
 	.small-frame {

frontend/src/lib/Menu.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
-	import { showFrames } from '$lib/store';
-	import { createEventDispatcher } from 'svelte';
+	import { onMount, createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher();
+
+	const onKeyup = (e: KeyboardEvent) => {
+		e.preventDefault();
+		if (e.key === 'Enter') {
+			dispatch('paintMode', { mode: 'paint' });
+		}
+	};
+	onMount(() => {
+		window.addEventListener('keyup', onKeyup);
+		return () => {
+			window.removeEventListener('keyup', onKeyup);
+		};
+	});
 </script>
 
 <div class="grid grid-cols-1 gap-3 w-max mx-auto">

frontend/src/lib/PaintFrame.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import LoadingIcon from '$lib/LoadingIcon.svelte';
+	import Frame from '$lib/Frame.svelte';
 	import { drag } from 'd3-drag';
 	import { select } from 'd3-selection';
 	import { round } from '$lib/utils';
@@ -14,20 +15,16 @@
 
 	export let transform: ZoomTransform;
 	export let color = 'black';
-	
+	export let interactive = false;
 
 	let position = {
-		x: transform.invertX(768),
-		y: transform.invertX(768)
+		x: 768,
+		y: 768
 	};
 
 	let frameElement: HTMLDivElement;
-	$: coord = {
-		x: transform.applyX(position.x),
-		y: transform.applyY(position.y)
-	};
 
-	$: prompt = $myPresence?.currentPrompt
+	$: prompt = $myPresence?.currentPrompt;
 
 	onMount(() => {
 		function dragstarted(event: Event) {
@@ -54,35 +51,11 @@
 				}
 			});
 		}
-
 		const dragHandler = drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
 		select(frameElement).call(dragHandler as any);
 	});
 </script>
 
-<div
-	bind:this={frameElement}
-	class="frame z-0 flex relative"
-	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});
-			background-image: linear-gradient(${color}, rgba(255,255,255,0));
-			color: ${color};
-	`}
->
-	<div class="small-frame z-0 flex relative" />
-	{$loadingState}
-	<LoadingIcon />
-	<h2 class="text-lg">Click to paint</h2>
-
-	<div class="absolute bottom-0 font-bold">{prompt}</div>
+<div bind:this={frameElement}>
+	<Frame {color} {position} {prompt} {transform} {interactive} />
 </div>
-
-<style lang="postcss" scoped>
-	.frame {
-		@apply absolute top-0 left-0 border-2 border-spacing-3 border-sky-500 w-[512px] h-[512px];
-		transform-origin: 0 0;
-	}
-	.small-frame {
-		@apply pointer-events-none touch-none absolute top-1/2  left-1/2 border-2 border-spacing-3 border-sky-500 w-[256px] h-[256px];
-		transform: translateX(-50%) translateY(-50%);
-	}
-</style>

frontend/src/lib/PromptModal.svelte

@@ -4,7 +4,7 @@
 
 	const dispatch = createEventDispatcher();
 	let prompt: string;
-
+	let inputEl: HTMLInputElement;
 	const myPresence = useMyPresence();
 
 	$: {
@@ -24,26 +24,34 @@
 		}
 	};
 	onMount(() => {
+		inputEl.focus();
 		window.addEventListener('keyup', onKeyup);
 		return () => {
 			window.removeEventListener('keyup', onKeyup);
 		};
 	});
+
+	function onPrompt() {
+		if (prompt.trim() !== '') {
+			dispatch('prompt', prompt);
+		}
+	}
 </script>
 
 <form
 	class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80 px-3"
-	on:submit|preventDefault={() => dispatch('prompt')}
+	on:submit|preventDefault={onPrompt}
 	on:click={() => dispatch('close')}
 >
 	<input
+		bind:this={inputEl}
+		bind:value={prompt}
 		on:click|stopPropagation
 		class="input"
 		placeholder="Type a prompt..."
 		title="Input prompt to generate image and obtain palette"
 		type="text"
 		name="prompt"
-		bind:value={prompt}
 	/>
 </form>