diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx index 53535b4248..f97a0f35e5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx @@ -4,9 +4,9 @@ import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { $tool, + layerReset, selectControlLayersSlice, selectedLayerDeleted, - selectedLayerReset, } from 'features/controlLayers/store/controlLayersSlice'; import { useCallback } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; @@ -22,6 +22,7 @@ export const ToolChooser: React.FC = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const isDisabled = useAppSelector(selectIsDisabled); + const selectedLayerId = useAppSelector((s) => s.controlLayers.present.selectedLayerId); const tool = useStore($tool); const setToolToBrush = useCallback(() => { @@ -42,8 +43,11 @@ export const ToolChooser: React.FC = () => { useHotkeys('v', setToolToMove, { enabled: !isDisabled }, [isDisabled]); const resetSelectedLayer = useCallback(() => { - dispatch(selectedLayerReset()); - }, [dispatch]); + if (selectedLayerId === null) { + return; + } + dispatch(layerReset(selectedLayerId)); + }, [dispatch, selectedLayerId]); useHotkeys('shift+c', resetSelectedLayer); const deleteSelectedLayer = useCallback(() => { diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts index 8adbae6d80..f6a6f0b38d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts @@ -79,17 +79,6 @@ export const isRenderableLayer = ( layer?.type === 'regional_guidance_layer' || layer?.type === 'control_adapter_layer' || layer?.type === 'initial_image_layer'; -const resetLayer = (layer: Layer) => { - if (layer.type === 'regional_guidance_layer') { - layer.maskObjects = []; - layer.bbox = null; - layer.isEnabled = true; - layer.needsPixelBbox = false; - layer.bboxNeedsUpdate = false; - layer.uploadedMaskImage = null; - return; - } -}; export const selectCALayerOrThrow = (state: ControlLayersState, layerId: string): ControlAdapterLayer => { const layer = state.layers.find((l) => l.id === layerId); @@ -184,8 +173,14 @@ export const controlLayersSlice = createSlice({ }, layerReset: (state, action: PayloadAction) => { const layer = state.layers.find((l) => l.id === action.payload); - if (layer) { - resetLayer(layer); + // TODO(psyche): Should other layer types also have reset functionality? + if (isRegionalGuidanceLayer(layer)) { + layer.maskObjects = []; + layer.bbox = null; + layer.isEnabled = true; + layer.needsPixelBbox = false; + layer.bboxNeedsUpdate = false; + layer.uploadedMaskImage = null; } }, layerDeleted: (state, action: PayloadAction) => { @@ -218,12 +213,6 @@ export const controlLayersSlice = createSlice({ moveToFront(renderableLayers, cb); state.layers = [...ipAdapterLayers, ...renderableLayers]; }, - selectedLayerReset: (state) => { - const layer = state.layers.find((l) => l.id === state.selectedLayerId); - if (layer) { - resetLayer(layer); - } - }, selectedLayerDeleted: (state) => { state.layers = state.layers.filter((l) => l.id !== state.selectedLayerId); state.selectedLayerId = state.layers[0]?.id ?? null; @@ -806,7 +795,6 @@ export const { layerMovedToFront, layerMovedBackward, layerMovedToBack, - selectedLayerReset, selectedLayerDeleted, allLayersDeleted, // CA Layers