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

Styles buttons for clearing canvas history and mask

Browse Source
This commit is contained in:
psychedelicious 2022-11-20 19:38:43 +11:00 committed by blessedcoolant
parent 3f6b275bec
commit 7dff8ccd31
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
View File

@ -10,7 +10,7 @@ import {
import { useAppDispatch, useAppSelector } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/store';
import _ from 'lodash'; import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { FaMask } from 'react-icons/fa'; import { FaMask, FaTrash } from 'react-icons/fa';
import IAIPopover from 'common/components/IAIPopover'; import IAIPopover from 'common/components/IAIPopover';
import IAICheckbox from 'common/components/IAICheckbox'; import IAICheckbox from 'common/components/IAICheckbox';
import IAIColorPicker from 'common/components/IAIColorPicker'; import IAIColorPicker from 'common/components/IAIColorPicker';
@ -141,8 +141,12 @@ const IAICanvasMaskOptions = () => {
color={maskColor} color={maskColor}
onChange={(newColor) => dispatch(setMaskColor(newColor))} onChange={(newColor) => dispatch(setMaskColor(newColor))}
/> />
<IAIButton onClick={handleClearMask} tooltip={'Clear Mask (Shift+C)'}> <IAIButton
Clear Mask size={'sm'}
leftIcon={<FaTrash />}
onClick={handleClearMask}
>
Clear Mask (Shift+C)
</IAIButton> </IAIButton>
</Flex> </Flex>
</IAIPopover> </IAIPopover>

11
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
View File

@ -1,6 +1,7 @@
import { Flex } from '@chakra-ui/react'; import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { import {
clearCanvasHistory,
setShouldAutoSave, setShouldAutoSave,
setShouldDarkenOutsideBoundingBox, setShouldDarkenOutsideBoundingBox,
setShouldShowCanvasDebugInfo, setShouldShowCanvasDebugInfo,
@ -11,10 +12,11 @@ import {
import { useAppDispatch, useAppSelector } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/store';
import _ from 'lodash'; import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { FaWrench } from 'react-icons/fa'; import { FaTrash, FaWrench } from 'react-icons/fa';
import IAIPopover from 'common/components/IAIPopover'; import IAIPopover from 'common/components/IAIPopover';
import IAICheckbox from 'common/components/IAICheckbox'; import IAICheckbox from 'common/components/IAICheckbox';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import IAIButton from 'common/components/IAIButton';
export const canvasControlsSelector = createSelector( export const canvasControlsSelector = createSelector(
[canvasSelector], [canvasSelector],
@ -103,6 +105,13 @@ const IAICanvasSettingsButtonPopover = () => {
dispatch(setShouldShowCanvasDebugInfo(e.target.checked)) dispatch(setShouldShowCanvasDebugInfo(e.target.checked))
} }
/> />
<IAIButton
size={'sm'}
leftIcon={<FaTrash />}
onClick={() => dispatch(clearCanvasHistory())}
>
Clear Canvas History
</IAIButton>
</Flex> </Flex>
</IAIPopover> </IAIPopover>
); );

4
frontend/src/features/canvas/store/canvasSlice.ts
View File

@ -264,7 +264,7 @@ export const canvasSlice = createSlice({
setIsDrawing: (state, action: PayloadAction<boolean>) => { setIsDrawing: (state, action: PayloadAction<boolean>) => {
state.isDrawing = action.payload; state.isDrawing = action.payload;
}, },
setClearBrushHistory: (state) => { clearCanvasHistory: (state) => {
state.pastLayerStates = []; state.pastLayerStates = [];
state.futureLayerStates = []; state.futureLayerStates = [];
}, },
@ -712,7 +712,7 @@ export const {
setBrushColor, setBrushColor,
setBrushSize, setBrushSize,
setCanvasContainerDimensions, setCanvasContainerDimensions,
setClearBrushHistory, clearCanvasHistory,
setCursorPosition, setCursorPosition,
setDoesCanvasNeedScaling, setDoesCanvasNeedScaling,
setInitialCanvasImage, setInitialCanvasImage,