fix(cloud-image-editor): make crop-preset and tabs attributes rea…

…ctive
uploadcare · Oct 9, 2023 · 8545c71 · 8545c71
1 parent 8b7bce9
commit 8545c71
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 17 deletions.
diff --git a/blocks/CloudImageEditor/src/EditorImageCropper.js b/blocks/CloudImageEditor/src/EditorImageCropper.js
@@ -3,7 +3,14 @@
 import { debounce } from '../../utils/debounce.js';
 import { throttle } from '../../utils/throttle.js';
 import { CloudImageEditorBase } from './CloudImageEditorBase.js';
-import { clamp, constraintRect, isRectInsideRect, rotateSize, roundRect } from './crop-utils.js';
+import {
+  clamp,
+  constraintRect,
+  isRectInsideRect,
+  isRectMatchesAspectRatio,
+  rotateSize,
+  roundRect,
+} from './crop-utils.js';
 import { CROP_PADDING } from './cropper-constants.js';
 import { classNames } from './lib/classNames.js';
 import { pick } from './lib/pick.js';
@@ -181,18 +188,22 @@ export class EditorImageCropper extends CloudImageEditorBase {
       );
     }
 
-    if (!cropTransformation || !isRectInsideRect(cropBox, imageBox)) {
-      /** @type {import('./types.js').CropPresetList[0]} */
-      const cropPreset = this.$['*cropPresetList']?.[0];
-      const cropRatio = cropPreset ? cropPreset.width / cropPreset.height : undefined;
-      const ratio = imageBox.width / imageBox.height;
+    /** @type {import('./types.js').CropPresetList[0] | undefined} */
+    const cropPreset = this.$['*cropPresetList']?.[0];
+    const cropAspectRatio = cropPreset ? cropPreset.width / cropPreset.height : undefined;
+
+    if (
+      !isRectInsideRect(cropBox, imageBox) ||
+      (cropAspectRatio && !isRectMatchesAspectRatio(cropBox, cropAspectRatio))
+    ) {
+      const imageAspectRatio = imageBox.width / imageBox.height;
       let width = imageBox.width;
       let height = imageBox.height;
-      if (cropRatio) {
-        if (ratio > cropRatio) {
-          width = Math.min(imageBox.height * cropRatio, imageBox.width);
+      if (cropAspectRatio) {
+        if (imageAspectRatio > cropAspectRatio) {
+          width = Math.min(imageBox.height * cropAspectRatio, imageBox.width);
         } else {
-          height = Math.min(imageBox.width / cropRatio, imageBox.height);
+          height = Math.min(imageBox.width / cropAspectRatio, imageBox.height);
         }
       }
       cropBox = {

diff --git a/blocks/CloudImageEditor/src/crop-utils.js b/blocks/CloudImageEditor/src/crop-utils.js
@@ -656,6 +656,15 @@ export function isRectInsideRect(rect1, rect2) {
   );
 }
 
+/**
+ * @param {import('./types.js').Rectangle} rect
+ * @param {number} aspectRatio
+ */
+export function isRectMatchesAspectRatio(rect, aspectRatio) {
+  const THRESHOLD = 0.1;
+  return Math.abs(rect.width / rect.height - aspectRatio) < THRESHOLD;
+}
+
 /**
  * @param {import('./types.js').ImageSize} imageSize
  * @param {Number} angle

diff --git a/blocks/CloudImageEditorActivity/CloudImageEditorActivity.js b/blocks/CloudImageEditorActivity/CloudImageEditorActivity.js
@@ -1,14 +1,19 @@
+// @ts-check
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { CloudImageEditorBlock } from '../CloudImageEditor/index.js';
 
 export class CloudImageEditorActivity extends UploaderBlock {
   activityType = ActivityBlock.activities.CLOUD_IMG_EDIT;
 
-  init$ = {
-    ...this.init$,
-    cdnUrl: null,
-  };
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      cdnUrl: null,
+    };
+  }
 
   initCallback() {
     super.initCallback();
@@ -30,10 +35,25 @@ export class CloudImageEditorActivity extends UploaderBlock {
         }
       });
     });
+
+    this.subConfigValue('cropPreset', (cropPreset) => {
+      if (this._instance && this._instance.getAttribute('crop-preset') !== cropPreset) {
+        this._instance.setAttribute('crop-preset', cropPreset);
+      }
+    });
+
+    this.subConfigValue('cloudImageEditorTabs', (tabs) => {
+      if (this._instance && this._instance.getAttribute('tabs') !== tabs) {
+        this._instance.setAttribute('tabs', tabs);
+      }
+    });
   }
 
-  /** @param {CustomEvent<import('./src/types.js').ApplyResult>} e */
+  /** @param {CustomEvent<import('../CloudImageEditor/src/types.js').ApplyResult>} e */
   handleApply(e) {
+    if (!this.entry) {
+      return;
+    }
     let result = e.detail;
     this.entry.setMultipleValues({
       cdnUrl: result.cdnUrl,
@@ -62,14 +82,21 @@ export class CloudImageEditorActivity extends UploaderBlock {
       instance.setAttribute('tabs', tabs);
     }
 
-    instance.addEventListener('apply', (result) => this.handleApply(result));
+    instance.addEventListener('apply', (result) =>
+      this.handleApply(/** @type {CustomEvent<import('../CloudImageEditor/src/types.js').ApplyResult>} */ (result))
+    );
     instance.addEventListener('cancel', () => this.handleCancel());
 
     this.innerHTML = '';
     this.appendChild(instance);
+    this._mounted = true;
+
+    /** @private */
+    this._instance = instance;
   }
 
   unmountEditor() {
+    this._instance = undefined;
     this.innerHTML = '';
   }
 }
diff --git a/blocks/test/raw-regular.htm b/blocks/test/raw-regular.htm
@@ -30,5 +30,5 @@
 </head>
 
 <lr-file-uploader-regular ctx-name="my-uploader" css-src="./blocks/themes/lr-basic/index.css"></lr-file-uploader-regular>
-<lr-config ctx-name="my-uploader" pubkey="demopublickey" crop-preset="16:9" cloud-image-editor-tabs="crop"></lr-config>
+<lr-config ctx-name="my-uploader" pubkey="demopublickey" crop-preset="1:1" cloudImageEditorTabs="crop" cloud-image-editor-tabs="crop"></lr-config>
 <lr-data-output ctx-name="my-uploader" use-console></lr-data-output>