feat(ui): merge down deletes merged entities

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsMergeDown.tsx

@@ -18,7 +18,7 @@ export const CanvasEntityMenuItemsMergeDown = memo(() => {
     if (entityIdentifierBelowThisOne === null) {
       return;
     }
-    canvasManager.compositor.mergeByEntityIdentifiers([entityIdentifierBelowThisOne, entityIdentifier]);
+    canvasManager.compositor.mergeByEntityIdentifiers([entityIdentifierBelowThisOne, entityIdentifier], true);
   }, [canvasManager.compositor, entityIdentifier, entityIdentifierBelowThisOne]);
 
   return (

invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts

@@ -9,6 +9,7 @@ import {
   getImageDataTransparency,
   getPrefixedId,
   getRectUnion,
+  mapId,
   previewBlob,
 } from 'features/controlLayers/konva/util';
 import {
@@ -317,18 +318,23 @@ export class CanvasCompositorModule extends CanvasModuleBase {
    * All entities must have the same type.
    *
    * @param entityIdentifiers The entity identifiers to merge
+   * @param deleteMergedEntities Whether to delete the merged entities after creating the new merged entity
    * @returns A promise that resolves to the image DTO, or null if the merge failed
    */
   mergeByEntityIdentifiers = async <T extends CanvasRenderableEntityIdentifier>(
-    entityIdentifiers: T[]
+    entityIdentifiers: T[],
+    deleteMergedEntities: boolean
   ): Promise<ImageDTO | null> => {
     if (entityIdentifiers.length <= 1) {
       this.log.warn({ entityIdentifiers }, 'Cannot merge less than 2 entities');
       return null;
     }
     const type = entityIdentifiers[0]?.type;
     assert(type, 'Cannot merge entities with no type (this should never happen)');
+
     const adapters = this.manager.getAdapters(entityIdentifiers);
+    assert(adapters.length === entityIdentifiers.length, 'Failed to get all adapters for entity identifiers');
+
     const rect = this.getRectOfAdapters(adapters);
 
     const compositingOptions: CompositingOptions = {
@@ -353,6 +359,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
         objects: [imageDTOToImageObject(result.value)],
         position: { x: Math.floor(rect.x), y: Math.floor(rect.y) },
       },
+      mergedEntitiesToDelete: deleteMergedEntities ? entityIdentifiers.map(mapId) : [],
     };
 
     switch (type) {
@@ -405,7 +412,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
 
     const entityIdentifiers = entities.map(getEntityIdentifier);
 
-    return this.mergeByEntityIdentifiers(entityIdentifiers);
+    return this.mergeByEntityIdentifiers(entityIdentifiers, false);
   };
 
   /**

invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts

@@ -123,18 +123,29 @@ export const canvasSlice = createSlice({
           id: string;
           overrides?: Partial<CanvasRasterLayerState>;
           isSelected?: boolean;
+          mergedEntitiesToDelete?: string[];
         }>
       ) => {
-        const { id, overrides, isSelected } = action.payload;
+        const { id, overrides, isSelected, mergedEntitiesToDelete = [] } = action.payload;
         const entityState = getRasterLayerState(id, overrides);
 
         state.rasterLayers.entities.push(entityState);
 
-        if (isSelected) {
+        if (mergedEntitiesToDelete.length > 0) {
+          state.rasterLayers.entities = state.rasterLayers.entities.filter(
+            (entity) => !mergedEntitiesToDelete.includes(entity.id)
+          );
+        }
+
+        if (isSelected || mergedEntitiesToDelete.length > 0) {
           state.selectedEntityIdentifier = getEntityIdentifier(entityState);
         }
       },
-      prepare: (payload: { overrides?: Partial<CanvasRasterLayerState>; isSelected?: boolean }) => ({
+      prepare: (payload: {
+        overrides?: Partial<CanvasRasterLayerState>;
+        isSelected?: boolean;
+        mergedEntitiesToDelete?: string[];
+      }) => ({
         payload: { ...payload, id: getPrefixedId('raster_layer') },
       }),
     },
@@ -261,19 +272,34 @@ export const canvasSlice = createSlice({
     controlLayerAdded: {
       reducer: (
         state,
-        action: PayloadAction<{ id: string; overrides?: Partial<CanvasControlLayerState>; isSelected?: boolean }>
+        action: PayloadAction<{
+          id: string;
+          overrides?: Partial<CanvasControlLayerState>;
+          isSelected?: boolean;
+          mergedEntitiesToDelete?: string[];
+        }>
       ) => {
-        const { id, overrides, isSelected } = action.payload;
+        const { id, overrides, isSelected, mergedEntitiesToDelete = [] } = action.payload;
 
         const entityState = getControlLayerState(id, overrides);
 
         state.controlLayers.entities.push(entityState);
 
-        if (isSelected) {
+        if (mergedEntitiesToDelete.length > 0) {
+          state.controlLayers.entities = state.controlLayers.entities.filter(
+            (entity) => !mergedEntitiesToDelete.includes(entity.id)
+          );
+        }
+
+        if (isSelected || mergedEntitiesToDelete.length > 0) {
           state.selectedEntityIdentifier = getEntityIdentifier(entityState);
         }
       },
-      prepare: (payload: { overrides?: Partial<CanvasControlLayerState>; isSelected?: boolean }) => ({
+      prepare: (payload: {
+        overrides?: Partial<CanvasControlLayerState>;
+        isSelected?: boolean;
+        mergedEntitiesToDelete?: string[];
+      }) => ({
         payload: { ...payload, id: getPrefixedId('control_layer') },
       }),
     },
@@ -585,19 +611,34 @@ export const canvasSlice = createSlice({
     rgAdded: {
       reducer: (
         state,
-        action: PayloadAction<{ id: string; overrides?: Partial<CanvasRegionalGuidanceState>; isSelected?: boolean }>
+        action: PayloadAction<{
+          id: string;
+          overrides?: Partial<CanvasRegionalGuidanceState>;
+          isSelected?: boolean;
+          mergedEntitiesToDelete?: string[];
+        }>
       ) => {
-        const { id, overrides, isSelected } = action.payload;
+        const { id, overrides, isSelected, mergedEntitiesToDelete = [] } = action.payload;
 
         const entityState = getRegionalGuidanceState(id, overrides);
 
         state.regionalGuidance.entities.push(entityState);
 
-        if (isSelected) {
+        if (mergedEntitiesToDelete.length > 0) {
+          state.regionalGuidance.entities = state.regionalGuidance.entities.filter(
+            (entity) => !mergedEntitiesToDelete.includes(entity.id)
+          );
+        }
+
+        if (isSelected || mergedEntitiesToDelete.length > 0) {
           state.selectedEntityIdentifier = getEntityIdentifier(entityState);
         }
       },
-      prepare: (payload?: { overrides?: Partial<CanvasRegionalGuidanceState>; isSelected?: boolean }) => ({
+      prepare: (payload?: {
+        overrides?: Partial<CanvasRegionalGuidanceState>;
+        isSelected?: boolean;
+        mergedEntitiesToDelete?: string[];
+      }) => ({
         payload: { ...payload, id: getPrefixedId('regional_guidance') },
       }),
     },
@@ -812,19 +853,30 @@ export const canvasSlice = createSlice({
           id: string;
           overrides?: Partial<CanvasInpaintMaskState>;
           isSelected?: boolean;
+          mergedEntitiesToDelete?: string[];
         }>
       ) => {
-        const { id, overrides, isSelected } = action.payload;
+        const { id, overrides, isSelected, mergedEntitiesToDelete = [] } = action.payload;
 
         const entityState = getInpaintMaskState(id, overrides);
 
         state.inpaintMasks.entities.push(entityState);
 
-        if (isSelected) {
+        if (mergedEntitiesToDelete.length > 0) {
+          state.inpaintMasks.entities = state.inpaintMasks.entities.filter(
+            (entity) => !mergedEntitiesToDelete.includes(entity.id)
+          );
+        }
+
+        if (isSelected || mergedEntitiesToDelete.length > 0) {
           state.selectedEntityIdentifier = getEntityIdentifier(entityState);
         }
       },
-      prepare: (payload?: { overrides?: Partial<CanvasInpaintMaskState>; isSelected?: boolean }) => ({
+      prepare: (payload?: {
+        overrides?: Partial<CanvasInpaintMaskState>;
+        isSelected?: boolean;
+        mergedEntitiesToDelete?: string[];
+      }) => ({
         payload: { ...payload, id: getPrefixedId('inpaint_mask') },
       }),
     },