fix(ui): fix canvas space hotkey

Need to do some checks to ensure we aren't taking over input elements, and are focused on the canvas.

Closes #5478

invokeai/frontend/web/src/common/util/isInputElement.ts

@@ -0,0 +1,7 @@
+export const isInputElement = (el: HTMLElement) => {
+  return (
+    el.tagName.toLowerCase() === 'input' ||
+    el.tagName.toLowerCase() === 'textarea' ||
+    el.tagName.toLowerCase() === 'select'
+  );
+};

invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts

@@ -1,4 +1,5 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { isInputElement } from 'common/util/isInputElement';
 import {
   $canvasStage,
   $tool,
@@ -13,6 +14,7 @@ import {
   setShouldShowBoundingBox,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
+import { isElChildOfCanvasTab } from 'features/canvas/util/isElChildOfCanvasTab';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -93,16 +95,13 @@ const useInpaintingCanvasHotkeys = () => {
     [activeTabName, shouldShowBoundingBox]
   );
 
-  useEffect(() => {
-    window.addEventListener('keydown', (e) => {
-      if (e.key === ' ' && !e.repeat) {
-        console.log('spaceeee');
-      }
-    });
-  }, []);
-
   const onKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.repeat || e.key !== ' ') {
+    if (
+      e.repeat ||
+      e.key !== ' ' ||
+      isInputElement(e.target as HTMLElement) ||
+      !isElChildOfCanvasTab(e.target as HTMLElement)
+    ) {
       return;
     }
     if ($toolStash.get() || $tool.get() === 'move') {
@@ -114,7 +113,12 @@ const useInpaintingCanvasHotkeys = () => {
     resetToolInteractionState();
   }, []);
   const onKeyUp = useCallback((e: KeyboardEvent) => {
-    if (e.repeat || e.key !== ' ') {
+    if (
+      e.repeat ||
+      e.key !== ' ' ||
+      isInputElement(e.target as HTMLElement) ||
+      !isElChildOfCanvasTab(e.target as HTMLElement)
+    ) {
       return;
     }
     if (!$toolStash.get() || $tool.get() !== 'move') {

invokeai/frontend/web/src/features/canvas/store/constants.ts

@@ -1,2 +1,3 @@
 export const CANVAS_GRID_SIZE_COARSE = 64;
 export const CANVAS_GRID_SIZE_FINE = 8;
+export const CANVAS_TAB_TESTID = 'unified-canvas-tab';

invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx

@@ -0,0 +1,14 @@
+import { CANVAS_TAB_TESTID } from 'features/canvas/store/constants';
+
+/**
+ * Determines if an element is a child of the canvas tab. Uses the canvas data-testid,
+ * actually checking against the *parent* of that element, which is the canvas's
+ * panel from `react-resizable-panels`. This panel element has dynamic children, so
+ * it's safer to check the canvas tab and grab its parent.
+ */
+export const isElChildOfCanvasTab = (el: HTMLElement) => {
+  const canvasContainerEl = document.querySelector(
+    `[data-testid="${CANVAS_TAB_TESTID}"]`
+  );
+  return Boolean(canvasContainerEl?.parentElement?.contains(el));
+};

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx

@@ -2,6 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import IAIDropOverlay from 'common/components/IAIDropOverlay';
 import IAICanvas from 'features/canvas/components/IAICanvas';
 import IAICanvasToolbar from 'features/canvas/components/IAICanvasToolbar/IAICanvasToolbar';
+import { CANVAS_TAB_TESTID } from 'features/canvas/store/constants';
 import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
 import type { CanvasInitialImageDropData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
@@ -28,7 +29,6 @@ const UnifiedCanvasTab = () => {
     <Flex
       layerStyle="first"
       ref={setDroppableRef}
-      tabIndex={-1}
       flexDirection="column"
       alignItems="center"
       gap={4}
@@ -36,6 +36,7 @@ const UnifiedCanvasTab = () => {
       borderRadius="base"
       w="full"
       h="full"
+      data-testid={CANVAS_TAB_TESTID}
     >
       <IAICanvasToolbar />
       <IAICanvas />