@uploadcare/file-uploader 1.22.0 → 1.24.0-alpha.0

package/blocks/CloudImageEditor/src/EditorImageFader.js

@@ -1,456 +0,0 @@
-import { debounce } from '../../utils/debounce.js';
-import { Block } from '../../../abstract/Block.js';
-import { classNames } from './lib/classNames.js';
-import { linspace } from './lib/linspace.js';
-import { batchPreloadImages } from '../../utils/preloadImage.js';
-import { COLOR_OPERATIONS_CONFIG } from './toolbar-constants.js';
-import { viewerImageSrc } from './util.js';
-
-/**
- * @param {Number[]} numbers
- * @returns {[Number, Number][]}
- */
-function splitBySections(numbers) {
-  return numbers.reduce(
-    (acc, point, idx) => (idx < numbers.length - 1 ? [...acc, [point, numbers[idx + 1]]] : acc),
-    [],
-  );
-}
-
-/**
- * @param {Number[]} keypoints
- * @param {Number} value
- * @param {Number} zero
- */
-function calculateOpacities(keypoints, value, zero) {
-  let section = splitBySections(keypoints).find(([left, right]) => left <= value && value <= right);
-  return keypoints.map((point) => {
-    let distance = Math.abs(section[0] - section[1]);
-    let relation = Math.abs(value - section[0]) / distance;
-
-    if (section[0] === point) {
-      return value > zero ? 1 : 1 - relation;
-    }
-    if (section[1] === point) {
-      return value >= zero ? relation : 1;
-    }
-    return 0;
-  });
-}
-
-/**
- * @param {Number[]} keypoints
- * @param {Number} zero
- */
-function calculateZIndices(keypoints, zero) {
-  return keypoints.map((point, idx) => (point < zero ? keypoints.length - idx : idx));
-}
-
-/**
- * @param {String} operation
- * @param {Number} value
- * @returns {Number[]}
- */
-function keypointsRange(operation, value) {
-  let n = COLOR_OPERATIONS_CONFIG[operation].keypointsNumber;
-  let { range, zero } = COLOR_OPERATIONS_CONFIG[operation];
-
-  return [...new Set([...linspace(range[0], zero, n + 1), ...linspace(zero, range[1], n + 1), zero, value])].sort(
-    (a, b) => a - b,
-  );
-}
-
-/**
- * @typedef {Object} Keypoint
- * @property {String} src
- * @property {Number} opacity
- * @property {Number} zIndex
- * @property {HTMLImageElement} image
- * @property {Number} value
- */
-
-export class EditorImageFader extends Block {
-  constructor() {
-    super();
-
-    /**
-     * @private
-     * @type {Boolean}
-     */
-    this._isActive = false;
-
-    /**
-     * @private
-     * @type {Boolean}
-     */
-    this._hidden = true;
-
-    /** @private */
-    this._addKeypointDebounced = debounce(this._addKeypoint.bind(this), 600);
-
-    this.classList.add('uc-inactive_to_cropper');
-  }
-
-  /**
-   * @private
-   * @param {String} src
-   * @returns {() => void} Destructor
-   */
-  _handleImageLoading(src) {
-    let operation = this._operation;
-
-    let loadingOperations = this.$['*loadingOperations'];
-    if (!loadingOperations.get(operation)) {
-      loadingOperations.set(operation, new Map());
-    }
-
-    if (!loadingOperations.get(operation).get(src)) {
-      loadingOperations.set(operation, loadingOperations.get(operation).set(src, true));
-      this.$['*loadingOperations'] = loadingOperations;
-    }
-
-    return () => {
-      if (loadingOperations?.get(operation)?.has(src)) {
-        loadingOperations.get(operation).delete(src);
-        this.$['*loadingOperations'] = loadingOperations;
-      }
-    };
-  }
-
-  /** @private */
-  _flush() {
-    window.cancelAnimationFrame(this._raf);
-    this._raf = window.requestAnimationFrame(() => {
-      for (let kp of this._keypoints) {
-        let { image } = kp;
-        if (image) {
-          image.style.opacity = kp.opacity.toString();
-          image.style.zIndex = kp.zIndex.toString();
-        }
-      }
-    });
-  }
-
-  /**
-   * @private
-   * @param {Object} options
-   * @param {String} [options.url]
-   * @param {String} [options.filter]
-   * @param {String} [options.operation]
-   * @param {Number} [options.value]
-   * @returns {Promise<String>}
-   */
-  async _imageSrc({ url = this._url, filter = this._filter, operation, value } = {}) {
-    let transformations = { ...this._transformations };
-
-    if (operation) {
-      transformations[operation] = filter ? { name: filter, amount: value } : value;
-    }
-
-    // do not use getBoundingClientRect because scale transform affects it
-    let width = this.offsetWidth;
-    return await this.proxyUrl(viewerImageSrc(url, width, transformations));
-  }
-
-  /**
-   * @private
-   * @param {String} operation
-   * @param {Number} value
-   * @returns {Promise<Keypoint>}
-   */
-  async _constructKeypoint(operation, value) {
-    let src = await this._imageSrc({ operation, value });
-    return {
-      src,
-      image: null,
-      opacity: 0,
-      zIndex: 0,
-      value,
-    };
-  }
-
-  /**
-   * Check if current operation and filter equals passed ones
-   *
-   * @private
-   * @param {String} operation
-   * @param {String} [filter]
-   * @returns {Boolean}
-   */
-  _isSame(operation, filter) {
-    return this._operation === operation && this._filter === filter;
-  }
-
-  /**
-   * @private
-   * @param {String} operation
-   * @param {String | null} filter
-   * @param {Number} value
-   */
-  async _addKeypoint(operation, filter, value) {
-    let shouldSkip = () =>
-      !this._isSame(operation, filter) || this._value !== value || !!this._keypoints.find((kp) => kp.value === value);
-
-    if (shouldSkip()) {
-      return;
-    }
-    let keypoint = await this._constructKeypoint(operation, value);
-    let image = new Image();
-    image.src = keypoint.src;
-    let stop = this._handleImageLoading(keypoint.src);
-    image.addEventListener('load', stop, { once: true });
-    image.addEventListener('error', stop, { once: true });
-    keypoint.image = image;
-    image.classList.add('uc-fader-image');
-
-    image.addEventListener(
-      'load',
-      () => {
-        if (shouldSkip()) {
-          return;
-        }
-        let keypoints = this._keypoints;
-        let idx = keypoints.findIndex((kp) => kp.value > value);
-        let insertBeforeNode = idx < keypoints.length ? keypoints[idx].image : null;
-        if (!this._container || (insertBeforeNode && !this._container.contains(insertBeforeNode))) {
-          return;
-        }
-        keypoints.splice(idx, 0, keypoint);
-        this._container.insertBefore(image, insertBeforeNode);
-        this._update(operation, value);
-      },
-      { once: true },
-    );
-
-    image.addEventListener(
-      'error',
-      () => {
-        this.$['*networkProblems'] = true;
-      },
-      { once: true },
-    );
-  }
-
-  /** @param {String | Number} value */
-  set(value) {
-    value = typeof value === 'string' ? parseInt(value, 10) : value;
-    this._update(this._operation, value);
-    this._addKeypointDebounced(this._operation, this._filter, value);
-  }
-
-  /**
-   * @private
-   * @param {String} operation
-   * @param {Number} value
-   */
-  _update(operation, value) {
-    this._operation = operation;
-    this._value = value;
-
-    let { zero } = COLOR_OPERATIONS_CONFIG[operation];
-
-    let keypointValues = this._keypoints.map((kp) => kp.value);
-    let opacities = calculateOpacities(keypointValues, value, zero);
-    let zIndices = calculateZIndices(keypointValues, zero);
-
-    for (let [idx, kp] of Object.entries(this._keypoints)) {
-      kp.opacity = opacities[idx];
-      kp.zIndex = zIndices[idx];
-    }
-
-    this._flush();
-  }
-
-  /** @private */
-  _createPreviewImage() {
-    let image = new Image();
-    image.classList.add('uc-fader-image', 'uc-fader-image--preview');
-    image.style.opacity = '0';
-    return image;
-  }
-
-  /** @private */
-  async _initNodes() {
-    let fr = document.createDocumentFragment();
-    this._previewImage = this._previewImage || this._createPreviewImage();
-    !this.contains(this._previewImage) && fr.appendChild(this._previewImage);
-
-    let container = document.createElement('div');
-    fr.appendChild(container);
-
-    let srcList = this._keypoints.map((kp) => kp.src);
-
-    let { images, promise, cancel } = batchPreloadImages(srcList);
-    images.forEach((node) => {
-      let stop = this._handleImageLoading(node.src);
-      node.addEventListener('load', stop);
-      node.addEventListener('error', stop);
-    });
-    this._cancelLastImages = () => {
-      cancel();
-      this._cancelLastImages = undefined;
-    };
-    let operation = this._operation;
-    let filter = this._filter;
-    await promise;
-    if (this._isActive && this._isSame(operation, filter)) {
-      this._container && this._container.remove();
-      this._container = container;
-      this._keypoints.forEach((kp, idx) => {
-        let kpImage = images[idx];
-        kpImage.classList.add('uc-fader-image');
-        kp.image = kpImage;
-        this._container.appendChild(kpImage);
-      });
-      this.appendChild(fr);
-      this._flush();
-    }
-  }
-
-  /** @param {import('./types.js').Transformations} transformations */
-  async setTransformations(transformations) {
-    this._transformations = transformations;
-    if (this._previewImage) {
-      let src = await this._imageSrc();
-      let stop = this._handleImageLoading(src);
-      this._previewImage.src = src;
-      this._previewImage.addEventListener('load', stop, { once: true });
-      this._previewImage.addEventListener('error', stop, { once: true });
-      this._previewImage.style.opacity = '1';
-
-      this._previewImage.addEventListener(
-        'error',
-        () => {
-          this.$['*networkProblems'] = true;
-        },
-        { once: true },
-      );
-    }
-  }
-
-  /**
-   * @param {object} options
-   * @param {String} options.url
-   * @param {String} options.operation
-   * @param {Number} options.value
-   * @param {String} [options.filter]
-   */
-  async preload({ url, filter, operation, value }) {
-    this._cancelBatchPreload && this._cancelBatchPreload();
-
-    let keypoints = keypointsRange(operation, value);
-    let srcList = await Promise.all(keypoints.map((kp) => this._imageSrc({ url, filter, operation, value: kp })));
-    let { cancel } = batchPreloadImages(srcList);
-
-    this._cancelBatchPreload = cancel;
-  }
-
-  /** @private */
-  _setOriginalSrc(src) {
-    let image = this._previewImage || this._createPreviewImage();
-    !this.contains(image) && this.appendChild(image);
-    this._previewImage = image;
-
-    if (image.src === src) {
-      image.style.opacity = '1';
-      image.style.transform = 'scale(1)';
-
-      this.className = classNames({
-        'uc-active_from_viewer': this._fromViewer,
-        'uc-active_from_cropper': !this._fromViewer,
-        'uc-inactive_to_cropper': false,
-      });
-      return;
-    }
-    image.style.opacity = '0';
-    let stop = this._handleImageLoading(src);
-    image.addEventListener('error', stop, { once: true });
-    image.src = src;
-    image.addEventListener(
-      'load',
-      () => {
-        stop();
-        if (image) {
-          image.style.opacity = '1';
-          image.style.transform = 'scale(1)';
-
-          this.className = classNames({
-            'uc-active_from_viewer': this._fromViewer,
-            'uc-active_from_cropper': !this._fromViewer,
-            'uc-inactive_to_cropper': false,
-          });
-        }
-      },
-      { once: true },
-    );
-    image.addEventListener(
-      'error',
-      () => {
-        this.$['*networkProblems'] = true;
-      },
-      { once: true },
-    );
-  }
-
-  /**
-   * @param {object} options
-   * @param {String} options.url
-   * @param {String} [options.operation]
-   * @param {Number} [options.value]
-   * @param {String} [options.filter]
-   * @param {Boolean} [options.fromViewer]
-   */
-  async activate({ url, operation, value, filter, fromViewer }) {
-    this._isActive = true;
-    this._hidden = false;
-    this._url = url;
-    this._operation = operation || 'initial';
-    this._value = value;
-    this._filter = filter;
-    this._fromViewer = fromViewer;
-
-    let isOriginal = typeof value !== 'number' && !filter;
-    if (isOriginal) {
-      let src = await this._imageSrc({ operation, value });
-      this._setOriginalSrc(src);
-      this._container && this._container.remove();
-      return;
-    }
-    this._keypoints = await Promise.all(
-      keypointsRange(operation, value).map((keyValue) => this._constructKeypoint(operation, keyValue)),
-    );
-
-    this._update(operation, value);
-    this._initNodes();
-  }
-
-  /** @param {{ hide?: Boolean }} options */
-  deactivate({ hide = true } = {}) {
-    this._isActive = false;
-
-    this._cancelLastImages && this._cancelLastImages();
-    this._cancelBatchPreload && this._cancelBatchPreload();
-
-    if (hide && !this._hidden) {
-      this._hidden = true;
-      if (this._previewImage) {
-        this._previewImage.style.transform = 'scale(1)';
-      }
-
-      this.className = classNames({
-        'uc-active_from_viewer': false,
-        'uc-active_from_cropper': false,
-        'uc-inactive_to_cropper': true,
-      });
-      this.addEventListener(
-        'transitionend',
-        () => {
-          this._container && this._container.remove();
-        },
-        { once: true },
-      );
-    } else {
-      this._container && this._container.remove();
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-export class EditorOperationControl extends EditorButtonControl {
-    /**
-     * @private
-     * @type {import('./toolbar-constants.js').ColorOperation | ''}
-     */
-    private _operation;
-}
-import { EditorButtonControl } from './EditorButtonControl.js';
-//# sourceMappingURL=EditorOperationControl.d.ts.map

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

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

package/blocks/CloudImageEditor/src/EditorOperationControl.js

@@ -1,50 +0,0 @@
-//@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 | ''}
-   */
-  _operation = '';
-
-  initCallback() {
-    super.initCallback();
-
-    this.$['on.click'] = (/** @type {MouseEvent} */ 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) => {
-      if (operation) {
-        this._operation = operation;
-        this.$['icon'] = operation;
-        this.bindL10n('title-prop', () =>
-          this.l10n('a11y-cloud-editor-apply-tuning', {
-            name: this.l10n(operation).toLowerCase(),
-          }),
-        );
-        this.bindL10n('title', () => this.l10n(operation));
-      }
-    });
-
-    this.sub('*editorTransformations', (editorTransformations) => {
-      if (!this._operation) {
-        return;
-      }
-
-      let { zero } = COLOR_OPERATIONS_CONFIG[this._operation];
-      let value = editorTransformations[this._operation];
-      let isActive = typeof value !== 'undefined' ? value !== zero : false;
-      this.$.active = isActive;
-    });
-  }
-}

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

@@ -1,7 +0,0 @@
-export class EditorScroller extends Block {
-}
-export namespace EditorScroller {
-    let template: string;
-}
-import { Block } from '../../../abstract/Block.js';
-//# sourceMappingURL=EditorScroller.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"EditorScroller.d.ts","sourceRoot":"","sources":["EditorScroller.js"],"names":[],"mappings":"AAIA;CA0BC;;;;sBA9BqB,4BAA4B"}

package/blocks/CloudImageEditor/src/EditorScroller.js

@@ -1,33 +0,0 @@
-import { Block } from '../../../abstract/Block.js';
-
-const X_THRESHOLD = 1;
-
-export class EditorScroller extends Block {
-  initCallback() {
-    super.initCallback();
-
-    this.addEventListener(
-      'wheel',
-      (e) => {
-        e.preventDefault();
-
-        let { deltaY, deltaX } = e;
-        if (Math.abs(deltaX) > X_THRESHOLD) {
-          this.scrollLeft += deltaX;
-        } else {
-          this.scrollLeft += deltaY;
-        }
-      },
-      {
-        passive: false,
-      },
-    );
-
-    // This fixes some strange bug on MacOS - wheel event doesn't fire for physical mouse wheel if no scroll event attached also
-    this.addEventListener('scroll', () => {}, {
-      passive: true,
-    });
-  }
-}
-
-EditorScroller.template = /* HTML */ ` <slot></slot> `;

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

@@ -1,24 +0,0 @@
-export const FAKE_ORIGINAL_FILTER: "original";
-export class EditorSlider extends Block {
-    init$: any;
-    /**
-     * @param {String} operation
-     * @param {String} [filter]
-     */
-    setOperation(operation: string, filter?: string): void;
-    _controlType: string | undefined;
-    _operation: string | undefined;
-    _iconName: string | undefined;
-    _title: string | undefined;
-    _filter: string | undefined;
-    /** @private */
-    private _initializeValues;
-    apply(): void;
-    cancel(): void;
-    _originalUrl: any;
-}
-export namespace EditorSlider {
-    let template: string;
-}
-import { Block } from '../../../abstract/Block.js';
-//# sourceMappingURL=EditorSlider.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"EditorSlider.d.ts","sourceRoot":"","sources":["EditorSlider.js"],"names":[],"mappings":"AAQA,mCAAoC,UAAU,CAAC;AAE/C;IACE,WAYE;IAEF;;;OAGG;IACH,uDAgBC;IAfC,iCAA6F;IAC7F,+BAA2B;IAC3B,8BAA0B;IAC1B,2BAAqC;IACrC,4BAAqB;IAavB,eAAe;IACf,0BAuBC;IAED,cAmBC;IAED,eAEC;IAMG,kBAA+B;CAQpC;;;;sBA9GqB,4BAA4B"}