add fill tool logic

ts/routes/image-occlusion/tools/lib.ts

@@ -105,6 +105,21 @@ export const unGroupShapes = (canvas: fabric.Canvas): void => {
     redraw(canvas);
 };
 
+/** Check for the target within a (potentially nested) group
+ * NOTE: assumes that masks do not overlap */
+export const findTargetInGroup = (group: fabric.Group, p: fabric.Point): fabric.Object | undefined => {
+    if (!group) { return; }
+    const point = fabric.util.transformPoint(p, fabric.util.invertTransform(group.calcOwnMatrix()));
+    for (const shape of group.getObjects()) {
+        if (shape instanceof fabric.Group) {
+            const ret = findTargetInGroup(shape, point);
+            if (ret) { return ret; }
+        } else if (shape.containsPoint(point)) {
+            return shape;
+        }
+    }
+};
+
 const copyItem = (canvas: fabric.Canvas): void => {
     const activeObject = canvas.getActiveObject();
     if (!activeObject) {

ts/routes/image-occlusion/tools/tool-fill.ts

@@ -0,0 +1,28 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+
+import { fabric } from "fabric";
+
+import { get, type Readable } from "svelte/store";
+import { findTargetInGroup, stopDraw } from "./lib";
+import { undoStack } from "./tool-undo-redo";
+
+export const fillMask = (canvas: fabric.Canvas, colourStore: Readable<string>): void => {
+    // remove selectable for shapes
+    canvas.discardActiveObject();
+    canvas.forEachObject(function(o) {
+        o.selectable = false;
+    });
+    canvas.selectionColor = "rgba(0, 0, 0, 0)";
+    stopDraw(canvas);
+
+    canvas.on("mouse:down", function(o) {
+        const target = o.target instanceof fabric.Group
+            ? findTargetInGroup(o.target, canvas.getPointer(o.e) as fabric.Point)
+            : o.target;
+        const colour = get(colourStore);
+        if (!target || target.fill === colour) { return; }
+        target.fill = colour;
+        undoStack.onObjectModified();
+    });
+};