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

refactor(ui): canvas flow (wip)

Browse Source
This commit is contained in:
psychedelicious
2025-05-29 16:36:36 +10:00
parent d985dfe821
commit faeb5f0c3b
21 changed files with 658 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/src/features/ui/components/AppContent.tsx
View File

@@ -1,7 +1,7 @@
import { Box, Flex } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { CanvasMainPanelContent } from 'features/controlLayers/components/CanvasMainPanelContent';
import { CanvasRightPanel } from 'features/controlLayers/components/CanvasRightPanel';
import { selectCanvasSessionType } from 'features/controlLayers/store/canvasStagingAreaSlice';
import { useDndMonitor } from 'features/dnd/useDndMonitor';
import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
@@ -161,11 +161,9 @@ AppContent.displayName = 'AppContent';
const RightPanelContent = memo(() => {
const tab = useAppSelector(selectActiveTab);
const sessionType = useAppSelector(selectCanvasSessionType);
if (tab === 'canvas') {
return <CanvasRightPanel />;
}
if (tab === 'upscaling' || tab === 'workflows') {
if (tab === 'upscaling' || tab === 'workflows' || tab === 'canvas') {
return <GalleryPanelContent />;
}

4
invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
View File

@@ -2,6 +2,7 @@ import { ButtonGroup, Flex, Icon, IconButton, spinAnimation, Tooltip, useShiftMo
import { useAppSelector } from 'app/store/storeHooks';
import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser';
import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import { selectCanvasSessionType } from 'features/controlLayers/store/canvasStagingAreaSlice';
import { useCancelAllExceptCurrentQueueItemDialog } from 'features/queue/components/CancelAllExceptCurrentQueueItemConfirmationAlertDialog';
import { useClearQueueDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
import { InvokeButtonTooltip } from 'features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip';
@@ -30,10 +31,11 @@ const FloatingSidePanelButtons = ({ togglePanel }: Props) => {
const { t } = useTranslation();
const tab = useAppSelector(selectActiveTab);
const isCancelAndClearAllEnabled = useFeatureStatus('cancelAndClearAll');
const sessionType = useAppSelector(selectCanvasSessionType);
return (
<Flex pos="absolute" transform="translate(0, -50%)" top="50%" insetInlineStart={2} direction="column" gap={2}>
{tab === 'canvas' && (
{tab === 'canvas' && sessionType === 'advanced' && (
<CanvasManagerProviderGate>
<ToolChooser />
</CanvasManagerProviderGate>