@uploadcare/file-uploader 1.21.0-alpha.3 → 1.22.0

package/blocks/CloudImageEditor/src/EditorToolbar.js

@@ -1,8 +1,8 @@
 // @ts-check
 import { debounce } from '../../utils/debounce.js';
-import { ActivityBlock } from '../../../abstract/ActivityBlock.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';
@@ -16,6 +16,7 @@ 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 +66,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,
@@ -82,11 +86,9 @@ export class EditorToolbar extends Block {
       'presence.tabContent.crop': false,
       'presence.tabContent.tuning': false,
       'presence.tabContent.filters': false,
-      'presence.tabContent.ai': false,
       'presence.tabToggle.crop': true,
       'presence.tabToggle.tuning': true,
       'presence.tabToggle.filters': true,
-      'presence.tabToggle.ai': true,
       'presence.subTopToolbarStyles': {
         hidden: 'uc-sub-toolbar--top-hidden',
         visible: 'uc-sub-toolbar--visible',
@@ -107,18 +109,36 @@ export class EditorToolbar extends Block {
         hidden: 'uc-tab-toggles--hidden',
         visible: 'uc-tab-toggles--visible',
       },
-      'on.cancel': () => {
+      /** @param {MouseEvent} e */
+      'on.cancel': (e) => {
+        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+          action: 'cancel',
+        });
+
         this._cancelPreload?.();
         this.$['*on.cancel']();
       },
-      'on.apply': () => {
+      /** @param {MouseEvent} e */
+      'on.apply': (e) => {
+        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+          action: 'apply',
+        });
         this.$['*on.apply'](this.$['*editorTransformations']);
       },
-      'on.applySlider': () => {
+      /** @param {MouseEvent} e */
+      'on.applySlider': (e) => {
+        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+          action: 'apply-slider',
+          operation: parseFilterValue(this.$['*operationTooltip']),
+        });
         this.ref['slider-el'].apply();
         this._onSliderClose();
       },
-      'on.cancelSlider': () => {
+      /** @param {MouseEvent} e */
+      'on.cancelSlider': (e) => {
+        this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
+          action: 'cancel-slider',
+        });
         this.ref['slider-el'].cancel();
         this._onSliderClose();
       },
@@ -126,6 +146,7 @@ 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 });
         }
       },
@@ -133,7 +154,6 @@ export class EditorToolbar extends Block {
       [`tab_${TabId.TUNING}`]: `tab_${TabId.TUNING}`,
       [`tab_${TabId.CROP}`]: `tab_${TabId.CROP}`,
       [`tab_${TabId.FILTERS}`]: `tab_${TabId.FILTERS}`,
-      [`tab_${TabId.AI}`]: `tab_${TabId.AI}`,
       cancel: 'cancel',
       apply: 'apply',
       'a11y-editor-tab-filters': 'a11y-editor-tab-filters',
@@ -149,6 +169,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);
     }
@@ -187,6 +212,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
@@ -195,7 +240,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);
@@ -229,11 +294,6 @@ export class EditorToolbar extends Block {
     listEl.appendChild(fr);
   }
 
-  redirectToAiGenerate() {
-    this.$['*currentActivity'] = ActivityBlock.activities.AI_GENERATE;
-    this.modalManager.open(ActivityBlock.activities.AI_GENERATE);
-  }
-
   /**
    * @private
    * @param {String} id
@@ -242,13 +302,6 @@ export class EditorToolbar extends Block {
   _activateTab(id, { fromViewer }) {
     this.$['*tabId'] = id;
 
-    if (id === TabId.AI) {
-      console.log('Redirecting to AI generation...');
-
-      this.redirectToAiGenerate();
-      return;
-    }
-
     if (id === TabId.CROP) {
       this.$['*faderEl'].deactivate();
       this.$['*cropperEl'].activate(this.$['*imageSize'], { fromViewer });
@@ -343,6 +396,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) {
@@ -401,6 +455,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) => {
@@ -421,6 +483,7 @@ export class EditorToolbar extends Block {
 
   destroyCallback() {
     this.$['*showSlider'] = false;
+    this.$['*showListAspectRatio'] = false;
   }
 }
 
@@ -455,9 +518,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>

package/blocks/CloudImageEditor/src/css/common.css

@@ -301,34 +301,36 @@ uc-crop-frame > .uc-thumb {
     opacity var(--transition-duration-3);
 }
 
-uc-crop-frame > .uc-thumb--visible {
+uc-crop-frame .uc-thumb--visible {
   opacity: 1;
   pointer-events: auto;
 }
 
-uc-crop-frame > .uc-thumb--hidden {
+uc-crop-frame .uc-thumb--hidden {
   opacity: 0;
   pointer-events: none;
 }
 
-uc-crop-frame > .uc-guides {
+uc-crop-frame .uc-guides {
   transition: var(--transition-duration-3);
 }
 
-uc-crop-frame > .uc-guides--hidden {
+uc-crop-frame .uc-guides--hidden {
   opacity: 0;
 }
 
-uc-crop-frame > .uc-guides--semi-hidden {
+uc-crop-frame .uc-guides--semi-hidden {
   opacity: 0.2;
 }
 
-uc-crop-frame > .uc-guides--visible {
+uc-crop-frame .uc-guides--visible {
   opacity: 1;
 }
 
 uc-editor-button-control,
 uc-editor-crop-button-control,
+uc-editor-aspect-ratio-button-control,
+uc-editor-freeform-button-control,
 uc-editor-filter-control,
 uc-editor-operation-control {
   --l-base-min-width: var(--uc-button-size);
@@ -356,6 +358,8 @@ uc-editor-operation-control {
 
 uc-editor-button-control > button,
 uc-editor-crop-button-control > button,
+uc-editor-aspect-ratio-button-control > button,
+uc-editor-freeform-button-control > button,
 uc-editor-filter-control > button,
 uc-editor-operation-control > button {
   all: unset;
@@ -371,7 +375,23 @@ uc-editor-operation-control > button {
   transition: var(--l-width-transition);
 }
 
-:where(uc-editor-button-control, uc-editor-crop-button-control, uc-editor-filter-control, uc-editor-operation-control)
+uc-editor-freeform-button-control > button {
+  grid-template-columns: auto var(--l-base-min-width);
+}
+
+uc-editor-freeform-button-control > button > uc-icon {
+  margin-left: var(--cldtr-gap-mid-1);
+  width: 10px;
+}
+
+:where(
+    uc-editor-button-control,
+    uc-editor-crop-button-control,
+    uc-editor-aspect-ratio-button-control,
+    uc-editor-freeform-button-control,
+    uc-editor-filter-control,
+    uc-editor-operation-control
+  )
   > uc-icon
   > svg {
   width: var(--size-icon);
@@ -386,6 +406,8 @@ uc-editor-filter-control > uc-icon.uc-original-icon > svg {
 uc-editor-button-control.uc-active,
 uc-editor-operation-control.uc-active,
 uc-editor-crop-button-control.uc-active,
+uc-editor-aspect-ratio-button-control.uc-active,
+uc-editor-freeform-button-control.uc-active,
 uc-editor-filter-control.uc-active {
   --idle-color-rgb: var(--uc-primary-foreground);
   --idle-background: var(--uc-primary);
@@ -406,6 +428,8 @@ uc-editor-filter-control.uc-active .uc-preview {
 uc-editor-button-control.uc-not_active,
 uc-editor-operation-control.uc-not_active,
 uc-editor-crop-button-control.uc-not_active,
+uc-editor-aspect-ratio-button-control.uc-not_active,
+uc-editor-freeform-button-control.uc-not_active,
 uc-editor-filter-control.uc-not_active {
   --idle-color-rgb: var(--uc-secondary-foreground);
 }
@@ -413,6 +437,8 @@ uc-editor-filter-control.uc-not_active {
 :where(.uc-contrast) uc-editor-button-control.uc-not_active,
 :where(.uc-contrast) uc-editor-operation-control.uc-not_active,
 :where(.uc-contrast) uc-editor-crop-button-control.uc-not_active,
+:where(.uc-contrast) uc-editor-freeform-button-control.uc-not_active,
+:where(.uc-contrast) uc-editor-aspect-ratio-button-control.uc-not_active,
 :where(.uc-contrast) uc-editor-filter-control.uc-not_active {
   --idle-background: transparent;
   --hover-background: var(--uc-secondary);
@@ -424,6 +450,8 @@ uc-editor-filter-control.uc-not_active {
 uc-editor-button-control > button::before,
 uc-editor-operation-control > button::before,
 uc-editor-crop-button-control > button::before,
+uc-editor-freeform-button-control > button::before,
+uc-editor-aspect-ratio-button-control > button::before,
 uc-editor-filter-control > button::before {
   position: absolute;
   content: '';
@@ -440,6 +468,8 @@ uc-editor-filter-control > button::before {
 uc-editor-button-control > button .uc-title,
 uc-editor-operation-control > button .uc-title,
 uc-editor-crop-button-control > button .uc-title,
+uc-editor-aspect-ratio-button-control > button .uc-title,
+uc-editor-freeform-button-control > button .uc-title,
 uc-editor-filter-control > button .uc-title {
   padding-right: var(--cldtr-gap-mid-1);
   font-size: 0.7em;
@@ -447,9 +477,16 @@ uc-editor-filter-control > button .uc-title {
   text-transform: uppercase;
 }
 
+uc-editor-freeform-button-control > button .uc-title {
+  padding-left: var(--cldtr-gap-mid-1);
+  padding-right: 0;
+}
+
 uc-editor-button-control > button uc-icon,
 uc-editor-operation-control > button uc-icon,
 uc-editor-crop-button-control > button uc-icon,
+uc-editor-aspect-ratio-button-control > button uc-icon,
+uc-editor-freeform-button-control > button uc-icon,
 uc-editor-filter-control > button uc-icon {
   pointer-events: none;
 }
@@ -643,6 +680,15 @@ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar {
     visibility var(--transition-duration-3) ease-in-out;
 }
 
+.uc-sub-toolbar > .uc-list-aspect-ratio-container > .uc-list-aspect-ratio {
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  height: var(--size-panel-heading);
+}
+
 uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--visible {
   transform: translateY(0px);
   opacity: 1;
@@ -1195,3 +1241,19 @@ uc-presence-toggle.uc-initial {
 [uc-cloud-image-editor] .uc-cloud-mask {
   pointer-events: none;
 }
+
+[uc-aspect-ratio-freeform] button {
+  display: flex;
+}
+
+[uc-aspect-ratio-freeform] uc-icon {
+  display: none;
+}
+
+[uc-aspect-ratio-freeform] .uc-title {
+  padding-left: var(--cldtr-gap-mid-1);
+}
+
+:where(uc-editor-freeform-button-control, uc-editor-aspect-ratio-button-control:last-of-type) {
+  margin-right: calc(3 * var(--cldtr-gap-mid-1));
+}

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

@@ -12,4 +12,5 @@ export { BtnUi } from "./elements/button/BtnUi.js";
 export { LineLoaderUi } from "./elements/line-loader/LineLoaderUi.js";
 export { PresenceToggle } from "./elements/presence-toggle/PresenceToggle.js";
 export { SliderUi } from "./elements/slider/SliderUi.js";
+export { EditorAspectRatioButtonControl, EditorFreeformButtonControl } from "./EditorAspectRatioButtonControl.js";
 //# sourceMappingURL=index.d.ts.map

package/blocks/CloudImageEditor/src/index.js

@@ -1,6 +1,7 @@
 export { CloudImageEditorBlock } from './CloudImageEditorBlock.js';
 export { CropFrame } from './CropFrame.js';
 export { EditorCropButtonControl } from './EditorCropButtonControl.js';
+export { EditorAspectRatioButtonControl, EditorFreeformButtonControl } from './EditorAspectRatioButtonControl.js';
 export { EditorFilterControl } from './EditorFilterControl.js';
 export { EditorOperationControl } from './EditorOperationControl.js';
 export { EditorImageCropper } from './EditorImageCropper.js';

package/blocks/CloudImageEditor/src/lib/parseCropPreset.d.ts

@@ -1,2 +1,3 @@
-export function parseCropPreset(cropPreset: import("../../../../types/exported.d.ts").ConfigType["cropPreset"]): import("../types.js").CropAspectRatio[] | undefined;
+export function parseCropPreset(cropPreset: import("../../../../types/exported.d.ts").ConfigType["cropPreset"]): import("../types.js").CropAspectRatio[];
+export function getClosestAspectRatio(width: number, height: number, ratios: import("../types.js").CropPresetList, tolerance?: number): import("../types.js").CropAspectRatio | null;
 //# sourceMappingURL=parseCropPreset.d.ts.map

package/blocks/CloudImageEditor/src/lib/parseCropPreset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parseCropPreset.d.ts","sourceRoot":"","sources":["parseCropPreset.js"],"names":[],"mappings":"AAGO,4CADK,OAAO,iCAAiC,EAAE,UAAU,CAAC,YAAY,CAAC,uDAW7E"}
+{"version":3,"file":"parseCropPreset.d.ts","sourceRoot":"","sources":["parseCropPreset.js"],"names":[],"mappings":"AAOO,4CADK,OAAO,iCAAiC,EAAE,UAAU,CAAC,YAAY,CAAC,2CAmC7E;AASM,6CANI,MAAM,UACN,MAAM,UACN,OAAO,aAAa,EAAE,cAAc,cACpC,MAAM,GACJ,OAAO,aAAa,EAAE,eAAe,GAAG,IAAI,CA+BxD"}

package/blocks/CloudImageEditor/src/lib/parseCropPreset.js

@@ -1,14 +1,80 @@
 // @ts-check
+import { UID } from '@symbiotejs/symbiote';
+import { stringToArray } from '../../../../utils/stringToArray.js';
+
+const EXCLUDED_TYPES = ['free'];
 
 /** @param {import('../../../../types/exported.d.ts').ConfigType['cropPreset']} cropPreset */
 export const parseCropPreset = (cropPreset) => {
-  if (!cropPreset) return [];
-  const [w, h] = cropPreset.split(':').map(Number);
-  if (!Number.isFinite(w) || !Number.isFinite(h)) {
-    console.error(`Invalid crop preset: ${cropPreset}`);
-    return;
+  const items = stringToArray(cropPreset);
+  if (!items?.length) return [];
+
+  /** @type {import('../types.js').CropAspectRatio[]} */
+  const result = [];
+  for (let i = 0; i < items.length; i++) {
+    const raw = items[i].trim();
+    if (!raw) continue;
+
+    const sep = raw.indexOf(':');
+    if (sep === -1 && !EXCLUDED_TYPES.includes(raw)) {
+      console.warn(`Invalid crop preset: ${raw}`);
+      continue;
+    }
+
+    const w = Number(raw.slice(0, sep));
+    const h = Number(raw.slice(sep + 1));
+
+    if ((!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) && !EXCLUDED_TYPES.includes(raw)) {
+      console.warn(`Invalid crop preset: ${raw}`);
+      continue;
+    }
+
+    result.push({
+      id: UID.generate(),
+      type: 'aspect-ratio',
+      width: EXCLUDED_TYPES.includes(raw) ? 0 : w,
+      height: EXCLUDED_TYPES.includes(raw) ? 0 : h,
+      hasFreeform: EXCLUDED_TYPES.includes(raw),
+    });
+  }
+
+  return result;
+};
+
+/**
+ * @param {number} width
+ * @param {number} height
+ * @param {import('../types.js').CropPresetList} ratios
+ * @param {number} tolerance
+ * @returns {import('../types.js').CropAspectRatio | null}
+ */
+export const getClosestAspectRatio = (width, height, ratios, tolerance = 0.1) => {
+  const inputRatio = width / height;
+
+  let closest = null;
+  let minDiff = Infinity;
+
+  for (const r of ratios) {
+    const [w, h] = [r.width, r.height];
+    const ratio = w / h;
+
+    const diff = Math.abs(inputRatio - ratio);
+
+    if (diff < minDiff) {
+      minDiff = diff;
+      closest = r;
+    }
   }
-  /** @type {import('../types.js').CropAspectRatio} */
-  const aspectRatio = { type: 'aspect-ratio', width: w, height: h };
-  return [aspectRatio];
+
+  if (closest) {
+    const [cw, ch] = [closest.width, closest.height];
+    const closestRatio = cw / ch;
+
+    const relDiff = Math.abs(inputRatio - closestRatio) / closestRatio;
+    if (relDiff > tolerance) {
+      return null;
+    }
+  }
+
+  return closest;
 };

package/blocks/CloudImageEditor/src/lib/parseCropPreset.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=parseCropPreset.test.d.ts.map

package/blocks/CloudImageEditor/src/lib/parseCropPreset.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseCropPreset.test.d.ts","sourceRoot":"","sources":["parseCropPreset.test.js"],"names":[],"mappings":""}

package/blocks/CloudImageEditor/src/lib/parseCropPreset.test.js

@@ -0,0 +1,35 @@
+import { expect } from '@esm-bundle/chai';
+import { fake } from 'sinon';
+import { UID } from '@symbiotejs/symbiote';
+import { parseCropPreset, getClosestAspectRatio } from './parseCropPreset';
+
+describe('parseCropPreset', () => {
+  it('should parse crop presets correctly', () => {
+    const uniqueIds = 4;
+    let uidCallCount = 0;
+    UID.generate = fake(() => {
+      const id = `id-${(uidCallCount % uniqueIds) + 1}`;
+      uidCallCount += 1;
+      return id;
+    });
+
+    const input = '16:9, 3:4, 4:3, 1:1';
+    const uuid = () => UID.generate();
+    const expected = [
+      { id: uuid(), type: 'aspect-ratio', width: 16, height: 9, hasFreeform: false },
+      { id: uuid(), type: 'aspect-ratio', width: 3, height: 4, hasFreeform: false },
+      { id: uuid(), type: 'aspect-ratio', width: 4, height: 3, hasFreeform: false },
+      { id: uuid(), type: 'aspect-ratio', width: 1, height: 1, hasFreeform: false },
+    ];
+    const list = parseCropPreset(input);
+    expect(list).to.deep.equal(expected);
+
+    expect(getClosestAspectRatio(400, 500, list, 0.1)).to.deep.equal({
+      hasFreeform: false,
+      height: 4,
+      id: 'id-2',
+      type: 'aspect-ratio',
+      width: 3,
+    });
+  });
+});

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

@@ -9,9 +9,9 @@ export function initState(fnCtx: import("./CloudImageEditorBlock.js").CloudImage
     '*imageSize': null;
     /** @type {import('./types.js').Transformations} */
     '*editorTransformations': import("./types.js").Transformations;
-    /** @type {import('./types.js').CropPresetList} */
     '*cropPresetList': import("./types.js").CropPresetList;
-    '*tabList': ("crop" | "tuning" | "filters" | "ai")[];
+    '*currentAspectRatio': null;
+    '*tabList': ("crop" | "tuning" | "filters")[];
     '*tabId': "crop";
     entry: null;
     extension: null;

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

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["state.js"],"names":[],"mappings":"AAQA,gFAAgF;AAChF,iCADY,OAAO,4BAA4B,EAAE,qBAAqB;;;;;;;;IAUlE,mDAAmD;8BAAxC,OAAO,YAAY,EAAE,eAAe;IAE/C,kDAAkD;uBAAvC,OAAO,YAAY,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;IAmC9C,oEAAoE;mCAAxD,OAAO,YAAY,EAAE,eAAe;;EAoCnD"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["state.js"],"names":[],"mappings":"AAQA,gFAAgF;AAChF,iCADY,OAAO,4BAA4B,EAAE,qBAAqB;;;;;;;;IAUlE,mDAAmD;8BAAxC,OAAO,YAAY,EAAE,eAAe;uBAEjB,OAAO,YAAY,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;IAmCjE,oEAAoE;mCAAxD,OAAO,YAAY,EAAE,eAAe;;EAoCnD"}

package/blocks/CloudImageEditor/src/state.js

@@ -18,8 +18,8 @@ export function initState(fnCtx) {
     '*imageSize': null,
     /** @type {import('./types.js').Transformations} */
     '*editorTransformations': {},
-    /** @type {import('./types.js').CropPresetList} */
-    '*cropPresetList': [],
+    '*cropPresetList': /** @type {import('./types.js').CropPresetList} */ ([]),
+    '*currentAspectRatio': /** @type {import('./types.js').CropPresetList[0] | null} */ null,
     '*tabList': ALL_TABS,
     '*tabId': TabId.CROP,