From c7ef41af54242ae23ed8595ae55fba60ed9315b1 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 12 Nov 2022 08:44:48 +1100 Subject: [PATCH] Changes "Invert Mask" to "Preserve Masked Areas" --- .../src/common/util/parameterTranslation.ts | 4 +-- frontend/src/features/canvas/IAICanvas.tsx | 4 +-- .../IAICanvasMaskInvertControl.tsx | 16 ++++++------ .../canvas/IAICanvasMaskButtonPopover.tsx | 14 +++++----- .../canvas/IAICanvasMaskCompositer.tsx | 21 ++++----------- frontend/src/features/canvas/canvasSlice.ts | 26 +++++++------------ 6 files changed, 33 insertions(+), 52 deletions(-) diff --git a/frontend/src/common/util/parameterTranslation.ts b/frontend/src/common/util/parameterTranslation.ts index 4a816b86db..5f3c9294dd 100644 --- a/frontend/src/common/util/parameterTranslation.ts +++ b/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; } diff --git a/frontend/src/features/canvas/IAICanvas.tsx b/frontend/src/features/canvas/IAICanvas.tsx index 3cf573d94a..954759b236 100644 --- a/frontend/src/features/canvas/IAICanvas.tsx +++ b/frontend/src/features/canvas/IAICanvas.tsx @@ -187,7 +187,7 @@ const IAICanvas = () => { image={canvasBgImage} listening={false} globalCompositeOperation="source-in" - visible={shouldInvertMask} + visible={shouldPreserveMaskedArea} /> { listening={false} globalCompositeOperation="source-out" visible={ - !shouldInvertMask && shouldShowCheckboardTransparency + !shouldPreserveMaskedArea && shouldShowCheckboardTransparency } /> diff --git a/frontend/src/features/canvas/IAICanvasControls/IAICanvasMaskControls/IAICanvasMaskInvertControl.tsx b/frontend/src/features/canvas/IAICanvasControls/IAICanvasMaskControls/IAICanvasMaskInvertControl.tsx index d9e79ef002..bb901bf79c 100644 --- a/frontend/src/features/canvas/IAICanvasControls/IAICanvasMaskControls/IAICanvasMaskInvertControl.tsx +++ b/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 ( ) : ( diff --git a/frontend/src/features/canvas/IAICanvasMaskButtonPopover.tsx b/frontend/src/features/canvas/IAICanvasMaskButtonPopover.tsx index e55127a23e..c20abafce2 100644 --- a/frontend/src/features/canvas/IAICanvasMaskButtonPopover.tsx +++ b/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))} /> dispatch(setShouldInvertMask(e.target.checked))} + label="Preserve Masked Area" + isChecked={shouldPreserveMaskedArea} + onChange={(e) => dispatch(setShouldPreserveMaskedArea(e.target.checked))} /> { - 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(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} /> ); diff --git a/frontend/src/features/canvas/canvasSlice.ts b/frontend/src/features/canvas/canvasSlice.ts index 7ff15ce6e7..3acfdcd126 100644 --- a/frontend/src/features/canvas/canvasSlice.ts +++ b/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) => { - state[state.currentCanvas].shouldInvertMask = action.payload; + setShouldPreserveMaskedArea: (state, action: PayloadAction) => { + state[state.currentCanvas].shouldPreserveMaskedArea = action.payload; }, setIsMaskEnabled: (state, action: PayloadAction) => { 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,