fix(ui): issue w/ setting initial aspect ratio in cropper

Author: psychedelicious

invokeai/frontend/web/src/features/cropper/components/CropImageEditor.tsx

@@ -56,7 +56,9 @@ export const CropImageEditor = memo(({ editor, onApplyCrop, onReady }: Props) =>
       editor.onCropBoxChange((crop) => {
         setCropBox(crop);
       });
-      setAspectRatio(getAspectRatioString(editor.getCropAspectRatio()));
+      editor.onAspectRatioChange((ratio) => {
+        setAspectRatio(getAspectRatioString(ratio));
+      });
       await onReady();
       editor.fitToContainer();
     },

invokeai/frontend/web/src/features/cropper/lib/editor.ts

@@ -19,6 +19,7 @@ export type CropBox = {
  */
 type EditorCallbacks = {
   onCropBoxChange: Set<(crop: Readonly<CropBox>) => void>;
+  onAspectRatioChange: Set<(ratio: number | null) => void>;
   onZoomChange: Set<(zoom: number) => void>;
 };
 
@@ -180,6 +181,7 @@ export class Editor {
   private callbacks: EditorCallbacks = {
     onCropBoxChange: new Set(),
     onZoomChange: new Set(),
+    onAspectRatioChange: new Set(),
   };
 
   private cropBox: CropBox | null = null;
@@ -674,7 +676,7 @@ export class Editor {
     this.resetView();
 
     if (initial) {
-      this.aspectRatio = initial.aspectRatio;
+      this.setCropAspectRatio(initial.aspectRatio);
       this.updateCropBox(initial.cropBox);
     } else {
       // Create default crop box (centered, 80% of image)
@@ -1460,6 +1462,10 @@ export class Editor {
       width: newWidth,
       height: newHeight,
     });
+
+    for (const cb of this.callbacks.onAspectRatioChange) {
+      cb(ratio);
+    }
   };
 
   setCropBox = (box: CropBox) => {
@@ -1497,6 +1503,17 @@ export class Editor {
       this.callbacks.onZoomChange.delete(cb);
     };
   };
+
+  /**
+   * Register a callback for when the aspect ratio changes.
+   */
+  onAspectRatioChange = (cb: (ratio: number | null) => void): (() => void) => {
+    this.callbacks.onAspectRatioChange.add(cb);
+    return () => {
+      this.callbacks.onAspectRatioChange.delete(cb);
+    };
+  };
+
   /**
    * Resize the editor container and adjust the Konva stage accordingly.
    *

invokeai/frontend/web/src/features/settingsAccordions/components/VideoSettingsAccordion/StartingFrameImage.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, FormLabel, Icon, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
+import { Flex, FormLabel, Icon, IconButton, Text, Tooltip } from '@invoke-ai/ui-library';
 import { objectEquals } from '@observ33r/object-equals';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { UploadImageIconButton } from 'common/hooks/useImageUploadButton';
@@ -97,33 +97,31 @@ export const StartingFrameImage = () => {
   }, [dispatch, originalImageDTO, startingFrameImage?.crop, uploadImage]);
 
   const fitsCurrentAspectRatio = useMemo(() => {
-    if (!originalImageDTO) {
+    const imageDTO = croppedImageDTO ?? originalImageDTO;
+    if (!imageDTO) {
       return true;
     }
 
-    return originalImageDTO.width / originalImageDTO.height === ASPECT_RATIO_MAP[videoAspectRatio]?.ratio;
-  }, [originalImageDTO, videoAspectRatio]);
+    const imageRatio = imageDTO.width / imageDTO.height;
+    const targetRatio = ASPECT_RATIO_MAP[videoAspectRatio].ratio;
+
+    // Call it a fit if the image is within 10% of the target aspect ratio
+    return Math.abs((imageRatio - targetRatio) / targetRatio) < 0.1;
+  }, [croppedImageDTO, originalImageDTO, videoAspectRatio]);
 
   return (
     <Flex justifyContent="flex-start" flexDir="column" gap={2}>
       <FormLabel display="flex" alignItems="center" gap={2}>
         <Text>{t('parameters.startingFrameImage')}</Text>
-        <Tooltip label={t('parameters.startingFrameImageAspectRatioWarning', { videoAspectRatio: videoAspectRatio })}>
-          <Box>
-            <Icon as={PiWarningBold} size={16} color="warning.500" />
-          </Box>
-        </Tooltip>
+        {!fitsCurrentAspectRatio && (
+          <Tooltip label={t('parameters.startingFrameImageAspectRatioWarning', { videoAspectRatio: videoAspectRatio })}>
+            <Flex alignItems="center">
+              <Icon as={PiWarningBold} size={16} color="warning.300" />
+            </Flex>
+          </Tooltip>
+        )}
       </FormLabel>
-      <Flex
-        position="relative"
-        w={36}
-        h={36}
-        alignItems="center"
-        justifyContent="center"
-        borderWidth={1}
-        borderStyle="solid"
-        borderColor={fitsCurrentAspectRatio ? 'base.500' : 'warning.500'}
-      >
+      <Flex position="relative" w={36} h={36} alignItems="center" justifyContent="center">
         {!originalImageDTO && (
           <UploadImageIconButton
             w="full"