github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-12 18:14:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): use imageDTO in staging area

Browse Source
This commit is contained in:
psychedelicious
2025-06-11 12:19:43 +10:00
parent ba082ccc2f
commit 8c17bde4ea
4 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx
View File

@@ -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<CanvasRasterLayerState> = {
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={<PiCheckBold />}
onClick={acceptSelected}
colorScheme="invokeBlue"
isDisabled={!selectedItemImageName || !shouldShowStagedImage || deleteQueueItemsByDestination.isDisabled}
isDisabled={!selectedItemImageDTO || !shouldShowStagedImage || deleteQueueItemsByDestination.isDisabled}
isLoading={deleteQueueItemsByDestination.isLoading}
/>
);

34
invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage.tsx
View File

@@ -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 (
<MenuGroup title="New Layer From Image">
<MenuItem
icon={<NewLayerIcon />}
onClickCapture={onClickNewInpaintMaskFromImage}
isDisabled={!imageName || !shouldShowStagedImage}
isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
>
{t('controlLayers.inpaintMask')}
</MenuItem>
<MenuItem
icon={<NewLayerIcon />}
onClickCapture={onClickNewRegionalGuidanceFromImage}
isDisabled={!imageName || !shouldShowStagedImage}
isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
>
{t('controlLayers.regionalGuidance')}
</MenuItem>
<MenuItem
icon={<NewLayerIcon />}
onClickCapture={onClickNewControlLayerFromImage}
isDisabled={!imageName || !shouldShowStagedImage}
isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
>
{t('controlLayers.controlLayer')}
</MenuItem>
<MenuItem
icon={<NewLayerIcon />}
onClickCapture={onClickNewRasterLayerFromImage}
isDisabled={!imageName || !shouldShowStagedImage}
isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
>
{t('controlLayers.rasterLayer')}
</MenuItem>

10
invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx
View File

@@ -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 (
<IconButton
@@ -64,7 +64,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
icon={<PiFloppyDiskBold />}
onClick={saveSelectedImageToGallery}
colorScheme="invokeBlue"
isDisabled={!imageName || !shouldShowStagedImage}
isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
/>
);
});

4
invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts
View File

@@ -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 });