fix constrains

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-lg 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-80  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/Icons/Mask.svelte

@@ -4,8 +4,8 @@
 
 <svg
 	class={classList}
-	width="50"
-	height="50"
+	width="40"
+	height="40"
 	viewBox="0 0 11 11"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"

frontend/src/lib/Icons/Move.svelte

@@ -4,8 +4,8 @@
 
 <svg
 	class={classList}
-	width="50"
-	height="50"
+	width="40"
+	height="40"
 	viewBox="0 0 11 11"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"

frontend/src/lib/Icons/Undo.svelte

@@ -4,8 +4,8 @@
 
 <svg
 	class={classList}
-	width="20"
-	height="19"
+	width="40"
+	height="29"
 	viewBox="0 0 10 9"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"

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, cursor.x > 0 ? 0 : -cursor.x, cursor.y > 0 ? 0 : -cursor.y, 512, 512);
+		maskCtx.drawImage($canvasEl, cursor.x, cursor.y, 512, 512, 0, 0, 512, 512);
 		maskCtx.restore();
 	}
 	function drawLine(points: { x: number; y: number; lastx: number; lasty: number }) {
@@ -211,12 +211,18 @@
 				</div>
 			{/if}
 			{#if !isDragging}
-				<div class="absolute top-full ">
+				<div
+					class="absolute top-full"
+					style={`transform: scale(${Math.max(2 - transform.k, 1)}); transform-origin: 0 0;`}
+				>
 					<div class="py-3">
 						<PPButton {isLoading} on:click={() => dispatch('prompt')} />
 					</div>
 				</div>
-				<div class="absolute left-full bottom-0">
+				<div
+					class="absolute left-full"
+					style={`transform: scale(${Math.max(2 - transform.k, 1)}); transform-origin: 0 0;`}
+				>
 					<div class="mx-4">
 						<DragButton
 							className={'p-1'}
@@ -225,10 +231,15 @@
 							on:click={toggleDrag}
 						/>
 						<div class="flex bg-white rounded-full mt-3 shadow-lg">
-							<MaskButton className={'p-1'} isActive={!dragEnabled} on:click={toggleDrawMask} />
+							<MaskButton
+								{isLoading}
+								className={'p-1'}
+								isActive={!dragEnabled}
+								on:click={toggleDrawMask}
+							/>
 							{#if !dragEnabled}
 								<span class="border-gray-800 border-opacity-50 border-r-2 my-2" />
-								<UndoButton className={'p-1 px-4'} {isLoading} on:click={cleanMask} />
+								<UndoButton className={'p-1'} {isLoading} on:click={cleanMask} />
 							{/if}
 						</div>
 					</div>

frontend/src/lib/utils.ts

@@ -45,12 +45,14 @@ export async function uploadImage(imagBlob: Blob, prompt: string): Promise<strin
 	console.log('uploaded images', url);
 	return url;
 }
+const MAX = 512 * 5 - 512
 
 export function round(pos: number, size = 32) {
-	const value =  pos % size < size / 2 ? pos - (pos % size) : pos + size - (pos % size);
-	return Math.round(value);
+	const value = pos % size < size / 2 ? pos - (pos % size) : pos + size - (pos % size);
+	return Math.max(0, Math.min(Math.round(value), MAX))
 }
 
+
 function slugify(text: string) {
 	if (!text) return '';
 	return text