@uploadcare/file-uploader 0.50.1-alpha.2

package/blocks/CloudImageEditor/src/EditorButtonControl.js

@@ -0,0 +1,44 @@
+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,
+  };
+
+  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 type="button" role="option">
+    <uc-icon set="@name: icon;"></uc-icon>
+    <div class="uc-title" ref="title-el">{{title}}</div>
+  </button>
+`;

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

@@ -0,0 +1,6 @@
+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

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

package/blocks/CloudImageEditor/src/EditorCropButtonControl.js

@@ -0,0 +1,39 @@
+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.$['on.click'] = (e) => {
+      let prev = this.$['*cropperEl'].getValue(this._operation);
+      let next = nextValue(this._operation, prev);
+      this.$['*cropperEl'].setValue(this._operation, next);
+    };
+  }
+}

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

@@ -0,0 +1,18 @@
+export class EditorFilterControl extends EditorButtonControl {
+    _previewSrc(): string;
+    /**
+     * @param {IntersectionObserverEntry[]} entries
+     * @param {IntersectionObserver} observer
+     */
+    _observerCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
+    _cancelPreload: (() => void) | undefined;
+    _operation: string | undefined;
+    _filter: any;
+    _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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorFilterControl.d.ts","sourceRoot":"","sources":["EditorFilterControl.js"],"names":[],"mappings":"AAMA;IAWE,sBA0BC;IAED;;;OAGG;IACH,2BAHW,yBAAyB,EAAE,YAC3B,oBAAoB,QAuB9B;IAfG,yCAA4B;IAiC5B,+BAA0B;IAC1B,aAAqB;IAKvB,4CAEE;IAGF,kBAA+B;CAgDlC;;;;oCAlJmC,0BAA0B"}

package/blocks/CloudImageEditor/src/EditorFilterControl.js

@@ -0,0 +1,155 @@
+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 './lib/preloadImage.js';
+
+export class EditorFilterControl extends EditorButtonControl {
+  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'] };
+    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
+   */
+  _observerCallback(entries, observer) {
+    let intersectionEntry = entries[0];
+    if (intersectionEntry.isIntersecting) {
+      let src = 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 && this._cancelPreload();
+    }
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    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.$['*currentFilter'] = this._filter;
+    };
+
+    this.defineAccessor('filter', (filter) => {
+      this._operation = 'filter';
+      this._filter = filter;
+      this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
+      this.$.icon = this.$.isOriginal ? 'original' : 'slider';
+    });
+
+    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', (networkProblems) => {
+      if (!networkProblems) {
+        let src = 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 && this._cancelPreload();
+  }
+}
+
+EditorFilterControl.template = /* HTML */ `
+  <button type="button" role="option">
+    <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

@@ -0,0 +1,106 @@
+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

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