diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index a4ab8741bd..223a26d04d 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1815,6 +1815,7 @@
"cursorPosition": "Cursor Position",
"darkenOutsideSelection": "Darken Outside Selection",
"discardAll": "Discard All",
+ "discardCurrent": "Discard Current",
"downloadAsImage": "Download As Image",
"emptyFolder": "Empty Folder",
"emptyTempImageFolder": "Empty Temp Image Folder",
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
index 1a539a8909..31418d59a3 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@@ -5,6 +5,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { stagingAreaImageSaved } from 'features/canvas/store/actions';
import {
commitStagingAreaImage,
+ discardStagedImage,
discardStagedImages,
nextStagingAreaImage,
prevStagingAreaImage,
@@ -22,6 +23,7 @@ import {
PiEyeBold,
PiEyeSlashBold,
PiFloppyDiskBold,
+ PiTrashSimpleBold,
PiXBold,
} from 'react-icons/pi';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
@@ -44,6 +46,40 @@ const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
};
});
+const ClearStagingIntermediatesIconButton = () => {
+ const dispatch = useAppDispatch();
+ const { t } = useTranslation();
+
+ const handleDiscardStagingArea = useCallback(() => {
+ dispatch(discardStagedImages())
+ }, [dispatch]);
+
+ const handleDiscardStagingImage = useCallback(() => {
+ dispatch(discardStagedImage())
+ }, [dispatch]);
+
+ return (
+ <>
+ }
+ onClick={handleDiscardStagingImage}
+ colorScheme="invokeBlue"
+ fontSize={16}
+ />
+ }
+ onClick={handleDiscardStagingArea}
+ colorScheme="error"
+ fontSize={16}
+ />
+ >
+ )
+}
+
const IAICanvasStagingAreaToolbar = () => {
const dispatch = useAppDispatch();
const { currentStagingAreaImage, shouldShowStagingImage, currentIndex, total } = useAppSelector(selector);
@@ -185,14 +221,7 @@ const IAICanvasStagingAreaToolbar = () => {
onClick={handleSaveToGallery}
colorScheme="invokeBlue"
/>
- }
- onClick={handleDiscardStagingArea}
- colorScheme="error"
- fontSize={20}
- />
+
);
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
index 51ee9c4833..8276f95268 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
@@ -292,6 +292,24 @@ export const canvasSlice = createSlice({
state.shouldShowStagingImage = true;
state.batchIds = [];
},
+ discardStagedImage: (state) => {
+ const { images, selectedImageIndex } = state.layerState.stagingArea;
+
+ if (!images.length) {
+ return;
+ }
+
+ images.splice(selectedImageIndex, 1);
+
+ if (selectedImageIndex >= images.length) {
+ state.layerState.stagingArea.selectedImageIndex = images.length - 1;
+ }
+
+ if (!images.length) {
+ state.shouldShowStagingImage = false;
+ state.shouldShowStagingOutline = false;
+ }
+ },
addFillRect: (state) => {
const { boundingBoxCoordinates, boundingBoxDimensions, brushColor } = state;
@@ -659,6 +677,7 @@ export const {
commitColorPickerColor,
commitStagingAreaImage,
discardStagedImages,
+ discardStagedImage,
nextStagingAreaImage,
prevStagingAreaImage,
redo,