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): wip layouting

Browse Source
This commit is contained in:
psychedelicious 2023-05-08 00:55:31 +10:00
parent 3dc60254b9
commit 5365f42a04
25 changed files with 687 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/package.json
View File

@ -89,6 +89,7 @@
"react-konva": "^18.2.7",
"react-konva-utils": "^1.0.4",
"react-redux": "^8.0.5",
"react-resizable-panels": "^0.0.42",
"react-rnd": "^10.4.1",
"react-transition-group": "^4.4.5",
"react-use": "^17.4.0",

9
invokeai/frontend/web/src/app/components/App.tsx
View File

@ -1,6 +1,6 @@
import ImageUploader from 'common/components/ImageUploader';
import ProgressBar from 'features/system/components/ProgressBar';
import SiteHeader from 'features/system/components/SiteHeader';
import ProgressBar from 'features/system/components/ProgressBar';
import InvokeTabs from 'features/ui/components/InvokeTabs';
import useToastWatcher from 'features/system/hooks/useToastWatcher';
@ -28,6 +28,9 @@ import { configChanged } from 'features/system/store/configSlice';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { useLogger } from 'app/logging/useLogger';
import ProgressImagePreview from 'features/parameters/components/ProgressImagePreview';
import ResizableDrawer from 'features/ui/components/common/ResizableDrawer/ResizableDrawer';
import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
import CreateParametersDrawer from 'features/ui/components/CreateParametersDrawer';
const DEFAULT_CONFIG = {};
@ -84,11 +87,13 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
flexDir={{ base: 'column', xl: 'row' }}
>
<InvokeTabs />
<ImageGalleryPanel />
</Flex>
</Grid>
</ImageUploader>
<ImageGalleryPanel />
<CreateParametersDrawer />
<AnimatePresence>
{!isApplicationReady && !loadingOverridden && (
<motion.div

22
invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts
View File

@ -2,6 +2,12 @@ import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
import {
toggleGalleryPanel,
toggleParametersPanel,
togglePinGalleryPanel,
togglePinParametersPanel,
} from 'features/ui/store/uiSlice';
import { isEqual } from 'lodash-es';
import { isHotkeyPressed, useHotkeys } from 'react-hotkeys-hook';
@ -36,4 +42,20 @@ export const useGlobalHotkeys = () => {
{ keyup: true, keydown: true },
[shift]
);
useHotkeys('o', () => {
dispatch(toggleParametersPanel());
});
useHotkeys(['shift+o'], () => {
dispatch(togglePinParametersPanel());
});
useHotkeys('g', () => {
dispatch(toggleGalleryPanel());
});
useHotkeys(['shift+g'], () => {
dispatch(togglePinGalleryPanel());
});
};

136
invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
View File

@ -73,7 +73,7 @@ const galleryPanelSelector = createSelector(
}
);
export const ImageGalleryPanel = () => {
const ImageGalleryPanel = () => {
const dispatch = useAppDispatch();
const {
shouldPinGallery,
@ -102,21 +102,21 @@ export const ImageGalleryPanel = () => {
const resolution = useResolution();
useHotkeys(
'g',
() => {
handleToggleGallery();
},
[shouldPinGallery]
);
// useHotkeys(
// 'g',
// () => {
// handleToggleGallery();
// },
// [shouldPinGallery]
// );
useHotkeys(
'shift+g',
() => {
handleSetShouldPinGallery();
},
[shouldPinGallery]
);
// useHotkeys(
// 'shift+g',
// () => {
// handleSetShouldPinGallery();
// },
// [shouldPinGallery]
// );
useHotkeys(
'esc',
@ -162,55 +162,71 @@ export const ImageGalleryPanel = () => {
[galleryImageMinimumWidth]
);
const calcGalleryMinHeight = () => {
if (resolution === 'desktop') return;
return 300;
};
// const calcGalleryMinHeight = () => {
// if (resolution === 'desktop') return;
// return 300;
// };
const imageGalleryContent = () => {
return (
<Flex
w="100vw"
h={{ base: 300, xl: '100vh' }}
paddingRight={{ base: 8, xl: 0 }}
paddingBottom={{ base: 4, xl: 0 }}
>
<ImageGalleryContent />
</Flex>
);
};
// const imageGalleryContent = () => {
// return (
// <Flex
// w="100vw"
// h={{ base: 300, xl: '100vh' }}
// paddingRight={{ base: 8, xl: 0 }}
// paddingBottom={{ base: 4, xl: 0 }}
// >
// <ImageGalleryContent />
// </Flex>
// );
// };
const resizableImageGalleryContent = () => {
return (
<ResizableDrawer
direction="right"
isResizable={isResizable || !shouldPinGallery}
isOpen={shouldShowGallery}
onClose={handleCloseGallery}
isPinned={shouldPinGallery && !isLightboxOpen}
minWidth={
shouldPinGallery
? GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
: 200
}
maxWidth={
shouldPinGallery
? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
: undefined
}
minHeight={calcGalleryMinHeight()}
>
<ImageGalleryContent />
</ResizableDrawer>
);
};
// const resizableImageGalleryContent = () => {
// return (
// <ResizableDrawer
// direction="right"
// isResizable={isResizable || !shouldPinGallery}
// isOpen={shouldShowGallery}
// onClose={handleCloseGallery}
// isPinned={shouldPinGallery && !isLightboxOpen}
// minWidth={
// shouldPinGallery
// ? GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
// : 200
// }
// maxWidth={
// shouldPinGallery
// ? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
// : undefined
// }
// minHeight={calcGalleryMinHeight()}
// >
// <ImageGalleryContent />
// </ResizableDrawer>
// );
// };
const renderImageGallery = () => {
if (['mobile', 'tablet'].includes(resolution)) return imageGalleryContent();
return resizableImageGalleryContent();
};
// const renderImageGallery = () => {
// if (['mobile', 'tablet'].includes(resolution)) return imageGalleryContent();
// return resizableImageGalleryContent();
// };
return renderImageGallery();
if (shouldPinGallery) {
return null;
}
return (
<ResizableDrawer
direction="right"
isResizable={true}
isOpen={shouldShowGallery}
onClose={handleCloseGallery}
minWidth={200}
>
<ImageGalleryContent />
</ResizableDrawer>
);
// return renderImageGallery();
};
export default memo(ImageGalleryPanel);

1
invokeai/frontend/web/src/features/nodes/components/InputFieldComponent.tsx
View File

@ -10,7 +10,6 @@ import ConditioningInputFieldComponent from './fields/ConditioningInputFieldComp
import ModelInputFieldComponent from './fields/ModelInputFieldComponent';
import NumberInputFieldComponent from './fields/NumberInputFieldComponent';
import StringInputFieldComponent from './fields/StringInputFieldComponent';
import ItemInputFieldComponent from './fields/ItemInputFieldComponent';
import ColorInputFieldComponent from './fields/ColorInputFieldComponent';
import ItemInputFieldComponent from './fields/ItemInputFieldComponent';

2
invokeai/frontend/web/src/features/parameters/components/AnimatedImageToImagePanel.tsx
View File

@ -20,7 +20,7 @@ const AnimatedImageToImagePanel = () => {
exit={{ opacity: 0, scale: 0, width: 0 }}
transition={{ type: 'spring', bounce: 0, duration: 0.35 }}
>
<Box sx={{ h: 'full', w: 'full', pl: 4 }}>
<Box sx={{ h: 'full', w: 'full' }}>
<ImageToImageSettings />
</Box>
</motion.div>

64
invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx
View File

@ -11,7 +11,7 @@ import {
CancelStrategy,
} from 'features/system/store/systemSlice';
import { isEqual } from 'lodash-es';
import { useCallback, memo } from 'react';
import { useCallback, memo, useMemo } from 'react';
import {
ButtonSpinner,
ButtonGroup,
@ -102,39 +102,39 @@ const CancelButton = (
[isConnected, isProcessing, isCancelable]
);
const cancelLabel = useMemo(() => {
if (isCancelScheduled) {
return t('parameters.cancel.isScheduled');
}
if (cancelType === 'immediate') {
return t('parameters.cancel.immediate');
}
return t('parameters.cancel.schedule');
}, [t, cancelType, isCancelScheduled]);
const cancelIcon = useMemo(() => {
if (isCancelScheduled) {
return <ButtonSpinner />;
}
if (cancelType === 'immediate') {
return <MdCancel />;
}
return <MdCancelScheduleSend />;
}, [cancelType, isCancelScheduled]);
return (
<ButtonGroup isAttached width={btnGroupWidth}>
{cancelType === 'immediate' ? (
<IAIIconButton
icon={<MdCancel />}
tooltip={t('parameters.cancel.immediate')}
aria-label={t('parameters.cancel.immediate')}
isDisabled={!isConnected || !isProcessing || !isCancelable}
onClick={handleClickCancel}
colorScheme="error"
{...rest}
/>
) : (
<IAIIconButton
icon={
isCancelScheduled ? <ButtonSpinner /> : <MdCancelScheduleSend />
}
tooltip={
isCancelScheduled
? t('parameters.cancel.isScheduled')
: t('parameters.cancel.schedule')
}
aria-label={
isCancelScheduled
? t('parameters.cancel.isScheduled')
: t('parameters.cancel.schedule')
}
isDisabled={!isConnected || !isProcessing || !isCancelable}
onClick={handleClickCancel}
colorScheme="error"
{...rest}
/>
)}
<IAIIconButton
icon={cancelIcon}
tooltip={cancelLabel}
aria-label={cancelLabel}
isDisabled={!isConnected || !isProcessing || !isCancelable}
onClick={handleClickCancel}
colorScheme="error"
{...rest}
/>
<Menu closeOnSelect={false}>
<MenuButton

78
invokeai/frontend/web/src/features/ui/components/CreateParametersDrawer.tsx Normal file
View File

@ -0,0 +1,78 @@
import { isEqual } from 'lodash-es';
import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
import GenerateParameters from './tabs/Create/GenerateParameters';
import { createSelector } from '@reduxjs/toolkit';
import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
setShouldShowParametersPanel,
toggleParametersPanel,
} from '../store/uiSlice';
import { memo } from 'react';
import { Flex } from '@chakra-ui/react';
import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
import PinParametersPanelButton from './PinParametersPanelButton';
const selector = createSelector(
[uiSelector, activeTabNameSelector, lightboxSelector],
(ui, activeTabName, lightbox) => {
const { shouldPinParametersPanel, shouldShowParametersPanel } = ui;
const { isLightboxOpen } = lightbox;
return {
shouldPinParametersPanel,
shouldShowParametersPanel,
};
},
{
memoizeOptions: {
resultEqualityCheck: isEqual,
},
}
);
const CreateParametersPanel = () => {
const dispatch = useAppDispatch();
const { shouldPinParametersPanel, shouldShowParametersPanel } =
useAppSelector(selector);
const handleClosePanel = () => {
dispatch(setShouldShowParametersPanel(false));
};
if (shouldPinParametersPanel) {
return null;
}
return (
<ResizableDrawer
direction="left"
isResizable={true}
isOpen={shouldShowParametersPanel}
onClose={handleClosePanel}
minWidth={500}
>
<Flex
flexDir="column"
position="relative"
h={{ base: 600, xl: 'full' }}
w={{ sm: 'full', lg: '100vw', xl: 'full' }}
paddingRight={{ base: 8, xl: 0 }}
>
<Flex
paddingTop={1.5}
paddingBottom={4}
justifyContent="space-between"
alignItems="center"
>
<InvokeAILogoComponent />
<PinParametersPanelButton />
</Flex>
<GenerateParameters />
</Flex>
</ResizableDrawer>
);
};
export default memo(CreateParametersPanel);

2
invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
View File

@ -16,7 +16,7 @@ const floatingGalleryButtonSelector = createSelector(
return {
shouldPinGallery,
shouldShowGalleryButton: !shouldPinGallery || !shouldShowGallery,
shouldShowGalleryButton: !shouldShowGallery,
};
},
{ memoizeOptions: { resultEqualityCheck: isEqual } }

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

@ -39,7 +39,7 @@ export const floatingParametersPanelButtonSelector = createSelector(
const shouldShowParametersPanelButton =
!canvasBetaLayoutCheck &&
(!shouldPinParametersPanel || !shouldShowParametersPanel) &&
!shouldShowParametersPanel &&
['generate', 'unifiedCanvas'].includes(activeTabName);
return {
@ -65,7 +65,11 @@ const FloatingParametersPanelButtons = () => {
shouldPinParametersPanel && dispatch(requestCanvasRescale());
};
return shouldShowParametersPanelButton ? (
if (!shouldShowParametersPanelButton) {
return null;
}
return (
<Flex
pos="absolute"
transform="translate(0, -50%)"
@ -92,7 +96,7 @@ const FloatingParametersPanelButtons = () => {
</>
)}
</Flex>
) : null;
);
};
export default memo(FloatingParametersPanelButtons);

62
invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
View File

@ -1,5 +1,7 @@
import {
Box,
ChakraProps,
Flex,
Icon,
Tab,
TabList,
@ -14,7 +16,14 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import { InvokeTabName } from 'features/ui/store/tabMap';
import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice';
import { memo, ReactNode, useMemo } from 'react';
import {
memo,
ReactNode,
useLayoutEffect,
useMemo,
useRef,
useState,
} from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { MdDeviceHub, MdGridOn } from 'react-icons/md';
import { activeTabIndexSelector } from '../store/uiSelectors';
@ -23,33 +32,47 @@ import { useTranslation } from 'react-i18next';
import { ResourceKey } from 'i18next';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import NodeEditor from 'features/nodes/components/NodeEditor';
import GenerateWorkspace from './tabs/Generate/GenerateWorkspace';
import GenerateWorkspace from './tabs/Create/GenerateWorkspace';
import { createSelector } from '@reduxjs/toolkit';
import { BsLightningChargeFill } from 'react-icons/bs';
import { configSelector } from 'features/system/store/configSelectors';
import { isEqual } from 'lodash-es';
import AnimatedImageToImagePanel from 'features/parameters/components/AnimatedImageToImagePanel';
import Scrollable from './common/Scrollable';
import GenerateParameters from './tabs/Create/GenerateParameters';
import PinParametersPanelButton from './PinParametersPanelButton';
import ParametersSlide from './common/ParametersSlide';
import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
import CreateTabContent from './tabs/Create/GenerateContent';
import ParametersPanel from './ParametersPanel';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import CreateTab from './tabs/Create/CreateTab';
import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab';
import NodesTab from './tabs/Nodes/NodesTab';
export interface InvokeTabInfo {
id: InvokeTabName;
icon: ReactNode;
workarea: ReactNode;
content: ReactNode;
}
const tabs: InvokeTabInfo[] = [
{
id: 'generate',
icon: <Icon as={BsLightningChargeFill} sx={{ boxSize: 5 }} />,
workarea: <GenerateWorkspace />,
content: <CreateTab />,
},
{
id: 'unifiedCanvas',
icon: <Icon as={MdGridOn} sx={{ boxSize: 6 }} />,
workarea: <UnifiedCanvasWorkarea />,
content: <UnifiedCanvasTab />,
},
{
id: 'nodes',
icon: <Icon as={MdDeviceHub} sx={{ boxSize: 6 }} />,
workarea: <NodeEditor />,
content: <NodesTab />,
},
];
@ -72,9 +95,12 @@ const InvokeTabs = () => {
(state: RootState) => state.lightbox.isLightboxOpen
);
const { shouldPinGallery, shouldPinParametersPanel } = useAppSelector(
(state: RootState) => state.ui
);
const {
shouldPinGallery,
shouldPinParametersPanel,
shouldShowGallery,
shouldShowParametersPanel,
} = useAppSelector((state: RootState) => state.ui);
const { t } = useTranslation();
@ -133,9 +159,7 @@ const InvokeTabs = () => {
const tabPanels = useMemo(
() =>
enabledTabs.map((tab) => (
<TabPanel key={tab.id}>{tab.workarea}</TabPanel>
)),
enabledTabs.map((tab) => <TabPanel key={tab.id}>{tab.content}</TabPanel>),
[enabledTabs]
);
@ -165,3 +189,17 @@ const InvokeTabs = () => {
};
export default memo(InvokeTabs);
// <PanelGroup autoSaveId="example" direction="horizontal">
// <Panel defaultSize={25}>
// <SourcesExplorer />
// </Panel>
// <PanelResizeHandle />
// <Panel>
// <SourceViewer />
// </Panel>
// <PanelResizeHandle />
// <Panel defaultSize={25}>
// <Console />
// </Panel>
// </PanelGroup>;

24
invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx Normal file
View File

@ -0,0 +1,24 @@
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { PropsWithChildren, memo } from 'react';
const OverlayScrollable = (props: PropsWithChildren) => {
return (
<OverlayScrollbarsComponent
defer
style={{ height: '100%' }}
options={{
scrollbars: {
visibility: 'auto',
autoHide: 'move',
autoHideDelay: 1300,
theme: 'os-theme-dark',
},
overflow: { x: 'hidden' },
}}
>
{props.children}
</OverlayScrollbarsComponent>
);
};
export default memo(OverlayScrollable);

84
invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
View File

@ -26,7 +26,6 @@ import {
type ResizableDrawerProps = ResizableProps & {
children: ReactNode;
isResizable: boolean;
isPinned: boolean;
isOpen: boolean;
onClose: () => void;
direction?: SlideDirection;
@ -51,7 +50,6 @@ const ChakraResizeable = chakra(Resizable, {
const ResizableDrawer = ({
direction = 'left',
isResizable,
isPinned,
isOpen,
onClose,
children,
@ -95,7 +93,7 @@ const ResizableDrawer = ({
handler: () => {
onClose();
},
enabled: isOpen && !isPinned,
enabled: isOpen,
});
const handleEnables = useMemo(
@ -107,30 +105,33 @@ const ResizableDrawer = ({
() =>
getMinMaxDimensions({
direction,
minWidth: isResizable
? parseAndPadSize(minWidth, 18)
: parseAndPadSize(minWidth),
maxWidth: isResizable
? parseAndPadSize(maxWidth, 18)
: parseAndPadSize(maxWidth),
minHeight: isResizable
? parseAndPadSize(minHeight, 18)
: parseAndPadSize(minHeight),
maxHeight: isResizable
? parseAndPadSize(maxHeight, 18)
: parseAndPadSize(maxHeight),
// minWidth: isResizable
// ? parseAndPadSize(minWidth, 18)
// : parseAndPadSize(minWidth),
// maxWidth: isResizable
// ? parseAndPadSize(maxWidth, 18)
// : parseAndPadSize(maxWidth),
// minHeight: isResizable
// ? parseAndPadSize(minHeight, 18)
// : parseAndPadSize(minHeight),
// maxHeight: isResizable
// ? parseAndPadSize(maxHeight, 18)
// : parseAndPadSize(maxHeight),
minWidth,
maxWidth,
minHeight,
maxHeight,
}),
[minWidth, maxWidth, minHeight, maxHeight, direction, isResizable]
[minWidth, maxWidth, minHeight, maxHeight, direction]
);
const { containerStyles, handleStyles } = useMemo(
() =>
getStyles({
isPinned,
isResizable,
direction,
}),
[isPinned, isResizable, direction]
[isResizable, direction]
);
const slideDirection = useMemo(
@ -140,34 +141,37 @@ const ResizableDrawer = ({
useEffect(() => {
if (['left', 'right'].includes(direction)) {
setHeight(isPinned ? '100%' : '100vh');
setHeight('100vh');
// setHeight(isPinned ? '100%' : '100vh');
}
if (['top', 'bottom'].includes(direction)) {
setWidth(isPinned ? '100%' : '100vw');
setWidth('100vw');
// setWidth(isPinned ? '100%' : '100vw');
}
}, [isPinned, direction]);
}, [direction]);
return (
<Slide
direction={slideDirection}
in={isOpen}
unmountOnExit={isPinned}
motionProps={{ initial: isPinned }}
{...(isPinned
? {
style: {
position: undefined,
left: undefined,
right: undefined,
top: undefined,
bottom: undefined,
width: undefined,
},
}
: {
// transition: { enter: { duration: 0.15 }, exit: { duration: 0.15 } },
style: { zIndex: 99, width: 'full' },
})}
// unmountOnExit={isPinned}
motionProps={{ initial: false }}
style={{ zIndex: 99, width: 'full' }}
// {...(isPinned
// ? {
// style: {
// position: undefined,
// left: undefined,
// right: undefined,
// top: undefined,
// bottom: undefined,
// width: undefined,
// },
// }
// : {
// // transition: { enter: { duration: 0.15 }, exit: { duration: 0.15 } },
// style: { zIndex: 99, width: 'full' },
// })}
>
<Box
ref={outsideClickRef}
@ -186,10 +190,10 @@ const ResizableDrawer = ({
{...minMaxDimensions}
sx={{
borderColor: 'base.800',
p: isPinned ? 0 : 4,
p: 4,
bg: 'base.900',
height: 'full',
boxShadow: !isPinned ? '0 0 4rem 0 rgba(0, 0, 0, 0.8)' : '',
boxShadow: '0 0 4rem 0 rgba(0, 0, 0, 0.8)',
...containerStyles,
...sx,
}}

15
invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/util.ts
View File

@ -155,7 +155,6 @@ export const getAnimations = ({
};
export type GetResizableStylesProps = {
isPinned: boolean;
isResizable: boolean;
direction: SlideDirection;
};
@ -168,10 +167,10 @@ const HANDLE_PADDING = '1rem';
const HANDLE_WIDTH_PINNED = '2px';
const HANDLE_WIDTH_UNPINNED = '5px';
const HANDLE_WIDTH = '5px';
// Get the styles for the container and handle. Do not need to handle langDirection here bc we use direction-agnostic CSS
export const getStyles = ({
isPinned,
isResizable,
direction,
}: GetResizableStylesProps): {
@ -182,15 +181,13 @@ export const getStyles = ({
return { containerStyles: {}, handleStyles: {} };
}
const handleWidth = isPinned ? HANDLE_WIDTH_PINNED : HANDLE_WIDTH_UNPINNED;
// Calculate the positioning offset of the handle hitbox so it is centered over the handle
const handleOffset = `calc((2 * ${HANDLE_INTERACT_PADDING} + ${handleWidth}) / -2)`;
const handleOffset = `calc((2 * ${HANDLE_INTERACT_PADDING} + ${HANDLE_WIDTH}) / -2)`;
if (direction === 'top') {
return {
containerStyles: {
borderBottomWidth: handleWidth,
borderBottomWidth: HANDLE_WIDTH,
paddingBottom: HANDLE_PADDING,
},
handleStyles: {
@ -206,7 +203,7 @@ export const getStyles = ({
if (direction === 'left') {
return {
containerStyles: {
borderInlineEndWidth: handleWidth,
borderInlineEndWidth: HANDLE_WIDTH,
paddingInlineEnd: HANDLE_PADDING,
},
handleStyles: {
@ -222,7 +219,7 @@ export const getStyles = ({
if (direction === 'bottom') {
return {
containerStyles: {
borderTopWidth: handleWidth,
borderTopWidth: HANDLE_WIDTH,
paddingTop: HANDLE_PADDING,
},
handleStyles: {
@ -238,7 +235,7 @@ export const getStyles = ({
if (direction === 'right') {
return {
containerStyles: {
borderInlineStartWidth: handleWidth,
borderInlineStartWidth: HANDLE_WIDTH,
paddingInlineStart: HANDLE_PADDING,
},
handleStyles: {

96
invokeai/frontend/web/src/features/ui/components/tabs/Create/CreateTab.tsx Normal file
View File

@ -0,0 +1,96 @@
import { Portal, TabPanel } from '@chakra-ui/react';
import { memo } from 'react';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import GenerateParameters from './GenerateParameters';
import PinParametersPanelButton from '../../PinParametersPanelButton';
import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import CreateTabContent from './GenerateContent';
import ResizeHandle from '../ResizeHandle';
import AnimatedImageToImagePanel from 'features/parameters/components/AnimatedImageToImagePanel';
import ImageToImageSettings from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings';
const selector = createSelector(uiSelector, (ui) => {
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
} = ui;
return {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
};
});
const CreateTab = () => {
const dispatch = useAppDispatch();
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
} = useAppSelector(selector);
return (
<PanelGroup
direction="horizontal"
style={{ height: '100%', width: '100%' }}
>
{shouldPinParametersPanel && shouldShowParametersPanel && (
<>
<Panel
order={0}
defaultSize={30}
minSize={20}
style={{ position: 'relative' }}
>
<GenerateParameters />
<PinParametersPanelButton
sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
/>
</Panel>
<ResizeHandle />
</>
)}
{shouldPinParametersPanel && shouldShowParametersPanel && (
<>
<Panel
order={0}
defaultSize={30}
minSize={20}
style={{ position: 'relative' }}
>
<ImageToImageSettings />
</Panel>
<ResizeHandle />
</>
)}
<Panel
order={1}
minSize={30}
onResize={() => {
dispatch(requestCanvasRescale());
}}
>
<CreateTabContent />
</Panel>
{shouldPinGallery && shouldShowGallery && (
<>
<ResizeHandle />
<Panel order={2} defaultSize={10} minSize={10}>
<ImageGalleryContent />
</Panel>
</>
)}
</PanelGroup>
);
};
export default memo(CreateTab);

4
invokeai/frontend/web/src/features/ui/components/tabs/Generate/GenerateContent.tsx → invokeai/frontend/web/src/features/ui/components/tabs/Create/GenerateContent.tsx
View File

@ -2,7 +2,7 @@ import { Box, Flex } from '@chakra-ui/react';
import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
import ProgressImagePreview from 'features/parameters/components/ProgressImagePreview';
const GenerateContent = () => {
const CreateTabContent = () => {
return (
<Box
sx={{
@ -20,4 +20,4 @@ const GenerateContent = () => {
);
};
export default GenerateContent;
export default CreateTabContent;

44
invokeai/frontend/web/src/features/ui/components/tabs/Generate/GenerateParameters.tsx → invokeai/frontend/web/src/features/ui/components/tabs/Create/GenerateParameters.tsx
View File

@ -30,9 +30,15 @@ import ProcessButtons from 'features/parameters/components/ProcessButtons/Proces
import NegativePromptInput from 'features/parameters/components/PromptInput/NegativePromptInput';
import PromptInput from 'features/parameters/components/PromptInput/PromptInput';
import { findIndex } from 'lodash-es';
import { memo, useMemo, useState } from 'react';
import {
OverlayScrollbarsComponent,
useOverlayScrollbars,
} from 'overlayscrollbars-react';
import { memo, useMemo, useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
import OverlayScrollable from '../../common/OverlayScrollable';
import AnimatedImageToImagePanel from 'features/parameters/components/AnimatedImageToImagePanel';
const GenerateParameters = () => {
const { t } = useTranslation();
@ -83,25 +89,35 @@ const GenerateParameters = () => {
);
return (
<Flex flexDir="column" gap={2}>
<PromptInput />
<NegativePromptInput />
<ProcessButtons />
<OverlayScrollable>
<Flex
sx={{
flexDirection: 'column',
gap: 2,
bg: 'base.800',
p: 4,
pb: 6,
borderRadius: 'base',
flexDirection: 'column',
h: 'full',
w: 'full',
position: 'absolute',
}}
>
<MainSettings />
<PromptInput />
<NegativePromptInput />
<ProcessButtons />
<Flex
sx={{
flexDirection: 'column',
gap: 2,
bg: 'base.800',
p: 4,
pb: 6,
borderRadius: 'base',
}}
>
<MainSettings />
</Flex>
<ImageToImageToggle />
<ParametersAccordion accordionItems={generateAccordionItems} />
</Flex>
<ImageToImageToggle />
<ParametersAccordion accordionItems={generateAccordionItems} />
</Flex>
</OverlayScrollable>
);
};

6
invokeai/frontend/web/src/features/ui/components/tabs/Generate/GenerateWorkspace.tsx → invokeai/frontend/web/src/features/ui/components/tabs/Create/GenerateWorkspace.tsx
View File

@ -1,7 +1,7 @@
import { Box, Flex } from '@chakra-ui/react';
import { useAppSelector } from 'app/store/storeHooks';
import { memo } from 'react';
import GenerateContent from './GenerateContent';
import CreateTabContent from './GenerateContent';
import GenerateParameters from './GenerateParameters';
import PinParametersPanelButton from '../../PinParametersPanelButton';
import { RootState } from 'app/store/store';
@ -14,6 +14,8 @@ const GenerateWorkspace = () => {
(state: RootState) => state.ui.shouldPinParametersPanel
);
return <CreateTabContent />;
return (
<Flex
flexDirection={{ base: 'column-reverse', xl: 'row' }}
@ -45,7 +47,7 @@ const GenerateWorkspace = () => {
<GenerateParameters />
</ParametersSlide>
)}
<GenerateContent />
<CreateTabContent />
</Flex>
);
};

64
invokeai/frontend/web/src/features/ui/components/tabs/Nodes/NodesTab.tsx Normal file
View File

@ -0,0 +1,64 @@
import { TabPanel } from '@chakra-ui/react';
import { memo } from 'react';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import PinParametersPanelButton from '../../PinParametersPanelButton';
import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import ResizeHandle from '../ResizeHandle';
import NodeEditor from 'features/nodes/components/NodeEditor';
const selector = createSelector(uiSelector, (ui) => {
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
} = ui;
return {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
};
});
const NodesTab = () => {
const dispatch = useAppDispatch();
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
} = useAppSelector(selector);
return (
<PanelGroup
direction="horizontal"
style={{ height: '100%', width: '100%' }}
>
<Panel
order={1}
minSize={30}
onResize={() => {
dispatch(requestCanvasRescale());
}}
>
<NodeEditor />
</Panel>
{shouldPinGallery && shouldShowGallery && (
<>
<ResizeHandle />
<Panel order={2} defaultSize={10} minSize={10} collapsible={true}>
<ImageGalleryContent />
</Panel>
</>
)}
</PanelGroup>
);
};
export default memo(NodesTab);

17
invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Box, Flex } from '@chakra-ui/react';
import { memo } from 'react';
import { PanelResizeHandle } from 'react-resizable-panels';
const ResizeHandle = () => {
return (
<PanelResizeHandle>
<Flex
sx={{ w: 6, h: 'full', justifyContent: 'center', alignItems: 'center' }}
>
<Box sx={{ w: 0.5, h: 'calc(100% - 1rem)', py: 4, bg: 'base.800' }} />
</Flex>
</PanelResizeHandle>
);
};
export default memo(ResizeHandle);

23
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
View File

@ -17,6 +17,7 @@ import ProcessButtons from 'features/parameters/components/ProcessButtons/Proces
import NegativePromptInput from 'features/parameters/components/PromptInput/NegativePromptInput';
import PromptInput from 'features/parameters/components/PromptInput/PromptInput';
import { useTranslation } from 'react-i18next';
import OverlayScrollable from '../../common/OverlayScrollable';
export default function UnifiedCanvasParameters() {
const { t } = useTranslation();
@ -74,11 +75,21 @@ export default function UnifiedCanvasParameters() {
};
return (
<Flex flexDir="column" gap={2} position="relative">
<PromptInput />
<NegativePromptInput />
<ProcessButtons />
<ParametersAccordion accordionItems={unifiedCanvasAccordions} />
</Flex>
<OverlayScrollable>
<Flex
sx={{
gap: 2,
flexDirection: 'column',
h: 'full',
w: 'full',
position: 'absolute',
}}
>
<PromptInput />
<NegativePromptInput />
<ProcessButtons />
<ParametersAccordion accordionItems={unifiedCanvasAccordions} />
</Flex>
</OverlayScrollable>
);
}

89
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx Normal file
View File

@ -0,0 +1,89 @@
import { TabPanel } from '@chakra-ui/react';
import { memo } from 'react';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import PinParametersPanelButton from '../../PinParametersPanelButton';
import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
import { createSelector } from '@reduxjs/toolkit';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import UnifiedCanvasContent from './UnifiedCanvasContent';
import ResizeHandle from '../ResizeHandle';
import UnifiedCanvasParameters from './UnifiedCanvasParameters';
import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta';
const selector = createSelector(uiSelector, (ui) => {
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldUseCanvasBetaLayout,
} = ui;
return {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldUseCanvasBetaLayout,
};
});
const UnifiedCanvasTab = () => {
const dispatch = useAppDispatch();
const {
shouldPinGallery,
shouldShowGallery,
shouldPinParametersPanel,
shouldShowParametersPanel,
shouldUseCanvasBetaLayout,
} = useAppSelector(selector);
return (
<PanelGroup
direction="horizontal"
style={{ height: '100%', width: '100%' }}
>
{shouldPinParametersPanel && shouldShowParametersPanel && (
<>
<Panel
order={0}
defaultSize={30}
minSize={20}
style={{ position: 'relative' }}
>
<UnifiedCanvasParameters />
<PinParametersPanelButton
sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
/>
</Panel>
<ResizeHandle />
</>
)}
<Panel
order={1}
minSize={30}
onResize={() => {
dispatch(requestCanvasRescale());
}}
>
{shouldUseCanvasBetaLayout ? (
<UnifiedCanvasContentBeta />
) : (
<UnifiedCanvasContent />
)}
</Panel>
{shouldPinGallery && shouldShowGallery && (
<>
<ResizeHandle />
<Panel order={2} defaultSize={10} minSize={10}>
<ImageGalleryContent />
</Panel>
</>
)}
</PanelGroup>
);
};
export default memo(UnifiedCanvasTab);

10
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasWorkarea.tsx
View File

@ -18,6 +18,12 @@ const CanvasWorkspace = () => {
(state: RootState) => state.ui.shouldUseCanvasBetaLayout
);
return shouldUseCanvasBetaLayout ? (
<UnifiedCanvasContentBeta />
) : (
<UnifiedCanvasContent />
);
return (
<Flex
flexDirection={{ base: 'column-reverse', xl: 'row' }}
@ -25,7 +31,7 @@ const CanvasWorkspace = () => {
h="full"
gap={4}
>
{shouldPinParametersPanel ? (
{/* {shouldPinParametersPanel ? (
<Box width="28rem" flexShrink={0} position="relative">
<Scrollable>
<UnifiedCanvasParameters />
@ -38,7 +44,7 @@ const CanvasWorkspace = () => {
<ParametersSlide>
<UnifiedCanvasParameters />
</ParametersSlide>
)}
)} */}
{shouldUseCanvasBetaLayout ? (
<UnifiedCanvasContentBeta />
) : (

6
invokeai/frontend/web/src/features/ui/store/uiSlice.ts
View File

@ -78,9 +78,15 @@ export const uiSlice = createSlice({
},
togglePinGalleryPanel: (state) => {
state.shouldPinGallery = !state.shouldPinGallery;
if (!state.shouldPinGallery) {
state.shouldShowGallery = true;
}
},
togglePinParametersPanel: (state) => {
state.shouldPinParametersPanel = !state.shouldPinParametersPanel;
if (!state.shouldPinParametersPanel) {
state.shouldShowParametersPanel = true;
}
},
toggleParametersPanel: (state) => {
state.shouldShowParametersPanel = !state.shouldShowParametersPanel;

5
invokeai/frontend/web/yarn.lock
View File

@ -5579,6 +5579,11 @@ react-remove-scroll@^2.5.5:
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"
react-resizable-panels@^0.0.42:
version "0.0.42"
resolved "https://registry.yarnpkg.com/react-resizable-panels/-/react-resizable-panels-0.0.42.tgz#e1a5d7fde7be4d18f32d0e021a0b4edb28b9edfe"
integrity sha512-nOaN9DeUTsmKjN3MFGaLd35kngGyO29SHRLdBRafYR1SV2F/LbWbpVUKVPwL2fBBTnQe2/rqOQwT4k+3cKeK+w==
react-rnd@^10.4.1:
version "10.4.1"
resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.4.1.tgz#9e1c3f244895d7862ef03be98b2a620848c3fba1"