close on click

.github/workflows/sync.yml

@@ -17,4 +17,4 @@ jobs:
       - name: Push to hub
         env:
           HF_TOKEN: ${{ secrets.HF_TOKEN }}
-        run: git push https://radames:$HF_TOKEN@huggingface.co/spaces/huggingface-projects/stable-diffusion-multiplayer main --force
+        run: git push https://radames:$HF_TOKEN@huggingface.co/spaces/huggingface-projects/stable-diffusion-multiplayer origin main --force

frontend/src/lib/PaintCanvas.svelte

@@ -39,7 +39,11 @@
 
 	onMount(() => {
 		const padding = 200;
-		const scale = (width + padding * 2) / containerEl.clientWidth;
+		const scale =
+			(width + padding * 2) /
+			(containerEl.clientHeight > containerEl.clientWidth
+				? containerEl.clientWidth
+				: containerEl.clientHeight);
 		const zoomHandler = zoom()
 			.scaleExtent([1 / scale / 2, 3])
 			.translateExtent([
@@ -58,7 +62,11 @@
 
 		canvasCtx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
 		function zoomReset() {
-			const scale = (width + padding * 2) / containerEl.clientWidth;
+			const scale =
+				(width + padding * 2) /
+				(containerEl.clientHeight > containerEl.clientWidth
+					? containerEl.clientWidth
+					: containerEl.clientHeight);
 			selection.call(zoomHandler.transform as any, zoomIdentity);
 			selection.call(zoomHandler.scaleTo as any, 1 / scale);
 		}

frontend/src/lib/PaintFrame.svelte

@@ -57,7 +57,6 @@
 				}
 			});
 		}
-		// Update cursor presence to current pointer location
 		function handlePointerMove(event: PointerEvent) {
 			event.preventDefault();
 			const x = round(transform.invertX(event.clientX));
@@ -70,15 +69,16 @@
 				}
 			});
 		}
-
-		// When the pointer leaves the page, set cursor presence to null
 		function handlePointerLeave() {
 			myPresence.update({
 				cursor: null
 			});
 		}
 		const dragHandler = drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
-		select(frameElement).call(dragHandler as any);
+		select(frameElement)
+			.call(dragHandler as any)
+			.on('pointermove', handlePointerMove)
+			.on('pointerleave', handlePointerLeave);
 	});
 </script>
 

frontend/src/lib/PromptModal.svelte

@@ -9,11 +9,7 @@
 
 	const onKeyup = (e: KeyboardEvent) => {
 		if (e.key === 'Escape') {
-			myPresence.update({
-				currentPrompt: '',
-				isPrompting: false
-			});
-			dispatch('close');
+			cancel();
 		}
 	};
 	onMount(() => {
@@ -46,12 +42,19 @@
 		const target = event.target as HTMLInputElement;
 		debouce(target.value);
 	}
+	function cancel() {
+		myPresence.update({
+			currentPrompt: '',
+			isPrompting: false
+		});
+		dispatch('close');
+	}
 </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={onPrompt}
-	on:click={() => dispatch('close')}
+	on:click={cancel}
 >
 	<input
 		bind:this={inputEl}