diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
index a1e8785e2e..f7ce52dff1 100644
--- a/frontend/src/app/App.tsx
+++ b/frontend/src/app/App.tsx
@@ -4,78 +4,15 @@ import Console from 'features/system/components/Console';
import { keepGUIAlive } from './utils';
import InvokeTabs from 'features/tabs/components/InvokeTabs';
import ImageUploader from 'common/components/ImageUploader';
-import { RootState, useAppSelector } from 'app/store';
-import FloatingGalleryButton from 'features/tabs/components/FloatingGalleryButton';
-import FloatingOptionsPanelButtons from 'features/tabs/components/FloatingOptionsPanelButtons';
-import { createSelector } from '@reduxjs/toolkit';
-import { GalleryState } from 'features/gallery/store/gallerySlice';
-import { OptionsState } from 'features/options/store/optionsSlice';
-import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
-import { SystemState } from 'features/system/store/systemSlice';
-import _ from 'lodash';
-import { Model } from './invokeai';
import useToastWatcher from 'features/system/hooks/useToastWatcher';
+import FloatingOptionsPanelButtons from 'features/tabs/components/FloatingOptionsPanelButtons';
+import FloatingGalleryButton from 'features/tabs/components/FloatingGalleryButton';
+
keepGUIAlive();
-const appSelector = createSelector(
- [
- (state: RootState) => state.gallery,
- (state: RootState) => state.options,
- (state: RootState) => state.system,
- activeTabNameSelector,
- ],
- (
- gallery: GalleryState,
- options: OptionsState,
- system: SystemState,
- activeTabName
- ) => {
- const { shouldShowGallery, shouldHoldGalleryOpen, shouldPinGallery } =
- gallery;
- const {
- shouldShowOptionsPanel,
- shouldHoldOptionsPanelOpen,
- shouldPinOptionsPanel,
- } = options;
-
- const modelStatusText = _.reduce(
- system.model_list,
- (acc: string, cur: Model, key: string) => {
- if (cur.status === 'active') acc = key;
- return acc;
- },
- ''
- );
-
- const shouldShowGalleryButton =
- !(shouldShowGallery || (shouldHoldGalleryOpen && !shouldPinGallery)) &&
- ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
-
- const shouldShowOptionsPanelButton =
- !(
- shouldShowOptionsPanel ||
- (shouldHoldOptionsPanelOpen && !shouldPinOptionsPanel)
- ) && ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
-
- return {
- modelStatusText,
- shouldShowGalleryButton,
- shouldShowOptionsPanelButton,
- };
- },
- {
- memoizeOptions: {
- resultEqualityCheck: _.isEqual,
- },
- }
-);
-
const App = () => {
- const { shouldShowGalleryButton, shouldShowOptionsPanelButton } =
- useAppSelector(appSelector);
-
useToastWatcher();
return (
@@ -89,9 +26,9 @@ const App = () => {
- {shouldShowGalleryButton && }
- {shouldShowOptionsPanelButton && }
+
+
);
};
diff --git a/frontend/src/features/tabs/components/FloatingGalleryButton.tsx b/frontend/src/features/tabs/components/FloatingGalleryButton.tsx
index 780a5d0897..01ba941d15 100644
--- a/frontend/src/features/tabs/components/FloatingGalleryButton.tsx
+++ b/frontend/src/features/tabs/components/FloatingGalleryButton.tsx
@@ -1,13 +1,41 @@
import { MdPhotoLibrary } from 'react-icons/md';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import IAIIconButton from 'common/components/IAIIconButton';
-import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
+import {
+ GalleryState,
+ setShouldShowGallery,
+} from 'features/gallery/store/gallerySlice';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
+import { createSelector } from '@reduxjs/toolkit';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import _ from 'lodash';
+
+const floatingGallerySelcetor = createSelector(
+ [(state: RootState) => state.gallery, activeTabNameSelector],
+ (gallery: GalleryState, activeTabName) => {
+ const { shouldShowGallery, shouldHoldGalleryOpen, shouldPinGallery } =
+ gallery;
+
+ const shouldShowGalleryButton =
+ !(shouldShowGallery || (shouldHoldGalleryOpen && !shouldPinGallery)) &&
+ ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
+
+ return {
+ shouldPinGallery,
+ shouldShowGalleryButton,
+ };
+ },
+ {
+ memoizeOptions: {
+ resultEqualityCheck: _.isEqual,
+ },
+ }
+);
const FloatingGalleryButton = () => {
const dispatch = useAppDispatch();
- const shouldPinGallery = useAppSelector(
- (state: RootState) => state.gallery.shouldPinGallery
+ const { shouldShowGalleryButton, shouldPinGallery } = useAppSelector(
+ floatingGallerySelcetor
);
const handleShowGallery = () => {
@@ -17,7 +45,7 @@ const FloatingGalleryButton = () => {
}
};
- return (
+ return shouldShowGalleryButton ? (
{
>
- );
+ ) : null;
};
export default FloatingGalleryButton;
diff --git a/frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx b/frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx
index 5473284da1..114bb4250e 100644
--- a/frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx
+++ b/frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx
@@ -10,16 +10,28 @@ import InvokeButton from 'features/options/components/ProcessButtons/InvokeButto
import _ from 'lodash';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
import { FaSlidersH } from 'react-icons/fa';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
-const canInvokeSelector = createSelector(
- (state: RootState) => state.options,
+const floatingOptionsSelector = createSelector(
+ [(state: RootState) => state.options, activeTabNameSelector],
+ (options: OptionsState, activeTabName) => {
+ const {
+ shouldPinOptionsPanel,
+ shouldShowOptionsPanel,
+ shouldHoldOptionsPanelOpen,
+ } = options;
+
+ const shouldShowOptionsPanelButton =
+ !(
+ shouldShowOptionsPanel ||
+ (shouldHoldOptionsPanelOpen && !shouldPinOptionsPanel)
+ ) && ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
- (options: OptionsState) => {
- const { shouldPinOptionsPanel, shouldShowOptionsPanel } = options;
return {
shouldPinOptionsPanel,
shouldShowProcessButtons:
!shouldPinOptionsPanel || !shouldShowOptionsPanel,
+ shouldShowOptionsPanelButton,
};
},
{ memoizeOptions: { resultEqualityCheck: _.isEqual } }
@@ -27,8 +39,11 @@ const canInvokeSelector = createSelector(
const FloatingOptionsPanelButtons = () => {
const dispatch = useAppDispatch();
- const { shouldShowProcessButtons, shouldPinOptionsPanel } =
- useAppSelector(canInvokeSelector);
+ const {
+ shouldShowOptionsPanelButton,
+ shouldShowProcessButtons,
+ shouldPinOptionsPanel,
+ } = useAppSelector(floatingOptionsSelector);
const handleShowOptionsPanel = () => {
dispatch(setShouldShowOptionsPanel(true));
@@ -37,7 +52,7 @@ const FloatingOptionsPanelButtons = () => {
}
};
- return (
+ return shouldShowOptionsPanelButton ? (
{
>
)}
- );
+ ) : null;
};
export default FloatingOptionsPanelButtons;