feat(ui): use new image actions system for image menu

psychedelicious · psychedelicious · commit ff346172afc0 · 2024-11-08T07:39:09.000+11:00
diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts
@@ -2,11 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { deepClone } from 'common/util/deepClone';
-import { CanvasEntityAdapterBase } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterBase';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
-import { canvasReset } from 'features/controlLayers/store/actions';
 import {
-  bboxChangedFromCanvas,
   controlLayerAdded,
   inpaintMaskAdded,
   rasterLayerAdded,
@@ -17,37 +14,20 @@ import {
   rgPositivePromptChanged,
 } from 'features/controlLayers/store/canvasSlice';
 import { selectBase } from 'features/controlLayers/store/paramsSlice';
-import {
-  selectBboxModelBase,
-  selectBboxRect,
-  selectCanvasSlice,
-  selectEntityOrThrow,
-} from 'features/controlLayers/store/selectors';
+import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
 import type {
-  CanvasControlLayerState,
   CanvasEntityIdentifier,
-  CanvasInpaintMaskState,
-  CanvasRasterLayerState,
   CanvasRegionalGuidanceState,
   ControlNetConfig,
   IPAdapterConfig,
   T2IAdapterConfig,
 } from 'features/controlLayers/store/types';
-import {
-  imageDTOToImageObject,
-  initialControlNet,
-  initialIPAdapter,
-  initialT2IAdapter,
-} from 'features/controlLayers/store/util';
-import { calculateNewSize } from 'features/controlLayers/util/getScaledBoundingBoxDimensions';
+import { initialControlNet, initialIPAdapter, initialT2IAdapter } from 'features/controlLayers/store/util';
 import { zModelIdentifierField } from 'features/nodes/types/common';
-import { getOptimalDimension } from 'features/parameters/util/optimalDimension';
 import { useCallback } from 'react';
 import { modelConfigsAdapterSelectors, selectModelConfigsQuery } from 'services/api/endpoints/models';
-import type { ControlNetModelConfig, ImageDTO, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
+import type { ControlNetModelConfig, IPAdapterModelConfig, T2IAdapterModelConfig } from 'services/api/types';
 import { isControlNetOrT2IAdapterModelConfig, isIPAdapterModelConfig } from 'services/api/types';
-import type { Equals } from 'tsafe';
-import { assert } from 'tsafe';
 
 /** @knipignore */
 export const selectDefaultControlAdapter = createSelector(
@@ -110,150 +90,6 @@ export const useAddRasterLayer = () => {
   return func;
 };
 
-export const useNewRasterLayerFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const func = useCallback(
-    (imageDTO: ImageDTO) => {
-      const imageObject = imageDTOToImageObject(imageDTO);
-      const overrides: Partial<CanvasRasterLayerState> = {
-        position: { x: bboxRect.x, y: bboxRect.y },
-        objects: [imageObject],
-      };
-      dispatch(rasterLayerAdded({ overrides, isSelected: true }));
-    },
-    [bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
-export const useNewControlLayerFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const func = useCallback(
-    (imageDTO: ImageDTO) => {
-      const imageObject = imageDTOToImageObject(imageDTO);
-      const overrides: Partial<CanvasControlLayerState> = {
-        position: { x: bboxRect.x, y: bboxRect.y },
-        objects: [imageObject],
-      };
-      dispatch(controlLayerAdded({ overrides, isSelected: true }));
-    },
-    [bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
-export const useNewInpaintMaskFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const func = useCallback(
-    (imageDTO: ImageDTO) => {
-      const imageObject = imageDTOToImageObject(imageDTO);
-      const overrides: Partial<CanvasInpaintMaskState> = {
-        position: { x: bboxRect.x, y: bboxRect.y },
-        objects: [imageObject],
-      };
-      dispatch(inpaintMaskAdded({ overrides, isSelected: true }));
-    },
-    [bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
-export const useNewRegionalGuidanceFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const func = useCallback(
-    (imageDTO: ImageDTO) => {
-      const imageObject = imageDTOToImageObject(imageDTO);
-      const overrides: Partial<CanvasRegionalGuidanceState> = {
-        position: { x: bboxRect.x, y: bboxRect.y },
-        objects: [imageObject],
-      };
-      dispatch(rgAdded({ overrides, isSelected: true }));
-    },
-    [bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
-/**
- * Returns a function that adds a new canvas with the given image as the initial image, replicating the img2img flow:
- * - Reset the canvas
- * - Resize the bbox to the image's aspect ratio at the optimal size for the selected model
- * - Add the image as a raster layer
- * - Resizes the layer to fit the bbox using the 'fill' strategy
- *
- * This allows the user to immediately generate a new image from the given image without any additional steps.
- */
-export const useNewCanvasFromImage = () => {
-  const dispatch = useAppDispatch();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const base = useAppSelector(selectBboxModelBase);
-  const func = useCallback(
-    (imageDTO: ImageDTO, type: CanvasRasterLayerState['type'] | CanvasControlLayerState['type']) => {
-      // Calculate the new bbox dimensions to fit the image's aspect ratio at the optimal size
-      const ratio = imageDTO.width / imageDTO.height;
-      const optimalDimension = getOptimalDimension(base);
-      const { width, height } = calculateNewSize(ratio, optimalDimension ** 2, base);
-
-      // The overrides need to include the layer's ID so we can transform the layer it is initialized
-      let overrides: Partial<CanvasRasterLayerState> | Partial<CanvasControlLayerState>;
-
-      if (type === 'raster_layer') {
-        overrides = {
-          id: getPrefixedId('raster_layer'),
-          position: { x: bboxRect.x, y: bboxRect.y },
-          objects: [imageDTOToImageObject(imageDTO)],
-        } satisfies Partial<CanvasRasterLayerState>;
-      } else if (type === 'control_layer') {
-        overrides = {
-          id: getPrefixedId('control_layer'),
-          position: { x: bboxRect.x, y: bboxRect.y },
-          objects: [imageDTOToImageObject(imageDTO)],
-        } satisfies Partial<CanvasControlLayerState>;
-      } else {
-        // Catch unhandled types
-        assert<Equals<typeof type, never>>(false);
-      }
-
-      CanvasEntityAdapterBase.registerInitCallback(async (adapter) => {
-        // Skip the callback if the adapter is not the one we are creating
-        if (adapter.id !== overrides.id) {
-          return false;
-        }
-        // Fit the layer to the bbox w/ fill strategy
-        await adapter.transformer.startTransform({ silent: true });
-        adapter.transformer.fitToBboxFill();
-        await adapter.transformer.applyTransform();
-        return true;
-      });
-
-      dispatch(canvasReset());
-      // The `bboxChangedFromCanvas` reducer does no validation! Careful!
-      dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));
-
-      // The type casts are safe because the type is checked above
-      if (type === 'raster_layer') {
-        dispatch(rasterLayerAdded({ overrides: overrides as Partial<CanvasRasterLayerState>, isSelected: true }));
-      } else if (type === 'control_layer') {
-        dispatch(controlLayerAdded({ overrides: overrides as Partial<CanvasControlLayerState>, isSelected: true }));
-      } else {
-        // Catch unhandled types
-        assert<Equals<typeof type, never>>(false);
-      }
-    },
-    [base, bboxRect.x, bboxRect.y, dispatch]
-  );
-
-  return func;
-};
-
 export const useAddInpaintMask = () => {
   const dispatch = useAppDispatch();
   const func = useCallback(() => {
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemNewFromImageSubMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemNewFromImageSubMenu.tsx
@@ -1,18 +1,17 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import { useAppStore } from 'app/store/nanostores/store';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
 import { NewLayerIcon } from 'features/controlLayers/components/common/icons';
-import {
-  useNewCanvasFromImage,
-  useNewControlLayerFromImage,
-  useNewInpaintMaskFromImage,
-  useNewRasterLayerFromImage,
-  useNewRegionalGuidanceFromImage,
-} from 'features/controlLayers/hooks/addLayerHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { sentImageToCanvas } from 'features/gallery/store/actions';
+import {
+  newCanvasEntityFromImageActionApi,
+  newCanvasFromImageActionApi,
+  singleImageSourceApi,
+} from 'features/imageActions/actions';
 import { toast } from 'features/toast/toast';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback } from 'react';
@@ -22,85 +21,93 @@ import { PiFileBold, PiPlusBold } from 'react-icons/pi';
 export const ImageMenuItemNewFromImageSubMenu = memo(() => {
   const { t } = useTranslation();
   const subMenu = useSubMenu();
+  const store = useAppStore();
   const dispatch = useAppDispatch();
   const imageDTO = useImageDTOContext();
   const imageViewer = useImageViewer();
   const isBusy = useCanvasIsBusy();
-  const newRasterLayerFromImage = useNewRasterLayerFromImage();
-  const newControlLayerFromImage = useNewControlLayerFromImage();
-  const newInpaintMaskFromImage = useNewInpaintMaskFromImage();
-  const newRegionalGuidanceFromImage = useNewRegionalGuidanceFromImage();
-  const newCanvasFromImage = useNewCanvasFromImage();
 
   const onClickNewCanvasWithRasterLayerFromImage = useCallback(() => {
-    newCanvasFromImage(imageDTO, 'raster_layer');
+    const targetData = newCanvasFromImageActionApi.getData({ type: 'raster_layer' });
+    const sourceData = singleImageSourceApi.getData({ imageDTO });
+    newCanvasFromImageActionApi.handler(sourceData, targetData, store.dispatch, store.getState);
     dispatch(setActiveTab('canvas'));
     imageViewer.close();
     toast({
       id: 'SENT_TO_CANVAS',
       title: t('toast.sentToCanvas'),
       status: 'success',
     });
-  }, [dispatch, imageDTO, imageViewer, newCanvasFromImage, t]);
+  }, [dispatch, imageDTO, imageViewer, store.dispatch, store.getState, t]);
 
   const onClickNewCanvasWithControlLayerFromImage = useCallback(() => {
-    newCanvasFromImage(imageDTO, 'control_layer');
+    const targetData = newCanvasFromImageActionApi.getData({ type: 'control_layer' });
+    const sourceData = singleImageSourceApi.getData({ imageDTO });
+    newCanvasFromImageActionApi.handler(sourceData, targetData, store.dispatch, store.getState);
     dispatch(setActiveTab('canvas'));
     imageViewer.close();
     toast({
       id: 'SENT_TO_CANVAS',
       title: t('toast.sentToCanvas'),
       status: 'success',
     });
-  }, [dispatch, imageDTO, imageViewer, newCanvasFromImage, t]);
+  }, [dispatch, imageDTO, imageViewer, store.dispatch, store.getState, t]);
 
   const onClickNewRasterLayerFromImage = useCallback(() => {
+    const targetData = newCanvasEntityFromImageActionApi.getData({ type: 'raster_layer' });
+    const sourceData = singleImageSourceApi.getData({ imageDTO });
+    newCanvasEntityFromImageActionApi.handler(sourceData, targetData, store.dispatch, store.getState);
     dispatch(sentImageToCanvas());
-    newRasterLayerFromImage(imageDTO);
     dispatch(setActiveTab('canvas'));
     imageViewer.close();
     toast({
       id: 'SENT_TO_CANVAS',
       title: t('toast.sentToCanvas'),
       status: 'success',
     });
-  }, [dispatch, imageDTO, imageViewer, newRasterLayerFromImage, t]);
+  }, [dispatch, imageDTO, imageViewer, store.dispatch, store.getState, t]);
 
   const onClickNewControlLayerFromImage = useCallback(() => {
+    const targetData = newCanvasEntityFromImageActionApi.getData({ type: 'control_layer' });
+    const sourceData = singleImageSourceApi.getData({ imageDTO });
+    newCanvasEntityFromImageActionApi.handler(sourceData, targetData, store.dispatch, store.getState);
     dispatch(sentImageToCanvas());
-    newControlLayerFromImage(imageDTO);
     dispatch(setActiveTab('canvas'));
     imageViewer.close();
     toast({
       id: 'SENT_TO_CANVAS',
       title: t('toast.sentToCanvas'),
       status: 'success',
     });
-  }, [dispatch, imageDTO, imageViewer, newControlLayerFromImage, t]);
+  }, [dispatch, imageDTO, imageViewer, store.dispatch, store.getState, t]);
 
   const onClickNewInpaintMaskFromImage = useCallback(() => {
+    const targetData = newCanvasEntityFromImageActionApi.getData({ type: 'inpaint_mask' });
+    const sourceData = singleImageSourceApi.getData({ imageDTO });
+    newCanvasEntityFromImageActionApi.handler(sourceData, targetData, store.dispatch, store.getState);
     dispatch(sentImageToCanvas());
-    newInpaintMaskFromImage(imageDTO);
     dispatch(setActiveTab('canvas'));
     imageViewer.close();
     toast({
       id: 'SENT_TO_CANVAS',
       title: t('toast.sentToCanvas'),
       status: 'success',
     });
-  }, [dispatch, imageDTO, imageViewer, newInpaintMaskFromImage, t]);
+  }, [dispatch, imageDTO, imageViewer, store.dispatch, store.getState, t]);
 
   const onClickNewRegionalGuidanceFromImage = useCallback(() => {
+    const targetData = newCanvasEntityFromImageActionApi.getData({ type: 'regional_guidance' });
+    const sourceData = singleImageSourceApi.getData({ imageDTO });
+    newCanvasEntityFromImageActionApi.handler(sourceData, targetData, store.dispatch, store.getState);
     dispatch(sentImageToCanvas());
-    newRegionalGuidanceFromImage(imageDTO);
     dispatch(setActiveTab('canvas'));
     imageViewer.close();
     toast({
       id: 'SENT_TO_CANVAS',
       title: t('toast.sentToCanvas'),
       status: 'success',
     });
-  }, [dispatch, imageDTO, imageViewer, newRegionalGuidanceFromImage, t]);
+  }, [dispatch, imageDTO, imageViewer, store.dispatch, store.getState, t]);
 
   return (
     <MenuItem {...subMenu.parentMenuItemProps} icon={<PiPlusBold />}>
diff --git a/invokeai/frontend/web/src/features/imageActions/actions.ts b/invokeai/frontend/web/src/features/imageActions/actions.ts
