ui improvements

frontend/src/lib/App.svelte

@@ -51,6 +51,7 @@
 	}
 	function onClose() {
 		showModal = false;
+		console.log('close Modal');
 	}
 
 	function onPaint() {
@@ -142,7 +143,8 @@
 						}
 						websocket.close();
 						myPresence.update({
-							status: Status.ready
+							status: Status.ready,
+							currentPrompt: ''
 						});
 						return;
 					case 'process_starts':
@@ -162,7 +164,7 @@
 	{$loadingState}
 </div>
 {#if showModal}
-	<PromptModal on:paint={onPaint} on:close={onClose} />
+	<PromptModal on:paint={onPaint} on:close={onClose} initPrompt={$myPresence?.currentPrompt} />
 {/if}
 <div class="fixed top-0 left-0 z-0 w-screen h-screen">
 	<PaintCanvas />

frontend/src/lib/PaintFrame.svelte

@@ -53,7 +53,7 @@
 		maskCtx.save();
 		maskCtx.clearRect(0, 0, 512, 512);
 		maskCtx.globalCompositeOperation = 'source-over';
-		maskCtx.drawImage($canvasEl, cursor.x, cursor.y, 512, 512, 0, 0, 512, 512);
+		maskCtx.drawImage($canvasEl, cursor.x, cursor.y, 512, 512, cursor.x > 0 ? 0 : -cursor.x, cursor.y > 0 ? 0 : -cursor.y, 512, 512);
 		maskCtx.restore();
 	}
 	function drawLine(points: { x: number; y: number; lastx: number; lasty: number }) {
@@ -122,9 +122,9 @@
 	function dragMoveHandler() {
 		function dragstarted(event: Event) {
 			if (isLoading) return;
-
 			const rect = (event.sourceEvent.target as HTMLElement).getBoundingClientRect();
-			if (event.sourceEvent instanceof TouchEvent) {
+
+			if (typeof TouchEvent !== 'undefined' && event.sourceEvent instanceof TouchEvent) {
 				offsetX = event.sourceEvent.targetTouches[0].pageX - rect.left;
 				offsetY = event.sourceEvent.targetTouches[0].pageY - rect.top;
 			} else {
@@ -238,7 +238,7 @@
 	</div>
 	<div
 		bind:this={frameElement}
-		class="absolute top-0 left-0 w-[512px] h-[512px] hand
+		class="absolute top-0 left-0 w-[512px] h-[512px] ring-8 hand
 		{dragEnabled ? 'block' : 'hidden'}"
 		style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
 	/>

frontend/src/lib/PromptModal.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, tick } from 'svelte';
 	import { useMyPresence } from '$lib/liveblocks';
 	import { Status } from '$lib/types';
 
 	const dispatch = createEventDispatcher();
-	let prompt = '';
+	export let initPrompt = '';
+	let prompt: string;
 	let inputEl: HTMLInputElement;
+	let buttonEl: HTMLElement;
 	const myPresence = useMyPresence();
 
 	const onKeyup = (e: KeyboardEvent) => {
 		if (e.key === 'Escape') {
-			cancel();
+			cancel(e);
 		}
 	};
+
 	onMount(() => {
 		inputEl.focus();
 		inputEl.addEventListener('focusout', cancel);
-		prompt = '';
+		prompt = initPrompt;
 		window.addEventListener('keyup', onKeyup);
 		return () => {
 			window.removeEventListener('keyup', onKeyup);
@@ -39,15 +42,18 @@
 		if (prompt.trim() !== '') {
 			console.log('Prompting with: ', prompt);
 			dispatch('paint');
+			dispatch('close');
 		}
 	}
 	function onInput(event: Event) {
 		const target = event.target as HTMLInputElement;
 		debouce(target.value);
 	}
-	function cancel() {
+	function cancel(event?: Event) {
+		console.log(event?.relatedTarget)
+		if (!(event instanceof KeyboardEvent) && event?.relatedTarget !== null) return;
+
 		myPresence.update({
-			currentPrompt: '',
 			status: Status.ready
 		});
 		dispatch('close');
@@ -60,6 +66,7 @@
 >
 	<div class="flex bg-white rounded-2xl px-2 w-full max-w-md">
 		<input
+			value={prompt}
 			bind:this={inputEl}
 			on:click|stopPropagation
 			on:input={onInput}
@@ -69,8 +76,11 @@
 			type="text"
 			name="prompt"
 		/>
-		<button on:click|preventDefault={onPrompt} class="font-mono border-l-2 pl-2" type="submit"
-			>Paint</button
+		<button
+			bind:this={buttonEl}
+			on:click|preventDefault={onPrompt}
+			class="font-mono border-l-2 pl-2"
+			type="submit">Paint</button
 		>
 	</div>
 </form>

frontend/src/lib/types.ts

@@ -34,4 +34,3 @@ export type PromptImgObject = {
 };
 
 export type PromptImgKey = string;
-

frontend/src/lib/utils.ts

@@ -47,7 +47,8 @@ export async function uploadImage(imagBlob: Blob, prompt: string): Promise<strin
 }
 
 export function round(pos: number, size = 32) {
-	return pos % size < size / 2 ? pos - (pos % size) : pos + size - (pos % size);
+	const value =  pos % size < size / 2 ? pos - (pos % size) : pos + size - (pos % size);
+	return Math.round(value);
 }
 
 function slugify(text: string) {