@uploadcare/file-uploader 1.23.0 → 1.24.0-alpha.1

package/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.js

@@ -1,140 +0,0 @@
-//@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'] = 'arrow-dropdown';
-    this.$['on.click'] = this.handleClick.bind(this);
-
-    this.sub('*currentAspectRatio', (opt) => {
-      this.$['title'] = opt.hasFreeform
-        ? this.l10n('freeform-crop')
-        : this.l10n('crop-to-shape', { value: `${opt.width}:${opt.height}` });
-
-      this.bindL10n('title-prop', () => this.$['title']);
-    });
-  }
-
-  handleClick() {
-    this.$['*showListAspectRatio'] = true;
-  }
-}
-
-EditorFreeformButtonControl.template = /* html */ ` 
-  <button role="option" type="button" set="@aria-label:title-prop;" l10n="@title:title-prop;">
-    <div class="uc-title" ref="title-el">{{title}}</div>
-    <uc-icon ref="icon-el" set="@name: icon;"></uc-icon>
-  </button> 
-`;
-
-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;
-        this.$['title'] = isFreeform ? this.l10n('custom') : `${value.width}:${value.height}`;
-
-        if (!isFreeform) {
-          this._renderRectBasedOnAspectRatio(value);
-        }
-
-        if (isFreeform) {
-          this.setAttribute('uc-aspect-ratio-freeform', '');
-        }
-
-        this._aspectRatio = value;
-
-        this.bindL10n('title-prop', () => {
-          return this.l10n('a11y-cloud-editor-apply-aspect-ratio', {
-            name: isFreeform
-              ? this.l10n('custom').toLowerCase()
-              : this.l10n('crop-to-shape', { value: `${value.width}:${value.height}` }).toLowerCase(),
-            value: '',
-          });
-        });
-      },
-    );
-
-    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,
-      rx: 2,
-      width,
-      height,
-    });
-
-    const svgEl = this.ref['icon-el']?.ref?.svg;
-
-    if (!svgEl) return;
-    svgEl.innerHTML = '';
-    svgEl.appendChild(rect);
-  }
-}

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

@@ -1,10 +0,0 @@
-export class EditorButtonControl extends Block {
-    init$: any;
-    _titleEl: any;
-    _iconEl: any;
-}
-export namespace EditorButtonControl {
-    let template: string;
-}
-import { Block } from '../../../abstract/Block.js';
-//# sourceMappingURL=EditorButtonControl.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"EditorButtonControl.d.ts","sourceRoot":"","sources":["EditorButtonControl.js"],"names":[],"mappings":"AAGA;IACE,WAOE;IAKA,cAAoC;IACpC,aAAkC;CAoBrC;;;;sBApCqB,4BAA4B"}

package/blocks/CloudImageEditor/src/EditorButtonControl.js

@@ -1,45 +0,0 @@
-import { classNames } from './lib/classNames.js';
-import { Block } from '../../../abstract/Block.js';
-
-export class EditorButtonControl extends Block {
-  init$ = {
-    ...this.init$,
-    active: false,
-    title: '',
-    icon: '',
-    'on.click': null,
-    'title-prop': '',
-  };
-
-  initCallback() {
-    super.initCallback();
-
-    this._titleEl = this.ref['title-el'];
-    this._iconEl = this.ref['icon-el'];
-
-    this.sub('title', (title) => {
-      let titleEl = this._titleEl;
-      if (titleEl) {
-        this._titleEl.style.display = title ? 'block' : 'none';
-      }
-    });
-
-    this.sub('active', (active) => {
-      this.className = classNames({
-        'uc-active': active,
-        'uc-not_active': !active,
-      });
-    });
-
-    this.sub('on.click', (onClick) => {
-      this.onclick = onClick;
-    });
-  }
-}
-
-EditorButtonControl.template = /* HTML */ `
-  <button role="option" type="button" set="@aria-label:title-prop;" l10n="@title:title-prop;">
-    <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

@@ -1,6 +0,0 @@
-export class EditorCropButtonControl extends EditorButtonControl {
-    /** @private */
-    private _operation;
-}
-import { EditorButtonControl } from './EditorButtonControl.js';
-//# sourceMappingURL=EditorCropButtonControl.d.ts.map

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

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

package/blocks/CloudImageEditor/src/EditorCropButtonControl.js

@@ -1,52 +0,0 @@
-import { EditorButtonControl } from './EditorButtonControl.js';
-
-function nextAngle(prev) {
-  let angle = prev + 90;
-  angle = angle >= 360 ? 0 : angle;
-  return angle;
-}
-
-function nextValue(operation, prev) {
-  if (operation === 'rotate') {
-    return nextAngle(prev);
-  }
-  if (['mirror', 'flip'].includes(operation)) {
-    return !prev;
-  }
-  return null;
-}
-
-export class EditorCropButtonControl extends EditorButtonControl {
-  initCallback() {
-    super.initCallback();
-
-    this.defineAccessor('operation', (operation) => {
-      if (!operation) {
-        return;
-      }
-
-      /** @private */
-      this._operation = operation;
-      this.$['icon'] = operation;
-
-      this.bindL10n('title-prop', () =>
-        this.l10n('a11y-cloud-editor-apply-crop', {
-          name: this.l10n(operation).toLowerCase(),
-        }),
-      );
-    });
-
-    this.$['on.click'] = (e) => {
-      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

@@ -1,18 +0,0 @@
-export class EditorFilterControl extends EditorButtonControl {
-    _previewSrc(): string;
-    /**
-     * @param {IntersectionObserverEntry[]} entries
-     * @param {IntersectionObserver} observer
-     */
-    _observerCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): Promise<void>;
-    _cancelPreload: (() => void) | undefined;
-    _operation: string | undefined;
-    _filter: string | undefined;
-    _observer: IntersectionObserver | undefined;
-    _originalUrl: any;
-}
-export namespace EditorFilterControl {
-    let template: string;
-}
-import { EditorButtonControl } from './EditorButtonControl.js';
-//# sourceMappingURL=EditorFilterControl.d.ts.map

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

@@ -1 +0,0 @@
-{"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"}

package/blocks/CloudImageEditor/src/EditorFilterControl.js

@@ -1,177 +0,0 @@
-// @ts-check
-import { createCdnUrl, createCdnUrlModifiers } from '../../../utils/cdn-utils.js';
-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() {
-    super();
-
-    this.init$ = {
-      ...this.init$,
-      active: false,
-      title: '',
-      icon: '',
-      isOriginal: false,
-      iconSize: '20',
-      'on.click': null,
-    };
-  }
-
-  _previewSrc() {
-    let previewSize = parseInt(window.getComputedStyle(this).getPropertyValue('--l-base-min-width'), 10);
-    let dpr = window.devicePixelRatio;
-    let size = Math.ceil(dpr * previewSize);
-    let quality = dpr >= 2 ? 'lightest' : 'normal';
-    let filterValue = 100;
-
-    /** @type {import('./types.js').Transformations} */
-    let transformations = { ...this.$['*editorTransformations'] };
-    // @ts-expect-error FIXME: fix this
-    transformations[this._operation] =
-      this._filter !== FAKE_ORIGINAL_FILTER
-        ? {
-            name: this._filter,
-            amount: filterValue,
-          }
-        : undefined;
-
-    return createCdnUrl(
-      this._originalUrl,
-      createCdnUrlModifiers(
-        COMMON_OPERATIONS,
-        transformationsToOperations(transformations),
-        `quality/${quality}`,
-        `scale_crop/${size}x${size}/center`,
-      ),
-    );
-  }
-
-  /**
-   * @param {IntersectionObserverEntry[]} entries
-   * @param {IntersectionObserver} observer
-   */
-  async _observerCallback(entries, observer) {
-    let intersectionEntry = entries[0];
-    if (intersectionEntry.isIntersecting) {
-      let src = await this.proxyUrl(this._previewSrc());
-      let previewEl = this.ref['preview-el'];
-      let { promise, cancel } = preloadImage(src);
-      this._cancelPreload = cancel;
-      promise
-        .catch((err) => {
-          this.$['*networkProblems'] = true;
-          console.error('Failed to load image', { error: err });
-        })
-        .finally(() => {
-          previewEl.style.backgroundImage = `url(${src})`;
-          previewEl.setAttribute('loaded', '');
-
-          observer.unobserve(this);
-        });
-    } else {
-      this._cancelPreload?.();
-    }
-  }
-
-  initCallback() {
-    super.initCallback();
-
-    /** @param {MouseEvent} e */
-    this.$['on.click'] = (e) => {
-      if (!this.$.active) {
-        this.$['*sliderEl'].setOperation(this._operation, this._filter);
-        this.$['*sliderEl'].apply();
-      } else if (!this.$.isOriginal) {
-        this.$['*sliderEl'].setOperation(this._operation, this._filter);
-        this.$['*showSlider'] = true;
-      }
-
-      this.telemetryManager.sendEventCloudImageEditor(e, this.$['*tabId'], {
-        operation: parseFilterValue(this.$['*operationTooltip']),
-      });
-
-      this.$['*currentFilter'] = this._filter;
-    };
-
-    this.defineAccessor(
-      'filter',
-      /** @param {string} filter */
-      (filter) => {
-        this._operation = 'filter';
-        this._filter = filter;
-        this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
-        this.$.icon = this.$.isOriginal ? 'original' : 'slider';
-
-        this.bindL10n('title-prop', () =>
-          this.l10n('a11y-cloud-editor-apply-filter', {
-            name: filter.toLowerCase(),
-          }),
-        );
-      },
-    );
-
-    this._observer = new window.IntersectionObserver(this._observerCallback.bind(this), {
-      threshold: [0, 1],
-    });
-
-    let originalUrl = this.$['*originalUrl'];
-    this._originalUrl = originalUrl;
-
-    if (this.$.isOriginal) {
-      this.ref['icon-el'].classList.add('uc-original-icon');
-    } else {
-      this._observer.observe(this);
-    }
-
-    this.sub('*currentFilter', (currentFilter) => {
-      this.$.active = currentFilter && currentFilter === this._filter;
-    });
-
-    this.sub('isOriginal', (isOriginal) => {
-      this.$.iconSize = isOriginal ? 40 : 20;
-    });
-
-    this.sub('active', (active) => {
-      if (this.$.isOriginal) {
-        return;
-      }
-      let iconEl = this.ref['icon-el'];
-      iconEl.style.opacity = active ? '1' : '0';
-
-      let previewEl = this.ref['preview-el'];
-      if (active) {
-        previewEl.style.opacity = '0';
-      } else if (previewEl.style.backgroundImage) {
-        previewEl.style.opacity = '1';
-      }
-    });
-
-    this.sub('*networkProblems', async (networkProblems) => {
-      if (!networkProblems) {
-        let src = await this.proxyUrl(this._previewSrc());
-        let previewEl = this.ref['preview-el'];
-        if (previewEl.style.backgroundImage) {
-          previewEl.style.backgroundImage = 'none';
-          previewEl.style.backgroundImage = `url(${src})`;
-        }
-      }
-    });
-  }
-
-  destroyCallback() {
-    super.destroyCallback();
-    this._observer?.disconnect();
-    this._cancelPreload?.();
-  }
-}
-
-EditorFilterControl.template = /* HTML */ `
-  <button type="button" role="option" l10n="@title:title-prop;@aria-label:title-prop">
-    <div class="uc-preview" ref="preview-el"></div>
-    <uc-icon ref="icon-el" set="@name: icon; @size: iconSize;"></uc-icon>
-  </button>
-`;

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

@@ -1,106 +0,0 @@
-export class EditorImageCropper extends Block {
-    init$: {
-        image: null;
-        '*padding': number;
-        /** @type {Operations} */
-        '*operations': Operations;
-        /** @type {import('./types.js').Rectangle} */
-        '*imageBox': import("./types.js").Rectangle;
-        /** @type {import('./types.js').Rectangle} */
-        '*cropBox': import("./types.js").Rectangle;
-    };
-    /** @private */
-    private _commitDebounced;
-    /** @private */
-    private _handleResizeThrottled;
-    _imageSize: {
-        width: number;
-        height: number;
-    };
-    /** @private */
-    private _handleResize;
-    /** @private */
-    private _syncTransformations;
-    /** @private */
-    private _initCanvas;
-    _canvas: HTMLCanvasElement | undefined;
-    _ctx: CanvasRenderingContext2D | null | undefined;
-    /** @private */
-    private _alignImage;
-    /** @private */
-    private _alignCrop;
-    /** @private */
-    private _drawImage;
-    /** @private */
-    private _draw;
-    /**
-     * @private
-     * @param {{ fromViewer?: boolean }} options
-     */
-    private _animateIn;
-    /**
-     * @private
-     * @returns {NonNullable<import('./types.js').Transformations['crop']>['dimensions']}
-     */
-    private _getCropDimensions;
-    /**
-     * @private
-     * @returns {import('./types.js').Transformations['crop']}
-     */
-    private _getCropTransformation;
-    /** @private */
-    private _commit;
-    /**
-     * @param {String} operation
-     * @param {Number} value
-     * @returns {void}
-     */
-    setValue(operation: string, value: number): void;
-    /**
-     * @param {keyof Operations} operation
-     * @returns {Number | boolean}
-     */
-    getValue(operation: keyof Operations): number | boolean;
-    /**
-     * @param {import('./types.js').ImageSize} imageSize
-     * @param {{ fromViewer?: boolean }} options
-     */
-    activate(imageSize: import("./types.js").ImageSize, { fromViewer }?: {
-        fromViewer?: boolean;
-    }): Promise<void>;
-    _isActive: boolean | undefined;
-    _observer: ResizeObserver | undefined;
-    deactivate({ reset }?: {
-        reset?: boolean | undefined;
-    }): void;
-    /** @private */
-    private _transitionToCrop;
-    /** @private */
-    private _transitionToImage;
-    /** @private */
-    private _reset;
-    /**
-     * @private
-     * @param {String} originalUrl
-     * @param {import('./types.js').Transformations} transformations
-     * @returns {Promise<HTMLImageElement>}
-     */
-    private _waitForImage;
-    _cancelPreload: (() => void) | undefined;
-    /**
-     * @private
-     * @param {String} src
-     * @returns {() => void} Destructor
-     */
-    private _handleImageLoading;
-}
-export namespace EditorImageCropper {
-    let template: string;
-}
-export type Operations = {
-    flip: boolean;
-    mirror: boolean;
-    rotate: number;
-};
-import { Block } from '../../../abstract/Block.js';
-//# sourceMappingURL=EditorImageCropper.d.ts.map

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

@@ -1 +0,0 @@
-{"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,iBA0BlC;IApBC,+BAAqB;IAarB,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"}