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 e7faac86e8..a64a6576ed 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx @@ -1,6 +1,8 @@ import { Button, ButtonGroup, IconButton } from '@invoke-ai/ui-library'; +import { useStore } from '@nanostores/react'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { + $shouldShowStagedImage, stagingAreaImageAccepted, stagingAreaImageDiscarded, stagingAreaNextImageSelected, @@ -11,7 +13,16 @@ import type { CanvasV2State } from 'features/controlLayers/store/types'; import { memo, useCallback, useMemo } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; -import { PiArrowLeftBold, PiArrowRightBold, PiCheckBold, PiTrashSimpleBold, PiXBold } from 'react-icons/pi'; +import { + PiArrowLeftBold, + PiArrowRightBold, + PiCheckBold, + PiEyeBold, + PiEyeSlashBold, + PiFloppyDiskBold, + PiTrashSimpleBold, + PiXBold, +} from 'react-icons/pi'; export const StagingAreaToolbar = memo(() => { const stagingArea = useAppSelector((s) => s.canvasV2.stagingArea); @@ -31,6 +42,7 @@ type Props = { export const StagingAreaToolbarContent = memo(({ stagingArea }: Props) => { const dispatch = useAppDispatch(); + const shouldShowStagedImage = useStore($shouldShowStagedImage); const images = useMemo(() => stagingArea.images, [stagingArea]); const imageDTO = useMemo(() => { if (stagingArea.selectedImageIndex === null) { @@ -74,6 +86,12 @@ export const StagingAreaToolbarContent = memo(({ stagingArea }: Props) => { dispatch(stagingAreaReset()); }, [dispatch, stagingArea]); + const onToggleShouldShowStagedImage = useCallback(() => { + $shouldShowStagedImage.set(!shouldShowStagedImage); + }, [shouldShowStagedImage]); + + const onSaveStagingImage = useCallback(() => {}, []); + useHotkeys(['left'], onPrev, { preventDefault: true, }); @@ -95,6 +113,7 @@ export const StagingAreaToolbarContent = memo(({ stagingArea }: Props) => { icon={} onClick={onPrev} colorScheme="invokeBlue" + isDisabled={images.length <= 1 || !shouldShowStagedImage} />