diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImage.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImage.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/invokeai/frontend/web/src/features/controlLayers/store/refImagesSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/refImagesSlice.ts index fadb2c41c1..37af3f57ce 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/refImagesSlice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/refImagesSlice.ts @@ -6,7 +6,7 @@ import { getPrefixedId } from 'features/controlLayers/konva/util'; import { canvasMetadataRecalled } from 'features/controlLayers/store/canvasSlice'; import type { FLUXReduxImageInfluence, RefImagesState } from 'features/controlLayers/store/types'; import { zModelIdentifierField } from 'features/nodes/types/common'; -import { isEqual } from 'lodash-es'; +import { clamp, isEqual } from 'lodash-es'; import type { ApiModelConfig, FLUXReduxModelConfig, ImageDTO, IPAdapterModelConfig } from 'services/api/types'; import { assert } from 'tsafe'; import type { PartialDeep } from 'type-fest'; @@ -188,10 +188,11 @@ export const refImagesSlice = createSlice({ }, refImageDeleted: (state, action: PayloadActionWithId) => { const { id } = action.payload; + const currentIndex = state.entities.findIndex((rg) => rg.id === id); state.entities = state.entities.filter((rg) => rg.id !== id); - if (state.selectedEntityId === id) { - state.selectedEntityId = null; - } + const nextIndex = clamp(currentIndex, 0, state.entities.length - 1); + const nextEntity = state.entities[nextIndex]; + state.selectedEntityId = nextEntity?.id ?? null; }, refImageSelected: (state, action: PayloadAction<{ id: string }>) => { const { id } = action.payload; @@ -238,7 +239,7 @@ export const refImagesPersistConfig: PersistConfig = { name: refImagesSlice.name, initialState: getInitialRefImagesState(), migrate, - persistDenylist: ['isPanelOpen'], + persistDenylist: ['selectedEntityId', 'isPanelOpen'], }; export const selectRefImagesSlice = (state: RootState) => state.refImages;