diff --git a/invokeai/frontend/web/src/common/hooks/interactionScopes.ts b/invokeai/frontend/web/src/common/hooks/interactionScopes.ts index 0e4aa906a4..9140b616c4 100644 --- a/invokeai/frontend/web/src/common/hooks/interactionScopes.ts +++ b/invokeai/frontend/web/src/common/hooks/interactionScopes.ts @@ -9,7 +9,7 @@ import { useEffect, useMemo } from 'react'; const log = logger('system'); -const _INTERACTION_SCOPES = ['gallery', 'canvas', 'workflows', 'imageViewer'] as const; +const _INTERACTION_SCOPES = ['gallery', 'canvas', 'stagingArea', 'workflows', 'imageViewer'] as const; type InteractionScope = (typeof _INTERACTION_SCOPES)[number]; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx index 2893e66711..45e51f59fc 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx @@ -1,7 +1,7 @@ import { Button, ButtonGroup, IconButton } from '@invoke-ai/ui-library'; import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { INTERACTION_SCOPES } from 'common/hooks/interactionScopes'; +import { INTERACTION_SCOPES, useScopeOnMount } from 'common/hooks/interactionScopes'; import { $shouldShowStagedImage, sessionNextStagedImageSelected, @@ -35,6 +35,7 @@ export const StagingAreaToolbar = memo(() => { }, [images, session.selectedStagedImageIndex]); const isCanvasActive = useStore(INTERACTION_SCOPES.canvas.$isActive); const [changeIsImageIntermediate] = useChangeImageIsIntermediateMutation(); + useScopeOnMount('stagingArea'); const { t } = useTranslation(); diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts index b8e9ed5b7e..ec71b84462 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts @@ -12,12 +12,12 @@ import { useListImagesQuery } from 'services/api/endpoints/images'; const $leftRightHotkeysEnabled = computed($activeScopes, (activeScopes) => { // The left and right hotkeys can be used when the gallery is focused and the canvas is not focused, OR when the image viewer is focused. - return (!activeScopes.has('staging-area') && !activeScopes.has('canvas')) || activeScopes.has('imageViewer'); + return !activeScopes.has('canvas') || activeScopes.has('imageViewer'); }); const $upDownHotkeysEnabled = computed([$activeScopes, $isGalleryPanelOpen], (activeScopes, isGalleryPanelOpen) => { // The up and down hotkeys can be used when the gallery is focused and the canvas is not focused, and the gallery panel is open. - return !activeScopes.has('staging-area') && !activeScopes.has('canvas') && isGalleryPanelOpen; + return !activeScopes.has('canvas') && isGalleryPanelOpen; }); /**