Add invert mask functionality to inpainting control layer

Co-authored-by: kent <kent@invoke.ai>

Author: cursoragent

invokeai/frontend/web/public/locales/en.json

@@ -2074,6 +2074,7 @@
         "uploadOrDragAnImage": "Drag an image from the gallery or <UploadButton>upload an image</UploadButton>.",
         "imageNoise": "Image Noise",
         "denoiseLimit": "Denoise Limit",
+        "invertMask": "Invert Mask",
         "warnings": {
             "problemsFound": "Problems found",
             "unsupportedModel": "layer not supported for selected base model",

invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItems.tsx

@@ -10,6 +10,7 @@ import { CanvasEntityMenuItemsTransform } from 'features/controlLayers/component
 import { InpaintMaskMenuItemsAddModifiers } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsAddModifiers';
 import { InpaintMaskMenuItemsConvertToSubMenu } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsConvertToSubMenu';
 import { InpaintMaskMenuItemsCopyToSubMenu } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsCopyToSubMenu';
+import { InpaintMaskMenuItemsInvert } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsInvert';
 import { memo } from 'react';
 
 export const InpaintMaskMenuItems = memo(() => {
@@ -21,6 +22,7 @@ export const InpaintMaskMenuItems = memo(() => {
         <CanvasEntityMenuItemsDelete asIcon />
       </IconMenuItemGroup>
       <MenuDivider />
+      <InpaintMaskMenuItemsInvert />
       <InpaintMaskMenuItemsAddModifiers />
       <MenuDivider />
       <CanvasEntityMenuItemsTransform />

invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItemsInvert.tsx

@@ -0,0 +1,36 @@
+import { MenuItem } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
+import { inpaintMaskInverted } from 'features/controlLayers/store/canvasSlice';
+import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiSelectionInverseBold } from 'react-icons/pi';
+
+export const InpaintMaskMenuItemsInvert = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const entityIdentifier = useEntityIdentifierContext('inpaint_mask');
+  const canvasSlice = useAppSelector(selectCanvasSlice);
+
+  const handleInvertMask = useCallback(() => {
+    dispatch(inpaintMaskInverted({ entityIdentifier }));
+  }, [dispatch, entityIdentifier]);
+
+  // Only show if there are objects to invert and we have a valid bounding box
+  const entity = canvasSlice.inpaintMasks.entities.find((entity) => entity.id === entityIdentifier.id);
+  const hasObjects = entity?.objects.length > 0;
+  const hasBbox = canvasSlice.bbox.rect.width > 0 && canvasSlice.bbox.rect.height > 0;
+
+  if (!hasObjects || !hasBbox) {
+    return null;
+  }
+
+  return (
+    <MenuItem onClick={handleInvertMask} icon={<PiSelectionInverseBold />}>
+      {t('controlLayers.invertMask')}
+    </MenuItem>
+  );
+});
+
+InpaintMaskMenuItemsInvert.displayName = 'InpaintMaskMenuItemsInvert';

invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts

@@ -993,6 +993,36 @@ export const canvasSlice = createSlice({
         entity.denoiseLimit = undefined;
       }
     },
+    inpaintMaskInverted: (state, action: PayloadAction<EntityIdentifierPayload<void, 'inpaint_mask'>>) => {
+      const { entityIdentifier } = action.payload;
+      const entity = selectEntity(state, entityIdentifier);
+      if (!entity || entity.type !== 'inpaint_mask') {
+        return;
+      }
+
+      // Create a rectangle covering the current bounding box
+      const bboxRect = state.bbox.rect;
+      const fillRectObject = {
+        id: getPrefixedId('rect'),
+        type: 'rect' as const,
+        rect: {
+          x: bboxRect.x - entity.position.x,
+          y: bboxRect.y - entity.position.y,
+          width: bboxRect.width,
+          height: bboxRect.height,
+        },
+        color: { r: 255, g: 255, b: 255, a: 1 },
+      };
+
+      // Convert existing objects to eraser effect by creating a composite inverted mask
+      // The strategy is to replace all existing objects with:
+      // 1. A full rectangle covering the bbox
+      // 2. The original objects as "erasers" to punch holes through the rectangle
+      const originalObjects = [...entity.objects];
+
+      // Start with the full rectangle, then "erase" the original painted areas
+      entity.objects = [fillRectObject, ...originalObjects];
+    },
     //#region BBox
     bboxScaledWidthChanged: (state, action: PayloadAction<number>) => {
       const gridSize = getGridSize(state.bbox.modelBase);
@@ -1713,6 +1743,7 @@ export const {
   inpaintMaskDenoiseLimitAdded,
   inpaintMaskDenoiseLimitChanged,
   inpaintMaskDenoiseLimitDeleted,
+  inpaintMaskInverted,
   // inpaintMaskRecalled,
 } = canvasSlice.actions;