Add custom shape mask menu with expansion and feathering

Introduces a CustomShapeMenu UI component for managing custom output area shape masks, including options for auto-applying the mask, expansion/contraction, and feathering. Updates Canvas and MaskTool to support these new mask operations, and ensures the menu is shown or hidden based on shape presence. Adds distance transform-based algorithms for accurate mask expansion and feathering.

src/Canvas.ts

@@ -8,6 +8,7 @@ import {ComfyApp} from "../../scripts/app.js";
 import {removeImage} from "./db.js";
 import {MaskTool} from "./MaskTool.js";
 import {ShapeTool} from "./ShapeTool.js";
+import {CustomShapeMenu} from "./CustomShapeMenu.js";
 import {CanvasState} from "./CanvasState.js";
 import {CanvasInteractions} from "./CanvasInteractions.js";
 import {CanvasLayers} from "./CanvasLayers.js";
@@ -65,7 +66,13 @@ export class Canvas {
     layers: Layer[];
     maskTool: MaskTool;
     shapeTool: ShapeTool;
+    customShapeMenu: CustomShapeMenu;
     outputAreaShape: Shape | null;
+    autoApplyShapeMask: boolean;
+    shapeMaskExpansion: boolean;
+    shapeMaskExpansionValue: number;
+    shapeMaskFeather: boolean;
+    shapeMaskFeatherValue: number;
     node: ComfyNode;
     offscreenCanvas: HTMLCanvasElement;
     offscreenCtx: CanvasRenderingContext2D | null;
@@ -112,7 +119,13 @@ export class Canvas {
         this.requestSaveState = () => {};
         this.maskTool = new MaskTool(this, {onStateChange: this.onStateChange});
         this.shapeTool = new ShapeTool(this);
+        this.customShapeMenu = new CustomShapeMenu(this);
         this.outputAreaShape = null;
+        this.autoApplyShapeMask = false;
+        this.shapeMaskExpansion = false;
+        this.shapeMaskExpansionValue = 0;
+        this.shapeMaskFeather = false;
+        this.shapeMaskFeatherValue = 0;
         this.canvasMask = new CanvasMask(this);
         this.canvasState = new CanvasState(this);
         this.canvasSelection = new CanvasSelection(this);