Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add reset button to canvas

Browse Source
This commit is contained in:
psychedelicious 2024-07-08 11:49:15 +10:00
parent 08dae5b047
commit 65de8b329b
3 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
View File

@ -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>

15
invokeai/frontend/web/src/features/controlLayers/components/ResetCanvasButton.tsx Normal file
View File

@ -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';

12
invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts
View File

@ -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,