fix(ui): force dims on scaled bbox when manual scaling + locked aspec…

…t ratio Closes #5590
invoke-ai · Sep 1, 2024 · e9df412 · e9df412
1 parent 84640a0
commit e9df412
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts
@@ -42,7 +42,6 @@ import type {
   CLIPVisionModelV2,
   ControlModeV2,
   ControlNetConfig,
-  Dimensions,
   EntityBrushLineAddedPayload,
   EntityEraserLineAddedPayload,
   EntityIdentifierPayload,
@@ -669,8 +668,17 @@ export const canvasSlice = createSlice({
       state.selectedEntityIdentifier = { type: 'inpaint_mask', id: data.id };
     },
     //#region BBox
-    bboxScaledSizeChanged: (state, action: PayloadAction<Partial<Dimensions>>) => {
-      state.bbox.scaledSize = { ...state.bbox.scaledSize, ...action.payload };
+    bboxScaledWidthChanged: (state, action: PayloadAction<number>) => {
+      state.bbox.scaledSize.width = action.payload;
+      if (state.bbox.aspectRatio.isLocked) {
+        state.bbox.scaledSize.height = roundToMultiple(state.bbox.scaledSize.width / state.bbox.aspectRatio.value, 8);
+      }
+    },
+    bboxScaledHeightChanged: (state, action: PayloadAction<number>) => {
+      state.bbox.scaledSize.height = action.payload;
+      if (state.bbox.aspectRatio.isLocked) {
+        state.bbox.scaledSize.width = roundToMultiple(state.bbox.scaledSize.height * state.bbox.aspectRatio.value, 8);
+      }
     },
     bboxScaleMethodChanged: (state, action: PayloadAction<BoundingBoxScaleMethod>) => {
       state.bbox.scaleMethod = action.payload;
@@ -721,6 +729,7 @@ export const canvasSlice = createSlice({
     },
     bboxAspectRatioLockToggled: (state) => {
       state.bbox.aspectRatio.isLocked = !state.bbox.aspectRatio.isLocked;
+      syncScaledSize(state);
     },
     bboxAspectRatioIdChanged: (state, action: PayloadAction<{ id: AspectRatioID }>) => {
       const { id } = action.payload;
@@ -1118,7 +1127,8 @@ export const {
   allEntitiesOfTypeIsHiddenToggled,
   // bbox
   bboxChanged,
-  bboxScaledSizeChanged,
+  bboxScaledWidthChanged,
+  bboxScaledHeightChanged,
   bboxScaleMethodChanged,
   bboxWidthChanged,
   bboxHeightChanged,
@@ -1180,7 +1190,7 @@ export const canvasPersistConfig: PersistConfig<CanvasState> = {
 };
 
 const syncScaledSize = (state: CanvasState) => {
-  if (state.bbox.scaleMethod === 'auto') {
+  if (state.bbox.scaleMethod === 'auto' || (state.bbox.scaleMethod === 'manual' && state.bbox.aspectRatio.isLocked)) {
     const { width, height } = state.bbox.rect;
     state.bbox.scaledSize = getScaledBoundingBoxDimensions({ width, height }, state.bbox.optimalDimension);
   }

diff --git a/...tend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/...tend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { bboxScaledSizeChanged } from 'features/controlLayers/store/canvasSlice';
+import { bboxScaledHeightChanged } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasSlice, selectOptimalDimension } from 'features/controlLayers/store/selectors';
 import { selectConfigSlice } from 'features/system/store/configSlice';
 import { memo, useCallback } from 'react';
@@ -24,7 +24,7 @@ const ParamScaledHeight = () => {
 
   const onChange = useCallback(
     (height: number) => {
-      dispatch(bboxScaledSizeChanged({ height }));
+      dispatch(bboxScaledHeightChanged(height));
     },
     [dispatch]
   );

diff --git a/...ntend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/...ntend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
@@ -1,7 +1,7 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { bboxScaledSizeChanged } from 'features/controlLayers/store/canvasSlice';
+import { bboxScaledWidthChanged } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasSlice, selectOptimalDimension } from 'features/controlLayers/store/selectors';
 import { selectConfigSlice } from 'features/system/store/configSlice';
 import { memo, useCallback } from 'react';
@@ -23,7 +23,7 @@ const ParamScaledWidth = () => {
   const config = useAppSelector(selectScaledBoundingBoxWidthConfig);
   const onChange = useCallback(
     (width: number) => {
-      dispatch(bboxScaledSizeChanged({ width }));
+      dispatch(bboxScaledWidthChanged(width));
     },
     [dispatch]
   );