cleaning

frontend/src/app.d.ts

@@ -14,6 +14,7 @@ declare global {
 		}
 	}
 	interface Event {
+		relatedTarget: EventTarget | null;
 		transform: ZoomTransform;
 		x: number;
 		y: number;

frontend/src/lib/Buttons/DragButton.svelte

@@ -8,7 +8,9 @@
 <button
 	on:click
 	disabled={isLoading}
-	class="{className} shadow-lg bg-white rounded-full {isActive ? 'text-blue-700' : 'text-gray-800'}"
+	class="{className} shadow-lg bg-white rounded-full disabled:opacity-50 {isActive
+		? 'text-blue-700'
+		: 'text-gray-800'}"
 	title="Enable Dragging"
 >
 	<Move />

frontend/src/lib/Buttons/MaskButton.svelte

@@ -3,13 +3,14 @@
 	export let isActive = false;
 	export let isLoading = false;
 	export let className = '';
-
 </script>
 
 <button
 	on:click
 	disabled={isLoading}
-	class="{className} rounded-full {isActive ? 'text-blue-700' : 'text-gray-800'}"
+	class="{className} rounded-full disabled:opacity-50  {isActive
+		? 'text-blue-700'
+		: 'text-gray-800'}"
 	title="Enable Masking"
 >
 	<Mask />

frontend/src/lib/Buttons/PPButton.svelte

@@ -24,6 +24,6 @@
 		@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
 	} */
 	.button-paint {
-		@apply text-base font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-80  dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
+		@apply text-base font-mono bg-violet-100 text-violet-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
 	}
 </style>

frontend/src/lib/Buttons/UndoButton.svelte

@@ -8,7 +8,7 @@
 <button
 	on:click
 	disabled={isLoading}
-	class="{className} bg-white rounded-full bg-white rounded-full {isActive
+	class="{className} bg-white rounded-full disabled:opacity-50 bg-white rounded-full {isActive
 		? 'text-blue-700'
 		: 'text-gray-800'}"
 	title="Clear Masking"

frontend/src/lib/PaintFrame.svelte

@@ -127,7 +127,7 @@
 			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 {
+			} else if (event.sourceEvent instanceof MouseEvent) {
 				offsetX = event.sourceEvent.pageX - rect.left;
 				offsetY = event.sourceEvent.pageY - rect.top;
 			}

frontend/src/lib/PromptModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount, tick } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
 	import { useMyPresence } from '$lib/liveblocks';
 	import { Status } from '$lib/types';
 
@@ -7,7 +7,6 @@
 	export let initPrompt = '';
 	let prompt: string;
 	let inputEl: HTMLInputElement;
-	let buttonEl: HTMLElement;
 	const myPresence = useMyPresence();
 
 	const onKeyup = (e: KeyboardEvent) => {
@@ -50,7 +49,6 @@
 		debouce(target.value);
 	}
 	function cancel(event?: Event) {
-		console.log(event?.relatedTarget)
 		if (!(event instanceof KeyboardEvent) && event?.relatedTarget !== null) return;
 
 		myPresence.update({
@@ -76,11 +74,8 @@
 			type="text"
 			name="prompt"
 		/>
-		<button
-			bind:this={buttonEl}
-			on:click|preventDefault={onPrompt}
-			class="font-mono border-l-2 pl-2"
-			type="submit">Paint</button
+		<button on:click|preventDefault={onPrompt} class="font-mono border-l-2 pl-2" type="submit"
+			>Paint</button
 		>
 	</div>
 </form>