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): move canvas undo/redo to hook

Browse Source
This commit is contained in:
psychedelicious 2024-08-29 08:33:03 +10:00
parent 22203b8eb0
commit 38ed720ff2
2 changed files with 8 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,13 +7,15 @@ import { CanvasSettingsPopover } from 'features/controlLayers/components/Setting
import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser'; import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser';
import { ToolFillColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker'; import { ToolFillColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings'; import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup';
import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { useCanvasUndoRedo } from 'features/controlLayers/hooks/useCanvasUndoRedo';
import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton'; import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
import { ViewerToggleMenu } from 'features/gallery/components/ImageViewer/ViewerToggleMenu'; import { ViewerToggleMenu } from 'features/gallery/components/ImageViewer/ViewerToggleMenu';
import { memo } from 'react'; import { memo } from 'react';
export const ControlLayersToolbar = memo(() => { export const ControlLayersToolbar = memo(() => {
useCanvasUndoRedo();
return ( return (
<CanvasManagerProviderGate> <CanvasManagerProviderGate>
<Flex w="full" gap={2} alignItems="center"> <Flex w="full" gap={2} alignItems="center">
@ -27,7 +29,6 @@ export const ControlLayersToolbar = memo(() => {
<Spacer /> <Spacer />
<ToolFillColorPicker /> <ToolFillColorPicker />
<CanvasModeSwitcher /> <CanvasModeSwitcher />
<UndoRedoButtonGroup />
<CanvasSettingsPopover /> <CanvasSettingsPopover />
<ViewerToggleMenu /> <ViewerToggleMenu />
</Flex> </Flex>

35
invokeai/frontend/web/src/features/controlLayers/components/UndoRedoButtonGroup.tsx → invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasUndoRedo.tsx
View File

@ -1,16 +1,14 @@
/* eslint-disable i18next/no-literal-string */ /* eslint-disable i18next/no-literal-string */
import { ButtonGroup, IconButton } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
import { canvasRedo, canvasUndo } from 'features/controlLayers/store/canvasSlice'; import { canvasRedo, canvasUndo } from 'features/controlLayers/store/canvasSlice';
import { selectCanvasMayRedo, selectCanvasMayUndo } from 'features/controlLayers/store/selectors'; import { selectCanvasMayRedo, selectCanvasMayUndo } from 'features/controlLayers/store/selectors';
import { memo, useCallback } from 'react'; import { useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { PiArrowClockwiseBold, PiArrowCounterClockwiseBold } from 'react-icons/pi';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
export const UndoRedoButtonGroup = memo(() => { export const useCanvasUndoRedo = () => {
const { t } = useTranslation(); useAssertSingleton('useCanvasUndoRedo');
const dispatch = useDispatch(); const dispatch = useDispatch();
const mayUndo = useAppSelector(selectCanvasMayUndo); const mayUndo = useAppSelector(selectCanvasMayUndo);
@ -27,27 +25,4 @@ export const UndoRedoButtonGroup = memo(() => {
mayRedo, mayRedo,
handleRedo, handleRedo,
]); ]);
};
return (
<ButtonGroup isAttached={false}>
<IconButton
aria-label={t('unifiedCanvas.undo')}
tooltip={t('unifiedCanvas.undo')}
onClick={handleUndo}
icon={<PiArrowCounterClockwiseBold />}
isDisabled={!mayUndo}
variant="ghost"
/>
<IconButton
aria-label={t('unifiedCanvas.redo')}
tooltip={t('unifiedCanvas.redo')}
onClick={handleRedo}
icon={<PiArrowClockwiseBold />}
isDisabled={!mayRedo}
variant="ghost"
/>
</ButtonGroup>
);
});
UndoRedoButtonGroup.displayName = 'UndoRedoButtonGroup';