@uploadcare/file-uploader 1.20.0-rc.2 → 1.20.0

package/blocks/CloudImageEditor/src/CloudImageEditorBlock.js

@@ -10,7 +10,7 @@ import {
 import { TRANSPARENT_PIXEL_SRC } from '../../../utils/transparentPixelSrc.js';
 import { debounce } from '../../utils/debounce.js';
 import { classNames } from './lib/classNames.js';
-import { parseCropPreset } from './lib/parseCropPreset.js';
+import { getClosestAspectRatio, parseCropPreset } from './lib/parseCropPreset.js';
 import { parseTabs } from './lib/parseTabs.js';
 import { operationsToTransformations, transformationsToOperations } from './lib/transformationUtils.js';
 import { initState } from './state.js';
@@ -161,10 +161,6 @@ export class CloudImageEditorBlock extends Block {
       }
     });
 
-    this.sub('cropPreset', (val) => {
-      this.$['*cropPresetList'] = parseCropPreset(val);
-    });
-
     this.sub(
       'tabs',
       /** @param {string} val */ (val) => {
@@ -216,6 +212,24 @@ export class CloudImageEditorBlock extends Block {
 
     this.sub('uuid', (val) => val && this.updateImage());
     this.sub('cdnUrl', (val) => val && this.updateImage());
+
+    this.sub('cropPreset', (val) => {
+      const list = parseCropPreset(val);
+      let closest = null;
+
+      if (this.$.cdnUrl) {
+        const operations = extractOperations(this.$.cdnUrl);
+        const transformations = operationsToTransformations(operations);
+
+        if (Array.isArray(transformations?.crop?.dimensions)) {
+          const [w, h] = transformations?.crop?.dimensions;
+          closest = getClosestAspectRatio(w, h, list, 0.1);
+        }
+      }
+
+      this.$['*cropPresetList'] = list;
+      this.$['*currentAspectRatio'] = closest ?? list?.[0] ?? null;
+    });
   }
 }
 

package/blocks/CloudImageEditor/src/CropFrame.js

@@ -394,8 +394,8 @@ export class CropFrame extends Block {
     /** @type {import('./types.js').Rectangle} */
     let imageBox = this.$['*imageBox'];
     let rect = /** @type {import('./types.js').Rectangle} */ (this._dragStartCrop) ?? this.$['*cropBox'];
-    /** @type {import('./types.js').CropPresetList[0]} */
-    const cropPreset = this.$['*cropPresetList']?.[0];
+
+    const cropPreset = this.$['*currentAspectRatio'];
     const aspectRatio = cropPreset ? cropPreset.width / cropPreset.height : undefined;
 
     if (direction === '') {
@@ -518,7 +518,7 @@ export class CropFrame extends Block {
     this._createBackdrop();
     this._createFrame();
 
-    this.sub('*imageBox', () => {
+    this.sub('*imageBox', (value) => {
       this._resizeBackdrop();
       window.requestAnimationFrame(() => {
         this._render();

package/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.d.ts

@@ -0,0 +1,11 @@
+export class EditorFreeformButtonControl extends EditorButtonControl {
+    handleClick(): void;
+}
+export class EditorAspectRatioButtonControl extends EditorButtonControl {
+    _aspectRatio: import("./types.js").CropAspectRatio | undefined;
+    handleClick(): void;
+    /** @param {import('./types.js').CropAspectRatio} value */
+    _renderRectBasedOnAspectRatio(value: import("./types.js").CropAspectRatio): void;
+}
+import { EditorButtonControl } from './EditorButtonControl.js';
+//# sourceMappingURL=EditorAspectRatioButtonControl.d.ts.map

package/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorAspectRatioButtonControl.d.ts","sourceRoot":"","sources":["EditorAspectRatioButtonControl.js"],"names":[],"mappings":"AAyBA;IAoBE,oBAEC;CACF;AAED;IA4BQ,+DAAyB;IAqB/B,oBAMC;IAED,0DAA0D;IAC1D,qCADY,OAAO,YAAY,EAAE,eAAe,QAqB/C;CACF;oCA9HmC,0BAA0B"}

package/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.js

@@ -0,0 +1,130 @@
+//@ts-check
+
+import { createSvgNode } from './crop-utils.js';
+import { EditorButtonControl } from './EditorButtonControl.js';
+
+const SIZE_RECT_FIXED = 12;
+const SIZE_SVG_WRAPPER = 16;
+
+/** @param {import('./types.js').CropAspectRatio} value */
+const getAdjustResolutions = (value) => {
+  let width = 12;
+  let height = 12;
+  const adjustResolutions = value.width / value.height;
+
+  if (adjustResolutions >= 1) {
+    width = SIZE_RECT_FIXED;
+    height = Math.round((SIZE_RECT_FIXED * value.height) / value.width);
+  } else {
+    height = SIZE_RECT_FIXED;
+    width = Math.round((SIZE_RECT_FIXED * value.width) / value.height);
+  }
+
+  return { width, height };
+};
+
+export class EditorFreeformButtonControl extends EditorButtonControl {
+  constructor() {
+    super();
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this.$['icon'] = 'freeform';
+    this.$['on.click'] = this.handleClick.bind(this);
+    this.$.active = !!this.$['*currentAspectRatio'];
+
+    this.sub('*currentAspectRatio', (opt) => {
+      const value = opt.hasFreeform ? this.l10n('custom') : `${opt.width}:${opt.height}`;
+      this.$['title'] = this.l10n('crop-to-shape', { value });
+
+      this.bindL10n('title-prop', () => this.$['title']);
+    });
+  }
+
+  handleClick() {
+    this.$['*showListAspectRatio'] = true;
+  }
+}
+
+export class EditorAspectRatioButtonControl extends EditorButtonControl {
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      active: false,
+      once: false,
+    };
+  }
+  initCallback() {
+    super.initCallback();
+
+    this.defineAccessor(
+      'aspectRatio',
+      /** @param {import('./types.js').CropAspectRatio} value */ (value) => {
+        if (!value) return;
+
+        const isFreeform = !!value.hasFreeform;
+        const name = this.l10n(isFreeform ? 'custom' : value.type).toLowerCase();
+
+        this.$['icon'] = isFreeform ? 'freeform' : value.type;
+        this.$['title'] = isFreeform ? this.l10n('custom') : `${value.width}:${value.height}`;
+
+        if (!isFreeform) {
+          this._renderRectBasedOnAspectRatio(value);
+        }
+
+        this._aspectRatio = value;
+
+        this.bindL10n('title-prop', () => {
+          const val = isFreeform ? '' : `${value.width}:${value.height}`;
+          return this.l10n('a11y-cloud-editor-apply-aspect-ratio', {
+            name,
+            value: val,
+          });
+        });
+      },
+    );
+
+    this.sub('*currentAspectRatio', (opt) => {
+      this.$.active =
+        (opt && opt.id === this._aspectRatio?.id) ||
+        (opt?.width === this._aspectRatio?.width && opt?.height === this._aspectRatio?.height);
+    });
+
+    this.$['on.click'] = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    if (this.$['*currentAspectRatio']?.id === this._aspectRatio?.id) {
+      return;
+    }
+
+    this.$['*currentAspectRatio'] = this._aspectRatio;
+  }
+
+  /** @param {import('./types.js').CropAspectRatio} value */
+  _renderRectBasedOnAspectRatio(value) {
+    const { width, height } = getAdjustResolutions(value);
+
+    const rect = createSvgNode('rect', {
+      'stroke-linejoin': 'round',
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': 1.2,
+      'fill-rule': 'evenodd',
+      x: (SIZE_SVG_WRAPPER - width) / 2,
+      y: (SIZE_SVG_WRAPPER - height) / 2,
+      width,
+      height,
+    });
+
+    const svgEl = this.ref['icon-el']?.ref?.svg;
+
+    if (!svgEl) return;
+    svgEl.innerHTML = '';
+    svgEl.appendChild(rect);
+  }
+}

package/blocks/CloudImageEditor/src/EditorButtonControl.js

@@ -39,7 +39,7 @@ export class EditorButtonControl extends Block {
 
 EditorButtonControl.template = /* HTML */ `
   <button role="option" type="button" set="@aria-label:title-prop;" l10n="@title:title-prop;">
-    <uc-icon set="@name: icon;"></uc-icon>
+    <uc-icon ref="icon-el" set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>
 `;

package/blocks/CloudImageEditor/src/EditorCropButtonControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorCropButtonControl.d.ts","sourceRoot":"","sources":["EditorCropButtonControl.js"],"names":[],"mappings":"AAkBA;IASM,eAAe;IACf,mBAA2B;CAsBhC;oCAlDmC,0BAA0B"}
+{"version":3,"file":"EditorCropButtonControl.d.ts","sourceRoot":"","sources":["EditorCropButtonControl.js"],"names":[],"mappings":"AAkBA;IASM,eAAe;IACf,mBAA2B;CAgBhC;oCA5CmC,0BAA0B"}

package/blocks/CloudImageEditor/src/EditorCropButtonControl.js

@@ -28,6 +28,7 @@ export class EditorCropButtonControl extends EditorButtonControl {
       /** @private */
       this._operation = operation;
       this.$['icon'] = operation;
+
       this.bindL10n('title-prop', () =>
         this.l10n('a11y-cloud-editor-apply-crop', {
           name: this.l10n(operation).toLowerCase(),
@@ -35,16 +36,9 @@ export class EditorCropButtonControl extends EditorButtonControl {
       );
     });
 
-    this.$['on.click'] = (e) => {
+    this.$['on.click'] = () => {
       let prev = this.$['*cropperEl'].getValue(this._operation);
       let next = nextValue(this._operation, prev);
-
-      this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
-        operation: this._operation,
-        next,
-        prev,
-      });
-
       this.$['*cropperEl'].setValue(this._operation, next);
     };
   }

package/blocks/CloudImageEditor/src/EditorFilterControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"AAQA;IAeE,sBA2BC;IAED;;;OAGG;IACH,2BAHW,yBAAyB,EAAE,YAC3B,oBAAoB,iBAuB9B;IAfG,yCAA4B;IAyC1B,+BAA0B;IAC1B,4BAAqB;IAYzB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCAvKmC,0BAA0B"}
+{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"AAOA;IAeE,sBA2BC;IAED;;;OAGG;IACH,2BAHW,yBAAyB,EAAE,YAC3B,oBAAoB,iBAuB9B;IAfG,yCAA4B;IAoC1B,+BAA0B;IAC1B,4BAAqB;IAYzB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCAjKmC,0BAA0B"}

package/blocks/CloudImageEditor/src/EditorFilterControl.js

@@ -4,7 +4,6 @@ import { EditorButtonControl } from './EditorButtonControl.js';
 import { FAKE_ORIGINAL_FILTER } from './EditorSlider.js';
 import { COMMON_OPERATIONS, transformationsToOperations } from './lib/transformationUtils.js';
 import { preloadImage } from '../../utils/preloadImage.js';
-import { parseFilterValue } from './utils/parseFilterValue.js';
 
 export class EditorFilterControl extends EditorButtonControl {
   constructor() {
@@ -80,8 +79,7 @@ export class EditorFilterControl extends EditorButtonControl {
   initCallback() {
     super.initCallback();
 
-    /** @param {MouseEvent} e */
-    this.$['on.click'] = (e) => {
+    this.$['on.click'] = () => {
       if (!this.$.active) {
         this.$['*sliderEl'].setOperation(this._operation, this._filter);
         this.$['*sliderEl'].apply();
@@ -90,10 +88,6 @@ export class EditorFilterControl extends EditorButtonControl {
         this.$['*showSlider'] = true;
       }
 
-      this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
-        operation: parseFilterValue(this.$['*operationTooltip']),
-      });
-
       this.$['*currentFilter'] = this._filter;
     };
 

package/blocks/CloudImageEditor/src/EditorImageCropper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorImageCropper.d.ts","sourceRoot":"","sources":["EditorImageCropper.js"],"names":[],"mappings":"AA2CA;IAKI;;;QAIE,yBAAyB;uBAAd,UAAU;QAMrB,6CAA6C;qBAAlC,OAAO,YAAY,EAAE,SAAS;QAOzC,6CAA6C;oBAAlC,OAAO,YAAY,EAAE,SAAS;MAO1C;IAED,eAAe;IACf,yBAA8D;IAE9D,eAAe;IACf,+BAA0E;IAE1E;;;MAAyC;IAG3C,eAAe;IACf,sBASC;IAED,eAAe;IACf,6BAKC;IAED,eAAe;IACf,oBAgBC;IAFC,uCAAqB;IACrB,kDAAe;IAGjB,eAAe;IACf,oBAuCC;IAED,eAAe;IACf,mBAqDC;IAED,eAAe;IACf,mBAcC;IAED,eAAe;IACf,cAUC;IAED;;;OAGG;IACH,mBAYC;IAED;;;OAGG;IACH,2BAkBC;IAED;;;OAGG;IACH,+BA8BC;IAED,eAAe;IACf,gBAkBC;IAED;;;;OAIG;IACH,4CAFa,IAAI,CAehB;IAED;;;OAGG;IACH,oBAHW,MAAM,UAAU,GACd,SAAS,OAAO,CAI5B;IAED;;;OAGG;IACH,oBAHW,OAAO,YAAY,EAAE,SAAS,mBAC9B;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,iBAyBlC;IAnBC,+BAAqB;IAYrB,sCAKE;IAGJ;;aAkBC;IAED,eAAe;IACf,0BAYC;IAED,eAAe;IACf,2BAMC;IAED,eAAe;IACf,eAKC;IAED;;;;;OAKG;IACH,sBAyBC;IATC,yCAA4B;IAW9B;;;;OAIG;IACH,4BAkBC;CAgCF;;;;;UA5gBa,OAAO;YACP,OAAO;;;sBApBC,4BAA4B"}
+{"version":3,"file":"EditorImageCropper.d.ts","sourceRoot":"","sources":["EditorImageCropper.js"],"names":[],"mappings":"AA2CA;IAKI;;;QAIE,yBAAyB;uBAAd,UAAU;QAMrB,6CAA6C;qBAAlC,OAAO,YAAY,EAAE,SAAS;QAOzC,6CAA6C;oBAAlC,OAAO,YAAY,EAAE,SAAS;MAO1C;IAED,eAAe;IACf,yBAA8D;IAE9D,eAAe;IACf,+BAA0E;IAE1E;;;MAAyC;IAG3C,eAAe;IACf,sBASC;IAED,eAAe;IACf,6BAKC;IAED,eAAe;IACf,oBAgBC;IAFC,uCAAqB;IACrB,kDAAe;IAGjB,eAAe;IACf,oBAuCC;IAED,eAAe;IACf,mBAoDC;IAED,eAAe;IACf,mBAcC;IAED,eAAe;IACf,cAUC;IAED;;;OAGG;IACH,mBAYC;IAED;;;OAGG;IACH,2BAkBC;IAED;;;OAGG;IACH,+BA8BC;IAED,eAAe;IACf,gBAkBC;IAED;;;;OAIG;IACH,4CAFa,IAAI,CAehB;IAED;;;OAGG;IACH,oBAHW,MAAM,UAAU,GACd,SAAS,OAAO,CAI5B;IAED;;;OAGG;IACH,oBAHW,OAAO,YAAY,EAAE,SAAS,mBAC9B;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,iBAyBlC;IAnBC,+BAAqB;IAYrB,sCAKE;IAGJ;;aAkBC;IAED,eAAe;IACf,0BAYC;IAED,eAAe;IACf,2BAMC;IAED,eAAe;IACf,eAKC;IAED;;;;;OAKG;IACH,sBAyBC;IATC,yCAA4B;IAW9B;;;;OAIG;IACH,4BAkBC;CAgCF;;;;;UA3gBa,OAAO;YACP,OAAO;;;sBApBC,4BAA4B"}

package/blocks/CloudImageEditor/src/EditorImageCropper.js

@@ -189,8 +189,7 @@ export class EditorImageCropper extends Block {
       );
     }
 
-    /** @type {import('./types.js').CropPresetList[0] | undefined} */
-    const cropPreset = this.$['*cropPresetList']?.[0];
+    const cropPreset = this.$['*currentAspectRatio'];
     const cropAspectRatio = cropPreset ? cropPreset.width / cropPreset.height : undefined;
 
     if (
@@ -526,7 +525,7 @@ export class EditorImageCropper extends Block {
       }
     });
 
-    this.sub('*cropPresetList', () => {
+    this.sub('*currentAspectRatio', () => {
       this._alignCrop();
     });
 

package/blocks/CloudImageEditor/src/EditorOperationControl.d.ts

@@ -1,7 +1,7 @@
 export class EditorOperationControl extends EditorButtonControl {
     /**
      * @private
-     * @type {import('./toolbar-constants.js').ColorOperation | ''}
+     * @type {String}
      */
     private _operation;
 }

package/blocks/CloudImageEditor/src/EditorOperationControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorOperationControl.d.ts","sourceRoot":"","sources":["EditorOperationControl.js"],"names":[],"mappings":"AAKA;IACE;;;OAGG;IACH,mBAAgB;CAuCjB;oCAhDmC,0BAA0B"}
+{"version":3,"file":"EditorOperationControl.d.ts","sourceRoot":"","sources":["EditorOperationControl.js"],"names":[],"mappings":"AAGA;IACE;;;OAGG;IACH,mBAAgB;CAmCjB;oCA3CmC,0BAA0B"}

package/blocks/CloudImageEditor/src/EditorOperationControl.js

@@ -1,29 +1,23 @@
-//@ts-check
 import { EditorButtonControl } from './EditorButtonControl.js';
 import { COLOR_OPERATIONS_CONFIG } from './toolbar-constants.js';
-import { parseFilterValue } from './utils/parseFilterValue.js';
 
 export class EditorOperationControl extends EditorButtonControl {
   /**
    * @private
-   * @type {import('./toolbar-constants.js').ColorOperation | ''}
+   * @type {String}
    */
   _operation = '';
 
   initCallback() {
     super.initCallback();
 
-    this.$['on.click'] = (/** @type {MouseEvent} */ e) => {
+    this.$['on.click'] = (e) => {
       this.$['*sliderEl'].setOperation(this._operation);
       this.$['*showSlider'] = true;
       this.$['*currentOperation'] = this._operation;
-
-      this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
-        operation: parseFilterValue(this.$['*operationTooltip']),
-      });
     };
 
-    this.defineAccessor('operation', (/** @type {import('./toolbar-constants.js').ColorOperation} */ operation) => {
+    this.defineAccessor('operation', (operation) => {
       if (operation) {
         this._operation = operation;
         this.$['icon'] = operation;

package/blocks/CloudImageEditor/src/EditorToolbar.d.ts

@@ -1,9 +1,12 @@
 export class EditorToolbar extends Block {
     init$: {
         '*sliderEl': null;
+        '*listAspectRatioEl': null;
         /** @type {import('./types.js').LoadingOperations} */
         '*loadingOperations': import("./types.js").LoadingOperations;
         '*showSlider': boolean;
+        '*showListAspectRatio': boolean;
+        hideSliderOrList: boolean;
         '*currentFilter': string;
         '*currentOperation': null;
         showLoader: boolean;
@@ -40,14 +43,10 @@ export class EditorToolbar extends Block {
             hidden: string;
             visible: string;
         };
-        /** @param {MouseEvent} e */
-        'on.cancel': (e: MouseEvent) => void;
-        /** @param {MouseEvent} e */
-        'on.apply': (e: MouseEvent) => void;
-        /** @param {MouseEvent} e */
-        'on.applySlider': (e: MouseEvent) => void;
-        /** @param {MouseEvent} e */
-        'on.cancelSlider': (e: MouseEvent) => void;
+        'on.cancel': () => void;
+        'on.apply': () => void;
+        'on.applySlider': () => void;
+        'on.cancelSlider': () => void;
         /** @param {MouseEvent} e */
         'on.clickTab': (e: MouseEvent) => void;
         tab_role: string;
@@ -76,6 +75,13 @@ export class EditorToolbar extends Block {
      * @param {String} operation
      */
     private _createToggleControl;
+    /**
+     * @private
+     * @param {import('./types.js').CropAspectRatio} config
+     */
+    private _createAspectRatioConrol;
+    _createFreeformConrol(): EditorFreeformButtonControl;
+    _clearListAspectRatio(): void;
     /**
      * @private
      * @param {String} tabId
@@ -110,4 +116,5 @@ export namespace EditorToolbar {
     let template: string;
 }
 import { Block } from '../../../abstract/Block.js';
+import { EditorFreeformButtonControl } from './EditorAspectRatioButtonControl.js';
 //# sourceMappingURL=EditorToolbar.d.ts.map

package/blocks/CloudImageEditor/src/EditorToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["EditorToolbar.js"],"names":[],"mappings":"AA4DA;IAII;;QAGE,qDAAqD;8BAA1C,OAAO,YAAY,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAwCjD,4BAA4B;yBAAhB,UAAU;QAStB,4BAA4B;wBAAhB,UAAU;QAOtB,4BAA4B;8BAAhB,UAAU;QAStB,4BAA4B;+BAAhB,UAAU;QAQtB,4BAA4B;2BAAhB,UAAU;;;;;;;MAiBvB;IAED,eAAe;IAEf,6BAAsE;IAGxE,eAAe;IACf,uBAKC;IAED;;;OAGG;IACH,gCAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,4BAoCC;IAED;;;;OAIG;IACH,qBAyBC;IAED;;;OAGG;IACH,4BAKC;IAED,eAAe;IACf,0BAIC;IAED,eAAe;IACf,4BAWC;IALG,oBAGC;IAIL;;;OAGG;IACH,oBAEC;IAED;;MAwBM;CAqFP;;;;sBA1aqB,4BAA4B"}
+{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["EditorToolbar.js"],"names":[],"mappings":"AA4DA;IAII;;;QAIE,qDAAqD;8BAA1C,OAAO,YAAY,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyDjD,4BAA4B;2BAAhB,UAAU;;;;;;;MAgBvB;IAED,eAAe;IAEf,6BAAsE;IAGxE,eAAe;IACf,uBAUC;IAED;;;OAGG;IACH,gCAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,iCAKC;IAED,qDAGC;IAED,8BAEC;IAED;;;OAGG;IACH,4BAwDC;IAED;;;;OAIG;IACH,qBAyBC;IAED;;;OAGG;IACH,4BAKC;IAED,eAAe;IACf,0BAIC;IAED,eAAe;IACf,4BAWC;IALG,oBAGC;IAIL;;;OAGG;IACH,oBAEC;IAED;;MAwBM;CA+FP;;;;sBAjdqB,4BAA4B;4CAE0B,qCAAqC"}

package/blocks/CloudImageEditor/src/EditorToolbar.js

@@ -2,6 +2,7 @@
 import { debounce } from '../../utils/debounce.js';
 import { Block } from '../../../abstract/Block.js';
 import { EditorCropButtonControl } from './EditorCropButtonControl.js';
+import { EditorAspectRatioButtonControl, EditorFreeformButtonControl } from './EditorAspectRatioButtonControl.js';
 import { EditorFilterControl } from './EditorFilterControl.js';
 import { EditorOperationControl } from './EditorOperationControl.js';
 import { FAKE_ORIGINAL_FILTER } from './EditorSlider.js';
@@ -15,7 +16,6 @@ import {
   TabId,
 } from './toolbar-constants.js';
 import { viewerImageSrc } from './util.js';
-import { parseFilterValue } from './utils/parseFilterValue.js';
 
 /** @param {String} id */
 function renderTabToggle(id) {
@@ -65,9 +65,12 @@ export class EditorToolbar extends Block {
     this.init$ = {
       ...this.init$,
       '*sliderEl': null,
+      '*listAspectRatioEl': null,
       /** @type {import('./types.js').LoadingOperations} */
       '*loadingOperations': new Map(),
       '*showSlider': false,
+      '*showListAspectRatio': false,
+      hideSliderOrList: false,
       '*currentFilter': FAKE_ORIGINAL_FILTER,
       '*currentOperation': null,
       showLoader: false,
@@ -105,36 +108,18 @@ export class EditorToolbar extends Block {
         hidden: 'uc-tab-toggles--hidden',
         visible: 'uc-tab-toggles--visible',
       },
-      /** @param {MouseEvent} e */
-      'on.cancel': (e) => {
-        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
-          action: 'cancel',
-        });
-
+      'on.cancel': () => {
         this._cancelPreload?.();
         this.$['*on.cancel']();
       },
-      /** @param {MouseEvent} e */
-      'on.apply': (e) => {
-        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
-          action: 'apply',
-        });
+      'on.apply': () => {
         this.$['*on.apply'](this.$['*editorTransformations']);
       },
-      /** @param {MouseEvent} e */
-      'on.applySlider': (e) => {
-        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
-          action: 'apply-slider',
-          operation: parseFilterValue(this.$['*operationTooltip']),
-        });
+      'on.applySlider': () => {
         this.ref['slider-el'].apply();
         this._onSliderClose();
       },
-      /** @param {MouseEvent} e */
-      'on.cancelSlider': (e) => {
-        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
-          action: 'cancel-slider',
-        });
+      'on.cancelSlider': () => {
         this.ref['slider-el'].cancel();
         this._onSliderClose();
       },
@@ -142,7 +127,6 @@ export class EditorToolbar extends Block {
       'on.clickTab': (e) => {
         const id = /** @type {HTMLElement} */ (e.currentTarget).getAttribute('data-id');
         if (id) {
-          this.telemetryManager.sendEventCloudImageEditor(e, id);
           this._activateTab(id, { fromViewer: false });
         }
       },
@@ -165,6 +149,11 @@ export class EditorToolbar extends Block {
   /** @private */
   _onSliderClose() {
     this.$['*showSlider'] = false;
+
+    if (this.$['*tabId'] === TabId.CROP) {
+      this.$['*showListAspectRatio'] = false;
+    }
+
     if (this.$['*tabId'] === TabId.TUNING) {
       this.ref['tooltip-el'].classList.toggle('uc-info-tooltip_visible', false);
     }
@@ -203,6 +192,26 @@ export class EditorToolbar extends Block {
     return el;
   }
 
+  /**
+   * @private
+   * @param {import('./types.js').CropAspectRatio} config
+   */
+  _createAspectRatioConrol(config) {
+    const el = new EditorAspectRatioButtonControl();
+    // @ts-expect-error TODO: fix
+    el.aspectRatio = config;
+    return el;
+  }
+
+  _createFreeformConrol() {
+    const el = new EditorFreeformButtonControl();
+    return el;
+  }
+
+  _clearListAspectRatio() {
+    this.$['*listAspectRatioEl'].innerHTML = '';
+  }
+
   /**
    * @private
    * @param {String} tabId
@@ -211,7 +220,27 @@ export class EditorToolbar extends Block {
     let listEl = this.ref[`controls-list-${tabId}`];
     let fr = document.createDocumentFragment();
 
+    this._clearListAspectRatio();
+
     if (tabId === TabId.CROP) {
+      const hasFreeformAspectRatio = this.$['*cropPresetList'].length >= 3;
+
+      if (hasFreeformAspectRatio) {
+        const el = this._createFreeformConrol();
+        fr.appendChild(el);
+      }
+
+      this.$['*cropPresetList'].forEach(
+        /** @param {import('./types.js').CropAspectRatio} it */ (it) => {
+          let el = this._createAspectRatioConrol(it);
+          fr.appendChild(el);
+
+          if (hasFreeformAspectRatio) {
+            this.$['*listAspectRatioEl'].appendChild(el);
+          }
+        },
+      );
+
       this.$.cropOperations.forEach(
         /** @param {string} operation */ (operation) => {
           let el = this._createToggleControl(operation);
@@ -347,6 +376,7 @@ export class EditorToolbar extends Block {
     super.initCallback();
 
     this.$['*sliderEl'] = this.ref['slider-el'];
+    this.$['*listAspectRatioEl'] = this.ref['list-el'];
 
     this.sub('*imageSize', (imageSize) => {
       if (imageSize) {
@@ -405,6 +435,14 @@ export class EditorToolbar extends Block {
     this.sub('*showSlider', (showSlider) => {
       this.$['presence.subToolbar'] = showSlider;
       this.$['presence.mainToolbar'] = !showSlider;
+
+      this.$.hideSliderOrList = true;
+    });
+
+    this.sub('*showListAspectRatio', (show) => {
+      this.$['presence.subToolbar'] = show;
+      this.$['presence.mainToolbar'] = !show;
+      this.$.hideSliderOrList = false;
     });
 
     this.sub('*tabList', (tabList) => {
@@ -425,6 +463,7 @@ export class EditorToolbar extends Block {
 
   destroyCallback() {
     this.$['*showSlider'] = false;
+    this.$['*showListAspectRatio'] = false;
   }
 }
 
@@ -459,9 +498,13 @@ EditorToolbar.template = /* HTML */ `
       class="uc-sub-toolbar"
       set="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles"
     >
-      <div class="uc-slider">
+      <div class="uc-slider" set="@hidden:!hideSliderOrList">
         <uc-editor-slider ref="slider-el"></uc-editor-slider>
       </div>
+
+      <div set="@hidden:hideSliderOrList" class="uc-list-aspect-ratio-container">
+        <div class="uc-list-aspect-ratio" ref="list-el"></div>
+      </div>
       <div class="uc-controls-row">
         <uc-btn-ui theme="secondary" set="onclick: on.cancelSlider" l10n="@text:cancel"> </uc-btn-ui>
         <uc-btn-ui theme="primary" set="onclick: on.applySlider" l10n="@text:apply"> </uc-btn-ui>