From 276dfc591bb4ffa70e005e356de39c6ad02c5ae8 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 1 May 2023 16:55:05 +1000
Subject: [PATCH] feat(ui): disable w/h when img2img & not fit

---
 .../MainParameters/HeightSlider.tsx           | 27 ++++++++++++++++---
 .../components/MainParameters/WidthSlider.tsx | 26 +++++++++++++++---
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/MainParameters/HeightSlider.tsx b/invokeai/frontend/web/src/features/parameters/components/MainParameters/HeightSlider.tsx
index 2609ae0e40..35e97fb266 100644
--- a/invokeai/frontend/web/src/features/parameters/components/MainParameters/HeightSlider.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/MainParameters/HeightSlider.tsx
@@ -13,17 +13,35 @@ const selector = createSelector(
   (generation, hotkeys, config) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.height;
-    const { height } = generation;
+    const { height, shouldFitToWidthHeight, isImageToImageEnabled } =
+      generation;
 
     const step = hotkeys.shift ? fineStep : coarseStep;
 
-    return { height, initial, min, sliderMax, inputMax, step };
+    return {
+      height,
+      initial,
+      min,
+      sliderMax,
+      inputMax,
+      step,
+      shouldFitToWidthHeight,
+      isImageToImageEnabled,
+    };
   }
 );
 
 const HeightSlider = () => {
-  const { height, initial, min, sliderMax, inputMax, step } =
-    useAppSelector(selector);
+  const {
+    height,
+    initial,
+    min,
+    sliderMax,
+    inputMax,
+    step,
+    shouldFitToWidthHeight,
+    isImageToImageEnabled,
+  } = useAppSelector(selector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -40,6 +58,7 @@ const HeightSlider = () => {
 
   return (
     <IAISlider
+      isDisabled={!shouldFitToWidthHeight && isImageToImageEnabled}
       label={t('parameters.height')}
       value={height}
       min={min}
diff --git a/invokeai/frontend/web/src/features/parameters/components/MainParameters/WidthSlider.tsx b/invokeai/frontend/web/src/features/parameters/components/MainParameters/WidthSlider.tsx
index 92fdf20a30..0b871245c7 100644
--- a/invokeai/frontend/web/src/features/parameters/components/MainParameters/WidthSlider.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/MainParameters/WidthSlider.tsx
@@ -13,17 +13,34 @@ const selector = createSelector(
   (generation, hotkeys, config) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       config.sd.width;
-    const { width } = generation;
+    const { width, shouldFitToWidthHeight, isImageToImageEnabled } = generation;
 
     const step = hotkeys.shift ? fineStep : coarseStep;
 
-    return { width, initial, min, sliderMax, inputMax, step };
+    return {
+      width,
+      initial,
+      min,
+      sliderMax,
+      inputMax,
+      step,
+      shouldFitToWidthHeight,
+      isImageToImageEnabled,
+    };
   }
 );
 
 const WidthSlider = () => {
-  const { width, initial, min, sliderMax, inputMax, step } =
-    useAppSelector(selector);
+  const {
+    width,
+    initial,
+    min,
+    sliderMax,
+    inputMax,
+    step,
+    shouldFitToWidthHeight,
+    isImageToImageEnabled,
+  } = useAppSelector(selector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -40,6 +57,7 @@ const WidthSlider = () => {
 
   return (
     <IAISlider
+      isDisabled={!shouldFitToWidthHeight && isImageToImageEnabled}
       label={t('parameters.width')}
       value={width}
       min={min}