From fa702caf8934e39b9b0ea58aefc8c84d8e972075 Mon Sep 17 00:00:00 2001 From: literat Date: Thu, 2 Nov 2023 11:34:22 +0100 Subject: [PATCH] fixup! Fix(web): Recalculate FileUploader image preview by crop values --- .../assets/scripts/file-uploader-meta-data.ts | 4 ++-- packages/web/src/js/FileUploader.ts | 21 +++++++++++++++---- .../scss/components/FileUploader/README.md | 4 ++-- .../scss/components/FileUploader/index.html | 2 +- 4 files changed, 22 insertions(+), 9 deletions(-) diff --git a/apps/web-twig-demo/assets/scripts/file-uploader-meta-data.ts b/apps/web-twig-demo/assets/scripts/file-uploader-meta-data.ts index 117bbdce5c..586e006c1e 100644 --- a/apps/web-twig-demo/assets/scripts/file-uploader-meta-data.ts +++ b/apps/web-twig-demo/assets/scripts/file-uploader-meta-data.ts @@ -69,8 +69,8 @@ window.addEventListener('DOMContentLoaded', () => { const customEdit = (event) => { const key = event.target.closest('li').id; const newMeta = toggleMetaData - ? { 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 }; toggleMetaData = !toggleMetaData; const file = FileUploaderInstance.getFileFromQueue(key).file; FileUploaderInstance.updateQueue(key, file, newMeta, updateQueueCallback); diff --git a/packages/web/src/js/FileUploader.ts b/packages/web/src/js/FileUploader.ts index 6ab54347c5..7e20e62cf1 100644 --- a/packages/web/src/js/FileUploader.ts +++ b/packages/web/src/js/FileUploader.ts @@ -369,7 +369,9 @@ class FileUploader extends BaseComponent { } static isCoordsInMeta = (meta: FileMetadata) => { - return ['x', 'y', 'width', 'height', 'naturalWidth', 'naturalHeight'].every((coord) => meta[coord] != null); + return ['x', 'y', 'cropWidth', 'cropHeight', 'originalWidth', 'originalHeight'].every( + (coord) => meta[coord] != null, + ); }; updateQueue( @@ -392,11 +394,22 @@ class FileUploader extends BaseComponent { if (meta && itemImgElement && FileUploader.isCoordsInMeta(meta)) { const previewHeight = IMAGE_PREVIEW_HEIGHT; - const scale = previewHeight / parseInt(meta.height as string, 10); + const cropWidth = parseInt(meta.cropWidth as string, 10); + const cropHeight = parseInt(meta.cropHeight as string, 10); + + let scale; + if (cropHeight > cropWidth) { + // scale for portrait images + scale = previewHeight / cropWidth; + } else { + // scale for landscape images + scale = previewHeight / cropHeight; + } + const cropX = Math.round(parseInt(meta.x as string, 10) * scale); const cropY = Math.round(parseInt(meta.y as string, 10) * scale); - const imageWidth = Math.round(parseInt(meta.naturalWidth as string, 10) * scale); - const imageHeight = Math.round(parseInt(meta.naturalHeight as string, 10) * scale); + const imageWidth = Math.round(parseInt(meta.originalWidth as string, 10) * scale); + const imageHeight = Math.round(parseInt(meta.originalHeight as string, 10) * scale); cropStyles = ` --file-uploader-attachment-image-top: -${cropY}px; diff --git a/packages/web/src/scss/components/FileUploader/README.md b/packages/web/src/scss/components/FileUploader/README.md index 6c345fda8c..b2a5d6aa28 100644 --- a/packages/web/src/scss/components/FileUploader/README.md +++ b/packages/web/src/scss/components/FileUploader/README.md @@ -485,12 +485,12 @@ 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 FileUploader attachment 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 FileUploader.updateQueue(file.name, file, meta); }; diff --git a/packages/web/src/scss/components/FileUploader/index.html b/packages/web/src/scss/components/FileUploader/index.html index 04dac6efed..614667d65c 100644 --- a/packages/web/src/scss/components/FileUploader/index.html +++ b/packages/web/src/scss/components/FileUploader/index.html @@ -933,7 +933,7 @@ const customEdit = (event) => { const key = event.target.closest('li').id - const newMeta = toggleMetaData ? { x: 30, y: 30, width: 150, height: 150, naturalWidth: 560, naturalHeight: 330 } : { x: 22, y: 0, width: 110, height: 100, naturalWidth: 560, naturalHeight: 330 }; + const newMeta = toggleMetaData ? { x: 30, y: 30, cropWidth: 150, cropHeight: 150, originalWidth: 560, originalHeight: 330 } : { x: 22, y: 0, cropWidth: 110, cropHeight: 100, originalWidth: 560, originalHeight: 330 }; toggleMetaData = !toggleMetaData; const file = FileUploaderInstance.getFileFromQueue(key).file; FileUploaderInstance.updateQueue(key, file, newMeta, updateQueueCallback);