diff --git a/blocks/CloudImageEditor/src/CloudEditor.js b/blocks/CloudImageEditor/src/CloudEditor.js index 600336e94..592b7812b 100644 --- a/blocks/CloudImageEditor/src/CloudEditor.js +++ b/blocks/CloudImageEditor/src/CloudEditor.js @@ -9,7 +9,7 @@ import { import { TRANSPARENT_PIXEL_SRC } from '../../../utils/transparentPixelSrc.js'; import { classNames } from './lib/classNames.js'; import { debounce } from './lib/debounce.js'; -import { operationsToTransformations } from './lib/transformationUtils.js'; +import { operationsToTransformations, transformationsToOperations } from './lib/transformationUtils.js'; import { initState } from './state.js'; import { TEMPLATE } from './template.js'; import { TabId } from './toolbar-constants.js'; @@ -89,7 +89,26 @@ export class CloudEditor extends Block { image_hidden_effects: tabId !== TabId.CROP, }); }); - + this.sub('*editorTransformations', (transformations) => { + let originalUrl = this.$['*originalUrl']; + let cdnUrlModifiers = createCdnUrlModifiers(transformationsToOperations(transformations)); + let cdnUrl = createCdnUrl(originalUrl, createCdnUrlModifiers(cdnUrlModifiers, 'preview')); + + /** @type {import('./types.js').ApplyResult} */ + let eventData = { + originalUrl, + cdnUrlModifiers, + cdnUrl, + transformations, + }; + this.dispatchEvent( + new CustomEvent('change', { + detail: eventData, + bubbles: true, + composed: true, + }) + ); + }); try { // TODO: catch errors fetch(createCdnUrl(this.$['*originalUrl'], createCdnUrlModifiers('json'))) diff --git a/blocks/CloudImageEditor/src/types.js b/blocks/CloudImageEditor/src/types.js index 6f80d2f80..e2715e766 100644 --- a/blocks/CloudImageEditor/src/types.js +++ b/blocks/CloudImageEditor/src/types.js @@ -43,4 +43,12 @@ * @property {Transformations} transformations */ +/** + * @typedef {Object} ChangeResult + * @property {string} originalUrl + * @property {string} cdnUrlModifiers + * @property {string} cdnUrl + * @property {Transformations} transformations + */ + export {};