fixup! Fix(web): Recalculate FileUploader image preview by crop values

lmc-eu · Nov 2, 2023 · fa702ca · fa702ca
1 parent 002a116
commit fa702ca
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 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
@@ -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
@@ -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
@@ -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
@@ -933,7 +933,7 @@ <h3 id="attachments-fileUploaderWithMetaData" hidden>Attachments</h3>
 
         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);