From cab3748010d577dff12a2108d486f5b091ad4fd5 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Tue, 5 Mar 2024 19:12:11 -0700
Subject: [PATCH] feat: :sparkles: discard current inpaint item

---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../IAICanvasStagingAreaToolbar.tsx           | 45 +++++++++++++++----
 .../src/features/canvas/store/canvasSlice.ts  | 19 ++++++++
 3 files changed, 57 insertions(+), 8 deletions(-)

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 (
+    <>
+      <IconButton
+        tooltip={`${t('unifiedCanvas.discardCurrent')}`}
+        aria-label={t('unifiedCanvas.discardCurrent')}
+        icon={<PiXBold />}
+        onClick={handleDiscardStagingImage}
+        colorScheme="invokeBlue"
+        fontSize={16}
+      />
+      <IconButton
+        tooltip={`${t('unifiedCanvas.discardAll')} (Esc)`}
+        aria-label={t('unifiedCanvas.discardAll')}
+        icon={<PiTrashSimpleBold />}
+        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"
         />
-        <IconButton
-          tooltip={`${t('unifiedCanvas.discardAll')} (Esc)`}
-          aria-label={t('unifiedCanvas.discardAll')}
-          icon={<PiXBold />}
-          onClick={handleDiscardStagingArea}
-          colorScheme="error"
-          fontSize={20}
-        />
+        <ClearStagingIntermediatesIconButton />
       </ButtonGroup>
     </Flex>
   );
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,