vue2-signature/dist/vue2-signature.js

Vue 2 signature pad component

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):"object"==typeof exports?exports.Vue2Signature=e(require("vue")):t.Vue2Signature=e(t.vue)}(this,t=>(()=>{var e={149:(t,e,n)=>{"use strict";n.r(e),n.d(e,{default:()=>a});var i=n(601),r=n.n(i),o=n(314),s=n.n(o)()(r());s.push([t.id,"\n.vue2-signature__canvas[data-v-26206faa] {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n",""]);const a=s},314:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n="",i=void 0!==e[5];return e[4]&&(n+="@supports (".concat(e[4],") {")),e[2]&&(n+="@media ".concat(e[2]," {")),i&&(n+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),n+=t(e),i&&(n+="}"),e[2]&&(n+="}"),e[4]&&(n+="}"),n}).join("")},e.i=function(t,n,i,r,o){"string"==typeof t&&(t=[[null,t,void 0]]);var s={};if(i)for(var a=0;a<this.length;a++){var h=this[a][0];null!=h&&(s[h]=!0)}for(var d=0;d<t.length;d++){var l=[].concat(t[d]);i&&s[l[0]]||(void 0!==o&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=o),n&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=n):l[2]=n),r&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=r):l[4]="".concat(r)),e.push(l))}},e}},380:e=>{"use strict";e.exports=t},534:(t,e,n)=>{"use strict";function i(t,e){for(var n=[],i={},r=0;r<e.length;r++){var o=e[r],s=o[0],a={id:t+":"+r,css:o[1],media:o[2],sourceMap:o[3]};i[s]?i[s].parts.push(a):n.push(i[s]={id:s,parts:[a]})}return n}n.d(e,{A:()=>p});var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},s=r&&(document.head||document.getElementsByTagName("head")[0]),a=null,h=0,d=!1,l=function(){},u=null,c="data-vue-ssr-id",v="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(t,e,n,r){d=n,u=r||{};var s=i(t,e);return f(s),function(e){for(var n=[],r=0;r<s.length;r++){var a=s[r];(h=o[a.id]).refs--,n.push(h)}for(e?f(s=i(t,e)):s=[],r=0;r<n.length;r++){var h;if(0===(h=n[r]).refs){for(var d=0;d<h.parts.length;d++)h.parts[d]();delete o[h.id]}}}}function f(t){for(var e=0;e<t.length;e++){var n=t[e],i=o[n.id];if(i){i.refs++;for(var r=0;r<i.parts.length;r++)i.parts[r](n.parts[r]);for(;r<n.parts.length;r++)i.parts.push(m(n.parts[r]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var s=[];for(r=0;r<n.parts.length;r++)s.push(m(n.parts[r]));o[n.id]={id:n.id,refs:1,parts:s}}}}function g(){var t=document.createElement("style");return t.type="text/css",s.appendChild(t),t}function m(t){var e,n,i=document.querySelector("style["+c+'~="'+t.id+'"]');if(i){if(d)return l;i.parentNode.removeChild(i)}if(v){var r=h++;i=a||(a=g()),e=w.bind(null,i,r,!1),n=w.bind(null,i,r,!0)}else i=g(),e=b.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}var _,y=(_=[],function(t,e){return _[t]=e,_.filter(Boolean).join("\n")});function w(t,e,n,i){var r=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=y(e,r);else{var o=document.createTextNode(r),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(o,s[e]):t.appendChild(o)}}function b(t,e){var n=e.css,i=e.media,r=e.sourceMap;if(i&&t.setAttribute("media",i),u.ssrId&&t.setAttribute(c,e.id),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}},582:(t,e,n)=>{var i=n(149);i.__esModule&&(i=i.default),"string"==typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals),(0,n(534).A)("0cb35bfe",i,!1,{})},601:t=>{"use strict";t.exports=function(t){return t[1]}}},n={};function i(t){var r=n[t];if(void 0!==r)return r.exports;var o=n[t]={id:t,exports:{}};return e[t](o,o.exports,i),o.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{"use strict";i.d(r,{default:()=>y});var t=function(){var t=this,e=t._self._c;return t._self._setupProxy,e("div",{staticClass:"vue2-signature",style:{width:t.w,height:t.h},on:{touchmove:function(t){t.preventDefault()}}},[e("canvas",{ref:"canvasRef",staticClass:"vue2-signature__canvas",attrs:{"data-uid":t.canvasUid}})])};t._withStripped=!0;var e=i(380),n=i.n(e),o=class{x;y;pressure;time;constructor(t,e,n,i){if(isNaN(t)||isNaN(e))throw new Error(`Point is invalid: (${t}, ${e})`);this.x=+t,this.y=+e,this.pressure=n||0,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.pressure===t.pressure&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}},s=class t{constructor(t,e,n,i,r,o){this.startPoint=t,this.control2=e,this.control1=n,this.endPoint=i,this.startWidth=r,this.endWidth=o}static fromPoints(e,n){const i=this.calculateControlPoints(e[0],e[1],e[2]).c2,r=this.calculateControlPoints(e[1],e[2],e[3]).c1;return new t(e[1],i,r,e[2],n.start,n.end)}static calculateControlPoints(t,e,n){const i=t.x-e.x,r=t.y-e.y,s=e.x-n.x,a=e.y-n.y,h=(t.x+e.x)/2,d=(t.y+e.y)/2,l=(e.x+n.x)/2,u=(e.y+n.y)/2,c=Math.sqrt(i*i+r*r),v=Math.sqrt(s*s+a*a),p=c+v==0?0:v/(c+v),f=l+(h-l)*p,g=u+(d-u)*p,m=e.x-f,_=e.y-g;return{c1:new o(h+m,d+_),c2:new o(l+m,u+_)}}length(){let t,e,n=0;for(let i=0;i<=10;i+=1){const r=i/10,o=this.point(r,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),s=this.point(r,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(i>0){const i=o-t,r=s-e;n+=Math.sqrt(i*i+r*r)}t=o,e=s}return n}point(t,e,n,i,r){return e*(1-t)*(1-t)*(1-t)+3*n*(1-t)*(1-t)*t+3*i*(1-t)*t*t+r*t*t*t}},a=class{_et;constructor(){try{this._et=new EventTarget}catch{this._et=document}}addEventListener(t,e,n){this._et.addEventListener(t,e,n)}dispatchEvent(t){return this._et.dispatchEvent(t)}removeEventListener(t,e,n){this._et.removeEventListener(t,e,n)}},h=class t extends a{constructor(e,n={}){super(),this.canvas=e,this.velocityFilterWeight=n.velocityFilterWeight||.7,this.minWidth=n.minWidth||.5,this.maxWidth=n.maxWidth||2.5,this.throttle=n.throttle??16,this.minDistance=n.minDistance??5,this.dotSize=n.dotSize||0,this.penColor=n.penColor||"black",this.backgroundColor=n.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=n.compositeOperation||"source-over",this.canvasContextOptions=n.canvasContextOptions??{},this._strokeMoveUpdate=this.throttle?function(t,e=250){let n,i,r,o=0,s=null;const a=()=>{o=Date.now(),s=null,n=t.apply(i,r),s||(i=null,r=[])};return function(...h){const d=Date.now(),l=e-(d-o);return i=this,r=h,l<=0||l>e?(s&&(clearTimeout(s),s=null),o=d,n=t.apply(i,r),s||(i=null,r=[])):s||(s=window.setTimeout(a,l)),n}}(t.prototype._strokeUpdate,this.throttle):t.prototype._strokeUpdate,this._handleMouseDown=this._handleMouseDown.bind(this),this._handleMouseMove=this._handleMouseMove.bind(this),this._handleMouseUp=this._handleMouseUp.bind(this),this._handleTouchStart=this._handleTouchStart.bind(this),this._handleTouchMove=this._handleTouchMove.bind(this),this._handleTouchEnd=this._handleTouchEnd.bind(this),this._handlePointerDown=this._handlePointerDown.bind(this),this._handlePointerMove=this._handlePointerMove.bind(this),this._handlePointerUp=this._handlePointerUp.bind(this),this._handlePointerCancel=this._handlePointerCancel.bind(this),this._handleTouchCancel=this._handleTouchCancel.bind(this),this._ctx=e.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}dotSize;minWidth;maxWidth;penColor;minDistance;velocityFilterWeight;compositeOperation;backgroundColor;throttle;canvasContextOptions;_ctx;_drawingStroke=!1;_isEmpty=!0;_dataUrl;_dataUrlOptions;_lastPoints=[];_data=[];_lastVelocity=0;_lastWidth=0;_strokeMoveUpdate;_strokePointerId;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,this._dataUrl=void 0,this._dataUrlOptions=void 0,this._strokePointerId=void 0}redraw(){const t=this._data,e=this._dataUrl,n=this._dataUrlOptions;this.clear(),e&&this.fromDataURL(e,n),this.fromData(t,{clear:!1})}fromDataURL(t,e={}){return new Promise((n,i)=>{const r=new Image,o=e.ratio||window.devicePixelRatio||1,s=e.width||this.canvas.width/o,a=e.height||this.canvas.height/o,h=e.xOffset||0,d=e.yOffset||0;this._reset(this._getPointGroupOptions()),r.onload=()=>{this._ctx.drawImage(r,h,d,s,a),n()},r.onerror=t=>{i(t)},r.crossOrigin="anonymous",r.src=t,this._isEmpty=!1,this._dataUrl=t,this._dataUrlOptions={...e}})}toDataURL(t="image/png",e){return"image/svg+xml"===t?("object"!=typeof e&&(e=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(e))}`):("number"!=typeof e&&(e=void 0),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._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){const t=window.document===this.canvas.ownerDocument?window:this.canvas.ownerDocument.defaultView??this.canvas.ownerDocument;return{addEventListener:t.addEventListener.bind(t),removeEventListener:t.removeEventListener.bind(t)}}_removeMoveUpEventListeners(){const{removeEventListener:t}=this._getListenerFunctions();t("pointermove",this._handlePointerMove),t("pointerup",this._handlePointerUp),t("pointercancel",this._handlePointerCancel),t("mousemove",this._handleMouseMove),t("mouseup",this._handleMouseUp),t("touchmove",this._handleTouchMove),t("touchend",this._handleTouchEnd),t("touchcancel",this._handleTouchCancel)}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}_isLeftButtonPressed(t,e){return e?1===t.buttons:!(1&~t.buttons)}_pointerEventToSignatureEvent(t){return{event:t,type:t.type,x:t.clientX,y:t.clientY,pressure:"pressure"in t?t.pressure:0}}_touchEventToSignatureEvent(t){const e=t.changedTouches[0];return{event:t,type:t.type,x:e.clientX,y:e.clientY,pressure:e.force}}_handleMouseDown(t){this._isLeftButtonPressed(t,!0)&&!this._drawingStroke&&this._strokeBegin(this._pointerEventToSignatureEvent(t))}_handleMouseMove(t){this._isLeftButtonPressed(t,!0)&&this._drawingStroke?this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t)):this._strokeEnd(this._pointerEventToSignatureEvent(t),!1)}_handleMouseUp(t){this._isLeftButtonPressed(t)||this._strokeEnd(this._pointerEventToSignatureEvent(t))}_handleTouchStart(t){1!==t.targetTouches.length||this._drawingStroke||(t.cancelable&&t.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(t)))}_handleTouchMove(t){1===t.targetTouches.length&&(t.cancelable&&t.preventDefault(),this._drawingStroke?this._strokeMoveUpdate(this._touchEventToSignatureEvent(t)):this._strokeEnd(this._touchEventToSignatureEvent(t),!1))}_handleTouchEnd(t){0===t.targetTouches.length&&(t.cancelable&&t.preventDefault(),this._strokeEnd(this._touchEventToSignatureEvent(t)))}_handlePointerCancel(t){this._allowPointerId(t)&&(t.preventDefault(),this._strokeEnd(this._pointerEventToSignatureEvent(t),!1))}_handleTouchCancel(t){t.cancelable&&t.preventDefault(),this._strokeEnd(this._touchEventToSignatureEvent(t),!1)}_getPointerId(t){return t.persistentDeviceId||t.pointerId}_allowPointerId(t,e=!1){return void 0===this._strokePointerId?e:this._getPointerId(t)===this._strokePointerId}_handlePointerDown(t){!this._drawingStroke&&this._isLeftButtonPressed(t)&&this._allowPointerId(t,!0)&&(this._strokePointerId=this._getPointerId(t),t.preventDefault(),this._strokeBegin(this._pointerEventToSignatureEvent(t)))}_handlePointerMove(t){this._allowPointerId(t)&&(this._isLeftButtonPressed(t,!0)&&this._drawingStroke?(t.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))):this._strokeEnd(this._pointerEventToSignatureEvent(t),!1))}_handlePointerUp(t){!this._isLeftButtonPressed(t)&&this._allowPointerId(t)&&(t.preventDefault(),this._strokeEnd(this._pointerEventToSignatureEvent(t)))}_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,compositeOperation:t&&"compositeOperation"in t?t.compositeOperation:this.compositeOperation}}_strokeBegin(t){if(!this.dispatchEvent(new CustomEvent("beginStroke",{detail:t,cancelable:!0})))return;const{addEventListener:e}=this._getListenerFunctions();switch(t.event.type){case"mousedown":e("mousemove",this._handleMouseMove,{passive:!1}),e("mouseup",this._handleMouseUp,{passive:!1});break;case"touchstart":e("touchmove",this._handleTouchMove,{passive:!1}),e("touchend",this._handleTouchEnd,{passive:!1}),e("touchcancel",this._handleTouchCancel,{passive:!1});break;case"pointerdown":e("pointermove",this._handlePointerMove,{passive:!1}),e("pointerup",this._handlePointerUp,{passive:!1}),e("pointercancel",this._handlePointerCancel,{passive:!1})}this._drawingStroke=!0;const n=this._getPointGroupOptions(),i={...n,points:[]};this._data.push(i),this._reset(n),this._strokeUpdate(t)}_strokeUpdate(t){if(!this._drawingStroke)return;if(0===this._data.length)return void this._strokeBegin(t);this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));const e=this._createPoint(t.x,t.y,t.pressure),n=this._data[this._data.length-1],i=n.points,r=i.length>0&&i[i.length-1],o=!!r&&e.distanceTo(r)<=this.minDistance,s=this._getPointGroupOptions(n);if(!r||!r||!o){const t=this._addPoint(e,s);r?t&&this._drawCurve(t,s):this._drawDot(e,s),i.push({time:e.time,x:e.x,y:e.y,pressure:e.pressure})}this.dispatchEvent(new CustomEvent("afterUpdateStroke",{detail:t}))}_strokeEnd(t,e=!0){this._removeMoveUpEventListeners(),this._drawingStroke&&(e&&this._strokeUpdate(t),this._drawingStroke=!1,this._strokePointerId=void 0,this.dispatchEvent(new CustomEvent("endStroke",{detail:t})))}_handlePointerEvents(){this._drawingStroke=!1,this.canvas.addEventListener("pointerdown",this._handlePointerDown,{passive:!1})}_handleMouseEvents(){this._drawingStroke=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown,{passive:!1})}_handleTouchEvents(){this.canvas.addEventListener("touchstart",this._handleTouchStart,{passive:!1})}_reset(t){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(t.minWidth+t.maxWidth)/2,this._ctx.fillStyle=t.penColor,this._ctx.globalCompositeOperation=t.compositeOperation}_createPoint(t,e,n){const i=this.canvas.getBoundingClientRect();return new o(t-i.left,e-i.top,n,(new Date).getTime())}_addPoint(t,e){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],e),i=s.fromPoints(n,t);return n.shift(),i}return null}_calculateCurveWidths(t,e,n){const i=n.velocityFilterWeight*e.velocityFrom(t)+(1-n.velocityFilterWeight)*this._lastVelocity,r=this._strokeWidth(i,n),o={end:r,start:this._lastWidth};return this._lastVelocity=i,this._lastWidth=r,o}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,n){const i=this._ctx;i.moveTo(t,e),i.arc(t,e,n,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){const n=this._ctx,i=t.endWidth-t.startWidth,r=2*Math.ceil(t.length());n.beginPath(),n.fillStyle=e.penColor;for(let n=0;n<r;n+=1){const o=n/r,s=o*o,a=s*o,h=1-o,d=h*h,l=d*h;let u=l*t.startPoint.x;u+=3*d*o*t.control1.x,u+=3*h*s*t.control2.x,u+=a*t.endPoint.x;let c=l*t.startPoint.y;c+=3*d*o*t.control1.y,c+=3*h*s*t.control2.y,c+=a*t.endPoint.y;const v=Math.min(t.startWidth+a*i,e.maxWidth);this._drawCurveSegment(u,c,v)}n.closePath(),n.fill()}_drawDot(t,e){const n=this._ctx,i=e.dotSize>0?e.dotSize:(e.minWidth+e.maxWidth)/2;n.beginPath(),this._drawCurveSegment(t.x,t.y,i),n.closePath(),n.fillStyle=e.penColor,n.fill()}_fromData(t,e,n){for(const i of t){const{points:t}=i,r=this._getPointGroupOptions(i);if(t.length>1)for(let n=0;n<t.length;n+=1){const i=t[n],s=new o(i.x,i.y,i.pressure,i.time);0===n&&this._reset(r);const a=this._addPoint(s,r);a&&e(a,r)}else this._reset(r),n(t[0],r)}}toSVG({includeBackgroundColor:t=!1,includeDataUrl:e=!1}={}){const n=this._data,i=Math.max(window.devicePixelRatio||1,1),r=this.canvas.width/i,o=this.canvas.height/i,s=document.createElementNS("http://www.w3.org/2000/svg","svg");if(s.setAttribute("xmlns","http://www.w3.org/2000/svg"),s.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),s.setAttribute("viewBox",`0 0 ${r} ${o}`),s.setAttribute("width",r.toString()),s.setAttribute("height",o.toString()),t&&this.backgroundColor){const t=document.createElement("rect");t.setAttribute("width","100%"),t.setAttribute("height","100%"),t.setAttribute("fill",this.backgroundColor),s.appendChild(t)}if(e&&this._dataUrl){const t=this._dataUrlOptions?.ratio||window.devicePixelRatio||1,e=this._dataUrlOptions?.width||this.canvas.width/t,n=this._dataUrlOptions?.height||this.canvas.height/t,i=this._dataUrlOptions?.xOffset||0,r=this._dataUrlOptions?.yOffset||0,o=document.createElement("image");o.setAttribute("x",i.toString()),o.setAttribute("y",r.toString()),o.setAttribute("width",e.toString()),o.setAttribute("height",n.toString()),o.setAttribute("preserveAspectRatio","none"),o.setAttribute("href",this._dataUrl),s.appendChild(o)}return this._fromData(n,(t,{penColor:e})=>{const n=document.createElement("path");if(!(isNaN(t.control1.x)||isNaN(t.control1.y)||isNaN(t.control2.x)||isNaN(t.control2.y))){const i=`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)}`;n.setAttribute("d",i),n.setAttribute("stroke-width",(2.25*t.endWidth).toFixed(3)),n.setAttribute("stroke",e),n.setAttribute("fill","none"),n.setAttribute("stroke-linecap","round"),s.appendChild(n)}},(t,{penColor:e,dotSize:n,minWidth:i,maxWidth:r})=>{const o=document.createElement("circle"),a=n>0?n:(i+r)/2;o.setAttribute("r",a.toString()),o.setAttribute("cx",t.x.toString()),o.setAttribute("cy",t.y.toString()),o.setAttribute("fill",e),s.appendChild(o)}),s.outerHTML}};function d(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,i)}return n}function l(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?d(Object(n),!0).forEach(function(e){u(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):d(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function u(t,e,n){return(e=function(t){var e=function(t){if("object"!=c(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=c(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==c(e)?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function c(t){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},c(t)}function v(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=Array(e);n<e;n++)i[n]=t[n];return i}var p=null,f=new Map;const g=n().extend({name:"Vue2Signature",props:{sigOption:{type:Object,default:function(){return{}}},w:{type:String,default:"100%"},h:{type:String,default:"100%"},clearOnResize:{type:Boolean,default:!1},waterMark:{type:Object,default:function(){return{}}},disabled:{type:Boolean,default:!1},defaultUrl:{type:String,default:""}},data:function(){return{canvasUid:"canvas-".concat(Math.random().toString(36).slice(2,9)),history:[]}},created:function(){this.signaturePad=null,this.padEventHandlers=[]},mounted:function(){var t=this,e=this.$refs.canvasRef;if(e){var n=this.getOptions();this.signaturePad=new h(e,n),this.setupPadEvents(),this.applyDisabledState(this.disabled),this.$nextTick(function(){t.resizeCanvas(),t.defaultUrl?t.loadDefaultSignature(t.defaultUrl):Object.keys(t.waterMark).length&&t.addWaterMark(t.waterMark),t.$emit("ready",t.signaturePad)})}window.addEventListener("resize",this.resizeCanvas)},beforeDestroy:function(){window.removeEventListener("resize",this.resizeCanvas),this.destroySignaturePad()},watch:{sigOption:{deep:!0,handler:function(){if(this.signaturePad){var t=this.getOptions();Object.assign(this.signaturePad,t);var e=this.signaturePad.toData();this.signaturePad.clear(),this.signaturePad.fromData(e)}}},disabled:{immediate:!0,handler:function(t){this.applyDisabledState(t)}},defaultUrl:function(t){this.loadDefaultSignature(t)},w:function(){this.resizeCanvas()},h:function(){this.resizeCanvas()},waterMark:{deep:!0,handler:function(t){t&&Object.keys(t).length&&this.addWaterMark(t)}}},methods:{destroySignaturePad:function(){this.teardownPadEvents(),this.signaturePad&&(this.signaturePad.off(),this.signaturePad=null)},captureSignatureState:function(t){var e,n=[],i=!t.isEmpty();try{n=t.toData()}catch(t){console.warn("[vue2-signature] Failed to read signature data",t)}if(i)try{e=t.toDataURL()}catch(t){console.warn("[vue2-signature] Failed to capture dataURL",t)}return{hasSignature:i,strokes:n,dataUrl:e}},restoreSignatureState:function(t){t&&this.signaturePad&&t.hasSignature&&(t.strokes&&t.strokes.length?this.signaturePad.fromData(t.strokes):t.dataUrl&&this.signaturePad.fromDataURL(t.dataUrl).catch(function(){}))},setupPadEvents:function(){var t=this;if(this.signaturePad){this.teardownPadEvents();var e={beginStroke:function(e){return t.$emit("beginStroke",e)},endStroke:function(e){t.history=[],t.$emit("endStroke",e)},beforeUpdateStroke:function(e){return t.$emit("beforeUpdateStroke",e)},afterUpdateStroke:function(e){return t.$emit("afterUpdateStroke",e)}};Object.entries(e).forEach(function(e){var n,i,r=(i=2,function(t){if(Array.isArray(t))return t}(n=e)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,r,o,s,a=[],h=!0,d=!1;try{if(o=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;h=!1}else for(;!(h=(i=o.call(n)).done)&&(a.push(i.value),a.length!==e);h=!0);}catch(t){d=!0,r=t}finally{try{if(!h&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(d)throw r}}return a}}(n,i)||function(t,e){if(t){if("string"==typeof t)return v(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?v(t,e):void 0}}(n,i)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),o=r[0],s=r[1],a=function(t){var e=t.detail;s(e)};t.signaturePad.addEventListener(o,a),t.padEventHandlers.push({type:o,listener:a})}),this.signaturePad.onBegin=function(){return t.$emit("begin")},this.signaturePad.onEnd=function(){return t.$emit("end")}}},teardownPadEvents:function(){var t=this;this.signaturePad&&this.padEventHandlers.length&&(this.padEventHandlers.forEach(function(e){var n=e.type,i=e.listener;t.signaturePad.removeEventListener(n,i)}),this.padEventHandlers=[])},applyDisabledState:function(t){this.signaturePad&&(t?this.signaturePad.off():this.signaturePad.on())},resolveSize:function(t,e){if(/px$/i.test(t)){var n=Number(t.replace(/px/gi,""));return Number.isFinite(n)?n:e}return e},resizeCanvas:function(){var t=this.$refs.canvasRef,e=this.signaturePad;if(t&&e){var n;this.clearOnResize||e.isEmpty()||(n=this.captureSignatureState(e));var i=Math.max(window.devicePixelRatio||1,1),r=t.offsetWidth,o=t.offsetHeight,s=this.resolveSize(this.w,r),a=this.resolveSize(this.h,o);t.width=s*i,t.height=a*i;var h=t.getContext("2d");null==h||h.scale(i,i),e.clear(),n?this.restoreSignatureState(n):Object.keys(this.waterMark).length&&this.addWaterMark(this.waterMark)}},loadDefaultSignature:function(t){t&&this.signaturePad&&this.signaturePad.fromDataURL(t).catch(function(){})},getEffectiveBackgroundColor:function(t){var e,n,i,r;return null!==(e=null!==(n=null!=t?t:null===(i=this.signaturePad)||void 0===i?void 0:i.backgroundColor)&&void 0!==n?n:null===(r=this.sigOption)||void 0===r?void 0:r.backgroundColor)&&void 0!==e?e:"rgba(0,0,0,0)"},trim:function(t){var e=this.$refs.canvasRef,n=this.signaturePad;if(!e||!n||n.isEmpty())return null;var i=function(t,e){var n=t.getContext("2d");if(!n)return null;var i=t.width,r=t.height;if(0===i||0===r)return null;for(var o=n.getImageData(0,0,i,r).data,s=function(t){if(!t)return null;if(f.has(t))return f.get(t);var e=function(){if("undefined"==typeof document)return null;if(p)return p;var t=document.createElement("canvas");return t.width=1,t.height=1,p=t.getContext("2d")}();if(!e)return null;e.clearRect(0,0,1,1);try{e.fillStyle=t}catch(e){return console.warn('[vue2-signature] Unable to parse color "'.concat(t,'"'),e),null}e.fillRect(0,0,1,1);var n=e.getImageData(0,0,1,1).data,i=[n[0],n[1],n[2],n[3]];return f.set(t,i),i}(e),a=r,h=i,d=-1,l=-1,u=function(t){return s?o[t]===s[0]&&o[t+1]===s[1]&&o[t+2]===s[2]&&o[t+3]===s[3]:0===o[t+3]},c=0;c<r;c+=1)for(var v=0;v<i;v+=1)u(4*(c*i+v))||(v<h&&(h=v),v>d&&(d=v),c<a&&(a=c),c>l&&(l=c));if(-1===d||-1===l)return null;var g=d-h+1,m=l-a+1;return g<=0||m<=0?null:{x:h,y:a,width:g,height:m}}(e,this.getEffectiveBackgroundColor(null==t?void 0:t.backgroundColor));if(!i)return null;var r=e.getContext("2d");if(!r)return null;var o=document.createElement("canvas");o.width=i.width,o.height=i.height;var s=o.getContext("2d");if(!s)return null;var a,h=r.getImageData(i.x,i.y,i.width,i.height);return s.putImageData(h,0,0),a=null!=t&&t.format?o.toDataURL(t.format,t.encoderOptions):o.toDataURL(),{canvas:o,dataUrl:a,bounds:i}},toTrimmedDataURL:function(t,e){var n,i;return null!==(n=null===(i=this.trim({format:t,encoderOptions:e}))||void 0===i?void 0:i.dataUrl)&&void 0!==n?n:""},addWaterMark:function(t){if("[object Object]"!==Object.prototype.toString.call(t))throw new Error("Expected Object, got "+c(t)+".");var e=this.$refs.canvasRef,n=this.signaturePad;if(e&&n){var i=e.getContext("2d");if(i){var r=t.text,o=void 0===r?"":r,s=t.x,a=void 0===s?20:s,h=t.y,d=void 0===h?20:h,l=t.sx,u=void 0===l?40:l,v=t.sy,p=void 0===v?40:v,f=t.font,g=void 0===f?"20px sans-serif":f,m=t.fillStyle,_=void 0===m?"#333":m,y=t.strokeStyle,w=void 0===y?"#333":y,b=t.style,P=void 0===b?"fill":b;i.save(),i.font=g,i.fillStyle=_,i.strokeStyle=w,"all"===P?(i.fillText(o,a,d),i.strokeText(o,u,p)):"stroke"===P?i.strokeText(o,u,p):i.fillText(o,a,d),i.restore(),n._isEmpty=!1}}},getOptions:function(){var t=l(l({},{backgroundColor:"rgb(255,255,255)",penColor:"rgb(0, 0, 0)",minWidth:.5,maxWidth:2.5}),this.sigOption||{});return t.minWidth>t.maxWidth&&(t.maxWidth=t.minWidth),t},clear:function(){var t;null===(t=this.signaturePad)||void 0===t||t.clear(),this.history=[]},redraw:function(){var t;null===(t=this.signaturePad)||void 0===t||t.redraw()},toDataURL:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!this.signaturePad)return"";var n=e.quality,i=e.type,r=void 0===i?"base64":i,o=e.filename,s=void 0===o?"signature":o,a=this.signaturePad.toDataURL(t,n);if("base64"===r)return a;for(var h=a.split(";base64,"),d=h[0].split(":")[1],l=window.atob(h[1]),u=l.length,c=new Uint8Array(u),v=0;v<u;++v)c[v]=l.charCodeAt(v);var p=new Blob([c],{type:d});if("blob"===r)return p;if("file"===r){var f=d.split("/")[1];return new File([p],"".concat(s,".").concat(f),{type:d})}return a},toSVG:function(t){var e,n;return null!==(e=null===(n=this.signaturePad)||void 0===n?void 0:n.toSVG(t))&&void 0!==e?e:""},save:function(t,e){return this.toDataURL(t,e)},fromDataURL:function(t,e){var n;return null===(n=this.signaturePad)||void 0===n?void 0:n.fromDataURL(t,e)},fromData:function(t,e){var n;return null===(n=this.signaturePad)||void 0===n?void 0:n.fromData(t,e)},toData:function(){var t,e;return null!==(t=null===(e=this.signaturePad)||void 0===e?void 0:e.toData())&&void 0!==t?t:[]},isEmpty:function(){var t,e;return null===(t=null===(e=this.signaturePad)||void 0===e?void 0:e.isEmpty())||void 0===t||t},enable:function(){var t;null===(t=this.signaturePad)||void 0===t||t.on()},disable:function(){var t;null===(t=this.signaturePad)||void 0===t||t.off()},addPadEventListener:function(t,e,n){var i;null===(i=this.signaturePad)||void 0===i||i.addEventListener(t,e,n)},removePadEventListener:function(t,e,n){var i;null===(i=this.signaturePad)||void 0===i||i.removeEventListener(t,e,n)},undo:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=this.signaturePad;if(e&&!(t<=0)){var n=e.toData();if(n.length){for(var i=0;i<t;i++)if(n.length>0){var r=n.pop();this.history.push(r)}e.fromData(n)}}},redo:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,e=this.signaturePad;if(e&&!(t<=0)&&this.history.length){for(var n=e.toData(),i=0;i<t;i++)if(this.history.length>0){var r=this.history.pop();n.push(r)}e.fromData(n)}},getInstance:function(){return this.signaturePad}}});i(582);var m=function(t,e,n,i,r,o){var s,a="function"==typeof t?t.options:t;if(e&&(a.render=e,a.staticRenderFns=[],a._compiled=!0),o&&(a._scopeId="data-v-"+o),s)if(a.functional){a._injectStyles=s;var h=a.render;a.render=function(t,e){return s.call(e),h(t,e)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,s):[s]}return{exports:t,options:a}}(g,t,0,0,0,"26206faa");const _=m.exports;_.install=function(t){t.component(_.name,_)},"undefined"!=typeof window&&window.Vue&&_.install(window.Vue);const y=_})(),r.default})());