feat(ui): add reset button to canvas

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(() => {
           <FillColorPicker />
           <UndoRedoButtonGroup />
           <ControlLayersSettingsPopover />
+          <ResetCanvasButton />
           <ViewerToggleMenu />
         </Flex>
       </Flex>

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 <IconButton onClick={onClick} icon={<PiTrashBold />} aria-label="Reset canvas" colorScheme="error" />;
+});
+
+ResetCanvasButton.displayName = 'ResetCanvasButton';

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,