fix(ui): recall/use size sets aspect ratio correctly

Added a new action that resets the aspect ratio when dispatched.

Closes #5456

Author: psychedelicious

invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts

@@ -34,7 +34,7 @@ import {
   modelSelected,
 } from 'features/parameters/store/actions';
 import {
-  heightChanged,
+  heightRecalled,
   selectGenerationSlice,
   setCfgRescaleMultiplier,
   setCfgScale,
@@ -45,7 +45,7 @@ import {
   setSeed,
   setSteps,
   vaeSelected,
-  widthChanged,
+  widthRecalled,
 } from 'features/parameters/store/generationSlice';
 import type { ParameterModel } from 'features/parameters/types/parameterSchemas';
 import {
@@ -373,7 +373,7 @@ export const useRecallParameters = () => {
         parameterNotSetToast();
         return;
       }
-      dispatch(widthChanged(width));
+      dispatch(widthRecalled(width));
       parameterSetToast();
     },
     [dispatch, parameterSetToast, parameterNotSetToast]
@@ -388,7 +388,7 @@ export const useRecallParameters = () => {
         parameterNotSetToast();
         return;
       }
-      dispatch(heightChanged(height));
+      dispatch(heightRecalled(height));
       parameterSetToast();
     },
     [dispatch, parameterSetToast, parameterNotSetToast]
@@ -407,8 +407,8 @@ export const useRecallParameters = () => {
         allParameterNotSetToast();
         return;
       }
-      dispatch(heightChanged(height));
-      dispatch(widthChanged(width));
+      dispatch(heightRecalled(height));
+      dispatch(widthRecalled(width));
       allParameterSetToast();
     },
     [dispatch, allParameterSetToast, allParameterNotSetToast]
@@ -893,11 +893,11 @@ export const useRecallParameters = () => {
       }
 
       if (isParameterWidth(width)) {
-        dispatch(widthChanged(width));
+        dispatch(widthRecalled(width));
       }
 
       if (isParameterHeight(height)) {
-        dispatch(heightChanged(height));
+        dispatch(heightRecalled(height));
       }
 
       if (isParameterStrength(strength)) {

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -230,6 +230,18 @@ export const generationSlice = createSlice({
     heightChanged: (state, action: PayloadAction<number>) => {
       state.height = action.payload;
     },
+    widthRecalled: (state, action: PayloadAction<number>) => {
+      state.width = action.payload;
+      state.aspectRatio.value = action.payload / state.height;
+      state.aspectRatio.id = 'Free';
+      state.aspectRatio.isLocked = false;
+    },
+    heightRecalled: (state, action: PayloadAction<number>) => {
+      state.height = action.payload;
+      state.aspectRatio.value = state.width / action.payload;
+      state.aspectRatio.id = 'Free';
+      state.aspectRatio.isLocked = false;
+    },
     aspectRatioChanged: (state, action: PayloadAction<AspectRatioState>) => {
       state.aspectRatio = action.payload;
     },
@@ -306,6 +318,8 @@ export const {
   aspectRatioChanged,
   widthChanged,
   heightChanged,
+  widthRecalled,
+  heightRecalled,
 } = generationSlice.actions;
 
 export const { selectOptimalDimension } = generationSlice.selectors;