Skip to content

Commit 38acb79

Browse files
psychedeliciouspsychedelicious
committed
wip
1 parent 7826180 commit 38acb79

37 files changed

+1602
-279
lines changed

‎invokeai/frontend/web/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"chakra-react-select": "^4.9.2",
6868
"cmdk": "^1.1.1",
6969
"compare-versions": "^6.1.1",
70+
"dockview": "^4.3.1",
7071
"filesize": "^10.1.6",
7172
"fracturedjsonjs": "^4.0.2",
7273
"framer-motion": "^11.10.0",

‎invokeai/frontend/web/pnpm-lock.yaml

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎invokeai/frontend/web/src/common/components/Loading/Loading.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Loading = () => {
1717
right={0}
1818
bottom={0}
1919
left={0}
20+
zIndex={99999}
2021
>
2122
<Image src={InvokeLogoWhite} w="8rem" h="8rem" />
2223
<Spinner

‎invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx

Lines changed: 115 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
import type { SystemStyleObject } from '@invoke-ai/ui-library';
2-
import { ContextMenu, Divider, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
2+
import {
3+
ContextMenu,
4+
Divider,
5+
Flex,
6+
IconButton,
7+
Menu,
8+
MenuButton,
9+
MenuList,
10+
Tab,
11+
TabList,
12+
TabPanel,
13+
TabPanels,
14+
Tabs,
15+
} from '@invoke-ai/ui-library';
316
import { useAppSelector } from 'app/store/storeHooks';
417
import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
518
import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
@@ -13,12 +26,15 @@ import { CanvasHUD } from 'features/controlLayers/components/HUD/CanvasHUD';
1326
import { InvokeCanvasComponent } from 'features/controlLayers/components/InvokeCanvasComponent';
1427
import { SelectObject } from 'features/controlLayers/components/SelectObject/SelectObject';
1528
import { CanvasSessionContextProvider } from 'features/controlLayers/components/SimpleSession/context';
29+
import { InitialState } from 'features/controlLayers/components/SimpleSession/InitialState';
1630
import { StagingAreaItemsList } from 'features/controlLayers/components/SimpleSession/StagingAreaItemsList';
1731
import { StagingAreaToolbar } from 'features/controlLayers/components/StagingArea/StagingAreaToolbar';
1832
import { CanvasToolbar } from 'features/controlLayers/components/Toolbar/CanvasToolbar';
1933
import { Transform } from 'features/controlLayers/components/Transform/Transform';
2034
import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
2135
import { selectDynamicGrid, selectShowHUD } from 'features/controlLayers/store/canvasSettingsSlice';
36+
import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
37+
import { ViewerToolbar } from 'features/gallery/components/ImageViewer/ViewerToolbar';
2238
import { memo, useCallback } from 'react';
2339
import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
2440

@@ -60,87 +76,107 @@ export const AdvancedSession = memo(({ id }: { id: string | null }) => {
6076
}, []);
6177

6278
return (
63-
<FocusRegionWrapper region="canvas" sx={FOCUS_REGION_STYLES}>
64-
<Flex
65-
tabIndex={-1}
66-
borderRadius="base"
67-
position="relative"
68-
flexDirection="column"
69-
height="full"
70-
width="full"
71-
gap={2}
72-
alignItems="center"
73-
justifyContent="center"
74-
overflow="hidden"
75-
>
76-
<CanvasManagerProviderGate>
77-
<CanvasToolbar />
78-
</CanvasManagerProviderGate>
79-
<Divider />
80-
<ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
81-
{(ref) => (
82-
<Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>
83-
<InvokeCanvasComponent />
79+
<Tabs w="full" h="full">
80+
<TabList>
81+
<Tab>Welcome</Tab>
82+
<Tab>Workspace</Tab>
83+
<Tab>Viewer</Tab>
84+
</TabList>
85+
<TabPanels w="full" h="full">
86+
<TabPanel w="full" h="full" justifyContent="center">
87+
<InitialState />
88+
</TabPanel>
89+
<TabPanel w="full" h="full">
90+
<FocusRegionWrapper region="canvas" sx={FOCUS_REGION_STYLES}>
91+
<Flex
92+
tabIndex={-1}
93+
borderRadius="base"
94+
position="relative"
95+
flexDirection="column"
96+
height="full"
97+
width="full"
98+
gap={2}
99+
alignItems="center"
100+
justifyContent="center"
101+
overflow="hidden"
102+
>
84103
<CanvasManagerProviderGate>
85-
<Flex
86-
position="absolute"
87-
flexDir="column"
88-
top={1}
89-
insetInlineStart={1}
90-
pointerEvents="none"
91-
gap={2}
92-
alignItems="flex-start"
93-
>
94-
{showHUD && <CanvasHUD />}
95-
<CanvasAlertsSelectedEntityStatus />
96-
<CanvasAlertsPreserveMask />
97-
<CanvasAlertsInvocationProgress />
98-
</Flex>
99-
<Flex position="absolute" top={1} insetInlineEnd={1}>
100-
<Menu>
101-
<MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
102-
<MenuContent />
103-
</Menu>
104-
</Flex>
104+
<CanvasToolbar />
105105
</CanvasManagerProviderGate>
106-
</Flex>
107-
)}
108-
</ContextMenu>
109-
{id !== null && (
110-
<CanvasManagerProviderGate>
111-
<CanvasSessionContextProvider type="advanced" id={id}>
112-
<Flex
113-
position="absolute"
114-
flexDir="column"
115-
bottom={4}
116-
gap={2}
117-
align="center"
118-
justify="center"
119-
left={4}
120-
right={4}
121-
>
122-
<Flex position="relative" maxW="full" w="full" h={108}>
123-
<StagingAreaItemsList />
124-
</Flex>
125-
<Flex gap={2}>
126-
<StagingAreaToolbar />
127-
</Flex>
106+
<Divider />
107+
<ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
108+
{(ref) => (
109+
<Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>
110+
<InvokeCanvasComponent />
111+
<CanvasManagerProviderGate>
112+
<Flex
113+
position="absolute"
114+
flexDir="column"
115+
top={1}
116+
insetInlineStart={1}
117+
pointerEvents="none"
118+
gap={2}
119+
alignItems="flex-start"
120+
>
121+
{showHUD && <CanvasHUD />}
122+
<CanvasAlertsSelectedEntityStatus />
123+
<CanvasAlertsPreserveMask />
124+
<CanvasAlertsInvocationProgress />
125+
</Flex>
126+
<Flex position="absolute" top={1} insetInlineEnd={1}>
127+
<Menu>
128+
<MenuButton as={IconButton} icon={<PiDotsThreeOutlineVerticalFill />} colorScheme="base" />
129+
<MenuContent />
130+
</Menu>
131+
</Flex>
132+
</CanvasManagerProviderGate>
133+
</Flex>
134+
)}
135+
</ContextMenu>
136+
{id !== null && (
137+
<CanvasManagerProviderGate>
138+
<CanvasSessionContextProvider type="advanced" id={id}>
139+
<Flex
140+
position="absolute"
141+
flexDir="column"
142+
bottom={4}
143+
gap={2}
144+
align="center"
145+
justify="center"
146+
left={4}
147+
right={4}
148+
>
149+
<Flex position="relative" maxW="full" w="full" h={108}>
150+
<StagingAreaItemsList />
151+
</Flex>
152+
<Flex gap={2}>
153+
<StagingAreaToolbar />
154+
</Flex>
155+
</Flex>
156+
</CanvasSessionContextProvider>
157+
</CanvasManagerProviderGate>
158+
)}
159+
<Flex position="absolute" bottom={4}>
160+
<CanvasManagerProviderGate>
161+
<Filter />
162+
<Transform />
163+
<SelectObject />
164+
</CanvasManagerProviderGate>
128165
</Flex>
129-
</CanvasSessionContextProvider>
130-
</CanvasManagerProviderGate>
131-
)}
132-
<Flex position="absolute" bottom={4}>
133-
<CanvasManagerProviderGate>
134-
<Filter />
135-
<Transform />
136-
<SelectObject />
137-
</CanvasManagerProviderGate>
138-
</Flex>
139-
<CanvasManagerProviderGate>
140-
<CanvasDropArea />
141-
</CanvasManagerProviderGate>
142-
</Flex>
143-
</FocusRegionWrapper>
166+
<CanvasManagerProviderGate>
167+
<CanvasDropArea />
168+
</CanvasManagerProviderGate>
169+
</Flex>
170+
</FocusRegionWrapper>
171+
</TabPanel>
172+
<TabPanel w="full" h="full">
173+
<Flex flexDir="column" w="full" h="full">
174+
<ViewerToolbar />
175+
<ImageViewer />
176+
</Flex>
177+
</TabPanel>
178+
</TabPanels>
179+
</Tabs>
144180
);
145181
});
146182
AdvancedSession.displayName = 'AdvancedSession';

‎invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Alert, Button, Divider, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
1+
import { Alert, Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
22
import { useAppDispatch } from 'app/store/storeHooks';
33
import { InitialStateAddAStyleReference } from 'features/controlLayers/components/SimpleSession/InitialStateAddAStyleReference';
44
import { InitialStateGenerateFromText } from 'features/controlLayers/components/SimpleSession/InitialStateGenerateFromText';
@@ -14,11 +14,7 @@ export const InitialState = memo(() => {
1414

1515
return (
1616
<Flex flexDir="column" h="full" w="full" alignItems="center" justifyContent="center" gap={2}>
17-
<Flex px={2} w="full" alignItems="center" minH="24px" justifyContent="flex-start" flexShrink={0}>
18-
<Heading size="sm">Get Started</Heading>
19-
</Flex>
20-
<Divider />
21-
<Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} mx={16} maxW={768}>
17+
<Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={12} maxW={768}>
2218
<Heading mb={4}>Get started with Invoke.</Heading>
2319
<Flex flexDir="column" gap={8}>
2420
<Grid gridTemplateColumns="1fr 1fr" gap={8}>

‎invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/SimpleSession.tsx

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,45 @@
1-
import { CanvasSessionContextProvider } from 'features/controlLayers/components/SimpleSession/context';
1+
import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
2+
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
23
import { InitialState } from 'features/controlLayers/components/SimpleSession/InitialState';
3-
import { StagingArea } from 'features/controlLayers/components/SimpleSession/StagingArea';
4-
import { memo } from 'react';
4+
import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer2';
5+
import { ProgressImage } from 'features/gallery/components/ImageViewer/ProgressImage2';
6+
import { ViewerToolbar } from 'features/gallery/components/ImageViewer/ViewerToolbar2';
7+
import { selectShowGenerateTabSplashScreen } from 'features/ui/store/uiSelectors';
8+
import { showGenerateTabSplashScreenChanged } from 'features/ui/store/uiSlice';
9+
import { memo, useCallback } from 'react';
10+
11+
export const SimpleSession = memo(() => {
12+
const showGenerateTabSplashScreen = useAppSelector(selectShowGenerateTabSplashScreen);
13+
const dispatch = useAppDispatch();
14+
15+
const showSplashScreen = useCallback(() => {
16+
dispatch(showGenerateTabSplashScreenChanged(true));
17+
}, [dispatch]);
518

6-
export const SimpleSession = memo(({ id }: { id: string | null }) => {
7-
if (id === null) {
8-
return <InitialState />;
9-
}
1019
return (
11-
<CanvasSessionContextProvider type="simple" id={id}>
12-
<StagingArea />
13-
</CanvasSessionContextProvider>
20+
<Tabs w="full" h="full" px={2}>
21+
<TabList>
22+
<Tab>Launchpad</Tab>
23+
<Tab>Viewer</Tab>
24+
<Tab>Generation Progress</Tab>
25+
</TabList>
26+
<TabPanels w="full" h="full">
27+
<TabPanel w="full" h="full" justifyContent="center">
28+
<InitialState />
29+
</TabPanel>
30+
<TabPanel w="full" h="full">
31+
<Flex flexDir="column" w="full" h="full">
32+
<ViewerToolbar />
33+
<ImageViewer />
34+
</Flex>
35+
</TabPanel>
36+
<TabPanel w="full" h="full">
37+
<Flex flexDir="column" w="full" h="full" overflow="hidden" p={2}>
38+
<ProgressImage />
39+
</Flex>
40+
</TabPanel>
41+
</TabPanels>
42+
</Tabs>
1443
);
1544
});
1645
SimpleSession.displayName = 'SimpleSession';

‎invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/SimpleSessionNoId.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Divider, Flex } from '@invoke-ai/ui-library';
2+
import { StagingAreaHeader } from 'features/controlLayers/components/SimpleSession/StagingAreaHeader';
3+
import { StagingAreaNoItems } from 'features/controlLayers/components/SimpleSession/StagingAreaNoItems';
4+
import { memo } from 'react';
5+
6+
export const SimpleSessionNoId = memo(() => {
7+
return (
8+
<Flex flexDir="column" gap={2} w="full" h="full" minW={0} minH={0}>
9+
<StagingAreaHeader />
10+
<Divider />
11+
<StagingAreaNoItems />
12+
</Flex>
13+
);
14+
});
15+
SimpleSessionNoId.displayName = 'StSimpleSessionNoIdagingArea';

‎invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { IconButton, Input, InputGroup, InputRightElement } from '@invoke-ai/ui-library';
22
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
3+
import { buildUseDisclosure } from 'common/hooks/useBoolean';
34
import { selectBoardSearchText } from 'features/gallery/store/gallerySelectors';
45
import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
56
import type { ChangeEvent, KeyboardEvent } from 'react';
67
import { memo, useCallback } from 'react';
78
import { useTranslation } from 'react-i18next';
89
import { PiXBold } from 'react-icons/pi';
910

11+
export const [useBoardSearchDisclosure, $boardSearchIsOpen] = buildUseDisclosure(false);
12+
1013
export const BoardsSearch = memo(() => {
1114
const dispatch = useAppDispatch();
1215
const boardSearchText = useAppSelector(selectBoardSearchText);

0 commit comments

Comments
 (0)