feat(ui): fix canvas saving

- fix "bounding box region only" not being respected when saving
- add toasts for each action
- improve workflow `take()` predicates to use the requestId

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts

@@ -28,6 +28,13 @@ export const addCanvasCopiedToClipboardListener = () => {
       }
 
       copyBlobToClipboard(blob);
+
+      dispatch(
+        addToast({
+          title: 'Canvas Copied to Clipboard',
+          status: 'success',
+        })
+      );
     },
   });
 };

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts

@@ -27,7 +27,8 @@ export const addCanvasDownloadedAsImageListener = () => {
         return;
       }
 
-      downloadBlob(blob, 'mergedCanvas.png');
+      downloadBlob(blob, 'canvas.png');
+      dispatch(addToast({ title: 'Canvas Downloaded', status: 'success' }));
     },
   });
 };

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasMerged.ts

@@ -1,22 +1,20 @@
 import { canvasMerged } from 'features/canvas/store/actions';
 import { startAppListening } from '..';
 import { log } from 'app/logging/useLogger';
-import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
 import { addToast } from 'features/system/store/systemSlice';
 import { imageUploaded } from 'services/thunks/image';
-import { v4 as uuidv4 } from 'uuid';
 import { setMergedCanvas } from 'features/canvas/store/canvasSlice';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
+import { getFullBaseLayerBlob } from 'features/canvas/util/getFullBaseLayerBlob';
 
 const moduleLog = log.child({ namespace: 'canvasCopiedToClipboardListener' });
+export const MERGED_CANVAS_FILENAME = 'mergedCanvas.png';
 
 export const addCanvasMergedListener = () => {
   startAppListening({
     actionCreator: canvasMerged,
     effect: async (action, { dispatch, getState, take }) => {
-      const state = getState();
-
-      const blob = await getBaseLayerBlob(state, true);
+      const blob = await getFullBaseLayerBlob();
 
       if (!blob) {
         moduleLog.error('Problem getting base layer blob');
@@ -48,12 +46,12 @@ export const addCanvasMergedListener = () => {
         relativeTo: canvasBaseLayer.getParent(),
       });
 
-      const filename = `mergedCanvas_${uuidv4()}.png`;
-
-      dispatch(
+      const imageUploadedRequest = dispatch(
         imageUploaded({
           formData: {
-            file: new File([blob], filename, { type: 'image/png' }),
+            file: new File([blob], MERGED_CANVAS_FILENAME, {
+              type: 'image/png',
+            }),
           },
           imageCategory: 'general',
           isIntermediate: true,
@@ -61,9 +59,11 @@ export const addCanvasMergedListener = () => {
       );
 
       const [{ payload }] = await take(
-        (action): action is ReturnType<typeof imageUploaded.fulfilled> =>
-          imageUploaded.fulfilled.match(action) &&
-          action.meta.arg.formData.file.name === filename
+        (
+          uploadedImageAction
+        ): uploadedImageAction is ReturnType<typeof imageUploaded.fulfilled> =>
+          imageUploaded.fulfilled.match(uploadedImageAction) &&
+          uploadedImageAction.meta.requestId === imageUploadedRequest.requestId
       );
 
       const mergedCanvasImage = payload;

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts

@@ -4,9 +4,10 @@ import { log } from 'app/logging/useLogger';
 import { imageUploaded } from 'services/thunks/image';
 import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
 import { addToast } from 'features/system/store/systemSlice';
-import { v4 as uuidv4 } from 'uuid';
 import { imageUpserted } from 'features/gallery/store/imagesSlice';
 
+export const SAVED_CANVAS_FILENAME = 'savedCanvas.png';
+
 const moduleLog = log.child({ namespace: 'canvasSavedToGalleryListener' });
 
 export const addCanvasSavedToGalleryListener = () => {
@@ -15,7 +16,7 @@ export const addCanvasSavedToGalleryListener = () => {
     effect: async (action, { dispatch, getState, take }) => {
       const state = getState();
 
-      const blob = await getBaseLayerBlob(state, true);
+      const blob = await getBaseLayerBlob(state);
 
       if (!blob) {
         moduleLog.error('Problem getting base layer blob');
@@ -29,12 +30,12 @@ export const addCanvasSavedToGalleryListener = () => {
         return;
       }
 
-      const filename = `mergedCanvas_${uuidv4()}.png`;
-
-      dispatch(
+      const imageUploadedRequest = dispatch(
         imageUploaded({
           formData: {
-            file: new File([blob], filename, { type: 'image/png' }),
+            file: new File([blob], SAVED_CANVAS_FILENAME, {
+              type: 'image/png',
+            }),
           },
           imageCategory: 'general',
           isIntermediate: false,
@@ -42,9 +43,11 @@ export const addCanvasSavedToGalleryListener = () => {
       );
 
       const [{ payload: uploadedImageDTO }] = await take(
-        (action): action is ReturnType<typeof imageUploaded.fulfilled> =>
-          imageUploaded.fulfilled.match(action) &&
-          action.meta.arg.formData.file.name === filename
+        (
+          uploadedImageAction
+        ): uploadedImageAction is ReturnType<typeof imageUploaded.fulfilled> =>
+          imageUploaded.fulfilled.match(uploadedImageAction) &&
+          uploadedImageAction.meta.requestId === imageUploadedRequest.requestId
       );
 
       dispatch(imageUpserted(uploadedImageDTO));

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts

@@ -3,6 +3,8 @@ import { imageUploaded } from 'services/thunks/image';
 import { addToast } from 'features/system/store/systemSlice';
 import { log } from 'app/logging/useLogger';
 import { imageUpserted } from 'features/gallery/store/imagesSlice';
+import { SAVED_CANVAS_FILENAME } from './canvasSavedToGallery';
+import { MERGED_CANVAS_FILENAME } from './canvasMerged';
 
 const moduleLog = log.child({ namespace: 'image' });
 
@@ -19,9 +21,22 @@ export const addImageUploadedFulfilledListener = () => {
         return;
       }
 
-      const state = getState();
+      const originalFileName = action.meta.arg.formData.file.name;
 
       dispatch(imageUpserted(image));
+
+      if (originalFileName === SAVED_CANVAS_FILENAME) {
+        dispatch(
+          addToast({ title: 'Canvas Saved to Gallery', status: 'success' })
+        );
+        return;
+      }
+
+      if (originalFileName === MERGED_CANVAS_FILENAME) {
+        dispatch(addToast({ title: 'Canvas Merged', status: 'success' }));
+        return;
+      }
+
       dispatch(addToast({ title: 'Image Uploaded', status: 'success' }));
     },
   });

invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts

@@ -2,10 +2,10 @@ import { getCanvasBaseLayer } from './konvaInstanceProvider';
 import { RootState } from 'app/store/store';
 import { konvaNodeToBlob } from './konvaNodeToBlob';
 
-export const getBaseLayerBlob = async (
-  state: RootState,
-  withoutBoundingBox?: boolean
-) => {
+/**
+ * Get the canvas base layer blob, with or without bounding box according to `shouldCropToBoundingBoxOnSave`
+ */
+export const getBaseLayerBlob = async (state: RootState) => {
   const canvasBaseLayer = getCanvasBaseLayer();
 
   if (!canvasBaseLayer) {
@@ -24,8 +24,7 @@ export const getBaseLayerBlob = async (
 
   const absPos = clonedBaseLayer.getAbsolutePosition();
 
-  const boundingBox =
-    shouldCropToBoundingBoxOnSave && !withoutBoundingBox
+  const boundingBox = shouldCropToBoundingBoxOnSave
     ? {
         x: boundingBoxCoordinates.x + absPos.x,
         y: boundingBoxCoordinates.y + absPos.y,

invokeai/frontend/web/src/features/canvas/util/getFullBaseLayerBlob.ts

@@ -0,0 +1,19 @@
+import { getCanvasBaseLayer } from './konvaInstanceProvider';
+import { konvaNodeToBlob } from './konvaNodeToBlob';
+
+/**
+ * Gets the canvas base layer blob, without bounding box
+ */
+export const getFullBaseLayerBlob = async () => {
+  const canvasBaseLayer = getCanvasBaseLayer();
+
+  if (!canvasBaseLayer) {
+    return;
+  }
+
+  const clonedBaseLayer = canvasBaseLayer.clone();
+
+  clonedBaseLayer.scale({ x: 1, y: 1 });
+
+  return konvaNodeToBlob(clonedBaseLayer, clonedBaseLayer.getClientRect());
+};