diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
index 9313a312ae..8554c63b2b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
@@ -5,6 +5,7 @@ import { BrushWidth } from 'features/controlLayers/components/BrushWidth';
import ControlLayersSettingsPopover from 'features/controlLayers/components/ControlLayersSettingsPopover';
import { EraserWidth } from 'features/controlLayers/components/EraserWidth';
import { FillColorPicker } from 'features/controlLayers/components/FillColorPicker';
+import { ResetCanvasButton } from 'features/controlLayers/components/ResetCanvasButton';
import { ToolChooser } from 'features/controlLayers/components/ToolChooser';
import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup';
import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
@@ -30,6 +31,7 @@ export const ControlLayersToolbar = memo(() => {
+
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ResetCanvasButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ResetCanvasButton.tsx
new file mode 100644
index 0000000000..f0880b6e02
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ResetCanvasButton.tsx
@@ -0,0 +1,15 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { canvasReset } from 'features/controlLayers/store/canvasV2Slice';
+import { memo, useCallback } from 'react';
+import { PiTrashBold } from 'react-icons/pi';
+
+export const ResetCanvasButton = memo(() => {
+ const dispatch = useAppDispatch();
+ const onClick = useCallback(() => {
+ dispatch(canvasReset());
+ }, [dispatch]);
+ return } aria-label="Reset canvas" colorScheme="error" />;
+});
+
+ResetCanvasButton.displayName = 'ResetCanvasButton';
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts
index bf7f6929b4..be800e82d8 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts
@@ -176,6 +176,17 @@ export const canvasV2Slice = createSlice({
state.ipAdapters.entities = [];
state.controlAdapters.entities = [];
},
+ canvasReset: (state) => {
+ state.bbox = deepClone(initialState.bbox);
+ state.controlAdapters = deepClone(initialState.controlAdapters);
+ state.document = deepClone(initialState.document);
+ state.ipAdapters = deepClone(initialState.ipAdapters);
+ state.layers = deepClone(initialState.layers);
+ state.regions = deepClone(initialState.regions);
+ state.selectedEntityIdentifier = deepClone(initialState.selectedEntityIdentifier);
+ state.stagingArea = deepClone(initialState.stagingArea);
+ state.tool = deepClone(initialState.tool);
+ },
},
});
@@ -196,6 +207,7 @@ export const {
scaledBboxChanged,
bboxScaleMethodChanged,
clipToBboxChanged,
+ canvasReset,
// layers
layerAdded,
layerRecalled,