block painting on ongoing frames

frontend/src/lib/App.svelte

@@ -5,7 +5,7 @@
 	import PaintCanvas from '$lib/PaintCanvas.svelte';
 	import Menu from '$lib/Menu.svelte';
 	import PromptModal from '$lib/PromptModal.svelte';
-	import { COLORS } from '$lib/constants';
+	import { COLORS, FRAME_SIZE } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
 	import type { PromptImgKey } from '$lib/types';
 	import { Status } from '$lib/types';
@@ -21,39 +21,72 @@
 
 	const myPresence = useMyPresence({ addToHistory: true });
 	const others = useOthers();
-
+	let showModal = false;
 	function getKey(position: { x: number; y: number }): PromptImgKey {
 		return `${position.x}_${position.y}`;
 	}
 
 	const promptImgStorage = useObject('promptImgStorage');
 
-	let showModal = false;
-
 	$: isLoading = $myPresence?.status === Status.loading || $isRenderingCanvas || false;
-
-	function onPrompt() {
-		if (!isLoading && !showModal) {
-			showModal = true;
+	function onShowModal(e: CustomEvent) {
+		if (isLoading) return;
+		showModal = e.detail.showModal;
+		if (showModal) {
 			myPresence.update({
 				status: Status.prompting
 			});
+		} else {
+			myPresence.update({
+				status: Status.ready
+			});
 		}
 	}
-	function onClose() {
-		showModal = false;
-	}
 
 	function onPaint() {
-		generateImage();
 		showModal = false;
+		generateImage();
+	}
+	function canPaint(position: { x: number; y: number }): boolean {
+		if (!$others) return true;
+		console.log('P', position);
+		let canPaint = true;
+		for (const { presence } of $others) {
+			if (
+				position.x < presence.frame.x + FRAME_SIZE &&
+				position.x + FRAME_SIZE > presence.frame.x &&
+				position.y < presence.frame.y + FRAME_SIZE &&
+				position.y + FRAME_SIZE > presence.frame.y
+			) {
+				// can paint if presence is only  dragging
+				if (presence.status === Status.ready || presence.status === Status.dragging) {
+					canPaint = true;
+				}
+				canPaint = false;
+				break;
+			}
+		}
+		return canPaint;
 	}
 
+	function clearStateMsg(t = 5000) {
+		setTimeout(() => {
+			$loadingState = '';
+		}, t);
+	}
 	async function generateImage() {
 		if (isLoading) return;
-		$loadingState = 'Pending';
 		const prompt = $myPresence.currentPrompt;
 		const position = $myPresence.frame;
+		$loadingState = 'Pending';
+		if (!canPaint(position)) {
+			$loadingState = 'Someone is already painting here';
+			myPresence.update({
+				status: Status.ready
+			});
+			clearStateMsg();
+			return;
+		}
 		const imageKey = getKey(position);
 		const room = $selectedRoomID || 'default';
 		console.log('Generating...', prompt, position);
@@ -137,9 +170,7 @@
 							$promptImgStorage.set(imageKey, promptImgParams);
 							console.log(params.image.url);
 							$loadingState = data.success ? 'Complete' : 'Error';
-							setTimeout(() => {
-								$loadingState = '';
-							}, 2000);
+							clearStateMsg();
 							myPresence.update({
 								status: Status.ready,
 								currentPrompt: ''
@@ -150,9 +181,7 @@
 							myPresence.update({
 								status: Status.ready
 							});
-							setTimeout(() => {
-								$loadingState = '';
-							}, 10000);
+							clearStateMsg(10000);
 						}
 						websocket.close();
 						return;
@@ -173,14 +202,16 @@
 	{$loadingState}
 </div>
 {#if showModal}
-	<PromptModal on:paint={onPaint} on:close={onClose} initPrompt={$myPresence?.currentPrompt} />
+	<PromptModal
+		on:paint={onPaint}
+		initPrompt={$myPresence?.currentPrompt}
+		on:showModal={onShowModal}
+	/>
 {/if}
 <div class="fixed top-0 left-0 z-0 w-screen h-screen min-h-[600px]">
 	<PaintCanvas />
 
 	<main class="z-10 relative">
-		<PaintFrame on:prompt={onPrompt} transform={$currZoomTransform} />
-
 		<!-- When others connected, iterate through others and show their cursors -->
 		{#if $others}
 			{#each [...$others] as { connectionId, presence } (connectionId)}
@@ -201,10 +232,11 @@
 				{/if}
 			{/each}
 		{/if}
+		<PaintFrame transform={$currZoomTransform} on:showModal={onShowModal} />
 	</main>
 </div>
 <div class="fixed bottom-0 md:bottom-16 left-0 right-0 z-10 my-2">
-	<Menu on:prompt={onPrompt} {isLoading} />
+	<Menu {isLoading} on:showModal={onShowModal} />
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/Menu.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
 	import AboutButton from '$lib/Buttons/AboutButton.svelte';
 	import { toggleAbout } from '$lib/store';
-	// const broadcast = useBroadcastEvent();
+	import { createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher();
+	// const broadcast = useBroadcastEvent();
 
 	export let isLoading = false;
 </script>
 
 <svelte:window
-	on:keyup|preventDefault|stopPropagation={(e) => e.key === 'Enter' && dispatch('prompt')}
+	on:keypress={(e) => {
+		if (e.key === 'Enter') {
+			dispatch('showModal', { showModal: true });
+		}
+	}}
 />
 <div class="flex flex-col md:flex-row items-center justify-between px-4 md:px-12 gap-3 md:gap-0">
 	<AboutButton
@@ -21,7 +25,7 @@
 	/>
 
 	<button
-		on:click={() => dispatch('prompt')}
+		on:click={() => dispatch('showModal', { showModal: true })}
 		title="Click to prompt, and paint. The generated image will show up in the frame."
 		disabled={isLoading}
 		class="{isLoading
@@ -48,7 +52,5 @@
 			Enter</span
 		></button
 	>
-
 	<RoomsSelector {isLoading} />
-	<!-- <PPButton {isLoading} on:click={() => dispatch('prompt')} /> -->
 </div>

frontend/src/lib/PaintFrame.svelte

@@ -7,10 +7,11 @@
 	import { round } from '$lib/utils';
 
 	import type { ZoomTransform } from 'd3-zoom';
-	import { onMount , createEventDispatcher} from 'svelte';
+	import { onMount } from 'svelte';
 
 	import { useMyPresence } from '$lib/liveblocks';
 	import { canvasEl, maskEl, loadingState, isRenderingCanvas } from '$lib/store';
+	import { createEventDispatcher } from 'svelte';
 
 	import { Status } from './types';
 	const myPresence = useMyPresence({ addToHistory: true });
@@ -274,7 +275,7 @@
 					<div class="mx-4 flex flex-col gap-2">
 						<button
 							title="Click to prompt and paint"
-							on:click={() => dispatch('prompt')}
+							on:click={() => dispatch('showModal', { showModal: true })}
 							class="w-10 h-10 bg-blue-600 hover:saturate-150 shadow-2xl shadow-blue-500 rounded-lg flex items-center justify-center text-3xl"
 						>
 							🖍

frontend/src/lib/PromptModal.svelte

@@ -4,18 +4,18 @@
 	import { Status } from '$lib/types';
 
 	const dispatch = createEventDispatcher();
+
 	export let initPrompt = '';
+
 	let prompt: string;
 	let inputEl: HTMLInputElement;
 	let boxEl: HTMLDivElement;
-	const myPresence =  useMyPresence({ addToHistory: true });
+	const myPresence = useMyPresence({ addToHistory: true });
 
 	const onKeyup = (e: KeyboardEvent) => {
 		if (e.key === 'Escape') {
-			myPresence.update({
-				status: Status.ready
-			});
-			dispatch('close');
+			dispatch('showModal', { showModal: false });
+			console.log('Escape');
 		}
 	};
 
@@ -41,10 +41,13 @@
 			});
 		}, 100);
 	}
-	function onPrompt() {
+	function onPrompt(event: Event) {
+		event.stopPropagation();
+		event.preventDefault();
+		event.stopImmediatePropagation();
+
 		if (prompt.trim() !== '') {
 			dispatch('paint');
-			dispatch('close');
 		}
 	}
 	function onInput(event: Event) {
@@ -58,13 +61,13 @@
 		myPresence.update({
 			status: Status.ready
 		});
-		dispatch('close');
+		dispatch('showModal', { showModal: false });
 	}
 </script>
 
 <form
 	class="fixed w-screen top-0 left-0 bottom-0 right-0 h-screen z-50 flex items-center justify-center bg-black bg-opacity-80"
-	on:submit|preventDefault|stopPropagation={onPrompt}
+	on:submit={onPrompt}
 >
 	<div
 		class="flex bg-white overflow-hidden rounded-2xl w-full max-w-lg 2xl:max-w-xl"

frontend/src/lib/liveblocks/useRooms.ts

@@ -3,7 +3,7 @@ import { writable, type Writable } from "svelte/store";
 import type { RoomResponse } from '$lib/types';
 import { PUBLIC_API_BASE } from '$env/static/public';
 
-const INTERVAL = 3000
+const INTERVAL = 10000
 
 export function useRooms(): Writable<RoomResponse[]> {
   const roomsStorage = writable<RoomResponse[]>([]);

frontend/src/lib/store.ts

@@ -7,4 +7,5 @@ export const canvasEl = writable<HTMLCanvasElement>();
 export const maskEl = writable<HTMLCanvasElement>();
 export const selectedRoomID = writable<string | null>();
 export const toggleAbout = writable<boolean>(false);
-export const isRenderingCanvas = writable<boolean>(true);
+export const isRenderingCanvas = writable<boolean>(true);
+export const showModal = writable<boolean>(false);

frontend/src/lib/types.ts

@@ -15,7 +15,7 @@ export type Presence = {
 	frame: {
 		x: number;
 		y: number;
-	} | null;
+	};
 	status: Status;
 	currentPrompt: string
 }