From 279468c0e87226bef38a02b78dd305e7dd161bbc Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Tue, 9 May 2023 18:25:53 +1000 Subject: [PATCH] feat(ui): restore tab names --- invokeai/frontend/web/public/locales/en.json | 2 +- .../listeners/userInvokedImageToImage.ts | 2 +- .../listeners/userInvokedTextToImage.ts | 2 +- .../web/src/common/hooks/useGlobalHotkeys.ts | 4 +- .../FloatingParametersPanelButtons.tsx | 2 +- .../src/features/ui/components/InvokeTabs.tsx | 10 +-- .../ui/components/ParametersDrawer.tsx | 12 ++-- .../ui/components/ParametersPinnedWrapper.tsx | 19 ++++++ .../ImageToImageTab.tsx} | 59 ++++-------------- .../ImageToImageTabCoreParameters.tsx} | 4 +- .../ImageToImageTabParameters.tsx} | 8 +-- .../tabs/TextToImage/TextToImageTab.tsx | 18 ++++++ .../TextToImageTabCoreParameters.tsx} | 4 +- .../TextToImageTabMain.tsx} | 4 +- .../TextToImageTabParameters.tsx} | 8 +-- .../tabs/UnifiedCanvas/UnifiedCanvasTab.tsx | 39 +++--------- .../tabs/image/ImageTabImageParameters.tsx | 61 ------------------- .../ui/components/tabs/text/TextTab.tsx | 55 ----------------- .../web/src/features/ui/store/tabMap.ts | 4 +- .../web/src/features/ui/store/uiSlice.ts | 4 +- 20 files changed, 90 insertions(+), 231 deletions(-) rename invokeai/frontend/web/src/features/ui/components/tabs/{image/ImageTab.tsx => ImageToImage/ImageToImageTab.tsx} (52%) rename invokeai/frontend/web/src/features/ui/components/tabs/{image/ImageTabCoreParameters.tsx => ImageToImage/ImageToImageTabCoreParameters.tsx} (96%) rename invokeai/frontend/web/src/features/ui/components/tabs/{image/ImageTabParameters.tsx => ImageToImage/ImageToImageTabParameters.tsx} (84%) create mode 100644 invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx rename invokeai/frontend/web/src/features/ui/components/tabs/{text/TextTabCoreParameters.tsx => TextToImage/TextToImageTabCoreParameters.tsx} (95%) rename invokeai/frontend/web/src/features/ui/components/tabs/{text/TextTabMain.tsx => TextToImage/TextToImageTabMain.tsx} (87%) rename invokeai/frontend/web/src/features/ui/components/tabs/{text/TextTabParameters.tsx => TextToImage/TextToImageTabParameters.tsx} (86%) delete mode 100644 invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabImageParameters.tsx delete mode 100644 invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index fe104a762b..13c99c22f2 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -54,7 +54,7 @@ "img2img": "Image To Image", "unifiedCanvas": "Unified Canvas", "linear": "Linear", - "nodes": "Nodes", + "nodes": "Node Editor", "postprocessing": "Post Processing", "nodesDesc": "A node based system for the generation of images is under development currently. Stay tuned for updates about this amazing feature.", "postProcessing": "Post Processing", diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedImageToImage.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedImageToImage.ts index d326e2a1d9..e747aefa08 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedImageToImage.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedImageToImage.ts @@ -10,7 +10,7 @@ const moduleLog = log.child({ namespace: 'invoke' }); export const addUserInvokedImageToImageListener = () => { startAppListening({ predicate: (action): action is ReturnType => - userInvoked.match(action) && action.payload === 'image', + userInvoked.match(action) && action.payload === 'img2img', effect: (action, { getState, dispatch }) => { const state = getState(); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedTextToImage.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedTextToImage.ts index f4cced4ade..e3eb5d0b38 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedTextToImage.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/userInvokedTextToImage.ts @@ -10,7 +10,7 @@ const moduleLog = log.child({ namespace: 'invoke' }); export const addUserInvokedTextToImageListener = () => { startAppListening({ predicate: (action): action is ReturnType => - userInvoked.match(action) && action.payload === 'text', + userInvoked.match(action) && action.payload === 'txt2img', effect: (action, { getState, dispatch }) => { const state = getState(); diff --git a/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts b/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts index 98aa824790..3935a390fb 100644 --- a/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts +++ b/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts @@ -61,11 +61,11 @@ export const useGlobalHotkeys = () => { }); useHotkeys('1', () => { - dispatch(setActiveTab('text')); + dispatch(setActiveTab('txt2img')); }); useHotkeys('2', () => { - dispatch(setActiveTab('image')); + dispatch(setActiveTab('img2img')); }); useHotkeys('3', () => { diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx index 8ceb8ee20a..95ac1257c0 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx @@ -40,7 +40,7 @@ export const floatingParametersPanelButtonSelector = createSelector( const shouldShowParametersPanelButton = !canvasBetaLayoutCheck && !shouldShowParametersPanel && - ['text', 'image', 'unifiedCanvas'].includes(activeTabName); + ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName); return { shouldPinParametersPanel, diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index f199ab05dc..47a250b933 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx @@ -26,12 +26,12 @@ import { configSelector } from 'features/system/store/configSelectors'; import { isEqual } from 'lodash-es'; import { Panel, PanelGroup } from 'react-resizable-panels'; import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent'; -import TextTab from './tabs/text/TextTab'; +import TextToImageTab from './tabs/TextToImage/TextToImageTab'; import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab'; import NodesTab from './tabs/Nodes/NodesTab'; import { FaImage } from 'react-icons/fa'; import ResizeHandle from './tabs/ResizeHandle'; -import ImageTab from './tabs/image/ImageTab'; +import ImageTab from './tabs/ImageToImage/ImageToImageTab'; export interface InvokeTabInfo { id: InvokeTabName; @@ -41,12 +41,12 @@ export interface InvokeTabInfo { const tabs: InvokeTabInfo[] = [ { - id: 'text', + id: 'txt2img', icon: , - content: , + content: , }, { - id: 'image', + id: 'img2img', icon: , content: , }, diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx index 5219d5b1e8..ce4ca4f438 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx @@ -14,8 +14,8 @@ import { import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice'; import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer'; import PinParametersPanelButton from './PinParametersPanelButton'; -import TextTabParameters from './tabs/text/TextTabParameters'; -import ImageTabParameters from './tabs/image/ImageTabParameters'; +import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters'; +import ImageToImageTabParameters from './tabs/ImageToImage/ImageToImageTabParameters'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import UnifiedCanvasParameters from './tabs/UnifiedCanvas/UnifiedCanvasParameters'; @@ -50,12 +50,12 @@ const ParametersDrawer = () => { }; const drawerContent = useMemo(() => { - if (activeTabName === 'text') { - return ; + if (activeTabName === 'txt2img') { + return ; } - if (activeTabName === 'image') { - return ; + if (activeTabName === 'img2img') { + return ; } if (activeTabName === 'unifiedCanvas') { diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx index 82bf38f26c..407187294c 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx @@ -3,10 +3,29 @@ import { PropsWithChildren, memo } from 'react'; import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; import OverlayScrollable from './common/OverlayScrollable'; import PinParametersPanelButton from './PinParametersPanelButton'; +import { createSelector } from '@reduxjs/toolkit'; +import { uiSelector } from '../store/uiSelectors'; +import { useAppSelector } from 'app/store/storeHooks'; + +const selector = createSelector(uiSelector, (ui) => { + const { shouldPinParametersPanel, shouldShowParametersPanel } = ui; + + return { + shouldPinParametersPanel, + shouldShowParametersPanel, + }; +}); type ParametersPinnedWrapperProps = PropsWithChildren; const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => { + const { shouldPinParametersPanel, shouldShowParametersPanel } = + useAppSelector(selector); + + if (!(shouldPinParametersPanel && shouldShowParametersPanel)) { + return null; + } + return ( { - const { - shouldPinGallery, - shouldShowGallery, - shouldPinParametersPanel, - shouldShowParametersPanel, - shouldShowImageParameters, - } = ui; - - return { - shouldPinGallery, - shouldShowGallery, - shouldPinParametersPanel, - shouldShowParametersPanel, - shouldShowImageParameters, - }; -}); - -const TextTab = () => { +const ImageToImageTab = () => { const dispatch = useAppDispatch(); const panelGroupRef = useRef(null); @@ -49,21 +22,11 @@ const TextTab = () => { panelGroupRef.current.setLayout([50, 50]); }, []); - const { - shouldPinGallery, - shouldShowGallery, - shouldPinParametersPanel, - shouldShowParametersPanel, - shouldShowImageParameters, - } = useAppSelector(selector); - return ( - {shouldPinParametersPanel && shouldShowParametersPanel && ( - - - - )} + + + { dispatch(requestCanvasRescale()); }} > - + @@ -98,4 +61,4 @@ const TextTab = () => { ); }; -export default memo(TextTab); +export default memo(ImageToImageTab); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx similarity index 96% rename from invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabCoreParameters.tsx rename to invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx index 9f16b37e8e..97a4a2d580 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx @@ -24,7 +24,7 @@ const selector = createSelector( defaultSelectorOptions ); -const ImageTabCoreParameters = () => { +const ImageToImageTabCoreParameters = () => { const { shouldUseSliders } = useAppSelector(selector); return ( @@ -80,4 +80,4 @@ const ImageTabCoreParameters = () => { ); }; -export default memo(ImageTabCoreParameters); +export default memo(ImageToImageTabCoreParameters); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx similarity index 84% rename from invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx rename to invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx index 60b9d11822..3b3daeaa4c 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx @@ -7,15 +7,15 @@ import ParamVariationCollapse from 'features/parameters/components/Parameters/Va import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse'; -import ImageTabCoreParameters from './ImageTabCoreParameters'; +import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters'; -const ImageTabParameters = () => { +const ImageToImageTabParameters = () => { return ( <> - + @@ -25,4 +25,4 @@ const ImageTabParameters = () => { ); }; -export default memo(ImageTabParameters); +export default memo(ImageToImageTabParameters); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx new file mode 100644 index 0000000000..87e77cc3ba --- /dev/null +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTab.tsx @@ -0,0 +1,18 @@ +import { Flex } from '@chakra-ui/react'; +import { memo } from 'react'; +import TextToImageTabMain from './TextToImageTabMain'; +import TextToImageTabParameters from './TextToImageTabParameters'; +import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; + +const TextToImageTab = () => { + return ( + + + + + + + ); +}; + +export default memo(TextToImageTab); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx similarity index 95% rename from invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabCoreParameters.tsx rename to invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx index 1b463a777b..d7edef148c 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx @@ -22,7 +22,7 @@ const selector = createSelector( defaultSelectorOptions ); -const TextTabCoreParameters = () => { +const TextToImageTabCoreParameters = () => { const { shouldUseSliders } = useAppSelector(selector); return ( @@ -74,4 +74,4 @@ const TextTabCoreParameters = () => { ); }; -export default memo(TextTabCoreParameters); +export default memo(TextToImageTabCoreParameters); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabMain.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx similarity index 87% rename from invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabMain.tsx rename to invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx index 7970bb13f4..b6cfcf72c3 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabMain.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx @@ -1,7 +1,7 @@ import { Box, Flex } from '@chakra-ui/react'; import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay'; -const TextTabMain = () => { +const TextToImageTabMain = () => { return ( { ); }; -export default TextTabMain; +export default TextToImageTabMain; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx similarity index 86% rename from invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx rename to invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx index 1977fd9fa1..0976e3eef2 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTabParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx @@ -8,15 +8,15 @@ import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ 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'; -import TextTabCoreParameters from './TextTabCoreParameters'; +import TextToImageTabCoreParameters from './TextToImageTabCoreParameters'; -const TextTabParameters = () => { +const TextToImageTabParameters = () => { return ( <> - + @@ -27,4 +27,4 @@ const TextTabParameters = () => { ); }; -export default memo(TextTabParameters); +export default memo(TextToImageTabParameters); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx index 999adb1d91..2d591d1ecc 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasTab.tsx @@ -1,54 +1,29 @@ -import { Box, Flex, TabPanel } from '@chakra-ui/react'; +import { Flex } 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 { useAppSelector } from 'app/store/storeHooks'; import UnifiedCanvasContent from './UnifiedCanvasContent'; -import ResizeHandle from '../ResizeHandle'; import UnifiedCanvasParameters from './UnifiedCanvasParameters'; import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta'; -import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; const selector = createSelector(uiSelector, (ui) => { - const { - shouldPinGallery, - shouldShowGallery, - shouldPinParametersPanel, - shouldShowParametersPanel, - shouldUseCanvasBetaLayout, - } = ui; + const { shouldUseCanvasBetaLayout } = ui; return { - shouldPinGallery, - shouldShowGallery, - shouldPinParametersPanel, - shouldShowParametersPanel, shouldUseCanvasBetaLayout, }; }); const UnifiedCanvasTab = () => { - const dispatch = useAppDispatch(); - const { - shouldPinGallery, - shouldShowGallery, - shouldPinParametersPanel, - shouldShowParametersPanel, - shouldUseCanvasBetaLayout, - } = useAppSelector(selector); + const { shouldUseCanvasBetaLayout } = useAppSelector(selector); return ( - {shouldPinParametersPanel && shouldShowParametersPanel && ( - - - - )} + + + {shouldUseCanvasBetaLayout ? ( ) : ( diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabImageParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabImageParameters.tsx deleted file mode 100644 index 3d1fd3e950..0000000000 --- a/invokeai/frontend/web/src/features/ui/components/tabs/image/ImageTabImageParameters.tsx +++ /dev/null @@ -1,61 +0,0 @@ -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'; -import InitialImagePreview from 'features/parameters/components/AdvancedParameters/ImageToImage/InitialImagePreview'; -import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength'; -import ImageToImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit'; -import InitialImageButtons from 'common/components/ImageToImageButtons'; - -const selector = createSelector( - uiSelector, - (ui) => { - const { shouldUseSliders } = ui; - - return { shouldUseSliders }; - }, - defaultSelectorOptions -); - -const ImageTabParameters = () => { - const { shouldUseSliders } = useAppSelector(selector); - - return ( - - - - - - - - ); -}; - -export default memo(ImageTabParameters); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx deleted file mode 100644 index e05f1fd11e..0000000000 --- a/invokeai/frontend/web/src/features/ui/components/tabs/text/TextTab.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { Box, Flex, 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 TextTabParameters from './TextTabParameters'; -import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; -import ParametersPinnedWrapper from '../../ParametersPinnedWrapper'; - -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 ( - - {shouldPinParametersPanel && shouldShowParametersPanel && ( - - - - )} - - - ); -}; - -export default memo(TextTab); diff --git a/invokeai/frontend/web/src/features/ui/store/tabMap.ts b/invokeai/frontend/web/src/features/ui/store/tabMap.ts index 30bfb459a0..becf52886e 100644 --- a/invokeai/frontend/web/src/features/ui/store/tabMap.ts +++ b/invokeai/frontend/web/src/features/ui/store/tabMap.ts @@ -1,6 +1,6 @@ export const tabMap = [ - 'text', - 'image', + 'txt2img', + 'img2img', // 'generate', 'unifiedCanvas', 'nodes', diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts index b585c5300b..60f65079cf 100644 --- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts +++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts @@ -105,11 +105,11 @@ export const uiSlice = createSlice({ } }, openAccordionItemsChanged: (state, action: PayloadAction) => { - if (tabMap[state.activeTab] === 'text') { + if (tabMap[state.activeTab] === 'txt2img') { state.textTabAccordionState = action.payload; } - if (tabMap[state.activeTab] === 'image') { + if (tabMap[state.activeTab] === 'img2img') { state.imageTabAccordionState = action.payload; }