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,