github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): force dims on scaled bbox when manual scaling + locked aspect ratio

Browse Source 
Closes #5590
This commit is contained in:
psychedelicious
2024-09-01 21:08:43 +10:00
parent be7254dbf8
commit 0c81a435f4
3 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts
View File

@@ -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);
}

4
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
View File

@@ -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]
);

4
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
View File

@@ -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]
);