diff --git a/frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.scss b/frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.scss index 3233c4a591..5eef7cc47d 100644 --- a/frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.scss +++ b/frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.scss @@ -12,6 +12,16 @@ justify-content: space-between; padding: 0.5rem 1rem; border-radius: 0.4rem 0.4rem 0 0; + align-items: center; + + button { + width: 0.5rem !important; + height: 1.2rem !important; + background: none !important; + &:hover { + background: none !important; + } + } p { font-weight: bold; diff --git a/frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.tsx b/frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.tsx index 5ab30ba6ca..a76ddb988a 100644 --- a/frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.tsx +++ b/frontend/src/features/options/AdvancedOptions/Inpainting/BoundingBoxSettings.tsx @@ -1,7 +1,8 @@ import { Flex } from '@chakra-ui/react'; import { createSelector } from '@reduxjs/toolkit'; import _ from 'lodash'; -import { BiReset } from 'react-icons/bi'; + +import { BiHide, BiReset, BiShow } from 'react-icons/bi'; import { RootState, @@ -18,6 +19,7 @@ import { InpaintingState, setBoundingBoxDimensions, setShouldLockBoundingBox, + setShouldShowBoundingBox, setShouldShowBoundingBoxFill, } from '../../../tabs/Inpainting/inpaintingSlice'; @@ -27,6 +29,7 @@ const boundingBoxDimensionsSelector = createSelector( const { canvasDimensions, boundingBoxDimensions, + shouldShowBoundingBox, shouldShowBoundingBoxFill, pastLines, futureLines, @@ -35,6 +38,7 @@ const boundingBoxDimensionsSelector = createSelector( return { canvasDimensions, boundingBoxDimensions, + shouldShowBoundingBox, shouldShowBoundingBoxFill, pastLines, futureLines, @@ -53,6 +57,7 @@ const BoundingBoxSettings = () => { const { canvasDimensions, boundingBoxDimensions, + shouldShowBoundingBox, shouldShowBoundingBoxFill, shouldLockBoundingBox, } = useAppSelector(boundingBoxDimensionsSelector); @@ -101,10 +106,22 @@ const BoundingBoxSettings = () => { ); }; + const handleShowBoundingBox = () => + dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox)); + return (

Inpaint Box

+ : + } + onClick={handleShowBoundingBox} + background={'none'} + padding={0} + />
diff --git a/frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx b/frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx index 58420c6bba..11de6e4d7a 100644 --- a/frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx +++ b/frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx @@ -53,6 +53,7 @@ const InpaintingCanvas = () => { maskColor, imageToInpaint, stageScale, + shouldShowBoundingBox, shouldShowBoundingBoxFill, isDrawing, shouldLockBoundingBox, @@ -300,10 +301,10 @@ const InpaintingCanvas = () => { )} - {shouldShowBoundingBoxFill && ( + {shouldShowBoundingBoxFill && shouldShowBoundingBox && ( )} - + {shouldShowBoundingBox && } {shouldLockBoundingBox && ( )} diff --git a/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts b/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts index aedd0440a7..8e7af93fe2 100644 --- a/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts +++ b/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts @@ -37,6 +37,7 @@ export interface InpaintingState { boundingBoxDimensions: Dimensions; boundingBoxCoordinate: Vector2d; boundingBoxPreviewFill: RgbaColor; + shouldShowBoundingBox: boolean; shouldShowBoundingBoxFill: boolean; lines: MaskLine[]; pastLines: MaskLine[][]; @@ -63,6 +64,7 @@ const initialInpaintingState: InpaintingState = { boundingBoxDimensions: { width: 512, height: 512 }, boundingBoxCoordinate: { x: 0, y: 0 }, boundingBoxPreviewFill: { r: 0, g: 0, b: 0, a: 0.7 }, + shouldShowBoundingBox: false, shouldShowBoundingBoxFill: false, cursorPosition: null, lines: [], @@ -314,6 +316,9 @@ export const inpaintingSlice = createSlice({ toggleShouldLockBoundingBox: (state) => { state.shouldLockBoundingBox = !state.shouldLockBoundingBox; }, + setShouldShowBoundingBox: (state, action: PayloadAction) => { + state.shouldShowBoundingBox = action.payload; + }, }, }); @@ -340,6 +345,7 @@ export const { setNeedsCache, setStageScale, toggleTool, + setShouldShowBoundingBox, setShouldShowBoundingBoxFill, setIsDrawing, setShouldShowBrush, diff --git a/frontend/src/features/tabs/Inpainting/inpaintingSliceSelectors.ts b/frontend/src/features/tabs/Inpainting/inpaintingSliceSelectors.ts index 55e593ce0b..610812d1f9 100644 --- a/frontend/src/features/tabs/Inpainting/inpaintingSliceSelectors.ts +++ b/frontend/src/features/tabs/Inpainting/inpaintingSliceSelectors.ts @@ -73,6 +73,7 @@ export const inpaintingCanvasSelector = createSelector( shouldShowCheckboardTransparency, imageToInpaint, stageScale, + shouldShowBoundingBox, shouldShowBoundingBoxFill, isDrawing, shouldLockBoundingBox, @@ -87,6 +88,7 @@ export const inpaintingCanvasSelector = createSelector( maskColor, imageToInpaint, stageScale, + shouldShowBoundingBox, shouldShowBoundingBoxFill, isDrawing, shouldLockBoundingBox,