From 8c17bde4eaab8da1a1f256c7bc58b7fafa460c25 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 11 Jun 2025 12:19:43 +1000 Subject: [PATCH] fix(ui): use imageDTO in staging area --- .../StagingAreaToolbarAcceptButton.tsx | 14 ++++---- ...tagingAreaToolbarMenuNewLayerFromImage.tsx | 34 +++++++++---------- ...AreaToolbarSaveSelectedToGalleryButton.tsx | 10 +++--- .../konva/CanvasStagingAreaModule.ts | 4 +-- 4 files changed, 31 insertions(+), 31 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx index 1272887abc..8718385567 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx @@ -23,17 +23,17 @@ export const StagingAreaToolbarAcceptButton = memo(() => { const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier); const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage); const isCanvasFocused = useIsRegionFocused('canvas'); - const selectedItemImageName = useStore(ctx.$selectedItemOutputImageName); + const selectedItemImageDTO = useStore(ctx.$selectedItemOutputImageDTO); const deleteQueueItemsByDestination = useDeleteQueueItemsByDestination(); const { t } = useTranslation(); const acceptSelected = useCallback(() => { - if (!selectedItemImageName) { + if (!selectedItemImageDTO) { return; } const { x, y, width, height } = bboxRect; - const imageObject = imageNameToImageObject(selectedItemImageName, { width, height }); + const imageObject = imageNameToImageObject(selectedItemImageDTO.image_name, { width, height }); const overrides: Partial = { position: { x, y }, objects: [imageObject], @@ -43,7 +43,7 @@ export const StagingAreaToolbarAcceptButton = memo(() => { dispatch(canvasSessionGenerationFinished()); deleteQueueItemsByDestination.trigger(ctx.session.id); }, [ - selectedItemImageName, + selectedItemImageDTO, bboxRect, dispatch, selectedEntityIdentifier?.type, @@ -56,9 +56,9 @@ export const StagingAreaToolbarAcceptButton = memo(() => { acceptSelected, { preventDefault: true, - enabled: isCanvasFocused && shouldShowStagedImage && selectedItemImageName !== null, + enabled: isCanvasFocused && shouldShowStagedImage && selectedItemImageDTO !== null, }, - [isCanvasFocused, shouldShowStagedImage, selectedItemImageName] + [isCanvasFocused, shouldShowStagedImage, selectedItemImageDTO] ); return ( @@ -68,7 +68,7 @@ export const StagingAreaToolbarAcceptButton = memo(() => { icon={} onClick={acceptSelected} colorScheme="invokeBlue" - isDisabled={!selectedItemImageName || !shouldShowStagedImage || deleteQueueItemsByDestination.isDisabled} + isDisabled={!selectedItemImageDTO || !shouldShowStagedImage || deleteQueueItemsByDestination.isDisabled} isLoading={deleteQueueItemsByDestination.isLoading} /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage.tsx index 54ab1578db..1c748139c5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage.tsx @@ -16,7 +16,7 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => { const canvasManager = useCanvasManager(); const { t } = useTranslation(); const ctx = useCanvasSessionContext(); - const imageName = useStore(ctx.$selectedItemOutputImageName); + const selectedItemOutputImageDTO = useStore(ctx.$selectedItemOutputImageDTO); const store = useAppStore(); const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage); @@ -29,11 +29,11 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => { }, [t]); const onClickNewRasterLayerFromImage = useCallback(async () => { - if (!imageName) { + if (!selectedItemOutputImageDTO) { return; } const { dispatch, getState } = store; - const imageDTO = await copyImage(imageName, uploadImageArg); + const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg); createNewCanvasEntityFromImage({ imageDTO, type: 'raster_layer', @@ -42,14 +42,14 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => { overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default }); toastSentToCanvas(); - }, [imageName, store, toastSentToCanvas]); + }, [selectedItemOutputImageDTO, store, toastSentToCanvas]); const onClickNewControlLayerFromImage = useCallback(async () => { - if (!imageName) { + if (!selectedItemOutputImageDTO) { return; } const { dispatch, getState } = store; - const imageDTO = await copyImage(imageName, uploadImageArg); + const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg); createNewCanvasEntityFromImage({ imageDTO, @@ -59,14 +59,14 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => { overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default }); toastSentToCanvas(); - }, [imageName, store, toastSentToCanvas]); + }, [selectedItemOutputImageDTO, store, toastSentToCanvas]); const onClickNewInpaintMaskFromImage = useCallback(async () => { - if (!imageName) { + if (!selectedItemOutputImageDTO) { return; } const { dispatch, getState } = store; - const imageDTO = await copyImage(imageName, uploadImageArg); + const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg); createNewCanvasEntityFromImage({ imageDTO, @@ -76,14 +76,14 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => { overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default }); toastSentToCanvas(); - }, [imageName, store, toastSentToCanvas]); + }, [selectedItemOutputImageDTO, store, toastSentToCanvas]); const onClickNewRegionalGuidanceFromImage = useCallback(async () => { - if (!imageName) { + if (!selectedItemOutputImageDTO) { return; } const { dispatch, getState } = store; - const imageDTO = await copyImage(imageName, uploadImageArg); + const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg); createNewCanvasEntityFromImage({ imageDTO, @@ -93,35 +93,35 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => { overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default }); toastSentToCanvas(); - }, [imageName, store, toastSentToCanvas]); + }, [selectedItemOutputImageDTO, store, toastSentToCanvas]); return ( } onClickCapture={onClickNewInpaintMaskFromImage} - isDisabled={!imageName || !shouldShowStagedImage} + isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage} > {t('controlLayers.inpaintMask')} } onClickCapture={onClickNewRegionalGuidanceFromImage} - isDisabled={!imageName || !shouldShowStagedImage} + isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage} > {t('controlLayers.regionalGuidance')} } onClickCapture={onClickNewControlLayerFromImage} - isDisabled={!imageName || !shouldShowStagedImage} + isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage} > {t('controlLayers.controlLayer')} } onClickCapture={onClickNewRasterLayerFromImage} - isDisabled={!imageName || !shouldShowStagedImage} + isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage} > {t('controlLayers.rasterLayer')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx index 7f7f6bea37..82476c1e4d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx @@ -17,13 +17,13 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => { const canvasManager = useCanvasManager(); const autoAddBoardId = useAppSelector(selectAutoAddBoardId); const ctx = useCanvasSessionContext(); - const imageName = useStore(ctx.$selectedItemOutputImageName); + const selectedItemOutputImageDTO = useStore(ctx.$selectedItemOutputImageDTO); const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage); const { t } = useTranslation(); const saveSelectedImageToGallery = useCallback(async () => { - if (!imageName) { + if (!selectedItemOutputImageDTO) { return; } @@ -31,7 +31,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => { // the gallery without borking the canvas, which may need this image to exist. const result = await withResultAsync(async () => { // Create a new file with the same name, which we will upload - await copyImage(imageName, { + await copyImage(selectedItemOutputImageDTO.image_name, { // Image should show up in the Images tab image_category: 'general', is_intermediate: false, @@ -55,7 +55,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => { status: 'error', }); } - }, [autoAddBoardId, imageName, t]); + }, [autoAddBoardId, selectedItemOutputImageDTO, t]); return ( { icon={} onClick={saveSelectedImageToGallery} colorScheme="invokeBlue" - isDisabled={!imageName || !shouldShowStagedImage} + isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage} /> ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts index fa3ca84ec6..8262c70886 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts @@ -147,8 +147,8 @@ export class CanvasStagingAreaModule extends CanvasModuleBase { const datum = progressData[selectedItemId]; - if (datum?.outputImageName) { - this.$imageSrc.set({ type: 'imageName', data: datum.outputImageName }); + if (datum?.imageDTO) { + this.$imageSrc.set({ type: 'imageName', data: datum.imageDTO.image_name }); return; } else if (datum?.progressImage) { this.$imageSrc.set({ type: 'dataURL', data: datum.progressImage.dataURL });