github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add dedicated undo/redo buttons to canvas toolbar

Browse Source
This commit is contained in:
psychedelicious
2024-09-19 12:40:23 +10:00
parent e265326d4c
commit 7bb2879da9
3 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx
View File

@@ -5,10 +5,12 @@ import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser'
import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
import { CanvasToolbarRedoButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarRedoButton';
import { CanvasToolbarResetCanvasButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton';
import { CanvasToolbarResetViewButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton';
import { CanvasToolbarSaveToGalleryButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton';
import { CanvasToolbarScale } from 'features/controlLayers/components/Toolbar/CanvasToolbarScale';
import { CanvasToolbarUndoButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarUndoButton';
import { useCanvasDeleteLayerHotkey } from 'features/controlLayers/hooks/useCanvasDeleteLayerHotkey';
import { useCanvasEntityQuickSwitchHotkey } from 'features/controlLayers/hooks/useCanvasEntityQuickSwitchHotkey';
import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey';
@@ -35,6 +37,8 @@ export const CanvasToolbar = memo(() => {
<CanvasToolbarResetViewButton />
<CanvasToolbarFitBboxToLayersButton />
<CanvasToolbarSaveToGalleryButton />
<CanvasToolbarUndoButton />
<CanvasToolbarRedoButton />
<CanvasToolbarResetCanvasButton />
<CanvasSettingsPopover />
</Flex>

32
invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarRedoButton.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
import { canvasRedo } from 'features/controlLayers/store/canvasSlice';
import { selectCanvasMayRedo } from 'features/controlLayers/store/selectors';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowClockwiseBold } from 'react-icons/pi';
export const CanvasToolbarRedoButton = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const isBusy = useCanvasIsBusy();
const mayRedo = useAppSelector(selectCanvasMayRedo);
const onClick = useCallback(() => {
dispatch(canvasRedo());
}, [dispatch]);
return (
<IconButton
aria-label={t('hotkeys.canvas.redo.title')}
tooltip={t('hotkeys.canvas.redo.title')}
onClick={onClick}
icon={<PiArrowClockwiseBold />}
variant="link"
alignSelf="stretch"
isDisabled={isBusy || !mayRedo}
/>
);
});
CanvasToolbarRedoButton.displayName = 'CanvasToolbarRedoButton';

32
invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarUndoButton.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
import { canvasUndo } from 'features/controlLayers/store/canvasSlice';
import { selectCanvasMayUndo } from 'features/controlLayers/store/selectors';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
export const CanvasToolbarUndoButton = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const isBusy = useCanvasIsBusy();
const mayUndo = useAppSelector(selectCanvasMayUndo);
const onClick = useCallback(() => {
dispatch(canvasUndo());
}, [dispatch]);
return (
<IconButton
aria-label={t('hotkeys.canvas.undo.title')}
tooltip={t('hotkeys.canvas.undo.title')}
onClick={onClick}
icon={<PiArrowCounterClockwiseBold />}
variant="link"
alignSelf="stretch"
isDisabled={isBusy || !mayUndo}
/>
);
});
CanvasToolbarUndoButton.displayName = 'CanvasToolbarUndoButton';