mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): add IAICollapse for parameters
This commit is contained in:
psychedelicious
@ -1,6 +1,6 @@
|
||||
import { isEqual } from 'lodash-es';
|
||||
import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
|
||||
import CreateBaseSettings from './tabs/Create/CreateBaseSettings';
|
||||
import TextTabParameters from './tabs/text/TextTabParameters';
|
||||
import { createSelector } from '@reduxjs/toolkit';
|
||||
import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
|
||||
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
|
||||
@ -14,10 +14,10 @@ import { Flex } from '@chakra-ui/react';
|
||||
import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
|
||||
import PinParametersPanelButton from './PinParametersPanelButton';
|
||||
import { Panel, PanelGroup } from 'react-resizable-panels';
|
||||
import CreateSidePanelPinned from './tabs/Create/CreateSidePanelPinned';
|
||||
import CreateTextParameters from './tabs/Create/CreateBaseSettings';
|
||||
import CreateSidePanelPinned from './tabs/text/TextTabSettingsPinned';
|
||||
import CreateTextParameters from './tabs/text/TextTabParameters';
|
||||
import ResizeHandle from './tabs/ResizeHandle';
|
||||
import CreateImageSettings from './tabs/Create/CreateImageSettings';
|
||||
import CreateImageSettings from './tabs/image/ImageTabSettings';
|
||||
|
||||
const selector = createSelector(
|
||||
[uiSelector, activeTabNameSelector, lightboxSelector],
|
||||
|
||||
@ -40,7 +40,7 @@ export const floatingParametersPanelButtonSelector = createSelector(
|
||||
const shouldShowParametersPanelButton =
|
||||
!canvasBetaLayoutCheck &&
|
||||
!shouldShowParametersPanel &&
|
||||
['generate', 'unifiedCanvas'].includes(activeTabName);
|
||||
['text', 'image', 'unifiedCanvas'].includes(activeTabName);
|
||||
|
||||
return {
|
||||
shouldPinParametersPanel,
|
||||
|
||||
@ -26,31 +26,34 @@ import {
|
||||
} from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { MdDeviceHub, MdGridOn } from 'react-icons/md';
|
||||
import { GoTextSize } from 'react-icons/go';
|
||||
import { activeTabIndexSelector } from '../store/uiSelectors';
|
||||
import UnifiedCanvasWorkarea from 'features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasWorkarea';
|
||||
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/Create/GenerateWorkspace';
|
||||
import GenerateWorkspace from './tabs/text/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 CreateBaseSettings from './tabs/Create/CreateBaseSettings';
|
||||
import TextTabParameters from './tabs/text/TextTabParameters';
|
||||
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/CreateContent';
|
||||
import TextTabMain from './tabs/text/TextTabMain';
|
||||
import ParametersPanel from './ParametersPanel';
|
||||
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
|
||||
import CreateTab from './tabs/Create/CreateTab';
|
||||
import TextTab from './tabs/text/TextTab';
|
||||
import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab';
|
||||
import NodesTab from './tabs/Nodes/NodesTab';
|
||||
import { FaImage } from 'react-icons/fa';
|
||||
import ResizeHandle from './tabs/ResizeHandle';
|
||||
|
||||
export interface InvokeTabInfo {
|
||||
id: InvokeTabName;
|
||||
@ -60,9 +63,14 @@ export interface InvokeTabInfo {
|
||||
|
||||
const tabs: InvokeTabInfo[] = [
|
||||
{
|
||||
id: 'generate',
|
||||
icon: <Icon as={BsLightningChargeFill} sx={{ boxSize: 5 }} />,
|
||||
content: <CreateTab />,
|
||||
id: 'text',
|
||||
icon: <Icon as={GoTextSize} sx={{ boxSize: 5 }} />,
|
||||
content: <TextTab />,
|
||||
},
|
||||
{
|
||||
id: 'image',
|
||||
icon: <Icon as={FaImage} sx={{ boxSize: 5 }} />,
|
||||
content: <TextTab />,
|
||||
},
|
||||
{
|
||||
id: 'unifiedCanvas',
|
||||
@ -107,14 +115,18 @@ const InvokeTabs = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
useHotkeys('1', () => {
|
||||
dispatch(setActiveTab('generate'));
|
||||
dispatch(setActiveTab('text'));
|
||||
});
|
||||
|
||||
useHotkeys('2', () => {
|
||||
dispatch(setActiveTab('unifiedCanvas'));
|
||||
dispatch(setActiveTab('image'));
|
||||
});
|
||||
|
||||
useHotkeys('3', () => {
|
||||
dispatch(setActiveTab('unifiedCanvas'));
|
||||
});
|
||||
|
||||
useHotkeys('4', () => {
|
||||
dispatch(setActiveTab('nodes'));
|
||||
});
|
||||
|
||||
@ -183,23 +195,27 @@ const InvokeTabs = () => {
|
||||
>
|
||||
{tabs}
|
||||
</TabList>
|
||||
<TabPanels>{tabPanels}</TabPanels>
|
||||
<PanelGroup
|
||||
autoSaveId="app"
|
||||
direction="horizontal"
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
>
|
||||
<Panel id="tabContent">
|
||||
<TabPanels style={{ height: '100%', width: '100%' }}>
|
||||
{tabPanels}
|
||||
</TabPanels>
|
||||
</Panel>
|
||||
{shouldPinGallery && shouldShowGallery && (
|
||||
<>
|
||||
<ResizeHandle />
|
||||
<Panel id="gallery" order={3} defaultSize={10} minSize={10}>
|
||||
<ImageGalleryContent />
|
||||
</Panel>
|
||||
</>
|
||||
)}
|
||||
</PanelGroup>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
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>;
|
||||
|
||||
@ -1,123 +0,0 @@
|
||||
import {
|
||||
AspectRatio,
|
||||
Box,
|
||||
Flex,
|
||||
Select,
|
||||
Slider,
|
||||
SliderFilledTrack,
|
||||
SliderThumb,
|
||||
SliderTrack,
|
||||
Text,
|
||||
} from '@chakra-ui/react';
|
||||
import { Feature } from 'app/features';
|
||||
import IAISlider from 'common/components/IAISlider';
|
||||
import IAISwitch from 'common/components/IAISwitch';
|
||||
import ImageToImageSettings from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings';
|
||||
import ImageToImageToggle from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageToggle';
|
||||
import OutputSettings from 'features/parameters/components/AdvancedParameters/Output/OutputSettings';
|
||||
import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings';
|
||||
import SymmetryToggle from 'features/parameters/components/AdvancedParameters/Output/SymmetryToggle';
|
||||
import RandomizeSeed from 'features/parameters/components/AdvancedParameters/Seed/RandomizeSeed';
|
||||
import SeedSettings from 'features/parameters/components/AdvancedParameters/Seed/SeedSettings';
|
||||
import GenerateVariationsToggle from 'features/parameters/components/AdvancedParameters/Variations/GenerateVariations';
|
||||
import VariationsSettings from 'features/parameters/components/AdvancedParameters/Variations/VariationsSettings';
|
||||
import DimensionsSettings from 'features/parameters/components/ImageDimensions/DimensionsSettings';
|
||||
import MainSettings from 'features/parameters/components/MainParameters/MainSettings';
|
||||
import ParametersAccordion, {
|
||||
ParametersAccordionItems,
|
||||
} from 'features/parameters/components/ParametersAccordion';
|
||||
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
|
||||
import NegativePromptInput from 'features/parameters/components/PromptInput/NegativePromptInput';
|
||||
import PromptInput from 'features/parameters/components/PromptInput/PromptInput';
|
||||
import { findIndex } from 'lodash-es';
|
||||
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 CreateBaseSettings = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const generateAccordionItems: ParametersAccordionItems = useMemo(
|
||||
() => ({
|
||||
// general: {
|
||||
// name: 'general',
|
||||
// header: `${t('parameters.general')}`,
|
||||
// feature: undefined,
|
||||
// content: <MainSettings />,
|
||||
// },
|
||||
seed: {
|
||||
name: 'seed',
|
||||
header: `${t('parameters.seed')}`,
|
||||
feature: Feature.SEED,
|
||||
content: <SeedSettings />,
|
||||
additionalHeaderComponents: <RandomizeSeed />,
|
||||
},
|
||||
// imageToImage: {
|
||||
// name: 'imageToImage',
|
||||
// header: `${t('parameters.imageToImage')}`,
|
||||
// feature: undefined,
|
||||
// content: <ImageToImageSettings />,
|
||||
// additionalHeaderComponents: <ImageToImageToggle />,
|
||||
// },
|
||||
variations: {
|
||||
name: 'variations',
|
||||
header: `${t('parameters.variations')}`,
|
||||
feature: Feature.VARIATIONS,
|
||||
content: <VariationsSettings />,
|
||||
additionalHeaderComponents: <GenerateVariationsToggle />,
|
||||
},
|
||||
symmetry: {
|
||||
name: 'symmetry',
|
||||
header: `${t('parameters.symmetry')}`,
|
||||
content: <SymmetrySettings />,
|
||||
additionalHeaderComponents: <SymmetryToggle />,
|
||||
},
|
||||
other: {
|
||||
name: 'other',
|
||||
header: `${t('parameters.otherOptions')}`,
|
||||
feature: Feature.OTHER,
|
||||
content: <OutputSettings />,
|
||||
},
|
||||
}),
|
||||
[t]
|
||||
);
|
||||
|
||||
return (
|
||||
<OverlayScrollable>
|
||||
<Flex
|
||||
sx={{
|
||||
gap: 2,
|
||||
flexDirection: 'column',
|
||||
h: 'full',
|
||||
w: 'full',
|
||||
position: 'absolute',
|
||||
}}
|
||||
>
|
||||
<PromptInput />
|
||||
<NegativePromptInput />
|
||||
<ProcessButtons />
|
||||
<ImageToImageToggle />
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
bg: 'base.800',
|
||||
p: 4,
|
||||
borderRadius: 'base',
|
||||
}}
|
||||
>
|
||||
<MainSettings />
|
||||
</Flex>
|
||||
<ParametersAccordion accordionItems={generateAccordionItems} />
|
||||
</Flex>
|
||||
</OverlayScrollable>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(CreateBaseSettings);
|
||||
@ -1,55 +0,0 @@
|
||||
import { Box, Flex } from '@chakra-ui/react';
|
||||
import { useAppSelector } from 'app/store/storeHooks';
|
||||
import { memo } from 'react';
|
||||
import CreateTabContent from './CreateContent';
|
||||
import CreateBaseSettings from './CreateBaseSettings';
|
||||
import PinParametersPanelButton from '../../PinParametersPanelButton';
|
||||
import { RootState } from 'app/store/store';
|
||||
import Scrollable from '../../common/Scrollable';
|
||||
import ParametersSlide from '../../common/ParametersSlide';
|
||||
import AnimatedImageToImagePanel from 'features/parameters/components/AnimatedImageToImagePanel';
|
||||
|
||||
const GenerateWorkspace = () => {
|
||||
const shouldPinParametersPanel = useAppSelector(
|
||||
(state: RootState) => state.ui.shouldPinParametersPanel
|
||||
);
|
||||
|
||||
return <CreateTabContent />;
|
||||
|
||||
return (
|
||||
<Flex
|
||||
flexDirection={{ base: 'column-reverse', xl: 'row' }}
|
||||
w="full"
|
||||
h="full"
|
||||
gap={4}
|
||||
>
|
||||
{shouldPinParametersPanel ? (
|
||||
<Flex sx={{ flexDirection: 'row-reverse' }}>
|
||||
<AnimatedImageToImagePanel />
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
width: '28rem',
|
||||
flexShrink: 0,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Scrollable>
|
||||
<CreateBaseSettings />
|
||||
</Scrollable>
|
||||
<PinParametersPanelButton
|
||||
sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
) : (
|
||||
<ParametersSlide>
|
||||
<CreateBaseSettings />
|
||||
</ParametersSlide>
|
||||
)}
|
||||
<CreateTabContent />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(GenerateWorkspace);
|
||||
@ -2,13 +2,40 @@ import { Box, Flex } from '@chakra-ui/react';
|
||||
import { memo } from 'react';
|
||||
import { PanelResizeHandle } from 'react-resizable-panels';
|
||||
|
||||
const ResizeHandle = () => {
|
||||
type ResizeHandleProps = {
|
||||
direction?: 'horizontal' | 'vertical';
|
||||
};
|
||||
|
||||
const ResizeHandle = (props: ResizeHandleProps) => {
|
||||
const { direction = 'horizontal' } = props;
|
||||
|
||||
if (direction === 'horizontal') {
|
||||
return (
|
||||
<PanelResizeHandle>
|
||||
<Flex
|
||||
sx={{
|
||||
w: 6,
|
||||
h: 'full',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ w: 0.5, h: 'calc(100% - 4px)', bg: 'base.850' }} />
|
||||
</Flex>
|
||||
</PanelResizeHandle>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<PanelResizeHandle>
|
||||
<Flex
|
||||
sx={{ w: 6, h: 'full', justifyContent: 'center', alignItems: 'center' }}
|
||||
sx={{
|
||||
w: 'full',
|
||||
h: 6,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ w: 0.5, h: 'calc(100% - 4px)', bg: 'base.850' }} />
|
||||
<Box sx={{ w: 'calc(100% - 4px)', h: 0.5, bg: 'base.850' }} />
|
||||
</Flex>
|
||||
</PanelResizeHandle>
|
||||
);
|
||||
|
||||
@ -4,20 +4,23 @@ import BoundingBoxSettings from 'features/parameters/components/AdvancedParamete
|
||||
import InfillAndScalingSettings from 'features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings';
|
||||
import SeamCorrectionSettings from 'features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamCorrectionSettings';
|
||||
import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
|
||||
import SymmetrySettings from 'features/parameters/components/AdvancedParameters/Output/SymmetrySettings';
|
||||
import SymmetryToggle from 'features/parameters/components/AdvancedParameters/Output/SymmetryToggle';
|
||||
import SeedSettings from 'features/parameters/components/AdvancedParameters/Seed/SeedSettings';
|
||||
import GenerateVariationsToggle from 'features/parameters/components/AdvancedParameters/Variations/GenerateVariations';
|
||||
import VariationsSettings from 'features/parameters/components/AdvancedParameters/Variations/VariationsSettings';
|
||||
import MainSettings from 'features/parameters/components/MainParameters/MainSettings';
|
||||
import ParametersAccordion, {
|
||||
ParametersAccordionItems,
|
||||
} from 'features/parameters/components/ParametersAccordion';
|
||||
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
|
||||
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';
|
||||
// import ParamSeedSettings from 'features/parameters/components/Parameters/Seed/ParamSeedSettings';
|
||||
// import ParamVariationSettings from 'features/parameters/components/Parameters/Variations/ParamVariationSettings';
|
||||
// import ParamSymmetrySettings from 'features/parameters/components/Parameters/Symmetry/ParamSymmetrySettings';
|
||||
// import ParamVariationToggle from 'features/parameters/components/Parameters/Variations/ParamVariationToggle';
|
||||
// import ParamSymmetryToggle from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryToggle';
|
||||
import ParamPositiveConditioning from 'features/parameters/components/Parameters/ParamPositiveConditioning';
|
||||
import ParamNegativeConditioning from 'features/parameters/components/Parameters/ParamNegativeConditioning';
|
||||
import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse';
|
||||
import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
|
||||
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
|
||||
|
||||
export default function UnifiedCanvasParameters() {
|
||||
const { t } = useTranslation();
|
||||
@ -35,12 +38,12 @@ export default function UnifiedCanvasParameters() {
|
||||
feature: undefined,
|
||||
content: <ImageToImageStrength />,
|
||||
},
|
||||
seed: {
|
||||
name: 'seed',
|
||||
header: `${t('parameters.seed')}`,
|
||||
feature: Feature.SEED,
|
||||
content: <SeedSettings />,
|
||||
},
|
||||
// seed: {
|
||||
// name: 'seed',
|
||||
// header: `${t('parameters.seed')}`,
|
||||
// feature: Feature.SEED,
|
||||
// content: <ParamSeedSettings />,
|
||||
// },
|
||||
boundingBox: {
|
||||
name: 'boundingBox',
|
||||
header: `${t('parameters.boundingBoxHeader')}`,
|
||||
@ -59,19 +62,19 @@ export default function UnifiedCanvasParameters() {
|
||||
feature: Feature.INFILL_AND_SCALING,
|
||||
content: <InfillAndScalingSettings />,
|
||||
},
|
||||
variations: {
|
||||
name: 'variations',
|
||||
header: `${t('parameters.variations')}`,
|
||||
feature: Feature.VARIATIONS,
|
||||
content: <VariationsSettings />,
|
||||
additionalHeaderComponents: <GenerateVariationsToggle />,
|
||||
},
|
||||
symmetry: {
|
||||
name: 'symmetry',
|
||||
header: `${t('parameters.symmetry')}`,
|
||||
content: <SymmetrySettings />,
|
||||
additionalHeaderComponents: <SymmetryToggle />,
|
||||
},
|
||||
// variations: {
|
||||
// name: 'variations',
|
||||
// header: `${t('parameters.variations')}`,
|
||||
// feature: Feature.VARIATIONS,
|
||||
// content: <ParamVariationSettings />,
|
||||
// additionalHeaderComponents: <ParamVariationToggle />,
|
||||
// },
|
||||
// symmetry: {
|
||||
// name: 'symmetry',
|
||||
// header: `${t('parameters.symmetry')}`,
|
||||
// content: <ParamSymmetrySettings />,
|
||||
// additionalHeaderComponents: <ParamSymmetryToggle />,
|
||||
// },
|
||||
};
|
||||
|
||||
return (
|
||||
@ -85,9 +88,12 @@ export default function UnifiedCanvasParameters() {
|
||||
position: 'absolute',
|
||||
}}
|
||||
>
|
||||
<PromptInput />
|
||||
<NegativePromptInput />
|
||||
<ParamPositiveConditioning />
|
||||
<ParamNegativeConditioning />
|
||||
<ProcessButtons />
|
||||
<ParamSeedCollapse />
|
||||
<ParamVariationCollapse />
|
||||
<ParamSymmetryCollapse />
|
||||
<ParametersAccordion accordionItems={unifiedCanvasAccordions} />
|
||||
</Flex>
|
||||
</OverlayScrollable>
|
||||
|
||||
@ -1,20 +1,12 @@
|
||||
import { Portal, TabPanel } from '@chakra-ui/react';
|
||||
import { memo } from 'react';
|
||||
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
|
||||
import CreateBaseSettings from './CreateBaseSettings';
|
||||
import { Panel, PanelGroup } 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 CreateTabContent from './CreateContent';
|
||||
import ResizeHandle from '../ResizeHandle';
|
||||
import AnimatedImageToImagePanel from 'features/parameters/components/AnimatedImageToImagePanel';
|
||||
import ImageToImageSettings from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings';
|
||||
import CreateSidePanelPinned from './CreateSidePanelPinned';
|
||||
import CreateTextParameters from './CreateBaseSettings';
|
||||
import CreateImageSettings from './CreateImageSettings';
|
||||
|
||||
const selector = createSelector(uiSelector, (ui) => {
|
||||
const {
|
||||
@ -34,7 +26,7 @@ const selector = createSelector(uiSelector, (ui) => {
|
||||
};
|
||||
});
|
||||
|
||||
const CreateTab = () => {
|
||||
const TextTab = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const {
|
||||
shouldPinGallery,
|
||||
@ -46,61 +38,39 @@ const CreateTab = () => {
|
||||
|
||||
return (
|
||||
<PanelGroup
|
||||
autoSaveId="createTab_pinned"
|
||||
autoSaveId="textTab"
|
||||
direction="horizontal"
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
>
|
||||
{shouldPinParametersPanel && shouldShowParametersPanel && (
|
||||
<>
|
||||
<Panel
|
||||
id="createTab_textParameters"
|
||||
id="textTab_settings"
|
||||
order={0}
|
||||
defaultSize={25}
|
||||
minSize={25}
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<CreateTextParameters />
|
||||
{/* <TextTabSettings /> */}
|
||||
<PinParametersPanelButton
|
||||
sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
|
||||
/>
|
||||
</Panel>
|
||||
{shouldShowImageParameters && (
|
||||
<>
|
||||
<ResizeHandle />
|
||||
<Panel
|
||||
id="createTab_imageParameters"
|
||||
order={1}
|
||||
defaultSize={25}
|
||||
minSize={25}
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<CreateImageSettings />
|
||||
</Panel>
|
||||
</>
|
||||
)}
|
||||
<ResizeHandle />
|
||||
</>
|
||||
)}
|
||||
<Panel
|
||||
id="createTab_content"
|
||||
id="textTab_main"
|
||||
order={2}
|
||||
minSize={30}
|
||||
onResize={() => {
|
||||
dispatch(requestCanvasRescale());
|
||||
}}
|
||||
>
|
||||
<CreateTabContent />
|
||||
{/* <TextTabMain /> */}
|
||||
</Panel>
|
||||
{shouldPinGallery && shouldShowGallery && (
|
||||
<>
|
||||
<ResizeHandle />
|
||||
<Panel id="createTab_gallery" order={3} defaultSize={10} minSize={10}>
|
||||
<ImageGalleryContent />
|
||||
</Panel>
|
||||
</>
|
||||
)}
|
||||
</PanelGroup>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(CreateTab);
|
||||
export default memo(TextTab);
|
||||
@ -0,0 +1,78 @@
|
||||
import { Portal, TabPanel } from '@chakra-ui/react';
|
||||
import { memo } from 'react';
|
||||
import { Panel, PanelGroup } from 'react-resizable-panels';
|
||||
import PinParametersPanelButton from '../../PinParametersPanelButton';
|
||||
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 TextTabMain from './TextTabMain';
|
||||
import ResizeHandle from '../ResizeHandle';
|
||||
import TextTabSettings from './TextTabParameters';
|
||||
|
||||
const selector = createSelector(uiSelector, (ui) => {
|
||||
const {
|
||||
shouldPinGallery,
|
||||
shouldShowGallery,
|
||||
shouldPinParametersPanel,
|
||||
shouldShowParametersPanel,
|
||||
shouldShowImageParameters,
|
||||
} = ui;
|
||||
|
||||
return {
|
||||
shouldPinGallery,
|
||||
shouldShowGallery,
|
||||
shouldPinParametersPanel,
|
||||
shouldShowParametersPanel,
|
||||
shouldShowImageParameters,
|
||||
};
|
||||
});
|
||||
|
||||
const TextTab = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const {
|
||||
shouldPinGallery,
|
||||
shouldShowGallery,
|
||||
shouldPinParametersPanel,
|
||||
shouldShowParametersPanel,
|
||||
shouldShowImageParameters,
|
||||
} = useAppSelector(selector);
|
||||
|
||||
return (
|
||||
<PanelGroup
|
||||
autoSaveId="textTab"
|
||||
direction="horizontal"
|
||||
style={{ height: '100%', width: '100%' }}
|
||||
>
|
||||
{shouldPinParametersPanel && shouldShowParametersPanel && (
|
||||
<>
|
||||
<Panel
|
||||
id="textTab_settings"
|
||||
order={0}
|
||||
defaultSize={25}
|
||||
minSize={25}
|
||||
style={{ position: 'relative' }}
|
||||
>
|
||||
<TextTabSettings />
|
||||
<PinParametersPanelButton
|
||||
sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
|
||||
/>
|
||||
</Panel>
|
||||
<ResizeHandle />
|
||||
</>
|
||||
)}
|
||||
<Panel
|
||||
id="textTab_main"
|
||||
order={2}
|
||||
minSize={30}
|
||||
onResize={() => {
|
||||
dispatch(requestCanvasRescale());
|
||||
}}
|
||||
>
|
||||
<TextTabMain />
|
||||
</Panel>
|
||||
</PanelGroup>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(TextTab);
|
||||
@ -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 CreateTabContent = () => {
|
||||
const TextTabMain = () => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -26,4 +26,4 @@ const CreateTabContent = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateTabContent;
|
||||
export default TextTabMain;
|
||||
@ -0,0 +1,108 @@
|
||||
import { Box, Flex } from '@chakra-ui/react';
|
||||
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
|
||||
import { memo } from 'react';
|
||||
import OverlayScrollable from '../../common/OverlayScrollable';
|
||||
import ParamPositiveConditioning from 'features/parameters/components/Parameters/ParamPositiveConditioning';
|
||||
import ParamNegativeConditioning from 'features/parameters/components/Parameters/ParamNegativeConditioning';
|
||||
import { createSelector } from '@reduxjs/toolkit';
|
||||
import { uiSelector } from 'features/ui/store/uiSelectors';
|
||||
import { useAppSelector } from 'app/store/storeHooks';
|
||||
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
||||
import ParamIterations from 'features/parameters/components/Parameters/ParamIterations';
|
||||
import ParamSteps from 'features/parameters/components/Parameters/ParamSteps';
|
||||
import ParamCFGScale from 'features/parameters/components/Parameters/ParamCFGScale';
|
||||
import ParamWidth from 'features/parameters/components/Parameters/ParamWidth';
|
||||
import ParamHeight from 'features/parameters/components/Parameters/ParamHeight';
|
||||
import ParamScheduler from 'features/parameters/components/Parameters/ParamScheduler';
|
||||
import ModelSelect from 'features/system/components/ModelSelect';
|
||||
import ParamSeedCollapse from 'features/parameters/components/Parameters/Seed/ParamSeedCollapse';
|
||||
import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
|
||||
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
|
||||
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
|
||||
import ParamHiresCollapse from 'features/parameters/components/Parameters/Hires/ParamHiresCollapse';
|
||||
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
|
||||
|
||||
const selector = createSelector(
|
||||
uiSelector,
|
||||
(ui) => {
|
||||
const { shouldUseSliders } = ui;
|
||||
|
||||
return { shouldUseSliders };
|
||||
},
|
||||
defaultSelectorOptions
|
||||
);
|
||||
|
||||
const TextTabParameters = () => {
|
||||
const { shouldUseSliders } = useAppSelector(selector);
|
||||
|
||||
return (
|
||||
<OverlayScrollable>
|
||||
<Flex
|
||||
sx={{
|
||||
gap: 2,
|
||||
flexDirection: 'column',
|
||||
h: 'full',
|
||||
w: 'full',
|
||||
position: 'absolute',
|
||||
}}
|
||||
>
|
||||
<ParamPositiveConditioning />
|
||||
<ParamNegativeConditioning />
|
||||
<ProcessButtons />
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
bg: 'base.800',
|
||||
p: 4,
|
||||
borderRadius: 'base',
|
||||
}}
|
||||
>
|
||||
{shouldUseSliders ? (
|
||||
<Flex sx={{ gap: 3, flexDirection: 'column' }}>
|
||||
<ParamIterations />
|
||||
<ParamSteps />
|
||||
<ParamCFGScale />
|
||||
<ParamWidth />
|
||||
<ParamHeight />
|
||||
<Flex gap={3} w="full">
|
||||
<Box flexGrow={2}>
|
||||
<ParamScheduler />
|
||||
</Box>
|
||||
<Box flexGrow={3}>
|
||||
<ModelSelect />
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
) : (
|
||||
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
|
||||
<Flex gap={3}>
|
||||
<ParamIterations />
|
||||
<ParamSteps />
|
||||
<ParamCFGScale />
|
||||
</Flex>
|
||||
<Flex gap={3} w="full">
|
||||
<Box flexGrow={2}>
|
||||
<ParamScheduler />
|
||||
</Box>
|
||||
<Box flexGrow={3}>
|
||||
<ModelSelect />
|
||||
</Box>
|
||||
</Flex>
|
||||
<ParamWidth />
|
||||
<ParamHeight />
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
<ParamSeedCollapse />
|
||||
<ParamVariationCollapse />
|
||||
<ParamNoiseCollapse />
|
||||
<ParamSymmetryCollapse />
|
||||
<ParamHiresCollapse />
|
||||
<ParamSeamlessCollapse />
|
||||
</Flex>
|
||||
</OverlayScrollable>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(TextTabParameters);
|
||||
@ -3,12 +3,12 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
||||
import { uiSelector } from 'features/ui/store/uiSelectors';
|
||||
import { memo } from 'react';
|
||||
import { Panel } from 'react-resizable-panels';
|
||||
import CreateTextParameters from './CreateBaseSettings';
|
||||
import CreateTextParameters from './TextTabParameters';
|
||||
import PinParametersPanelButton from '../../PinParametersPanelButton';
|
||||
import ResizeHandle from '../ResizeHandle';
|
||||
import ImageToImageSettings from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings';
|
||||
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
||||
import CreateImageSettings from './CreateImageSettings';
|
||||
import CreateImageSettings from '../image/ImageTabSettings';
|
||||
|
||||
const selector = createSelector(
|
||||
uiSelector,
|
||||
@ -1,7 +1,7 @@
|
||||
export const tabMap = [
|
||||
// 'txt2img',
|
||||
// 'img2img',
|
||||
'generate',
|
||||
'text',
|
||||
'image',
|
||||
// 'generate',
|
||||
'unifiedCanvas',
|
||||
'nodes',
|
||||
// 'postprocessing',
|
||||
|
||||
@ -18,9 +18,9 @@ export const initialUIState: UIState = {
|
||||
shouldPinGallery: true,
|
||||
shouldShowGallery: true,
|
||||
shouldHidePreview: false,
|
||||
openLinearAccordionItems: [],
|
||||
openGenerateAccordionItems: [],
|
||||
openUnifiedCanvasAccordionItems: [],
|
||||
textTabAccordionState: [],
|
||||
imageTabAccordionState: [],
|
||||
canvasTabAccordionState: [],
|
||||
floatingProgressImageRect: { x: 0, y: 0, width: 0, height: 0 },
|
||||
shouldShowProgressImages: false,
|
||||
shouldAutoShowProgressImages: false,
|
||||
@ -105,12 +105,16 @@ export const uiSlice = createSlice({
|
||||
}
|
||||
},
|
||||
openAccordionItemsChanged: (state, action: PayloadAction<number[]>) => {
|
||||
if (tabMap[state.activeTab] === 'generate') {
|
||||
state.openGenerateAccordionItems = action.payload;
|
||||
if (tabMap[state.activeTab] === 'text') {
|
||||
state.textTabAccordionState = action.payload;
|
||||
}
|
||||
|
||||
if (tabMap[state.activeTab] === 'image') {
|
||||
state.imageTabAccordionState = action.payload;
|
||||
}
|
||||
|
||||
if (tabMap[state.activeTab] === 'unifiedCanvas') {
|
||||
state.openUnifiedCanvasAccordionItems = action.payload;
|
||||
state.canvasTabAccordionState = action.payload;
|
||||
}
|
||||
},
|
||||
floatingProgressImageMoved: (state, action: PayloadAction<Coordinates>) => {
|
||||
|
||||
@ -26,9 +26,9 @@ export interface UIState {
|
||||
shouldHidePreview: boolean;
|
||||
shouldPinGallery: boolean;
|
||||
shouldShowGallery: boolean;
|
||||
openLinearAccordionItems: number[];
|
||||
openGenerateAccordionItems: number[];
|
||||
openUnifiedCanvasAccordionItems: number[];
|
||||
textTabAccordionState: number[];
|
||||
imageTabAccordionState: number[];
|
||||
canvasTabAccordionState: number[];
|
||||
floatingProgressImageRect: Rect;
|
||||
shouldShowProgressImages: boolean;
|
||||
shouldAutoShowProgressImages: boolean;
|
||||
|
||||
Reference in New Issue
Block a user