From cfdc784ffaf2be999efb0417e684b344c0cb56fc Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Wed, 21 May 2025 23:10:52 +0200
Subject: [PATCH] filled

---
 src/lib/schema.ts      |  3 ++-
 src/routes/Draw.svelte | 55 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index de89e28..c0e3d2d 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -14,7 +14,8 @@ export const Path = co.map({
 		})
 	),
 	strokeColor: z.string(),
-	strokeWidth: z.number()
+	strokeWidth: z.number(),
+	filled: z.boolean().optional()
 });
 
 export const PaintingPaths = co.list(Path);
diff --git a/src/routes/Draw.svelte b/src/routes/Draw.svelte
index d00a491..13af708 100644
--- a/src/routes/Draw.svelte
+++ b/src/routes/Draw.svelte
@@ -23,6 +23,8 @@
 	let moveTool: paper.Tool | null = null;
 	let drawTool: paper.Tool | null = null;
 
+	let isFilling = $state(false);
+
 	let path: paper.Path | null = null;
 	let scope: paper.PaperScope | null = null;
 	let currentColor = $state('#ec4899');
@@ -109,6 +111,10 @@
 
 				drawnPaths[path.id].add(segmentPoint);
 			}
+
+			if (path.filled) {
+				drawnPaths[path.id].fillColor = path.strokeColor as unknown as paper.Color;
+			}
 		}
 	}
 
@@ -148,10 +154,10 @@
 		let bounds = scope?.view.bounds;
 		if (!bounds) return;
 
-		let topY = Math.floor(bounds.y / cellSize);
-		let bottomY = Math.floor((bounds.y + bounds.height) / cellSize);
-		let leftX = Math.floor(bounds.x / cellSize);
-		let rightX = Math.floor((bounds.x + bounds.width) / cellSize);
+		let topY = Math.floor(bounds.y / cellSize) - 5;
+		let bottomY = Math.floor((bounds.y + bounds.height) / cellSize) + 5;
+		let leftX = Math.floor(bounds.x / cellSize) - 5;
+		let rightX = Math.floor((bounds.x + bounds.width) / cellSize) + 5;
 
 		return {
 			top: topY,
@@ -280,7 +286,7 @@
 		});
 
 		drawTool.onMouseDown = (event: paper.ToolEvent) => {
-			if(isZooming) return;
+			if (isZooming) return;
 
 			// if (path) {
 			// 	finishPath();
@@ -310,7 +316,7 @@
 
 		drawTool.onMouseUp = (event: paper.ToolEvent) => {
 			if (isZooming) return;
-			
+
 			finishPath();
 		};
 
@@ -354,6 +360,10 @@
 		const group = Group.create();
 		group.addMember('everyone', 'writer');
 
+		if (isFilling) {
+			path.fillColor = currentColor as unknown as paper.Color;
+		}
+
 		let coPath = Path.create(
 			{
 				segments: path.segments.map((segment) => {
@@ -373,7 +383,8 @@
 					};
 				}),
 				strokeColor: currentColor,
-				strokeWidth: strokeWidth
+				strokeWidth: strokeWidth,
+				filled: isFilling
 			},
 			group
 		);
@@ -543,6 +554,12 @@
 					} else {
 						scope.tool = drawTool!;
 					}
+
+					if (selectedTool === 'fill') {
+						isFilling = true;
+					} else {
+						isFilling = false;
+					}
 				}
 			}
 		>
@@ -552,7 +569,7 @@
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
 					viewBox="0 0 24 24"
-					stroke-width="1.5"
+					stroke-width="2"
 					stroke="currentColor"
 					class="size-6"
 				>
@@ -570,7 +587,7 @@
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
 					viewBox="0 0 24 24"
-					stroke-width="1.5"
+					stroke-width="2"
 					stroke="currentColor"
 					class="size-6"
 				>
@@ -581,6 +598,26 @@
 					/>
 				</svg>
 			</ToggleGroupItem>
+
+			<ToggleGroupItem value="fill">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="lucide lucide-paint-bucket-icon lucide-paint-bucket"
+					><path d="m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z" /><path
+						d="m5 2 5 5"
+					/><path d="M2 13h15" /><path
+						d="M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z"
+					/></svg
+				>
+			</ToggleGroupItem>
 		</ToggleGroup>
 
 		<Popover side="bottom" bind:open={isOpen}>
-- 
2.51.2