From 002a1163b7e2380ff0b2761a8a3672c5b23ee3fe Mon Sep 17 00:00:00 2001 From: literat Date: Thu, 2 Nov 2023 11:33:20 +0100 Subject: [PATCH] fixup! Fix(web-react): Recalculate FileUploader image preview by crop values --- .../src/components/FileUploader/README.md | 4 +-- .../useFileUploaderStyleProps.test.ts | 2 +- .../demo/FileUploaderMetaData.tsx | 4 +-- .../FileUploader/useFileUploaderStyleProps.ts | 26 ++++++++++++------- 4 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md index 5f08a424be..4e1e69006b 100644 --- a/packages/web-react/src/components/FileUploader/README.md +++ b/packages/web-react/src/components/FileUploader/README.md @@ -329,13 +329,13 @@ const customUpdate = (_event: MouseEvent, file: File) => { #### Updating Image Preview with cropped image When you are using FileUploader with some kind of image cropper you want to also update the image preview on FileUploaderAttachment when image changes. -You can do this by passing a specific object in shape of coordinates (`{ x: number, y: number, width: number, height: number, naturalWidth: number, naturalHeight: number }`) to the `meta` argument. +You can do this by passing a specific object in shape of coordinates (`{ x: number, y: number, cropWidth: number, cropHeight: number, originalWidth: number, originalHeight: number }`) to the `meta` argument. Then the coordinates will be applied to the preview image in the attachment. ```javascript // … const customUpdate = (_event: MouseEvent, file: File) => { - const meta = { x: 30, y: 30, width: 150, height: 150, naturalWidth: 560, naturalHeight: 330 }; + const meta = { x: 30, y: 30, cropWidth: 150, cropHeight: 150, originalWidth: 560, originalHeight: 330 }; return updateQueue(file.name, file, meta); }; diff --git a/packages/web-react/src/components/FileUploader/__tests__/useFileUploaderStyleProps.test.ts b/packages/web-react/src/components/FileUploader/__tests__/useFileUploaderStyleProps.test.ts index 1293dfa45b..1fd5525fd5 100644 --- a/packages/web-react/src/components/FileUploader/__tests__/useFileUploaderStyleProps.test.ts +++ b/packages/web-react/src/components/FileUploader/__tests__/useFileUploaderStyleProps.test.ts @@ -56,7 +56,7 @@ describe('useFileUploaderStyleProps', () => { it('should have CSS for crop image', () => { const { result } = renderHook(() => useFileUploaderStyleProps({ - meta: { x: 0, y: 0, width: 100, height: 100, naturalWidth: 350, naturalHeight: 200 }, + meta: { x: 0, y: 0, cropWidth: 100, cropHeight: 100, originalWidth: 350, originalHeight: 200 }, }), ); diff --git a/packages/web-react/src/components/FileUploader/demo/FileUploaderMetaData.tsx b/packages/web-react/src/components/FileUploader/demo/FileUploaderMetaData.tsx index 88eddc2eab..1cc4532271 100644 --- a/packages/web-react/src/components/FileUploader/demo/FileUploaderMetaData.tsx +++ b/packages/web-react/src/components/FileUploader/demo/FileUploaderMetaData.tsx @@ -35,8 +35,8 @@ const FileUploaderMetaData = () => { const customUpdate = (_event: MouseEvent, file: File) => { const newMeta = toggleMeta - ? { x: 30, y: 30, width: 150, height: 150, naturalWidth: 560, naturalHeight: 330 } - : { x: 22, y: 0, width: 110, height: 100, naturalWidth: 560, naturalHeight: 330 }; + ? { x: 30, y: 30, cropWidth: 150, cropHeight: 150, originalWidth: 560, originalHeight: 330 } + : { x: 22, y: 0, cropWidth: 110, cropHeight: 100, originalWidth: 560, originalHeight: 330 }; setIsModalOpen(false); setToggleMeta(!toggleMeta); diff --git a/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts b/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts index 7bdd39cc90..77129b5f75 100644 --- a/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts +++ b/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts @@ -32,10 +32,10 @@ type ImageObjectFit = { type ImageCropMeta = { x: number; y: number; - width: number; - height: number; - naturalWidth: number; - naturalHeight: number; + cropWidth: number; + cropHeight: number; + originalWidth: number; + originalHeight: number; }; export interface FileUploaderStyleReturn { @@ -100,16 +100,24 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU let imageObjectFitCSS: ImageObjectFit | undefined; const hasCoordsInMeta = meta != null && - ['x', 'y', 'width', 'height', 'naturalWidth', 'naturalHeight'].every((coord) => meta[coord] != null); + ['x', 'y', 'cropWidth', 'cropHeight', 'originalWidth', 'originalHeight'].every((coord) => meta[coord] != null); if (hasCoordsInMeta) { - const { x, y, height, naturalWidth, naturalHeight } = meta as ImageCropMeta; + const { x, y, cropHeight, cropWidth, originalWidth, originalHeight } = meta as ImageCropMeta; const previewHeight = IMAGE_DIMENSION; - const scale = previewHeight / height; + let scale; + if (cropHeight > cropWidth) { + // scale for portrait images + scale = previewHeight / cropWidth; + } else { + // scale for landscape images + scale = previewHeight / cropHeight; + } + const cropX = Math.round(x * scale); const cropY = Math.round(y * scale); - const imageWidth = Math.round(naturalWidth * scale); - const imageHeight = Math.round(naturalHeight * scale); + const imageWidth = Math.round(originalWidth * scale); + const imageHeight = Math.round(originalHeight * scale); imageCropCSS = { [FileUploaderCropCSS.TOP]: `-${cropY}px`,