@dnncommunity/dnn-elements 0.13.0-beta.1

package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js

@@ -0,0 +1,539 @@
+import { Component, Host, h, State, Prop, Event } from '@stencil/core';
+import { CornerType } from './CornerType';
+/**
+ * Allows cropping an image in-browser with the option to enforce a specific final size.
+ * All computation happens in the browser and the final image is emmited
+ * in an event that has a data-url of the image.
+ */
+export class DnnImageCropper {
+  constructor() {
+    /** Sets the desired final image width. */
+    this.width = 600;
+    /** Sets the desired final image height. */
+    this.height = 600;
+    /** Can be used to customize controls text.
+     * Some values support tokens, see default values for examples.
+    */
+    this.resx = {
+      capture: "Capture",
+      dragAndDropFile: "Drag and drop an image",
+      or: "or",
+      takePicture: "Take a picture",
+      uploadFile: "Upload an image",
+      imageTooSmall: "The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.",
+      modalCloseText: "Close",
+    };
+    /** Sets the output quality of the corpped image (number between 0 and 1). */
+    this.quality = 0.8;
+    /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */
+    this.preventUndersized = false;
+    this.handleCropMouseDown = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const element = event.target;
+      const className = element.classList[0];
+      document.addEventListener("mouseup", this.handleImageCropFinished, false);
+      document.addEventListener("touchend", this.handleImageCropFinished, false);
+      switch (className) {
+        case "crop":
+          document.addEventListener("mousemove", this.handleCropDrag, false);
+          document.addEventListener("touchmove", this.handleCropDrag, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleCropDrag));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleCropDrag));
+          break;
+        case "nw":
+          document.addEventListener("mousemove", this.handleNwMouseMove, false);
+          document.addEventListener("touchmove", this.handleNwMouseMove, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleNwMouseMove));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleNwMouseMove));
+          break;
+        case "ne":
+          document.addEventListener("mousemove", this.handleNeMouseMove, false);
+          document.addEventListener("touchmove", this.handleNeMouseMove, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleNeMouseMove));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleNeMouseMove));
+          break;
+        case "se":
+          document.addEventListener("mousemove", this.handleSeMouseMove, false);
+          document.addEventListener("touchmove", this.handleSeMouseMove, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleSeMouseMove));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleSeMouseMove));
+          break;
+        case "sw":
+          document.addEventListener("mousemove", this.handleSwMouseMove, false);
+          document.addEventListener("touchmove", this.handleSwMouseMove, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleSwMouseMove));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleSwMouseMove));
+          break;
+        default:
+          break;
+      }
+    };
+    this.handleImageCropFinished = (_ev) => {
+      this.emitImage();
+      document.removeEventListener("mouseup", this.handleImageCropFinished);
+      this.previousTouch = undefined;
+    };
+    this.handleNwMouseMove = (event) => {
+      this.handleCornerDrag(event, CornerType.nw);
+    };
+    this.handleNeMouseMove = (event) => {
+      this.handleCornerDrag(event, CornerType.ne);
+    };
+    this.handleSeMouseMove = (event) => {
+      this.handleCornerDrag(event, CornerType.se);
+    };
+    this.handleSwMouseMove = (event) => {
+      this.handleCornerDrag(event, CornerType.sw);
+    };
+    this.handleCornerDrag = (event, corner) => {
+      if (!this.isMouseStillInTarget(event)) {
+        return;
+      }
+      let { left, top } = this.getCornerLeftTop(corner);
+      let newWidth = 0;
+      let newHeight = 0;
+      let orientation = "horizontal";
+      const wantedRatio = this.width / this.height;
+      const cropRect = this.crop.getBoundingClientRect();
+      const imageRect = this.image.getBoundingClientRect();
+      let { movementX, movementY } = this.getMouvementFromEvent(event);
+      if (Math.abs(movementX) < Math.abs(movementY)) {
+        orientation = "vertical";
+      }
+      if (orientation == "horizontal") {
+        switch (corner) {
+          case CornerType.nw:
+          case CornerType.sw:
+            newWidth = cropRect.width - movementX;
+            newHeight = newWidth / wantedRatio;
+            break;
+          case CornerType.ne:
+          case CornerType.se:
+            newWidth = cropRect.width + movementX;
+            newHeight = newWidth / wantedRatio;
+            break;
+          default:
+            break;
+        }
+      }
+      else {
+        switch (corner) {
+          case CornerType.nw:
+          case CornerType.ne:
+            newHeight = cropRect.height - movementY;
+            newWidth = newHeight * wantedRatio;
+            break;
+          case CornerType.se:
+          case CornerType.sw:
+            newHeight = cropRect.height + movementY;
+            newWidth = newHeight * wantedRatio;
+            break;
+          default:
+            break;
+        }
+      }
+      switch (corner) {
+        case CornerType.ne:
+        case CornerType.nw:
+          const topOffset = cropRect.height - newHeight;
+          top = this.crop.offsetTop + topOffset;
+        default:
+          break;
+      }
+      switch (corner) {
+        case CornerType.nw:
+        case CornerType.sw:
+          const leftOffset = cropRect.width - newWidth;
+          left = this.crop.offsetLeft + leftOffset;
+          if (left < 0)
+            left = 0;
+          if (left > imageRect.width)
+            left = imageRect.width;
+          if (top < 0)
+            top = 0;
+          if (top > imageRect.height)
+            top = imageRect.height;
+          if (left + newWidth > imageRect.width)
+            newWidth = imageRect.width - left;
+          if (top + newHeight > imageRect.height)
+            newHeight = imageRect.height - top;
+          break;
+        case CornerType.ne:
+        case CornerType.se:
+          if (top < 0)
+            top = 0;
+          if (top > imageRect.height)
+            top = imageRect.height;
+          if (left + newWidth > imageRect.width)
+            newWidth = imageRect.width - left;
+          if (top + newHeight > imageRect.height)
+            newHeight = imageRect.height - top;
+          break;
+        default:
+          break;
+      }
+      if (newWidth / newHeight != wantedRatio) {
+        return;
+      }
+      if (this.preventUndersized) {
+        const zoomRatio = this.image.width / this.image.naturalWidth;
+        if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height) {
+          return;
+        }
+      }
+      switch (corner) {
+        case CornerType.ne:
+          this.crop.style.top = `${top}px`;
+          this.crop.style.width = `${newWidth}px`;
+          this.crop.style.height = `${newHeight}px`;
+          break;
+        case CornerType.nw:
+          this.crop.style.left = `${left}px`;
+          this.crop.style.top = `${top}px`;
+          this.crop.style.width = `${newWidth}px`;
+          this.crop.style.height = `${newHeight}px`;
+          break;
+        case CornerType.se:
+          this.crop.style.width = `${newWidth}px`;
+          this.crop.style.height = `${newHeight}px`;
+          break;
+        case CornerType.sw:
+          this.crop.style.left = `${left}px`;
+          this.crop.style.width = `${newWidth}px`;
+          this.crop.style.height = `${newHeight}px`;
+          break;
+        default:
+          break;
+      }
+    };
+    this.handleCropDrag = (ev) => {
+      if (!this.isMouseStillInTarget(ev)) {
+        return;
+      }
+      let { movementX, movementY } = this.getMouvementFromEvent(ev);
+      let newLeft = this.crop.offsetLeft + movementX;
+      let newTop = this.crop.offsetTop + movementY;
+      var imageRect = this.image.getBoundingClientRect();
+      var cropRect = this.crop.getBoundingClientRect();
+      if (newLeft < 0) {
+        newLeft = 0;
+      }
+      if (newTop < 0) {
+        newTop = 0;
+      }
+      if (newLeft + cropRect.width > imageRect.width) {
+        newLeft = this.crop.offsetLeft;
+      }
+      if (newTop + cropRect.height > imageRect.height) {
+        newTop = this.crop.offsetTop;
+      }
+      this.crop.style.left = newLeft + "px";
+      this.crop.style.top = newTop + "px";
+    };
+  }
+  componentDidLoad() {
+    this.setView("noPictureView");
+  }
+  setView(newView) {
+    const views = this.host.shadowRoot.querySelectorAll(".view");
+    views.forEach(v => v.classList.remove("visible"));
+    switch (newView) {
+      case "noPictureView":
+        this.noPictureView.classList.add("visible");
+        break;
+      case "hasPictureView":
+        this.hasPictureView.classList.add("visible");
+        break;
+      default:
+        break;
+    }
+    this.view = newView;
+  }
+  initCrop() {
+    var wantedRatio = this.width / this.height;
+    var imageRect = this.image.getBoundingClientRect();
+    var imageRatio = imageRect.width / imageRect.height;
+    if (wantedRatio > imageRatio) {
+      var wantedHeight = imageRect.width / wantedRatio;
+      var diff = imageRect.height - wantedHeight;
+      this.crop.style.top = Math.round(diff / 2).toString() + "px";
+      this.crop.style.height = Math.round(wantedHeight).toString() + "px";
+    }
+    else {
+      var wantedWidth = imageRect.height * wantedRatio;
+      var diff = imageRect.width - wantedWidth;
+      this.crop.style.left = Math.round(diff / 2).toString() + "px";
+      this.crop.style.width = Math.round(wantedWidth).toString() + "px";
+    }
+  }
+  setImage() {
+    this.image.addEventListener('load', () => {
+      this.initCrop();
+      this.emitImage();
+    });
+    this.image.src = this.canvas.toDataURL();
+  }
+  handleNewFile(file) {
+    if (file.type.split('/')[0] != "image") {
+      return;
+    }
+    var reader = new FileReader();
+    reader.onload = readerLoadEvent => {
+      var img = new Image();
+      img.onload = () => {
+        this.canvas.width = img.width;
+        this.canvas.height = img.height;
+        if (this.preventUndersized && (img.width < this.width || img.height < this.height)) {
+          this.imageTooSmallModal.show();
+          return;
+        }
+        var ctx = this.canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0);
+        this.setView("hasPictureView");
+        this.setImage();
+      };
+      img.src = readerLoadEvent.target.result.toString();
+    };
+    reader.readAsDataURL(file);
+  }
+  emitImage() {
+    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;
+    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;
+    var cropRect = this.crop.getBoundingClientRect();
+    var width = cropRect.width / this.image.width * this.image.naturalWidth;
+    var height = cropRect.height / this.image.height * this.image.naturalHeight;
+    if (x < 0)
+      x = 0;
+    if (x > this.image.naturalWidth)
+      x = this.image.naturalWidth;
+    if (y < 0)
+      y = 0;
+    if (y > this.image.naturalWidth)
+      y = this.image.naturalWidth;
+    if (width > this.image.naturalWidth)
+      width = this.image.naturalWidth;
+    if (height > this.image.naturalHeight)
+      height = this.image.naturalHeight;
+    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);
+    this.imageCropChanged.emit(dataUrl);
+  }
+  generateCroppedImage(x, y, width, height, desiredWidth, desiredHeight) {
+    this.canvas.width = desiredWidth;
+    this.canvas.height = desiredHeight;
+    const context = this.canvas.getContext("2d");
+    context.clearRect(0, 0, desiredWidth, desiredHeight);
+    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);
+    return this.canvas.toDataURL("image/jpeg", this.quality);
+  }
+  getCornerLeftTop(corner) {
+    let left = 0;
+    let top = 0;
+    switch (corner) {
+      case CornerType.se:
+        left = this.crop.offsetLeft;
+        top = this.crop.offsetTop;
+        break;
+      case CornerType.sw:
+        top = this.crop.offsetTop;
+        break;
+      default:
+        break;
+    }
+    return { top, left };
+  }
+  getMouvementFromEvent(event) {
+    let movementX = 0;
+    let movementY = 0;
+    if (event instanceof MouseEvent) {
+      movementX = event.movementX;
+      movementY = event.movementY;
+    }
+    if (typeof TouchEvent !== "undefined") {
+      if (event instanceof TouchEvent) {
+        let touch = event.touches[0];
+        if (this.previousTouch != undefined) {
+          movementX = touch.pageX - this.previousTouch.pageX;
+          movementY = touch.pageY - this.previousTouch.pageY;
+        }
+        this.previousTouch = touch;
+      }
+    }
+    return { movementX, movementY };
+  }
+  isMouseStillInTarget(event) {
+    var inside = false;
+    let mouseX;
+    let mouseY;
+    const imageRect = this.image.getBoundingClientRect();
+    if (event instanceof MouseEvent) {
+      mouseX = event.clientX;
+      mouseY = event.clientY;
+    }
+    if (typeof TouchEvent !== "undefined") {
+      if (event instanceof TouchEvent) {
+        var touch = event.touches[0];
+        mouseX = touch.clientX;
+        mouseY = touch.clientY;
+      }
+    }
+    if (mouseX >= imageRect.x &&
+      mouseY >= imageRect.y &&
+      mouseX <= imageRect.left + imageRect.width &&
+      mouseY <= imageRect.top + imageRect.height) {
+      inside = true;
+    }
+    var corners = this.crop.querySelectorAll("div");
+    corners.forEach(corner => {
+      var cornerRect = corner.getBoundingClientRect();
+      if (mouseX >= cornerRect.x &&
+        mouseY >= cornerRect.y &&
+        mouseX <= cornerRect.left + cornerRect.width &&
+        mouseY <= cornerRect.top + cornerRect.height) {
+        inside = true;
+      }
+    });
+    return inside;
+  }
+  render() {
+    return (h(Host, { ref: el => this.host = el },
+      h("canvas", { ref: el => this.canvas = el }),
+      h("div", { class: "view", ref: el => this.hasPictureView = el },
+        h("div", { class: "cropper" },
+          h("img", { ref: el => this.image = el }),
+          h("div", { class: "backdrop" }),
+          h("div", { class: "crop", ref: e => this.crop = e, onMouseDown: this.handleCropMouseDown, onTouchStart: this.handleCropMouseDown },
+            h("div", { class: "nw" }),
+            h("div", { class: "ne" }),
+            h("div", { class: "se" }),
+            h("div", { class: "sw" })))),
+      h("div", { class: "view", ref: el => this.noPictureView = el },
+        h("dnn-dropzone", { allowCameraMode: true, onFilesSelected: e => this.handleNewFile(e.detail[0]), resx: {
+            capture: this.resx.capture,
+            dragAndDropFile: this.resx.dragAndDropFile,
+            or: this.resx.or,
+            takePicture: this.resx.takePicture,
+            uploadFile: this.resx.uploadFile,
+          } })),
+      h("dnn-modal", { ref: el => this.imageTooSmallModal = el, "close-text": this.resx.modalCloseText },
+        h("p", null, this.resx.imageTooSmall.replace("{width}", this.width.toString()).replace("{height}", this.height.toString())))));
+  }
+  static get is() { return "dnn-image-cropper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dnn-image-cropper.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dnn-image-cropper.css"]
+  }; }
+  static get properties() { return {
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the desired final image width."
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "600"
+    },
+    "height": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the desired final image height."
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "600"
+    },
+    "resx": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{\r\n    capture: string;\r\n    dragAndDropFile: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n    imageTooSmall: string;\r\n    modalCloseText: string;\r\n  }",
+        "resolved": "{ capture: string; dragAndDropFile: string; or: string; takePicture: string; uploadFile: string; imageTooSmall: string; modalCloseText: string; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Can be used to customize controls text.\r\nSome values support tokens, see default values for examples."
+      },
+      "defaultValue": "{\r\n    capture: \"Capture\",\r\n    dragAndDropFile: \"Drag and drop an image\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload an image\",\r\n    imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\r\n    modalCloseText: \"Close\",\r\n  }"
+    },
+    "quality": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets the output quality of the corpped image (number between 0 and 1)."
+      },
+      "attribute": "quality",
+      "reflect": false,
+      "defaultValue": "0.8"
+    },
+    "preventUndersized": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry."
+      },
+      "attribute": "prevent-undersized",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "view": {}
+  }; }
+  static get events() { return [{
+      "method": "imageCropChanged",
+      "name": "imageCropChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "When the image crop changes, emits the dataurl for the new cropped image."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}
+//# sourceMappingURL=dnn-image-cropper.js.map

package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-image-cropper.js","sourceRoot":"","sources":["../../../src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n  tag: 'dnn-image-cropper',\r\n  styleUrl: 'dnn-image-cropper.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n  /** Sets the desired final image width. */\r\n  @Prop() width: number = 600;\r\n\r\n  /** Sets the desired final image height. */\r\n  @Prop() height: number = 600;\r\n\r\n  /** Can be used to customize controls text.\r\n   * Some values support tokens, see default values for examples.\r\n  */\r\n  @Prop() resx: {\r\n    capture: string;\r\n    dragAndDropFile: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n    imageTooSmall: string;\r\n    modalCloseText: string;\r\n  } = {\r\n    capture: \"Capture\",\r\n    dragAndDropFile: \"Drag and drop an image\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload an image\",\r\n    imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\r\n    modalCloseText: \"Close\",\r\n  }\r\n\r\n  /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n  @Prop() quality: number = 0.8;\r\n\r\n  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n  @Prop() preventUndersized: boolean = false;\r\n\r\n  /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n  @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n  @State() view: IComponentInterfaces[\"View\"];\r\n  \r\n  private host: HTMLElement;\r\n  private hasPictureView: HTMLDivElement;\r\n  private noPictureView: HTMLDivElement;\r\n  private canvas: HTMLCanvasElement;\r\n  private image: HTMLImageElement;\r\n  private crop: HTMLDivElement;\r\n  private previousTouch: Touch;\r\n  private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n  componentDidLoad() {\r\n    this.setView(\"noPictureView\");\r\n  }\r\n\r\n  private setView(newView: IComponentInterfaces[\"View\"]){\r\n    const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n    views.forEach(v =>\r\n      v.classList.remove(\"visible\"));\r\n    switch (newView) {\r\n      case \"noPictureView\":\r\n        this.noPictureView.classList.add(\"visible\");\r\n        break;\r\n      case \"hasPictureView\":\r\n        this.hasPictureView.classList.add(\"visible\");\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    this.view = newView;\r\n  }\r\n\r\n  private initCrop(){\r\n    var wantedRatio = this.width / this.height;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var imageRatio = imageRect.width / imageRect.height;\r\n    \r\n    if (wantedRatio > imageRatio){\r\n        var wantedHeight = imageRect.width / wantedRatio;\r\n        var diff = imageRect.height - wantedHeight;\r\n        this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n    }\r\n    else{\r\n      var wantedWidth = imageRect.height * wantedRatio;\r\n      var diff = imageRect.width - wantedWidth;\r\n        this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n    }\r\n  }\r\n\r\n  private setImage(){\r\n    this.image.addEventListener('load', () => {\r\n      this.initCrop();\r\n      this.emitImage();\r\n    })\r\n    this.image.src = this.canvas.toDataURL();\r\n  }\r\n\r\n  private handleNewFile(file: File): void {\r\n    if (file.type.split('/')[0] != \"image\"){\r\n      return;\r\n    }\r\n    \r\n    var reader = new FileReader();\r\n    reader.onload = readerLoadEvent => {\r\n      var img = new Image();\r\n      img.onload = () => {\r\n        this.canvas.width = img.width;\r\n        this.canvas.height = img.height;\r\n        if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n          this.imageTooSmallModal.show();\r\n          return;\r\n        }\r\n        var ctx = this.canvas.getContext(\"2d\");\r\n        ctx.drawImage(img,0,0);\r\n        this.setView(\"hasPictureView\");\r\n        this.setImage();\r\n      }\r\n      img.src = readerLoadEvent.target.result.toString();\r\n    }\r\n    reader.readAsDataURL(file);\r\n  }\r\n\r\n  private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    const element = event.target as HTMLElement;\r\n    const className = element.classList[0];\r\n\r\n    document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n    document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n    switch (className) {\r\n      case \"crop\":\r\n        document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n        document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n        break;\r\n      case \"nw\":\r\n        document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n        break;\r\n      case \"ne\":\r\n        document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n        break\r\n      case \"se\":\r\n        document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n        break;\r\n      case \"sw\":\r\n        document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  private handleImageCropFinished = (_ev: MouseEvent) => {\r\n    this.emitImage();\r\n    document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n    this.previousTouch = undefined;\r\n  }\r\n\r\n  private emitImage() {\r\n    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n    var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n    if (x < 0)\r\n      x = 0;\r\n    if (x > this.image.naturalWidth)\r\n      x = this.image.naturalWidth;\r\n    if (y < 0)\r\n      y = 0;\r\n    if (y > this.image.naturalWidth)\r\n      y = this.image.naturalWidth;\r\n    if (width > this.image.naturalWidth)\r\n      width = this.image.naturalWidth;\r\n    if (height > this.image.naturalHeight)\r\n      height = this.image.naturalHeight;\r\n\r\n    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n    this.imageCropChanged.emit(dataUrl);\r\n  }\r\n\r\n  private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n    this.canvas.width = desiredWidth;\r\n    this.canvas.height = desiredHeight;\r\n    const context = this.canvas.getContext(\"2d\");\r\n    context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n    return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n  }\r\n\r\n  private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.nw);\r\n  }\r\n\r\n  private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.ne);\r\n  }\r\n\r\n  private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.se);\r\n  }\r\n\r\n  private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.sw);\r\n  }\r\n\r\n  private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n    if (!this.isMouseStillInTarget(event)){\r\n      return;\r\n    }\r\n    \r\n    let {left, top} = this.getCornerLeftTop(corner);\r\n    let newWidth = 0;\r\n    let newHeight = 0;\r\n    let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n    const wantedRatio = this.width / this.height;\r\n    const cropRect = this.crop.getBoundingClientRect();\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    let { movementX, movementY } = this.getMouvementFromEvent(event);\r\n    if (Math.abs(movementX) < Math.abs(movementY)){\r\n      orientation = \"vertical\";\r\n    }\r\n\r\n    if (orientation == \"horizontal\"){\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.sw:\r\n          newWidth = cropRect.width - movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        case CornerType.ne:\r\n        case CornerType.se:\r\n          newWidth = cropRect.width + movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    } else{\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.ne:\r\n          newHeight = cropRect.height - movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        case CornerType.se:\r\n        case CornerType.sw:\r\n          newHeight = cropRect.height + movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n      case CornerType.nw:\r\n        const topOffset = cropRect.height - newHeight;\r\n        top = this.crop.offsetTop + topOffset;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.nw:\r\n      case CornerType.sw:\r\n        const leftOffset = cropRect.width - newWidth;\r\n        left = this.crop.offsetLeft + leftOffset;\r\n        if (left < 0) left = 0;\r\n        if (left > imageRect.width) left = imageRect.width;\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      case CornerType.ne:\r\n      case CornerType.se:\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (newWidth / newHeight != wantedRatio){\r\n      return;\r\n    }\r\n\r\n    if (this.preventUndersized){\r\n      const zoomRatio = this.image.width / this.image.naturalWidth;\r\n      if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n        return;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.nw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.se:\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.sw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n    let left = 0;\r\n    let top = 0;\r\n    switch (corner) {\r\n      case CornerType.se:\r\n        left = this.crop.offsetLeft;\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      case CornerType.sw:\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    return {top, left};\r\n  }\r\n\r\n  private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n    if (!this.isMouseStillInTarget(ev)){\r\n      return;\r\n    }\r\n    let {movementX, movementY} = this.getMouvementFromEvent(ev);\r\n    let newLeft = this.crop.offsetLeft + movementX;\r\n    let newTop = this.crop.offsetTop + movementY;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newTop < 0){\r\n      newTop = 0;\r\n    }\r\n    if (newLeft + cropRect.width > imageRect.width){\r\n      newLeft = this.crop.offsetLeft;\r\n    }\r\n    if (newTop + cropRect.height > imageRect.height){\r\n      newTop = this.crop.offsetTop;\r\n    }\r\n    this.crop.style.left = newLeft + \"px\";\r\n    this.crop.style.top = newTop + \"px\";\r\n  };\r\n  \r\n  private getMouvementFromEvent(event: MouseEvent | TouchEvent) {\r\n    let movementX = 0;\r\n    let movementY = 0;\r\n    if (event instanceof MouseEvent) {\r\n      movementX = event.movementX;\r\n      movementY = event.movementY;\r\n    }\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent) {\r\n        let touch = event.touches[0];\r\n        if (this.previousTouch != undefined) {\r\n          movementX = touch.pageX - this.previousTouch.pageX;\r\n          movementY = touch.pageY - this.previousTouch.pageY;\r\n        }\r\n        this.previousTouch = touch;\r\n      }\r\n    }\r\n    return { movementX, movementY };\r\n  }\r\n\r\n  private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n    var inside = false;\r\n    let mouseX: number;\r\n    let mouseY: number;\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    \r\n    if (event instanceof MouseEvent){\r\n      mouseX = event.clientX;\r\n      mouseY = event.clientY;\r\n    }\r\n\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent){\r\n        var touch = event.touches[0];\r\n        mouseX = touch.clientX;\r\n        mouseY = touch.clientY;\r\n      }\r\n    }\r\n    \r\n    if (\r\n      mouseX >= imageRect.x &&\r\n      mouseY >= imageRect.y &&\r\n      mouseX <= imageRect.left + imageRect.width &&\r\n      mouseY <= imageRect.top + imageRect.height)\r\n    {\r\n      inside = true;\r\n    }\r\n\r\n    var corners = this.crop.querySelectorAll(\"div\");\r\n    corners.forEach(corner =>{\r\n      var cornerRect = corner.getBoundingClientRect();\r\n      if (\r\n        mouseX >= cornerRect.x &&\r\n        mouseY >= cornerRect.y &&\r\n        mouseX <= cornerRect.left + cornerRect.width &&\r\n        mouseY <= cornerRect.top + cornerRect.height)\r\n        {\r\n          inside = true;\r\n        }\r\n    })\r\n\r\n    return inside;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host ref={el => this.host = el}>\r\n        <canvas ref={el => this.canvas = el} />\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.hasPictureView = el}\r\n        >\r\n          <div class=\"cropper\">\r\n            <img ref={el => this.image = el} />\r\n            <div class=\"backdrop\" />\r\n            <div\r\n              class=\"crop\"\r\n              ref={e => this.crop = e}\r\n              onMouseDown={this.handleCropMouseDown}\r\n              onTouchStart={this.handleCropMouseDown}\r\n            >\r\n              <div class=\"nw\" />\r\n              <div class=\"ne\" />\r\n              <div class=\"se\" />\r\n              <div class=\"sw\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.noPictureView = el}>\r\n            <dnn-dropzone\r\n              allowCameraMode\r\n              onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n              resx={\r\n                {\r\n                  capture: this.resx.capture,\r\n                  dragAndDropFile: this.resx.dragAndDropFile,\r\n                  or: this.resx.or,\r\n                  takePicture: this.resx.takePicture,\r\n                  uploadFile: this.resx.uploadFile,\r\n                }\r\n              }\r\n            />\r\n        </div>\r\n        <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n          <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n        </dnn-modal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n  View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}"]}