Socket
Socket
Sign inDemoInstall

signature_pad

Package Overview
Dependencies
Maintainers
1
Versions
57
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

signature_pad - npm Package Compare versions

Comparing version 3.0.0-beta.2 to 3.0.0-beta.3

4

CHANGELOG.md
## Changelog
### 3.0.0-beta.3
#### Features
- Add initial support for pointer events
### 3.0.0-beta.2

@@ -4,0 +8,0 @@ #### Bug fixes

140

dist/signature_pad.js
/*!
* Signature Pad v3.0.0-beta.2 | https://github.com/szimek/signature_pad
* Signature Pad v3.0.0-beta.3 | https://github.com/szimek/signature_pad
* (c) 2018 Szymon Nowak | Released under the MIT license

@@ -126,3 +126,3 @@ */

else if (!timeout) {
timeout = setTimeout(later, remaining);
timeout = window.setTimeout(later, remaining);
}

@@ -179,4 +179,4 @@ return result;

this.maxWidth = options.maxWidth || 2.5;
this.throttle = ("throttle" in options ? options.throttle : 16);
this.minDistance = ("minDistance" in options ? options.minDistance : 5);
this.throttle = ('throttle' in options ? options.throttle : 16);
this.minDistance = ('minDistance' in options ? options.minDistance : 5);
if (this.throttle) {

@@ -191,7 +191,7 @@ this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);

};
this.penColor = options.penColor || "black";
this.backgroundColor = options.backgroundColor || "rgba(0,0,0,0)";
this.penColor = options.penColor || 'black';
this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
this.onBegin = options.onBegin;
this.onEnd = options.onEnd;
this._ctx = canvas.getContext("2d");
this._ctx = canvas.getContext('2d');
this.clear();

@@ -233,5 +233,5 @@ this.on();

SignaturePad.prototype.toDataURL = function (type, encoderOptions) {
if (type === void 0) { type = "image/png"; }
if (type === void 0) { type = 'image/png'; }
switch (type) {
case "image/svg+xml":
case 'image/svg+xml':
return this._toSVG();

@@ -243,16 +243,26 @@ default:

SignaturePad.prototype.on = function () {
this._handleMouseEvents();
if ("ontouchstart" in window) {
this._handleTouchEvents();
this.canvas.style.touchAction = 'none';
this.canvas.style.msTouchAction = 'none';
if (window.PointerEvent) {
this._handlePointerEvents();
}
else {
this._handleMouseEvents();
if ('ontouchstart' in window) {
this._handleTouchEvents();
}
}
};
SignaturePad.prototype.off = function () {
this.canvas.style.msTouchAction = "auto";
this.canvas.style.touchAction = "auto";
this.canvas.removeEventListener("mousedown", this._handleMouseDown);
this.canvas.removeEventListener("mousemove", this._handleMouseMove);
document.removeEventListener("mouseup", this._handleMouseUp);
this.canvas.removeEventListener("touchstart", this._handleTouchStart);
this.canvas.removeEventListener("touchmove", this._handleTouchMove);
this.canvas.removeEventListener("touchend", this._handleTouchEnd);
this.canvas.style.touchAction = 'auto';
this.canvas.style.msTouchAction = 'auto';
this.canvas.removeEventListener('pointerdown', this._handleMouseDown);
this.canvas.removeEventListener('pointermove', this._handleMouseMove);
document.removeEventListener('pointerup', this._handleMouseUp);
this.canvas.removeEventListener('mousedown', this._handleMouseDown);
this.canvas.removeEventListener('mousemove', this._handleMouseMove);
document.removeEventListener('mouseup', this._handleMouseUp);
this.canvas.removeEventListener('touchstart', this._handleTouchStart);
this.canvas.removeEventListener('touchmove', this._handleTouchMove);
this.canvas.removeEventListener('touchend', this._handleTouchEnd);
};

@@ -285,3 +295,3 @@ SignaturePad.prototype.isEmpty = function () {

this._strokeUpdate(event);
if (typeof this.onBegin === "function") {
if (typeof this.onBegin === 'function') {
this.onBegin(event);

@@ -316,21 +326,25 @@ }

this._strokeUpdate(event);
if (typeof this.onEnd === "function") {
if (typeof this.onEnd === 'function') {
this.onEnd(event);
}
};
SignaturePad.prototype._handlePointerEvents = function () {
this._mouseButtonDown = false;
this.canvas.addEventListener('pointerdown', this._handleMouseDown);
this.canvas.addEventListener('pointermove', this._handleMouseMove);
document.addEventListener('pointerup', this._handleMouseUp);
};
SignaturePad.prototype._handleMouseEvents = function () {
this._mouseButtonDown = false;
this.canvas.addEventListener("mousedown", this._handleMouseDown);
this.canvas.addEventListener("mousemove", this._handleMouseMove);
document.addEventListener("mouseup", this._handleMouseUp);
this.canvas.addEventListener('mousedown', this._handleMouseDown);
this.canvas.addEventListener('mousemove', this._handleMouseMove);
document.addEventListener('mouseup', this._handleMouseUp);
};
SignaturePad.prototype._handleTouchEvents = function () {
this.canvas.style.msTouchAction = "none";
this.canvas.style.touchAction = "none";
this.canvas.addEventListener("touchstart", this._handleTouchStart);
this.canvas.addEventListener("touchmove", this._handleTouchMove);
this.canvas.addEventListener("touchend", this._handleTouchEnd);
this.canvas.addEventListener('touchstart', this._handleTouchStart);
this.canvas.addEventListener('touchmove', this._handleTouchMove);
this.canvas.addEventListener('touchend', this._handleTouchEnd);
};
SignaturePad.prototype._reset = function () {
this._points = [];
this._lastPoints = [];
this._lastVelocity = 0;

@@ -345,11 +359,11 @@ this._lastWidth = (this.minWidth + this.maxWidth) / 2;

SignaturePad.prototype._addPoint = function (point) {
var _points = this._points;
_points.push(point);
if (_points.length > 2) {
if (_points.length === 3) {
_points.unshift(_points[0]);
var _lastPoints = this._lastPoints;
_lastPoints.push(point);
if (_lastPoints.length > 2) {
if (_lastPoints.length === 3) {
_lastPoints.unshift(_lastPoints[0]);
}
var widths = this._calculateCurveWidths(_points[1], _points[2]);
var curve = Bezier.fromPoints(_points, widths);
_points.shift();
var widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
var curve = Bezier.fromPoints(_lastPoints, widths);
_lastPoints.shift();
return curve;

@@ -411,3 +425,3 @@ }

var ctx = this._ctx;
var width = typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
ctx.beginPath();

@@ -454,8 +468,8 @@ this._drawCurveSegment(point.x, point.y, width);

var maxY = this.canvas.height / ratio;
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", this.canvas.width.toString());
svg.setAttribute("height", this.canvas.height.toString());
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', this.canvas.width.toString());
svg.setAttribute('height', this.canvas.height.toString());
this._fromData(pointGroups, function (_a) {
var color = _a.color, curve = _a.curve;
var path = document.createElement("path");
var path = document.createElement('path');
if (!isNaN(curve.control1.x) &&

@@ -469,7 +483,7 @@ !isNaN(curve.control1.y) &&

+ (curve.endPoint.x.toFixed(3) + "," + curve.endPoint.y.toFixed(3));
path.setAttribute("d", attr);
path.setAttribute("stroke-width", (curve.endWidth * 2.25).toFixed(3));
path.setAttribute("stroke", color);
path.setAttribute("fill", "none");
path.setAttribute("stroke-linecap", "round");
path.setAttribute('d', attr);
path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
path.setAttribute('stroke', color);
path.setAttribute('fill', 'none');
path.setAttribute('stroke-linecap', 'round');
svg.appendChild(path);

@@ -479,23 +493,23 @@ }

var color = _a.color, point = _a.point;
var circle = document.createElement("circle");
var dotSize = typeof _this.dotSize === "function" ? _this.dotSize() : _this.dotSize;
circle.setAttribute("r", dotSize.toString());
circle.setAttribute("cx", point.x.toString());
circle.setAttribute("cy", point.y.toString());
circle.setAttribute("fill", color);
var circle = document.createElement('circle');
var dotSize = typeof _this.dotSize === 'function' ? _this.dotSize() : _this.dotSize;
circle.setAttribute('r', dotSize.toString());
circle.setAttribute('cx', point.x.toString());
circle.setAttribute('cy', point.y.toString());
circle.setAttribute('fill', color);
svg.appendChild(circle);
});
var prefix = "data:image/svg+xml;base64,";
var header = "<svg"
+ " xmlns=\"http://www.w3.org/2000/svg\""
+ " xmlns:xlink=\"http://www.w3.org/1999/xlink\""
var prefix = 'data:image/svg+xml;base64,';
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;
if (body === undefined) {
var dummy = document.createElement("dummy");
var dummy = document.createElement('dummy');
var nodes = svg.childNodes;
dummy.innerHTML = "";
dummy.innerHTML = '';
for (var i = 0; i < nodes.length; i += 1) {

@@ -506,3 +520,3 @@ dummy.appendChild(nodes[i].cloneNode(true));

}
var footer = "</svg>";
var footer = '</svg>';
var data = header + body + footer;

@@ -509,0 +523,0 @@ return prefix + btoa(data);

140

dist/signature_pad.m.js
/*!
* Signature Pad v3.0.0-beta.2 | https://github.com/szimek/signature_pad
* Signature Pad v3.0.0-beta.3 | https://github.com/szimek/signature_pad
* (c) 2018 Szymon Nowak | Released under the MIT license

@@ -117,3 +117,3 @@ */

else if (!timeout) {
timeout = setTimeout(later, remaining);
timeout = window.setTimeout(later, remaining);
}

@@ -168,4 +168,4 @@ return result;

this.maxWidth = options.maxWidth || 2.5;
this.throttle = ("throttle" in options ? options.throttle : 16);
this.minDistance = ("minDistance" in options ? options.minDistance : 5);
this.throttle = ('throttle' in options ? options.throttle : 16);
this.minDistance = ('minDistance' in options ? options.minDistance : 5);
if (this.throttle) {

@@ -180,7 +180,7 @@ this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);

};
this.penColor = options.penColor || "black";
this.backgroundColor = options.backgroundColor || "rgba(0,0,0,0)";
this.penColor = options.penColor || 'black';
this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
this.onBegin = options.onBegin;
this.onEnd = options.onEnd;
this._ctx = canvas.getContext("2d");
this._ctx = canvas.getContext('2d');
this.clear();

@@ -219,5 +219,5 @@ this.on();

}
toDataURL(type = "image/png", encoderOptions) {
toDataURL(type = 'image/png', encoderOptions) {
switch (type) {
case "image/svg+xml":
case 'image/svg+xml':
return this._toSVG();

@@ -229,16 +229,26 @@ default:

on() {
this._handleMouseEvents();
if ("ontouchstart" in window) {
this._handleTouchEvents();
this.canvas.style.touchAction = 'none';
this.canvas.style.msTouchAction = 'none';
if (window.PointerEvent) {
this._handlePointerEvents();
}
else {
this._handleMouseEvents();
if ('ontouchstart' in window) {
this._handleTouchEvents();
}
}
}
off() {
this.canvas.style.msTouchAction = "auto";
this.canvas.style.touchAction = "auto";
this.canvas.removeEventListener("mousedown", this._handleMouseDown);
this.canvas.removeEventListener("mousemove", this._handleMouseMove);
document.removeEventListener("mouseup", this._handleMouseUp);
this.canvas.removeEventListener("touchstart", this._handleTouchStart);
this.canvas.removeEventListener("touchmove", this._handleTouchMove);
this.canvas.removeEventListener("touchend", this._handleTouchEnd);
this.canvas.style.touchAction = 'auto';
this.canvas.style.msTouchAction = 'auto';
this.canvas.removeEventListener('pointerdown', this._handleMouseDown);
this.canvas.removeEventListener('pointermove', this._handleMouseMove);
document.removeEventListener('pointerup', this._handleMouseUp);
this.canvas.removeEventListener('mousedown', this._handleMouseDown);
this.canvas.removeEventListener('mousemove', this._handleMouseMove);
document.removeEventListener('mouseup', this._handleMouseUp);
this.canvas.removeEventListener('touchstart', this._handleTouchStart);
this.canvas.removeEventListener('touchmove', this._handleTouchMove);
this.canvas.removeEventListener('touchend', this._handleTouchEnd);
}

@@ -264,3 +274,3 @@ isEmpty() {

this._strokeUpdate(event);
if (typeof this.onBegin === "function") {
if (typeof this.onBegin === 'function') {
this.onBegin(event);

@@ -295,21 +305,25 @@ }

this._strokeUpdate(event);
if (typeof this.onEnd === "function") {
if (typeof this.onEnd === 'function') {
this.onEnd(event);
}
}
_handlePointerEvents() {
this._mouseButtonDown = false;
this.canvas.addEventListener('pointerdown', this._handleMouseDown);
this.canvas.addEventListener('pointermove', this._handleMouseMove);
document.addEventListener('pointerup', this._handleMouseUp);
}
_handleMouseEvents() {
this._mouseButtonDown = false;
this.canvas.addEventListener("mousedown", this._handleMouseDown);
this.canvas.addEventListener("mousemove", this._handleMouseMove);
document.addEventListener("mouseup", this._handleMouseUp);
this.canvas.addEventListener('mousedown', this._handleMouseDown);
this.canvas.addEventListener('mousemove', this._handleMouseMove);
document.addEventListener('mouseup', this._handleMouseUp);
}
_handleTouchEvents() {
this.canvas.style.msTouchAction = "none";
this.canvas.style.touchAction = "none";
this.canvas.addEventListener("touchstart", this._handleTouchStart);
this.canvas.addEventListener("touchmove", this._handleTouchMove);
this.canvas.addEventListener("touchend", this._handleTouchEnd);
this.canvas.addEventListener('touchstart', this._handleTouchStart);
this.canvas.addEventListener('touchmove', this._handleTouchMove);
this.canvas.addEventListener('touchend', this._handleTouchEnd);
}
_reset() {
this._points = [];
this._lastPoints = [];
this._lastVelocity = 0;

@@ -324,11 +338,11 @@ this._lastWidth = (this.minWidth + this.maxWidth) / 2;

_addPoint(point) {
const { _points } = this;
_points.push(point);
if (_points.length > 2) {
if (_points.length === 3) {
_points.unshift(_points[0]);
const { _lastPoints } = this;
_lastPoints.push(point);
if (_lastPoints.length > 2) {
if (_lastPoints.length === 3) {
_lastPoints.unshift(_lastPoints[0]);
}
const widths = this._calculateCurveWidths(_points[1], _points[2]);
const curve = Bezier.fromPoints(_points, widths);
_points.shift();
const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
const curve = Bezier.fromPoints(_lastPoints, widths);
_lastPoints.shift();
return curve;

@@ -388,3 +402,3 @@ }

const ctx = this._ctx;
const width = typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
const width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
ctx.beginPath();

@@ -429,7 +443,7 @@ this._drawCurveSegment(point.x, point.y, width);

const maxY = this.canvas.height / ratio;
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", this.canvas.width.toString());
svg.setAttribute("height", this.canvas.height.toString());
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', this.canvas.width.toString());
svg.setAttribute('height', this.canvas.height.toString());
this._fromData(pointGroups, ({ color, curve }) => {
const path = document.createElement("path");
const path = document.createElement('path');
if (!isNaN(curve.control1.x) &&

@@ -443,31 +457,31 @@ !isNaN(curve.control1.y) &&

+ `${curve.endPoint.x.toFixed(3)},${curve.endPoint.y.toFixed(3)}`;
path.setAttribute("d", attr);
path.setAttribute("stroke-width", (curve.endWidth * 2.25).toFixed(3));
path.setAttribute("stroke", color);
path.setAttribute("fill", "none");
path.setAttribute("stroke-linecap", "round");
path.setAttribute('d', attr);
path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
path.setAttribute('stroke', color);
path.setAttribute('fill', 'none');
path.setAttribute('stroke-linecap', 'round');
svg.appendChild(path);
}
}, ({ color, point }) => {
const circle = document.createElement("circle");
const dotSize = typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
circle.setAttribute("r", dotSize.toString());
circle.setAttribute("cx", point.x.toString());
circle.setAttribute("cy", point.y.toString());
circle.setAttribute("fill", color);
const circle = document.createElement('circle');
const dotSize = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
circle.setAttribute('r', dotSize.toString());
circle.setAttribute('cx', point.x.toString());
circle.setAttribute('cy', point.y.toString());
circle.setAttribute('fill', color);
svg.appendChild(circle);
});
const prefix = "data:image/svg+xml;base64,";
const header = "<svg"
+ " xmlns=\"http://www.w3.org/2000/svg\""
+ " xmlns:xlink=\"http://www.w3.org/1999/xlink\""
const prefix = 'data:image/svg+xml;base64,';
const 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}"`
+ ">";
+ '>';
let body = svg.innerHTML;
if (body === undefined) {
const dummy = document.createElement("dummy");
const dummy = document.createElement('dummy');
const nodes = svg.childNodes;
dummy.innerHTML = "";
dummy.innerHTML = '';
for (let i = 0; i < nodes.length; i += 1) {

@@ -478,3 +492,3 @@ dummy.appendChild(nodes[i].cloneNode(true));

}
const footer = "</svg>";
const footer = '</svg>';
const data = header + body + footer;

@@ -481,0 +495,0 @@ return prefix + btoa(data);

2

dist/signature_pad.m.min.js

@@ -1,1 +0,1 @@

class Point{constructor(t,e,i){this.x=t,this.y=e,this.time=i||Date.now()}distanceTo(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))}equals(t){return this.x===t.x&&this.y===t.y&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}}class Bezier{constructor(t,e,i,o,s,n){this.startPoint=t,this.control2=e,this.control1=i,this.endPoint=o,this.startWidth=s,this.endWidth=n}static fromPoints(t,e){const i=this.calculateControlPoints(t[0],t[1],t[2]).c2,o=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new Bezier(t[1],i,o,t[2],e.start,e.end)}static calculateControlPoints(t,e,i){const o=t.x-e.x,s=t.y-e.y,n=e.x-i.x,h=e.y-i.y,r=(t.x+e.x)/2,a=(t.y+e.y)/2,c=(e.x+i.x)/2,l=(e.y+i.y)/2,d=Math.sqrt(o*o+s*s),u=Math.sqrt(n*n+h*h),_=u/(d+u),v=c+(r-c)*_,m=l+(a-l)*_,g=e.x-v,p=e.y-m;return{c1:new Point(r+g,a+p),c2:new Point(c+g,l+p)}}length(){let t,e,i=0;for(let o=0;o<=10;o+=1){const s=o/10,n=this.point(s,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),h=this.point(s,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(o>0){const o=n-t,s=h-e;i+=Math.sqrt(o*o+s*s)}t=n,e=h}return i}point(t,e,i,o,s){return e*(1-t)*(1-t)*(1-t)+3*i*(1-t)*(1-t)*t+3*o*(1-t)*t*t+s*t*t*t}}function throttle(t,e=250){let i,o,s,n=0,h=null;const r=()=>{n=Date.now(),h=null,i=t.apply(o,s),h||(o=null,s=[])};return function(...a){const c=Date.now(),l=e-(c-n);return o=this,s=a,l<=0||l>e?(h&&(clearTimeout(h),h=null),n=c,i=t.apply(o,s),h||(o=null,s=[])):h||(h=setTimeout(r,l)),i}}class SignaturePad{constructor(t,e={}){this.canvas=t,this.options=e,this._handleMouseDown=(t=>{1===t.which&&(this._mouseButtonDown=!0,this._strokeBegin(t))}),this._handleMouseMove=(t=>{this._mouseButtonDown&&this._strokeMoveUpdate(t)}),this._handleMouseUp=(t=>{1===t.which&&this._mouseButtonDown&&(this._mouseButtonDown=!1,this._strokeEnd(t))}),this._handleTouchStart=(t=>{if(t.preventDefault(),1===t.targetTouches.length){const e=t.changedTouches[0];this._strokeBegin(e)}}),this._handleTouchMove=(t=>{t.preventDefault();const e=t.targetTouches[0];this._strokeMoveUpdate(e)}),this._handleTouchEnd=(t=>{if(t.target===this.canvas){t.preventDefault();const e=t.changedTouches[0];this._strokeEnd(e)}}),this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle="throttle"in e?e.throttle:16,this.minDistance="minDistance"in e?e.minDistance:5,this.throttle?this._strokeMoveUpdate=throttle(SignaturePad.prototype._strokeUpdate,this.throttle):this._strokeMoveUpdate=SignaturePad.prototype._strokeUpdate,this.dotSize=e.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.onBegin=e.onBegin,this.onEnd=e.onEnd,this._ctx=t.getContext("2d"),this.clear(),this.on()}clear(){const t=this._ctx,e=this.canvas;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this._data=[],this._reset(),this._isEmpty=!0}fromDataURL(t,e={},i){const o=new Image,s=e.ratio||window.devicePixelRatio||1,n=e.width||this.canvas.width/s,h=e.height||this.canvas.height/s;this._reset(),o.onload=(()=>{this._ctx.drawImage(o,0,0,n,h),i&&i()}),o.onerror=(t=>{i&&i(t)}),o.src=t,this._isEmpty=!1}toDataURL(t="image/png",e){switch(t){case"image/svg+xml":return this._toSVG();default:return this.canvas.toDataURL(t,e)}}on(){this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents()}off(){this.canvas.style.msTouchAction="auto",this.canvas.style.touchAction="auto",this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this.canvas.removeEventListener("touchend",this._handleTouchEnd)}isEmpty(){return this._isEmpty}fromData(t){this.clear(),this._fromData(t,({color:t,curve:e})=>this._drawCurve({color:t,curve:e}),({color:t,point:e})=>this._drawDot({color:t,point:e})),this._data=t}toData(){return this._data}_strokeBegin(t){const e={color:this.penColor,points:[]};this._data.push(e),this._reset(),this._strokeUpdate(t),"function"==typeof this.onBegin&&this.onBegin(t)}_strokeUpdate(t){const e=t.clientX,i=t.clientY,o=this._createPoint(e,i),s=this._data[this._data.length-1],n=s.points,h=n.length>0&&n[n.length-1],r=!!h&&o.distanceTo(h)<=this.minDistance,a=s.color;if(!h||!h||!r){const t=this._addPoint(o);h?t&&this._drawCurve({color:a,curve:t}):this._drawDot({color:a,point:o}),n.push({time:o.time,x:o.x,y:o.y})}}_strokeEnd(t){this._strokeUpdate(t),"function"==typeof this.onEnd&&this.onEnd(t)}_handleMouseEvents(){this._mouseButtonDown=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleTouchEvents(){this.canvas.style.msTouchAction="none",this.canvas.style.touchAction="none",this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)}_reset(){this._points=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor}_createPoint(t,e){const i=this.canvas.getBoundingClientRect();return new Point(t-i.left,e-i.top,(new Date).getTime())}_addPoint(t){const{_points:e}=this;if(e.push(t),e.length>2){3===e.length&&e.unshift(e[0]);const t=this._calculateCurveWidths(e[1],e[2]),i=Bezier.fromPoints(e,t);return e.shift(),i}return null}_calculateCurveWidths(t,e){const i=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,o=this._strokeWidth(i),s={end:o,start:this._lastWidth};return this._lastVelocity=i,this._lastWidth=o,s}_strokeWidth(t){return Math.max(this.maxWidth/(t+1),this.minWidth)}_drawCurveSegment(t,e,i){const o=this._ctx;o.moveTo(t,e),o.arc(t,e,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve({color:t,curve:e}){const i=this._ctx,o=e.endWidth-e.startWidth,s=2*Math.floor(e.length());i.beginPath(),i.fillStyle=t;for(let t=0;t<s;t+=1){const i=t/s,n=i*i,h=n*i,r=1-i,a=r*r,c=a*r;let l=c*e.startPoint.x;l+=3*a*i*e.control1.x,l+=3*r*n*e.control2.x,l+=h*e.endPoint.x;let d=c*e.startPoint.y;d+=3*a*i*e.control1.y,d+=3*r*n*e.control2.y,d+=h*e.endPoint.y;const u=e.startWidth+h*o;this._drawCurveSegment(l,d,u)}i.closePath(),i.fill()}_drawDot({color:t,point:e}){const i=this._ctx,o="function"==typeof this.dotSize?this.dotSize():this.dotSize;i.beginPath(),this._drawCurveSegment(e.x,e.y,o),i.closePath(),i.fillStyle=t,i.fill()}_fromData(t,e,i){for(const o of t){const{color:t,points:s}=o;if(s.length>1)for(let i=0;i<s.length;i+=1){const o=s[i],n=new Point(o.x,o.y,o.time);this.penColor=t,0===i&&this._reset();const h=this._addPoint(n);h&&e({color:t,curve:h})}else this._reset(),i({color:t,point:s[0]})}}_toSVG(){const t=this._data,e=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/e,o=this.canvas.height/e,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width",this.canvas.width.toString()),s.setAttribute("height",this.canvas.height.toString()),this._fromData(t,({color:t,curve:e})=>{const i=document.createElement("path");if(!(isNaN(e.control1.x)||isNaN(e.control1.y)||isNaN(e.control2.x)||isNaN(e.control2.y))){const o=`M ${e.startPoint.x.toFixed(3)},${e.startPoint.y.toFixed(3)} `+`C ${e.control1.x.toFixed(3)},${e.control1.y.toFixed(3)} `+`${e.control2.x.toFixed(3)},${e.control2.y.toFixed(3)} `+`${e.endPoint.x.toFixed(3)},${e.endPoint.y.toFixed(3)}`;i.setAttribute("d",o),i.setAttribute("stroke-width",(2.25*e.endWidth).toFixed(3)),i.setAttribute("stroke",t),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),s.appendChild(i)}},({color:t,point:e})=>{const i=document.createElement("circle"),o="function"==typeof this.dotSize?this.dotSize():this.dotSize;i.setAttribute("r",o.toString()),i.setAttribute("cx",e.x.toString()),i.setAttribute("cy",e.y.toString()),i.setAttribute("fill",t),s.appendChild(i)});const n='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"'+` viewBox="0 0 ${i} ${o}"`+` width="${i}"`+` height="${o}"`+">";let h=s.innerHTML;if(void 0===h){const t=document.createElement("dummy"),e=s.childNodes;t.innerHTML="";for(let i=0;i<e.length;i+=1)t.appendChild(e[i].cloneNode(!0));h=t.innerHTML}return"data:image/svg+xml;base64,"+btoa(n+h+"</svg>")}}export default SignaturePad;
class Point{constructor(t,e,i){this.x=t,this.y=e,this.time=i||Date.now()}distanceTo(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))}equals(t){return this.x===t.x&&this.y===t.y&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}}class Bezier{constructor(t,e,i,o,s,n){this.startPoint=t,this.control2=e,this.control1=i,this.endPoint=o,this.startWidth=s,this.endWidth=n}static fromPoints(t,e){const i=this.calculateControlPoints(t[0],t[1],t[2]).c2,o=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new Bezier(t[1],i,o,t[2],e.start,e.end)}static calculateControlPoints(t,e,i){const o=t.x-e.x,s=t.y-e.y,n=e.x-i.x,h=e.y-i.y,r=(t.x+e.x)/2,a=(t.y+e.y)/2,c=(e.x+i.x)/2,l=(e.y+i.y)/2,d=Math.sqrt(o*o+s*s),u=Math.sqrt(n*n+h*h),v=u/(d+u),_=c+(r-c)*v,m=l+(a-l)*v,p=e.x-_,g=e.y-m;return{c1:new Point(r+p,a+g),c2:new Point(c+p,l+g)}}length(){let t,e,i=0;for(let o=0;o<=10;o+=1){const s=o/10,n=this.point(s,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),h=this.point(s,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(o>0){const o=n-t,s=h-e;i+=Math.sqrt(o*o+s*s)}t=n,e=h}return i}point(t,e,i,o,s){return e*(1-t)*(1-t)*(1-t)+3*i*(1-t)*(1-t)*t+3*o*(1-t)*t*t+s*t*t*t}}function throttle(t,e=250){let i,o,s,n=0,h=null;const r=()=>{n=Date.now(),h=null,i=t.apply(o,s),h||(o=null,s=[])};return function(...a){const c=Date.now(),l=e-(c-n);return o=this,s=a,l<=0||l>e?(h&&(clearTimeout(h),h=null),n=c,i=t.apply(o,s),h||(o=null,s=[])):h||(h=window.setTimeout(r,l)),i}}class SignaturePad{constructor(t,e={}){this.canvas=t,this.options=e,this._handleMouseDown=(t=>{1===t.which&&(this._mouseButtonDown=!0,this._strokeBegin(t))}),this._handleMouseMove=(t=>{this._mouseButtonDown&&this._strokeMoveUpdate(t)}),this._handleMouseUp=(t=>{1===t.which&&this._mouseButtonDown&&(this._mouseButtonDown=!1,this._strokeEnd(t))}),this._handleTouchStart=(t=>{if(t.preventDefault(),1===t.targetTouches.length){const e=t.changedTouches[0];this._strokeBegin(e)}}),this._handleTouchMove=(t=>{t.preventDefault();const e=t.targetTouches[0];this._strokeMoveUpdate(e)}),this._handleTouchEnd=(t=>{if(t.target===this.canvas){t.preventDefault();const e=t.changedTouches[0];this._strokeEnd(e)}}),this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle="throttle"in e?e.throttle:16,this.minDistance="minDistance"in e?e.minDistance:5,this.throttle?this._strokeMoveUpdate=throttle(SignaturePad.prototype._strokeUpdate,this.throttle):this._strokeMoveUpdate=SignaturePad.prototype._strokeUpdate,this.dotSize=e.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.onBegin=e.onBegin,this.onEnd=e.onEnd,this._ctx=t.getContext("2d"),this.clear(),this.on()}clear(){const t=this._ctx,e=this.canvas;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this._data=[],this._reset(),this._isEmpty=!0}fromDataURL(t,e={},i){const o=new Image,s=e.ratio||window.devicePixelRatio||1,n=e.width||this.canvas.width/s,h=e.height||this.canvas.height/s;this._reset(),o.onload=(()=>{this._ctx.drawImage(o,0,0,n,h),i&&i()}),o.onerror=(t=>{i&&i(t)}),o.src=t,this._isEmpty=!1}toDataURL(t="image/png",e){switch(t){case"image/svg+xml":return this._toSVG();default:return this.canvas.toDataURL(t,e)}}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",window.PointerEvent?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.removeEventListener("pointerdown",this._handleMouseDown),this.canvas.removeEventListener("pointermove",this._handleMouseMove),document.removeEventListener("pointerup",this._handleMouseUp),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this.canvas.removeEventListener("touchend",this._handleTouchEnd)}isEmpty(){return this._isEmpty}fromData(t){this.clear(),this._fromData(t,({color:t,curve:e})=>this._drawCurve({color:t,curve:e}),({color:t,point:e})=>this._drawDot({color:t,point:e})),this._data=t}toData(){return this._data}_strokeBegin(t){const e={color:this.penColor,points:[]};this._data.push(e),this._reset(),this._strokeUpdate(t),"function"==typeof this.onBegin&&this.onBegin(t)}_strokeUpdate(t){const e=t.clientX,i=t.clientY,o=this._createPoint(e,i),s=this._data[this._data.length-1],n=s.points,h=n.length>0&&n[n.length-1],r=!!h&&o.distanceTo(h)<=this.minDistance,a=s.color;if(!h||!h||!r){const t=this._addPoint(o);h?t&&this._drawCurve({color:a,curve:t}):this._drawDot({color:a,point:o}),n.push({time:o.time,x:o.x,y:o.y})}}_strokeEnd(t){this._strokeUpdate(t),"function"==typeof this.onEnd&&this.onEnd(t)}_handlePointerEvents(){this._mouseButtonDown=!1,this.canvas.addEventListener("pointerdown",this._handleMouseDown),this.canvas.addEventListener("pointermove",this._handleMouseMove),document.addEventListener("pointerup",this._handleMouseUp)}_handleMouseEvents(){this._mouseButtonDown=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleTouchEvents(){this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)}_reset(){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor}_createPoint(t,e){const i=this.canvas.getBoundingClientRect();return new Point(t-i.left,e-i.top,(new Date).getTime())}_addPoint(t){const{_lastPoints:e}=this;if(e.push(t),e.length>2){3===e.length&&e.unshift(e[0]);const t=this._calculateCurveWidths(e[1],e[2]),i=Bezier.fromPoints(e,t);return e.shift(),i}return null}_calculateCurveWidths(t,e){const i=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,o=this._strokeWidth(i),s={end:o,start:this._lastWidth};return this._lastVelocity=i,this._lastWidth=o,s}_strokeWidth(t){return Math.max(this.maxWidth/(t+1),this.minWidth)}_drawCurveSegment(t,e,i){const o=this._ctx;o.moveTo(t,e),o.arc(t,e,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve({color:t,curve:e}){const i=this._ctx,o=e.endWidth-e.startWidth,s=2*Math.floor(e.length());i.beginPath(),i.fillStyle=t;for(let t=0;t<s;t+=1){const i=t/s,n=i*i,h=n*i,r=1-i,a=r*r,c=a*r;let l=c*e.startPoint.x;l+=3*a*i*e.control1.x,l+=3*r*n*e.control2.x,l+=h*e.endPoint.x;let d=c*e.startPoint.y;d+=3*a*i*e.control1.y,d+=3*r*n*e.control2.y,d+=h*e.endPoint.y;const u=e.startWidth+h*o;this._drawCurveSegment(l,d,u)}i.closePath(),i.fill()}_drawDot({color:t,point:e}){const i=this._ctx,o="function"==typeof this.dotSize?this.dotSize():this.dotSize;i.beginPath(),this._drawCurveSegment(e.x,e.y,o),i.closePath(),i.fillStyle=t,i.fill()}_fromData(t,e,i){for(const o of t){const{color:t,points:s}=o;if(s.length>1)for(let i=0;i<s.length;i+=1){const o=s[i],n=new Point(o.x,o.y,o.time);this.penColor=t,0===i&&this._reset();const h=this._addPoint(n);h&&e({color:t,curve:h})}else this._reset(),i({color:t,point:s[0]})}}_toSVG(){const t=this._data,e=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/e,o=this.canvas.height/e,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width",this.canvas.width.toString()),s.setAttribute("height",this.canvas.height.toString()),this._fromData(t,({color:t,curve:e})=>{const i=document.createElement("path");if(!(isNaN(e.control1.x)||isNaN(e.control1.y)||isNaN(e.control2.x)||isNaN(e.control2.y))){const o=`M ${e.startPoint.x.toFixed(3)},${e.startPoint.y.toFixed(3)} `+`C ${e.control1.x.toFixed(3)},${e.control1.y.toFixed(3)} `+`${e.control2.x.toFixed(3)},${e.control2.y.toFixed(3)} `+`${e.endPoint.x.toFixed(3)},${e.endPoint.y.toFixed(3)}`;i.setAttribute("d",o),i.setAttribute("stroke-width",(2.25*e.endWidth).toFixed(3)),i.setAttribute("stroke",t),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),s.appendChild(i)}},({color:t,point:e})=>{const i=document.createElement("circle"),o="function"==typeof this.dotSize?this.dotSize():this.dotSize;i.setAttribute("r",o.toString()),i.setAttribute("cx",e.x.toString()),i.setAttribute("cy",e.y.toString()),i.setAttribute("fill",t),s.appendChild(i)});const n='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"'+` viewBox="0 0 ${i} ${o}"`+` width="${i}"`+` height="${o}"`+">";let h=s.innerHTML;if(void 0===h){const t=document.createElement("dummy"),e=s.childNodes;t.innerHTML="";for(let i=0;i<e.length;i+=1)t.appendChild(e[i].cloneNode(!0));h=t.innerHTML}return"data:image/svg+xml;base64,"+btoa(n+h+"</svg>")}}export default SignaturePad;

2

dist/signature_pad.min.js

@@ -1,1 +0,1 @@

"use strict";var Point=function(){function t(t,e,o){this.x=t,this.y=e,this.time=o||Date.now()}return t.prototype.distanceTo=function(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))},t.prototype.equals=function(t){return this.x===t.x&&this.y===t.y&&this.time===t.time},t.prototype.velocityFrom=function(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0},t}(),Bezier=function(){function t(t,e,o,i,n,s){this.startPoint=t,this.control2=e,this.control1=o,this.endPoint=i,this.startWidth=n,this.endWidth=s}return t.fromPoints=function(e,o){var i=this.calculateControlPoints(e[0],e[1],e[2]).c2,n=this.calculateControlPoints(e[1],e[2],e[3]).c1;return new t(e[1],i,n,e[2],o.start,o.end)},t.calculateControlPoints=function(t,e,o){var i=t.x-e.x,n=t.y-e.y,s=e.x-o.x,r=e.y-o.y,h=(t.x+e.x)/2,a=(t.y+e.y)/2,c=(e.x+o.x)/2,u=(e.y+o.y)/2,l=Math.sqrt(i*i+n*n),d=Math.sqrt(s*s+r*r),v=d/(l+d),p=c+(h-c)*v,f=u+(a-u)*v,_=e.x-p,y=e.y-f;return{c1:new Point(h+_,a+y),c2:new Point(c+_,u+y)}},t.prototype.length=function(){for(var t,e,o=0,i=0;i<=10;i+=1){var n=i/10,s=this.point(n,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(n,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(i>0){var h=s-t,a=r-e;o+=Math.sqrt(h*h+a*a)}t=s,e=r}return o},t.prototype.point=function(t,e,o,i,n){return e*(1-t)*(1-t)*(1-t)+3*o*(1-t)*(1-t)*t+3*i*(1-t)*t*t+n*t*t*t},t}();function throttle(t,e){void 0===e&&(e=250);var o,i,n,s=0,r=null,h=function(){s=Date.now(),r=null,o=t.apply(i,n),r||(i=null,n=[])};return function(){for(var a=[],c=0;c<arguments.length;c++)a[c]=arguments[c];var u=Date.now(),l=e-(u-s);return i=this,n=a,l<=0||l>e?(r&&(clearTimeout(r),r=null),s=u,o=t.apply(i,n),r||(i=null,n=[])):r||(r=setTimeout(h,l)),o}}var SignaturePad=function(){function t(e,o){void 0===o&&(o={});var i=this;this.canvas=e,this.options=o,this._handleMouseDown=function(t){1===t.which&&(i._mouseButtonDown=!0,i._strokeBegin(t))},this._handleMouseMove=function(t){i._mouseButtonDown&&i._strokeMoveUpdate(t)},this._handleMouseUp=function(t){1===t.which&&i._mouseButtonDown&&(i._mouseButtonDown=!1,i._strokeEnd(t))},this._handleTouchStart=function(t){if(t.preventDefault(),1===t.targetTouches.length){var e=t.changedTouches[0];i._strokeBegin(e)}},this._handleTouchMove=function(t){t.preventDefault();var e=t.targetTouches[0];i._strokeMoveUpdate(e)},this._handleTouchEnd=function(t){if(t.target===i.canvas){t.preventDefault();var e=t.changedTouches[0];i._strokeEnd(e)}},this.velocityFilterWeight=o.velocityFilterWeight||.7,this.minWidth=o.minWidth||.5,this.maxWidth=o.maxWidth||2.5,this.throttle="throttle"in o?o.throttle:16,this.minDistance="minDistance"in o?o.minDistance:5,this.throttle?this._strokeMoveUpdate=throttle(t.prototype._strokeUpdate,this.throttle):this._strokeMoveUpdate=t.prototype._strokeUpdate,this.dotSize=o.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=o.penColor||"black",this.backgroundColor=o.backgroundColor||"rgba(0,0,0,0)",this.onBegin=o.onBegin,this.onEnd=o.onEnd,this._ctx=e.getContext("2d"),this.clear(),this.on()}return t.prototype.clear=function(){var t=this._ctx,e=this.canvas;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this._data=[],this._reset(),this._isEmpty=!0},t.prototype.fromDataURL=function(t,e,o){var i=this;void 0===e&&(e={});var n=new Image,s=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/s,h=e.height||this.canvas.height/s;this._reset(),n.onload=function(){i._ctx.drawImage(n,0,0,r,h),o&&o()},n.onerror=function(t){o&&o(t)},n.src=t,this._isEmpty=!1},t.prototype.toDataURL=function(t,e){switch(void 0===t&&(t="image/png"),t){case"image/svg+xml":return this._toSVG();default:return this.canvas.toDataURL(t,e)}},t.prototype.on=function(){this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents()},t.prototype.off=function(){this.canvas.style.msTouchAction="auto",this.canvas.style.touchAction="auto",this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this.canvas.removeEventListener("touchend",this._handleTouchEnd)},t.prototype.isEmpty=function(){return this._isEmpty},t.prototype.fromData=function(t){var e=this;this.clear(),this._fromData(t,function(t){var o=t.color,i=t.curve;return e._drawCurve({color:o,curve:i})},function(t){var o=t.color,i=t.point;return e._drawDot({color:o,point:i})}),this._data=t},t.prototype.toData=function(){return this._data},t.prototype._strokeBegin=function(t){var e={color:this.penColor,points:[]};this._data.push(e),this._reset(),this._strokeUpdate(t),"function"==typeof this.onBegin&&this.onBegin(t)},t.prototype._strokeUpdate=function(t){var e=t.clientX,o=t.clientY,i=this._createPoint(e,o),n=this._data[this._data.length-1],s=n.points,r=s.length>0&&s[s.length-1],h=!!r&&i.distanceTo(r)<=this.minDistance,a=n.color;if(!r||!r||!h){var c=this._addPoint(i);r?c&&this._drawCurve({color:a,curve:c}):this._drawDot({color:a,point:i}),s.push({time:i.time,x:i.x,y:i.y})}},t.prototype._strokeEnd=function(t){this._strokeUpdate(t),"function"==typeof this.onEnd&&this.onEnd(t)},t.prototype._handleMouseEvents=function(){this._mouseButtonDown=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)},t.prototype._handleTouchEvents=function(){this.canvas.style.msTouchAction="none",this.canvas.style.touchAction="none",this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)},t.prototype._reset=function(){this._points=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor},t.prototype._createPoint=function(t,e){var o=this.canvas.getBoundingClientRect();return new Point(t-o.left,e-o.top,(new Date).getTime())},t.prototype._addPoint=function(t){var e=this._points;if(e.push(t),e.length>2){3===e.length&&e.unshift(e[0]);var o=this._calculateCurveWidths(e[1],e[2]),i=Bezier.fromPoints(e,o);return e.shift(),i}return null},t.prototype._calculateCurveWidths=function(t,e){var o=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,i=this._strokeWidth(o),n={end:i,start:this._lastWidth};return this._lastVelocity=o,this._lastWidth=i,n},t.prototype._strokeWidth=function(t){return Math.max(this.maxWidth/(t+1),this.minWidth)},t.prototype._drawCurveSegment=function(t,e,o){var i=this._ctx;i.moveTo(t,e),i.arc(t,e,o,0,2*Math.PI,!1),this._isEmpty=!1},t.prototype._drawCurve=function(t){var e=t.color,o=t.curve,i=this._ctx,n=o.endWidth-o.startWidth,s=2*Math.floor(o.length());i.beginPath(),i.fillStyle=e;for(var r=0;r<s;r+=1){var h=r/s,a=h*h,c=a*h,u=1-h,l=u*u,d=l*u,v=d*o.startPoint.x;v+=3*l*h*o.control1.x,v+=3*u*a*o.control2.x,v+=c*o.endPoint.x;var p=d*o.startPoint.y;p+=3*l*h*o.control1.y,p+=3*u*a*o.control2.y,p+=c*o.endPoint.y;var f=o.startWidth+c*n;this._drawCurveSegment(v,p,f)}i.closePath(),i.fill()},t.prototype._drawDot=function(t){var e=t.color,o=t.point,i=this._ctx,n="function"==typeof this.dotSize?this.dotSize():this.dotSize;i.beginPath(),this._drawCurveSegment(o.x,o.y,n),i.closePath(),i.fillStyle=e,i.fill()},t.prototype._fromData=function(t,e,o){for(var i=0,n=t;i<n.length;i++){var s=n[i],r=s.color,h=s.points;if(h.length>1)for(var a=0;a<h.length;a+=1){var c=h[a],u=new Point(c.x,c.y,c.time);this.penColor=r,0===a&&this._reset();var l=this._addPoint(u);l&&e({color:r,curve:l})}else this._reset(),o({color:r,point:h[0]})}},t.prototype._toSVG=function(){var t=this,e=this._data,o=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/o,n=this.canvas.height/o,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width",this.canvas.width.toString()),s.setAttribute("height",this.canvas.height.toString()),this._fromData(e,function(t){var e=t.color,o=t.curve,i=document.createElement("path");if(!(isNaN(o.control1.x)||isNaN(o.control1.y)||isNaN(o.control2.x)||isNaN(o.control2.y))){var n="M "+o.startPoint.x.toFixed(3)+","+o.startPoint.y.toFixed(3)+" C "+o.control1.x.toFixed(3)+","+o.control1.y.toFixed(3)+" "+o.control2.x.toFixed(3)+","+o.control2.y.toFixed(3)+" "+o.endPoint.x.toFixed(3)+","+o.endPoint.y.toFixed(3);i.setAttribute("d",n),i.setAttribute("stroke-width",(2.25*o.endWidth).toFixed(3)),i.setAttribute("stroke",e),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),s.appendChild(i)}},function(e){var o=e.color,i=e.point,n=document.createElement("circle"),r="function"==typeof t.dotSize?t.dotSize():t.dotSize;n.setAttribute("r",r.toString()),n.setAttribute("cx",i.x.toString()),n.setAttribute("cy",i.y.toString()),n.setAttribute("fill",o),s.appendChild(n)});var r='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 '+i+" "+n+'" width="'+i+'" height="'+n+'">',h=s.innerHTML;if(void 0===h){var a=document.createElement("dummy"),c=s.childNodes;a.innerHTML="";for(var u=0;u<c.length;u+=1)a.appendChild(c[u].cloneNode(!0));h=a.innerHTML}return"data:image/svg+xml;base64,"+btoa(r+h+"</svg>")},t}();module.exports=SignaturePad;
"use strict";var Point=function(){function t(t,e,o){this.x=t,this.y=e,this.time=o||Date.now()}return t.prototype.distanceTo=function(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))},t.prototype.equals=function(t){return this.x===t.x&&this.y===t.y&&this.time===t.time},t.prototype.velocityFrom=function(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0},t}(),Bezier=function(){function t(t,e,o,i,n,s){this.startPoint=t,this.control2=e,this.control1=o,this.endPoint=i,this.startWidth=n,this.endWidth=s}return t.fromPoints=function(e,o){var i=this.calculateControlPoints(e[0],e[1],e[2]).c2,n=this.calculateControlPoints(e[1],e[2],e[3]).c1;return new t(e[1],i,n,e[2],o.start,o.end)},t.calculateControlPoints=function(t,e,o){var i=t.x-e.x,n=t.y-e.y,s=e.x-o.x,r=e.y-o.y,h=(t.x+e.x)/2,a=(t.y+e.y)/2,c=(e.x+o.x)/2,u=(e.y+o.y)/2,d=Math.sqrt(i*i+n*n),l=Math.sqrt(s*s+r*r),v=l/(d+l),p=c+(h-c)*v,_=u+(a-u)*v,f=e.x-p,m=e.y-_;return{c1:new Point(h+f,a+m),c2:new Point(c+f,u+m)}},t.prototype.length=function(){for(var t,e,o=0,i=0;i<=10;i+=1){var n=i/10,s=this.point(n,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(n,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(i>0){var h=s-t,a=r-e;o+=Math.sqrt(h*h+a*a)}t=s,e=r}return o},t.prototype.point=function(t,e,o,i,n){return e*(1-t)*(1-t)*(1-t)+3*o*(1-t)*(1-t)*t+3*i*(1-t)*t*t+n*t*t*t},t}();function throttle(t,e){void 0===e&&(e=250);var o,i,n,s=0,r=null,h=function(){s=Date.now(),r=null,o=t.apply(i,n),r||(i=null,n=[])};return function(){for(var a=[],c=0;c<arguments.length;c++)a[c]=arguments[c];var u=Date.now(),d=e-(u-s);return i=this,n=a,d<=0||d>e?(r&&(clearTimeout(r),r=null),s=u,o=t.apply(i,n),r||(i=null,n=[])):r||(r=window.setTimeout(h,d)),o}}var SignaturePad=function(){function t(e,o){void 0===o&&(o={});var i=this;this.canvas=e,this.options=o,this._handleMouseDown=function(t){1===t.which&&(i._mouseButtonDown=!0,i._strokeBegin(t))},this._handleMouseMove=function(t){i._mouseButtonDown&&i._strokeMoveUpdate(t)},this._handleMouseUp=function(t){1===t.which&&i._mouseButtonDown&&(i._mouseButtonDown=!1,i._strokeEnd(t))},this._handleTouchStart=function(t){if(t.preventDefault(),1===t.targetTouches.length){var e=t.changedTouches[0];i._strokeBegin(e)}},this._handleTouchMove=function(t){t.preventDefault();var e=t.targetTouches[0];i._strokeMoveUpdate(e)},this._handleTouchEnd=function(t){if(t.target===i.canvas){t.preventDefault();var e=t.changedTouches[0];i._strokeEnd(e)}},this.velocityFilterWeight=o.velocityFilterWeight||.7,this.minWidth=o.minWidth||.5,this.maxWidth=o.maxWidth||2.5,this.throttle="throttle"in o?o.throttle:16,this.minDistance="minDistance"in o?o.minDistance:5,this.throttle?this._strokeMoveUpdate=throttle(t.prototype._strokeUpdate,this.throttle):this._strokeMoveUpdate=t.prototype._strokeUpdate,this.dotSize=o.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=o.penColor||"black",this.backgroundColor=o.backgroundColor||"rgba(0,0,0,0)",this.onBegin=o.onBegin,this.onEnd=o.onEnd,this._ctx=e.getContext("2d"),this.clear(),this.on()}return t.prototype.clear=function(){var t=this._ctx,e=this.canvas;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this._data=[],this._reset(),this._isEmpty=!0},t.prototype.fromDataURL=function(t,e,o){var i=this;void 0===e&&(e={});var n=new Image,s=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/s,h=e.height||this.canvas.height/s;this._reset(),n.onload=function(){i._ctx.drawImage(n,0,0,r,h),o&&o()},n.onerror=function(t){o&&o(t)},n.src=t,this._isEmpty=!1},t.prototype.toDataURL=function(t,e){switch(void 0===t&&(t="image/png"),t){case"image/svg+xml":return this._toSVG();default:return this.canvas.toDataURL(t,e)}},t.prototype.on=function(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",window.PointerEvent?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())},t.prototype.off=function(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.removeEventListener("pointerdown",this._handleMouseDown),this.canvas.removeEventListener("pointermove",this._handleMouseMove),document.removeEventListener("pointerup",this._handleMouseUp),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this.canvas.removeEventListener("touchend",this._handleTouchEnd)},t.prototype.isEmpty=function(){return this._isEmpty},t.prototype.fromData=function(t){var e=this;this.clear(),this._fromData(t,function(t){var o=t.color,i=t.curve;return e._drawCurve({color:o,curve:i})},function(t){var o=t.color,i=t.point;return e._drawDot({color:o,point:i})}),this._data=t},t.prototype.toData=function(){return this._data},t.prototype._strokeBegin=function(t){var e={color:this.penColor,points:[]};this._data.push(e),this._reset(),this._strokeUpdate(t),"function"==typeof this.onBegin&&this.onBegin(t)},t.prototype._strokeUpdate=function(t){var e=t.clientX,o=t.clientY,i=this._createPoint(e,o),n=this._data[this._data.length-1],s=n.points,r=s.length>0&&s[s.length-1],h=!!r&&i.distanceTo(r)<=this.minDistance,a=n.color;if(!r||!r||!h){var c=this._addPoint(i);r?c&&this._drawCurve({color:a,curve:c}):this._drawDot({color:a,point:i}),s.push({time:i.time,x:i.x,y:i.y})}},t.prototype._strokeEnd=function(t){this._strokeUpdate(t),"function"==typeof this.onEnd&&this.onEnd(t)},t.prototype._handlePointerEvents=function(){this._mouseButtonDown=!1,this.canvas.addEventListener("pointerdown",this._handleMouseDown),this.canvas.addEventListener("pointermove",this._handleMouseMove),document.addEventListener("pointerup",this._handleMouseUp)},t.prototype._handleMouseEvents=function(){this._mouseButtonDown=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)},t.prototype._handleTouchEvents=function(){this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)},t.prototype._reset=function(){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor},t.prototype._createPoint=function(t,e){var o=this.canvas.getBoundingClientRect();return new Point(t-o.left,e-o.top,(new Date).getTime())},t.prototype._addPoint=function(t){var e=this._lastPoints;if(e.push(t),e.length>2){3===e.length&&e.unshift(e[0]);var o=this._calculateCurveWidths(e[1],e[2]),i=Bezier.fromPoints(e,o);return e.shift(),i}return null},t.prototype._calculateCurveWidths=function(t,e){var o=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,i=this._strokeWidth(o),n={end:i,start:this._lastWidth};return this._lastVelocity=o,this._lastWidth=i,n},t.prototype._strokeWidth=function(t){return Math.max(this.maxWidth/(t+1),this.minWidth)},t.prototype._drawCurveSegment=function(t,e,o){var i=this._ctx;i.moveTo(t,e),i.arc(t,e,o,0,2*Math.PI,!1),this._isEmpty=!1},t.prototype._drawCurve=function(t){var e=t.color,o=t.curve,i=this._ctx,n=o.endWidth-o.startWidth,s=2*Math.floor(o.length());i.beginPath(),i.fillStyle=e;for(var r=0;r<s;r+=1){var h=r/s,a=h*h,c=a*h,u=1-h,d=u*u,l=d*u,v=l*o.startPoint.x;v+=3*d*h*o.control1.x,v+=3*u*a*o.control2.x,v+=c*o.endPoint.x;var p=l*o.startPoint.y;p+=3*d*h*o.control1.y,p+=3*u*a*o.control2.y,p+=c*o.endPoint.y;var _=o.startWidth+c*n;this._drawCurveSegment(v,p,_)}i.closePath(),i.fill()},t.prototype._drawDot=function(t){var e=t.color,o=t.point,i=this._ctx,n="function"==typeof this.dotSize?this.dotSize():this.dotSize;i.beginPath(),this._drawCurveSegment(o.x,o.y,n),i.closePath(),i.fillStyle=e,i.fill()},t.prototype._fromData=function(t,e,o){for(var i=0,n=t;i<n.length;i++){var s=n[i],r=s.color,h=s.points;if(h.length>1)for(var a=0;a<h.length;a+=1){var c=h[a],u=new Point(c.x,c.y,c.time);this.penColor=r,0===a&&this._reset();var d=this._addPoint(u);d&&e({color:r,curve:d})}else this._reset(),o({color:r,point:h[0]})}},t.prototype._toSVG=function(){var t=this,e=this._data,o=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/o,n=this.canvas.height/o,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width",this.canvas.width.toString()),s.setAttribute("height",this.canvas.height.toString()),this._fromData(e,function(t){var e=t.color,o=t.curve,i=document.createElement("path");if(!(isNaN(o.control1.x)||isNaN(o.control1.y)||isNaN(o.control2.x)||isNaN(o.control2.y))){var n="M "+o.startPoint.x.toFixed(3)+","+o.startPoint.y.toFixed(3)+" C "+o.control1.x.toFixed(3)+","+o.control1.y.toFixed(3)+" "+o.control2.x.toFixed(3)+","+o.control2.y.toFixed(3)+" "+o.endPoint.x.toFixed(3)+","+o.endPoint.y.toFixed(3);i.setAttribute("d",n),i.setAttribute("stroke-width",(2.25*o.endWidth).toFixed(3)),i.setAttribute("stroke",e),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),s.appendChild(i)}},function(e){var o=e.color,i=e.point,n=document.createElement("circle"),r="function"==typeof t.dotSize?t.dotSize():t.dotSize;n.setAttribute("r",r.toString()),n.setAttribute("cx",i.x.toString()),n.setAttribute("cy",i.y.toString()),n.setAttribute("fill",o),s.appendChild(n)});var r='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 '+i+" "+n+'" width="'+i+'" height="'+n+'">',h=s.innerHTML;if(void 0===h){var a=document.createElement("dummy"),c=s.childNodes;a.innerHTML="";for(var u=0;u<c.length;u+=1)a.appendChild(c[u].cloneNode(!0));h=a.innerHTML}return"data:image/svg+xml;base64,"+btoa(r+h+"</svg>")},t}();module.exports=SignaturePad;

140

dist/signature_pad.umd.js
/*!
* Signature Pad v3.0.0-beta.2 | https://github.com/szimek/signature_pad
* Signature Pad v3.0.0-beta.3 | https://github.com/szimek/signature_pad
* (c) 2018 Szymon Nowak | Released under the MIT license

@@ -130,3 +130,3 @@ */

else if (!timeout) {
timeout = setTimeout(later, remaining);
timeout = window.setTimeout(later, remaining);
}

@@ -183,4 +183,4 @@ return result;

this.maxWidth = options.maxWidth || 2.5;
this.throttle = ("throttle" in options ? options.throttle : 16);
this.minDistance = ("minDistance" in options ? options.minDistance : 5);
this.throttle = ('throttle' in options ? options.throttle : 16);
this.minDistance = ('minDistance' in options ? options.minDistance : 5);
if (this.throttle) {

@@ -195,7 +195,7 @@ this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);

};
this.penColor = options.penColor || "black";
this.backgroundColor = options.backgroundColor || "rgba(0,0,0,0)";
this.penColor = options.penColor || 'black';
this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
this.onBegin = options.onBegin;
this.onEnd = options.onEnd;
this._ctx = canvas.getContext("2d");
this._ctx = canvas.getContext('2d');
this.clear();

@@ -237,5 +237,5 @@ this.on();

SignaturePad.prototype.toDataURL = function (type, encoderOptions) {
if (type === void 0) { type = "image/png"; }
if (type === void 0) { type = 'image/png'; }
switch (type) {
case "image/svg+xml":
case 'image/svg+xml':
return this._toSVG();

@@ -247,16 +247,26 @@ default:

SignaturePad.prototype.on = function () {
this._handleMouseEvents();
if ("ontouchstart" in window) {
this._handleTouchEvents();
this.canvas.style.touchAction = 'none';
this.canvas.style.msTouchAction = 'none';
if (window.PointerEvent) {
this._handlePointerEvents();
}
else {
this._handleMouseEvents();
if ('ontouchstart' in window) {
this._handleTouchEvents();
}
}
};
SignaturePad.prototype.off = function () {
this.canvas.style.msTouchAction = "auto";
this.canvas.style.touchAction = "auto";
this.canvas.removeEventListener("mousedown", this._handleMouseDown);
this.canvas.removeEventListener("mousemove", this._handleMouseMove);
document.removeEventListener("mouseup", this._handleMouseUp);
this.canvas.removeEventListener("touchstart", this._handleTouchStart);
this.canvas.removeEventListener("touchmove", this._handleTouchMove);
this.canvas.removeEventListener("touchend", this._handleTouchEnd);
this.canvas.style.touchAction = 'auto';
this.canvas.style.msTouchAction = 'auto';
this.canvas.removeEventListener('pointerdown', this._handleMouseDown);
this.canvas.removeEventListener('pointermove', this._handleMouseMove);
document.removeEventListener('pointerup', this._handleMouseUp);
this.canvas.removeEventListener('mousedown', this._handleMouseDown);
this.canvas.removeEventListener('mousemove', this._handleMouseMove);
document.removeEventListener('mouseup', this._handleMouseUp);
this.canvas.removeEventListener('touchstart', this._handleTouchStart);
this.canvas.removeEventListener('touchmove', this._handleTouchMove);
this.canvas.removeEventListener('touchend', this._handleTouchEnd);
};

@@ -289,3 +299,3 @@ SignaturePad.prototype.isEmpty = function () {

this._strokeUpdate(event);
if (typeof this.onBegin === "function") {
if (typeof this.onBegin === 'function') {
this.onBegin(event);

@@ -320,21 +330,25 @@ }

this._strokeUpdate(event);
if (typeof this.onEnd === "function") {
if (typeof this.onEnd === 'function') {
this.onEnd(event);
}
};
SignaturePad.prototype._handlePointerEvents = function () {
this._mouseButtonDown = false;
this.canvas.addEventListener('pointerdown', this._handleMouseDown);
this.canvas.addEventListener('pointermove', this._handleMouseMove);
document.addEventListener('pointerup', this._handleMouseUp);
};
SignaturePad.prototype._handleMouseEvents = function () {
this._mouseButtonDown = false;
this.canvas.addEventListener("mousedown", this._handleMouseDown);
this.canvas.addEventListener("mousemove", this._handleMouseMove);
document.addEventListener("mouseup", this._handleMouseUp);
this.canvas.addEventListener('mousedown', this._handleMouseDown);
this.canvas.addEventListener('mousemove', this._handleMouseMove);
document.addEventListener('mouseup', this._handleMouseUp);
};
SignaturePad.prototype._handleTouchEvents = function () {
this.canvas.style.msTouchAction = "none";
this.canvas.style.touchAction = "none";
this.canvas.addEventListener("touchstart", this._handleTouchStart);
this.canvas.addEventListener("touchmove", this._handleTouchMove);
this.canvas.addEventListener("touchend", this._handleTouchEnd);
this.canvas.addEventListener('touchstart', this._handleTouchStart);
this.canvas.addEventListener('touchmove', this._handleTouchMove);
this.canvas.addEventListener('touchend', this._handleTouchEnd);
};
SignaturePad.prototype._reset = function () {
this._points = [];
this._lastPoints = [];
this._lastVelocity = 0;

@@ -349,11 +363,11 @@ this._lastWidth = (this.minWidth + this.maxWidth) / 2;

SignaturePad.prototype._addPoint = function (point) {
var _points = this._points;
_points.push(point);
if (_points.length > 2) {
if (_points.length === 3) {
_points.unshift(_points[0]);
var _lastPoints = this._lastPoints;
_lastPoints.push(point);
if (_lastPoints.length > 2) {
if (_lastPoints.length === 3) {
_lastPoints.unshift(_lastPoints[0]);
}
var widths = this._calculateCurveWidths(_points[1], _points[2]);
var curve = Bezier.fromPoints(_points, widths);
_points.shift();
var widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
var curve = Bezier.fromPoints(_lastPoints, widths);
_lastPoints.shift();
return curve;

@@ -415,3 +429,3 @@ }

var ctx = this._ctx;
var width = typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
ctx.beginPath();

@@ -458,8 +472,8 @@ this._drawCurveSegment(point.x, point.y, width);

var maxY = this.canvas.height / ratio;
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", this.canvas.width.toString());
svg.setAttribute("height", this.canvas.height.toString());
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', this.canvas.width.toString());
svg.setAttribute('height', this.canvas.height.toString());
this._fromData(pointGroups, function (_a) {
var color = _a.color, curve = _a.curve;
var path = document.createElement("path");
var path = document.createElement('path');
if (!isNaN(curve.control1.x) &&

@@ -473,7 +487,7 @@ !isNaN(curve.control1.y) &&

+ (curve.endPoint.x.toFixed(3) + "," + curve.endPoint.y.toFixed(3));
path.setAttribute("d", attr);
path.setAttribute("stroke-width", (curve.endWidth * 2.25).toFixed(3));
path.setAttribute("stroke", color);
path.setAttribute("fill", "none");
path.setAttribute("stroke-linecap", "round");
path.setAttribute('d', attr);
path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
path.setAttribute('stroke', color);
path.setAttribute('fill', 'none');
path.setAttribute('stroke-linecap', 'round');
svg.appendChild(path);

@@ -483,23 +497,23 @@ }

var color = _a.color, point = _a.point;
var circle = document.createElement("circle");
var dotSize = typeof _this.dotSize === "function" ? _this.dotSize() : _this.dotSize;
circle.setAttribute("r", dotSize.toString());
circle.setAttribute("cx", point.x.toString());
circle.setAttribute("cy", point.y.toString());
circle.setAttribute("fill", color);
var circle = document.createElement('circle');
var dotSize = typeof _this.dotSize === 'function' ? _this.dotSize() : _this.dotSize;
circle.setAttribute('r', dotSize.toString());
circle.setAttribute('cx', point.x.toString());
circle.setAttribute('cy', point.y.toString());
circle.setAttribute('fill', color);
svg.appendChild(circle);
});
var prefix = "data:image/svg+xml;base64,";
var header = "<svg"
+ " xmlns=\"http://www.w3.org/2000/svg\""
+ " xmlns:xlink=\"http://www.w3.org/1999/xlink\""
var prefix = 'data:image/svg+xml;base64,';
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;
if (body === undefined) {
var dummy = document.createElement("dummy");
var dummy = document.createElement('dummy');
var nodes = svg.childNodes;
dummy.innerHTML = "";
dummy.innerHTML = '';
for (var i = 0; i < nodes.length; i += 1) {

@@ -510,3 +524,3 @@ dummy.appendChild(nodes[i].cloneNode(true));

}
var footer = "</svg>";
var footer = '</svg>';
var data = header + body + footer;

@@ -513,0 +527,0 @@ return prefix + btoa(data);

2

dist/signature_pad.umd.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.SignaturePad=e()}(this,function(){"use strict";var t=function(){function t(t,e,o){this.x=t,this.y=e,this.time=o||Date.now()}return t.prototype.distanceTo=function(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))},t.prototype.equals=function(t){return this.x===t.x&&this.y===t.y&&this.time===t.time},t.prototype.velocityFrom=function(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0},t}(),e=function(){function e(t,e,o,i,n,s){this.startPoint=t,this.control2=e,this.control1=o,this.endPoint=i,this.startWidth=n,this.endWidth=s}return e.fromPoints=function(t,o){var i=this.calculateControlPoints(t[0],t[1],t[2]).c2,n=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new e(t[1],i,n,t[2],o.start,o.end)},e.calculateControlPoints=function(e,o,i){var n=e.x-o.x,s=e.y-o.y,r=o.x-i.x,h=o.y-i.y,a=(e.x+o.x)/2,c=(e.y+o.y)/2,u=(o.x+i.x)/2,l=(o.y+i.y)/2,d=Math.sqrt(n*n+s*s),v=Math.sqrt(r*r+h*h),p=v/(d+v),f=u+(a-u)*p,_=l+(c-l)*p,y=o.x-f,m=o.y-_;return{c1:new t(a+y,c+m),c2:new t(u+y,l+m)}},e.prototype.length=function(){for(var t,e,o=0,i=0;i<=10;i+=1){var n=i/10,s=this.point(n,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(n,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(i>0){var h=s-t,a=r-e;o+=Math.sqrt(h*h+a*a)}t=s,e=r}return o},e.prototype.point=function(t,e,o,i,n){return e*(1-t)*(1-t)*(1-t)+3*o*(1-t)*(1-t)*t+3*i*(1-t)*t*t+n*t*t*t},e}();return function(){function o(t,e){void 0===e&&(e={});var i=this;this.canvas=t,this.options=e,this._handleMouseDown=function(t){1===t.which&&(i._mouseButtonDown=!0,i._strokeBegin(t))},this._handleMouseMove=function(t){i._mouseButtonDown&&i._strokeMoveUpdate(t)},this._handleMouseUp=function(t){1===t.which&&i._mouseButtonDown&&(i._mouseButtonDown=!1,i._strokeEnd(t))},this._handleTouchStart=function(t){if(t.preventDefault(),1===t.targetTouches.length){var e=t.changedTouches[0];i._strokeBegin(e)}},this._handleTouchMove=function(t){t.preventDefault();var e=t.targetTouches[0];i._strokeMoveUpdate(e)},this._handleTouchEnd=function(t){if(t.target===i.canvas){t.preventDefault();var e=t.changedTouches[0];i._strokeEnd(e)}},this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle="throttle"in e?e.throttle:16,this.minDistance="minDistance"in e?e.minDistance:5,this.throttle?this._strokeMoveUpdate=function(t,e){void 0===e&&(e=250);var o,i,n,s=0,r=null,h=function(){s=Date.now(),r=null,o=t.apply(i,n),r||(i=null,n=[])};return function(){for(var a=[],c=0;c<arguments.length;c++)a[c]=arguments[c];var u=Date.now(),l=e-(u-s);return i=this,n=a,l<=0||l>e?(r&&(clearTimeout(r),r=null),s=u,o=t.apply(i,n),r||(i=null,n=[])):r||(r=setTimeout(h,l)),o}}(o.prototype._strokeUpdate,this.throttle):this._strokeMoveUpdate=o.prototype._strokeUpdate,this.dotSize=e.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.onBegin=e.onBegin,this.onEnd=e.onEnd,this._ctx=t.getContext("2d"),this.clear(),this.on()}return o.prototype.clear=function(){var t=this._ctx,e=this.canvas;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this._data=[],this._reset(),this._isEmpty=!0},o.prototype.fromDataURL=function(t,e,o){var i=this;void 0===e&&(e={});var n=new Image,s=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/s,h=e.height||this.canvas.height/s;this._reset(),n.onload=function(){i._ctx.drawImage(n,0,0,r,h),o&&o()},n.onerror=function(t){o&&o(t)},n.src=t,this._isEmpty=!1},o.prototype.toDataURL=function(t,e){switch(void 0===t&&(t="image/png"),t){case"image/svg+xml":return this._toSVG();default:return this.canvas.toDataURL(t,e)}},o.prototype.on=function(){this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents()},o.prototype.off=function(){this.canvas.style.msTouchAction="auto",this.canvas.style.touchAction="auto",this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this.canvas.removeEventListener("touchend",this._handleTouchEnd)},o.prototype.isEmpty=function(){return this._isEmpty},o.prototype.fromData=function(t){var e=this;this.clear(),this._fromData(t,function(t){var o=t.color,i=t.curve;return e._drawCurve({color:o,curve:i})},function(t){var o=t.color,i=t.point;return e._drawDot({color:o,point:i})}),this._data=t},o.prototype.toData=function(){return this._data},o.prototype._strokeBegin=function(t){var e={color:this.penColor,points:[]};this._data.push(e),this._reset(),this._strokeUpdate(t),"function"==typeof this.onBegin&&this.onBegin(t)},o.prototype._strokeUpdate=function(t){var e=t.clientX,o=t.clientY,i=this._createPoint(e,o),n=this._data[this._data.length-1],s=n.points,r=s.length>0&&s[s.length-1],h=!!r&&i.distanceTo(r)<=this.minDistance,a=n.color;if(!r||!r||!h){var c=this._addPoint(i);r?c&&this._drawCurve({color:a,curve:c}):this._drawDot({color:a,point:i}),s.push({time:i.time,x:i.x,y:i.y})}},o.prototype._strokeEnd=function(t){this._strokeUpdate(t),"function"==typeof this.onEnd&&this.onEnd(t)},o.prototype._handleMouseEvents=function(){this._mouseButtonDown=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)},o.prototype._handleTouchEvents=function(){this.canvas.style.msTouchAction="none",this.canvas.style.touchAction="none",this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)},o.prototype._reset=function(){this._points=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor},o.prototype._createPoint=function(e,o){var i=this.canvas.getBoundingClientRect();return new t(e-i.left,o-i.top,(new Date).getTime())},o.prototype._addPoint=function(t){var o=this._points;if(o.push(t),o.length>2){3===o.length&&o.unshift(o[0]);var i=this._calculateCurveWidths(o[1],o[2]),n=e.fromPoints(o,i);return o.shift(),n}return null},o.prototype._calculateCurveWidths=function(t,e){var o=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,i=this._strokeWidth(o),n={end:i,start:this._lastWidth};return this._lastVelocity=o,this._lastWidth=i,n},o.prototype._strokeWidth=function(t){return Math.max(this.maxWidth/(t+1),this.minWidth)},o.prototype._drawCurveSegment=function(t,e,o){var i=this._ctx;i.moveTo(t,e),i.arc(t,e,o,0,2*Math.PI,!1),this._isEmpty=!1},o.prototype._drawCurve=function(t){var e=t.color,o=t.curve,i=this._ctx,n=o.endWidth-o.startWidth,s=2*Math.floor(o.length());i.beginPath(),i.fillStyle=e;for(var r=0;r<s;r+=1){var h=r/s,a=h*h,c=a*h,u=1-h,l=u*u,d=l*u,v=d*o.startPoint.x;v+=3*l*h*o.control1.x,v+=3*u*a*o.control2.x,v+=c*o.endPoint.x;var p=d*o.startPoint.y;p+=3*l*h*o.control1.y,p+=3*u*a*o.control2.y,p+=c*o.endPoint.y;var f=o.startWidth+c*n;this._drawCurveSegment(v,p,f)}i.closePath(),i.fill()},o.prototype._drawDot=function(t){var e=t.color,o=t.point,i=this._ctx,n="function"==typeof this.dotSize?this.dotSize():this.dotSize;i.beginPath(),this._drawCurveSegment(o.x,o.y,n),i.closePath(),i.fillStyle=e,i.fill()},o.prototype._fromData=function(e,o,i){for(var n=0,s=e;n<s.length;n++){var r=s[n],h=r.color,a=r.points;if(a.length>1)for(var c=0;c<a.length;c+=1){var u=a[c],l=new t(u.x,u.y,u.time);this.penColor=h,0===c&&this._reset();var d=this._addPoint(l);d&&o({color:h,curve:d})}else this._reset(),i({color:h,point:a[0]})}},o.prototype._toSVG=function(){var t=this,e=this._data,o=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/o,n=this.canvas.height/o,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width",this.canvas.width.toString()),s.setAttribute("height",this.canvas.height.toString()),this._fromData(e,function(t){var e=t.color,o=t.curve,i=document.createElement("path");if(!(isNaN(o.control1.x)||isNaN(o.control1.y)||isNaN(o.control2.x)||isNaN(o.control2.y))){var n="M "+o.startPoint.x.toFixed(3)+","+o.startPoint.y.toFixed(3)+" C "+o.control1.x.toFixed(3)+","+o.control1.y.toFixed(3)+" "+o.control2.x.toFixed(3)+","+o.control2.y.toFixed(3)+" "+o.endPoint.x.toFixed(3)+","+o.endPoint.y.toFixed(3);i.setAttribute("d",n),i.setAttribute("stroke-width",(2.25*o.endWidth).toFixed(3)),i.setAttribute("stroke",e),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),s.appendChild(i)}},function(e){var o=e.color,i=e.point,n=document.createElement("circle"),r="function"==typeof t.dotSize?t.dotSize():t.dotSize;n.setAttribute("r",r.toString()),n.setAttribute("cx",i.x.toString()),n.setAttribute("cy",i.y.toString()),n.setAttribute("fill",o),s.appendChild(n)});var r='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 '+i+" "+n+'" width="'+i+'" height="'+n+'">',h=s.innerHTML;if(void 0===h){var a=document.createElement("dummy"),c=s.childNodes;a.innerHTML="";for(var u=0;u<c.length;u+=1)a.appendChild(c[u].cloneNode(!0));h=a.innerHTML}return"data:image/svg+xml;base64,"+btoa(r+h+"</svg>")},o}()});
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.SignaturePad=e()}(this,function(){"use strict";var t=function(){function t(t,e,o){this.x=t,this.y=e,this.time=o||Date.now()}return t.prototype.distanceTo=function(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))},t.prototype.equals=function(t){return this.x===t.x&&this.y===t.y&&this.time===t.time},t.prototype.velocityFrom=function(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0},t}(),e=function(){function e(t,e,o,n,i,s){this.startPoint=t,this.control2=e,this.control1=o,this.endPoint=n,this.startWidth=i,this.endWidth=s}return e.fromPoints=function(t,o){var n=this.calculateControlPoints(t[0],t[1],t[2]).c2,i=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new e(t[1],n,i,t[2],o.start,o.end)},e.calculateControlPoints=function(e,o,n){var i=e.x-o.x,s=e.y-o.y,r=o.x-n.x,h=o.y-n.y,a=(e.x+o.x)/2,c=(e.y+o.y)/2,u=(o.x+n.x)/2,d=(o.y+n.y)/2,l=Math.sqrt(i*i+s*s),v=Math.sqrt(r*r+h*h),p=v/(l+v),f=u+(a-u)*p,_=d+(c-d)*p,m=o.x-f,y=o.y-_;return{c1:new t(a+m,c+y),c2:new t(u+m,d+y)}},e.prototype.length=function(){for(var t,e,o=0,n=0;n<=10;n+=1){var i=n/10,s=this.point(i,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(i,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){var h=s-t,a=r-e;o+=Math.sqrt(h*h+a*a)}t=s,e=r}return o},e.prototype.point=function(t,e,o,n,i){return e*(1-t)*(1-t)*(1-t)+3*o*(1-t)*(1-t)*t+3*n*(1-t)*t*t+i*t*t*t},e}();return function(){function o(t,e){void 0===e&&(e={});var n=this;this.canvas=t,this.options=e,this._handleMouseDown=function(t){1===t.which&&(n._mouseButtonDown=!0,n._strokeBegin(t))},this._handleMouseMove=function(t){n._mouseButtonDown&&n._strokeMoveUpdate(t)},this._handleMouseUp=function(t){1===t.which&&n._mouseButtonDown&&(n._mouseButtonDown=!1,n._strokeEnd(t))},this._handleTouchStart=function(t){if(t.preventDefault(),1===t.targetTouches.length){var e=t.changedTouches[0];n._strokeBegin(e)}},this._handleTouchMove=function(t){t.preventDefault();var e=t.targetTouches[0];n._strokeMoveUpdate(e)},this._handleTouchEnd=function(t){if(t.target===n.canvas){t.preventDefault();var e=t.changedTouches[0];n._strokeEnd(e)}},this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle="throttle"in e?e.throttle:16,this.minDistance="minDistance"in e?e.minDistance:5,this.throttle?this._strokeMoveUpdate=function(t,e){void 0===e&&(e=250);var o,n,i,s=0,r=null,h=function(){s=Date.now(),r=null,o=t.apply(n,i),r||(n=null,i=[])};return function(){for(var a=[],c=0;c<arguments.length;c++)a[c]=arguments[c];var u=Date.now(),d=e-(u-s);return n=this,i=a,d<=0||d>e?(r&&(clearTimeout(r),r=null),s=u,o=t.apply(n,i),r||(n=null,i=[])):r||(r=window.setTimeout(h,d)),o}}(o.prototype._strokeUpdate,this.throttle):this._strokeMoveUpdate=o.prototype._strokeUpdate,this.dotSize=e.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.onBegin=e.onBegin,this.onEnd=e.onEnd,this._ctx=t.getContext("2d"),this.clear(),this.on()}return o.prototype.clear=function(){var t=this._ctx,e=this.canvas;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this._data=[],this._reset(),this._isEmpty=!0},o.prototype.fromDataURL=function(t,e,o){var n=this;void 0===e&&(e={});var i=new Image,s=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/s,h=e.height||this.canvas.height/s;this._reset(),i.onload=function(){n._ctx.drawImage(i,0,0,r,h),o&&o()},i.onerror=function(t){o&&o(t)},i.src=t,this._isEmpty=!1},o.prototype.toDataURL=function(t,e){switch(void 0===t&&(t="image/png"),t){case"image/svg+xml":return this._toSVG();default:return this.canvas.toDataURL(t,e)}},o.prototype.on=function(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",window.PointerEvent?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())},o.prototype.off=function(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.removeEventListener("pointerdown",this._handleMouseDown),this.canvas.removeEventListener("pointermove",this._handleMouseMove),document.removeEventListener("pointerup",this._handleMouseUp),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this.canvas.removeEventListener("touchend",this._handleTouchEnd)},o.prototype.isEmpty=function(){return this._isEmpty},o.prototype.fromData=function(t){var e=this;this.clear(),this._fromData(t,function(t){var o=t.color,n=t.curve;return e._drawCurve({color:o,curve:n})},function(t){var o=t.color,n=t.point;return e._drawDot({color:o,point:n})}),this._data=t},o.prototype.toData=function(){return this._data},o.prototype._strokeBegin=function(t){var e={color:this.penColor,points:[]};this._data.push(e),this._reset(),this._strokeUpdate(t),"function"==typeof this.onBegin&&this.onBegin(t)},o.prototype._strokeUpdate=function(t){var e=t.clientX,o=t.clientY,n=this._createPoint(e,o),i=this._data[this._data.length-1],s=i.points,r=s.length>0&&s[s.length-1],h=!!r&&n.distanceTo(r)<=this.minDistance,a=i.color;if(!r||!r||!h){var c=this._addPoint(n);r?c&&this._drawCurve({color:a,curve:c}):this._drawDot({color:a,point:n}),s.push({time:n.time,x:n.x,y:n.y})}},o.prototype._strokeEnd=function(t){this._strokeUpdate(t),"function"==typeof this.onEnd&&this.onEnd(t)},o.prototype._handlePointerEvents=function(){this._mouseButtonDown=!1,this.canvas.addEventListener("pointerdown",this._handleMouseDown),this.canvas.addEventListener("pointermove",this._handleMouseMove),document.addEventListener("pointerup",this._handleMouseUp)},o.prototype._handleMouseEvents=function(){this._mouseButtonDown=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)},o.prototype._handleTouchEvents=function(){this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)},o.prototype._reset=function(){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor},o.prototype._createPoint=function(e,o){var n=this.canvas.getBoundingClientRect();return new t(e-n.left,o-n.top,(new Date).getTime())},o.prototype._addPoint=function(t){var o=this._lastPoints;if(o.push(t),o.length>2){3===o.length&&o.unshift(o[0]);var n=this._calculateCurveWidths(o[1],o[2]),i=e.fromPoints(o,n);return o.shift(),i}return null},o.prototype._calculateCurveWidths=function(t,e){var o=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,n=this._strokeWidth(o),i={end:n,start:this._lastWidth};return this._lastVelocity=o,this._lastWidth=n,i},o.prototype._strokeWidth=function(t){return Math.max(this.maxWidth/(t+1),this.minWidth)},o.prototype._drawCurveSegment=function(t,e,o){var n=this._ctx;n.moveTo(t,e),n.arc(t,e,o,0,2*Math.PI,!1),this._isEmpty=!1},o.prototype._drawCurve=function(t){var e=t.color,o=t.curve,n=this._ctx,i=o.endWidth-o.startWidth,s=2*Math.floor(o.length());n.beginPath(),n.fillStyle=e;for(var r=0;r<s;r+=1){var h=r/s,a=h*h,c=a*h,u=1-h,d=u*u,l=d*u,v=l*o.startPoint.x;v+=3*d*h*o.control1.x,v+=3*u*a*o.control2.x,v+=c*o.endPoint.x;var p=l*o.startPoint.y;p+=3*d*h*o.control1.y,p+=3*u*a*o.control2.y,p+=c*o.endPoint.y;var f=o.startWidth+c*i;this._drawCurveSegment(v,p,f)}n.closePath(),n.fill()},o.prototype._drawDot=function(t){var e=t.color,o=t.point,n=this._ctx,i="function"==typeof this.dotSize?this.dotSize():this.dotSize;n.beginPath(),this._drawCurveSegment(o.x,o.y,i),n.closePath(),n.fillStyle=e,n.fill()},o.prototype._fromData=function(e,o,n){for(var i=0,s=e;i<s.length;i++){var r=s[i],h=r.color,a=r.points;if(a.length>1)for(var c=0;c<a.length;c+=1){var u=a[c],d=new t(u.x,u.y,u.time);this.penColor=h,0===c&&this._reset();var l=this._addPoint(d);l&&o({color:h,curve:l})}else this._reset(),n({color:h,point:a[0]})}},o.prototype._toSVG=function(){var t=this,e=this._data,o=Math.max(window.devicePixelRatio||1,1),n=this.canvas.width/o,i=this.canvas.height/o,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width",this.canvas.width.toString()),s.setAttribute("height",this.canvas.height.toString()),this._fromData(e,function(t){var e=t.color,o=t.curve,n=document.createElement("path");if(!(isNaN(o.control1.x)||isNaN(o.control1.y)||isNaN(o.control2.x)||isNaN(o.control2.y))){var i="M "+o.startPoint.x.toFixed(3)+","+o.startPoint.y.toFixed(3)+" C "+o.control1.x.toFixed(3)+","+o.control1.y.toFixed(3)+" "+o.control2.x.toFixed(3)+","+o.control2.y.toFixed(3)+" "+o.endPoint.x.toFixed(3)+","+o.endPoint.y.toFixed(3);n.setAttribute("d",i),n.setAttribute("stroke-width",(2.25*o.endWidth).toFixed(3)),n.setAttribute("stroke",e),n.setAttribute("fill","none"),n.setAttribute("stroke-linecap","round"),s.appendChild(n)}},function(e){var o=e.color,n=e.point,i=document.createElement("circle"),r="function"==typeof t.dotSize?t.dotSize():t.dotSize;i.setAttribute("r",r.toString()),i.setAttribute("cx",n.x.toString()),i.setAttribute("cy",n.y.toString()),i.setAttribute("fill",o),s.appendChild(i)});var r='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 '+n+" "+i+'" width="'+n+'" height="'+i+'">',h=s.innerHTML;if(void 0===h){var a=document.createElement("dummy"),c=s.childNodes;a.innerHTML="";for(var u=0;u<c.length;u+=1)a.appendChild(c[u].cloneNode(!0));h=a.innerHTML}return"data:image/svg+xml;base64,"+btoa(r+h+"</svg>")},o}()});

6

dist/types/bezier.d.ts

@@ -1,2 +0,2 @@

import { IBasicPoint, Point } from "./point";
import { IBasicPoint, Point } from './point';
export declare class Bezier {

@@ -13,6 +13,6 @@ startPoint: Point;

}): Bezier;
private static calculateControlPoints(s1, s2, s3);
private static calculateControlPoints;
constructor(startPoint: Point, control2: IBasicPoint, control1: IBasicPoint, endPoint: Point, startWidth: number, endWidth: number);
length(): number;
private point(t, start, c1, c2, end);
private point;
}

40

dist/types/signature_pad.d.ts

@@ -1,2 +0,7 @@

import { IBasicPoint } from "./point";
import { IBasicPoint } from './point';
declare global {
interface Window {
PointerEvent: typeof PointerEvent;
}
}
export interface IOptions {

@@ -34,3 +39,3 @@ dotSize?: number | (() => number);

private _isEmpty;
private _points;
private _lastPoints;
private _data;

@@ -59,17 +64,18 @@ private _lastVelocity;

private _handleTouchEnd;
private _strokeBegin(event);
private _strokeUpdate(event);
private _strokeEnd(event);
private _handleMouseEvents();
private _handleTouchEvents();
private _reset();
private _createPoint(x, y);
private _addPoint(point);
private _calculateCurveWidths(startPoint, endPoint);
private _strokeWidth(velocity);
private _drawCurveSegment(x, y, width);
private _drawCurve({color, curve});
private _drawDot({color, point});
private _fromData(pointGroups, drawCurve, drawDot);
private _toSVG();
private _strokeBegin;
private _strokeUpdate;
private _strokeEnd;
private _handlePointerEvents;
private _handleMouseEvents;
private _handleTouchEvents;
private _reset;
private _createPoint;
private _addPoint;
private _calculateCurveWidths;
private _strokeWidth;
private _drawCurveSegment;
private _drawCurve;
private _drawDot;
private _fromData;
private _toSVG;
}

22

docs/js/app.js

@@ -43,14 +43,18 @@ var wrapper = document.getElementById("signature-pad");

function download(dataURL, filename) {
var blob = dataURLToBlob(dataURL);
var url = window.URL.createObjectURL(blob);
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
window.open(dataURL);
} else {
var blob = dataURLToBlob(dataURL);
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
window.URL.revokeObjectURL(url);
}
}

@@ -57,0 +61,0 @@

140

docs/js/signature_pad.umd.js
/*!
* Signature Pad v3.0.0-beta.2 | https://github.com/szimek/signature_pad
* Signature Pad v3.0.0-beta.3 | https://github.com/szimek/signature_pad
* (c) 2018 Szymon Nowak | Released under the MIT license

@@ -130,3 +130,3 @@ */

else if (!timeout) {
timeout = setTimeout(later, remaining);
timeout = window.setTimeout(later, remaining);
}

@@ -183,4 +183,4 @@ return result;

this.maxWidth = options.maxWidth || 2.5;
this.throttle = ("throttle" in options ? options.throttle : 16);
this.minDistance = ("minDistance" in options ? options.minDistance : 5);
this.throttle = ('throttle' in options ? options.throttle : 16);
this.minDistance = ('minDistance' in options ? options.minDistance : 5);
if (this.throttle) {

@@ -195,7 +195,7 @@ this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);

};
this.penColor = options.penColor || "black";
this.backgroundColor = options.backgroundColor || "rgba(0,0,0,0)";
this.penColor = options.penColor || 'black';
this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
this.onBegin = options.onBegin;
this.onEnd = options.onEnd;
this._ctx = canvas.getContext("2d");
this._ctx = canvas.getContext('2d');
this.clear();

@@ -237,5 +237,5 @@ this.on();

SignaturePad.prototype.toDataURL = function (type, encoderOptions) {
if (type === void 0) { type = "image/png"; }
if (type === void 0) { type = 'image/png'; }
switch (type) {
case "image/svg+xml":
case 'image/svg+xml':
return this._toSVG();

@@ -247,16 +247,26 @@ default:

SignaturePad.prototype.on = function () {
this._handleMouseEvents();
if ("ontouchstart" in window) {
this._handleTouchEvents();
this.canvas.style.touchAction = 'none';
this.canvas.style.msTouchAction = 'none';
if (window.PointerEvent) {
this._handlePointerEvents();
}
else {
this._handleMouseEvents();
if ('ontouchstart' in window) {
this._handleTouchEvents();
}
}
};
SignaturePad.prototype.off = function () {
this.canvas.style.msTouchAction = "auto";
this.canvas.style.touchAction = "auto";
this.canvas.removeEventListener("mousedown", this._handleMouseDown);
this.canvas.removeEventListener("mousemove", this._handleMouseMove);
document.removeEventListener("mouseup", this._handleMouseUp);
this.canvas.removeEventListener("touchstart", this._handleTouchStart);
this.canvas.removeEventListener("touchmove", this._handleTouchMove);
this.canvas.removeEventListener("touchend", this._handleTouchEnd);
this.canvas.style.touchAction = 'auto';
this.canvas.style.msTouchAction = 'auto';
this.canvas.removeEventListener('pointerdown', this._handleMouseDown);
this.canvas.removeEventListener('pointermove', this._handleMouseMove);
document.removeEventListener('pointerup', this._handleMouseUp);
this.canvas.removeEventListener('mousedown', this._handleMouseDown);
this.canvas.removeEventListener('mousemove', this._handleMouseMove);
document.removeEventListener('mouseup', this._handleMouseUp);
this.canvas.removeEventListener('touchstart', this._handleTouchStart);
this.canvas.removeEventListener('touchmove', this._handleTouchMove);
this.canvas.removeEventListener('touchend', this._handleTouchEnd);
};

@@ -289,3 +299,3 @@ SignaturePad.prototype.isEmpty = function () {

this._strokeUpdate(event);
if (typeof this.onBegin === "function") {
if (typeof this.onBegin === 'function') {
this.onBegin(event);

@@ -320,21 +330,25 @@ }

this._strokeUpdate(event);
if (typeof this.onEnd === "function") {
if (typeof this.onEnd === 'function') {
this.onEnd(event);
}
};
SignaturePad.prototype._handlePointerEvents = function () {
this._mouseButtonDown = false;
this.canvas.addEventListener('pointerdown', this._handleMouseDown);
this.canvas.addEventListener('pointermove', this._handleMouseMove);
document.addEventListener('pointerup', this._handleMouseUp);
};
SignaturePad.prototype._handleMouseEvents = function () {
this._mouseButtonDown = false;
this.canvas.addEventListener("mousedown", this._handleMouseDown);
this.canvas.addEventListener("mousemove", this._handleMouseMove);
document.addEventListener("mouseup", this._handleMouseUp);
this.canvas.addEventListener('mousedown', this._handleMouseDown);
this.canvas.addEventListener('mousemove', this._handleMouseMove);
document.addEventListener('mouseup', this._handleMouseUp);
};
SignaturePad.prototype._handleTouchEvents = function () {
this.canvas.style.msTouchAction = "none";
this.canvas.style.touchAction = "none";
this.canvas.addEventListener("touchstart", this._handleTouchStart);
this.canvas.addEventListener("touchmove", this._handleTouchMove);
this.canvas.addEventListener("touchend", this._handleTouchEnd);
this.canvas.addEventListener('touchstart', this._handleTouchStart);
this.canvas.addEventListener('touchmove', this._handleTouchMove);
this.canvas.addEventListener('touchend', this._handleTouchEnd);
};
SignaturePad.prototype._reset = function () {
this._points = [];
this._lastPoints = [];
this._lastVelocity = 0;

@@ -349,11 +363,11 @@ this._lastWidth = (this.minWidth + this.maxWidth) / 2;

SignaturePad.prototype._addPoint = function (point) {
var _points = this._points;
_points.push(point);
if (_points.length > 2) {
if (_points.length === 3) {
_points.unshift(_points[0]);
var _lastPoints = this._lastPoints;
_lastPoints.push(point);
if (_lastPoints.length > 2) {
if (_lastPoints.length === 3) {
_lastPoints.unshift(_lastPoints[0]);
}
var widths = this._calculateCurveWidths(_points[1], _points[2]);
var curve = Bezier.fromPoints(_points, widths);
_points.shift();
var widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
var curve = Bezier.fromPoints(_lastPoints, widths);
_lastPoints.shift();
return curve;

@@ -415,3 +429,3 @@ }

var ctx = this._ctx;
var width = typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
ctx.beginPath();

@@ -458,8 +472,8 @@ this._drawCurveSegment(point.x, point.y, width);

var maxY = this.canvas.height / ratio;
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", this.canvas.width.toString());
svg.setAttribute("height", this.canvas.height.toString());
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', this.canvas.width.toString());
svg.setAttribute('height', this.canvas.height.toString());
this._fromData(pointGroups, function (_a) {
var color = _a.color, curve = _a.curve;
var path = document.createElement("path");
var path = document.createElement('path');
if (!isNaN(curve.control1.x) &&

@@ -473,7 +487,7 @@ !isNaN(curve.control1.y) &&

+ (curve.endPoint.x.toFixed(3) + "," + curve.endPoint.y.toFixed(3));
path.setAttribute("d", attr);
path.setAttribute("stroke-width", (curve.endWidth * 2.25).toFixed(3));
path.setAttribute("stroke", color);
path.setAttribute("fill", "none");
path.setAttribute("stroke-linecap", "round");
path.setAttribute('d', attr);
path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
path.setAttribute('stroke', color);
path.setAttribute('fill', 'none');
path.setAttribute('stroke-linecap', 'round');
svg.appendChild(path);

@@ -483,23 +497,23 @@ }

var color = _a.color, point = _a.point;
var circle = document.createElement("circle");
var dotSize = typeof _this.dotSize === "function" ? _this.dotSize() : _this.dotSize;
circle.setAttribute("r", dotSize.toString());
circle.setAttribute("cx", point.x.toString());
circle.setAttribute("cy", point.y.toString());
circle.setAttribute("fill", color);
var circle = document.createElement('circle');
var dotSize = typeof _this.dotSize === 'function' ? _this.dotSize() : _this.dotSize;
circle.setAttribute('r', dotSize.toString());
circle.setAttribute('cx', point.x.toString());
circle.setAttribute('cy', point.y.toString());
circle.setAttribute('fill', color);
svg.appendChild(circle);
});
var prefix = "data:image/svg+xml;base64,";
var header = "<svg"
+ " xmlns=\"http://www.w3.org/2000/svg\""
+ " xmlns:xlink=\"http://www.w3.org/1999/xlink\""
var prefix = 'data:image/svg+xml;base64,';
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;
if (body === undefined) {
var dummy = document.createElement("dummy");
var dummy = document.createElement('dummy');
var nodes = svg.childNodes;
dummy.innerHTML = "";
dummy.innerHTML = '';
for (var i = 0; i < nodes.length; i += 1) {

@@ -510,3 +524,3 @@ dummy.appendChild(nodes[i].cloneNode(true));

}
var footer = "</svg>";
var footer = '</svg>';
var data = header + body + footer;

@@ -513,0 +527,0 @@ return prefix + btoa(data);

23

package.json
{
"name": "signature_pad",
"description": "Library for drawing smooth signatures.",
"version": "3.0.0-beta.2",
"version": "3.0.0-beta.3",
"homepage": "https://github.com/szimek/signature_pad",

@@ -19,4 +19,6 @@ "author": {

"scripts": {
"build": "del dist && rollup --config && mv dist/src dist/types && cp dist/signature_pad.umd.js docs/js/",
"build": "del dist && rollup --config && mkdir dist/types && mv dist/*.d.ts dist/types && cp dist/signature_pad.umd.js docs/js/",
"prepublishOnly": "yarn run build",
"serve": "serve -l 9000 docs",
"start": "yarn run build && yarn run serve",
"test": "jest --coverage"

@@ -34,13 +36,15 @@ },

"devDependencies": {
"@types/jest": "^22.2.3",
"@types/jest": "^23.1.1",
"canvas-prebuilt": "^1.6.5-prerelease.1",
"del": "^3.0.0",
"del-cli": "^1.1.0",
"jest": "^22.4.3",
"rollup": "^0.57.1",
"jest": "^23.1.0",
"rollup": "^0.61.2",
"rollup-plugin-terser": "^1.0.1",
"rollup-plugin-tslint": "^0.1.34",
"rollup-plugin-typescript2": "^0.13.0",
"rollup-plugin-uglify": "^3.0.0",
"ts-jest": "^22.4.2",
"typescript": "^2.8.1"
"rollup-plugin-typescript2": "^0.15.0",
"serve": "^9.1.0",
"ts-jest": "^22.4.6",
"tslint": "^5.11.0",
"typescript": "^2.9.2"
},

@@ -58,2 +62,3 @@ "jest": {

],
"testURL": "http://localhost:3000/",
"transform": {

@@ -60,0 +65,0 @@ "^.+\\.tsx?$": "ts-jest"

2

src/bezier.ts

@@ -1,2 +0,2 @@

import { IBasicPoint, Point } from "./point";
import { IBasicPoint, Point } from './point';

@@ -3,0 +3,0 @@ export class Bezier {

176

src/signature_pad.ts

@@ -12,6 +12,13 @@ /**

import { Bezier } from "./bezier";
import { IBasicPoint, Point } from "./point";
import { throttle } from "./throttle";
import { Bezier } from './bezier';
import { IBasicPoint, Point } from './point';
import { throttle } from './throttle';
declare global {
// tslint:disable-next-line:interface-name
interface Window {
PointerEvent: typeof PointerEvent;
}
}
export interface IOptions {

@@ -53,3 +60,3 @@ dotSize?: number | (() => number);

private _isEmpty: boolean;
private _points: Point[]; // Stores up to 4 most recent points; used to generate a new curve
private _lastPoints: Point[]; // Stores up to 4 most recent points; used to generate a new curve
private _data: IPointGroup[]; // Stores all points in groups (one group per line or dot)

@@ -65,4 +72,4 @@ private _lastVelocity: number;

this.maxWidth = options.maxWidth || 2.5;
this.throttle = ("throttle" in options ? options.throttle : 16) as number; // in milisecondss
this.minDistance = ("minDistance" in options ? options.minDistance : 5) as number; // in pixels
this.throttle = ('throttle' in options ? options.throttle : 16) as number; // in milisecondss
this.minDistance = ('minDistance' in options ? options.minDistance : 5) as number; // in pixels

@@ -78,8 +85,8 @@ if (this.throttle) {

};
this.penColor = options.penColor || "black";
this.backgroundColor = options.backgroundColor || "rgba(0,0,0,0)";
this.penColor = options.penColor || 'black';
this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
this.onBegin = options.onBegin;
this.onEnd = options.onEnd;
this._ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
this._ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
this.clear();

@@ -129,5 +136,5 @@

public toDataURL(type = "image/png", encoderOptions?: number) {
public toDataURL(type = 'image/png', encoderOptions?: number) {
switch (type) {
case "image/svg+xml":
case 'image/svg+xml':
return this._toSVG();

@@ -140,6 +147,14 @@ default:

public on(): void {
this._handleMouseEvents();
// Disable panning/zooming when touching canvas element
this.canvas.style.touchAction = 'none';
this.canvas.style.msTouchAction = 'none';
if ("ontouchstart" in window) {
this._handleTouchEvents();
if (window.PointerEvent) {
this._handlePointerEvents();
} else {
this._handleMouseEvents();
if ('ontouchstart' in window) {
this._handleTouchEvents();
}
}

@@ -149,17 +164,17 @@ }

public off(): void {
// Pass touch events to canvas element on mobile IE11 and Edge.
this.canvas.style.msTouchAction = "auto";
this.canvas.style.touchAction = "auto";
// Enable panning/zooming when touching canvas element
this.canvas.style.touchAction = 'auto';
this.canvas.style.msTouchAction = 'auto';
this.canvas.removeEventListener("mousedown", this._handleMouseDown);
this.canvas.removeEventListener("mousemove", this._handleMouseMove);
document.removeEventListener("mouseup", this._handleMouseUp);
this.canvas.removeEventListener('pointerdown', this._handleMouseDown);
this.canvas.removeEventListener('pointermove', this._handleMouseMove);
document.removeEventListener('pointerup', this._handleMouseUp);
// TS 2.8.1 has incorrect type definition for touch event handlers
// @ts-ignore
this.canvas.removeEventListener("touchstart", this._handleTouchStart);
// @ts-ignore
this.canvas.removeEventListener("touchmove", this._handleTouchMove);
// @ts-ignore
this.canvas.removeEventListener("touchend", this._handleTouchEnd);
this.canvas.removeEventListener('mousedown', this._handleMouseDown);
this.canvas.removeEventListener('mousemove', this._handleMouseMove);
document.removeEventListener('mouseup', this._handleMouseUp);
this.canvas.removeEventListener('touchstart', this._handleTouchStart);
this.canvas.removeEventListener('touchmove', this._handleTouchMove);
this.canvas.removeEventListener('touchend', this._handleTouchEnd);
}

@@ -247,3 +262,3 @@

if (typeof this.onBegin === "function") {
if (typeof this.onBegin === 'function') {
this.onBegin(event);

@@ -285,3 +300,3 @@ }

if (typeof this.onEnd === "function") {
if (typeof this.onEnd === 'function') {
this.onEnd(event);

@@ -291,22 +306,22 @@ }

private _handlePointerEvents(): void {
this._mouseButtonDown = false;
this.canvas.addEventListener('pointerdown', this._handleMouseDown);
this.canvas.addEventListener('pointermove', this._handleMouseMove);
document.addEventListener('pointerup', this._handleMouseUp);
}
private _handleMouseEvents(): void {
this._mouseButtonDown = false;
this.canvas.addEventListener("mousedown", this._handleMouseDown);
this.canvas.addEventListener("mousemove", this._handleMouseMove);
document.addEventListener("mouseup", this._handleMouseUp);
this.canvas.addEventListener('mousedown', this._handleMouseDown);
this.canvas.addEventListener('mousemove', this._handleMouseMove);
document.addEventListener('mouseup', this._handleMouseUp);
}
private _handleTouchEvents(): void {
// Pass touch events to canvas element on mobile IE11 and Edge.
this.canvas.style.msTouchAction = "none";
this.canvas.style.touchAction = "none";
// TS 2.8.1 has incorrect type definition for touch event handlers
// @ts-ignore
this.canvas.addEventListener("touchstart", this._handleTouchStart);
// @ts-ignore
this.canvas.addEventListener("touchmove", this._handleTouchMove);
// @ts-ignore
this.canvas.addEventListener("touchend", this._handleTouchEnd);
this.canvas.addEventListener('touchstart', this._handleTouchStart);
this.canvas.addEventListener('touchmove', this._handleTouchMove);
this.canvas.addEventListener('touchend', this._handleTouchEnd);
}

@@ -316,3 +331,3 @@

private _reset(): void {
this._points = [];
this._lastPoints = [];
this._lastVelocity = 0;

@@ -333,22 +348,21 @@ this._lastWidth = (this.minWidth + this.maxWidth) / 2;

// Add point to "_points" array and generate new curve if there are enough points (i.e. 3)
// Add point to _lastPoints array and generate a new curve if there are enough points (i.e. 3)
private _addPoint(point: Point): Bezier | null {
const { _points } = this;
const { _lastPoints } = this;
_points.push(point);
_lastPoints.push(point);
if (_points.length > 2) {
if (_lastPoints.length > 2) {
// 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]);
if (_lastPoints.length === 3) {
_lastPoints.unshift(_lastPoints[0]);
}
// _points array will always have 4 points here.
const widths = this._calculateCurveWidths(_points[1], _points[2]);
const curve = Bezier.fromPoints(_points, widths);
const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
const curve = Bezier.fromPoints(_lastPoints, widths);
// Remove the first element from the list, so that we always have no
// more than 4 points in "points" array.
_points.shift();
// Remove the first element from the list, so that there are no more than 4 points at any time.
_lastPoints.shift();

@@ -429,3 +443,3 @@ return curve;

const ctx = this._ctx;
const width = typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
const width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;

@@ -441,4 +455,4 @@ ctx.beginPath();

pointGroups: IPointGroup[],
drawCurve: SignaturePad["_drawCurve"],
drawDot: SignaturePad["_drawDot"],
drawCurve: SignaturePad['_drawCurve'],
drawDot: SignaturePad['_drawDot'],
): void {

@@ -485,6 +499,6 @@ for (const group of pointGroups) {

const maxY = this.canvas.height / ratio;
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute("width", this.canvas.width.toString());
svg.setAttribute("height", this.canvas.height.toString());
svg.setAttribute('width', this.canvas.width.toString());
svg.setAttribute('height', this.canvas.height.toString());

@@ -495,3 +509,3 @@ this._fromData(

({ color, curve }: { color: string, curve: Bezier }) => {
const path = document.createElement("path");
const path = document.createElement('path');

@@ -510,7 +524,7 @@ // Need to check curve for NaN values, these pop up when drawing

+ `${curve.endPoint.x.toFixed(3)},${curve.endPoint.y.toFixed(3)}`;
path.setAttribute("d", attr);
path.setAttribute("stroke-width", (curve.endWidth * 2.25).toFixed(3));
path.setAttribute("stroke", color);
path.setAttribute("fill", "none");
path.setAttribute("stroke-linecap", "round");
path.setAttribute('d', attr);
path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
path.setAttribute('stroke', color);
path.setAttribute('fill', 'none');
path.setAttribute('stroke-linecap', 'round');

@@ -523,8 +537,8 @@ svg.appendChild(path);

({ color, point }: { color: string, point: IBasicPoint }) => {
const circle = document.createElement("circle");
const dotSize = typeof this.dotSize === "function" ? this.dotSize() : this.dotSize;
circle.setAttribute("r", dotSize.toString());
circle.setAttribute("cx", point.x.toString());
circle.setAttribute("cy", point.y.toString());
circle.setAttribute("fill", color);
const circle = document.createElement('circle');
const dotSize = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
circle.setAttribute('r', dotSize.toString());
circle.setAttribute('cx', point.x.toString());
circle.setAttribute('cy', point.y.toString());
circle.setAttribute('fill', color);

@@ -535,10 +549,10 @@ svg.appendChild(circle);

const prefix = "data:image/svg+xml;base64,";
const header = "<svg"
+ " xmlns=\"http://www.w3.org/2000/svg\""
+ " xmlns:xlink=\"http://www.w3.org/1999/xlink\""
const prefix = 'data:image/svg+xml;base64,';
const 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}"`
+ ">";
+ '>';
let body = svg.innerHTML;

@@ -548,5 +562,5 @@

if (body === undefined) {
const dummy = document.createElement("dummy");
const dummy = document.createElement('dummy');
const nodes = svg.childNodes;
dummy.innerHTML = "";
dummy.innerHTML = '';

@@ -561,3 +575,3 @@ // tslint:disable-next-line: prefer-for-of

const footer = "</svg>";
const footer = '</svg>';
const data = header + body + footer;

@@ -564,0 +578,0 @@

2

src/throttle.ts

@@ -42,3 +42,3 @@ // Slightly simplified version of http://stackoverflow.com/a/27078401/815507

} else if (!timeout) {
timeout = setTimeout(later, remaining);
timeout = window.setTimeout(later, remaining);
}

@@ -45,0 +45,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc