Merge branch 'main' into release/invokeai-3-0-beta

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx

@@ -3,6 +3,7 @@ import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import { setAspectRatio } from 'features/ui/store/uiSlice';
+import { activeTabNameSelector } from '../../../../ui/store/uiSelectors';
 
 const aspectRatios = [
   { name: 'Free', value: null },
@@ -17,6 +18,10 @@ export default function ParamAspectRatio() {
   );
 
   const dispatch = useAppDispatch();
+  const shouldFitToWidthHeight = useAppSelector(
+    (state: RootState) => state.generation.shouldFitToWidthHeight
+  );
+  const activeTabName = useAppSelector(activeTabNameSelector);
 
   return (
     <Flex gap={2} flexGrow={1}>
@@ -26,6 +31,9 @@ export default function ParamAspectRatio() {
             key={ratio.name}
             size="sm"
             isChecked={aspectRatio === ratio.value}
+            isDisabled={
+              activeTabName === 'img2img' ? !shouldFitToWidthHeight : false
+            }
             onClick={() => dispatch(setAspectRatio(ratio.value))}
           >
             {ratio.name}

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx

@@ -8,6 +8,7 @@ import { MdOutlineSwapVert } from 'react-icons/md';
 import ParamAspectRatio from './ParamAspectRatio';
 import ParamHeight from './ParamHeight';
 import ParamWidth from './ParamWidth';
+import { activeTabNameSelector } from '../../../../ui/store/uiSelectors';
 
 export default function ParamSize() {
   const { t } = useTranslation();
@@ -15,6 +16,7 @@ export default function ParamSize() {
   const shouldFitToWidthHeight = useAppSelector(
     (state: RootState) => state.generation.shouldFitToWidthHeight
   );
+  const activeTabName = useAppSelector(activeTabNameSelector);
   return (
     <Flex
       sx={{
@@ -50,13 +52,24 @@ export default function ParamSize() {
           size="sm"
           icon={<MdOutlineSwapVert />}
           fontSize={20}
+          isDisabled={
+            activeTabName === 'img2img' ? !shouldFitToWidthHeight : false
+          }
           onClick={() => dispatch(toggleSize())}
         />
       </Flex>
       <Flex gap={2} alignItems="center">
         <Flex gap={2} flexDirection="column" width="full">
-          <ParamWidth isDisabled={!shouldFitToWidthHeight} />
+          <ParamWidth
-          <ParamHeight isDisabled={!shouldFitToWidthHeight} />
+            isDisabled={
+              activeTabName === 'img2img' ? !shouldFitToWidthHeight : false
+            }
+          />
+          <ParamHeight
+            isDisabled={
+              activeTabName === 'img2img' ? !shouldFitToWidthHeight : false
+            }
+          />
         </Flex>
       </Flex>
     </Flex>

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -38,6 +38,7 @@ import NodesTab from './tabs/Nodes/NodesTab';
 import ResizeHandle from './tabs/ResizeHandle';
 import TextToImageTab from './tabs/TextToImage/TextToImageTab';
 import UnifiedCanvasTab from './tabs/UnifiedCanvas/UnifiedCanvasTab';
+import { useFeatureStatus } from '../../system/hooks/useFeatureStatus';
 
 export interface InvokeTabInfo {
   id: InvokeTabName;
@@ -107,6 +108,7 @@ const InvokeTabs = () => {
   const isLightBoxOpen = useAppSelector(
     (state: RootState) => state.lightbox.isLightboxOpen
   );
+  const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;
 
   const { shouldPinGallery, shouldPinParametersPanel, shouldShowGallery } =
     useAppSelector((state: RootState) => state.ui);
@@ -119,7 +121,9 @@ const InvokeTabs = () => {
   useHotkeys(
     'z',
     () => {
+      if (isLightboxEnabled) {
         dispatch(setIsLightboxOpen(!isLightBoxOpen));
+      }
     },
     [isLightBoxOpen]
   );