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

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

@ -14,7 +14,6 @@ import {
setShouldShowBoundingBox, setShouldShowBoundingBox,
setShouldSnapToGrid, setShouldSnapToGrid,
} from 'features/canvas/store/canvasSlice'; } from 'features/canvas/store/canvasSlice';
import { isElChildOfCanvasTab } from 'features/canvas/util/isElChildOfCanvasTab';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
@ -92,13 +91,9 @@ const useInpaintingCanvasHotkeys = () => {
[activeTabName, shouldShowBoundingBox] [activeTabName, shouldShowBoundingBox]
); );
const onKeyDown = useCallback((e: KeyboardEvent) => { const onKeyDown = useCallback(
if ( (e: KeyboardEvent) => {
e.repeat || if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
e.key !== ' ' ||
isInputElement(e.target as HTMLElement) ||
!isElChildOfCanvasTab(e.target as HTMLElement)
) {
return; return;
} }
if ($toolStash.get() || $tool.get() === 'move') { if ($toolStash.get() || $tool.get() === 'move') {
@ -108,14 +103,12 @@ const useInpaintingCanvasHotkeys = () => {
$toolStash.set($tool.get()); $toolStash.set($tool.get());
$tool.set('move'); $tool.set('move');
resetToolInteractionState(); resetToolInteractionState();
}, []); },
const onKeyUp = useCallback((e: KeyboardEvent) => { [activeTabName]
if ( );
e.repeat || const onKeyUp = useCallback(
e.key !== ' ' || (e: KeyboardEvent) => {
isInputElement(e.target as HTMLElement) || if (e.repeat || e.key !== ' ' || isInputElement(e.target as HTMLElement) || activeTabName !== 'unifiedCanvas') {
!isElChildOfCanvasTab(e.target as HTMLElement)
) {
return; return;
} }
if (!$toolStash.get() || $tool.get() !== 'move') { if (!$toolStash.get() || $tool.get() !== 'move') {
@ -124,7 +117,9 @@ const useInpaintingCanvasHotkeys = () => {
$canvasStage.get()?.container().focus(); $canvasStage.get()?.container().focus();
$tool.set($toolStash.get() ?? 'move'); $tool.set($toolStash.get() ?? 'move');
$toolStash.set(null); $toolStash.set(null);
}, []); },
[activeTabName]
);
useEffect(() => { useEffect(() => {
window.addEventListener('keydown', onKeyDown); 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));
};