Move full screen hotkey to floating to prevent tab rerenders

frontend/src/features/tabs/components/FloatingGalleryButton.tsx

@@ -1,42 +1,21 @@
 import { MdPhotoLibrary } from 'react-icons/md';
-import { RootState, useAppDispatch, useAppSelector } from 'app/store';
+import { useAppDispatch, useAppSelector } from 'app/store';
 import IAIIconButton from 'common/components/IAIIconButton';
-import {
+import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
-  GalleryState,
-  setShouldShowGallery,
-} from 'features/gallery/store/gallerySlice';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
-import { createSelector } from '@reduxjs/toolkit';
+import { useHotkeys } from 'react-hotkeys-hook';
-import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import { floatingSelector } from './FloatingOptionsPanelButtons';
-import _ from 'lodash';
+import { setShouldShowOptionsPanel } from 'features/options/store/optionsSlice';
-
-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 { shouldShowGalleryButton, shouldPinGallery } = useAppSelector(
+  const {
-    floatingGallerySelcetor
+    shouldShowGallery,
-  );
+    shouldShowGalleryButton,
+    shouldPinGallery,
+    shouldShowOptionsPanel,
+    shouldPinOptionsPanel,
+  } = useAppSelector(floatingSelector);
 
   const handleShowGallery = () => {
     dispatch(setShouldShowGallery(true));
@@ -45,6 +24,22 @@ const FloatingGalleryButton = () => {
     }
   };
 
+  useHotkeys(
+    'f',
+    () => {
+      if (shouldShowGallery || shouldShowOptionsPanel) {
+        dispatch(setShouldShowOptionsPanel(false));
+        dispatch(setShouldShowGallery(false));
+      } else {
+        dispatch(setShouldShowOptionsPanel(true));
+        dispatch(setShouldShowGallery(true));
+      }
+      if (shouldPinGallery || shouldPinOptionsPanel)
+        setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
+    },
+    [shouldShowGallery, shouldShowOptionsPanel]
+  );
+
   return shouldShowGalleryButton ? (
     <IAIIconButton
       tooltip="Show Gallery (G)"

frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx

@@ -11,27 +11,47 @@ import _ from 'lodash';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
 import { FaSlidersH } from 'react-icons/fa';
 import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
+import { useHotkeys } from 'react-hotkeys-hook';
+import {
+  GalleryState,
+  setShouldShowGallery,
+} from 'features/gallery/store/gallerySlice';
 
-const floatingOptionsSelector = createSelector(
+export const floatingSelector = createSelector(
-  [(state: RootState) => state.options, activeTabNameSelector],
+  [
-  (options: OptionsState, activeTabName) => {
+    (state: RootState) => state.options,
+    (state: RootState) => state.gallery,
+    activeTabNameSelector,
+  ],
+  (options: OptionsState, gallery: GalleryState, activeTabName) => {
     const {
       shouldPinOptionsPanel,
       shouldShowOptionsPanel,
       shouldHoldOptionsPanelOpen,
     } = options;
 
+    const { shouldShowGallery, shouldPinGallery, shouldHoldGalleryOpen } =
+      gallery;
+
     const shouldShowOptionsPanelButton =
       !(
         shouldShowOptionsPanel ||
         (shouldHoldOptionsPanelOpen && !shouldPinOptionsPanel)
       ) && ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
 
+    const shouldShowGalleryButton =
+      !(shouldShowGallery || (shouldHoldGalleryOpen && !shouldPinGallery)) &&
+      ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
+
     return {
       shouldPinOptionsPanel,
       shouldShowProcessButtons:
         !shouldPinOptionsPanel || !shouldShowOptionsPanel,
       shouldShowOptionsPanelButton,
+      shouldShowOptionsPanel,
+      shouldShowGallery,
+      shouldPinGallery,
+      shouldShowGalleryButton,
     };
   },
   { memoizeOptions: { resultEqualityCheck: _.isEqual } }
@@ -40,10 +60,13 @@ const floatingOptionsSelector = createSelector(
 const FloatingOptionsPanelButtons = () => {
   const dispatch = useAppDispatch();
   const {
+    shouldShowOptionsPanel,
     shouldShowOptionsPanelButton,
     shouldShowProcessButtons,
     shouldPinOptionsPanel,
-  } = useAppSelector(floatingOptionsSelector);
+    shouldShowGallery,
+    shouldPinGallery,
+  } = useAppSelector(floatingSelector);
 
   const handleShowOptionsPanel = () => {
     dispatch(setShouldShowOptionsPanel(true));
@@ -52,6 +75,22 @@ const FloatingOptionsPanelButtons = () => {
     }
   };
 
+  useHotkeys(
+    'f',
+    () => {
+      if (shouldShowGallery || shouldShowOptionsPanel) {
+        dispatch(setShouldShowOptionsPanel(false));
+        dispatch(setShouldShowGallery(false));
+      } else {
+        dispatch(setShouldShowOptionsPanel(true));
+        dispatch(setShouldShowGallery(true));
+      }
+      if (shouldPinGallery || shouldPinOptionsPanel)
+        setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
+    },
+    [shouldShowGallery, shouldShowOptionsPanel]
+  );
+
   return shouldShowOptionsPanelButton ? (
     <div className="show-hide-button-options">
       <IAIIconButton

frontend/src/features/tabs/components/InvokeTabs.tsx

@@ -10,22 +10,15 @@ import NodesIcon from 'common/icons/NodesIcon';
 import PostprocessingIcon from 'common/icons/PostprocessingIcon';
 import TextToImageIcon from 'common/icons/TextToImageIcon';
 import {
-  OptionsState,
   setActiveTab,
   setIsLightBoxOpen,
-  setShouldShowOptionsPanel,
 } from 'features/options/store/optionsSlice';
 import ImageToImageWorkarea from './ImageToImage';
 import TextToImageWorkarea from './TextToImage';
 import Lightbox from 'features/lightbox/components/Lightbox';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
 import UnifiedCanvasWorkarea from './UnifiedCanvas/UnifiedCanvasWorkarea';
-import {
-  GalleryState,
-  setShouldShowGallery,
-} from 'features/gallery/store/gallerySlice';
 import UnifiedCanvasIcon from 'common/icons/UnifiedCanvasIcon';
-import { createSelector } from '@reduxjs/toolkit';
 import TrainingWIP from 'common/components/WorkInProgress/Training';
 import TrainingIcon from 'common/icons/TrainingIcon';
 
@@ -69,26 +62,6 @@ export const tabMap = _.map(tabDict, (tab, key) => key);
 const tabMapTypes = [...tabMap] as const;
 export type InvokeTabName = typeof tabMapTypes[number];
 
-const fullScreenSelector = createSelector(
-  [(state: RootState) => state.gallery, (state: RootState) => state.options],
-  (gallery: GalleryState, options: OptionsState) => {
-    const { shouldShowGallery, shouldPinGallery } = gallery;
-    const { shouldShowOptionsPanel, shouldPinOptionsPanel } = options;
-
-    return {
-      shouldShowGallery,
-      shouldPinGallery,
-      shouldShowOptionsPanel,
-      shouldPinOptionsPanel,
-    };
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: _.isEqual,
-    },
-  }
-);
-
 export default function InvokeTabs() {
   const activeTab = useAppSelector(
     (state: RootState) => state.options.activeTab
@@ -97,13 +70,6 @@ export default function InvokeTabs() {
     (state: RootState) => state.options.isLightBoxOpen
   );
 
-  const {
-    shouldPinGallery,
-    shouldShowGallery,
-    shouldPinOptionsPanel,
-    shouldShowOptionsPanel,
-  } = useAppSelector(fullScreenSelector);
-
   const dispatch = useAppDispatch();
 
   useHotkeys('1', () => {
@@ -139,22 +105,6 @@ export default function InvokeTabs() {
     [isLightBoxOpen]
   );
 
-  useHotkeys(
-    'f',
-    () => {
-      if (shouldShowGallery || shouldShowOptionsPanel) {
-        dispatch(setShouldShowOptionsPanel(false));
-        dispatch(setShouldShowGallery(false));
-      } else {
-        dispatch(setShouldShowOptionsPanel(true));
-        dispatch(setShouldShowGallery(true));
-      }
-      if (shouldPinGallery || shouldPinOptionsPanel)
-        setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
-    },
-    [shouldShowGallery, shouldShowOptionsPanel]
-  );
-
   const renderTabs = () => {
     const tabsToRender: ReactElement[] = [];
     Object.keys(tabDict).forEach((key) => {