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 number input on aspect ratio

Browse Source
This commit is contained in:
psychedelicious 2023-07-09 22:13:26 +10:00
parent cafd97e5bc
commit 50218f1595
3 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx
View File

@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider'; import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider';
import { roundToMultiple } from 'common/util/roundDownToMultiple';
import { generationSelector } from 'features/parameters/store/generationSelectors'; import { generationSelector } from 'features/parameters/store/generationSelectors';
import { setHeight, setWidth } from 'features/parameters/store/generationSlice'; import { setHeight, setWidth } from 'features/parameters/store/generationSlice';
import { configSelector } from 'features/system/store/configSelectors'; import { configSelector } from 'features/system/store/configSelectors';
@ -9,7 +10,6 @@ import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { roundToEight } from './ParamAspectRatio';
const selector = createSelector( const selector = createSelector(
[generationSelector, hotkeysSelector, configSelector, uiSelector], [generationSelector, hotkeysSelector, configSelector, uiSelector],
@ -48,14 +48,20 @@ const ParamHeight = (props: ParamHeightProps) => {
const handleChange = useCallback( const handleChange = useCallback(
(v: number) => { (v: number) => {
dispatch(setHeight(v)); dispatch(setHeight(v));
if (aspectRatio) dispatch(setWidth(roundToEight(height * aspectRatio))); if (aspectRatio) {
const newWidth = roundToMultiple(v * aspectRatio, 8);
dispatch(setWidth(newWidth));
}
}, },
[dispatch, height, aspectRatio] [dispatch, aspectRatio]
); );
const handleReset = useCallback(() => { const handleReset = useCallback(() => {
dispatch(setHeight(initial)); dispatch(setHeight(initial));
if (aspectRatio) dispatch(setWidth(roundToEight(initial * aspectRatio))); if (aspectRatio) {
const newWidth = roundToMultiple(initial * aspectRatio, 8);
dispatch(setWidth(newWidth));
}
}, [dispatch, initial, aspectRatio]); }, [dispatch, initial, aspectRatio]);
return ( return (

14
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx
View File

@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider'; import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider';
import { roundToMultiple } from 'common/util/roundDownToMultiple';
import { generationSelector } from 'features/parameters/store/generationSelectors'; import { generationSelector } from 'features/parameters/store/generationSelectors';
import { setHeight, setWidth } from 'features/parameters/store/generationSlice'; import { setHeight, setWidth } from 'features/parameters/store/generationSlice';
import { configSelector } from 'features/system/store/configSelectors'; import { configSelector } from 'features/system/store/configSelectors';
@ -9,7 +10,6 @@ import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
import { uiSelector } from 'features/ui/store/uiSelectors'; import { uiSelector } from 'features/ui/store/uiSelectors';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { roundToEight } from './ParamAspectRatio';
const selector = createSelector( const selector = createSelector(
[generationSelector, hotkeysSelector, configSelector, uiSelector], [generationSelector, hotkeysSelector, configSelector, uiSelector],
@ -45,14 +45,20 @@ const ParamWidth = (props: ParamWidthProps) => {
const handleChange = useCallback( const handleChange = useCallback(
(v: number) => { (v: number) => {
dispatch(setWidth(v)); dispatch(setWidth(v));
if (aspectRatio) dispatch(setHeight(roundToEight(width / aspectRatio))); if (aspectRatio) {
const newHeight = roundToMultiple(v / aspectRatio, 8);
dispatch(setHeight(newHeight));
}
}, },
[dispatch, aspectRatio, width] [dispatch, aspectRatio]
); );
const handleReset = useCallback(() => { const handleReset = useCallback(() => {
dispatch(setWidth(initial)); dispatch(setWidth(initial));
if (aspectRatio) dispatch(setHeight(roundToEight(initial / aspectRatio))); if (aspectRatio) {
const newHeight = roundToMultiple(initial / aspectRatio, 8);
dispatch(setHeight(newHeight));
}
}, [dispatch, initial, aspectRatio]); }, [dispatch, initial, aspectRatio]);
return ( return (

4
invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
View File

@ -268,7 +268,9 @@ export const generationSlice = createSlice({
}); });
builder.addCase(setAspectRatio, (state, action) => { builder.addCase(setAspectRatio, (state, action) => {
const ratio = action.payload; const ratio = action.payload;
if (ratio) state.height = roundToEight(state.width / ratio); if (ratio) {
state.height = roundToMultiple(state.width / ratio, 8);
}
}); });
}, },
}); });