Changes "Invert Mask" to "Preserve Masked Areas"

frontend/src/common/util/parameterTranslation.ts

@@ -118,7 +118,7 @@ export const frontendToBackendParameters = (
       shouldUseInpaintReplace,
       stageScale,
       isMaskEnabled,
-      shouldInvertMask,
+      shouldPreserveMaskedArea,
     } = canvasState[canvasState.currentCanvas];
 
     const boundingBox = {
@@ -138,7 +138,7 @@ export const frontendToBackendParameters = (
     generationParameters.init_img = imageToProcessUrl;
     generationParameters.strength = img2imgStrength;
 
-    if (shouldInvertMask) {
+    if (shouldPreserveMaskedArea) {
       generationParameters.invert_mask = true;
     }
 

frontend/src/features/canvas/IAICanvas.tsx

@@ -187,7 +187,7 @@ const IAICanvas = () => {
                   image={canvasBgImage}
                   listening={false}
                   globalCompositeOperation="source-in"
-                  visible={shouldInvertMask}
+                  visible={shouldPreserveMaskedArea}
                 />
 
                 <KonvaImage
@@ -195,7 +195,7 @@ const IAICanvas = () => {
                   listening={false}
                   globalCompositeOperation="source-out"
                   visible={
-                    !shouldInvertMask && shouldShowCheckboardTransparency
+                    !shouldPreserveMaskedArea && shouldShowCheckboardTransparency
                   }
                 />
               </>

frontend/src/features/canvas/IAICanvasControls/IAICanvasMaskControls/IAICanvasMaskInvertControl.tsx

@@ -5,7 +5,7 @@ import IAIIconButton from 'common/components/IAIIconButton';
 import {
   currentCanvasSelector,
   GenericCanvasState,
-  setShouldInvertMask,
+  setShouldPreserveMaskedArea,
 } from 'features/canvas/canvasSlice';
 
 import _ from 'lodash';
@@ -15,10 +15,10 @@ import { useHotkeys } from 'react-hotkeys-hook';
 const canvasMaskInvertSelector = createSelector(
   [currentCanvasSelector, activeTabNameSelector],
   (currentCanvas: GenericCanvasState, activeTabName) => {
-    const { isMaskEnabled, shouldInvertMask } = currentCanvas;
+    const { isMaskEnabled, shouldPreserveMaskedArea } = currentCanvas;
 
     return {
-      shouldInvertMask,
+      shouldPreserveMaskedArea,
       isMaskEnabled,
       activeTabName,
     };
@@ -31,13 +31,13 @@ const canvasMaskInvertSelector = createSelector(
 );
 
 export default function IAICanvasMaskInvertControl() {
-  const { shouldInvertMask, isMaskEnabled, activeTabName } = useAppSelector(
+  const { shouldPreserveMaskedArea, isMaskEnabled, activeTabName } = useAppSelector(
     canvasMaskInvertSelector
   );
   const dispatch = useAppDispatch();
 
   const handleToggleShouldInvertMask = () =>
-    dispatch(setShouldInvertMask(!shouldInvertMask));
+    dispatch(setShouldPreserveMaskedArea(!shouldPreserveMaskedArea));
 
   // Invert mask
   useHotkeys(
@@ -49,16 +49,16 @@ export default function IAICanvasMaskInvertControl() {
     {
       enabled: true,
     },
-    [activeTabName, shouldInvertMask, isMaskEnabled]
+    [activeTabName, shouldPreserveMaskedArea, isMaskEnabled]
   );
 
   return (
     <IAIIconButton
       tooltip="Invert Mask Display (Shift+M)"
       aria-label="Invert Mask Display (Shift+M)"
-      data-selected={shouldInvertMask}
+      data-selected={shouldPreserveMaskedArea}
       icon={
-        shouldInvertMask ? (
+        shouldPreserveMaskedArea ? (
           <MdInvertColors size={22} />
         ) : (
           <MdInvertColorsOff size={22} />

frontend/src/features/canvas/IAICanvasMaskButtonPopover.tsx

@@ -6,7 +6,7 @@ import {
   setIsMaskEnabled,
   setLayer,
   setMaskColor,
-  setShouldInvertMask,
+  setShouldPreserveMaskedArea,
 } from './canvasSlice';
 import { useAppDispatch, useAppSelector } from 'app/store';
 import _ from 'lodash';
@@ -20,13 +20,13 @@ import IAIButton from 'common/components/IAIButton';
 export const selector = createSelector(
   [currentCanvasSelector],
   (currentCanvas) => {
-    const { maskColor, layer, isMaskEnabled, shouldInvertMask } = currentCanvas;
+    const { maskColor, layer, isMaskEnabled, shouldPreserveMaskedArea } = currentCanvas;
 
     return {
       layer,
       maskColor,
       isMaskEnabled,
-      shouldInvertMask,
+      shouldPreserveMaskedArea,
     };
   },
   {
@@ -37,7 +37,7 @@ export const selector = createSelector(
 );
 const IAICanvasMaskButtonPopover = () => {
   const dispatch = useAppDispatch();
-  const { layer, maskColor, isMaskEnabled, shouldInvertMask } =
+  const { layer, maskColor, isMaskEnabled, shouldPreserveMaskedArea } =
     useAppSelector(selector);
 
   return (
@@ -61,9 +61,9 @@ const IAICanvasMaskButtonPopover = () => {
           onChange={(e) => dispatch(setIsMaskEnabled(e.target.checked))}
         />
         <IAICheckbox
-          label="Invert Mask"
-          isChecked={shouldInvertMask}
-          onChange={(e) => dispatch(setShouldInvertMask(e.target.checked))}
+          label="Preserve Masked Area"
+          isChecked={shouldPreserveMaskedArea}
+          onChange={(e) => dispatch(setShouldPreserveMaskedArea(e.target.checked))}
         />
         <IAIColorPicker
           color={maskColor}

frontend/src/features/canvas/IAICanvasMaskCompositer.tsx

@@ -15,20 +15,14 @@ import Konva from 'konva';
 export const canvasMaskCompositerSelector = createSelector(
   currentCanvasSelector,
   (currentCanvas) => {
-    const {
-      maskColor,
-      stageCoordinates,
-      stageDimensions,
-      stageScale,
-      shouldInvertMask,
-    } = currentCanvas as InpaintingCanvasState | OutpaintingCanvasState;
+    const { maskColor, stageCoordinates, stageDimensions, stageScale } =
+      currentCanvas as InpaintingCanvasState | OutpaintingCanvasState;
 
     return {
       stageCoordinates,
       stageDimensions,
       stageScale,
       maskColorString: rgbaColorToString(maskColor),
-      shouldInvertMask,
     };
   }
 );
@@ -120,13 +114,8 @@ const getColoredSVG = (color: string) => {
 const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
   const { ...rest } = props;
 
-  const {
-    maskColorString,
-    stageCoordinates,
-    stageDimensions,
-    stageScale,
-    shouldInvertMask,
-  } = useAppSelector(canvasMaskCompositerSelector);
+  const { maskColorString, stageCoordinates, stageDimensions, stageScale } =
+    useAppSelector(canvasMaskCompositerSelector);
 
   const [fillPatternImage, setFillPatternImage] =
     useState<HTMLImageElement | null>(null);
@@ -173,7 +162,7 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
       fillPatternRepeat={'repeat'}
       fillPatternScale={{ x: 1 / stageScale, y: 1 / stageScale }}
       listening={true}
-      globalCompositeOperation={shouldInvertMask ? 'source-out' : 'source-in'}
+      globalCompositeOperation={'source-in'}
       {...rest}
     />
   );

frontend/src/features/canvas/canvasSlice.ts

@@ -29,7 +29,7 @@ export interface GenericCanvasState {
   shouldShowBoundingBox: boolean;
   shouldDarkenOutsideBoundingBox: boolean;
   isMaskEnabled: boolean;
-  shouldInvertMask: boolean;
+  shouldPreserveMaskedArea: boolean;
   shouldShowCheckboardTransparency: boolean;
   shouldShowBrush: boolean;
   shouldShowBrushPreview: boolean;
@@ -147,7 +147,7 @@ const initialGenericCanvasState: GenericCanvasState = {
   shouldDarkenOutsideBoundingBox: false,
   cursorPosition: null,
   isMaskEnabled: true,
-  shouldInvertMask: false,
+  shouldPreserveMaskedArea: false,
   shouldShowCheckboardTransparency: false,
   shouldShowBrush: true,
   shouldShowBrushPreview: false,
@@ -235,18 +235,18 @@ export const canvasSlice = createSlice({
         state.currentCanvas
       ].objects.filter((obj) => !isCanvasMaskLine(obj));
       state[state.currentCanvas].futureObjects = [];
-      state[state.currentCanvas].shouldInvertMask = false;
+      state[state.currentCanvas].shouldPreserveMaskedArea = false;
     },
     toggleShouldInvertMask: (state) => {
-      state[state.currentCanvas].shouldInvertMask =
-        !state[state.currentCanvas].shouldInvertMask;
+      state[state.currentCanvas].shouldPreserveMaskedArea =
+        !state[state.currentCanvas].shouldPreserveMaskedArea;
     },
     toggleShouldShowMask: (state) => {
       state[state.currentCanvas].isMaskEnabled =
         !state[state.currentCanvas].isMaskEnabled;
     },
-    setShouldInvertMask: (state, action: PayloadAction<boolean>) => {
-      state[state.currentCanvas].shouldInvertMask = action.payload;
+    setShouldPreserveMaskedArea: (state, action: PayloadAction<boolean>) => {
+      state[state.currentCanvas].shouldPreserveMaskedArea = action.payload;
     },
     setIsMaskEnabled: (state, action: PayloadAction<boolean>) => {
       state[state.currentCanvas].isMaskEnabled = action.payload;
@@ -552,14 +552,6 @@ export const canvasSlice = createSlice({
 
       if (tool === 'move') return;
 
-      let newTool: CanvasDrawingTool;
-
-      if (layer === 'mask' && currentCanvas.shouldInvertMask) {
-        newTool = tool === 'eraser' ? 'brush' : 'eraser';
-      } else {
-        newTool = tool;
-      }
-
       const newStrokeWidth = tool === 'brush' ? brushSize / 2 : eraserSize / 2;
 
       // set & then spread this to only conditionally add the "color" key
@@ -571,7 +563,7 @@ export const canvasSlice = createSlice({
       currentCanvas.objects.push({
         kind: 'line',
         layer,
-        tool: newTool,
+        tool,
         strokeWidth: newStrokeWidth,
         points: action.payload,
         ...newColor,
@@ -655,7 +647,7 @@ export const {
   setEraserSize,
   addLine,
   addPointToCurrentLine,
-  setShouldInvertMask,
+  setShouldPreserveMaskedArea,
   setIsMaskEnabled,
   setShouldShowCheckboardTransparency,
   setShouldShowBrushPreview,