Styles buttons for clearing canvas history and mask

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

View File

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

View File

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

View File

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