From 1114ac97e200dd1f7da2c063423cded86bd6c5c4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 12 Nov 2022 12:16:06 +1100
Subject: [PATCH] Fixes (?) spacebar issues

---
 frontend/src/features/canvas/IAICanvas.tsx    | 26 ++++---------------
 .../features/canvas/IAICanvasBoundingBox.tsx  |  5 +++-
 .../features/canvas/hooks/useCanvasHotkeys.ts | 22 +++++++---------
 .../canvas/hooks/useCanvasMouseDown.ts        |  1 +
 4 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/frontend/src/features/canvas/IAICanvas.tsx b/frontend/src/features/canvas/IAICanvas.tsx
index 954759b236..53712b7306 100644
--- a/frontend/src/features/canvas/IAICanvas.tsx
+++ b/frontend/src/features/canvas/IAICanvas.tsx
@@ -141,8 +141,12 @@ const IAICanvas = () => {
     <div className="inpainting-canvas-container">
       <div className="inpainting-canvas-wrapper">
         <Stage
+          tabIndex={-1}
           ref={stageRef}
-          style={{ ...(stageCursor ? { cursor: stageCursor } : {}) }}
+          style={{
+            outline: 'none',
+            ...(stageCursor ? { cursor: stageCursor } : {}),
+          }}
           className="inpainting-canvas-stage checkerboard"
           x={stageCoordinates.x}
           y={stageCoordinates.y}
@@ -180,26 +184,6 @@ const IAICanvas = () => {
           <Layer id={'mask'} visible={isMaskEnabled} listening={false}>
             <IAICanvasMaskLines visible={true} listening={false} />
             <IAICanvasMaskCompositer listening={false} />
-
-            {/* {canvasBgImage && (
-              <>
-                <KonvaImage
-                  image={canvasBgImage}
-                  listening={false}
-                  globalCompositeOperation="source-in"
-                  visible={shouldPreserveMaskedArea}
-                />
-
-                <KonvaImage
-                  image={canvasBgImage}
-                  listening={false}
-                  globalCompositeOperation="source-out"
-                  visible={
-                    !shouldPreserveMaskedArea && shouldShowCheckboardTransparency
-                  }
-                />
-              </>
-            )} */}
           </Layer>
           <Layer id={'tool'}>
             <IAICanvasBoundingBox visible={shouldShowBoundingBox} />
diff --git a/frontend/src/features/canvas/IAICanvasBoundingBox.tsx b/frontend/src/features/canvas/IAICanvasBoundingBox.tsx
index 0c56e4c55f..1f732df36f 100644
--- a/frontend/src/features/canvas/IAICanvasBoundingBox.tsx
+++ b/frontend/src/features/canvas/IAICanvasBoundingBox.tsx
@@ -58,6 +58,7 @@ const boundingBoxPreviewSelector = createSelector(
       tool,
       stageCoordinates,
       boundingBoxStrokeWidth: (isMouseOverBoundingBox ? 8 : 1) / stageScale,
+      hitStrokeWidth: 20 / stageScale,
     };
   },
   {
@@ -89,6 +90,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
     shouldSnapToGrid,
     tool,
     boundingBoxStrokeWidth,
+    hitStrokeWidth,
   } = useAppSelector(boundingBoxPreviewSelector);
 
   const transformerRef = useRef<Konva.Transformer>(null);
@@ -336,7 +338,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
         }
         listening={!isDrawing && tool === 'move'}
         draggable={true}
-        fillEnabled={tool === 'move'}
+        fillEnabled={false}
         height={boundingBoxDimensions.height}
         onDragEnd={handleEndedModifying}
         onDragMove={handleOnDragMove}
@@ -352,6 +354,7 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
         width={boundingBoxDimensions.width}
         x={boundingBoxCoordinates.x}
         y={boundingBoxCoordinates.y}
+        hitStrokeWidth={hitStrokeWidth}
       />
       <Transformer
         anchorCornerRadius={3}
diff --git a/frontend/src/features/canvas/hooks/useCanvasHotkeys.ts b/frontend/src/features/canvas/hooks/useCanvasHotkeys.ts
index 6300a4fa21..e607e34bbd 100644
--- a/frontend/src/features/canvas/hooks/useCanvasHotkeys.ts
+++ b/frontend/src/features/canvas/hooks/useCanvasHotkeys.ts
@@ -11,6 +11,7 @@ import {
 import { useAppDispatch, useAppSelector } from 'app/store';
 import { currentCanvasSelector } from '../canvasSlice';
 import { useRef } from 'react';
+import { stageRef } from '../IAICanvas';
 
 const inpaintingCanvasHotkeysSelector = createSelector(
   [currentCanvasSelector, activeTabNameSelector],
@@ -52,7 +53,7 @@ const useInpaintingCanvasHotkeys = () => {
       dispatch(toggleShouldLockBoundingBox());
     },
     {
-      enabled: true,
+      scopes: ['inpainting', 'outpainting'],
     },
     [activeTabName]
   );
@@ -64,7 +65,7 @@ const useInpaintingCanvasHotkeys = () => {
       dispatch(setShouldShowBoundingBox(!shouldShowBoundingBox));
     },
     {
-      enabled: true,
+      scopes: ['inpainting', 'outpainting'],
     },
     [activeTabName, shouldShowBoundingBox]
   );
@@ -74,19 +75,12 @@ const useInpaintingCanvasHotkeys = () => {
     (e: KeyboardEvent) => {
       if (e.repeat) return;
 
+      stageRef.current?.container().focus();
+
       if (tool !== 'move') {
         previousToolRef.current = tool;
         dispatch(setTool('move'));
       }
-    },
-    { keyup: false, keydown: true },
-    [tool, previousToolRef]
-  );
-
-  useHotkeys(
-    ['space'],
-    (e: KeyboardEvent) => {
-      if (e.repeat) return;
 
       if (
         tool === 'move' &&
@@ -97,7 +91,11 @@ const useInpaintingCanvasHotkeys = () => {
         previousToolRef.current = 'move';
       }
     },
-    { keyup: true, keydown: false },
+    {
+      keyup: true,
+      keydown: true,
+      scopes: ['inpainting', 'outpainting'],
+    },
     [tool, previousToolRef]
   );
 };
diff --git a/frontend/src/features/canvas/hooks/useCanvasMouseDown.ts b/frontend/src/features/canvas/hooks/useCanvasMouseDown.ts
index 8750db005a..503daeaf77 100644
--- a/frontend/src/features/canvas/hooks/useCanvasMouseDown.ts
+++ b/frontend/src/features/canvas/hooks/useCanvasMouseDown.ts
@@ -32,6 +32,7 @@ const useCanvasMouseDown = (stageRef: MutableRefObject<Konva.Stage | null>) => {
   return useCallback(
     (e: KonvaEventObject<MouseEvent>) => {
       if (!stageRef.current) return;
+      stageRef.current.container().focus();
 
       if (tool === 'move') {
         dispatch(setIsMovingStage(true));