@archbase/components 3.0.0

package/src/image/editor/functions/croppr/croppr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"croppr.d.ts","sourceRoot":"","sources":["croppr.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,UAAU,MAAM,QAAQ,CAAC;AAEhC;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAC5C;;;OAGG;gBACS,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,UAAQ;IAIzD;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAG;;;;;;IAInB;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,GAAG;IAIjB;;OAEG;IACH,OAAO;IAIP;;;;OAIG;IACH,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG;IAWrB;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,WAAa;IAiBrD;;;;;OAKG;IACH,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,WAAa;IAWxC;;OAEG;IACH,KAAK,CAAC,UAAU,CAAC,EAAE,GAAG;IAetB,gBAAgB,CAAC,KAAK,EAAE,OAAO;CAUhC"}

package/src/image/editor/functions/croppr/croppr.ts

@@ -0,0 +1,136 @@
+/**
+ * Croppr.js
+ * https://github.com/jamesssooi/Croppr.js
+ *
+ * A JavaScript image cropper that's lightweight, awesome, and has
+ * zero dependencies.
+ *
+ * (C) 2017 James Ooi. Released under the MIT License.
+ */
+
+import CropprCore from "./core";
+
+/**
+ * This class is a wrapper for CropprCore that merely implements the main
+ * interfaces for the Croppr instance. Look into CropprCore for all the
+ * main logic.
+ */
+export default class Croppr extends CropprCore {
+  /**
+   * @constructor
+   * Calls the CropprCore's constructor.
+   */
+  constructor(element: any, options: any, _deferred = false) {
+    super(element, options, _deferred);
+  }
+
+  /**
+   * Gets the value of the crop region.
+   * @param {String} [mode] Which mode of calculation to use: 'real', 'ratio' or
+   *      'raw'.
+   */
+  getValue(mode?: any) {
+    return super.getValue(mode);
+  }
+
+  /**
+   * Changes the image src.
+   * @param {String} src
+   */
+  setImage(src: any) {
+    return super.setImage(src);
+  }
+
+  /**
+   * Destroys the Croppr instance
+   */
+  destroy() {
+    return super.destroy();
+  }
+
+  /**
+   * Moves the crop region to a specified coordinate.
+   * @param {Number} x
+   * @param {Number} y
+   */
+  moveTo(x: any, y: any) {
+    this.box.move(x, y);
+    this.redraw();
+
+    // Call the callback
+    if (this.options.onCropEnd !== null) {
+      this.options.onCropEnd(this.getValue());
+    }
+    return this;
+  }
+
+  /**
+   * Resizes the crop region to a specified width and height.
+   * @param {Number} width
+   * @param {Number} height
+   * @param {Array} origin The origin point to resize from.
+   *      Defaults to [0.5, 0.5] (center).
+   */
+  resizeTo(width: any, height: any, origin = [0.5, 0.5]) {
+    this.box.resize(width, height, origin);
+
+    //////////////////////////////////////////////////////////////////
+    const parentWidth = this.cropperEl.offsetWidth;
+    const parentHeight = this.cropperEl.offsetHeight;
+    this.box.constrainToBoundary(parentWidth, parentHeight, [0.5, 0.5]);
+    ///////////////////////////////////////////////////////////////////
+    this.redraw();
+
+    // Call the callback
+    if (this.options.onCropEnd !== null) {
+      this.options.onCropEnd(this.getValue());
+    }
+    return this;
+  }
+
+  /**
+   * Scale the crop region by a factor.
+   * @param {Number} factor
+   * @param {Array} origin The origin point to resize from.
+   *      Defaults to [0.5, 0.5] (center).
+   */
+  scaleBy(factor: any, origin = [0.5, 0.5]) {
+    this.box.scale(factor, origin);
+    this.redraw();
+
+    // Call the callback
+    if (this.options.onCropEnd !== null) {
+      this.options.onCropEnd(this.getValue());
+    }
+    return this;
+  }
+
+  /**
+   * Resets the crop region to the initial settings.
+   */
+  reset(newOptions?: any) {
+    if (newOptions) {
+      this.options = { ...this.options, newOptions };
+    }
+    this.box = this.initializeBox(this.options);
+    // console.log('🚀 ~ file: croppr.ts ~ line 110 ~ Croppr ~ reset ~ this.box', this.box);
+    this.redraw();
+
+    // Call the callback
+    if (this.options.onCropEnd !== null) {
+      this.options.onCropEnd(this.getValue());
+    }
+    return this;
+  }
+
+  enableVisibility(state: boolean) {
+    let croppContainer: HTMLElement | any =
+      document.querySelector(".croppr-container");
+    if (!croppContainer) throw new Error("THere is not any croppr");
+    if (state) {
+      croppContainer.style.display = "block";
+    } else {
+      croppContainer.style.display = "none";
+    }
+  }
+}

package/src/image/editor/functions/croppr/handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["handle.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,MAAM;IACzB;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,GAAG,CAAC;IACd,WAAW,EAAE,GAAG,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,EAAE,EAAE,GAAG,CAAC;gBAEI,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG;CAoDxE"}

package/src/image/editor/functions/croppr/handle.ts

@@ -0,0 +1,75 @@
+/**
+ * Handle component
+ */
+export default class Handle {
+  /**
+   * Creates a new Handle instance.
+   * @constructor
+   * @param {Array} position The x and y ratio position of the handle
+   *      within the crop region. Accepts a value between 0 to 1 in the order
+   *      of [X, Y].
+   * @param {Array} constraints Define the side of the crop region that
+   *      is to be affected by this handle. Accepts a value of 0 or 1 in the
+   *      order of [TOP, RIGHT, BOTTOM, LEFT].
+   * @param {String} cursor The CSS cursor of this handle.
+   * @param {Element} eventBus The element to dispatch events to.
+   */
+  position: any;
+  constraints: any;
+  cursor: any;
+  eventBus: any;
+  el: any;
+
+  constructor(position: any, constraints: any, cursor: any, eventBus: any) {
+    var self = this;
+    this.position = position;
+    this.constraints = constraints;
+    this.cursor = cursor;
+    this.eventBus = eventBus;
+
+    // Create DOM element
+    this.el = document.createElement("div");
+    this.el.className = "croppr-handle";
+    this.el.style.cursor = cursor;
+
+    // Attach initial listener
+    this.el.addEventListener("mousedown", onMouseDown);
+
+    function onMouseDown(e: any) {
+      e.stopPropagation();
+      document.addEventListener("mouseup", onMouseUp);
+      document.addEventListener("mousemove", onMouseMove);
+
+      // Notify parent
+      self.eventBus.dispatchEvent(
+        new CustomEvent("handlestart", {
+          detail: { handle: self },
+        })
+      );
+    }
+
+    function onMouseUp(e: any) {
+      e.stopPropagation();
+      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener("mousemove", onMouseMove);
+
+      // Notify parent
+      self.eventBus.dispatchEvent(
+        new CustomEvent("handleend", {
+          detail: { handle: self },
+        })
+      );
+    }
+
+    function onMouseMove(e: any) {
+      e.stopPropagation();
+
+      // Notify parent
+      self.eventBus.dispatchEvent(
+        new CustomEvent("handlemove", {
+          detail: { mouseX: e.clientX, mouseY: e.clientY },
+        })
+      );
+    }
+  }
+}

package/src/image/editor/functions/croppr/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,eAAe,MAAM,CAAC"}

package/src/image/editor/functions/croppr/index.ts

@@ -0,0 +1,4 @@
+//import './polyfills';
+import Croppr from './croppr';
+
+export default Croppr;

package/src/image/editor/functions/croppr/touch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch.d.ts","sourceRoot":"","sources":["touch.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAAO,EAAE,GAAG,QAI/C"}

package/src/image/editor/functions/croppr/touch.ts

@@ -0,0 +1,41 @@
+/**
+ * Croppr Touch
+ * Enables support for touch devices by translating touch events to
+ * mouse events.
+ */
+
+/**
+ * Binds an element's touch events to be simulated as mouse events.
+ * @param {Element} element
+ */
+export default function enableTouch(element: any) {
+  element.addEventListener('touchstart', simulateMouseEvent);
+  element.addEventListener('touchend', simulateMouseEvent);
+  element.addEventListener('touchmove', simulateMouseEvent);
+}
+
+/**
+ * Translates a touch event to a mouse event.
+ * @param {Event} e
+ */
+function simulateMouseEvent(e: any) {
+  e.preventDefault();
+  const touch = e.changedTouches[0];
+  const eventMap: any = {
+    touchstart: 'mousedown',
+    touchmove: 'mousemove',
+    touchend: 'mouseup',
+  };
+
+  touch.target.dispatchEvent(
+    new MouseEvent(eventMap[e.type], {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      screenX: touch.screenX,
+      screenY: touch.screenY,
+    }),
+  );
+}

package/src/image/editor/functions/image-processing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-processing.d.ts","sourceRoot":"","sources":["image-processing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAGzC,eAAO,MAAM,uBAAuB,YACzB,MAAM,gCAER,MAAM,YACH;IAAE,eAAe,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,KACvD,OAAO,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CA6D1C,CAAC;AAEF,eAAO,MAAM,WAAW,YAAa,GAAG,SAuGvC,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,MAAM,cAAc,MAAM,KAAG,MAuB7D,CAAC"}

package/src/image/editor/functions/image-processing.ts

@@ -0,0 +1,202 @@
+import { IState } from '../models/index.models';
+
+export const MAX_BUFFER_UNDO_MEMORY = 25;
+let rotate = 1;
+
+export const convertImageUsingCanvas = (
+  dataSrc: string,
+  changeHeight = false,
+  state: IState,
+  options?: { getDimFromImage?: boolean; rotate?: number },
+): Promise<{ imageUri: string; state: any }> => {
+  return new Promise(async (resolve, _) => {
+    let img = document.createElement('img');
+    img.src = dataSrc + '';
+    img.crossOrigin = 'Anonymous';
+    let quality = state.quality / 100;
+    let maintainRatio = state.maintainAspectRatio;
+
+    img.onload = () => {
+      var canvas = document.createElement('canvas');
+      let ctx: CanvasRenderingContext2D | null | any = canvas.getContext('2d');
+      let ratio = img.width / img.height;
+      let width = state.maxWidth;
+      let height = state.maxHeight;
+
+      if (options?.getDimFromImage) {
+        width = img.width;
+        height = img.height;
+      }
+
+      if (maintainRatio) {
+        canvas.width = width;
+        canvas.height = width / ratio;
+        if (changeHeight) {
+          canvas.width = height * ratio;
+          canvas.height = height;
+        }
+      } else {
+        canvas.width = width;
+        canvas.height = height;
+      }
+      if (state.basicFilters) {
+        ctx.filter = processFilter(state.basicFilters);
+      }
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      let type = state.format;
+      var dataURI = canvas.toDataURL(`image/${type}`, quality);
+      // console.log("🚀 ~ file: image-processing.ts ~ line 48 ~ returnnewPromise ~ quality", quality)
+      resolve({
+        dataUri: dataURI,
+        width: canvas.width,
+        height: canvas.height,
+      });
+    };
+  }).then((data: any) => {
+    state.maxHeight = data.height;
+    state.maxWidth = data.width;
+    return { imageUri: data.dataUri, state: saveState(state, data.dataUri) };
+  });
+
+  function processFilter(data: any) {
+    return Object.keys(data)
+      .map((key) => {
+        if (['blur'].includes(key)) {
+          return `${key}(${data[key]}px)`;
+        } else {
+          return `${key}(${data[key]})`;
+        }
+      })
+      .join('');
+  }
+};
+
+export const dragElement = (element: any) => {
+  var pos1 = 0,
+    pos2 = 0,
+    pos3 = 0,
+    pos4 = 0;
+  if (document.getElementById(element.id + '-header')) {
+    /* if present, the header is where you move the DIV from:*/
+    let x: any = document.getElementById(element.id + '-header');
+    x.onmousedown = dragPressOn;
+    let y: any = document.getElementById(element.id + '-header');
+    y.ontouchstart = dragPressOn;
+  } else {
+    /* otherwise, move the DIV from anywhere inside the DIV:*/
+    element.ontouchstart = dragPressOn;
+    element.onmousedown = dragPressOn;
+  }
+
+  function dragPressOn(e: any) {
+    let popup: any = document.querySelector('#popup');
+    popup.style.overflowY = 'hidden';
+    e = e || window.event;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.ontouchend = closeDragElement;
+    document.onmouseup = closeDragElement;
+    document.ontouchmove = elementDragTouch;
+    document.onmousemove = elementDragMouse;
+  }
+
+  function elementDragMouse(e: any) {
+    let holderImage = document.getElementById('image-full');
+    e = e || window.event;
+    pos1 = pos3 - e.clientX;
+    pos3 = e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos4 = e.clientY;
+
+    let newTop = element.offsetTop - pos2;
+    let newLeft = element.offsetLeft - pos1;
+    let rectHolder = holderImage?.getBoundingClientRect();
+    let rectElemnt = element.getBoundingClientRect();
+    // console.log('====================================');
+    // console.log(rectElemnt,rectHolder);
+    // console.log('====================================');
+    newTop = Math.max(newTop, rectHolder?.top as number);
+    newTop = Math.min(
+      newTop,
+      (rectHolder?.bottom as number) - rectElemnt.height,
+    );
+    newLeft = Math.max(newLeft, rectHolder?.left as number);
+    newLeft = Math.min(
+      newLeft,
+      (rectHolder?.right as number) - rectElemnt.width,
+    );
+    element.style.top = newTop + 'px';
+    element.style.left = newLeft + 'px';
+  }
+
+  function elementDragTouch(e: any) {
+    let holderImage = document.getElementById('image-full');
+    e = e || window.event;
+
+    if (e?.changedTouches?.length) {
+      pos1 = pos3 - e.changedTouches[0]?.clientX;
+      pos3 = e.changedTouches[0]?.clientX;
+    }
+    if (e?.changedTouches?.length) {
+      pos2 = pos4 - e.changedTouches[0]?.clientY;
+      pos4 = e.changedTouches[0]?.clientY;
+    }
+
+    let newTop = element.offsetTop - pos2;
+    let newLeft = element.offsetLeft - pos1;
+    let rectHolder = holderImage?.getBoundingClientRect();
+    let rectElemnt = element.getBoundingClientRect();
+
+    // console.log('====================================');
+    // console.log(rectElemnt,rectHolder);
+    // console.log('====================================');
+
+    newTop = Math.max(newTop, rectHolder?.top as number);
+    newTop = Math.min(
+      newTop,
+      (rectHolder?.bottom as number) - rectElemnt.height,
+    );
+    newLeft = Math.max(newLeft, rectHolder?.left as number);
+    newLeft = Math.min(
+      newLeft,
+      (rectHolder?.right as number) - rectElemnt.width,
+    );
+    element.style.top = newTop + 'px';
+    element.style.left = newLeft + 'px';
+  }
+
+  function closeDragElement() {
+    /* stop moving when mouse button is released:*/
+    let popup: any = document.querySelector('#popup');
+    popup.style.overflowY = 'auto';
+    document.onmouseup = null;
+    document.onmousemove = null;
+    document.ontouchend = null;
+    document.ontouchmove = null;
+  }
+};
+
+export const saveState = (state: IState, lastImage?: string): IState => {
+  if (state.arrayCopiedImages.length <= MAX_BUFFER_UNDO_MEMORY) {
+    state.arrayCopiedImages.push({
+      lastImage: lastImage as any,
+      width: state.maxWidth,
+      height: state.maxHeight,
+      quality: state.quality,
+      format: state.format,
+      originImageSrc: state.originImageSrc as any,
+      basicFilters: state.basicFilters,
+    });
+  } else {
+    state.arrayCopiedImages[state.arrayCopiedImages.length - 1] = {
+      lastImage: lastImage as any,
+      width: state.maxWidth,
+      height: state.maxHeight,
+      quality: state.quality,
+      format: state.format,
+      originImageSrc: state.originImageSrc as any,
+      basicFilters: state.basicFilters,
+    };
+  }
+  return JSON.parse(JSON.stringify(state));
+};