diff --git a/frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx b/frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx index 5d55fb341b..ad34bbaf2b 100644 --- a/frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx +++ b/frontend/src/features/tabs/Inpainting/InpaintingCanvas.tsx @@ -118,32 +118,29 @@ const InpaintingCanvas = () => { * Canvas onMouseMove * */ - const handleMouseMove = useCallback( - () => { - if (!stageRef.current) return; + const handleMouseMove = useCallback(() => { + if (!stageRef.current) return; - const scaledCursorPosition = getScaledCursorPosition(stageRef.current); + const scaledCursorPosition = getScaledCursorPosition(stageRef.current); - if (!scaledCursorPosition) return; + if (!scaledCursorPosition) return; - dispatch(setCursorPosition(scaledCursorPosition)); + dispatch(setCursorPosition(scaledCursorPosition)); - if (!maskLayerRef.current || !shouldLockBoundingBox) { - return; - } + if (!maskLayerRef.current || !shouldLockBoundingBox) { + return; + } - lastCursorPosition.current = scaledCursorPosition; + lastCursorPosition.current = scaledCursorPosition; - if (!isDrawing) return; + if (!isDrawing) return; - didMouseMoveRef.current = true; - // Extend the current line - dispatch( - addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y]) - ); - }, - [dispatch, isDrawing, shouldLockBoundingBox] - ); + didMouseMoveRef.current = true; + // Extend the current line + dispatch( + addPointToCurrentLine([scaledCursorPosition.x, scaledCursorPosition.y]) + ); + }, [dispatch, isDrawing, shouldLockBoundingBox]); /** * @@ -260,7 +257,8 @@ const InpaintingCanvas = () => { ref={maskLayerRef} > <InpaintingCanvasLines /> - <InpaintingCanvasBrushPreview /> + + {shouldLockBoundingBox && <InpaintingCanvasBrushPreview />} {shouldInvertMask && ( <KonvaImage @@ -282,7 +280,9 @@ const InpaintingCanvas = () => { <InpaintingBoundingBoxPreviewOverlay /> )} {shouldShowBoundingBox && <InpaintingBoundingBoxPreview />} - <InpaintingCanvasBrushPreviewOutline /> + {shouldLockBoundingBox && ( + <InpaintingCanvasBrushPreviewOutline /> + )} </Layer> </> )} diff --git a/frontend/src/features/tabs/Inpainting/components/KeyboardEventManager.tsx b/frontend/src/features/tabs/Inpainting/components/KeyboardEventManager.tsx index 8f1d84631b..3c5b421c6a 100644 --- a/frontend/src/features/tabs/Inpainting/components/KeyboardEventManager.tsx +++ b/frontend/src/features/tabs/Inpainting/components/KeyboardEventManager.tsx @@ -19,11 +19,8 @@ import { const keyboardEventManagerSelector = createSelector( [(state: RootState) => state.options, (state: RootState) => state.inpainting], (options: OptionsState, inpainting: InpaintingState) => { - const { - shouldShowMask, - cursorPosition, - shouldLockBoundingBox, - } = inpainting; + const { shouldShowMask, cursorPosition, shouldLockBoundingBox } = + inpainting; return { activeTabName: tabMap[options.activeTab], shouldShowMask, @@ -95,10 +92,8 @@ const KeyboardEventManager = () => { if (e.type === 'keydown') { dispatch(setIsDrawing(false)); dispatch(setShouldLockBoundingBox(false)); - dispatch(setShouldShowBrush(false)); } else { dispatch(setShouldLockBoundingBox(true)); - dispatch(setShouldShowBrush(true)); } break; } diff --git a/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts b/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts index 8a24e068f4..dd8cfe1b15 100644 --- a/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts +++ b/frontend/src/features/tabs/Inpainting/inpaintingSlice.ts @@ -237,6 +237,7 @@ export const inpaintingSlice = createSlice({ const roundedCanvasWidth = roundDownToMultiple(canvasWidth, 64); const roundedCanvasHeight = roundDownToMultiple(canvasHeight, 64); + const roundedBoundingBoxWidth = roundDownToMultiple(boundingBoxWidth, 64); const roundedBoundingBoxHeight = roundDownToMultiple( boundingBoxHeight, @@ -276,22 +277,18 @@ export const inpaintingSlice = createSlice({ roundedCanvasHeight - newBoundingBoxHeight ); - const newBoundingBoxX = roundDownToMultiple(clampedX, 64); - - const newBoundingBoxY = roundDownToMultiple(clampedY, 64); - state.boundingBoxDimensions = { width: newBoundingBoxWidth, height: newBoundingBoxHeight, }; state.boundingBoxCoordinate = { - x: newBoundingBoxX, - y: newBoundingBoxY, + x: clampedX, + y: clampedY, }; }, setBoundingBoxCoordinate: (state, action: PayloadAction<Vector2d>) => { - state.boundingBoxCoordinate = action.payload + state.boundingBoxCoordinate = action.payload; // const { x, y } = action.payload; // const maxX =