Improves bounding box interaction

Added spacebar-hold-to-transform back.

frontend/dist/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>InvokeAI - A Stable Diffusion Toolkit</title>
   <link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
-  <script type="module" crossorigin src="./assets/index.def1e5a0.js"></script>
+  <script type="module" crossorigin src="./assets/index.784f40b4.js"></script>
   <link rel="stylesheet" href="./assets/index.e29f3ddc.css">
 </head>
 

frontend/src/features/tabs/Inpainting/components/InpaintingBoundingBoxPreview.tsx

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import Konva from 'konva';
+import { Context } from 'konva/lib/Context';
 import { KonvaEventObject } from 'konva/lib/Node';
 import { Box } from 'konva/lib/shapes/Transformer';
 import { Vector2d } from 'konva/lib/types';
@@ -42,6 +43,7 @@ const boundingBoxPreviewSelector = createSelector(
       isTransformingBoundingBox,
       isMovingBoundingBox,
       isMouseOverBoundingBox,
+      isSpacebarHeld,
     } = inpainting;
     return {
       boundingBoxCoordinate,
@@ -57,6 +59,7 @@ const boundingBoxPreviewSelector = createSelector(
       isTransformingBoundingBox,
       isMouseOverBoundingBox,
       isMovingBoundingBox,
+      isSpacebarHeld,
     };
   },
   {
@@ -111,6 +114,7 @@ const InpaintingBoundingBoxPreview = () => {
     isTransformingBoundingBox,
     isMovingBoundingBox,
     isMouseOverBoundingBox,
+    isSpacebarHeld,
   } = useAppSelector(boundingBoxPreviewSelector);
 
   const transformerRef = useRef<Konva.Transformer>(null);
@@ -297,6 +301,11 @@ const InpaintingBoundingBoxPreview = () => {
     dispatch(setIsMouseOverBoundingBox(false));
   };
 
+  const spacebarHeldHitFunc = (context: Context, shape: Konva.Shape) => {
+    context.rect(0, 0, imageToInpaint?.width, imageToInpaint?.height);
+    context.fillShape(shape);
+  };
+
   return (
     <>
       <Rect
@@ -307,7 +316,8 @@ const InpaintingBoundingBoxPreview = () => {
         ref={shapeRef}
         stroke={isMouseOverBoundingBox ? 'rgba(255,255,255,0.3)' : 'white'}
         strokeWidth={Math.floor((isMouseOverBoundingBox ? 8 : 1) / stageScale)}
-        fillEnabled={false}
+        fillEnabled={isSpacebarHeld}
+        hitFunc={isSpacebarHeld ? spacebarHeldHitFunc : undefined}
         hitStrokeWidth={Math.floor(13 / stageScale)}
         listening={!isDrawing && !shouldLockBoundingBox}
         onMouseOver={() => {

frontend/src/features/tabs/Inpainting/components/KeyboardEventManager.tsx

@@ -11,6 +11,8 @@ import { OptionsState } from '../../../options/optionsSlice';
 import {
   InpaintingState,
   setIsDrawing,
+  setIsSpacebarHeld,
+  setNeedsCache,
   setShouldLockBoundingBox,
   toggleTool,
 } from '../inpaintingSlice';
@@ -93,11 +95,8 @@ const KeyboardEventManager = () => {
         }
         case ' ': {
           if (!shouldShowMask) break;
-
-          if (e.type === 'keydown') {
-            dispatch(setIsDrawing(false));
-          }
-          dispatch(setShouldLockBoundingBox(!shouldLockBoundingBox));
+          dispatch(setIsSpacebarHeld(e.type === 'keydown'));
+          dispatch(setShouldLockBoundingBox(e.type !== 'keydown'));
           break;
         }
       }

frontend/src/features/tabs/Inpainting/inpaintingSlice.ts

@@ -57,6 +57,7 @@ export interface InpaintingState {
   shouldUseInpaintReplace: boolean;
   inpaintReplace: number;
   shouldLockBoundingBox: boolean;
+  isSpacebarHeld: boolean;
 }
 
 const initialInpaintingState: InpaintingState = {
@@ -87,6 +88,7 @@ const initialInpaintingState: InpaintingState = {
   shouldUseInpaintReplace: false,
   inpaintReplace: 1,
   shouldLockBoundingBox: true,
+  isSpacebarHeld: false,
 };
 
 const initialState: InpaintingState = initialInpaintingState;
@@ -334,6 +336,9 @@ export const inpaintingSlice = createSlice({
     setIsMouseOverBoundingBox: (state, action: PayloadAction<boolean>) => {
       state.isMouseOverBoundingBox = action.payload;
     },
+    setIsSpacebarHeld: (state, action: PayloadAction<boolean>) => {
+      state.isSpacebarHeld = action.payload;
+    },
   },
 });
 
@@ -372,6 +377,7 @@ export const {
   setIsMovingBoundingBox,
   setIsTransformingBoundingBox,
   setIsMouseOverBoundingBox,
+  setIsSpacebarHeld,
 } = inpaintingSlice.actions;
 
 export default inpaintingSlice.reducer;