github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-02 22:55:24 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): move canvas reset button out of settings

Browse Source
This commit is contained in:
psychedelicious
2024-09-14 10:26:33 +10:00
parent dd0f75a67c
commit 39867d11a3
3 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,6 @@ import { CanvasSettingsSnapToGridCheckbox } from 'features/controlLayers/compone
import { CanvasSettingsInvertScrollCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsInvertScrollCheckbox';
import { CanvasSettingsLogDebugInfoButton } from 'features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo';
import { CanvasSettingsRecalculateRectsButton } from 'features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton';
import { CanvasSettingsResetButton } from 'features/controlLayers/components/Settings/CanvasSettingsResetButton';
import { CanvasSettingsShowHUDSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch';
import { CanvasSettingsShowProgressOnCanvas } from 'features/controlLayers/components/Settings/CanvasSettingsShowProgressOnCanvasSwitch';
import { memo } from 'react';
@@ -45,7 +44,6 @@ export const CanvasSettingsPopover = memo(() => {
<CanvasSettingsShowProgressOnCanvas />
<CanvasSettingsDynamicGridSwitch />
<CanvasSettingsShowHUDSwitch />
<CanvasSettingsResetButton />
<DebugSettings />
</Flex>
</PopoverBody>

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

@@ -5,6 +5,7 @@ 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 { 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';
@@ -34,6 +35,7 @@ export const CanvasToolbar = memo(() => {
<ToolColorPicker />
<CanvasToolbarFitBboxToLayersButton />
<CanvasToolbarSaveToGalleryButton />
<CanvasToolbarResetCanvasButton />
<CanvasSettingsPopover />
</Flex>
);

18
invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsResetButton.tsx → invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx
View File

@@ -1,11 +1,12 @@
import { Button } from '@invoke-ai/ui-library';
import { IconButton } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { canvasReset } from 'features/controlLayers/store/canvasSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PiTrashBold } from 'react-icons/pi';
export const CanvasSettingsResetButton = memo(() => {
export const CanvasToolbarResetCanvasButton = memo(() => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const canvasManager = useCanvasManager();
@@ -14,10 +15,15 @@ export const CanvasSettingsResetButton = memo(() => {
canvasManager.stage.fitLayersToStage();
}, [canvasManager.stage, dispatch]);
return (
<Button onClick={onClick} colorScheme="error" size="sm">
{t('controlLayers.resetCanvas')}
</Button>
<IconButton
aria-label={t('controlLayers.resetCanvas')}
tooltip={t('controlLayers.resetCanvas')}
onClick={onClick}
colorScheme="error"
icon={<PiTrashBold />}
variant="ghost"
/>
);
});
CanvasSettingsResetButton.displayName = 'CanvasSettingsResetButton';
CanvasToolbarResetCanvasButton.displayName = 'CanvasToolbarResetCanvasButton';