ng-canvas-paint/bundles/ng-canvas-paint.umd.js

Esta libreria fue generada con [Angular CLI](https://github.com/angular/angular-cli) version 8.2.9.

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
  typeof define === 'function' && define.amd ? define('ng-canvas-paint', ['exports', '@angular/core', '@angular/common'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ng-canvas-paint'] = {}, global.ng.core, global.ng.common));
}(this, (function (exports, core, common) { 'use strict';

  var NgCanvasPaintComponent = /** @class */ (function () {
      function NgCanvasPaintComponent() {
          this.value = undefined;
          this.onValue = new core.EventEmitter();
          this.containerClass = '';
          this.headerClass = 'options-container';
          this.painterContainerClass = 'ng-canvas-container';
          this.confirmBtnClass = 'confirm-button';
          this.cleanBtnClass = 'clean-button';
          this.title = "Firmar en el recuadro";
          this.color = "black";
          this.backgroundColor = "white";
          this.iconAcceptButton = "icon-check"; //"fas fa-check";
          this.iconCleanButton = "icon-clean"; //"fas fa-redo-alt";
          this.onAccept = new core.EventEmitter();
          this.onRefresh = new core.EventEmitter();
          this.positionButtons = "bottom" || "top";
      }
      NgCanvasPaintComponent.prototype.ngOnInit = function () {
      };
      NgCanvasPaintComponent.prototype.ngAfterViewInit = function () {
          setColor(this.color, this.backgroundColor);
          var time = setTimeout(function (_) { return init(); }, 100);
      };
      NgCanvasPaintComponent.prototype.refreshCanvas = function () {
          var _this = this;
          if (this.value)
              this.value = undefined;
          setTimeout(function () {
              canvasClear();
              init();
              _this.onRefresh.emit();
          }, 500);
      };
      NgCanvasPaintComponent.prototype.guardarCanvas = function () {
          this.value = canvasToImg();
          this.onAccept.emit(this.value);
      };
      return NgCanvasPaintComponent;
  }());
  NgCanvasPaintComponent.decorators = [
      { type: core.Component, args: [{
                  selector: 'ng-canvas-paint',
                  template: "\n    <div id=\"container\" class=\"main-container\" [ngClass]=\"containerClass\" >\n      <div [ngClass]=\"headerClass\">\n        <p><strong>{{title}}</strong></p>\n        <div class=\"buttons-container\" *ngIf=\"positionButtons === 'top'\">\n          <button type=\"button\" [ngClass]=\"cleanBtnClass\" (click)=\"refreshCanvas()\"><i [ngClass]=\"iconCleanButton\"></i></button>\n          <button type=\"button\" [ngClass]=\"confirmBtnClass\" (click)=\"guardarCanvas()\"><i [ngClass]=\"iconAcceptButton\"></i></button>\n        </div>\n      </div>\n\t\t\t<div id=\"container-painter\" [ngClass]=\"painterContainerClass\">\n        <canvas id=\"canvasPainterView\" class=\"canvas-painter\" *ngIf=\"!value\">\n\t\t\t\t<p>Unfortunately, your browser is currently unsupported by our web application. We are sorry for the\n\t\t\t\t  inconvenience. Please use one of the supported browsers listed below, or draw the image you want using an\n\t\t\t\t  offline tool.</p>\n\t\t\t\t<p>Supported browsers: <a href=\"http://www.opera.com/\">Opera</a>, <a href=\"http://www.mozilla.com/\">Firefox</a>,\n\t\t\t\t  <a href=\"http://www.apple.com/safari\">Safari</a>, and <a href=\"http://www.konqueror.org/\">Konqueror</a>.</p>\n\t\t\t  </canvas>\n\t\t\t  <img class=\"image-painter\" [src]=\"value\" *ngIf=\"value\" />\n      </div>\n      <div class=\"buttons-container\" *ngIf=\"positionButtons === 'bottom'\">\n        <button type=\"button\" [ngClass]=\"cleanBtnClass\" (click)=\"refreshCanvas()\" title=\"Limpiar recuadro\"><i [ngClass]=\"iconCleanButton\"></i></button>\n        <button type=\"button\" [ngClass]=\"confirmBtnClass\" (click)=\"guardarCanvas()\" title=\"Confirmar firma\"><i [ngClass]=\"iconAcceptButton\"></i></button>\n      </div>\n\t</div>\n  ",
                  styles: ["@charset \"UTF-8\";.main-container{display:flex;flex-direction:column}.ng-canvas-container{background:#ebf0f2;min-height:240px;width:100%;border:2px dashed #c2d1d9;border-radius:8px;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:0;width:inherit;height:inherit;padding:0!important}.canvas-painter,.image-painter{width:inherit;height:inherit;display:block}.options-container{justify-content:space-between}.buttons-container,.options-container{width:inherit;display:flex;align-items:center}.buttons-container{justify-content:flex-end}.card-body{padding:0!important}.center{display:flex;flex-direction:row;align-items:center;justify-content:center}.confirm-button{color:#00695e}.clean-button,.confirm-button{background-color:initial;border:none;font-size:24px}.clean-button{color:#012c5b}.icon-clean:before{content:\"\u274C\"}.icon-check:before{content:\"\u2714\uFE0F\"}"]
              },] }
  ];
  /** @nocollapse */
  NgCanvasPaintComponent.ctorParameters = function () { return []; };
  NgCanvasPaintComponent.propDecorators = {
      value: [{ type: core.Input, args: ['value',] }],
      onValue: [{ type: core.Output, args: ['value',] }],
      containerClass: [{ type: core.Input, args: ['containerClass',] }],
      headerClass: [{ type: core.Input, args: ['headerClass',] }],
      painterContainerClass: [{ type: core.Input, args: ['painterContainerClass',] }],
      confirmBtnClass: [{ type: core.Input, args: ['confirmBtnClass',] }],
      cleanBtnClass: [{ type: core.Input, args: ['cleanBtnClass',] }],
      title: [{ type: core.Input, args: ['title',] }],
      color: [{ type: core.Input, args: ['color',] }],
      backgroundColor: [{ type: core.Input, args: ['backgroundColor',] }],
      iconAcceptButton: [{ type: core.Input, args: ['iconAcceptButton',] }],
      iconCleanButton: [{ type: core.Input, args: ['iconCleanButton',] }],
      onAccept: [{ type: core.Output, args: ['onAccept',] }],
      onRefresh: [{ type: core.Output, args: ['onRefresh',] }],
      positionButtons: [{ type: core.Input, args: ['positionButtons',] }]
  };
  var containerCanvas, canvas, context, tool, color, background, autoSave;
  function setColor(lineColor, backgroundColor) {
      color = lineColor;
      background = backgroundColor;
  }
  function init(saveAuto) {
      if (saveAuto === void 0) { saveAuto = true; }
      autoSave = saveAuto;
      // Find the canvas element.
      canvas = document.getElementById('canvasPainterView');
      containerCanvas = document.getElementById("container-painter");
      canvas.width = containerCanvas.offsetWidth;
      canvas.height = containerCanvas.offsetHeight;
      if (!canvas) {
          alert('Error: I cannot find the canvas element!');
          return;
      }
      if (!canvas.getContext) {
          alert('Error: no canvas.getContext!');
          return;
      }
      // Get the 2D canvas context.
      context = canvas.getContext('2d');
      if (!context) {
          alert('Error: failed to getContext!');
          return;
      }
      context.fillStyle = background;
      context.strokeStyle = color;
      context.fillRect(0, 0, canvas.width, canvas.height);
      var touchAvailable = ('createTouch' in document) || ('ontouchstart' in window);
      // Pencil tool instance.
      tool = new tool_pencil();
      // Attach the mousedown, mousemove and mouseup event listeners. 
      canvas.addEventListener('mousedown', ev_canvas, false);
      canvas.addEventListener('mousemove', ev_canvas, false);
      canvas.addEventListener('mouseup', ev_canvas, false);
      if (touchAvailable) {
          document.body.addEventListener('touchmove', function (event) {
              event.preventDefault();
          }, { passive: false });
          canvas.addEventListener('touchstart', ev_canvas, false);
          canvas.addEventListener('touchmove', function (e) {
              // stop touch event
              e.stopPropagation();
              e.preventDefault();
              // translate to mouse event
              var clkEvt = document.createEvent('MouseEvent');
              clkEvt.initMouseEvent('mousemove', true, true, window, e.detail, e.touches[0].screenX, e.touches[0].screenY, e.touches[0].clientX, e.touches[0].clientY, false, false, false, false, 0, null);
              canvas.dispatchEvent(clkEvt);
              // or just handle touch event
              ev_canvas(e);
          }, false);
          //canvas.addEventListener('touchmove', draw, false);
          canvas.addEventListener('touchend', ev_canvas, false);
      }
  }
  // This painting tool works like a drawing pencil which tracks the mouse 
  // movements.
  function tool_pencil() {
      tool = this;
      this.started = false;
      // This is called when you start holding down the mouse button.
      // This starts the pencil drawing.
      this.mousedown = function (ev) {
          context.beginPath();
          context.moveTo(ev._x, ev._y);
          tool.started = true;
      };
      // This function is called every time you move the mouse. Obviously, it only 
      // draws if the tool.started state is set to true (when you are holding down 
      // the mouse button).
      this.mousemove = function (ev) {
          if (tool.started) {
              context.lineTo(ev._x, ev._y);
              context.stroke();
          }
      };
      // This is called when you release the mouse button.
      this.mouseup = function (ev) {
          if (tool.started) {
              tool.mousemove(ev);
              tool.started = false;
              if (autoSave) {
                  canvasToImg();
              }
          }
      };
  }
  // The general-purpose event handler. This function just determines the mouse 
  // position relative to the canvas element.
  function ev_canvas(ev) {
      if (ev.layerX || ev.layerX == 0) { // Firefox
          ev._x = ev.layerX;
          ev._y = ev.layerY;
      }
      else if (ev.offsetX || ev.offsetX == 0) { // Opera
          ev._x = ev.offsetX;
          ev._y = ev.offsetY;
      }
      else if (ev.pageX || ev.pageX == 0) {
          ev._x = ev.pageX;
          ev._y = ev.pageY;
      }
      // Call the event handler of the tool.
      var type = null;
      switch (ev.type) {
          case "touchstart":
              type = "mousedown";
              break;
          case "touchmove":
              type = "mousemove";
              break;
          case "touchend":
              type = "mouseup";
              break;
          default:
              type = ev.type;
              break;
      }
      ;
      var func = tool[type];
      if (func) {
          func(ev);
      }
  }
  function canvasClear() {
      var context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
  }
  function canvasToImg() {
      //var canvas = document.getElementById("canvasPainterView");
      var ctx = canvas.getContext("2d");
      //draw a red box
      ctx.fillStyle = background;
      ctx.strokeStyle = color;
      ctx.fillRect(10, 10, 30, 30);
      return canvas.toDataURL();
  }
  var ɵ0 = function (coors) {
      context.beginPath();
      context.moveTo(coors.x, coors.y);
      this.isDrawing = true;
  }, ɵ1 = function (coors) {
      if (this.isDrawing) {
          context.lineTo(coors.x, coors.y);
          context.stroke();
      }
  }, ɵ2 = function (coors) {
      if (this.isDrawing) {
          this.touchmove(coors);
          this.isDrawing = false;
      }
  };
  var drawer = {
      isDrawing: false,
      touchstart: ɵ0,
      touchmove: ɵ1,
      touchend: ɵ2
  };
  function draw(event) {
      var type = null;
      var coors;
      if (event.type === "touchend") {
          coors = {
              x: event.changedTouches[0].pageX,
              y: event.changedTouches[0].pageY
          };
      }
      else {
          // get the touch coordinates
          coors = {
              x: event.touches[0].pageX,
              y: event.touches[0].pageY
          };
      }
      type = type || event.type;
      // pass the coordinates to the appropriate handler
      drawer[type](coors);
  }

  var NgCanvasPaintModule = /** @class */ (function () {
      function NgCanvasPaintModule() {
      }
      return NgCanvasPaintModule;
  }());
  NgCanvasPaintModule.decorators = [
      { type: core.NgModule, args: [{
                  declarations: [NgCanvasPaintComponent],
                  imports: [
                      common.CommonModule
                  ],
                  exports: [NgCanvasPaintComponent],
                  schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
              },] }
  ];

  /*
   * Public API Surface of ng-canvas-paint
   */

  /**
   * Generated bundle index. Do not edit.
   */

  exports.NgCanvasPaintComponent = NgCanvasPaintComponent;
  exports.NgCanvasPaintModule = NgCanvasPaintModule;
  exports.ɵ0 = ɵ0;
  exports.ɵ1 = ɵ1;
  exports.ɵ2 = ɵ2;

  Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=ng-canvas-paint.umd.js.map