From dec261cb30bf0e35447438f1f7d22a526d5c5bd5 Mon Sep 17 00:00:00 2001
From: llama <gh@siid.sh>
Date: Mon, 2 Jun 2025 19:32:23 +0800
Subject: [PATCH] add fill tool

---
 ftl/core/editing.ftl                            |  1 +
 ts/lib/components/icons.ts                      |  3 +++
 ts/routes/image-occlusion/tools/shortcuts.ts    |  1 +
 ts/routes/image-occlusion/tools/tool-buttons.ts | 13 ++++++++++++-
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/ftl/core/editing.ftl b/ftl/core/editing.ftl
index 64c0db0c1..3aacb9746 100644
--- a/ftl/core/editing.ftl
+++ b/ftl/core/editing.ftl
@@ -96,6 +96,7 @@ editing-image-occlusion-rectangle-tool = Rectangle
 editing-image-occlusion-ellipse-tool = Ellipse
 editing-image-occlusion-polygon-tool = Polygon
 editing-image-occlusion-text-tool = Text
+editing-image-occlusion-fill-tool = Fill with colour
 editing-image-occlusion-toggle-mask-editor = Toggle Mask Editor
 editing-image-occlusion-reset = Reset Image Occlusion
 editing-image-occlusion-confirm-reset = Are you sure you want to reset this image occlusion?
diff --git a/ts/lib/components/icons.ts b/ts/lib/components/icons.ts
index 33c6e04cb..ab07cbf17 100644
--- a/ts/lib/components/icons.ts
+++ b/ts/lib/components/icons.ts
@@ -59,6 +59,8 @@ import FormatAlignCenter_ from "@mdi/svg/svg/format-align-center.svg?component";
 import formatAlignCenter_ from "@mdi/svg/svg/format-align-center.svg?url";
 import FormatBold_ from "@mdi/svg/svg/format-bold.svg?component";
 import formatBold_ from "@mdi/svg/svg/format-bold.svg?url";
+import FormatColorFill_ from "@mdi/svg/svg/format-color-fill.svg?component";
+import formatColorFill_ from "@mdi/svg/svg/format-color-fill.svg?url";
 import HighlightColor_ from "@mdi/svg/svg/format-color-highlight.svg?component";
 import highlightColor_ from "@mdi/svg/svg/format-color-highlight.svg?url";
 import TextColor_ from "@mdi/svg/svg/format-color-text.svg?component";
@@ -264,6 +266,7 @@ export const mdiEllipseOutline = { url: ellipseOutline_, component: EllipseOutli
 export const mdiEye = { url: eye_, component: Eye_ };
 export const mdiFormatAlignCenter = { url: formatAlignCenter_, component: FormatAlignCenter_ };
 export const mdiFormatBold = { url: formatBold_, component: FormatBold_ };
+export const mdiFormatColorFill = { url: formatColorFill_, component: FormatColorFill_ };
 export const mdiFormatItalic = { url: formatItalic_, component: FormatItalic_ };
 export const mdiFormatUnderline = { url: formatUnderline_, component: FormatUnderline_ };
 export const mdiGroup = { url: group_, component: Group_ };
diff --git a/ts/routes/image-occlusion/tools/shortcuts.ts b/ts/routes/image-occlusion/tools/shortcuts.ts
index afa156a85..f233e3222 100644
--- a/ts/routes/image-occlusion/tools/shortcuts.ts
+++ b/ts/routes/image-occlusion/tools/shortcuts.ts
@@ -6,6 +6,7 @@ export const rectangleKeyCombination = "R";
 export const ellipseKeyCombination = "E";
 export const polygonKeyCombination = "P";
 export const textKeyCombination = "T";
+export const fillKeyCombination = "C";
 export const magnifyKeyCombination = "M";
 export const undoKeyCombination = "Control+Z";
 export const redoKeyCombination = "Control+Y";
diff --git a/ts/routes/image-occlusion/tools/tool-buttons.ts b/ts/routes/image-occlusion/tools/tool-buttons.ts
index 8aa6b033b..266c1a5d8 100644
--- a/ts/routes/image-occlusion/tools/tool-buttons.ts
+++ b/ts/routes/image-occlusion/tools/tool-buttons.ts
@@ -6,6 +6,7 @@ import * as tr from "@generated/ftl";
 import {
     mdiCursorDefaultOutline,
     mdiEllipseOutline,
+    mdiFormatColorFill,
     mdiRectangleOutline,
     mdiTextBox,
     mdiVectorPolygonVariant,
@@ -14,6 +15,7 @@ import {
 import {
     cursorKeyCombination,
     ellipseKeyCombination,
+    fillKeyCombination,
     polygonKeyCombination,
     rectangleKeyCombination,
     textKeyCombination,
@@ -50,4 +52,13 @@ export const tools = [
         tooltip: tr.editingImageOcclusionTextTool,
         shortcut: textKeyCombination,
     },
-];
+    {
+        id: "fill-mask",
+        icon: mdiFormatColorFill,
+        iconSizeMult: 1.4,
+        tooltip: tr.editingImageOcclusionFillTool,
+        shortcut: fillKeyCombination,
+    },
+] as const;
+
+export type ActiveTool = typeof tools[number]["id"];