iron-signature-pad.html

<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="../paper-swatch-picker/paper-swatch-picker.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<script src="./signature_pad.min.js"></script>

<dom-module id="iron-signature-pad">
  <style>
    canvas {
      display: inherit;
    }

    .tools {
      position: absolute;
      z-index: 1;
      padding: 6px 0 0 6px;
    }

    .tools paper-swatch-picker {
      --paper-swatch-picker-color-size: 40px;
      --paper-swatch-picker-icon: {
        background-color: #fff;
        border-radius: 100%;
      };
    }

    .tools paper-icon-button {
      background-color: #fff;
      border-radius: 100%;
    }
  </style>

  <template>
    <div class="tools">
      <paper-swatch-picker color="{{color}}" color-list="[[colorList]]" column-count="4"></paper-swatch-picker>
      <paper-icon-button icon="undo" on-tap="undo"></paper-icon-button>
      <paper-swatch-picker id="borderPicker" color="{{borderColor}}" color-list="[[borderColorList]]" column-count="4"></paper-swatch-picker>
    </div>
    <canvas id="canvas"></canvas>
  </template>
</dom-module>

<script>
(function () {

  window.Polymer({
    is: 'iron-signature-pad',

    properties: {
      color: {
        type: String,
        value: '#000000',
        observer: 'update'
      },
      borderColor: {
        type: String,
        value: '#ffffff',
        observer: 'updateBorder'
      },
      backgroundColor: {
        type: String,
        value: '#ffffff',
        observer: 'update'
      },
      backgroundImage: {
        type: String,
        value: null,
        observer: 'update'
      },
      colorList: {
        type: Array,
        value: ['#000000', '#3f51b5', '#fcd400', '#666666', '#0077be', '#ffc107', '#999999', '#009640', '#f39000', '#9c27b0', '#c3d200', '#e52a12']
      },
      borderColorList: {
        type: Array,
        value: ['#ffffff', '#3f51b5', '#fcd400', '#000000', '#0077be', '#ffc107', '#666666', '#009640', '#f39000', '#9c27b0', '#c3d200', '#e52a12']
      },
      width: {
        type: Number,
        value: 500,
        observer: 'render'
      },
      height: {
        type: Number,
        value: 500,
        observer: 'render'
      },
      dirty: {
        type: Boolean,
        value: false,
        notify: true
      }
    },

    ready: function () {
      this.render();
      this.$.borderPicker.$.iconButton.set('icon', 'border-outer');
      this.$.borderPicker.$.iconButton.style.color = '#000000';
    },

    render: function () {
      var el = this;

      var ratio = Math.max(window.devicePixelRatio || 1, 1);
      var width = this.width;
      var height = this.height;

      this.$.canvas.width = ratio * width;
      this.$.canvas.height = ratio * height;
      this.$.canvas.style.width = width + 'px';
      this.$.canvas.style.height = height + 'px';
      this.$.canvas.getContext('2d').scale(ratio, ratio);

      this._signature_pad = new window.SignaturePad(this.$.canvas, {
        onEnd: function () {
          this.set('dirty', this.borderColor !== '#ffffff' || !this._signature_pad.isEmpty());
        }.bind(el)
      });

      this._signature_pad.clear = function () {
        var ctx = this._ctx;
        var canvas = this._canvas;

        ctx.clearRect(0, 0, width, height);

        if (this.backgroundImage) {
          try {
            ctx.drawImage(this.backgroundImage, 0, 0, width, height);
          }
          catch (ex) {
            return;
          }
        }
        else {
          ctx.fillStyle = this.backgroundColor;
          ctx.fillRect(0, 0, width, height);
        }

        this._data = [];
        this._reset();
        this._isEmpty = true;

        if (el.borderColor !== '#ffffff') {
          el.drawBorder();
        }
      };

      this.update();
    },

    update: function () {
      if (!this._signature_pad) {
        return;
      }

      this._signature_pad.penColor = this.color;

      if (this._signature_pad.backgroundColor !== this.backgroundColor) {
        this._signature_pad.backgroundColor = this.backgroundColor;
        this.clear();
      }

      if (this._signature_pad.backgroundImage !== this.backgroundImage) {
        this._signature_pad.backgroundImage = this.backgroundImage;
        this.clear();
      }
    },

    clear: function () {
      if (!this._signature_pad) {
        return;
      }

      this._signature_pad.clear();
      this.set('dirty', this.borderColor !== '#ffffff');
    },

    getData: function () {
      if (!this._signature_pad) {
        return;
      }

      return this._signature_pad.toDataURL();
    },

    undo: function () {
      var pad = this._signature_pad;

      if (!pad) {
        return;
      }

      var data = pad.toData();

      if (!data || !data.length) {
        return;
      }

      data.pop();
      pad.fromData(data);
    },

    updateBorder: function () {
      var pad = this._signature_pad;

      if (!pad) {
        return;
      }

      var ctx = pad._ctx;

      if (this.borderColor === '#ffffff') {
        setTimeout(function () {
          this.$.borderPicker.$.iconButton.style.color = '#000000';
        }.bind(this), 100);

        var data = pad.toData();

        this.clear();
        pad.fromData(data);

        return;
      }

      this.drawBorder();
    },

    drawBorder: function () {
      var pad = this._signature_pad;

      if (!pad) {
        return;
      }

      this.set('dirty', true);

      var ctx = pad._ctx;

      ctx.lineWidth = 20;
      ctx.strokeStyle = this.borderColor;
      ctx.strokeRect(0, 0, pad._canvas.clientWidth, pad._canvas.clientHeight);
    }
  });

})();
</script>