fix(ui): fix scaled bbox sliders

Removed logic related to aspect ratio from the components. When the main bbox changes, if the scale method is auto, the reducers will handle the scaled bbox size appropriately. Somehow linking up the manual mode to the aspect ratio is tricky, and instead of adding complexity for a rarely-used mode, I'm leaving manual mode as fully manual.
invoke-ai · Jan 3, 2024 · 31035b3 · 31035b3
1 parent 6c05818
commit 31035b3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 83 deletions.
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
@@ -597,9 +597,12 @@ export const canvasSlice = createSlice({
     },
     setScaledBoundingBoxDimensions: (
       state,
-      action: PayloadAction<Dimensions>
+      action: PayloadAction<Partial<Dimensions>>
     ) => {
-      state.scaledBoundingBoxDimensions = action.payload;
+      state.scaledBoundingBoxDimensions = {
+        ...state.scaledBoundingBoxDimensions,
+        ...action.payload,
+      };
     },
     setBoundingBoxDimensions: {
       reducer: (

diff --git a/...tend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/...tend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
@@ -3,84 +3,53 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
-import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
+import {
+  CANVAS_GRID_SIZE_COARSE,
+  CANVAS_GRID_SIZE_FINE,
+} from 'features/canvas/store/constants';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createMemoizedSelector(
   [stateSelector, selectOptimalDimension],
   ({ canvas }, optimalDimension) => {
-    const { scaledBoundingBoxDimensions, boundingBoxScaleMethod, aspectRatio } =
-      canvas;
+    const { scaledBoundingBoxDimensions, boundingBoxScaleMethod } = canvas;
 
     return {
       optimalDimension,
       scaledBoundingBoxDimensions,
       isManual: boundingBoxScaleMethod === 'manual',
-      aspectRatio,
     };
   }
 );
 
 const ParamScaledHeight = () => {
   const dispatch = useAppDispatch();
-  const {
-    isManual,
-    scaledBoundingBoxDimensions,
-    aspectRatio,
-    optimalDimension,
-  } = useAppSelector(selector);
+  const { isManual, scaledBoundingBoxDimensions, optimalDimension } =
+    useAppSelector(selector);
 
   const { t } = useTranslation();
 
   const handleChangeScaledHeight = useCallback(
-    (v: number) => {
-      let newWidth = scaledBoundingBoxDimensions.width;
-      const newHeight = Math.floor(v);
-
-      if (aspectRatio) {
-        newWidth = roundToMultiple(newHeight * aspectRatio.value, 64);
-      }
-
-      dispatch(
-        setScaledBoundingBoxDimensions({
-          width: newWidth,
-          height: newHeight,
-        })
-      );
+    (height: number) => {
+      dispatch(setScaledBoundingBoxDimensions({ height }));
     },
-    [aspectRatio, dispatch, scaledBoundingBoxDimensions.width]
+    [dispatch]
   );
 
   const handleResetScaledHeight = useCallback(() => {
-    let resetWidth = scaledBoundingBoxDimensions.width;
-    const resetHeight = Math.floor(optimalDimension);
-
-    if (aspectRatio) {
-      resetWidth = roundToMultiple(resetHeight * aspectRatio.value, 64);
-    }
-
-    dispatch(
-      setScaledBoundingBoxDimensions({
-        width: resetWidth,
-        height: resetHeight,
-      })
-    );
-  }, [
-    aspectRatio,
-    dispatch,
-    optimalDimension,
-    scaledBoundingBoxDimensions.width,
-  ]);
+    dispatch(setScaledBoundingBoxDimensions({ height: optimalDimension }));
+  }, [dispatch, optimalDimension]);
 
   return (
     <InvControl isDisabled={!isManual} label={t('parameters.scaledHeight')}>
       <InvSlider
         min={64}
         max={1536}
-        step={64}
+        step={CANVAS_GRID_SIZE_COARSE}
+        fineStep={CANVAS_GRID_SIZE_FINE}
         value={scaledBoundingBoxDimensions.height}
         onChange={handleChangeScaledHeight}
         marks

diff --git a/...ntend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/...ntend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
@@ -3,75 +3,53 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
-import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
+import {
+  CANVAS_GRID_SIZE_COARSE,
+  CANVAS_GRID_SIZE_FINE,
+} from 'features/canvas/store/constants';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selector = createMemoizedSelector(
   [stateSelector, selectOptimalDimension],
   ({ canvas }, optimalDimension) => {
-    const { boundingBoxScaleMethod, scaledBoundingBoxDimensions, aspectRatio } =
-      canvas;
+    const { boundingBoxScaleMethod, scaledBoundingBoxDimensions } = canvas;
 
     return {
-      initial: optimalDimension,
+      optimalDimension,
       scaledBoundingBoxDimensions,
-      aspectRatio,
       isManual: boundingBoxScaleMethod === 'manual',
     };
   }
 );
 
 const ParamScaledWidth = () => {
   const dispatch = useAppDispatch();
-  const { initial, isManual, scaledBoundingBoxDimensions, aspectRatio } =
+  const { optimalDimension, isManual, scaledBoundingBoxDimensions } =
     useAppSelector(selector);
 
   const { t } = useTranslation();
 
   const handleChangeScaledWidth = useCallback(
-    (v: number) => {
-      const newWidth = Math.floor(v);
-      let newHeight = scaledBoundingBoxDimensions.height;
-
-      if (aspectRatio) {
-        newHeight = roundToMultiple(newWidth / aspectRatio.value, 64);
-      }
-
-      dispatch(
-        setScaledBoundingBoxDimensions({
-          width: newWidth,
-          height: newHeight,
-        })
-      );
+    (width: number) => {
+      dispatch(setScaledBoundingBoxDimensions({ width }));
     },
-    [aspectRatio, dispatch, scaledBoundingBoxDimensions.height]
+    [dispatch]
   );
 
   const handleResetScaledWidth = useCallback(() => {
-    const resetWidth = Math.floor(initial);
-    let resetHeight = scaledBoundingBoxDimensions.height;
-
-    if (aspectRatio) {
-      resetHeight = roundToMultiple(resetWidth / aspectRatio.value, 64);
-    }
-
-    dispatch(
-      setScaledBoundingBoxDimensions({
-        width: resetWidth,
-        height: resetHeight,
-      })
-    );
-  }, [aspectRatio, dispatch, initial, scaledBoundingBoxDimensions.height]);
+    dispatch(setScaledBoundingBoxDimensions({ width: optimalDimension }));
+  }, [dispatch, optimalDimension]);
 
   return (
     <InvControl isDisabled={!isManual} label={t('parameters.scaledWidth')}>
       <InvSlider
         min={64}
         max={1536}
-        step={64}
+        step={CANVAS_GRID_SIZE_COARSE}
+        fineStep={CANVAS_GRID_SIZE_FINE}
         value={scaledBoundingBoxDimensions.width}
         onChange={handleChangeScaledWidth}
         numberInputMax={4096}