Skip to content

Commit

Permalink
Upgrade to version 2.3.2 of Szimek's Signature Pad
Browse files Browse the repository at this point in the history
  • Loading branch information
@JamesMcIntosh
JamesMcIntosh committed Aug 15, 2018
1 parent 7156e6b commit 5f4e07c
Showing 1 changed file with 83 additions and 49 deletions.
132 changes: 83 additions & 49 deletions injectedJavaScript/signaturePad.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Signature Pad v2.1.0
* Signature Pad v2.3.2
* https://github.com/szimek/signature_pad
*
* Copyright 2017 Szymon Nowak
Expand All @@ -16,8 +16,7 @@
*
*/

var content = `
export default `
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
Expand All @@ -38,14 +37,18 @@ Point.prototype.distanceTo = function (start) {
return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
};
Point.prototype.equals = function (other) {
return this.x === other.x && this.y === other.y && this.time === other.time;
};
function Bezier(startPoint, control1, control2, endPoint) {
this.startPoint = startPoint;
this.control1 = control1;
this.control2 = control2;
this.endPoint = endPoint;
}
/* Returns approximated length. */
/* // Returns approximated length. */
Bezier.prototype.length = function () {
var steps = 10;
var length = 0;
Expand Down Expand Up @@ -75,7 +78,7 @@ Bezier.prototype._point = function (t, start, c1, c2, end) {
/* eslint-disable */
/* http://stackoverflow.com/a/27078401/815507 */
/* // http://stackoverflow.com/a/27078401/815507 */
function throttle(func, wait, options) {
var context, args, result;
var timeout = null;
Expand Down Expand Up @@ -115,7 +118,8 @@ function SignaturePad(canvas, options) {
this.velocityFilterWeight = opts.velocityFilterWeight || 0.7;
this.minWidth = opts.minWidth || 0.5;
this.maxWidth = opts.maxWidth || 2.5;
this.throttle = opts.throttle || 16; /* in milliseconds */
this.throttle = 'throttle' in opts ? opts.throttle : 16; /* // in miliseconds */
this.minDistance = 'minDistance' in opts ? opts.minDistance : 5;
if (this.throttle) {
this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);
Expand All @@ -135,8 +139,8 @@ function SignaturePad(canvas, options) {
this._ctx = canvas.getContext('2d');
this.clear();
/* We need add these inline so they are available to unbind while still having
access to 'self' we could use _.bind but it's not worth adding a dependency. */
/* // We need add these inline so they are available to unbind while still having */
/* // access to 'self' we could use _.bind but it's not worth adding a dependency. */
this._handleMouseDown = function (event) {
if (event.which === 1) {
self._mouseButtonDown = true;
Expand Down Expand Up @@ -165,7 +169,7 @@ function SignaturePad(canvas, options) {
};
this._handleTouchMove = function (event) {
/* Prevent scrolling. */
/* // Prevent scrolling. */
event.preventDefault();
var touch = event.targetTouches[0];
Expand All @@ -180,11 +184,11 @@ function SignaturePad(canvas, options) {
}
};
/* Enable mouse and touch event handlers */
/* // Enable mouse and touch event handlers */
this.on();
}
/* Public methods */
/* // Public methods */
SignaturePad.prototype.clear = function () {
var ctx = this._ctx;
var canvas = this._canvas;
Expand All @@ -201,10 +205,12 @@ SignaturePad.prototype.clear = function () {
SignaturePad.prototype.fromDataURL = function (dataUrl) {
var _this = this;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var image = new Image();
var ratio = window.devicePixelRatio || 1;
var width = this._canvas.width / ratio;
var height = this._canvas.height / ratio;
var ratio = options.ratio || window.devicePixelRatio || 1;
var width = options.width || this._canvas.width / ratio;
var height = options.height || this._canvas.height / ratio;
this._reset();
image.src = dataUrl;
Expand Down Expand Up @@ -248,7 +254,7 @@ SignaturePad.prototype.isEmpty = function () {
return this._isEmpty;
};
/* Private methods */
/* // Private methods */
SignaturePad.prototype._strokeBegin = function (event) {
this._data.push([]);
this._reset();
Expand All @@ -264,30 +270,53 @@ SignaturePad.prototype._strokeUpdate = function (event) {
var y = event.clientY;
var point = this._createPoint(x, y);
var lastPointGroup = this._data[this._data.length - 1];
var lastPoint = lastPointGroup && lastPointGroup[lastPointGroup.length - 1];
var isLastPointTooClose = lastPoint && point.distanceTo(lastPoint) < this.minDistance;
/* // Skip this point if it's too close to the previous one */
if (!(lastPoint && isLastPointTooClose)) {
var _addPoint = this._addPoint(point),
curve = _addPoint.curve,
widths = _addPoint.widths;
if (curve && widths) {
this._drawCurve(curve, widths.start, widths.end);
}
var _addPoint = this._addPoint(point),
curve = _addPoint.curve,
widths = _addPoint.widths;
if (curve && widths) {
this._drawCurve(curve, widths.start, widths.end);
this._data[this._data.length - 1].push({
x: point.x,
y: point.y,
time: point.time,
color: this.penColor
});
}
this._data[this._data.length - 1].push({
x: point.x,
y: point.y,
time: point.time
});
};
SignaturePad.prototype._strokeEnd = function (event) {
var canDrawCurve = this.points.length > 2;
var point = this.points[0];
var point = this.points[0]; /* // Point instance */
if (!canDrawCurve && point) {
this._drawDot(point);
}
if (point) {
var lastPointGroup = this._data[this._data.length - 1];
var lastPoint = lastPointGroup[lastPointGroup.length - 1]; /* // plain object */
/* // When drawing a dot, there's only one point in a group, so without this check */
/* // such group would end up with exactly the same 2 points. */
if (!point.equals(lastPoint)) {
lastPointGroup.push({
x: point.x,
y: point.y,
time: point.time,
color: this.penColor
});
}
}
if (typeof this.onEnd === 'function') {
this.onEnd(event);
}
Expand All @@ -302,7 +331,7 @@ SignaturePad.prototype._handleMouseEvents = function () {
};
SignaturePad.prototype._handleTouchEvents = function () {
/* Pass touch events to canvas element on mobile IE11 and Edge. */
/* // Pass touch events to canvas element on mobile IE11 and Edge. */
this._canvas.style.msTouchAction = 'none';
this._canvas.style.touchAction = 'none';
Expand Down Expand Up @@ -331,8 +360,8 @@ SignaturePad.prototype._addPoint = function (point) {
points.push(point);
if (points.length > 2) {
/* To reduce the initial lag make it work with 3 points
by copying the first point to the beginning. */
/* // To reduce the initial lag make it work with 3 points */
/* // by copying the first point to the beginning. */
if (points.length === 3) points.unshift(points[0]);
tmp = this._calculateCurveControlPoints(points[0], points[1], points[2]);
Expand All @@ -342,8 +371,8 @@ SignaturePad.prototype._addPoint = function (point) {
var curve = new Bezier(points[1], c2, c3, points[2]);
var widths = this._calculateCurveWidths(curve);
/* Remove the first element from the list,
so that we always have no more than 4 points in points array. */
/* // Remove the first element from the list, */
/* // so that we always have no more than 4 points in points array. */
points.shift();
return { curve: curve, widths: widths };
Expand Down Expand Up @@ -417,7 +446,7 @@ SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) {
ctx.beginPath();
for (var i = 0; i < drawSteps; i += 1) {
/* Calculate the Bezier (x, y) coordinate for this step. */
/* // Calculate the Bezier (x, y) coordinate for this step. */
var t = i / drawSteps;
var tt = t * t;
var ttt = tt * t;
Expand Down Expand Up @@ -461,22 +490,28 @@ SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
for (var j = 0; j < group.length; j += 1) {
var rawPoint = group[j];
var point = new Point(rawPoint.x, rawPoint.y, rawPoint.time);
var color = rawPoint.color;
if (j === 0) {
/* First point in a group. Nothing to draw yet. */
/* // First point in a group. Nothing to draw yet. */
/* // All points in the group have the same color, so it's enough to set */
/* // penColor just at the beginning. */
this.penColor = color;
this._reset();
this._addPoint(point);
} else if (j !== group.length - 1) {
/* Middle point in a group. */
/* // Middle point in a group. */
var _addPoint2 = this._addPoint(point),
curve = _addPoint2.curve,
widths = _addPoint2.widths;
if (curve && widths) {
drawCurve(curve, widths);
drawCurve(curve, widths, color);
}
} else {
/* Last point in a group. Do nothing. */
/* // Last point in a group. Do nothing. */
}
}
} else {
Expand All @@ -502,18 +537,18 @@ SignaturePad.prototype._toSVG = function () {
svg.setAttributeNS(null, 'width', canvas.width);
svg.setAttributeNS(null, 'height', canvas.height);
this._fromData(pointGroups, function (curve, widths) {
this._fromData(pointGroups, function (curve, widths, color) {
var path = document.createElement('path');
/* Need to check curve for NaN values, these pop up when drawing
lines on the canvas that are not continuous. E.g. Sharp corners
or stopping mid-stroke and than continuing without lifting mouse. */
/* // Need to check curve for NaN values, these pop up when drawing */
/* // lines on the canvas that are not continuous. E.g. Sharp corners */
/* // or stopping mid-stroke and than continuing without lifting mouse. */
if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) {
var attr = 'M ' + curve.startPoint.x.toFixed(3) + ',' + curve.startPoint.y.toFixed(3) + ' ' + ('C ' + curve.control1.x.toFixed(3) + ',' + curve.control1.y.toFixed(3) + ' ') + (curve.control2.x.toFixed(3) + ',' + curve.control2.y.toFixed(3) + ' ') + (curve.endPoint.x.toFixed(3) + ',' + curve.endPoint.y.toFixed(3));
path.setAttribute('d', attr);
path.setAttribute('stroke-width', (widths.end * 2.25).toFixed(3));
path.setAttribute('stroke', _this2.penColor);
path.setAttribute('stroke', color);
path.setAttribute('fill', 'none');
path.setAttribute('stroke-linecap', 'round');
Expand All @@ -525,7 +560,7 @@ SignaturePad.prototype._toSVG = function () {
circle.setAttribute('r', dotSize);
circle.setAttribute('cx', rawPoint.x);
circle.setAttribute('cy', rawPoint.y);
circle.setAttribute('fill', _this2.penColor);
circle.setAttribute('fill', rawPoint.color);
svg.appendChild(circle);
});
Expand All @@ -534,7 +569,7 @@ SignaturePad.prototype._toSVG = function () {
var header = '<svg' + ' xmlns="http://www.w3.org/2000/svg"' + ' xmlns:xlink="http://www.w3.org/1999/xlink"' + (' viewBox="' + minX + ' ' + minY + ' ' + maxX + ' ' + maxY + '"') + (' width="' + maxX + '"') + (' height="' + maxY + '"') + '>';
var body = svg.innerHTML;
/* IE hack for missing innerHTML property on SVGElement */
/* // IE hack for missing innerHTML property on SVGElement */
if (body === undefined) {
var dummy = document.createElement('dummy');
var nodes = svg.childNodes;
Expand Down Expand Up @@ -563,6 +598,8 @@ SignaturePad.prototype.fromData = function (pointGroups) {
}, function (rawPoint) {
return _this3._drawDot(rawPoint);
});
this._data = pointGroups;
};
SignaturePad.prototype.toData = function () {
Expand All @@ -572,7 +609,4 @@ SignaturePad.prototype.toData = function () {
return SignaturePad;
})));
`;

export default content;
`;

0 comments on commit 5f4e07c

Please sign in to comment.