feat: enhance useImageSrc hook to apply default crop on image load and streamline image source tracking

ricwilson · ricwilson · commit 13d851d5cdab · 2025-06-18T16:29:17.000-04:00
diff --git a/ImageCrop/ImageCrop/components/imageCropControl.tsx b/ImageCrop/ImageCrop/components/imageCropControl.tsx
@@ -52,31 +52,17 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
     const [aspect] = useAspect(pcfContext.context, imgRef, setCrop);
     // Get the keepSelection property from PCF context
     const keepSelection = useKeepSelection(pcfContext.context);
+    // Get the default crop object (not a hook)
+    const defaultCrop = useDefaultCrop(pcfContext.context);
     // Get the image from the PCF context property (should be base64)
-    const imageSrc = useImageSrc(pcfContext.context);
+    const imageSrc = useImageSrc(pcfContext.context, imgRef, defaultCrop, setCrop, setCompletedCrop);
     // Get the rotation property from PCF context
     const rotation = useRotation(pcfContext.context);
     // Get the scaling property from PCF context
     const scaling = useScaling(pcfContext.context);
-    // Get the default crop object (not a hook)
-    const defaultCrop = useDefaultCrop(pcfContext.context);
     // Use custom hook to handle crop-to-base64 conversion and callback
     useCropToBase64(imgRef, completedCrop, props.onCropComplete, rotation, scaling, circularCrop);
 
-    // Reset imageLoaded state and crop when imageSrc changes
-    React.useEffect(() => {
-        handleImageSrcChange(imageSrc);
-        setCrop(undefined);
-    }, [imageSrc]);
-
-    // Set crop to default when image is loaded and crop is undefined
-    React.useEffect(() => {
-        if (imageLoaded && !crop && defaultCrop) {
-            setCrop(defaultCrop);
-            setCompletedCrop(convertToPixelCrop(defaultCrop, imgRef.current.width, imgRef.current.height));
-        }
-    }, [imageLoaded]);
-
     return (
         <CropWrapper
             crop={crop}
diff --git a/ImageCrop/ImageCrop/hooks/useImageSrc.ts b/ImageCrop/ImageCrop/hooks/useImageSrc.ts
@@ -1,24 +1,68 @@
 import { useState, useEffect } from "react";
 import { IInputs } from "../generated/ManifestTypes";
+import { Crop, PixelCrop, convertToPixelCrop } from "react-image-crop";
 
 function stripQuotes(str: string): string {
-  if (str && str.length > 1 && ((str.startsWith('"') && str.endsWith('"')) || (str.startsWith("'") && str.endsWith("'")))) {
+  if (
+    str &&
+    str.length > 1 &&
+    ((str.startsWith('"') && str.endsWith('"')) ||
+      (str.startsWith("'") && str.endsWith("'")))
+  ) {
     return str.substring(1, str.length - 1);
   }
   return str;
 }
 
 /**
- * Custom hook to track the image source from PCF context and update when imageInput changes.
+ * Custom hook to track the image source and automatically apply default crop
+ * when the image is loaded.
+ *
  * @param context The PCF context object
- * @returns The current image source (base64 or URL)
+ * @param imgRef Ref to the HTMLImageElement
+ * @param defaultCrop The default crop to apply
+ * @param setCrop Setter to apply crop
+ * @param setCompletedCrop Setter to apply completed pixel crop
+ * @returns The current image source string
  */
-export function useImageSrc(context: ComponentFramework.Context<IInputs>): string {
-  const [imageSrc, setImageSrc] = useState<string>(stripQuotes(context.parameters.imageInput?.raw || ""));
+export function useImageSrc(
+  context: ComponentFramework.Context<IInputs>,
+  imgRef: React.RefObject<HTMLImageElement>,
+  defaultCrop: Crop | undefined,
+  setCrop: (crop: Crop) => void,
+  setCompletedCrop: (crop: PixelCrop) => void
+): string {
+  const rawSrc = stripQuotes(context.parameters.imageInput?.raw || "");
+  const [imageSrc, setImageSrc] = useState<string>(rawSrc);
 
   useEffect(() => {
-    setImageSrc(stripQuotes(context.parameters.imageInput?.raw || ""));
-  }, [context.parameters.imageInput?.raw]);
+    const cleanSrc = stripQuotes(context.parameters.imageInput?.raw || "");
+    setImageSrc(cleanSrc);
+
+    const img = imgRef.current;
+
+    if (!img || !defaultCrop || !cleanSrc) return;
+
+    const applyCropIfReady = () => {
+      if (img.complete && img.naturalWidth > 0) {
+        setCrop(defaultCrop);
+        setCompletedCrop(convertToPixelCrop(defaultCrop, img.width, img.height));
+      }
+    };
+
+    // Try to apply immediately
+    applyCropIfReady();
+
+    // Fallback: wait for image load if needed
+    const onLoad = () => {
+      applyCropIfReady();
+    };
+
+    img.addEventListener("load", onLoad);
+    return () => {
+      img.removeEventListener("load", onLoad);
+    };
+  }, [context.parameters.imageInput?.raw, defaultCrop]);
 
   return imageSrc;
 }
