refactor: enhance useCropToBase64 with circular crop option and clean up code

ricwilson · ricwilson · commit 2b89c339fc2c · 2025-06-18T10:08:07.000-04:00
diff --git a/ImageCrop/ImageCrop/components/imageCropControl.tsx b/ImageCrop/ImageCrop/components/imageCropControl.tsx
@@ -62,9 +62,7 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
     const scaling = useScaling(pcfContext.context);
 
     // Use custom hook to handle crop-to-base64 conversion and callback
-    useCropToBase64(imgRef, completedCrop, props.onCropComplete, rotation, scaling);
-
-    // Optionally, recenter crop when aspect changes (already handled in hook)
+    useCropToBase64(imgRef, completedCrop, props.onCropComplete, rotation, scaling, circularCrop);
 
     return (
         <CropWrapper                 
diff --git a/ImageCrop/ImageCrop/hooks/useAspect.ts b/ImageCrop/ImageCrop/hooks/useAspect.ts
@@ -30,7 +30,7 @@ export function useAspect(
   useEffect(() => {    
     const currentAspect = getAspect();
     setAspect(currentAspect);
-
+    
     if (!currentAspect || currentAspect === 0) return;
 
     if (imgRef?.current && setCrop) {
diff --git a/ImageCrop/ImageCrop/hooks/useCropToBase64.ts b/ImageCrop/ImageCrop/hooks/useCropToBase64.ts
@@ -6,7 +6,8 @@ export function useCropToBase64(
   completedCrop: PixelCrop | undefined,
   onCropComplete: (base64: string) => void,
   rotation: number = 0,
-  scaling: number = 1
+  scaling: number = 1,
+  circularCrop: boolean = false
 ) {
   useEffect(() => {
     if (!completedCrop || !imgRef.current) return;
@@ -25,6 +26,22 @@ export function useCropToBase64(
     ctx.scale(pixelRatio, pixelRatio);
     ctx.imageSmoothingQuality = "high";
 
+    // Circular crop: set a circular clipping path
+    if (circularCrop) {
+      ctx.save();
+      ctx.beginPath();
+      const radius = Math.min(canvas.width, canvas.height) / (2 * pixelRatio);
+      ctx.arc(
+        canvas.width / (2 * pixelRatio),
+        canvas.height / (2 * pixelRatio),
+        radius,
+        0,
+        2 * Math.PI
+      );
+      ctx.closePath();
+      ctx.clip();
+    }
+
     const cropX = completedCrop.x * scaleX;
     const cropY = completedCrop.y * scaleY;
     const rotateRads = (rotation * Math.PI) / 180;
@@ -51,6 +68,10 @@ export function useCropToBase64(
     );
     ctx.restore();
 
+    if (circularCrop) {
+      ctx.restore(); // Restore after clipping
+    }
+
     canvas.toBlob(
       (blob) => {
         if (!blob) return;
@@ -64,5 +85,5 @@ export function useCropToBase64(
       },
       "image/png"
     );
-  }, [completedCrop, imgRef, onCropComplete, rotation, scaling]);
+  }, [completedCrop, imgRef, onCropComplete, rotation, scaling, circularCrop]);
 }
diff --git a/ImageCrop/ImageCrop/imageCropApp.tsx b/ImageCrop/ImageCrop/imageCropApp.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { PcfContextProvider } from "./services/pcfContext";
-import { IPcfContextServiceProps, PcfContextService } from "./services/pcfContextService";
+import { PcfContextService } from "./services/pcfContextService";
 import ImageCropControl from "./components/imageCropControl";
 import { IImageCropControlProps } from "./types/imageCropTypes";
 
diff --git a/ImageCrop/ImageCrop/index.ts b/ImageCrop/ImageCrop/index.ts
@@ -56,10 +56,10 @@ export class ImageCrop implements ComponentFramework.StandardControl<IInputs, IO
      * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
      */
     public updateView(context: ComponentFramework.Context<IInputs>): void {
-        if (this._updateFromOutput) {
-            this._updateFromOutput = false;
-            return;
-        }
+        // if (this._updateFromOutput) {
+        //     this._updateFromOutput = false;
+        //     return;
+        // }
 
         this._reactRoot.render(
             React.createElement(ImageCropApp, {
