fix(ui): h/w disabled bug

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

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAISlider from 'common/components/IAISlider';
+import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setHeight } from 'features/parameters/store/generationSlice';
 import { configSelector } from 'features/system/store/configSelectors';
@@ -13,8 +13,7 @@ const selector = createSelector(
   (generation, hotkeys, config) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.height;
-    const { height, shouldFitToWidthHeight, isImageToImageEnabled } =
+    const { height } = generation;
-      generation;
 
     const step = hotkeys.shift ? fineStep : coarseStep;
 
@@ -25,23 +24,18 @@ const selector = createSelector(
       sliderMax,
       inputMax,
       step,
-      shouldFitToWidthHeight,
-      isImageToImageEnabled,
     };
   }
 );
 
-const ParamHeight = () => {
+type ParamHeightProps = Omit<
-  const {
+  IAIFullSliderProps,
-    height,
+  'label' | 'value' | 'onChange'
-    initial,
+>;
-    min,
+
-    sliderMax,
+const ParamHeight = (props: ParamHeightProps) => {
-    inputMax,
+  const { height, initial, min, sliderMax, inputMax, step } =
-    step,
+    useAppSelector(selector);
-    shouldFitToWidthHeight,
-    isImageToImageEnabled,
-  } = useAppSelector(selector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -58,7 +52,6 @@ const ParamHeight = () => {
 
   return (
     <IAISlider
-      isDisabled={!shouldFitToWidthHeight && isImageToImageEnabled}
       label={t('parameters.height')}
       value={height}
       min={min}
@@ -70,6 +63,7 @@ const ParamHeight = () => {
       withReset
       withSliderMarks
       sliderNumberInputProps={{ max: inputMax }}
+      {...props}
     />
   );
 };

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

@@ -1,6 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAISlider from 'common/components/IAISlider';
+import { IAIFullSliderProps } from 'common/components/IAISlider';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setWidth } from 'features/parameters/store/generationSlice';
 import { configSelector } from 'features/system/store/configSelectors';
@@ -13,7 +14,7 @@ const selector = createSelector(
   (generation, hotkeys, config) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.width;
-    const { width, shouldFitToWidthHeight, isImageToImageEnabled } = generation;
+    const { width } = generation;
 
     const step = hotkeys.shift ? fineStep : coarseStep;
 
@@ -24,23 +25,15 @@ const selector = createSelector(
       sliderMax,
       inputMax,
       step,
-      shouldFitToWidthHeight,
-      isImageToImageEnabled,
     };
   }
 );
 
-const ParamWidth = () => {
+type ParamWidthProps = Omit<IAIFullSliderProps, 'label' | 'value' | 'onChange'>;
-  const {
+
-    width,
+const ParamWidth = (props: ParamWidthProps) => {
-    initial,
+  const { width, initial, min, sliderMax, inputMax, step } =
-    min,
+    useAppSelector(selector);
-    sliderMax,
-    inputMax,
-    step,
-    shouldFitToWidthHeight,
-    isImageToImageEnabled,
-  } = useAppSelector(selector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -57,7 +50,6 @@ const ParamWidth = () => {
 
   return (
     <IAISlider
-      isDisabled={!shouldFitToWidthHeight && isImageToImageEnabled}
       label={t('parameters.width')}
       value={width}
       min={min}
@@ -69,6 +61,7 @@ const ParamWidth = () => {
       withReset
       withSliderMarks
       sliderNumberInputProps={{ max: inputMax }}
+      {...props}
     />
   );
 };

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx

@@ -13,19 +13,21 @@ import ParamSampler from 'features/parameters/components/Parameters/Core/ParamSa
 import ModelSelect from 'features/system/components/ModelSelect';
 import ImageToImageStrength from 'features/parameters/components/Parameters/ImageToImage/ImageToImageStrength';
 import ImageToImageFit from 'features/parameters/components/Parameters/ImageToImage/ImageToImageFit';
+import { generationSelector } from 'features/parameters/store/generationSelectors';
 
 const selector = createSelector(
-  uiSelector,
+  [uiSelector, generationSelector],
-  (ui) => {
+  (ui, generation) => {
     const { shouldUseSliders } = ui;
+    const { shouldFitToWidthHeight } = generation;
 
-    return { shouldUseSliders };
+    return { shouldUseSliders, shouldFitToWidthHeight };
   },
   defaultSelectorOptions
 );
 
 const ImageToImageTabCoreParameters = () => {
-  const { shouldUseSliders } = useAppSelector(selector);
+  const { shouldUseSliders, shouldFitToWidthHeight } = useAppSelector(selector);
 
   return (
     <Flex
@@ -42,8 +44,8 @@ const ImageToImageTabCoreParameters = () => {
           <ParamIterations />
           <ParamSteps />
           <ParamCFGScale />
-          <ParamWidth />
+          <ParamWidth isDisabled={!shouldFitToWidthHeight} />
-          <ParamHeight />
+          <ParamHeight isDisabled={!shouldFitToWidthHeight} />
           <ImageToImageStrength />
           <ImageToImageFit />
           <Flex gap={3} w="full">
@@ -62,8 +64,8 @@ const ImageToImageTabCoreParameters = () => {
             <ParamSteps />
             <ParamCFGScale />
           </Flex>
-          <ParamWidth />
+          <ParamWidth isDisabled={!shouldFitToWidthHeight} />
-          <ParamHeight />
+          <ParamHeight isDisabled={!shouldFitToWidthHeight} />
           <Flex gap={3} w="full">
             <Box flexGrow={2}>
               <ParamSampler />