Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix scaled bbox sliders

Browse Source 
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.
This commit is contained in:
psychedelicious 2024-01-04 00:53:00 +11:00 committed by Kent Keirsey
parent 6c05818887
commit 31035b3e63
3 changed files with 33 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
View File

@ -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: (

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

@ -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 (
<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

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

@ -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,13 +15,11 @@ 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',
};
}
@ -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 (
<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}