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 startover button to canvas toolbar

Browse Source
This commit is contained in:
psychedelicious
2025-06-06 20:16:56 +10:00
parent d9bb65d9bd
commit 8f4ba3d91f
3 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx
View File

@@ -1,20 +1,14 @@
/* eslint-disable i18next/no-literal-string */
import { Button, Divider, Flex, FormControl, FormLabel, Spacer, Switch, Text } from '@invoke-ai/ui-library';
import { Divider, Flex, FormControl, FormLabel, Spacer, Switch, Text } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useAppDispatch } from 'app/store/storeHooks';
import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
import { canvasSessionTypeChanged } from 'features/controlLayers/store/canvasStagingAreaSlice';
import { StartOverButton } from 'features/controlLayers/components/StartOverButton';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
export const StagingAreaHeader = memo(() => {
const ctx = useCanvasSessionContext();
const autoSwitch = useStore(ctx.$autoSwitch);
const dispatch = useAppDispatch();
const startOver = useCallback(() => {
dispatch(canvasSessionTypeChanged({ type: 'simple' }));
}, [dispatch]);
const onChangeAutoSwitch = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
@@ -24,19 +18,17 @@ export const StagingAreaHeader = memo(() => {
);
return (
<Flex gap={4} w="full" alignItems="center" px={2}>
<Flex gap={2} w="full" alignItems="center" px={2}>
<Text fontSize="lg" fontWeight="bold">
Staging Area
</Text>
<Spacer />
<FormControl w="min-content">
<FormControl w="min-content" me={2}>
<FormLabel m={0}>Auto-switch</FormLabel>
<Switch size="sm" isChecked={autoSwitch} onChange={onChangeAutoSwitch} />
</FormControl>
<Divider orientation="vertical" />
<Button size="sm" variant="link" onClick={startOver}>
Start Over
</Button>
<StartOverButton />
</Flex>
);
});

20
invokeai/frontend/web/src/features/controlLayers/components/StartOverButton.tsx Normal file
View File

@@ -0,0 +1,20 @@
/* eslint-disable i18next/no-literal-string */
import { Button } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { canvasSessionTypeChanged } from 'features/controlLayers/store/canvasStagingAreaSlice';
import { memo, useCallback } from 'react';
export const StartOverButton = memo(() => {
const dispatch = useAppDispatch();
const startOver = useCallback(() => {
dispatch(canvasSessionTypeChanged({ type: 'simple' }));
}, [dispatch]);
return (
<Button size="sm" variant="link" alignSelf="stretch" onClick={startOver} px={2}>
Start Over
</Button>
);
});
StartOverButton.displayName = 'StartOverButton';

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

@@ -1,6 +1,7 @@
/* eslint-disable i18next/no-literal-string */
import { Divider, Flex, Spacer } from '@invoke-ai/ui-library';
import { CanvasSettingsPopover } from 'features/controlLayers/components/Settings/CanvasSettingsPopover';
import { StartOverButton } from 'features/controlLayers/components/StartOverButton';
import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
@@ -29,7 +30,7 @@ export const CanvasToolbar = memo(() => {
useCanvasFilterHotkey();
return (
<Flex w="full" gap={2} alignItems="center">
<Flex w="full" gap={2} alignItems="center" pe={2}>
<ToolColorPicker />
<ToolSettings />
<Spacer />
@@ -46,6 +47,8 @@ export const CanvasToolbar = memo(() => {
<CanvasToolbarNewSessionMenuButton />
<CanvasSettingsPopover />
</Flex>
<Divider orientation="vertical" />
<StartOverButton />
</Flex>
);
});