refactor: replace useBrowserScaling with useResponsiveAppScaling and update related hooks

ricwilson · ricwilson · commit 30c9a93e3491 · 2025-06-18T09:09:05.000-04:00
diff --git a/ImageCrop/ImageCrop/components/imageCropControl.tsx b/ImageCrop/ImageCrop/components/imageCropControl.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
+import { Crop, PixelCrop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
 import { usePcfContext } from "../services/pcfContext";
 import { IImageCropControlProps } from "../types/imageCropTypes";
@@ -14,7 +14,7 @@ import {
     useRuleOfThirds,
     useCircularCrop,
     useDisabled,
-    useBrowserScaling,
+    useResponsiveAppScaling,
     useCropToBase64,
     useKeepSelection,
     useRotation,
@@ -27,7 +27,7 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
     const [crop, setCrop] = React.useState<Crop>();
     const [completedCrop, setCompletedCrop] = React.useState<PixelCrop>()
     const imgRef = React.useRef<HTMLImageElement>(null) as React.RefObject<HTMLImageElement>;
-    const browserScaling = useBrowserScaling(imgRef);
+    const appScaling = useResponsiveAppScaling(pcfContext.context, imgRef);
 
     // Get the locked property from PCF context
     const locked = useLocked(pcfContext.context);
@@ -42,10 +42,10 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
     const circularCrop = useCircularCrop(pcfContext.context);
 
     // Get min/max width/height from PCF context, scaled for browser
-    const minWidth = useMinWidth(pcfContext.context, browserScaling);
-    const maxWidth = useMaxWidth(pcfContext.context, browserScaling);
-    const minHeight = useMinHeight(pcfContext.context, browserScaling);
-    const maxHeight = useMaxHeight(pcfContext.context, browserScaling);
+    const minWidth = useMinWidth(pcfContext.context);
+    const maxWidth = useMaxWidth(pcfContext.context);
+    const minHeight = useMinHeight(pcfContext.context);
+    const maxHeight = useMaxHeight(pcfContext.context);
 
     // Get the aspect ratio from PCF context and helper to center crop
     const [aspect, centerCropIfNeeded] = useAspect(pcfContext.context, imgRef, setCrop);
@@ -67,7 +67,7 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
     // Optionally, recenter crop when aspect changes (already handled in hook)
 
     return (
-        <CropWrapper
+        <CropWrapper                 
             crop={crop}
             onChange={(c: Crop) => setCrop(c)}
             onDragStart={(e: PointerEvent) => props.onDragStart(e)}
diff --git a/ImageCrop/ImageCrop/hooks/index.ts b/ImageCrop/ImageCrop/hooks/index.ts
@@ -8,7 +8,7 @@ export * from "./useLocked";
 export * from "./useRuleOfThirds";
 export * from "./useCircularCrop";
 export * from "./useDisabled";
-export * from "./useBrowserScaling";
+export * from "./useResponsiveAppScaling";
 export * from "./useCropToBase64";
 export * from "./useKeepSelection";
 export * from "./useRotation";
diff --git a/ImageCrop/ImageCrop/hooks/useBrowserScaling.ts b/ImageCrop/ImageCrop/hooks/useBrowserScaling.ts
diff --git a/ImageCrop/ImageCrop/hooks/useMaxHeight.ts b/ImageCrop/ImageCrop/hooks/useMaxHeight.ts
@@ -4,24 +4,23 @@ import { IInputs } from "../generated/ManifestTypes";
 /**
  * Custom hook to track the maxHeight property from PCF context and update when it or scaling changes.
  * @param context The PCF context object
- * @param scaling The browser scaling factor to apply
  * @returns The current scaled maxHeight value (number | undefined)
  */
 
-export function useMaxHeight(context: ComponentFramework.Context<IInputs>, scaling = 1): number | undefined {
+export function useMaxHeight(context: ComponentFramework.Context<IInputs>): number | undefined {
   const getMaxHeight = () => {
     const raw = context.parameters.maxHeight?.raw;
     if (raw === undefined || raw === null || (typeof raw === "string" && raw === "")) return undefined;
     const num = Number(raw);
     if (isNaN(num) || num === -1) return undefined;
-    return num * scaling;
+    return num;
   };
 
   const [maxHeight, setMaxHeight] = useState<number | undefined>(getMaxHeight());
 
   useEffect(() => {
     setMaxHeight(getMaxHeight());
-  }, [context.parameters.maxHeight?.raw, scaling]);
+  }, [context.parameters.maxHeight?.raw])
 
   return maxHeight;
 }
diff --git a/ImageCrop/ImageCrop/hooks/useMaxWidth.ts b/ImageCrop/ImageCrop/hooks/useMaxWidth.ts
@@ -4,23 +4,22 @@ import { IInputs } from "../generated/ManifestTypes";
 /**
  * Custom hook to track the maxWidth property from PCF context and update when it or scaling changes.
  * @param context The PCF context object
- * @param scaling The browser scaling factor to apply
  * @returns The current scaled maxWidth value (number | undefined)
  */
-export function useMaxWidth(context: ComponentFramework.Context<IInputs>, scaling = 1): number | undefined {
+export function useMaxWidth(context: ComponentFramework.Context<IInputs>): number | undefined {
   const getMaxWidth = () => {
     const raw = context.parameters.maxWidth?.raw;
     if (raw === undefined || raw === null || (typeof raw === "string" && raw === "")) return undefined;
     const num = Number(raw);
     if (isNaN(num) || num === -1) return undefined;
-    return num * scaling;
+    return num;
   };
 
   const [maxWidth, setMaxWidth] = useState<number | undefined>(getMaxWidth());
 
   useEffect(() => {
     setMaxWidth(getMaxWidth());
-  }, [context.parameters.maxWidth?.raw, scaling]);
+  }, [context.parameters.maxWidth?.raw]);
 
   return maxWidth;
 }
diff --git a/ImageCrop/ImageCrop/hooks/useMinHeight.ts b/ImageCrop/ImageCrop/hooks/useMinHeight.ts
@@ -4,24 +4,23 @@ import { IInputs } from "../generated/ManifestTypes";
 /**
  * Custom hook to track the minHeight property from PCF context and update when it or scaling changes.
  * @param context The PCF context object
- * @param scaling The browser scaling factor to apply
  * @returns The current scaled minHeight value (number | undefined)
  */
 
-export function useMinHeight(context: ComponentFramework.Context<IInputs>, scaling = 1): number | undefined {
+export function useMinHeight(context: ComponentFramework.Context<IInputs>): number | undefined {
   const getMinHeight = () => {
     const raw = context.parameters.minHeight?.raw;
     if (raw === undefined || raw === null || (typeof raw === "string" && raw === "")) return undefined;
     const num = Number(raw);
     if (isNaN(num) || num === -1) return undefined;
-    return num * scaling;
+    return num;
   };
 
   const [minHeight, setMinHeight] = useState<number | undefined>(getMinHeight());
 
   useEffect(() => {
     setMinHeight(getMinHeight());
-  }, [context.parameters.minHeight?.raw, scaling]);
+  }, [context.parameters.minHeight?.raw])
 
   return minHeight;
 }
diff --git a/ImageCrop/ImageCrop/hooks/useMinWidth.ts b/ImageCrop/ImageCrop/hooks/useMinWidth.ts
@@ -4,23 +4,21 @@ import { IInputs } from "../generated/ManifestTypes";
 /**
  * Custom hook to track the minWidth property from PCF context and update when it or scaling changes.
  * @param context The PCF context object
- * @param scaling The browser scaling factor to apply
  * @returns The current scaled minWidth value (number | undefined)
  */
-export function useMinWidth(context: ComponentFramework.Context<IInputs>, scaling = 1): number | undefined {
+export function useMinWidth(context: ComponentFramework.Context<IInputs>): number | undefined {
   const getMinWidth = () => {
     const raw = context.parameters.minWidth?.raw;
     if (raw === undefined || raw === null || (typeof raw === "string" && raw === "")) return undefined;
     const num = Number(raw);
     if (isNaN(num) || num === -1) return undefined;
-    return num * scaling;
+    return num;
   };
 
   const [minWidth, setMinWidth] = useState<number | undefined>(getMinWidth());
 
   useEffect(() => {
     setMinWidth(getMinWidth());
-  }, [context.parameters.minWidth?.raw, scaling]);
-
+  }, [context.parameters.minWidth?.raw])
   return minWidth;
 }
diff --git a/ImageCrop/ImageCrop/hooks/useResponsiveAppScaling.ts b/ImageCrop/ImageCrop/hooks/useResponsiveAppScaling.ts
@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Calculates the scaling factor applied by Power Apps' responsive layout.
+ * Compares allocated size (from context) to rendered size (via getBoundingClientRect).
+ */
+export function useResponsiveAppScaling(
+  context: ComponentFramework.Context<any>,
+  elementRef: React.RefObject<HTMLElement | null>
+): number {
+  const [appScaling, setAppScaling] = useState(1);
+
+  useEffect(() => {
+    if (!elementRef.current) return;
+
+    const allocatedWidth = context.mode.allocatedWidth;
+    const allocatedHeight = context.mode.allocatedHeight;
+
+    const updateAppScaling = () => {
+      const rect = elementRef.current?.getBoundingClientRect();
+      if (!rect || allocatedWidth === 0 || allocatedHeight === 0) return;
+
+      const scaleX = rect.width / allocatedWidth;
+      const scaleY = rect.height / allocatedHeight;
+
+      // Use the smaller value for conservative scaling
+      setAppScaling(Math.min(scaleX, scaleY));
+    };
+
+    updateAppScaling();
+
+    const observer = new ResizeObserver(updateAppScaling);
+    observer.observe(elementRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [context, elementRef]);
+
+  return appScaling;
+}
