signature_pad - npm Package Compare versions

Comparing version 4.0.8 to 4.0.9

dist/signature_pad.js

 /*!
- * Signature Pad v4.0.8 | https://github.com/szimek/signature_pad
+ * Signature Pad v4.0.9 | https://github.com/szimek/signature_pad
  * (c) 2022 Szymon Nowak | Released under the MIT license
@@ -238,3 +238,3 @@ */
         this._data = [];
-        this._reset();
+        this._reset(this._getPointGroupOptions());
         this._isEmpty = true;
@@ -250,3 +250,3 @@ }
             const yOffset = options.yOffset || 0;
-            this._reset();
+            this._reset(this._getPointGroupOptions());
             image.onload = () => {
@@ -314,13 +314,19 @@ this._ctx.drawImage(image, xOffset, yOffset, width, height);
     }
+    _getPointGroupOptions(group) {
+        return {
+            penColor: group && 'penColor' in group ? group.penColor : this.penColor,
+            dotSize: group && 'dotSize' in group ? group.dotSize : this.dotSize,
+            minWidth: group && 'minWidth' in group ? group.minWidth : this.minWidth,
+            maxWidth: group && 'maxWidth' in group ? group.maxWidth : this.maxWidth,
+            velocityFilterWeight: group && 'velocityFilterWeight' in group
+                ? group.velocityFilterWeight
+                : this.velocityFilterWeight,
+        };
+    }
     _strokeBegin(event) {
         this.dispatchEvent(new CustomEvent('beginStroke', { detail: event }));
-        const newPointGroup = {
-            dotSize: this.dotSize,
-            minWidth: this.minWidth,
-            maxWidth: this.maxWidth,
-            penColor: this.penColor,
-            points: [],
-        };
+        const pointGroupOptions = this._getPointGroupOptions();
+        const newPointGroup = Object.assign(Object.assign({}, pointGroupOptions), { points: [] });
         this._data.push(newPointGroup);
-        this._reset();
+        this._reset(pointGroupOptions);
         this._strokeUpdate(event);
@@ -348,20 +354,10 @@ }
             : false;
-        const { penColor, dotSize, minWidth, maxWidth } = lastPointGroup;
+        const pointGroupOptions = this._getPointGroupOptions(lastPointGroup);
         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
-            const curve = this._addPoint(point);
+            const curve = this._addPoint(point, pointGroupOptions);
             if (!lastPoint) {
-                this._drawDot(point, {
-                    penColor,
-                    dotSize,
-                    minWidth,
-                    maxWidth,
-                });
+                this._drawDot(point, pointGroupOptions);
             }
             else if (curve) {
-                this._drawCurve(curve, {
-                    penColor,
-                    dotSize,
-                    minWidth,
-                    maxWidth,
-                });
+                this._drawCurve(curve, pointGroupOptions);
             }
@@ -398,7 +394,7 @@ lastPoints.push({
     }
-    _reset() {
+    _reset(options) {
         this._lastPoints = [];
         this._lastVelocity = 0;
-        this._lastWidth = (this.minWidth + this.maxWidth) / 2;
-        this._ctx.fillStyle = this.penColor;
+        this._lastWidth = (options.minWidth + options.maxWidth) / 2;
+        this._ctx.fillStyle = options.penColor;
     }
@@ -409,3 +405,3 @@ _createPoint(x, y, pressure) {
     }
-    _addPoint(point) {
+    _addPoint(point, options) {
         const { _lastPoints } = this;
@@ -417,3 +413,3 @@ _lastPoints.push(point);
             }
-            const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
+            const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2], options);
             const curve = Bezier.fromPoints(_lastPoints, widths);
@@ -425,6 +421,6 @@ _lastPoints.shift();
     }
-    _calculateCurveWidths(startPoint, endPoint) {
-        const velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
-            (1 - this.velocityFilterWeight) * this._lastVelocity;
-        const newWidth = this._strokeWidth(velocity);
+    _calculateCurveWidths(startPoint, endPoint, options) {
+        const velocity = options.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
+            (1 - options.velocityFilterWeight) * this._lastVelocity;
+        const newWidth = this._strokeWidth(velocity, options);
         const widths = {
@@ -438,4 +434,4 @@ end: newWidth,
     }
-    _strokeWidth(velocity) {
-        return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+    _strokeWidth(velocity, options) {
+        return Math.max(options.maxWidth / (velocity + 1), options.minWidth);
     }
@@ -488,3 +484,4 @@ _drawCurveSegment(x, y, width) {
         for (const group of pointGroups) {
-            const { penColor, dotSize, minWidth, maxWidth, points } = group;
+            const { points } = group;
+            const pointGroupOptions = this._getPointGroupOptions(group);
             if (points.length > 1) {
@@ -494,14 +491,8 @@ for (let j = 0; j < points.length; j += 1) {
                     const point = new Point(basicPoint.x, basicPoint.y, basicPoint.pressure, basicPoint.time);
-                    this.penColor = penColor;
                     if (j === 0) {
-                        this._reset();
+                        this._reset(pointGroupOptions);
                     }
-                    const curve = this._addPoint(point);
+                    const curve = this._addPoint(point, pointGroupOptions);
                     if (curve) {
-                        drawCurve(curve, {
-                            penColor,
-                            dotSize,
-                            minWidth,
-                            maxWidth,
-                        });
+                        drawCurve(curve, pointGroupOptions);
                     }
@@ -511,9 +502,4 @@ }
             else {
-                this._reset();
-                drawDot(points[0], {
-                    penColor,
-                    dotSize,
-                    minWidth,
-                    maxWidth,
-                });
+                this._reset(pointGroupOptions);
+                drawDot(points[0], pointGroupOptions);
             }
@@ -520,0 +506,0 @@ }

dist/signature_pad.min.js

 /*!
- * Signature Pad v4.0.8 | https://github.com/szimek/signature_pad
+ * Signature Pad v4.0.9 | https://github.com/szimek/signature_pad
  * (c) 2022 Szymon Nowak | Released under the MIT license
  */
-class t{constructor(t,e,i,s){if(isNaN(t)||isNaN(e))throw new Error(`Point is invalid: (${t}, ${e})`);this.x=+t,this.y=+e,this.pressure=i||0,this.time=s||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.pressure===t.pressure&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}}class e{constructor(t,e,i,s,n,o){this.startPoint=t,this.control2=e,this.control1=i,this.endPoint=s,this.startWidth=n,this.endWidth=o}static fromPoints(t,i){const s=this.calculateControlPoints(t[0],t[1],t[2]).c2,n=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new e(t[1],s,n,t[2],i.start,i.end)}static calculateControlPoints(e,i,s){const n=e.x-i.x,o=e.y-i.y,h=i.x-s.x,r=i.y-s.y,a=(e.x+i.x)/2,d=(e.y+i.y)/2,c=(i.x+s.x)/2,l=(i.y+s.y)/2,u=Math.sqrt(n*n+o*o),v=Math.sqrt(h*h+r*r),m=v/(u+v),_=c+(a-c)*m,p=l+(d-l)*m,g=i.x-_,w=i.y-p;return{c1:new t(a+g,d+w),c2:new t(c+g,l+w)}}length(){let t,e,i=0;for(let s=0;s<=10;s+=1){const n=s/10,o=this.point(n,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),h=this.point(n,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(s>0){const s=o-t,n=h-e;i+=Math.sqrt(s*s+n*n)}t=o,e=h}return i}point(t,e,i,s,n){return e*(1-t)*(1-t)*(1-t)+3*i*(1-t)*(1-t)*t+3*s*(1-t)*t*t+n*t*t*t}}class i extends class{constructor(){try{this._et=new EventTarget}catch(t){this._et=document}}addEventListener(t,e,i){this._et.addEventListener(t,e,i)}dispatchEvent(t){return this._et.dispatchEvent(t)}removeEventListener(t,e,i){this._et.removeEventListener(t,e,i)}}{constructor(t,e={}){super(),this.canvas=t,this._handleMouseDown=t=>{1===t.buttons&&(this._drawningStroke=!0,this._strokeBegin(t))},this._handleMouseMove=t=>{this._drawningStroke&&this._strokeMoveUpdate(t)},this._handleMouseUp=t=>{1===t.buttons&&this._drawningStroke&&(this._drawningStroke=!1,this._strokeEnd(t))},this._handleTouchStart=t=>{if(t.cancelable&&t.preventDefault(),1===t.targetTouches.length){const e=t.changedTouches[0];this._strokeBegin(e)}},this._handleTouchMove=t=>{t.cancelable&&t.preventDefault();const e=t.targetTouches[0];this._strokeMoveUpdate(e)},this._handleTouchEnd=t=>{if(t.target===this.canvas){t.cancelable&&t.preventDefault();const e=t.changedTouches[0];this._strokeEnd(e)}},this._handlePointerStart=t=>{this._drawningStroke=!0,t.preventDefault(),this._strokeBegin(t)},this._handlePointerMove=t=>{this._drawningStroke&&(t.preventDefault(),this._strokeMoveUpdate(t))},this._handlePointerEnd=t=>{this._drawningStroke&&(t.preventDefault(),this._drawningStroke=!1,this._strokeEnd(t))},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.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this._strokeMoveUpdate=this.throttle?function(t,e=250){let i,s,n,o=0,h=null;const r=()=>{o=Date.now(),h=null,i=t.apply(s,n),h||(s=null,n=[])};return function(...a){const d=Date.now(),c=e-(d-o);return s=this,n=a,c<=0||c>e?(h&&(clearTimeout(h),h=null),o=d,i=t.apply(s,n),h||(s=null,n=[])):h||(h=window.setTimeout(r,c)),i}}(i.prototype._strokeUpdate,this.throttle):i.prototype._strokeUpdate,this._ctx=t.getContext("2d"),this.clear(),this.on()}clear(){const{_ctx:t,canvas:e}=this;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={}){return new Promise(((i,s)=>{const n=new Image,o=e.ratio||window.devicePixelRatio||1,h=e.width||this.canvas.width/o,r=e.height||this.canvas.height/o,a=e.xOffset||0,d=e.yOffset||0;this._reset(),n.onload=()=>{this._ctx.drawImage(n,a,d,h,r),i()},n.onerror=t=>{s(t)},n.crossOrigin="anonymous",n.src=t,this._isEmpty=!1}))}toDataURL(t="image/png",e){return"image/svg+xml"===t?this._toSVG():this.canvas.toDataURL(t,e)}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none";const t=/Macintosh/.test(navigator.userAgent)&&"ontouchstart"in document;window.PointerEvent&&!t?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.style.userSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerStart),this.canvas.removeEventListener("pointermove",this._handlePointerMove),this.canvas.ownerDocument.removeEventListener("pointerup",this._handlePointerEnd),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),this.canvas.ownerDocument.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,{clear:e=!0}={}){e&&this.clear(),this._fromData(t,this._drawCurve.bind(this),this._drawDot.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_strokeBegin(t){this.dispatchEvent(new CustomEvent("beginStroke",{detail:t}));const e={dotSize:this.dotSize,minWidth:this.minWidth,maxWidth:this.maxWidth,penColor:this.penColor,points:[]};this._data.push(e),this._reset(),this._strokeUpdate(t)}_strokeUpdate(t){if(0===this._data.length)return void this._strokeBegin(t);this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));const e=t.clientX,i=t.clientY,s=void 0!==t.pressure?t.pressure:void 0!==t.force?t.force:0,n=this._createPoint(e,i,s),o=this._data[this._data.length-1],h=o.points,r=h.length>0&&h[h.length-1],a=!!r&&n.distanceTo(r)<=this.minDistance,{penColor:d,dotSize:c,minWidth:l,maxWidth:u}=o;if(!r||!r||!a){const t=this._addPoint(n);r?t&&this._drawCurve(t,{penColor:d,dotSize:c,minWidth:l,maxWidth:u}):this._drawDot(n,{penColor:d,dotSize:c,minWidth:l,maxWidth:u}),h.push({time:n.time,x:n.x,y:n.y,pressure:n.pressure})}this.dispatchEvent(new CustomEvent("afterUpdateStroke",{detail:t}))}_strokeEnd(t){this._strokeUpdate(t),this.dispatchEvent(new CustomEvent("endStroke",{detail:t}))}_handlePointerEvents(){this._drawningStroke=!1,this.canvas.addEventListener("pointerdown",this._handlePointerStart),this.canvas.addEventListener("pointermove",this._handlePointerMove),this.canvas.ownerDocument.addEventListener("pointerup",this._handlePointerEnd)}_handleMouseEvents(){this._drawningStroke=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),this.canvas.ownerDocument.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(e,i,s){const n=this.canvas.getBoundingClientRect();return new t(e-n.left,i-n.top,s,(new Date).getTime())}_addPoint(t){const{_lastPoints:i}=this;if(i.push(t),i.length>2){3===i.length&&i.unshift(i[0]);const t=this._calculateCurveWidths(i[1],i[2]),s=e.fromPoints(i,t);return i.shift(),s}return null}_calculateCurveWidths(t,e){const i=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,s=this._strokeWidth(i),n={end:s,start:this._lastWidth};return this._lastVelocity=i,this._lastWidth=s,n}_strokeWidth(t){return Math.max(this.maxWidth/(t+1),this.minWidth)}_drawCurveSegment(t,e,i){const s=this._ctx;s.moveTo(t,e),s.arc(t,e,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){const i=this._ctx,s=t.endWidth-t.startWidth,n=2*Math.ceil(t.length());i.beginPath(),i.fillStyle=e.penColor;for(let i=0;i<n;i+=1){const o=i/n,h=o*o,r=h*o,a=1-o,d=a*a,c=d*a;let l=c*t.startPoint.x;l+=3*d*o*t.control1.x,l+=3*a*h*t.control2.x,l+=r*t.endPoint.x;let u=c*t.startPoint.y;u+=3*d*o*t.control1.y,u+=3*a*h*t.control2.y,u+=r*t.endPoint.y;const v=Math.min(t.startWidth+r*s,e.maxWidth);this._drawCurveSegment(l,u,v)}i.closePath(),i.fill()}_drawDot(t,e){const i=this._ctx,s=e.dotSize>0?e.dotSize:(e.minWidth+e.maxWidth)/2;i.beginPath(),this._drawCurveSegment(t.x,t.y,s),i.closePath(),i.fillStyle=e.penColor,i.fill()}_fromData(e,i,s){for(const n of e){const{penColor:e,dotSize:o,minWidth:h,maxWidth:r,points:a}=n;if(a.length>1)for(let s=0;s<a.length;s+=1){const n=a[s],d=new t(n.x,n.y,n.pressure,n.time);this.penColor=e,0===s&&this._reset();const c=this._addPoint(d);c&&i(c,{penColor:e,dotSize:o,minWidth:h,maxWidth:r})}else this._reset(),s(a[0],{penColor:e,dotSize:o,minWidth:h,maxWidth:r})}}_toSVG(){const t=this._data,e=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/e,s=this.canvas.height/e,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width",this.canvas.width.toString()),n.setAttribute("height",this.canvas.height.toString()),this._fromData(t,((t,{penColor:e})=>{const i=document.createElement("path");if(!(isNaN(t.control1.x)||isNaN(t.control1.y)||isNaN(t.control2.x)||isNaN(t.control2.y))){const s=`M ${t.startPoint.x.toFixed(3)},${t.startPoint.y.toFixed(3)} C ${t.control1.x.toFixed(3)},${t.control1.y.toFixed(3)} ${t.control2.x.toFixed(3)},${t.control2.y.toFixed(3)} ${t.endPoint.x.toFixed(3)},${t.endPoint.y.toFixed(3)}`;i.setAttribute("d",s),i.setAttribute("stroke-width",(2.25*t.endWidth).toFixed(3)),i.setAttribute("stroke",e),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),n.appendChild(i)}}),((t,{penColor:e,dotSize:i,minWidth:s,maxWidth:o})=>{const h=document.createElement("circle"),r=i>0?i:(s+o)/2;h.setAttribute("r",r.toString()),h.setAttribute("cx",t.x.toString()),h.setAttribute("cy",t.y.toString()),h.setAttribute("fill",e),n.appendChild(h)}));const o=`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${i} ${s}" width="${i}" height="${s}">`;let h=n.innerHTML;if(void 0===h){const t=document.createElement("dummy"),e=n.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(o+h+"</svg>")}}export{i as default};
+class t{constructor(t,e,i,n){if(isNaN(t)||isNaN(e))throw new Error(`Point is invalid: (${t}, ${e})`);this.x=+t,this.y=+e,this.pressure=i||0,this.time=n||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.pressure===t.pressure&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}}class e{constructor(t,e,i,n,s,o){this.startPoint=t,this.control2=e,this.control1=i,this.endPoint=n,this.startWidth=s,this.endWidth=o}static fromPoints(t,i){const n=this.calculateControlPoints(t[0],t[1],t[2]).c2,s=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new e(t[1],n,s,t[2],i.start,i.end)}static calculateControlPoints(e,i,n){const s=e.x-i.x,o=e.y-i.y,h=i.x-n.x,r=i.y-n.y,a=(e.x+i.x)/2,d=(e.y+i.y)/2,c=(i.x+n.x)/2,l=(i.y+n.y)/2,u=Math.sqrt(s*s+o*o),v=Math.sqrt(h*h+r*r),_=v/(u+v),m=c+(a-c)*_,p=l+(d-l)*_,g=i.x-m,w=i.y-p;return{c1:new t(a+g,d+w),c2:new t(c+g,l+w)}}length(){let t,e,i=0;for(let n=0;n<=10;n+=1){const s=n/10,o=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(n>0){const n=o-t,s=h-e;i+=Math.sqrt(n*n+s*s)}t=o,e=h}return i}point(t,e,i,n,s){return e*(1-t)*(1-t)*(1-t)+3*i*(1-t)*(1-t)*t+3*n*(1-t)*t*t+s*t*t*t}}class i extends class{constructor(){try{this._et=new EventTarget}catch(t){this._et=document}}addEventListener(t,e,i){this._et.addEventListener(t,e,i)}dispatchEvent(t){return this._et.dispatchEvent(t)}removeEventListener(t,e,i){this._et.removeEventListener(t,e,i)}}{constructor(t,e={}){super(),this.canvas=t,this._handleMouseDown=t=>{1===t.buttons&&(this._drawningStroke=!0,this._strokeBegin(t))},this._handleMouseMove=t=>{this._drawningStroke&&this._strokeMoveUpdate(t)},this._handleMouseUp=t=>{1===t.buttons&&this._drawningStroke&&(this._drawningStroke=!1,this._strokeEnd(t))},this._handleTouchStart=t=>{if(t.cancelable&&t.preventDefault(),1===t.targetTouches.length){const e=t.changedTouches[0];this._strokeBegin(e)}},this._handleTouchMove=t=>{t.cancelable&&t.preventDefault();const e=t.targetTouches[0];this._strokeMoveUpdate(e)},this._handleTouchEnd=t=>{if(t.target===this.canvas){t.cancelable&&t.preventDefault();const e=t.changedTouches[0];this._strokeEnd(e)}},this._handlePointerStart=t=>{this._drawningStroke=!0,t.preventDefault(),this._strokeBegin(t)},this._handlePointerMove=t=>{this._drawningStroke&&(t.preventDefault(),this._strokeMoveUpdate(t))},this._handlePointerEnd=t=>{this._drawningStroke&&(t.preventDefault(),this._drawningStroke=!1,this._strokeEnd(t))},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.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this._strokeMoveUpdate=this.throttle?function(t,e=250){let i,n,s,o=0,h=null;const r=()=>{o=Date.now(),h=null,i=t.apply(n,s),h||(n=null,s=[])};return function(...a){const d=Date.now(),c=e-(d-o);return n=this,s=a,c<=0||c>e?(h&&(clearTimeout(h),h=null),o=d,i=t.apply(n,s),h||(n=null,s=[])):h||(h=window.setTimeout(r,c)),i}}(i.prototype._strokeUpdate,this.throttle):i.prototype._strokeUpdate,this._ctx=t.getContext("2d"),this.clear(),this.on()}clear(){const{_ctx:t,canvas:e}=this;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._getPointGroupOptions()),this._isEmpty=!0}fromDataURL(t,e={}){return new Promise(((i,n)=>{const s=new Image,o=e.ratio||window.devicePixelRatio||1,h=e.width||this.canvas.width/o,r=e.height||this.canvas.height/o,a=e.xOffset||0,d=e.yOffset||0;this._reset(this._getPointGroupOptions()),s.onload=()=>{this._ctx.drawImage(s,a,d,h,r),i()},s.onerror=t=>{n(t)},s.crossOrigin="anonymous",s.src=t,this._isEmpty=!1}))}toDataURL(t="image/png",e){return"image/svg+xml"===t?this._toSVG():this.canvas.toDataURL(t,e)}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none";const t=/Macintosh/.test(navigator.userAgent)&&"ontouchstart"in document;window.PointerEvent&&!t?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.style.userSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerStart),this.canvas.removeEventListener("pointermove",this._handlePointerMove),this.canvas.ownerDocument.removeEventListener("pointerup",this._handlePointerEnd),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),this.canvas.ownerDocument.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,{clear:e=!0}={}){e&&this.clear(),this._fromData(t,this._drawCurve.bind(this),this._drawDot.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_getPointGroupOptions(t){return{penColor:t&&"penColor"in t?t.penColor:this.penColor,dotSize:t&&"dotSize"in t?t.dotSize:this.dotSize,minWidth:t&&"minWidth"in t?t.minWidth:this.minWidth,maxWidth:t&&"maxWidth"in t?t.maxWidth:this.maxWidth,velocityFilterWeight:t&&"velocityFilterWeight"in t?t.velocityFilterWeight:this.velocityFilterWeight}}_strokeBegin(t){this.dispatchEvent(new CustomEvent("beginStroke",{detail:t}));const e=this._getPointGroupOptions(),i=Object.assign(Object.assign({},e),{points:[]});this._data.push(i),this._reset(e),this._strokeUpdate(t)}_strokeUpdate(t){if(0===this._data.length)return void this._strokeBegin(t);this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));const e=t.clientX,i=t.clientY,n=void 0!==t.pressure?t.pressure:void 0!==t.force?t.force:0,s=this._createPoint(e,i,n),o=this._data[this._data.length-1],h=o.points,r=h.length>0&&h[h.length-1],a=!!r&&s.distanceTo(r)<=this.minDistance,d=this._getPointGroupOptions(o);if(!r||!r||!a){const t=this._addPoint(s,d);r?t&&this._drawCurve(t,d):this._drawDot(s,d),h.push({time:s.time,x:s.x,y:s.y,pressure:s.pressure})}this.dispatchEvent(new CustomEvent("afterUpdateStroke",{detail:t}))}_strokeEnd(t){this._strokeUpdate(t),this.dispatchEvent(new CustomEvent("endStroke",{detail:t}))}_handlePointerEvents(){this._drawningStroke=!1,this.canvas.addEventListener("pointerdown",this._handlePointerStart),this.canvas.addEventListener("pointermove",this._handlePointerMove),this.canvas.ownerDocument.addEventListener("pointerup",this._handlePointerEnd)}_handleMouseEvents(){this._drawningStroke=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),this.canvas.ownerDocument.addEventListener("mouseup",this._handleMouseUp)}_handleTouchEvents(){this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)}_reset(t){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(t.minWidth+t.maxWidth)/2,this._ctx.fillStyle=t.penColor}_createPoint(e,i,n){const s=this.canvas.getBoundingClientRect();return new t(e-s.left,i-s.top,n,(new Date).getTime())}_addPoint(t,i){const{_lastPoints:n}=this;if(n.push(t),n.length>2){3===n.length&&n.unshift(n[0]);const t=this._calculateCurveWidths(n[1],n[2],i),s=e.fromPoints(n,t);return n.shift(),s}return null}_calculateCurveWidths(t,e,i){const n=i.velocityFilterWeight*e.velocityFrom(t)+(1-i.velocityFilterWeight)*this._lastVelocity,s=this._strokeWidth(n,i),o={end:s,start:this._lastWidth};return this._lastVelocity=n,this._lastWidth=s,o}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,i){const n=this._ctx;n.moveTo(t,e),n.arc(t,e,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){const i=this._ctx,n=t.endWidth-t.startWidth,s=2*Math.ceil(t.length());i.beginPath(),i.fillStyle=e.penColor;for(let i=0;i<s;i+=1){const o=i/s,h=o*o,r=h*o,a=1-o,d=a*a,c=d*a;let l=c*t.startPoint.x;l+=3*d*o*t.control1.x,l+=3*a*h*t.control2.x,l+=r*t.endPoint.x;let u=c*t.startPoint.y;u+=3*d*o*t.control1.y,u+=3*a*h*t.control2.y,u+=r*t.endPoint.y;const v=Math.min(t.startWidth+r*n,e.maxWidth);this._drawCurveSegment(l,u,v)}i.closePath(),i.fill()}_drawDot(t,e){const i=this._ctx,n=e.dotSize>0?e.dotSize:(e.minWidth+e.maxWidth)/2;i.beginPath(),this._drawCurveSegment(t.x,t.y,n),i.closePath(),i.fillStyle=e.penColor,i.fill()}_fromData(e,i,n){for(const s of e){const{points:e}=s,o=this._getPointGroupOptions(s);if(e.length>1)for(let n=0;n<e.length;n+=1){const s=e[n],h=new t(s.x,s.y,s.pressure,s.time);0===n&&this._reset(o);const r=this._addPoint(h,o);r&&i(r,o)}else this._reset(o),n(e[0],o)}}_toSVG(){const t=this._data,e=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/e,n=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,((t,{penColor:e})=>{const i=document.createElement("path");if(!(isNaN(t.control1.x)||isNaN(t.control1.y)||isNaN(t.control2.x)||isNaN(t.control2.y))){const n=`M ${t.startPoint.x.toFixed(3)},${t.startPoint.y.toFixed(3)} C ${t.control1.x.toFixed(3)},${t.control1.y.toFixed(3)} ${t.control2.x.toFixed(3)},${t.control2.y.toFixed(3)} ${t.endPoint.x.toFixed(3)},${t.endPoint.y.toFixed(3)}`;i.setAttribute("d",n),i.setAttribute("stroke-width",(2.25*t.endWidth).toFixed(3)),i.setAttribute("stroke",e),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),s.appendChild(i)}}),((t,{penColor:e,dotSize:i,minWidth:n,maxWidth:o})=>{const h=document.createElement("circle"),r=i>0?i:(n+o)/2;h.setAttribute("r",r.toString()),h.setAttribute("cx",t.x.toString()),h.setAttribute("cy",t.y.toString()),h.setAttribute("fill",e),s.appendChild(h)}));const o=`<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}">`;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(o+h+"</svg>")}}export{i as default};
 //# sourceMappingURL=signature_pad.min.js.map

dist/signature_pad.umd.js

 /*!
- * Signature Pad v4.0.8 | https://github.com/szimek/signature_pad
+ * Signature Pad v4.0.9 | https://github.com/szimek/signature_pad
  * (c) 2022 Szymon Nowak | Released under the MIT license
@@ -244,3 +244,3 @@ */
             this._data = [];
-            this._reset();
+            this._reset(this._getPointGroupOptions());
             this._isEmpty = true;
@@ -256,3 +256,3 @@ }
                 const yOffset = options.yOffset || 0;
-                this._reset();
+                this._reset(this._getPointGroupOptions());
                 image.onload = () => {
@@ -320,13 +320,19 @@ this._ctx.drawImage(image, xOffset, yOffset, width, height);
         }
+        _getPointGroupOptions(group) {
+            return {
+                penColor: group && 'penColor' in group ? group.penColor : this.penColor,
+                dotSize: group && 'dotSize' in group ? group.dotSize : this.dotSize,
+                minWidth: group && 'minWidth' in group ? group.minWidth : this.minWidth,
+                maxWidth: group && 'maxWidth' in group ? group.maxWidth : this.maxWidth,
+                velocityFilterWeight: group && 'velocityFilterWeight' in group
+                    ? group.velocityFilterWeight
+                    : this.velocityFilterWeight,
+            };
+        }
         _strokeBegin(event) {
             this.dispatchEvent(new CustomEvent('beginStroke', { detail: event }));
-            const newPointGroup = {
-                dotSize: this.dotSize,
-                minWidth: this.minWidth,
-                maxWidth: this.maxWidth,
-                penColor: this.penColor,
-                points: [],
-            };
+            const pointGroupOptions = this._getPointGroupOptions();
+            const newPointGroup = Object.assign(Object.assign({}, pointGroupOptions), { points: [] });
             this._data.push(newPointGroup);
-            this._reset();
+            this._reset(pointGroupOptions);
             this._strokeUpdate(event);
@@ -354,20 +360,10 @@ }
                 : false;
-            const { penColor, dotSize, minWidth, maxWidth } = lastPointGroup;
+            const pointGroupOptions = this._getPointGroupOptions(lastPointGroup);
             if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
-                const curve = this._addPoint(point);
+                const curve = this._addPoint(point, pointGroupOptions);
                 if (!lastPoint) {
-                    this._drawDot(point, {
-                        penColor,
-                        dotSize,
-                        minWidth,
-                        maxWidth,
-                    });
+                    this._drawDot(point, pointGroupOptions);
                 }
                 else if (curve) {
-                    this._drawCurve(curve, {
-                        penColor,
-                        dotSize,
-                        minWidth,
-                        maxWidth,
-                    });
+                    this._drawCurve(curve, pointGroupOptions);
                 }
@@ -404,7 +400,7 @@ lastPoints.push({
         }
-        _reset() {
+        _reset(options) {
             this._lastPoints = [];
             this._lastVelocity = 0;
-            this._lastWidth = (this.minWidth + this.maxWidth) / 2;
-            this._ctx.fillStyle = this.penColor;
+            this._lastWidth = (options.minWidth + options.maxWidth) / 2;
+            this._ctx.fillStyle = options.penColor;
         }
@@ -415,3 +411,3 @@ _createPoint(x, y, pressure) {
         }
-        _addPoint(point) {
+        _addPoint(point, options) {
             const { _lastPoints } = this;
@@ -423,3 +419,3 @@ _lastPoints.push(point);
                 }
-                const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
+                const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2], options);
                 const curve = Bezier.fromPoints(_lastPoints, widths);
@@ -431,6 +427,6 @@ _lastPoints.shift();
         }
-        _calculateCurveWidths(startPoint, endPoint) {
-            const velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
-                (1 - this.velocityFilterWeight) * this._lastVelocity;
-            const newWidth = this._strokeWidth(velocity);
+        _calculateCurveWidths(startPoint, endPoint, options) {
+            const velocity = options.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
+                (1 - options.velocityFilterWeight) * this._lastVelocity;
+            const newWidth = this._strokeWidth(velocity, options);
             const widths = {
@@ -444,4 +440,4 @@ end: newWidth,
         }
-        _strokeWidth(velocity) {
-            return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+        _strokeWidth(velocity, options) {
+            return Math.max(options.maxWidth / (velocity + 1), options.minWidth);
         }
@@ -494,3 +490,4 @@ _drawCurveSegment(x, y, width) {
             for (const group of pointGroups) {
-                const { penColor, dotSize, minWidth, maxWidth, points } = group;
+                const { points } = group;
+                const pointGroupOptions = this._getPointGroupOptions(group);
                 if (points.length > 1) {
@@ -500,14 +497,8 @@ for (let j = 0; j < points.length; j += 1) {
                         const point = new Point(basicPoint.x, basicPoint.y, basicPoint.pressure, basicPoint.time);
-                        this.penColor = penColor;
                         if (j === 0) {
-                            this._reset();
+                            this._reset(pointGroupOptions);
                         }
-                        const curve = this._addPoint(point);
+                        const curve = this._addPoint(point, pointGroupOptions);
                         if (curve) {
-                            drawCurve(curve, {
-                                penColor,
-                                dotSize,
-                                minWidth,
-                                maxWidth,
-                            });
+                            drawCurve(curve, pointGroupOptions);
                         }
@@ -517,9 +508,4 @@ }
                 else {
-                    this._reset();
-                    drawDot(points[0], {
-                        penColor,
-                        dotSize,
-                        minWidth,
-                        maxWidth,
-                    });
+                    this._reset(pointGroupOptions);
+                    drawDot(points[0], pointGroupOptions);
                 }
@@ -526,0 +512,0 @@ }

dist/signature_pad.umd.min.js

 /*!
- * Signature Pad v4.0.8 | https://github.com/szimek/signature_pad
+ * Signature Pad v4.0.9 | https://github.com/szimek/signature_pad
  * (c) 2022 Szymon Nowak | Released under the MIT license
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).SignaturePad=e()}(this,(function(){"use strict";class t{constructor(t,e,i,n){if(isNaN(t)||isNaN(e))throw new Error(`Point is invalid: (${t}, ${e})`);this.x=+t,this.y=+e,this.pressure=i||0,this.time=n||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.pressure===t.pressure&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}}class e{constructor(t,e,i,n,s,o){this.startPoint=t,this.control2=e,this.control1=i,this.endPoint=n,this.startWidth=s,this.endWidth=o}static fromPoints(t,i){const n=this.calculateControlPoints(t[0],t[1],t[2]).c2,s=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new e(t[1],n,s,t[2],i.start,i.end)}static calculateControlPoints(e,i,n){const s=e.x-i.x,o=e.y-i.y,h=i.x-n.x,r=i.y-n.y,a=(e.x+i.x)/2,d=(e.y+i.y)/2,c=(i.x+n.x)/2,l=(i.y+n.y)/2,u=Math.sqrt(s*s+o*o),v=Math.sqrt(h*h+r*r),m=v/(u+v),_=c+(a-c)*m,p=l+(d-l)*m,g=i.x-_,w=i.y-p;return{c1:new t(a+g,d+w),c2:new t(c+g,l+w)}}length(){let t,e,i=0;for(let n=0;n<=10;n+=1){const s=n/10,o=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(n>0){const n=o-t,s=h-e;i+=Math.sqrt(n*n+s*s)}t=o,e=h}return i}point(t,e,i,n,s){return e*(1-t)*(1-t)*(1-t)+3*i*(1-t)*(1-t)*t+3*n*(1-t)*t*t+s*t*t*t}}class i extends class{constructor(){try{this._et=new EventTarget}catch(t){this._et=document}}addEventListener(t,e,i){this._et.addEventListener(t,e,i)}dispatchEvent(t){return this._et.dispatchEvent(t)}removeEventListener(t,e,i){this._et.removeEventListener(t,e,i)}}{constructor(t,e={}){super(),this.canvas=t,this._handleMouseDown=t=>{1===t.buttons&&(this._drawningStroke=!0,this._strokeBegin(t))},this._handleMouseMove=t=>{this._drawningStroke&&this._strokeMoveUpdate(t)},this._handleMouseUp=t=>{1===t.buttons&&this._drawningStroke&&(this._drawningStroke=!1,this._strokeEnd(t))},this._handleTouchStart=t=>{if(t.cancelable&&t.preventDefault(),1===t.targetTouches.length){const e=t.changedTouches[0];this._strokeBegin(e)}},this._handleTouchMove=t=>{t.cancelable&&t.preventDefault();const e=t.targetTouches[0];this._strokeMoveUpdate(e)},this._handleTouchEnd=t=>{if(t.target===this.canvas){t.cancelable&&t.preventDefault();const e=t.changedTouches[0];this._strokeEnd(e)}},this._handlePointerStart=t=>{this._drawningStroke=!0,t.preventDefault(),this._strokeBegin(t)},this._handlePointerMove=t=>{this._drawningStroke&&(t.preventDefault(),this._strokeMoveUpdate(t))},this._handlePointerEnd=t=>{this._drawningStroke&&(t.preventDefault(),this._drawningStroke=!1,this._strokeEnd(t))},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.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this._strokeMoveUpdate=this.throttle?function(t,e=250){let i,n,s,o=0,h=null;const r=()=>{o=Date.now(),h=null,i=t.apply(n,s),h||(n=null,s=[])};return function(...a){const d=Date.now(),c=e-(d-o);return n=this,s=a,c<=0||c>e?(h&&(clearTimeout(h),h=null),o=d,i=t.apply(n,s),h||(n=null,s=[])):h||(h=window.setTimeout(r,c)),i}}(i.prototype._strokeUpdate,this.throttle):i.prototype._strokeUpdate,this._ctx=t.getContext("2d"),this.clear(),this.on()}clear(){const{_ctx:t,canvas:e}=this;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={}){return new Promise(((i,n)=>{const s=new Image,o=e.ratio||window.devicePixelRatio||1,h=e.width||this.canvas.width/o,r=e.height||this.canvas.height/o,a=e.xOffset||0,d=e.yOffset||0;this._reset(),s.onload=()=>{this._ctx.drawImage(s,a,d,h,r),i()},s.onerror=t=>{n(t)},s.crossOrigin="anonymous",s.src=t,this._isEmpty=!1}))}toDataURL(t="image/png",e){return"image/svg+xml"===t?this._toSVG():this.canvas.toDataURL(t,e)}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none";const t=/Macintosh/.test(navigator.userAgent)&&"ontouchstart"in document;window.PointerEvent&&!t?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.style.userSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerStart),this.canvas.removeEventListener("pointermove",this._handlePointerMove),this.canvas.ownerDocument.removeEventListener("pointerup",this._handlePointerEnd),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),this.canvas.ownerDocument.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,{clear:e=!0}={}){e&&this.clear(),this._fromData(t,this._drawCurve.bind(this),this._drawDot.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_strokeBegin(t){this.dispatchEvent(new CustomEvent("beginStroke",{detail:t}));const e={dotSize:this.dotSize,minWidth:this.minWidth,maxWidth:this.maxWidth,penColor:this.penColor,points:[]};this._data.push(e),this._reset(),this._strokeUpdate(t)}_strokeUpdate(t){if(0===this._data.length)return void this._strokeBegin(t);this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));const e=t.clientX,i=t.clientY,n=void 0!==t.pressure?t.pressure:void 0!==t.force?t.force:0,s=this._createPoint(e,i,n),o=this._data[this._data.length-1],h=o.points,r=h.length>0&&h[h.length-1],a=!!r&&s.distanceTo(r)<=this.minDistance,{penColor:d,dotSize:c,minWidth:l,maxWidth:u}=o;if(!r||!r||!a){const t=this._addPoint(s);r?t&&this._drawCurve(t,{penColor:d,dotSize:c,minWidth:l,maxWidth:u}):this._drawDot(s,{penColor:d,dotSize:c,minWidth:l,maxWidth:u}),h.push({time:s.time,x:s.x,y:s.y,pressure:s.pressure})}this.dispatchEvent(new CustomEvent("afterUpdateStroke",{detail:t}))}_strokeEnd(t){this._strokeUpdate(t),this.dispatchEvent(new CustomEvent("endStroke",{detail:t}))}_handlePointerEvents(){this._drawningStroke=!1,this.canvas.addEventListener("pointerdown",this._handlePointerStart),this.canvas.addEventListener("pointermove",this._handlePointerMove),this.canvas.ownerDocument.addEventListener("pointerup",this._handlePointerEnd)}_handleMouseEvents(){this._drawningStroke=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),this.canvas.ownerDocument.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(e,i,n){const s=this.canvas.getBoundingClientRect();return new t(e-s.left,i-s.top,n,(new Date).getTime())}_addPoint(t){const{_lastPoints:i}=this;if(i.push(t),i.length>2){3===i.length&&i.unshift(i[0]);const t=this._calculateCurveWidths(i[1],i[2]),n=e.fromPoints(i,t);return i.shift(),n}return null}_calculateCurveWidths(t,e){const i=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,n=this._strokeWidth(i),s={end:n,start:this._lastWidth};return this._lastVelocity=i,this._lastWidth=n,s}_strokeWidth(t){return Math.max(this.maxWidth/(t+1),this.minWidth)}_drawCurveSegment(t,e,i){const n=this._ctx;n.moveTo(t,e),n.arc(t,e,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){const i=this._ctx,n=t.endWidth-t.startWidth,s=2*Math.ceil(t.length());i.beginPath(),i.fillStyle=e.penColor;for(let i=0;i<s;i+=1){const o=i/s,h=o*o,r=h*o,a=1-o,d=a*a,c=d*a;let l=c*t.startPoint.x;l+=3*d*o*t.control1.x,l+=3*a*h*t.control2.x,l+=r*t.endPoint.x;let u=c*t.startPoint.y;u+=3*d*o*t.control1.y,u+=3*a*h*t.control2.y,u+=r*t.endPoint.y;const v=Math.min(t.startWidth+r*n,e.maxWidth);this._drawCurveSegment(l,u,v)}i.closePath(),i.fill()}_drawDot(t,e){const i=this._ctx,n=e.dotSize>0?e.dotSize:(e.minWidth+e.maxWidth)/2;i.beginPath(),this._drawCurveSegment(t.x,t.y,n),i.closePath(),i.fillStyle=e.penColor,i.fill()}_fromData(e,i,n){for(const s of e){const{penColor:e,dotSize:o,minWidth:h,maxWidth:r,points:a}=s;if(a.length>1)for(let n=0;n<a.length;n+=1){const s=a[n],d=new t(s.x,s.y,s.pressure,s.time);this.penColor=e,0===n&&this._reset();const c=this._addPoint(d);c&&i(c,{penColor:e,dotSize:o,minWidth:h,maxWidth:r})}else this._reset(),n(a[0],{penColor:e,dotSize:o,minWidth:h,maxWidth:r})}}_toSVG(){const t=this._data,e=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/e,n=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,((t,{penColor:e})=>{const i=document.createElement("path");if(!(isNaN(t.control1.x)||isNaN(t.control1.y)||isNaN(t.control2.x)||isNaN(t.control2.y))){const n=`M ${t.startPoint.x.toFixed(3)},${t.startPoint.y.toFixed(3)} C ${t.control1.x.toFixed(3)},${t.control1.y.toFixed(3)} ${t.control2.x.toFixed(3)},${t.control2.y.toFixed(3)} ${t.endPoint.x.toFixed(3)},${t.endPoint.y.toFixed(3)}`;i.setAttribute("d",n),i.setAttribute("stroke-width",(2.25*t.endWidth).toFixed(3)),i.setAttribute("stroke",e),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),s.appendChild(i)}}),((t,{penColor:e,dotSize:i,minWidth:n,maxWidth:o})=>{const h=document.createElement("circle"),r=i>0?i:(n+o)/2;h.setAttribute("r",r.toString()),h.setAttribute("cx",t.x.toString()),h.setAttribute("cy",t.y.toString()),h.setAttribute("fill",e),s.appendChild(h)}));const o=`<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}">`;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(o+h+"</svg>")}}return i}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).SignaturePad=e()}(this,(function(){"use strict";class t{constructor(t,e,i,n){if(isNaN(t)||isNaN(e))throw new Error(`Point is invalid: (${t}, ${e})`);this.x=+t,this.y=+e,this.pressure=i||0,this.time=n||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.pressure===t.pressure&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}}class e{constructor(t,e,i,n,s,o){this.startPoint=t,this.control2=e,this.control1=i,this.endPoint=n,this.startWidth=s,this.endWidth=o}static fromPoints(t,i){const n=this.calculateControlPoints(t[0],t[1],t[2]).c2,s=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new e(t[1],n,s,t[2],i.start,i.end)}static calculateControlPoints(e,i,n){const s=e.x-i.x,o=e.y-i.y,h=i.x-n.x,r=i.y-n.y,a=(e.x+i.x)/2,d=(e.y+i.y)/2,c=(i.x+n.x)/2,l=(i.y+n.y)/2,u=Math.sqrt(s*s+o*o),v=Math.sqrt(h*h+r*r),_=v/(u+v),m=c+(a-c)*_,p=l+(d-l)*_,g=i.x-m,w=i.y-p;return{c1:new t(a+g,d+w),c2:new t(c+g,l+w)}}length(){let t,e,i=0;for(let n=0;n<=10;n+=1){const s=n/10,o=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(n>0){const n=o-t,s=h-e;i+=Math.sqrt(n*n+s*s)}t=o,e=h}return i}point(t,e,i,n,s){return e*(1-t)*(1-t)*(1-t)+3*i*(1-t)*(1-t)*t+3*n*(1-t)*t*t+s*t*t*t}}class i extends class{constructor(){try{this._et=new EventTarget}catch(t){this._et=document}}addEventListener(t,e,i){this._et.addEventListener(t,e,i)}dispatchEvent(t){return this._et.dispatchEvent(t)}removeEventListener(t,e,i){this._et.removeEventListener(t,e,i)}}{constructor(t,e={}){super(),this.canvas=t,this._handleMouseDown=t=>{1===t.buttons&&(this._drawningStroke=!0,this._strokeBegin(t))},this._handleMouseMove=t=>{this._drawningStroke&&this._strokeMoveUpdate(t)},this._handleMouseUp=t=>{1===t.buttons&&this._drawningStroke&&(this._drawningStroke=!1,this._strokeEnd(t))},this._handleTouchStart=t=>{if(t.cancelable&&t.preventDefault(),1===t.targetTouches.length){const e=t.changedTouches[0];this._strokeBegin(e)}},this._handleTouchMove=t=>{t.cancelable&&t.preventDefault();const e=t.targetTouches[0];this._strokeMoveUpdate(e)},this._handleTouchEnd=t=>{if(t.target===this.canvas){t.cancelable&&t.preventDefault();const e=t.changedTouches[0];this._strokeEnd(e)}},this._handlePointerStart=t=>{this._drawningStroke=!0,t.preventDefault(),this._strokeBegin(t)},this._handlePointerMove=t=>{this._drawningStroke&&(t.preventDefault(),this._strokeMoveUpdate(t))},this._handlePointerEnd=t=>{this._drawningStroke&&(t.preventDefault(),this._drawningStroke=!1,this._strokeEnd(t))},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.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this._strokeMoveUpdate=this.throttle?function(t,e=250){let i,n,s,o=0,h=null;const r=()=>{o=Date.now(),h=null,i=t.apply(n,s),h||(n=null,s=[])};return function(...a){const d=Date.now(),c=e-(d-o);return n=this,s=a,c<=0||c>e?(h&&(clearTimeout(h),h=null),o=d,i=t.apply(n,s),h||(n=null,s=[])):h||(h=window.setTimeout(r,c)),i}}(i.prototype._strokeUpdate,this.throttle):i.prototype._strokeUpdate,this._ctx=t.getContext("2d"),this.clear(),this.on()}clear(){const{_ctx:t,canvas:e}=this;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._getPointGroupOptions()),this._isEmpty=!0}fromDataURL(t,e={}){return new Promise(((i,n)=>{const s=new Image,o=e.ratio||window.devicePixelRatio||1,h=e.width||this.canvas.width/o,r=e.height||this.canvas.height/o,a=e.xOffset||0,d=e.yOffset||0;this._reset(this._getPointGroupOptions()),s.onload=()=>{this._ctx.drawImage(s,a,d,h,r),i()},s.onerror=t=>{n(t)},s.crossOrigin="anonymous",s.src=t,this._isEmpty=!1}))}toDataURL(t="image/png",e){return"image/svg+xml"===t?this._toSVG():this.canvas.toDataURL(t,e)}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none";const t=/Macintosh/.test(navigator.userAgent)&&"ontouchstart"in document;window.PointerEvent&&!t?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.style.userSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerStart),this.canvas.removeEventListener("pointermove",this._handlePointerMove),this.canvas.ownerDocument.removeEventListener("pointerup",this._handlePointerEnd),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),this.canvas.ownerDocument.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,{clear:e=!0}={}){e&&this.clear(),this._fromData(t,this._drawCurve.bind(this),this._drawDot.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_getPointGroupOptions(t){return{penColor:t&&"penColor"in t?t.penColor:this.penColor,dotSize:t&&"dotSize"in t?t.dotSize:this.dotSize,minWidth:t&&"minWidth"in t?t.minWidth:this.minWidth,maxWidth:t&&"maxWidth"in t?t.maxWidth:this.maxWidth,velocityFilterWeight:t&&"velocityFilterWeight"in t?t.velocityFilterWeight:this.velocityFilterWeight}}_strokeBegin(t){this.dispatchEvent(new CustomEvent("beginStroke",{detail:t}));const e=this._getPointGroupOptions(),i=Object.assign(Object.assign({},e),{points:[]});this._data.push(i),this._reset(e),this._strokeUpdate(t)}_strokeUpdate(t){if(0===this._data.length)return void this._strokeBegin(t);this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));const e=t.clientX,i=t.clientY,n=void 0!==t.pressure?t.pressure:void 0!==t.force?t.force:0,s=this._createPoint(e,i,n),o=this._data[this._data.length-1],h=o.points,r=h.length>0&&h[h.length-1],a=!!r&&s.distanceTo(r)<=this.minDistance,d=this._getPointGroupOptions(o);if(!r||!r||!a){const t=this._addPoint(s,d);r?t&&this._drawCurve(t,d):this._drawDot(s,d),h.push({time:s.time,x:s.x,y:s.y,pressure:s.pressure})}this.dispatchEvent(new CustomEvent("afterUpdateStroke",{detail:t}))}_strokeEnd(t){this._strokeUpdate(t),this.dispatchEvent(new CustomEvent("endStroke",{detail:t}))}_handlePointerEvents(){this._drawningStroke=!1,this.canvas.addEventListener("pointerdown",this._handlePointerStart),this.canvas.addEventListener("pointermove",this._handlePointerMove),this.canvas.ownerDocument.addEventListener("pointerup",this._handlePointerEnd)}_handleMouseEvents(){this._drawningStroke=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),this.canvas.ownerDocument.addEventListener("mouseup",this._handleMouseUp)}_handleTouchEvents(){this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)}_reset(t){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(t.minWidth+t.maxWidth)/2,this._ctx.fillStyle=t.penColor}_createPoint(e,i,n){const s=this.canvas.getBoundingClientRect();return new t(e-s.left,i-s.top,n,(new Date).getTime())}_addPoint(t,i){const{_lastPoints:n}=this;if(n.push(t),n.length>2){3===n.length&&n.unshift(n[0]);const t=this._calculateCurveWidths(n[1],n[2],i),s=e.fromPoints(n,t);return n.shift(),s}return null}_calculateCurveWidths(t,e,i){const n=i.velocityFilterWeight*e.velocityFrom(t)+(1-i.velocityFilterWeight)*this._lastVelocity,s=this._strokeWidth(n,i),o={end:s,start:this._lastWidth};return this._lastVelocity=n,this._lastWidth=s,o}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,i){const n=this._ctx;n.moveTo(t,e),n.arc(t,e,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){const i=this._ctx,n=t.endWidth-t.startWidth,s=2*Math.ceil(t.length());i.beginPath(),i.fillStyle=e.penColor;for(let i=0;i<s;i+=1){const o=i/s,h=o*o,r=h*o,a=1-o,d=a*a,c=d*a;let l=c*t.startPoint.x;l+=3*d*o*t.control1.x,l+=3*a*h*t.control2.x,l+=r*t.endPoint.x;let u=c*t.startPoint.y;u+=3*d*o*t.control1.y,u+=3*a*h*t.control2.y,u+=r*t.endPoint.y;const v=Math.min(t.startWidth+r*n,e.maxWidth);this._drawCurveSegment(l,u,v)}i.closePath(),i.fill()}_drawDot(t,e){const i=this._ctx,n=e.dotSize>0?e.dotSize:(e.minWidth+e.maxWidth)/2;i.beginPath(),this._drawCurveSegment(t.x,t.y,n),i.closePath(),i.fillStyle=e.penColor,i.fill()}_fromData(e,i,n){for(const s of e){const{points:e}=s,o=this._getPointGroupOptions(s);if(e.length>1)for(let n=0;n<e.length;n+=1){const s=e[n],h=new t(s.x,s.y,s.pressure,s.time);0===n&&this._reset(o);const r=this._addPoint(h,o);r&&i(r,o)}else this._reset(o),n(e[0],o)}}_toSVG(){const t=this._data,e=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/e,n=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,((t,{penColor:e})=>{const i=document.createElement("path");if(!(isNaN(t.control1.x)||isNaN(t.control1.y)||isNaN(t.control2.x)||isNaN(t.control2.y))){const n=`M ${t.startPoint.x.toFixed(3)},${t.startPoint.y.toFixed(3)} C ${t.control1.x.toFixed(3)},${t.control1.y.toFixed(3)} ${t.control2.x.toFixed(3)},${t.control2.y.toFixed(3)} ${t.endPoint.x.toFixed(3)},${t.endPoint.y.toFixed(3)}`;i.setAttribute("d",n),i.setAttribute("stroke-width",(2.25*t.endWidth).toFixed(3)),i.setAttribute("stroke",e),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),s.appendChild(i)}}),((t,{penColor:e,dotSize:i,minWidth:n,maxWidth:o})=>{const h=document.createElement("circle"),r=i>0?i:(n+o)/2;h.setAttribute("r",r.toString()),h.setAttribute("cx",t.x.toString()),h.setAttribute("cy",t.y.toString()),h.setAttribute("fill",e),s.appendChild(h)}));const o=`<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}">`;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(o+h+"</svg>")}}return i}));
 //# sourceMappingURL=signature_pad.umd.min.js.map

dist/types/signature_pad.d.ts

@@ -27,6 +27,6 @@ /**
     penColor: string;
+    velocityFilterWeight: number;
 }
 export interface Options extends Partial<PointGroupOptions> {
     minDistance?: number;
-    velocityFilterWeight?: number;
     backgroundColor?: string;
@@ -80,2 +80,3 @@ throttle?: number;
     private _handlePointerEnd;
+    private _getPointGroupOptions;
     private _strokeBegin;
@@ -82,0 +83,0 @@ private _strokeUpdate;

docs/js/signature_pad.umd.js

 /*!
- * Signature Pad v4.0.8 | https://github.com/szimek/signature_pad
+ * Signature Pad v4.0.9 | https://github.com/szimek/signature_pad
  * (c) 2022 Szymon Nowak | Released under the MIT license
@@ -244,3 +244,3 @@ */
             this._data = [];
-            this._reset();
+            this._reset(this._getPointGroupOptions());
             this._isEmpty = true;
@@ -256,3 +256,3 @@ }
                 const yOffset = options.yOffset || 0;
-                this._reset();
+                this._reset(this._getPointGroupOptions());
                 image.onload = () => {
@@ -320,13 +320,19 @@ this._ctx.drawImage(image, xOffset, yOffset, width, height);
         }
+        _getPointGroupOptions(group) {
+            return {
+                penColor: group && 'penColor' in group ? group.penColor : this.penColor,
+                dotSize: group && 'dotSize' in group ? group.dotSize : this.dotSize,
+                minWidth: group && 'minWidth' in group ? group.minWidth : this.minWidth,
+                maxWidth: group && 'maxWidth' in group ? group.maxWidth : this.maxWidth,
+                velocityFilterWeight: group && 'velocityFilterWeight' in group
+                    ? group.velocityFilterWeight
+                    : this.velocityFilterWeight,
+            };
+        }
         _strokeBegin(event) {
             this.dispatchEvent(new CustomEvent('beginStroke', { detail: event }));
-            const newPointGroup = {
-                dotSize: this.dotSize,
-                minWidth: this.minWidth,
-                maxWidth: this.maxWidth,
-                penColor: this.penColor,
-                points: [],
-            };
+            const pointGroupOptions = this._getPointGroupOptions();
+            const newPointGroup = Object.assign(Object.assign({}, pointGroupOptions), { points: [] });
             this._data.push(newPointGroup);
-            this._reset();
+            this._reset(pointGroupOptions);
             this._strokeUpdate(event);
@@ -354,20 +360,10 @@ }
                 : false;
-            const { penColor, dotSize, minWidth, maxWidth } = lastPointGroup;
+            const pointGroupOptions = this._getPointGroupOptions(lastPointGroup);
             if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
-                const curve = this._addPoint(point);
+                const curve = this._addPoint(point, pointGroupOptions);
                 if (!lastPoint) {
-                    this._drawDot(point, {
-                        penColor,
-                        dotSize,
-                        minWidth,
-                        maxWidth,
-                    });
+                    this._drawDot(point, pointGroupOptions);
                 }
                 else if (curve) {
-                    this._drawCurve(curve, {
-                        penColor,
-                        dotSize,
-                        minWidth,
-                        maxWidth,
-                    });
+                    this._drawCurve(curve, pointGroupOptions);
                 }
@@ -404,7 +400,7 @@ lastPoints.push({
         }
-        _reset() {
+        _reset(options) {
             this._lastPoints = [];
             this._lastVelocity = 0;
-            this._lastWidth = (this.minWidth + this.maxWidth) / 2;
-            this._ctx.fillStyle = this.penColor;
+            this._lastWidth = (options.minWidth + options.maxWidth) / 2;
+            this._ctx.fillStyle = options.penColor;
         }
@@ -415,3 +411,3 @@ _createPoint(x, y, pressure) {
         }
-        _addPoint(point) {
+        _addPoint(point, options) {
             const { _lastPoints } = this;
@@ -423,3 +419,3 @@ _lastPoints.push(point);
                 }
-                const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
+                const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2], options);
                 const curve = Bezier.fromPoints(_lastPoints, widths);
@@ -431,6 +427,6 @@ _lastPoints.shift();
         }
-        _calculateCurveWidths(startPoint, endPoint) {
-            const velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
-                (1 - this.velocityFilterWeight) * this._lastVelocity;
-            const newWidth = this._strokeWidth(velocity);
+        _calculateCurveWidths(startPoint, endPoint, options) {
+            const velocity = options.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
+                (1 - options.velocityFilterWeight) * this._lastVelocity;
+            const newWidth = this._strokeWidth(velocity, options);
             const widths = {
@@ -444,4 +440,4 @@ end: newWidth,
         }
-        _strokeWidth(velocity) {
-            return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+        _strokeWidth(velocity, options) {
+            return Math.max(options.maxWidth / (velocity + 1), options.minWidth);
         }
@@ -494,3 +490,4 @@ _drawCurveSegment(x, y, width) {
             for (const group of pointGroups) {
-                const { penColor, dotSize, minWidth, maxWidth, points } = group;
+                const { points } = group;
+                const pointGroupOptions = this._getPointGroupOptions(group);
                 if (points.length > 1) {
@@ -500,14 +497,8 @@ for (let j = 0; j < points.length; j += 1) {
                         const point = new Point(basicPoint.x, basicPoint.y, basicPoint.pressure, basicPoint.time);
-                        this.penColor = penColor;
                         if (j === 0) {
-                            this._reset();
+                            this._reset(pointGroupOptions);
                         }
-                        const curve = this._addPoint(point);
+                        const curve = this._addPoint(point, pointGroupOptions);
                         if (curve) {
-                            drawCurve(curve, {
-                                penColor,
-                                dotSize,
-                                minWidth,
-                                maxWidth,
-                            });
+                            drawCurve(curve, pointGroupOptions);
                         }
@@ -517,9 +508,4 @@ }
                 else {
-                    this._reset();
-                    drawDot(points[0], {
-                        penColor,
-                        dotSize,
-                        minWidth,
-                        maxWidth,
-                    });
+                    this._reset(pointGroupOptions);
+                    drawDot(points[0], pointGroupOptions);
                 }
@@ -526,0 +512,0 @@ }

package.json

 {
   "name": "signature_pad",
   "description": "Library for drawing smooth signatures.",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "homepage": "https://github.com/szimek/signature_pad",
@@ -6,0 +6,0 @@ "author": {

src/signature_pad.ts

@@ -34,2 +34,3 @@ /**
   penColor: string;
+  velocityFilterWeight: number;
 }
@@ -39,3 +40,2 @@
   minDistance?: number;
-  velocityFilterWeight?: number;
   backgroundColor?: string;
@@ -105,3 +105,3 @@ throttle?: number;
     this._data = [];
-    this._reset();
+    this._reset(this._getPointGroupOptions());
     this._isEmpty = true;
@@ -128,3 +128,3 @@ }
 
-      this._reset();
+      this._reset(this._getPointGroupOptions());
 
@@ -301,2 +301,15 @@ image.onload = (): void => {
 
+  private _getPointGroupOptions(group?: PointGroup) {
+    return {
+      penColor: group && 'penColor' in group ? group.penColor : this.penColor,
+      dotSize: group && 'dotSize' in group ? group.dotSize : this.dotSize,
+      minWidth: group && 'minWidth' in group ? group.minWidth : this.minWidth,
+      maxWidth: group && 'maxWidth' in group ? group.maxWidth : this.maxWidth,
+      velocityFilterWeight:
+        group && 'velocityFilterWeight' in group
+          ? group.velocityFilterWeight
+          : this.velocityFilterWeight,
+    };
+  }
+
   // Private methods
@@ -306,7 +319,6 @@ private _strokeBegin(event: SignatureEvent): void {
 
+    const pointGroupOptions = this._getPointGroupOptions();
+
     const newPointGroup: PointGroup = {
-      dotSize: this.dotSize,
-      minWidth: this.minWidth,
-      maxWidth: this.maxWidth,
-      penColor: this.penColor,
+      ...pointGroupOptions,
       points: [],
@@ -316,3 +328,3 @@ };
     this._data.push(newPointGroup);
-    this._reset();
+    this._reset(pointGroupOptions);
     this._strokeUpdate(event);
@@ -350,22 +362,12 @@ }
       : false;
-    const { penColor, dotSize, minWidth, maxWidth } = lastPointGroup;
+    const pointGroupOptions = this._getPointGroupOptions(lastPointGroup);
 
     // Skip this point if it's too close to the previous one
     if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
-      const curve = this._addPoint(point);
+      const curve = this._addPoint(point, pointGroupOptions);
 
       if (!lastPoint) {
-        this._drawDot(point, {
-          penColor,
-          dotSize,
-          minWidth,
-          maxWidth,
-        });
+        this._drawDot(point, pointGroupOptions);
       } else if (curve) {
-        this._drawCurve(curve, {
-          penColor,
-          dotSize,
-          minWidth,
-          maxWidth,
-        });
+        this._drawCurve(curve, pointGroupOptions);
       }
@@ -416,7 +418,7 @@
   // Called when a new line is started
-  private _reset(): void {
+  private _reset(options: PointGroupOptions): void {
     this._lastPoints = [];
     this._lastVelocity = 0;
-    this._lastWidth = (this.minWidth + this.maxWidth) / 2;
-    this._ctx.fillStyle = this.penColor;
+    this._lastWidth = (options.minWidth + options.maxWidth) / 2;
+    this._ctx.fillStyle = options.penColor;
   }
@@ -436,3 +438,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 {
+  private _addPoint(point: Point, options: PointGroupOptions): Bezier | null {
     const { _lastPoints } = this;
@@ -450,3 +452,7 @@
       // _points array will always have 4 points here.
-      const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2]);
+      const widths = this._calculateCurveWidths(
+        _lastPoints[1],
+        _lastPoints[2],
+        options,
+      );
       const curve = Bezier.fromPoints(_lastPoints, widths);
@@ -466,8 +472,9 @@
     endPoint: Point,
+    options: PointGroupOptions,
   ): { start: number; end: number } {
     const velocity =
-      this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
-      (1 - this.velocityFilterWeight) * this._lastVelocity;
+      options.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
+      (1 - options.velocityFilterWeight) * this._lastVelocity;
 
-    const newWidth = this._strokeWidth(velocity);
+    const newWidth = this._strokeWidth(velocity, options);
 
@@ -485,4 +492,4 @@ const widths = {
 
-  private _strokeWidth(velocity: number): number {
-    return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+  private _strokeWidth(velocity: number, options: PointGroupOptions): number {
+    return Math.max(options.maxWidth / (velocity + 1), options.minWidth);
   }
@@ -501,3 +508,3 @@
     const widthDelta = curve.endWidth - curve.startWidth;
-    // '2' is just an arbitrary number here. If only lenght is used, then
+    // '2' is just an arbitrary number here. If only length is used, then
     // there are gaps between curve segments :/
@@ -559,3 +566,4 @@ const drawSteps = Math.ceil(curve.length()) * 2;
     for (const group of pointGroups) {
-      const { penColor, dotSize, minWidth, maxWidth, points } = group;
+      const { points } = group;
+      const pointGroupOptions = this._getPointGroupOptions(group);
 
@@ -572,30 +580,16 @@ if (points.length > 1) {
 
-          // All points in the group have the same color, so it's enough to set
-          // penColor just at the beginning.
-          this.penColor = penColor;
-
           if (j === 0) {
-            this._reset();
+            this._reset(pointGroupOptions);
           }
 
-          const curve = this._addPoint(point);
+          const curve = this._addPoint(point, pointGroupOptions);
 
           if (curve) {
-            drawCurve(curve, {
-              penColor,
-              dotSize,
-              minWidth,
-              maxWidth,
-            });
+            drawCurve(curve, pointGroupOptions);
           }
         }
       } else {
-        this._reset();
+        this._reset(pointGroupOptions);
 
-        drawDot(points[0], {
-          penColor,
-          dotSize,
-          minWidth,
-          maxWidth,
-        });
+        drawDot(points[0], pointGroupOptions);
       }
@@ -602,0 +596,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

234509

increased by1.1%

Worsened metrics

Lines of code

2930

decreased by-1.58%

No dependency changes