@uploadcare/file-uploader 0.50.1-alpha.2

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

@@ -0,0 +1,146 @@
+export class CropFrame extends Block {
+    init$: {
+        dragging: boolean;
+    };
+    /** @private */
+    private _handlePointerUp;
+    /** @private */
+    private _handlePointerMove;
+    /** @private */
+    private _handleSvgPointerMove;
+    /**
+     * @private
+     * @param {import('./types.js').Direction} direction
+     */
+    private _shouldThumbBeDisabled;
+    /** @private */
+    private _createBackdrop;
+    _backdropMask: SVGElement | undefined;
+    _backdropMaskInner: SVGElement | undefined;
+    /**
+     * @private Super Tricky workaround for the chromium bug See
+     *   https://bugs.chromium.org/p/chromium/issues/detail?id=330815
+     */
+    private _resizeBackdrop;
+    /** @private */
+    private _updateBackdrop;
+    /** @private */
+    private _updateFrame;
+    /** @private */
+    private _createThumbs;
+    /** @private */
+    private _createGuides;
+    /** @private */
+    private _createFrame;
+    _frameThumbs: Partial<{
+        "": {
+            direction: import('./types.js').Direction;
+            pathNode: SVGElement;
+            interactionNode: SVGElement;
+            groupNode: SVGElement;
+        };
+        n: {
+            direction: import('./types.js').Direction;
+            pathNode: SVGElement;
+            interactionNode: SVGElement;
+            groupNode: SVGElement;
+        };
+        s: {
+            direction: import('./types.js').Direction;
+            pathNode: SVGElement;
+            interactionNode: SVGElement;
+            groupNode: SVGElement;
+        };
+        e: {
+            direction: import('./types.js').Direction;
+            pathNode: SVGElement;
+            interactionNode: SVGElement;
+            groupNode: SVGElement;
+        };
+        w: {
+            direction: import('./types.js').Direction;
+            pathNode: SVGElement;
+            interactionNode: SVGElement;
+            groupNode: SVGElement;
+        };
+        ne: {
+            direction: import('./types.js').Direction;
+            pathNode: SVGElement;
+            interactionNode: SVGElement;
+            groupNode: SVGElement;
+        };
+        nw: {
+            direction: import('./types.js').Direction;
+            pathNode: SVGElement;
+            interactionNode: SVGElement;
+            groupNode: SVGElement;
+        };
+        se: {
+            direction: import('./types.js').Direction;
+            pathNode: SVGElement;
+            interactionNode: SVGElement;
+            groupNode: SVGElement;
+        };
+        sw: {
+            direction: import('./types.js').Direction;
+            pathNode: SVGElement;
+            interactionNode: SVGElement;
+            groupNode: SVGElement;
+        };
+    }> | undefined;
+    _frameGuides: SVGElement | undefined;
+    /**
+     * @private
+     * @param {import('./types.js').Direction} direction
+     * @param {PointerEvent} e
+     */
+    private _handlePointerDown;
+    _draggingThumb: {
+        direction: import('./types.js').Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    _dragStartPoint: number[] | undefined;
+    /** @type {import('./types.js').Rectangle} */
+    _dragStartCrop: import("./types.js").Rectangle | undefined;
+    /**
+     * @private
+     * @param {PointerEvent} e
+     */
+    private _handlePointerUp_;
+    /**
+     * @private
+     * @param {PointerEvent} e
+     */
+    private _handlePointerMove_;
+    /**
+     * @private
+     * @param {import('./types.js').Direction} direction
+     * @param {[Number, Number]} delta
+     */
+    private _calcCropBox;
+    /**
+     * @private
+     * @param {PointerEvent} e
+     */
+    private _handleSvgPointerMove_;
+    _hoverThumb: {
+        direction: import('./types.js').Direction;
+        pathNode: SVGElement;
+        interactionNode: SVGElement;
+        groupNode: SVGElement;
+    } | undefined;
+    /** @private */
+    private _updateCursor;
+    /** @private */
+    private _render;
+    /** @param {boolean} visible */
+    toggleThumbs(visible: boolean): void;
+    _guidesHidden: boolean | undefined;
+}
+export namespace CropFrame {
+    let template: string;
+}
+import { Block } from '../../../abstract/Block.js';
+//# sourceMappingURL=CropFrame.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CropFrame.d.ts","sourceRoot":"","sources":["CropFrame.js"],"names":[],"mappings":"AA2BA;IAII;;MAGC;IAED,eAAe;IACf,yBAAyD;IAEzD,eAAe;IACf,2BAA6D;IAE7D,eAAe;IACf,8BAAmE;IAGrE;;;OAGG;IACH,+BAaC;IAED,eAAe;IACf,wBAyCC;IAFC,sCAAyB;IACzB,2CAAuC;IAGzC;;;OAGG;IACH,wBAUC;IAED,eAAe;IACf,wBASC;IAED,eAAe;IACf,qBAgEC;IAED,eAAe;IACf,sBAyCC;IAED,eAAe;IACf,sBA4CC;IAED,eAAe;IACf,qBAeC;IAFC;;uBApGkB,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;;uBAHV,OAAO,YAAY,EAAE,SAAS;sBAC/B,UAAU;6BACH,UAAU;uBAChB,UAAU;;mBAiGG;IAC/B,qCAA+B;IAGjC;;;;OAIG;IACH,2BAiBC;IAJC;mBA1HkB,OAAO,YAAY,EAAE,SAAS;kBAC/B,UAAU;yBACH,UAAU;mBAChB,UAAU;kBAuHD;IAC3B,sCAA6B;IAC7B,6CAA6C;IAC7C,2DAAoC;IAGtC;;;OAGG;IACH,0BAUC;IAED;;;OAGG;IACH,4BAmBC;IAED;;;;OAIG;IACH,qBAsBC;IAED;;;OAGG;IACH,+BAqBC;IAFC;mBA7NkB,OAAO,YAAY,EAAE,SAAS;kBAC/B,UAAU;yBACH,UAAU;mBAChB,UAAU;kBA0NC;IAI/B,eAAe;IACf,sBAGC;IAED,eAAe;IACf,gBAGC;IAED,+BAA+B;IAC/B,sBADY,OAAO,QAclB;IAmBG,mCAAsF;CA6B3F;;;;sBA3fqB,4BAA4B"}

package/blocks/CloudImageEditor/src/CropFrame.js

@@ -0,0 +1,511 @@
+// @ts-check
+import { Block } from '../../../abstract/Block.js';
+import {
+  clamp,
+  constraintRect,
+  cornerPath,
+  createSvgNode,
+  moveRect,
+  rectContainsPoint,
+  resizeRect,
+  roundRect,
+  setSvgNodeAttrs,
+  sidePath,
+  thumbCursor,
+} from './crop-utils.js';
+import {
+  GUIDE_STROKE_WIDTH,
+  GUIDE_THIRD,
+  MAX_INTERACTION_SIZE,
+  MIN_CROP_SIZE,
+  MIN_INTERACTION_SIZE,
+  THUMB_CORNER_SIZE,
+  THUMB_SIDE_SIZE,
+  THUMB_STROKE_WIDTH,
+} from './cropper-constants.js';
+import { classNames } from './lib/classNames.js';
+
+export class CropFrame extends Block {
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      dragging: false,
+    };
+
+    /** @private */
+    this._handlePointerUp = this._handlePointerUp_.bind(this);
+
+    /** @private */
+    this._handlePointerMove = this._handlePointerMove_.bind(this);
+
+    /** @private */
+    this._handleSvgPointerMove = this._handleSvgPointerMove_.bind(this);
+  }
+
+  /**
+   * @private
+   * @param {import('./types.js').Direction} direction
+   */
+  _shouldThumbBeDisabled(direction) {
+    let imageBox = this.$['*imageBox'];
+    if (!imageBox) {
+      return;
+    }
+
+    if (direction === '' && imageBox.height <= MIN_CROP_SIZE && imageBox.width <= MIN_CROP_SIZE) {
+      return true;
+    }
+
+    let tooHigh = imageBox.height <= MIN_CROP_SIZE && (direction.includes('n') || direction.includes('s'));
+    let tooWide = imageBox.width <= MIN_CROP_SIZE && (direction.includes('e') || direction.includes('w'));
+    return tooHigh || tooWide;
+  }
+
+  /** @private */
+  _createBackdrop() {
+    /** @type {import('./types.js').Rectangle} */
+    let cropBox = this.$['*cropBox'];
+    if (!cropBox) {
+      return;
+    }
+    let { x, y, width, height } = cropBox;
+    let svg = this.ref['svg-el'];
+
+    let mask = createSvgNode('mask', { id: 'backdrop-mask' });
+    let maskRectOuter = createSvgNode('rect', {
+      x: 0,
+      y: 0,
+      width: '100%',
+      height: '100%',
+      fill: 'white',
+    });
+    let maskRectInner = createSvgNode('rect', {
+      x,
+      y,
+      width,
+      height,
+      fill: 'black',
+    });
+    mask.appendChild(maskRectOuter);
+    mask.appendChild(maskRectInner);
+
+    let backdropRect = createSvgNode('rect', {
+      x: 0,
+      y: 0,
+      width: '100%',
+      height: '100%',
+      fill: 'var(--color-image-background)',
+      'fill-opacity': 0.85,
+      mask: 'url(#backdrop-mask)',
+    });
+    svg.appendChild(backdropRect);
+    svg.appendChild(mask);
+
+    this._backdropMask = mask;
+    this._backdropMaskInner = maskRectInner;
+  }
+
+  /**
+   * @private Super Tricky workaround for the chromium bug See
+   *   https://bugs.chromium.org/p/chromium/issues/detail?id=330815
+   */
+  _resizeBackdrop() {
+    if (!this._backdropMask) {
+      return;
+    }
+    this._backdropMask.style.display = 'none';
+    window.requestAnimationFrame(() => {
+      if (this._backdropMask) {
+        this._backdropMask.style.display = 'block';
+      }
+    });
+  }
+
+  /** @private */
+  _updateBackdrop() {
+    /** @type {import('./types.js').Rectangle} */
+    let cropBox = this.$['*cropBox'];
+    if (!cropBox) {
+      return;
+    }
+    let { x, y, width, height } = cropBox;
+
+    this._backdropMaskInner && setSvgNodeAttrs(this._backdropMaskInner, { x, y, width, height });
+  }
+
+  /** @private */
+  _updateFrame() {
+    /** @type {import('./types.js').Rectangle} */
+    let cropBox = this.$['*cropBox'];
+
+    if (!cropBox || !this._frameGuides || !this._frameThumbs) {
+      return;
+    }
+    for (let thumb of Object.values(this._frameThumbs)) {
+      let { direction, pathNode, interactionNode, groupNode } = thumb;
+      let isCenter = direction === '';
+      let isCorner = direction.length === 2;
+      let { x, y, width, height } = cropBox;
+
+      if (isCenter) {
+        const moveThumbRect = {
+          x: x + width / 3,
+          y: y + height / 3,
+          width: width / 3,
+          height: height / 3,
+        };
+        setSvgNodeAttrs(interactionNode, moveThumbRect);
+      } else {
+        const thumbSizeMultiplier = clamp(
+          Math.min(width, height) / (THUMB_CORNER_SIZE * 2 + THUMB_SIDE_SIZE) / 2,
+          0,
+          1,
+        );
+
+        let { d, center } = isCorner
+          ? cornerPath(cropBox, direction, thumbSizeMultiplier)
+          : sidePath(
+              cropBox,
+              /** @type {Extract<import('./types.js').Direction, 'n' | 's' | 'w' | 'e'>} */ (direction),
+              thumbSizeMultiplier,
+            );
+        const size = Math.max(
+          MAX_INTERACTION_SIZE * clamp(Math.min(width, height) / MAX_INTERACTION_SIZE / 3, 0, 1),
+          MIN_INTERACTION_SIZE,
+        );
+        setSvgNodeAttrs(interactionNode, {
+          x: center[0] - size,
+          y: center[1] - size,
+          width: size * 2,
+          height: size * 2,
+        });
+        setSvgNodeAttrs(pathNode, { d });
+      }
+
+      let disableThumb = this._shouldThumbBeDisabled(direction);
+      groupNode.setAttribute(
+        'class',
+        classNames('uc-thumb', {
+          'uc-thumb--hidden': disableThumb,
+          'uc-thumb--visible': !disableThumb,
+        }),
+      );
+    }
+
+    setSvgNodeAttrs(this._frameGuides, {
+      x: cropBox.x - GUIDE_STROKE_WIDTH * 0.5,
+      y: cropBox.y - GUIDE_STROKE_WIDTH * 0.5,
+      width: cropBox.width + GUIDE_STROKE_WIDTH,
+      height: cropBox.height + GUIDE_STROKE_WIDTH,
+    });
+  }
+
+  /** @private */
+  _createThumbs() {
+    /**
+     * @type {Partial<{
+     *   [K in import('./types.js').Direction]: {
+     *     direction: import('./types.js').Direction;
+     *     pathNode: SVGElement;
+     *     interactionNode: SVGElement;
+     *     groupNode: SVGElement;
+     *   };
+     * }>}
+     */
+    const frameThumbs = {};
+
+    for (let i = 0; i < 3; i++) {
+      for (let j = 0; j < 3; j++) {
+        let direction = /** @type {import('./types.js').Direction} */ (`${['n', '', 's'][i]}${['w', '', 'e'][j]}`);
+        let groupNode = createSvgNode('g');
+        groupNode.classList.add('uc-thumb');
+        groupNode.setAttribute('with-effects', '');
+        let interactionNode = createSvgNode('rect', {
+          fill: 'transparent',
+        });
+        let pathNode = createSvgNode('path', {
+          stroke: 'currentColor',
+          fill: 'none',
+          'stroke-width': THUMB_STROKE_WIDTH,
+        });
+        groupNode.appendChild(pathNode);
+        groupNode.appendChild(interactionNode);
+        frameThumbs[direction] = {
+          direction,
+          pathNode,
+          interactionNode,
+          groupNode,
+        };
+
+        interactionNode.addEventListener('pointerdown', this._handlePointerDown.bind(this, direction));
+      }
+    }
+
+    return frameThumbs;
+  }
+
+  /** @private */
+  _createGuides() {
+    let svg = createSvgNode('svg');
+
+    let rect = createSvgNode('rect', {
+      x: 0,
+      y: 0,
+      width: '100%',
+      height: '100%',
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': GUIDE_STROKE_WIDTH,
+      'stroke-opacity': 0.5,
+    });
+    svg.appendChild(rect);
+
+    for (let i = 1; i <= 2; i++) {
+      let line = createSvgNode('line', {
+        x1: `${GUIDE_THIRD * i}%`,
+        y1: `0%`,
+        x2: `${GUIDE_THIRD * i}%`,
+        y2: `100%`,
+        stroke: 'currentColor',
+        'stroke-width': GUIDE_STROKE_WIDTH,
+        'stroke-opacity': 0.3,
+      });
+      svg.appendChild(line);
+    }
+
+    for (let i = 1; i <= 2; i++) {
+      let line = createSvgNode('line', {
+        x1: `0%`,
+        y1: `${GUIDE_THIRD * i}%`,
+        x2: `100%`,
+        y2: `${GUIDE_THIRD * i}%`,
+        stroke: 'currentColor',
+        'stroke-width': GUIDE_STROKE_WIDTH,
+        'stroke-opacity': 0.3,
+      });
+      svg.appendChild(line);
+    }
+
+    svg.classList.add('uc-guides', 'uc-guides--semi-hidden');
+
+    return svg;
+  }
+
+  /** @private */
+  _createFrame() {
+    let svg = this.ref['svg-el'];
+    let fr = document.createDocumentFragment();
+
+    let frameGuides = this._createGuides();
+    fr.appendChild(frameGuides);
+
+    let frameThumbs = this._createThumbs();
+    for (let { groupNode } of Object.values(frameThumbs)) {
+      fr.appendChild(groupNode);
+    }
+
+    svg.appendChild(fr);
+    this._frameThumbs = frameThumbs;
+    this._frameGuides = frameGuides;
+  }
+
+  /**
+   * @private
+   * @param {import('./types.js').Direction} direction
+   * @param {PointerEvent} e
+   */
+  _handlePointerDown(direction, e) {
+    if (!this._frameThumbs) return;
+    let thumb = this._frameThumbs[direction];
+    if (this._shouldThumbBeDisabled(direction)) {
+      return;
+    }
+
+    let cropBox = this.$['*cropBox'];
+    let { x: svgX, y: svgY } = this.ref['svg-el'].getBoundingClientRect();
+    let x = e.x - svgX;
+    let y = e.y - svgY;
+
+    this.$.dragging = true;
+    this._draggingThumb = thumb;
+    this._dragStartPoint = [x, y];
+    /** @type {import('./types.js').Rectangle} */
+    this._dragStartCrop = { ...cropBox };
+  }
+
+  /**
+   * @private
+   * @param {PointerEvent} e
+   */
+  _handlePointerUp_(e) {
+    this._updateCursor();
+
+    if (!this.$.dragging) {
+      return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+
+    this.$.dragging = false;
+  }
+
+  /**
+   * @private
+   * @param {PointerEvent} e
+   */
+  _handlePointerMove_(e) {
+    if (!this.$.dragging || !this._dragStartPoint || !this._draggingThumb) {
+      return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+
+    let svg = this.ref['svg-el'];
+    let { x: svgX, y: svgY } = svg.getBoundingClientRect();
+    let x = e.x - svgX;
+    let y = e.y - svgY;
+    let dx = x - this._dragStartPoint[0];
+    let dy = y - this._dragStartPoint[1];
+    let { direction } = this._draggingThumb;
+
+    const movedCropBox = this._calcCropBox(direction, [dx, dy]);
+    if (movedCropBox) {
+      this.$['*cropBox'] = movedCropBox;
+    }
+  }
+
+  /**
+   * @private
+   * @param {import('./types.js').Direction} direction
+   * @param {[Number, Number]} delta
+   */
+  _calcCropBox(direction, delta) {
+    const [dx, dy] = delta;
+    /** @type {import('./types.js').Rectangle} */
+    let imageBox = this.$['*imageBox'];
+    let rect = /** @type {import('./types.js').Rectangle} */ (this._dragStartCrop) ?? this.$['*cropBox'];
+    /** @type {import('./types.js').CropPresetList[0]} */
+    const cropPreset = this.$['*cropPresetList']?.[0];
+    const aspectRatio = cropPreset ? cropPreset.width / cropPreset.height : undefined;
+
+    if (direction === '') {
+      rect = moveRect({ rect, delta: [dx, dy], imageBox });
+    } else {
+      rect = resizeRect({ rect, delta: [dx, dy], direction, aspectRatio, imageBox });
+    }
+
+    if (!Object.values(rect).every((number) => Number.isFinite(number) && number >= 0)) {
+      console.error('CropFrame is trying to create invalid rectangle', {
+        payload: rect,
+      });
+      return;
+    }
+    return constraintRect(roundRect(rect), this.$['*imageBox']);
+  }
+
+  /**
+   * @private
+   * @param {PointerEvent} e
+   */
+  _handleSvgPointerMove_(e) {
+    if (!this._frameThumbs) return;
+
+    let hoverThumb = Object.values(this._frameThumbs).find((thumb) => {
+      if (this._shouldThumbBeDisabled(thumb.direction)) {
+        return false;
+      }
+      let node = thumb.interactionNode;
+      let bounds = node.getBoundingClientRect();
+      let rect = {
+        x: bounds.x,
+        y: bounds.y,
+        width: bounds.width,
+        height: bounds.height,
+      };
+      let hover = rectContainsPoint(rect, [e.x, e.y]);
+      return hover;
+    });
+
+    this._hoverThumb = hoverThumb;
+    this._updateCursor();
+  }
+
+  /** @private */
+  _updateCursor() {
+    let hoverThumb = this._hoverThumb;
+    this.ref['svg-el'].style.cursor = hoverThumb ? thumbCursor(hoverThumb.direction) : 'initial';
+  }
+
+  /** @private */
+  _render() {
+    this._updateBackdrop();
+    this._updateFrame();
+  }
+
+  /** @param {boolean} visible */
+  toggleThumbs(visible) {
+    if (!this._frameThumbs) return;
+    Object.values(this._frameThumbs)
+      .map(({ groupNode }) => groupNode)
+      .forEach((groupNode) => {
+        groupNode.setAttribute(
+          'class',
+          classNames('uc-thumb', {
+            'uc-thumb--hidden': !visible,
+            'uc-thumb--visible': visible,
+          }),
+        );
+      });
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this._createBackdrop();
+    this._createFrame();
+
+    this.sub('*imageBox', () => {
+      this._resizeBackdrop();
+      window.requestAnimationFrame(() => {
+        this._render();
+      });
+    });
+
+    this.sub('*cropBox', (cropBox) => {
+      if (!cropBox) {
+        return;
+      }
+      this._guidesHidden = cropBox.height <= MIN_CROP_SIZE || cropBox.width <= MIN_CROP_SIZE;
+      window.requestAnimationFrame(() => {
+        this._render();
+      });
+    });
+
+    this.sub('dragging', (dragging) => {
+      if (!this._frameGuides) return;
+      this._frameGuides.setAttribute(
+        'class',
+        classNames({
+          'uc-guides--hidden': this._guidesHidden,
+          'uc-guides--visible': !this._guidesHidden && dragging,
+          'uc-guides--semi-hidden': !this._guidesHidden && !dragging,
+        }),
+      );
+    });
+
+    this.ref['svg-el'].addEventListener('pointermove', this._handleSvgPointerMove, true);
+    document.addEventListener('pointermove', this._handlePointerMove, true);
+    document.addEventListener('pointerup', this._handlePointerUp, true);
+  }
+
+  destroyCallback() {
+    super.destroyCallback();
+
+    document.removeEventListener('pointermove', this._handlePointerMove);
+    document.removeEventListener('pointerup', this._handlePointerUp);
+  }
+}
+
+CropFrame.template = /* HTML */ ` <svg class="uc-svg" ref="svg-el" xmlns="http://www.w3.org/2000/svg"></svg> `;

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

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

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