Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix canvas space hotkey

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

Closes #5478
This commit is contained in:
psychedelicious
2024-01-12 08:48:16 +11:00
parent a24e63d440
commit ad7139829c
5 changed files with 38 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
View File

@ -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') {

1
invokeai/frontend/web/src/features/canvas/store/constants.ts
View File

@ -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';

14
invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx Normal file
View File

@ -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));
};