Skip to content

Commit b552dff

Browse files
author
ricwilson
committed
feat: integrate useDefaultCrop hook and streamline aspect handling in ImageCropControl
1 parent c1e032d commit b552dff

File tree

4 files changed

+19
-73
lines changed

4 files changed

+19
-73
lines changed

‎ImageCrop/ImageCrop/components/imageCropControl.tsx

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,27 @@ import {
1414
useRuleOfThirds,
1515
useCircularCrop,
1616
useDisabled,
17-
useResponsiveAppScaling,
1817
useCropToBase64,
1918
useKeepSelection,
2019
useRotation,
2120
useScaling,
22-
useImageLoaded
21+
useImageLoaded,
22+
useDefaultCrop
2323
} from "../hooks";
24-
import { getDefaultCrop, useDefaultCrop } from "../hooks/useDefaultCrop";
2524
import CropWrapper from "./imageCropWrapper";
2625

2726
const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
27+
// Get the PCF context using the custom hook
2828
const pcfContext = usePcfContext();
29+
// State to hold the completed crop object, initialized as undefined
2930
const [completedCrop, setCompletedCrop] = React.useState<PixelCrop>()
31+
// Crop state for the image, initialized as undefined
3032
const [crop, setCrop] = React.useState<Crop>();
31-
3233
// Image loaded state (modular)
3334
const [imageLoaded, handleImageLoad, handleImageError, handleImageSrcChange] = useImageLoaded();
34-
35+
// Reference to the image element for scaling and cropping
3536
const imgRef = React.useRef<HTMLImageElement>(null) as React.RefObject<HTMLImageElement>;
36-
const appScaling = useResponsiveAppScaling(pcfContext.context, imgRef);
37-
37+
//const appScaling = useResponsiveAppScaling(pcfContext.context, imgRef);
3838
// Get the locked property from PCF context
3939
const locked = useLocked(pcfContext.context);
4040
// Get the disabled property from PCF context
@@ -49,7 +49,7 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
4949
const minHeight = useMinHeight(pcfContext.context);
5050
const maxHeight = useMaxHeight(pcfContext.context);
5151
// Get the aspect ratio from PCF context and helper to center crop
52-
const [aspect, centerCropIfNeeded] = useAspect(pcfContext.context, imgRef, setCrop);
52+
const [aspect] = useAspect(pcfContext.context, imgRef, setCrop);
5353
// Get the keepSelection property from PCF context
5454
const keepSelection = useKeepSelection(pcfContext.context);
5555
// Get the image from the PCF context property (should be base64)
@@ -58,9 +58,10 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
5858
const rotation = useRotation(pcfContext.context);
5959
// Get the scaling property from PCF context
6060
const scaling = useScaling(pcfContext.context);
61-
6261
// Get the default crop object (not a hook)
6362
const defaultCrop = useDefaultCrop(pcfContext.context);
63+
// Use custom hook to handle crop-to-base64 conversion and callback
64+
useCropToBase64(imgRef, completedCrop, props.onCropComplete, rotation, scaling, circularCrop);
6465

6566
// Reset imageLoaded state and crop when imageSrc changes
6667
React.useEffect(() => {
@@ -76,11 +77,8 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
7677
}
7778
}, [imageLoaded]);
7879

79-
// Use custom hook to handle crop-to-base64 conversion and callback
80-
useCropToBase64(imgRef, completedCrop, props.onCropComplete, rotation, scaling, circularCrop);
81-
8280
return (
83-
<CropWrapper
81+
<CropWrapper
8482
crop={crop}
8583
onChange={(c: Crop) => setCrop(c)}
8684
onDragStart={(e: PointerEvent) => props.onDragStart(e)}
@@ -96,7 +94,7 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
9694
maxHeight={maxHeight}
9795
aspect={aspect}
9896
keepSelection={keepSelection}
99-
style={{display: imageSrc && pcfContext.isVisible() ? 'block' : 'none',}}
97+
style={{ display: imageSrc && pcfContext.isVisible() ? 'block' : 'none', }}
10098
>
10199
<img
102100
ref={imgRef}
@@ -106,9 +104,9 @@ const ImageCropControl: React.FC<IImageCropControlProps> = (props) => {
106104
onError={handleImageError}
107105
style={{
108106
maxWidth: '100%',
109-
maxHeight: '100%',
107+
maxHeight: '100%',
110108
transform: `rotate(${rotation}deg) scale(${scaling})`
111-
}}
109+
}}
112110
/>
113111
</CropWrapper>
114112
);

‎ImageCrop/ImageCrop/hooks/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ export * from "./useKeepSelection";
1414
export * from "./useRotation";
1515
export * from "./useScaling";
1616
export * from "./useImageLoaded"
17+
export * from "./useDefaultCrop";

‎ImageCrop/ImageCrop/hooks/useAspect.ts

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useEffect, RefObject,MutableRefObject } from "react";
1+
import { useState, useEffect} from "react";
22
import { IInputs } from "../generated/ManifestTypes";
33
import { centerAspectCrop } from "../utils/cropUtils";
44
import { Crop } from "react-image-crop";
@@ -16,7 +16,7 @@ export function useAspect(
1616
context: ComponentFramework.Context<IInputs>,
1717
imgRef: React.RefObject<HTMLImageElement | null>,
1818
setCrop: (crop: Crop) => void
19-
): [number | undefined, () => void] {
19+
): [number | undefined] {
2020
const getAspect = () => {
2121
const raw = context.parameters.aspect?.raw;
2222
if (raw === undefined || raw === null) return undefined;
@@ -40,14 +40,5 @@ export function useAspect(
4040
}
4141
}, [context.parameters.aspect?.raw]); // Note: no dependency on imageLoaded
4242

43-
const centerCropIfNeeded = () => {
44-
if (!aspect || aspect === 0) return;
45-
if (imgRef?.current && setCrop) {
46-
const img = imgRef.current;
47-
const newCrop = centerAspectCrop(img.width, img.height, aspect);
48-
setCrop(newCrop);
49-
}
50-
};
51-
52-
return [aspect, centerCropIfNeeded];
43+
return [aspect];
5344
}

‎ImageCrop/ImageCrop/utils/cropUtils.ts

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,4 @@
1-
import { Crop } from "react-image-crop";
2-
3-
export function makeAspectCrop(
4-
crop: Partial<Crop>,
5-
aspect: number,
6-
mediaWidth: number,
7-
mediaHeight: number
8-
): Crop {
9-
if (!aspect || !mediaWidth || !mediaHeight) return crop as Crop;
10-
let width = crop.width ?? 100;
11-
const unit = crop.unit ?? "%";
12-
let height = width / aspect;
13-
if (unit === "%") {
14-
width = (mediaWidth * width) / 100;
15-
height = width / aspect;
16-
width = (width / mediaWidth) * 100;
17-
height = (height / mediaHeight) * 100;
18-
}
19-
return {
20-
...crop,
21-
width,
22-
height,
23-
unit,
24-
x: crop.x ?? 0,
25-
y: crop.y ?? 0,
26-
};
27-
}
28-
29-
export function centerCrop(
30-
crop: Crop,
31-
mediaWidth: number,
32-
mediaHeight: number
33-
): Crop {
34-
let x = (mediaWidth - (crop.width / 100) * mediaWidth) / 2;
35-
let y = (mediaHeight - (crop.height / 100) * mediaHeight) / 2;
36-
if (crop.unit === "%") {
37-
x = ((mediaWidth - (crop.width / 100) * mediaWidth) / mediaWidth) * 100;
38-
y = ((mediaHeight - (crop.height / 100) * mediaHeight) / mediaHeight) * 100;
39-
}
40-
return {
41-
...crop,
42-
x,
43-
y,
44-
};
45-
}
1+
import { Crop, makeAspectCrop, centerCrop } from "react-image-crop";
462

473
export function centerAspectCrop(
484
mediaWidth: number,

0 commit comments

Comments
 (0)