From 31035b3e6327e5e0d6ba19ecf93bb8ba9c74db90 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 4 Jan 2024 00:53:00 +1100 Subject: [PATCH] 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. --- .../src/features/canvas/store/canvasSlice.ts | 7 ++- .../InfillAndScaling/ParamScaledHeight.tsx | 59 +++++-------------- .../InfillAndScaling/ParamScaledWidth.tsx | 50 +++++----------- 3 files changed, 33 insertions(+), 83 deletions(-) diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts index afa0b3e08b..15fcc81fd9 100644 --- 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 + action: PayloadAction> ) => { - state.scaledBoundingBoxDimensions = action.payload; + state.scaledBoundingBoxDimensions = { + ...state.scaledBoundingBoxDimensions, + ...action.payload, + }; }, setBoundingBoxDimensions: { reducer: ( diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx index 52bf6a590b..d518aa440b 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx @@ -3,8 +3,11 @@ 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'; @@ -12,75 +15,41 @@ 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 ( { - const { boundingBoxScaleMethod, scaledBoundingBoxDimensions, aspectRatio } = - canvas; + const { boundingBoxScaleMethod, scaledBoundingBoxDimensions } = canvas; return { - initial: optimalDimension, + optimalDimension, scaledBoundingBoxDimensions, - aspectRatio, isManual: boundingBoxScaleMethod === 'manual', }; } @@ -26,52 +27,29 @@ const selector = createMemoizedSelector( 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 (