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): activate move tool on pressing space

Browse Source 
canvas element is not guaranteed to be in focus (e.g. after accepting new staging image) so we check for the active tab name instead
This commit is contained in:
Thomas Mello 2024-01-29 01:01:44 +03:00 committed by psychedelicious
parent 5ae80fab87
commit b01311813b
2 changed files with 29 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,6 @@ 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';
@ -92,39 +91,35 @@ const useInpaintingCanvasHotkeys = () => {
[activeTabName, shouldShowBoundingBox]
);
const onKeyDown = useCallback((e: KeyboardEvent) => {
if (
e.repeat ||
e.key !== ' ' ||
isInputElement(e.target as HTMLElement) ||
!isElChildOfCanvasTab(e.target as HTMLElement)
) {
return;
}
if ($toolStash.get() || $tool.get() === 'move') {
return;
}
$canvasStage.get()?.container().focus();
$toolStash.set($tool.get());
$tool.set('move');
resetToolInteractionState();
}, []);
const onKeyUp = useCallback((e: KeyboardEvent) => {
if (
e.repeat ||
e.key !== ' ' ||
isInputElement(e.target as HTMLElement) ||
!isElChildOfCanvasTab(e.target as HTMLElement)
) {
return;
}
if (!$toolStash.get() || $tool.get() !== 'move') {
return;
}
$canvasStage.get()?.container().focus();
$tool.set($toolStash.get() ?? 'move');
$toolStash.set(null);
}, []);
const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
return;
}
if ($toolStash.get() || $tool.get() === 'move') {
return;
}
$canvasStage.get()?.container().focus();
$toolStash.set($tool.get());
$tool.set('move');
resetToolInteractionState();
},
[activeTabName]
);
const onKeyUp = useCallback(
(e: KeyboardEvent) => {
if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
return;
}
if (!$toolStash.get() || $tool.get() !== 'move') {
return;
}
$canvasStage.get()?.container().focus();
$tool.set($toolStash.get() ?? 'move');
$toolStash.set(null);
},
[activeTabName]
);
useEffect(() => {
window.addEventListener('keydown', onKeyDown);

12
invokeai/frontend/web/src/features/canvas/util/isElChildOfCanvasTab.tsx
View File

@ -1,12 +0,0 @@
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));
};