restore aspect ratio logic

Author: Mary Hipp

invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts

@@ -1340,22 +1340,27 @@ export const canvasSlice = createSlice({
         state.bbox.aspectRatio.value = state.bbox.rect.width / state.bbox.rect.height;
         state.bbox.aspectRatio.isLocked = true;
       } else if (state.bbox.modelBase === 'flux-kontext' && isFluxKontextAspectRatioID(id)) {
-        // Flux Kontext has specific output sizes that are not exactly the same as the aspect ratio. Need special handling.
-        if (id === '1:1') {
-          state.bbox.rect.width = 1024;
-          state.bbox.rect.height = 1024;
+        if (id === '3:4') {
+          state.bbox.rect.width = 880;
+          state.bbox.rect.height = 1184;
         } else if (id === '4:3') {
-          state.bbox.rect.width = 896;
-          state.bbox.rect.height = 1280;
-        } else if (id === '3:4') {
-          state.bbox.rect.width = 1280;
-          state.bbox.rect.height = 896;
+          state.bbox.rect.width = 1184;
+          state.bbox.rect.height = 880;
+        } else if (id === '9:16') {
+          state.bbox.rect.width = 752;
+          state.bbox.rect.height = 1392;
+        } else if (id === '16:9') {
+          state.bbox.rect.width = 1392;
+          state.bbox.rect.height = 752;
         } else if (id === '21:9') {
-          state.bbox.rect.width = 1408;
-          state.bbox.rect.height = 768;
+          state.bbox.rect.width = 1568;
+          state.bbox.rect.height = 672;
         } else if (id === '9:21') {
-          state.bbox.rect.width = 768;
-          state.bbox.rect.height = 1408;
+          state.bbox.rect.width = 672;
+          state.bbox.rect.height = 1568;
+        } else if (id === '1:1') {
+          state.bbox.rect.width = 880;
+          state.bbox.rect.height = 880;
         }
         state.bbox.aspectRatio.value = state.bbox.rect.width / state.bbox.rect.height;
         state.bbox.aspectRatio.isLocked = true;

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -421,7 +421,7 @@ export type StagingAreaImage = {
   offsetY: number;
 };
 
-export const zAspectRatioID = z.enum(['Free', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16']);
+export const zAspectRatioID = z.enum(['Free', '21:9', '9:21', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16']);
 
 export const zImagen3AspectRatioID = z.enum(['16:9', '4:3', '1:1', '3:4', '9:16']);
 export const isImagenAspectRatioID = (v: unknown): v is z.infer<typeof zImagen3AspectRatioID> =>
@@ -431,7 +431,7 @@ export const zChatGPT4oAspectRatioID = z.enum(['3:2', '1:1', '2:3']);
 export const isChatGPT4oAspectRatioID = (v: unknown): v is z.infer<typeof zChatGPT4oAspectRatioID> =>
   zChatGPT4oAspectRatioID.safeParse(v).success;
 
-export const zFluxKontextAspectRatioID = z.enum(['21:9', '4:3', '1:1', '3:4', '9:21']);
+export const zFluxKontextAspectRatioID = z.enum(['21:9', '4:3', '1:1', '3:4', '9:21', '16:9', '9:16']);
 export const isFluxKontextAspectRatioID = (v: unknown): v is z.infer<typeof zFluxKontextAspectRatioID> =>
   zFluxKontextAspectRatioID.safeParse(v).success;