@docuseal/signature-maker-js 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.min.js +1 -1
- package/dist/index.esm.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _=Object.defineProperty;var C=(c,l,t)=>l in c?_(c,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[l]=t;var i=(c,l,t)=>C(c,typeof l!="symbol"?l+"":l,t);var m=class{constructor(c,l,t,e){i(this,"x");i(this,"y");i(this,"pressure");i(this,"time");if(isNaN(c)||isNaN(l))throw new Error(`Point is invalid: (${c}, ${l})`);this.x=+c,this.y=+l,this.pressure=t||0,this.time=e||Date.now()}distanceTo(c){return Math.sqrt(Math.pow(this.x-c.x,2)+Math.pow(this.y-c.y,2))}equals(c){return this.x===c.x&&this.y===c.y&&this.pressure===c.pressure&&this.time===c.time}velocityFrom(c){return this.time!==c.time?this.distanceTo(c)/(this.time-c.time):0}},E=class T{constructor(l,t,e,s,n,a){i(this,"startPoint");i(this,"control2");i(this,"control1");i(this,"endPoint");i(this,"startWidth");i(this,"endWidth");this.startPoint=l,this.control2=t,this.control1=e,this.endPoint=s,this.startWidth=n,this.endWidth=a}static fromPoints(l,t){let e=this.calculateControlPoints(l[0],l[1],l[2]).c2,s=this.calculateControlPoints(l[1],l[2],l[3]).c1;return new T(l[1],e,s,l[2],t.start,t.end)}static calculateControlPoints(l,t,e){let s=l.x-t.x,n=l.y-t.y,a=t.x-e.x,d=t.y-e.y,r={x:(l.x+t.x)/2,y:(l.y+t.y)/2},h={x:(t.x+e.x)/2,y:(t.y+e.y)/2},u=Math.sqrt(s*s+n*n),o=Math.sqrt(a*a+d*d),y=r.x-h.x,v=r.y-h.y,p=u+o==0?0:o/(u+o),g={x:h.x+y*p,y:h.y+v*p},f=t.x-g.x,x=t.y-g.y;return{c1:new m(r.x+f,r.y+x),c2:new m(h.x+f,h.y+x)}}length(){let t=0,e,s;for(let n=0;n<=10;n+=1){let a=n/10,d=this.point(a,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(a,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){let h=d-e,u=r-s;t+=Math.sqrt(h*h+u*u)}e=d,s=r}return t}point(l,t,e,s,n){return t*(1-l)*(1-l)*(1-l)+3*e*(1-l)*(1-l)*l+3*s*(1-l)*l*l+n*l*l*l}},k=class{constructor(){i(this,"_et");try{this._et=new EventTarget}catch{this._et=document}}addEventListener(c,l,t){this._et.addEventListener(c,l,t)}dispatchEvent(c){return this._et.dispatchEvent(c)}removeEventListener(c,l,t){this._et.removeEventListener(c,l,t)}};function A(c,l=250){let t=0,e=null,s,n,a,d=()=>{t=Date.now(),e=null,s=c.apply(n,a),e||(n=null,a=[])};return function(...h){let u=Date.now(),o=l-(u-t);return n=this,a=h,o<=0||o>l?(e&&(clearTimeout(e),e=null),t=u,s=c.apply(n,a),e||(n=null,a=[])):e||(e=window.setTimeout(d,o)),s}}var B=class S extends k{constructor(t,e={}){super();i(this,"canvas");i(this,"dotSize");i(this,"minWidth");i(this,"maxWidth");i(this,"penColor");i(this,"minDistance");i(this,"velocityFilterWeight");i(this,"compositeOperation");i(this,"backgroundColor");i(this,"throttle");i(this,"canvasContextOptions");i(this,"_ctx");i(this,"_drawingStroke",!1);i(this,"_isEmpty",!0);i(this,"_dataUrl");i(this,"_dataUrlOptions");i(this,"_lastPoints",[]);i(this,"_data",[]);i(this,"_lastVelocity",0);i(this,"_lastWidth",0);i(this,"_strokeMoveUpdate");i(this,"_strokePointerId");this.canvas=t,this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle=e.throttle??16,this.minDistance=e.minDistance??5,this.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=e.compositeOperation||"source-over",this.canvasContextOptions=e.canvasContextOptions??{},this._strokeMoveUpdate=this.throttle?A(S.prototype._strokeUpdate,this.throttle):S.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=t.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}clear(){let{_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(){let t=this._data,e=this._dataUrl,s=this._dataUrlOptions;this.clear(),e&&this.fromDataURL(e,s),this.fromData(t,{clear:!1})}fromDataURL(t,e={}){return new Promise((s,n)=>{let a=new Image,d=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/d,h=e.height||this.canvas.height/d,u=e.xOffset||0,o=e.yOffset||0;this._reset(this._getPointGroupOptions()),a.onload=()=>{this._ctx.drawImage(a,u,o,r,h),s()},a.onerror=y=>{n(y)},a.crossOrigin="anonymous",a.src=t,this._isEmpty=!1,this._dataUrl=t,this._dataUrlOptions={...e}})}toDataURL(t="image/png",e){return t==="image/svg+xml"?(typeof e!="object"&&(e=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(e))}`):(typeof e!="number"&&(e=void 0),this.canvas.toDataURL(t,e))}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none",this.canvas.style.webkitUserSelect="none";let 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.style.webkitUserSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){let 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(){let{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._drawLine.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_isLeftButtonPressed(t,e){return e?t.buttons===1:(t.buttons&1)===1}_pointerEventToSignatureEvent(t){return{event:t,type:t.type,x:t.clientX,y:t.clientY,pressure:"pressure"in t?t.pressure:0}}_touchEventToSignatureEvent(t){let 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){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}_handleMouseUp(t){this._isLeftButtonPressed(t)||this._strokeEnd(this._pointerEventToSignatureEvent(t))}_handleTouchStart(t){t.targetTouches.length!==1||this._drawingStroke||(t.cancelable&&t.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(t)))}_handleTouchMove(t){if(t.targetTouches.length===1){if(t.cancelable&&t.preventDefault(),!this._drawingStroke){this._strokeEnd(this._touchEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._touchEventToSignatureEvent(t))}}_handleTouchEnd(t){t.targetTouches.length===0&&(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 typeof this._strokePointerId>"u"?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){if(this._allowPointerId(t)){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}t.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}}_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;let{addEventListener:s}=this._getListenerFunctions();switch(t.event.type){case"mousedown":s("mousemove",this._handleMouseMove,{passive:!1}),s("mouseup",this._handleMouseUp,{passive:!1});break;case"touchstart":s("touchmove",this._handleTouchMove,{passive:!1}),s("touchend",this._handleTouchEnd,{passive:!1}),s("touchcancel",this._handleTouchCancel,{passive:!1});break;case"pointerdown":s("pointermove",this._handlePointerMove,{passive:!1}),s("pointerup",this._handlePointerUp,{passive:!1}),s("pointercancel",this._handlePointerCancel,{passive:!1});break;default:}this._drawingStroke=!0;let n=this._getPointGroupOptions(),a={...n,points:[]};this._data.push(a),this._reset(n),this._strokeUpdate(t)}_strokeUpdate(t){if(!this._drawingStroke)return;if(this._data.length===0){this._strokeBegin(t);return}this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));let e=this._createPoint(t.x,t.y,t.pressure),s=this._data[this._data.length-1],n=s.points,a=n.length>0&&n[n.length-1],d=a?e.distanceTo(a)<=this.minDistance:!1,r=this._getPointGroupOptions(s);if(!a||!(a&&d)){let h=this._addPoint(e,r);a?h&&this._drawCurve(h,r):this._drawDot(e,r),n.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,s){let n=this.canvas.getBoundingClientRect();return new m(t-n.left,e-n.top,s,new Date().getTime())}_addPoint(t,e){let{_lastPoints:s}=this;if(s.push(t),s.length>2){s.length===3&&s.unshift(s[0]);let n=this._calculateCurveWidths(s[1],s[2],e),a=E.fromPoints(s,n);return s.shift(),a}return null}_calculateCurveWidths(t,e,s){let n=s.velocityFilterWeight*e.velocityFrom(t)+(1-s.velocityFilterWeight)*this._lastVelocity,a=this._strokeWidth(n,s),d={end:a,start:this._lastWidth};return this._lastVelocity=n,this._lastWidth=a,d}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,s){let n=this._ctx;n.moveTo(t,e),n.arc(t,e,s,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){let s=this._ctx,n=t.endWidth-t.startWidth,a=Math.ceil(t.length())*2;s.beginPath(),s.fillStyle=e.penColor;for(let d=0;d<a;d+=1){let r=d/a,h=r*r,u=h*r,o=1-r,y=o*o,v=y*o,p=v*t.startPoint.x;p+=3*y*r*t.control1.x,p+=3*o*h*t.control2.x,p+=u*t.endPoint.x;let g=v*t.startPoint.y;g+=3*y*r*t.control1.y,g+=3*o*h*t.control2.y,g+=u*t.endPoint.y;let f=Math.min(t.startWidth+u*n,e.maxWidth);this._drawCurveSegment(p,g,f)}s.closePath(),s.fill()}_getDotSize(t){return t.dotSize>0?t.dotSize:(t.minWidth+t.maxWidth)/2}_drawDot(t,e){let s=this._ctx,n=this._getDotSize(e);s.beginPath(),this._drawCurveSegment(t.x,t.y,n),s.closePath(),s.fillStyle=e.penColor,s.fill()}_drawLine(t,e,s){let n=this._ctx;n.save(),n.beginPath(),n.moveTo(t.x,t.y),n.lineTo(e.x,e.y),n.lineWidth=this._getDotSize(s)*2,n.lineCap="round",n.strokeStyle=s.penColor,n.stroke(),n.restore(),this._isEmpty=!1}_fromData(t,e,s,n){for(let a of t){let{points:d}=a,r=this._getPointGroupOptions(a);if(d.length>2)for(let h=0;h<d.length;h+=1){let u=d[h],o=new m(u.x,u.y,u.pressure,u.time);h===0&&this._reset(r);let y=this._addPoint(o,r);y&&e(y,r)}else d.length===2?(this._reset(r),n(d[0],d[1],r)):(this._reset(r),s(d[0],r))}}toSVG({includeBackgroundColor:t=!1,includeDataUrl:e=!1}={}){let s=this._data,n=Math.max(window.devicePixelRatio||1,1),a=0,d=0,r=this.canvas.width/n,h=this.canvas.height/n,u=document.createElementNS("http://www.w3.org/2000/svg","svg");if(u.setAttribute("xmlns","http://www.w3.org/2000/svg"),u.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),u.setAttribute("viewBox",`${a} ${d} ${r} ${h}`),u.setAttribute("width",r.toString()),u.setAttribute("height",h.toString()),t&&this.backgroundColor){let o=document.createElement("rect");o.setAttribute("width","100%"),o.setAttribute("height","100%"),o.setAttribute("fill",this.backgroundColor),u.appendChild(o)}if(e&&this._dataUrl){let o=this._dataUrlOptions?.ratio||window.devicePixelRatio||1,y=this._dataUrlOptions?.width||this.canvas.width/o,v=this._dataUrlOptions?.height||this.canvas.height/o,p=this._dataUrlOptions?.xOffset||0,g=this._dataUrlOptions?.yOffset||0,f=document.createElement("image");f.setAttribute("x",p.toString()),f.setAttribute("y",g.toString()),f.setAttribute("width",y.toString()),f.setAttribute("height",v.toString()),f.setAttribute("preserveAspectRatio","none"),f.setAttribute("href",this._dataUrl),u.appendChild(f)}return this._fromData(s,(o,{penColor:y})=>{let v=document.createElement("path");if(!isNaN(o.control1.x)&&!isNaN(o.control1.y)&&!isNaN(o.control2.x)&&!isNaN(o.control2.y)){let p=`M ${o.startPoint.x.toFixed(3)},${o.startPoint.y.toFixed(3)} C ${o.control1.x.toFixed(3)},${o.control1.y.toFixed(3)} ${o.control2.x.toFixed(3)},${o.control2.y.toFixed(3)} ${o.endPoint.x.toFixed(3)},${o.endPoint.y.toFixed(3)}`;v.setAttribute("d",p),v.setAttribute("stroke-width",(o.endWidth*2.25).toFixed(3)),v.setAttribute("stroke",y),v.setAttribute("fill","none"),v.setAttribute("stroke-linecap","round"),u.appendChild(v)}},(o,{penColor:y,dotSize:v,minWidth:p,maxWidth:g})=>{let f=document.createElement("circle"),x=v>0?v:(p+g)/2;f.setAttribute("r",x.toString()),f.setAttribute("cx",o.x.toString()),f.setAttribute("cy",o.y.toString()),f.setAttribute("fill",y),u.appendChild(f)},(o,y,v)=>{let p=document.createElement("line");p.setAttribute("x1",o.x.toString()),p.setAttribute("y1",o.y.toString()),p.setAttribute("x2",y.x.toString()),p.setAttribute("y2",y.y.toString()),p.setAttribute("stroke",v.penColor),p.setAttribute("stroke-width",(this._getDotSize(v)*2).toString()),p.setAttribute("stroke-linecap","round"),u.appendChild(p)}),u.outerHTML}};var D=typeof HTMLElement>"u"?class{}:HTMLElement,P=0,w=class extends D{constructor(){super();i(this,"setDisplayType",()=>{let t=[this.dataset.withDrawn,this.dataset.withTyped,this.dataset.withUpload].filter(e=>e==="false");this.textTypeButton.parentNode.style.display=this.dataset.withTyped==="false"?"none":"inherit",this.drawTypeButton.parentNode.style.display=this.dataset.withDrawn==="false"?"none":"inherit",this.uploadTypeButton.parentNode.style.display=this.dataset.withUpload==="false"?"none":"inherit",this.typeButtonsContainer.parentNode.style.display=t.length>1&&this.dataset.withUpload==="false"?"none":"inherit",t.length===3?console.error('At least one of the "with-typed", "with-drawn", or "with-upload" attributes must be set to "true".'):this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"&&this.enableUploadPanel()});i(this,"setDisplayColorSelect",()=>{this.colorSelect.style.visibility=this.dataset.withColorSelect==="false"?"hidden":"visible"});i(this,"setDisplaySubmit",()=>{this.saveButton.parentNode.style.display=this.dataset.withSubmit==="false"?"none":"inherit"});i(this,"setFontUrl",()=>{this.isFontLoaded=!1,this.fontPromise=null,this.isTextTypeSelected&&this.loadFont()});i(this,"setControlButtonsContainerClassAndStyle",()=>{let t=this.dataset.controlButtonsContainerClass||"",e=this.dataset.controlButtonsContainerStyle||(t?"":this.defaultStyles.controlButtonsContainer);this.controlButtonsContainer.setAttribute("style",e),this.controlButtonsContainer.setAttribute("class",t)});i(this,"setSaveButtonText",()=>{let t=this.saveButton.querySelector("span");t&&(t.innerText=this.dataset.saveButtonText||this.defaultLabels.saveButton)});i(this,"setSaveButtonClassAndStyle",()=>{let t=this.dataset.saveButtonClass||"",e=this.dataset.saveButtonStyle||(t?"":this.defaultStyles.saveButton);this.isSaveButtonDisabled&&(t&&this.dataset.saveButtonDisabledClass&&(t=this.combineStrings(t,this.dataset.saveButtonDisabledClass)),e&&this.dataset.saveButtonDisabledStyle?e=this.combineStrings(e,this.dataset.saveButtonDisabledStyle):t||(e=this.combineStrings(e,this.defaultStyles.saveButtonDisabled))),this.saveButton.setAttribute("class",t),this.saveButton.setAttribute("style",e)});i(this,"setUndoButtonText",()=>{let t=this.undoButton.querySelector("span");t&&(t.innerText=this.dataset.undoButtonText||this.defaultLabels.undoButton)});i(this,"setUndoButtonClassAndStyle",()=>{let t=this.dataset.undoButtonClass||"",e=this.dataset.undoButtonStyle||(t?"":this.defaultStyles.undoButton);this.undoButton.setAttribute("class",t),this.undoButton.setAttribute("style",e)});i(this,"setCleaButtonText",()=>{let t=this.clearButton.querySelector("span");t&&(t.innerText=this.dataset.clearButtonText||this.defaultLabels.clearButton)});i(this,"setClearButtonClassAndStyle",()=>{let t=this.dataset.clearButtonClass||"",e=this.dataset.clearButtonStyle||(t?"":this.defaultStyles.clearButton);this.clearButton.setAttribute("class",t),this.clearButton.setAttribute("style",e)});i(this,"setCanvasClassAndStyle",()=>{let t=this.dataset.canvasClass||"",e=this.dataset.canvasStyle||(t?"padding: 1px; touch-action: none; user-select: none;":this.defaultStyles.canvas);this.canvas.setAttribute("class",t),this.canvas.setAttribute("style",e)});i(this,"setTypeButtonsContainerClassAndStyle",()=>{let t=this.dataset.typeButtonsContainerClass||"",e=this.dataset.typeButtonsContainerStyle||(t?"":this.defaultStyles.typeButtonsContainer);this.typeButtonsContainer.setAttribute("style",e),this.typeButtonsContainer.setAttribute("class",t)});i(this,"setTextInputPlaceholder",()=>{this.textInput.setAttribute("placeholder",this.dataset.textInputPlaceholder||this.defaultLabels.textInputPlaceholder)});i(this,"setTextInputClassAndStyle",()=>{let t=this.dataset.textInputClass||"",e=this.dataset.textInputStyle||(t?"":this.defaultStyles.textInput);this.textInput.setAttribute("class",t),this.textInput.setAttribute("style",e)});i(this,"setDrawTypeButtonText",()=>{let t=this.drawTypeButton.querySelector("span");t&&(t.innerText=this.dataset.drawTypeButtonText||this.defaultLabels.drawTypeButton)});i(this,"setDrawTypeButtonClassAndStyle",()=>{let t=this.dataset.drawTypeButtonClass||"",e=this.dataset.drawTypeButtonStyle||(t?"":this.defaultStyles.drawTypeButton);this.isDrawTypeSelected&&(t&&this.dataset.drawTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.drawTypeButtonActiveClass)),e&&this.dataset.drawTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.drawTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.drawTypeButtonActive))),this.drawTypeButton.setAttribute("class",t),this.drawTypeButton.setAttribute("style",e)});i(this,"setTextTypeButtonText",()=>{let t=this.textTypeButton.querySelector("span");t&&(t.innerText=this.dataset.textTypeButtonText||this.defaultLabels.textTypeButton)});i(this,"setTextTypeButtonClassAndStyle",()=>{let t=this.dataset.textTypeButtonClass||"",e=this.dataset.textTypeButtonStyle||(t?"":this.defaultStyles.textTypeButton);this.isTextTypeSelected&&(t&&this.dataset.textTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.textTypeButtonActiveClass)),e&&this.dataset.textTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.textTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.textTypeButtonActive))),this.textTypeButton.setAttribute("class",t),this.textTypeButton.setAttribute("style",e)});i(this,"setUploadTypeButtonText",()=>{let t=this.uploadTypeButton.querySelector("span");t&&(t.innerText=this.dataset.uploadTypeButtonText||this.defaultLabels.uploadTypeButton)});i(this,"setUploadTypeButtonClassAndStyle",()=>{let t=this.dataset.uploadTypeButtonClass||"",e=this.dataset.uploadTypeButtonStyle||(t?"":this.defaultStyles.uploadTypeButton);this.isUploadTypeSelected&&(t&&this.dataset.uploadTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.uploadTypeButtonActiveClass)),e&&this.dataset.uploadTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.uploadTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.uploadTypeButtonActive))),this.uploadTypeButton.setAttribute("class",t),this.uploadTypeButton.setAttribute("style",e)});this.isMounted=!1,this.uid=++P}get defaultStyles(){return this.constructor.DEFAULT_STYLES}get defaultLabels(){return this.constructor.DEFAULT_LABELS}get clearButton(){return this.querySelector('[data-target="clearButton"]')}get undoButton(){return this.querySelector('[data-target="undoButton"]')}get controlButtonsContainer(){return this.querySelector('[data-target="controlButtonsContainer"]')}get typeButtonsContainer(){return this.querySelector('[data-target="typeButtonsContainer"]')}get drawTypeButton(){return this.querySelector('[data-target="drawTypeButton"]')}get textTypeButton(){return this.querySelector('[data-target="textTypeButton"]')}get uploadTypeButton(){return this.querySelector('[data-target="uploadTypeButton"]')}get textInput(){return this.querySelector('[data-target="textInput"]')}get fileInput(){return this.querySelector('[data-target="fileInput"]')}get saveButton(){return this.querySelector('[data-target="saveButton"]')}get canvas(){return this.querySelector('[data-target="canvas"]')}get colorSelect(){return this.querySelector('[data-target="colorSelect"]')}get colorInputs(){return[...this.querySelectorAll('[data-target="colorInput"]')]}get setters(){return{"data-with-typed":this.setDisplayType,"data-with-drawn":this.setDisplayType,"data-with-upload":this.setDisplayType,"data-with-color-select":this.setDisplayColorSelect,"data-with-submit":this.setDisplaySubmit,"data-font-url":this.setFontUrl,"data-control-buttons-container-class":this.setControlButtonsContainerClassAndStyle,"data-control-buttons-container-style":this.setControlButtonsContainerClassAndStyle,"data-save-button-text":this.setSaveButtonText,"data-save-button-class":this.setSaveButtonClassAndStyle,"data-save-button-style":this.setSaveButtonClassAndStyle,"data-save-button-disabled-class":this.setSaveButtonClassAndStyle,"data-save-button-disabled-style":this.setSaveButtonClassAndStyle,"data-undo-button-text":this.setUndoButtonText,"data-undo-button-class":this.setUndoButtonClassAndStyle,"data-undo-button-style":this.setUndoButtonClassAndStyle,"data-clear-button-text":this.setCleaButtonText,"data-clear-button-class":this.setClearButtonClassAndStyle,"data-clear-button-style":this.setClearButtonClassAndStyle,"data-canvas-class":this.setCanvasClassAndStyle,"data-canvas-style":this.setCanvasClassAndStyle,"data-text-input-placeholder":this.setTextInputPlaceholder,"data-text-input-class":this.setTextInputClassAndStyle,"data-text-input-style":this.setTextInputClassAndStyle,"data-type-buttons-container-class":this.setTypeButtonsContainerClassAndStyle,"data-type-buttons-container-style":this.setTypeButtonsContainerClassAndStyle,"data-draw-type-button-text":this.setDrawTypeButtonText,"data-draw-type-button-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-style":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-style":this.setDrawTypeButtonClassAndStyle,"data-text-type-button-text":this.setTextTypeButtonText,"data-text-type-button-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-style":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-style":this.setTextTypeButtonClassAndStyle,"data-upload-type-button-text":this.setUploadTypeButtonText,"data-upload-type-button-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-style":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-style":this.setUploadTypeButtonClassAndStyle}}get isDrawTypeSelected(){return this.drawTypeButton.querySelector("input").checked}get isTextTypeSelected(){return this.textTypeButton.querySelector("input").checked}get isUploadTypeSelected(){return this.uploadTypeButton.querySelector("input").checked}get isSaveButtonDisabled(){return this.saveButton.disabled}get isDownloadOnSaveSettingEnabled(){return this.dataset.downloadOnSave==="true"}get isColorSelectSettingEnabled(){return this.dataset.withColorSelect!=="false"}get isSubmitButtonSettingEnabled(){return this.dataset.withSubmit!=="false"}combineStrings(t,e){return[t,e].filter(Boolean).join(" ")}attributeChangedCallback(t,e,s){this.isMounted&&this.setters[t]&&e!==s&&this.setters[t]()}connectedCallback(){this.isMounted||(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.init(),{once:!0}):this.init())}init(){if(!(this.isMounted||!this.isConnected)){this.style.display="block",this.childrenNode=document.createElement("div"),this.appendChild(this.childrenNode),Array.from(this.childNodes).map(t=>{this.childrenNode!==t&&this.childrenNode.appendChild(t)}),this.childrenNode.style.display="none",this.fieldNode=document.createElement("div"),this.fieldNode.innerHTML=this.tempalte,this.appendChild(this.fieldNode),this.pad=new B(this.canvas),this.isMounted=!0;for(let t in this.setters)this.setters.hasOwnProperty(t)&&this.setters[t]();this.scale=2,this.isFontLoaded=!1,this.fontPromise=null,this.resizeCanvas(),this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"?this.enableUploadPanel():this.enableDrawPanel(),this.pad.addEventListener("endStroke",()=>{this.handleDownloadState()}),this.clearButton.addEventListener("click",t=>{t.preventDefault(),this.cleaSignaturePad(),this.clearTextInput()}),this.undoButton.addEventListener("click",t=>{t.preventDefault();let e=this.pad.toData();e&&(e.pop(),this.pad.fromData(e),this.handleDownloadState())}),this.drawTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableDrawPanel()}),this.textTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableTextPanel()}),this.uploadTypeButton.addEventListener("click",()=>{this.uploadTypeButton.querySelector('input[type="radio"]').checked=!0,this.enableUploadPanel()}),this.fileInput.addEventListener("change",t=>{this.drawOnCanvas(t.target.files[0]).then(()=>{this.handleDownloadState()}).catch(e=>{alert(e.message)})}),this.colorInputs.forEach(t=>{t.addEventListener("change",e=>{this.textInput.value!==""&&(this.canvas.getContext("2d").fillStyle=e.target.value,this.drawText(),this.handleDownloadState()),this.pad.penColor=e.target.value})}),this.textInput.addEventListener("input",()=>{this.drawText(),this.handleDownloadState()}),this.saveButton.addEventListener("click",t=>{t.preventDefault(),this.disableSaveButton(),this.cropCanvas(this.canvas).then(e=>{this.isDownloadOnSaveSettingEnabled&&this.downloadBlob(e,`signature-${Date.now()}.png`),this.convertBlobToBase64(e).then(s=>{this.dispatchEvent(new CustomEvent("save",{detail:{base64:s,blob:e}}))}).catch(s=>{console.error("Failed to convert blob to base64:",s)})}).then(()=>{this.enableSaveButton()}).catch(e=>{console.error("Download failed:",e),this.disableSaveButton()})}),this.intersectionObserver=new IntersectionObserver((t,e)=>{t.forEach(s=>{s.isIntersecting&&this.resizeCanvas()&&this.intersectionObserver?.disconnect()})}),this.resizeObserver=new ResizeObserver(t=>{for(let e of t){let n=e.contentRect.width<576;this.drawTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.textTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.uploadTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.pad.isEmpty()&&this.textInput.value===""&&this.resizeCanvas()}}),this.resizeObserver.observe(this),this.intersectionObserver.observe(this.canvas)}}resizeCanvas(){let t=this.canvas.parentNode.clientWidth;return t===0?!1:(this.canvas.width!==t*this.scale&&(this.canvas.width=t*this.scale,this.canvas.height=t*this.scale/3,this.canvas.getContext("2d").setTransform(this.scale,0,0,this.scale,0,0),this.pad.clear()),!0)}enableDrawPanel(){this.drawTypeButton.querySelector("input").checked=!0,this.textTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="inline-block",this.pad.on(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableTextPanel(){this.drawTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!0,this.textInput.parentNode.style.display="inherit",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.loadFont(),this.clearTextInput(),this.clearFileInput()}enableUploadPanel(){this.uploadTypeButton.querySelector("input").checked=!0,this.drawTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="hidden"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!1,this.setSaveButtonClassAndStyle())}disableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!0,this.setSaveButtonClassAndStyle())}drawText(){let t=this.canvas,e=t.getContext("2d"),s="SignatureFont",n="58px",a="italic",d="";e.font=a+" "+d+" "+n+" "+s,e.textAlign="center",e.clearRect(0,0,t.width/this.scale,t.height/this.scale),e.fillText(this.textInput.value,t.width/2/this.scale,t.height/2/this.scale+11)}drawOnCanvas(t){return new Promise((e,s)=>{if(t&&t.type.match("image.*")){let n=new FileReader,a=this.canvas;n.onload=d=>{let r=new Image;r.src=d.target.result,r.onload=()=>{let h=a.getContext("2d"),u=r.width/r.height,o=a.width/this.scale,y=a.height/this.scale,v=o,p=y;o/y>u?v=y*u:p=o/u;let g=(o-v)/2,f=(y-p)/2;setTimeout(()=>{h.clearRect(0,0,o,y),h.drawImage(r,g,f,v,p),this.pad.fromDataURL("").catch(()=>{}),e()},50)},r.onerror=()=>s(new Error("Failed to load image"))},n.onerror=()=>s(new Error("Failed to read file")),n.readAsDataURL(t)}else s(new Error("Invalid file type"))})}clearTextInput(){this.textInput&&(this.textInput.value="",this.handleDownloadState())}cleaSignaturePad(){this.pad.clear(),this.handleDownloadState()}clearFileInput(){this.fileInput&&(this.fileInput.value="",this.handleDownloadState())}handleDownloadState(){let t=this.changeId=(this.changeId||0)+1;this.pad.isEmpty()&&this.textInput.value===""?(this.distributeSignatureData(null),this.disableSaveButton()):(this.cropCanvas(this.canvas).then(e=>{t===this.changeId&&this.distributeSignatureData(e)}).catch(e=>{console.error("Failed to create a PNG blob:",e)}),this.enableSaveButton())}distributeSignatureData(t){let e=this.childrenNode.querySelector('input[type="file"]');if(t){if(this.convertBlobToBase64(t).then(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:s,blob:t}}))}).catch(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),console.error("Failed to convert blob to base64:",s)}),e){let s=new File([t],`signature-${Date.now()}.png`,{type:t.type,lastModified:Date.now()}),n=new DataTransfer;n.items.add(s),e.files=n.files}}else this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),e&&(e.value="")}convertBlobToBase64(t){return new Promise((e,s)=>{let n=new FileReader;n.onloadend=()=>{let a=n.result.split(",")[1];e(a)},n.onerror=a=>{s(a)},n.readAsDataURL(t)})}loadFont(){if(!this.fontPromise){let t=this.dataset.fontUrl||"https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff",e=new FontFace("SignatureFont",`url(${t})`);this.fontPromise=e.load().then(s=>{document.fonts.add(s),this.isFontLoaded=!0})}this.fontPromise.then(()=>{this.isTextTypeSelected&&this.textInput.value!==""&&(this.drawText(),this.handleDownloadState())}).catch(t=>{this.fontPromise=null,console.error("Font loading failed:",t)})}downloadBlob(t,e){let s=window.URL.createObjectURL(t),n=document.createElement("a");return n.style="display: none",n.href=s,n.download=e,document.body.appendChild(n),n.click(),window.URL.revokeObjectURL(s),new Promise(a=>{a()})}cropCanvas(t){let e=t.getContext("2d"),s=t.width,n=t.height,a=n,d=0,r=s,h=0,o=e.getImageData(0,0,s,n).data;for(let f=0;f<n;f++)for(let x=0;x<s;x++){let b=(f*s+x)*4;o[b+3]!==0&&(a=Math.min(a,f),d=Math.max(d,f),r=Math.min(r,x),h=Math.max(h,x))}h<r&&(r=0,a=0,h=s-1,d=n-1);let y=h-r+1,v=d-a+1,p=document.createElement("canvas");return p.width=y,p.height=v,p.getContext("2d").drawImage(t,r,a,y,v,0,0,y,v),new Promise((f,x)=>{p.toBlob(b=>{b?f(b):x(new Error("Failed to create a PNG blob."))},"image/png")})}disconnectedCallback(){this.isMounted&&(this.resizeObserver?.disconnect(),this.intersectionObserver?.disconnect(),this.pad.off(),this.fieldNode.remove(),this.append(...this.childrenNode.childNodes),this.childrenNode.remove(),this.isMounted=!1)}get tempalte(){return`
|
|
1
|
+
var _=Object.defineProperty;var C=(c,l,t)=>l in c?_(c,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[l]=t;var i=(c,l,t)=>C(c,typeof l!="symbol"?l+"":l,t);var m=class{constructor(c,l,t,e){i(this,"x");i(this,"y");i(this,"pressure");i(this,"time");if(isNaN(c)||isNaN(l))throw new Error(`Point is invalid: (${c}, ${l})`);this.x=+c,this.y=+l,this.pressure=t||0,this.time=e||Date.now()}distanceTo(c){return Math.sqrt(Math.pow(this.x-c.x,2)+Math.pow(this.y-c.y,2))}equals(c){return this.x===c.x&&this.y===c.y&&this.pressure===c.pressure&&this.time===c.time}velocityFrom(c){return this.time!==c.time?this.distanceTo(c)/(this.time-c.time):0}},E=class T{constructor(l,t,e,s,n,a){i(this,"startPoint");i(this,"control2");i(this,"control1");i(this,"endPoint");i(this,"startWidth");i(this,"endWidth");this.startPoint=l,this.control2=t,this.control1=e,this.endPoint=s,this.startWidth=n,this.endWidth=a}static fromPoints(l,t){let e=this.calculateControlPoints(l[0],l[1],l[2]).c2,s=this.calculateControlPoints(l[1],l[2],l[3]).c1;return new T(l[1],e,s,l[2],t.start,t.end)}static calculateControlPoints(l,t,e){let s=l.x-t.x,n=l.y-t.y,a=t.x-e.x,d=t.y-e.y,r={x:(l.x+t.x)/2,y:(l.y+t.y)/2},h={x:(t.x+e.x)/2,y:(t.y+e.y)/2},u=Math.sqrt(s*s+n*n),o=Math.sqrt(a*a+d*d),y=r.x-h.x,v=r.y-h.y,p=u+o==0?0:o/(u+o),g={x:h.x+y*p,y:h.y+v*p},f=t.x-g.x,x=t.y-g.y;return{c1:new m(r.x+f,r.y+x),c2:new m(h.x+f,h.y+x)}}length(){let t=0,e,s;for(let n=0;n<=10;n+=1){let a=n/10,d=this.point(a,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(a,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){let h=d-e,u=r-s;t+=Math.sqrt(h*h+u*u)}e=d,s=r}return t}point(l,t,e,s,n){return t*(1-l)*(1-l)*(1-l)+3*e*(1-l)*(1-l)*l+3*s*(1-l)*l*l+n*l*l*l}},k=class{constructor(){i(this,"_et");try{this._et=new EventTarget}catch{this._et=document}}addEventListener(c,l,t){this._et.addEventListener(c,l,t)}dispatchEvent(c){return this._et.dispatchEvent(c)}removeEventListener(c,l,t){this._et.removeEventListener(c,l,t)}};function A(c,l=250){let t=0,e=null,s,n,a,d=()=>{t=Date.now(),e=null,s=c.apply(n,a),e||(n=null,a=[])};return function(...h){let u=Date.now(),o=l-(u-t);return n=this,a=h,o<=0||o>l?(e&&(clearTimeout(e),e=null),t=u,s=c.apply(n,a),e||(n=null,a=[])):e||(e=window.setTimeout(d,o)),s}}var B=class S extends k{constructor(t,e={}){super();i(this,"canvas");i(this,"dotSize");i(this,"minWidth");i(this,"maxWidth");i(this,"penColor");i(this,"minDistance");i(this,"velocityFilterWeight");i(this,"compositeOperation");i(this,"backgroundColor");i(this,"throttle");i(this,"canvasContextOptions");i(this,"_ctx");i(this,"_drawingStroke",!1);i(this,"_isEmpty",!0);i(this,"_dataUrl");i(this,"_dataUrlOptions");i(this,"_lastPoints",[]);i(this,"_data",[]);i(this,"_lastVelocity",0);i(this,"_lastWidth",0);i(this,"_strokeMoveUpdate");i(this,"_strokePointerId");this.canvas=t,this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle=e.throttle??16,this.minDistance=e.minDistance??5,this.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=e.compositeOperation||"source-over",this.canvasContextOptions=e.canvasContextOptions??{},this._strokeMoveUpdate=this.throttle?A(S.prototype._strokeUpdate,this.throttle):S.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=t.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}clear(){let{_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(){let t=this._data,e=this._dataUrl,s=this._dataUrlOptions;this.clear(),e&&this.fromDataURL(e,s),this.fromData(t,{clear:!1})}fromDataURL(t,e={}){return new Promise((s,n)=>{let a=new Image,d=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/d,h=e.height||this.canvas.height/d,u=e.xOffset||0,o=e.yOffset||0;this._reset(this._getPointGroupOptions()),a.onload=()=>{this._ctx.drawImage(a,u,o,r,h),s()},a.onerror=y=>{n(y)},a.crossOrigin="anonymous",a.src=t,this._isEmpty=!1,this._dataUrl=t,this._dataUrlOptions={...e}})}toDataURL(t="image/png",e){return t==="image/svg+xml"?(typeof e!="object"&&(e=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(e))}`):(typeof e!="number"&&(e=void 0),this.canvas.toDataURL(t,e))}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none",this.canvas.style.webkitUserSelect="none";let 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.style.webkitUserSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){let 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(){let{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._drawLine.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_isLeftButtonPressed(t,e){return e?t.buttons===1:(t.buttons&1)===1}_pointerEventToSignatureEvent(t){return{event:t,type:t.type,x:t.clientX,y:t.clientY,pressure:"pressure"in t?t.pressure:0}}_touchEventToSignatureEvent(t){let 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){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}_handleMouseUp(t){this._isLeftButtonPressed(t)||this._strokeEnd(this._pointerEventToSignatureEvent(t))}_handleTouchStart(t){t.targetTouches.length!==1||this._drawingStroke||(t.cancelable&&t.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(t)))}_handleTouchMove(t){if(t.targetTouches.length===1){if(t.cancelable&&t.preventDefault(),!this._drawingStroke){this._strokeEnd(this._touchEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._touchEventToSignatureEvent(t))}}_handleTouchEnd(t){t.targetTouches.length===0&&(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 typeof this._strokePointerId>"u"?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){if(this._allowPointerId(t)){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}t.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}}_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;let{addEventListener:s}=this._getListenerFunctions();switch(t.event.type){case"mousedown":s("mousemove",this._handleMouseMove,{passive:!1}),s("mouseup",this._handleMouseUp,{passive:!1});break;case"touchstart":s("touchmove",this._handleTouchMove,{passive:!1}),s("touchend",this._handleTouchEnd,{passive:!1}),s("touchcancel",this._handleTouchCancel,{passive:!1});break;case"pointerdown":s("pointermove",this._handlePointerMove,{passive:!1}),s("pointerup",this._handlePointerUp,{passive:!1}),s("pointercancel",this._handlePointerCancel,{passive:!1});break;default:}this._drawingStroke=!0;let n=this._getPointGroupOptions(),a={...n,points:[]};this._data.push(a),this._reset(n),this._strokeUpdate(t)}_strokeUpdate(t){if(!this._drawingStroke)return;if(this._data.length===0){this._strokeBegin(t);return}this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));let e=this._createPoint(t.x,t.y,t.pressure),s=this._data[this._data.length-1],n=s.points,a=n.length>0&&n[n.length-1],d=a?e.distanceTo(a)<=this.minDistance:!1,r=this._getPointGroupOptions(s);if(!a||!(a&&d)){let h=this._addPoint(e,r);a?h&&this._drawCurve(h,r):this._drawDot(e,r),n.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,s){let n=this.canvas.getBoundingClientRect();return new m(t-n.left,e-n.top,s,new Date().getTime())}_addPoint(t,e){let{_lastPoints:s}=this;if(s.push(t),s.length>2){s.length===3&&s.unshift(s[0]);let n=this._calculateCurveWidths(s[1],s[2],e),a=E.fromPoints(s,n);return s.shift(),a}return null}_calculateCurveWidths(t,e,s){let n=s.velocityFilterWeight*e.velocityFrom(t)+(1-s.velocityFilterWeight)*this._lastVelocity,a=this._strokeWidth(n,s),d={end:a,start:this._lastWidth};return this._lastVelocity=n,this._lastWidth=a,d}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,s){let n=this._ctx;n.moveTo(t,e),n.arc(t,e,s,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){let s=this._ctx,n=t.endWidth-t.startWidth,a=Math.ceil(t.length())*2;s.beginPath(),s.fillStyle=e.penColor;for(let d=0;d<a;d+=1){let r=d/a,h=r*r,u=h*r,o=1-r,y=o*o,v=y*o,p=v*t.startPoint.x;p+=3*y*r*t.control1.x,p+=3*o*h*t.control2.x,p+=u*t.endPoint.x;let g=v*t.startPoint.y;g+=3*y*r*t.control1.y,g+=3*o*h*t.control2.y,g+=u*t.endPoint.y;let f=Math.min(t.startWidth+u*n,e.maxWidth);this._drawCurveSegment(p,g,f)}s.closePath(),s.fill()}_getDotSize(t){return t.dotSize>0?t.dotSize:(t.minWidth+t.maxWidth)/2}_drawDot(t,e){let s=this._ctx,n=this._getDotSize(e);s.beginPath(),this._drawCurveSegment(t.x,t.y,n),s.closePath(),s.fillStyle=e.penColor,s.fill()}_drawLine(t,e,s){let n=this._ctx;n.save(),n.beginPath(),n.moveTo(t.x,t.y),n.lineTo(e.x,e.y),n.lineWidth=this._getDotSize(s)*2,n.lineCap="round",n.strokeStyle=s.penColor,n.stroke(),n.restore(),this._isEmpty=!1}_fromData(t,e,s,n){for(let a of t){let{points:d}=a,r=this._getPointGroupOptions(a);if(d.length>2)for(let h=0;h<d.length;h+=1){let u=d[h],o=new m(u.x,u.y,u.pressure,u.time);h===0&&this._reset(r);let y=this._addPoint(o,r);y&&e(y,r)}else d.length===2?(this._reset(r),n(d[0],d[1],r)):(this._reset(r),s(d[0],r))}}toSVG({includeBackgroundColor:t=!1,includeDataUrl:e=!1}={}){let s=this._data,n=Math.max(window.devicePixelRatio||1,1),a=0,d=0,r=this.canvas.width/n,h=this.canvas.height/n,u=document.createElementNS("http://www.w3.org/2000/svg","svg");if(u.setAttribute("xmlns","http://www.w3.org/2000/svg"),u.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),u.setAttribute("viewBox",`${a} ${d} ${r} ${h}`),u.setAttribute("width",r.toString()),u.setAttribute("height",h.toString()),t&&this.backgroundColor){let o=document.createElement("rect");o.setAttribute("width","100%"),o.setAttribute("height","100%"),o.setAttribute("fill",this.backgroundColor),u.appendChild(o)}if(e&&this._dataUrl){let o=this._dataUrlOptions?.ratio||window.devicePixelRatio||1,y=this._dataUrlOptions?.width||this.canvas.width/o,v=this._dataUrlOptions?.height||this.canvas.height/o,p=this._dataUrlOptions?.xOffset||0,g=this._dataUrlOptions?.yOffset||0,f=document.createElement("image");f.setAttribute("x",p.toString()),f.setAttribute("y",g.toString()),f.setAttribute("width",y.toString()),f.setAttribute("height",v.toString()),f.setAttribute("preserveAspectRatio","none"),f.setAttribute("href",this._dataUrl),u.appendChild(f)}return this._fromData(s,(o,{penColor:y})=>{let v=document.createElement("path");if(!isNaN(o.control1.x)&&!isNaN(o.control1.y)&&!isNaN(o.control2.x)&&!isNaN(o.control2.y)){let p=`M ${o.startPoint.x.toFixed(3)},${o.startPoint.y.toFixed(3)} C ${o.control1.x.toFixed(3)},${o.control1.y.toFixed(3)} ${o.control2.x.toFixed(3)},${o.control2.y.toFixed(3)} ${o.endPoint.x.toFixed(3)},${o.endPoint.y.toFixed(3)}`;v.setAttribute("d",p),v.setAttribute("stroke-width",(o.endWidth*2.25).toFixed(3)),v.setAttribute("stroke",y),v.setAttribute("fill","none"),v.setAttribute("stroke-linecap","round"),u.appendChild(v)}},(o,{penColor:y,dotSize:v,minWidth:p,maxWidth:g})=>{let f=document.createElement("circle"),x=v>0?v:(p+g)/2;f.setAttribute("r",x.toString()),f.setAttribute("cx",o.x.toString()),f.setAttribute("cy",o.y.toString()),f.setAttribute("fill",y),u.appendChild(f)},(o,y,v)=>{let p=document.createElement("line");p.setAttribute("x1",o.x.toString()),p.setAttribute("y1",o.y.toString()),p.setAttribute("x2",y.x.toString()),p.setAttribute("y2",y.y.toString()),p.setAttribute("stroke",v.penColor),p.setAttribute("stroke-width",(this._getDotSize(v)*2).toString()),p.setAttribute("stroke-linecap","round"),u.appendChild(p)}),u.outerHTML}};var P=typeof HTMLElement>"u"?class{}:HTMLElement,D=0,w=class extends P{constructor(){super();i(this,"setDisplayType",()=>{let t=[this.dataset.withDrawn,this.dataset.withTyped,this.dataset.withUpload].filter(e=>e==="false");this.textTypeButton.parentNode.style.display=this.dataset.withTyped==="false"?"none":"inherit",this.drawTypeButton.parentNode.style.display=this.dataset.withDrawn==="false"?"none":"inherit",this.uploadTypeButton.parentNode.style.display=this.dataset.withUpload==="false"?"none":"inherit",this.typeButtonsContainer.parentNode.style.display=t.length>1&&this.dataset.withUpload==="false"?"none":"inherit",t.length===3?console.error('At least one of the "with-typed", "with-drawn", or "with-upload" attributes must be set to "true".'):this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"&&this.enableUploadPanel()});i(this,"setDisplayColorSelect",()=>{this.colorSelect.style.visibility=this.dataset.withColorSelect==="false"?"hidden":"visible"});i(this,"setDisplaySubmit",()=>{this.saveButton.parentNode.style.display=this.dataset.withSubmit==="false"?"none":"inherit"});i(this,"setFontUrl",()=>{this.isFontLoaded=!1,this.fontPromise=null,this.isTextTypeSelected&&this.loadFont()});i(this,"setControlButtonsContainerClassAndStyle",()=>{let t=this.dataset.controlButtonsContainerClass||"",e=this.dataset.controlButtonsContainerStyle||(t?"":this.defaultStyles.controlButtonsContainer);this.controlButtonsContainer.setAttribute("style",e),this.controlButtonsContainer.setAttribute("class",t)});i(this,"setSaveButtonText",()=>{let t=this.saveButton.querySelector("span");t&&(t.innerText=this.dataset.saveButtonText||this.defaultLabels.saveButton)});i(this,"setSaveButtonClassAndStyle",()=>{let t=this.dataset.saveButtonClass||"",e=this.dataset.saveButtonStyle||(t?"":this.defaultStyles.saveButton);this.isSaveButtonDisabled&&(t&&this.dataset.saveButtonDisabledClass&&(t=this.combineStrings(t,this.dataset.saveButtonDisabledClass)),e&&this.dataset.saveButtonDisabledStyle?e=this.combineStrings(e,this.dataset.saveButtonDisabledStyle):t||(e=this.combineStrings(e,this.defaultStyles.saveButtonDisabled))),this.saveButton.setAttribute("class",t),this.saveButton.setAttribute("style",e)});i(this,"setUndoButtonText",()=>{let t=this.undoButton.querySelector("span");t&&(t.innerText=this.dataset.undoButtonText||this.defaultLabels.undoButton)});i(this,"setUndoButtonClassAndStyle",()=>{let t=this.dataset.undoButtonClass||"",e=this.dataset.undoButtonStyle||(t?"":this.defaultStyles.undoButton);this.undoButton.setAttribute("class",t),this.undoButton.setAttribute("style",e)});i(this,"setCleaButtonText",()=>{let t=this.clearButton.querySelector("span");t&&(t.innerText=this.dataset.clearButtonText||this.defaultLabels.clearButton)});i(this,"setClearButtonClassAndStyle",()=>{let t=this.dataset.clearButtonClass||"",e=this.dataset.clearButtonStyle||(t?"":this.defaultStyles.clearButton);this.clearButton.setAttribute("class",t),this.clearButton.setAttribute("style",e)});i(this,"setCanvasClassAndStyle",()=>{let t=this.dataset.canvasClass||"",e=this.dataset.canvasStyle||(t?"padding: 1px; touch-action: none; user-select: none;":this.defaultStyles.canvas);this.canvas.setAttribute("class",t),this.canvas.setAttribute("style",e)});i(this,"setTypeButtonsContainerClassAndStyle",()=>{let t=this.dataset.typeButtonsContainerClass||"",e=this.dataset.typeButtonsContainerStyle||(t?"":this.defaultStyles.typeButtonsContainer);this.typeButtonsContainer.setAttribute("style",e),this.typeButtonsContainer.setAttribute("class",t)});i(this,"setTextInputPlaceholder",()=>{this.textInput.setAttribute("placeholder",this.dataset.textInputPlaceholder||this.defaultLabels.textInputPlaceholder)});i(this,"setTextInputClassAndStyle",()=>{let t=this.dataset.textInputClass||"",e=this.dataset.textInputStyle||(t?"":this.defaultStyles.textInput);this.textInput.setAttribute("class",t),this.textInput.setAttribute("style",e)});i(this,"setDrawTypeButtonText",()=>{let t=this.drawTypeButton.querySelector("span");t&&(t.innerText=this.dataset.drawTypeButtonText||this.defaultLabels.drawTypeButton)});i(this,"setDrawTypeButtonClassAndStyle",()=>{let t=this.dataset.drawTypeButtonClass||"",e=this.dataset.drawTypeButtonStyle||(t?"":this.defaultStyles.drawTypeButton);this.isDrawTypeSelected&&(t&&this.dataset.drawTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.drawTypeButtonActiveClass)),e&&this.dataset.drawTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.drawTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.drawTypeButtonActive))),this.drawTypeButton.setAttribute("class",t),this.drawTypeButton.setAttribute("style",e)});i(this,"setTextTypeButtonText",()=>{let t=this.textTypeButton.querySelector("span");t&&(t.innerText=this.dataset.textTypeButtonText||this.defaultLabels.textTypeButton)});i(this,"setTextTypeButtonClassAndStyle",()=>{let t=this.dataset.textTypeButtonClass||"",e=this.dataset.textTypeButtonStyle||(t?"":this.defaultStyles.textTypeButton);this.isTextTypeSelected&&(t&&this.dataset.textTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.textTypeButtonActiveClass)),e&&this.dataset.textTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.textTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.textTypeButtonActive))),this.textTypeButton.setAttribute("class",t),this.textTypeButton.setAttribute("style",e)});i(this,"setUploadTypeButtonText",()=>{let t=this.uploadTypeButton.querySelector("span");t&&(t.innerText=this.dataset.uploadTypeButtonText||this.defaultLabels.uploadTypeButton)});i(this,"setUploadTypeButtonClassAndStyle",()=>{let t=this.dataset.uploadTypeButtonClass||"",e=this.dataset.uploadTypeButtonStyle||(t?"":this.defaultStyles.uploadTypeButton);this.isUploadTypeSelected&&(t&&this.dataset.uploadTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.uploadTypeButtonActiveClass)),e&&this.dataset.uploadTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.uploadTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.uploadTypeButtonActive))),this.uploadTypeButton.setAttribute("class",t),this.uploadTypeButton.setAttribute("style",e)});this.isMounted=!1,this.uid=++D}get defaultStyles(){return this.constructor.DEFAULT_STYLES}get defaultLabels(){return this.constructor.DEFAULT_LABELS}get clearButton(){return this.querySelector('[data-target="clearButton"]')}get undoButton(){return this.querySelector('[data-target="undoButton"]')}get controlButtonsContainer(){return this.querySelector('[data-target="controlButtonsContainer"]')}get typeButtonsContainer(){return this.querySelector('[data-target="typeButtonsContainer"]')}get drawTypeButton(){return this.querySelector('[data-target="drawTypeButton"]')}get textTypeButton(){return this.querySelector('[data-target="textTypeButton"]')}get uploadTypeButton(){return this.querySelector('[data-target="uploadTypeButton"]')}get textInput(){return this.querySelector('[data-target="textInput"]')}get fileInput(){return this.querySelector('[data-target="fileInput"]')}get saveButton(){return this.querySelector('[data-target="saveButton"]')}get canvas(){return this.querySelector('[data-target="canvas"]')}get colorSelect(){return this.querySelector('[data-target="colorSelect"]')}get colorInputs(){return[...this.querySelectorAll('[data-target="colorInput"]')]}get setters(){return{"data-with-typed":this.setDisplayType,"data-with-drawn":this.setDisplayType,"data-with-upload":this.setDisplayType,"data-with-color-select":this.setDisplayColorSelect,"data-with-submit":this.setDisplaySubmit,"data-font-url":this.setFontUrl,"data-control-buttons-container-class":this.setControlButtonsContainerClassAndStyle,"data-control-buttons-container-style":this.setControlButtonsContainerClassAndStyle,"data-save-button-text":this.setSaveButtonText,"data-save-button-class":this.setSaveButtonClassAndStyle,"data-save-button-style":this.setSaveButtonClassAndStyle,"data-save-button-disabled-class":this.setSaveButtonClassAndStyle,"data-save-button-disabled-style":this.setSaveButtonClassAndStyle,"data-undo-button-text":this.setUndoButtonText,"data-undo-button-class":this.setUndoButtonClassAndStyle,"data-undo-button-style":this.setUndoButtonClassAndStyle,"data-clear-button-text":this.setCleaButtonText,"data-clear-button-class":this.setClearButtonClassAndStyle,"data-clear-button-style":this.setClearButtonClassAndStyle,"data-canvas-class":this.setCanvasClassAndStyle,"data-canvas-style":this.setCanvasClassAndStyle,"data-text-input-placeholder":this.setTextInputPlaceholder,"data-text-input-class":this.setTextInputClassAndStyle,"data-text-input-style":this.setTextInputClassAndStyle,"data-type-buttons-container-class":this.setTypeButtonsContainerClassAndStyle,"data-type-buttons-container-style":this.setTypeButtonsContainerClassAndStyle,"data-draw-type-button-text":this.setDrawTypeButtonText,"data-draw-type-button-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-style":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-style":this.setDrawTypeButtonClassAndStyle,"data-text-type-button-text":this.setTextTypeButtonText,"data-text-type-button-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-style":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-style":this.setTextTypeButtonClassAndStyle,"data-upload-type-button-text":this.setUploadTypeButtonText,"data-upload-type-button-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-style":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-style":this.setUploadTypeButtonClassAndStyle}}get isDrawTypeSelected(){return this.drawTypeButton.querySelector("input").checked}get isTextTypeSelected(){return this.textTypeButton.querySelector("input").checked}get isUploadTypeSelected(){return this.uploadTypeButton.querySelector("input").checked}get isSaveButtonDisabled(){return this.saveButton.disabled}get isDownloadOnSaveSettingEnabled(){return this.dataset.downloadOnSave==="true"}get isColorSelectSettingEnabled(){return this.dataset.withColorSelect!=="false"}get isSubmitButtonSettingEnabled(){return this.dataset.withSubmit!=="false"}combineStrings(t,e){return[t,e].filter(Boolean).join(" ")}attributeChangedCallback(t,e,s){this.isMounted&&this.setters[t]&&e!==s&&this.setters[t]()}connectedCallback(){this.isMounted||(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.init(),{once:!0}):this.init())}init(){if(!(this.isMounted||!this.isConnected)){this.style.display="block",this.childrenNode=document.createElement("div"),this.appendChild(this.childrenNode),Array.from(this.childNodes).map(t=>{this.childrenNode!==t&&this.childrenNode.appendChild(t)}),this.childrenNode.style.display="none",this.fieldNode=document.createElement("div"),this.fieldNode.innerHTML=this.tempalte,this.appendChild(this.fieldNode),this.fieldNode.addEventListener("change",t=>t.stopPropagation()),this.pad=new B(this.canvas),this.isMounted=!0;for(let t in this.setters)this.setters.hasOwnProperty(t)&&this.setters[t]();this.scale=2,this.isFontLoaded=!1,this.fontPromise=null,this.resizeCanvas(),this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"?this.enableUploadPanel():this.enableDrawPanel(),this.pad.addEventListener("endStroke",()=>{this.handleDownloadState()}),this.clearButton.addEventListener("click",t=>{t.preventDefault(),this.cleaSignaturePad(),this.clearTextInput()}),this.undoButton.addEventListener("click",t=>{t.preventDefault();let e=this.pad.toData();e&&(e.pop(),this.pad.fromData(e),this.handleDownloadState())}),this.drawTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableDrawPanel()}),this.textTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableTextPanel()}),this.uploadTypeButton.addEventListener("click",()=>{this.uploadTypeButton.querySelector('input[type="radio"]').checked=!0,this.enableUploadPanel()}),this.fileInput.addEventListener("change",t=>{this.drawOnCanvas(t.target.files[0]).then(()=>{this.handleDownloadState()}).catch(e=>{alert(e.message)})}),this.colorInputs.forEach(t=>{t.addEventListener("change",e=>{this.textInput.value!==""&&(this.canvas.getContext("2d").fillStyle=e.target.value,this.drawText(),this.handleDownloadState()),this.pad.penColor=e.target.value})}),this.textInput.addEventListener("input",()=>{this.drawText(),this.handleDownloadState()}),this.saveButton.addEventListener("click",t=>{t.preventDefault(),this.disableSaveButton(),this.cropCanvas(this.canvas).then(e=>{this.isDownloadOnSaveSettingEnabled&&this.downloadBlob(e,`signature-${Date.now()}.png`),this.convertBlobToBase64(e).then(s=>{this.dispatchEvent(new CustomEvent("save",{detail:{base64:s,blob:e}}))}).catch(s=>{console.error("Failed to convert blob to base64:",s)})}).then(()=>{this.enableSaveButton()}).catch(e=>{console.error("Download failed:",e),this.disableSaveButton()})}),this.intersectionObserver=new IntersectionObserver((t,e)=>{t.forEach(s=>{s.isIntersecting&&this.resizeCanvas()&&this.intersectionObserver?.disconnect()})}),this.resizeObserver=new ResizeObserver(t=>{for(let e of t){let n=e.contentRect.width<576;this.drawTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.textTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.uploadTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.pad.isEmpty()&&this.textInput.value===""&&this.resizeCanvas()}}),this.resizeObserver.observe(this),this.intersectionObserver.observe(this.canvas)}}resizeCanvas(){let t=this.canvas.parentNode.clientWidth;return t===0?!1:(this.canvas.width!==t*this.scale&&(this.canvas.width=t*this.scale,this.canvas.height=t*this.scale/3,this.canvas.getContext("2d").setTransform(this.scale,0,0,this.scale,0,0),this.pad.clear()),!0)}enableDrawPanel(){this.drawTypeButton.querySelector("input").checked=!0,this.textTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="inline-block",this.pad.on(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableTextPanel(){this.drawTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!0,this.textInput.parentNode.style.display="inherit",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.loadFont(),this.clearTextInput(),this.clearFileInput()}enableUploadPanel(){this.uploadTypeButton.querySelector("input").checked=!0,this.drawTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="hidden"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!1,this.setSaveButtonClassAndStyle())}disableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!0,this.setSaveButtonClassAndStyle())}drawText(){let t=this.canvas,e=t.getContext("2d"),s="SignatureFont",n="58px",a="italic",d="";e.font=a+" "+d+" "+n+" "+s,e.textAlign="center",e.clearRect(0,0,t.width/this.scale,t.height/this.scale),e.fillText(this.textInput.value,t.width/2/this.scale,t.height/2/this.scale+11)}drawOnCanvas(t){return new Promise((e,s)=>{if(t&&t.type.match("image.*")){let n=new FileReader,a=this.canvas;n.onload=d=>{let r=new Image;r.src=d.target.result,r.onload=()=>{let h=a.getContext("2d"),u=r.width/r.height,o=a.width/this.scale,y=a.height/this.scale,v=o,p=y;o/y>u?v=y*u:p=o/u;let g=(o-v)/2,f=(y-p)/2;setTimeout(()=>{h.clearRect(0,0,o,y),h.drawImage(r,g,f,v,p),this.pad.fromDataURL("").catch(()=>{}),e()},50)},r.onerror=()=>s(new Error("Failed to load image"))},n.onerror=()=>s(new Error("Failed to read file")),n.readAsDataURL(t)}else s(new Error("Invalid file type"))})}clearTextInput(){this.textInput&&(this.textInput.value="",this.handleDownloadState())}cleaSignaturePad(){this.pad.clear(),this.handleDownloadState()}clearFileInput(){this.fileInput&&(this.fileInput.value="",this.handleDownloadState())}handleDownloadState(){let t=this.changeId=(this.changeId||0)+1;this.pad.isEmpty()&&this.textInput.value===""?(this.distributeSignatureData(null),this.disableSaveButton()):(this.cropCanvas(this.canvas).then(e=>{t===this.changeId&&this.distributeSignatureData(e)}).catch(e=>{console.error("Failed to create a PNG blob:",e)}),this.enableSaveButton())}distributeSignatureData(t){let e=this.childrenNode.querySelector('input[type="file"]');if(t){if(this.convertBlobToBase64(t).then(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:s,blob:t}}))}).catch(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),console.error("Failed to convert blob to base64:",s)}),e){let s=new File([t],`signature-${Date.now()}.png`,{type:t.type,lastModified:Date.now()}),n=new DataTransfer;n.items.add(s),e.files=n.files}}else this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),e&&(e.value="")}convertBlobToBase64(t){return new Promise((e,s)=>{let n=new FileReader;n.onloadend=()=>{let a=n.result.split(",")[1];e(a)},n.onerror=a=>{s(a)},n.readAsDataURL(t)})}loadFont(){if(!this.fontPromise){let t=this.dataset.fontUrl||"https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff",e=new FontFace("SignatureFont",`url(${t})`);this.fontPromise=e.load().then(s=>{document.fonts.add(s),this.isFontLoaded=!0})}this.fontPromise.then(()=>{this.isTextTypeSelected&&this.textInput.value!==""&&(this.drawText(),this.handleDownloadState())}).catch(t=>{this.fontPromise=null,console.error("Font loading failed:",t)})}downloadBlob(t,e){let s=window.URL.createObjectURL(t),n=document.createElement("a");return n.style="display: none",n.href=s,n.download=e,document.body.appendChild(n),n.click(),window.URL.revokeObjectURL(s),new Promise(a=>{a()})}cropCanvas(t){let e=t.getContext("2d"),s=t.width,n=t.height,a=n,d=0,r=s,h=0,o=e.getImageData(0,0,s,n).data;for(let f=0;f<n;f++)for(let x=0;x<s;x++){let b=(f*s+x)*4;o[b+3]!==0&&(a=Math.min(a,f),d=Math.max(d,f),r=Math.min(r,x),h=Math.max(h,x))}h<r&&(r=0,a=0,h=s-1,d=n-1);let y=h-r+1,v=d-a+1,p=document.createElement("canvas");return p.width=y,p.height=v,p.getContext("2d").drawImage(t,r,a,y,v,0,0,y,v),new Promise((f,x)=>{p.toBlob(b=>{b?f(b):x(new Error("Failed to create a PNG blob."))},"image/png")})}disconnectedCallback(){this.isMounted&&(this.resizeObserver?.disconnect(),this.intersectionObserver?.disconnect(),this.pad.off(),this.fieldNode.remove(),this.append(...this.childrenNode.childNodes),this.childrenNode.remove(),this.isMounted=!1)}get tempalte(){return`
|
|
2
2
|
<div>
|
|
3
3
|
<div>
|
|
4
4
|
<div data-target="typeButtonsContainer">
|
package/dist/index.cjs.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _=Object.defineProperty;var C=(c,l,t)=>l in c?_(c,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[l]=t;var i=(c,l,t)=>C(c,typeof l!="symbol"?l+"":l,t);var m=class{constructor(c,l,t,e){i(this,"x");i(this,"y");i(this,"pressure");i(this,"time");if(isNaN(c)||isNaN(l))throw new Error(`Point is invalid: (${c}, ${l})`);this.x=+c,this.y=+l,this.pressure=t||0,this.time=e||Date.now()}distanceTo(c){return Math.sqrt(Math.pow(this.x-c.x,2)+Math.pow(this.y-c.y,2))}equals(c){return this.x===c.x&&this.y===c.y&&this.pressure===c.pressure&&this.time===c.time}velocityFrom(c){return this.time!==c.time?this.distanceTo(c)/(this.time-c.time):0}},E=class T{constructor(l,t,e,s,n,a){i(this,"startPoint");i(this,"control2");i(this,"control1");i(this,"endPoint");i(this,"startWidth");i(this,"endWidth");this.startPoint=l,this.control2=t,this.control1=e,this.endPoint=s,this.startWidth=n,this.endWidth=a}static fromPoints(l,t){let e=this.calculateControlPoints(l[0],l[1],l[2]).c2,s=this.calculateControlPoints(l[1],l[2],l[3]).c1;return new T(l[1],e,s,l[2],t.start,t.end)}static calculateControlPoints(l,t,e){let s=l.x-t.x,n=l.y-t.y,a=t.x-e.x,d=t.y-e.y,r={x:(l.x+t.x)/2,y:(l.y+t.y)/2},h={x:(t.x+e.x)/2,y:(t.y+e.y)/2},u=Math.sqrt(s*s+n*n),o=Math.sqrt(a*a+d*d),y=r.x-h.x,v=r.y-h.y,p=u+o==0?0:o/(u+o),g={x:h.x+y*p,y:h.y+v*p},f=t.x-g.x,x=t.y-g.y;return{c1:new m(r.x+f,r.y+x),c2:new m(h.x+f,h.y+x)}}length(){let t=0,e,s;for(let n=0;n<=10;n+=1){let a=n/10,d=this.point(a,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(a,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){let h=d-e,u=r-s;t+=Math.sqrt(h*h+u*u)}e=d,s=r}return t}point(l,t,e,s,n){return t*(1-l)*(1-l)*(1-l)+3*e*(1-l)*(1-l)*l+3*s*(1-l)*l*l+n*l*l*l}},k=class{constructor(){i(this,"_et");try{this._et=new EventTarget}catch{this._et=document}}addEventListener(c,l,t){this._et.addEventListener(c,l,t)}dispatchEvent(c){return this._et.dispatchEvent(c)}removeEventListener(c,l,t){this._et.removeEventListener(c,l,t)}};function A(c,l=250){let t=0,e=null,s,n,a,d=()=>{t=Date.now(),e=null,s=c.apply(n,a),e||(n=null,a=[])};return function(...h){let u=Date.now(),o=l-(u-t);return n=this,a=h,o<=0||o>l?(e&&(clearTimeout(e),e=null),t=u,s=c.apply(n,a),e||(n=null,a=[])):e||(e=window.setTimeout(d,o)),s}}var B=class S extends k{constructor(t,e={}){super();i(this,"canvas");i(this,"dotSize");i(this,"minWidth");i(this,"maxWidth");i(this,"penColor");i(this,"minDistance");i(this,"velocityFilterWeight");i(this,"compositeOperation");i(this,"backgroundColor");i(this,"throttle");i(this,"canvasContextOptions");i(this,"_ctx");i(this,"_drawingStroke",!1);i(this,"_isEmpty",!0);i(this,"_dataUrl");i(this,"_dataUrlOptions");i(this,"_lastPoints",[]);i(this,"_data",[]);i(this,"_lastVelocity",0);i(this,"_lastWidth",0);i(this,"_strokeMoveUpdate");i(this,"_strokePointerId");this.canvas=t,this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle=e.throttle??16,this.minDistance=e.minDistance??5,this.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=e.compositeOperation||"source-over",this.canvasContextOptions=e.canvasContextOptions??{},this._strokeMoveUpdate=this.throttle?A(S.prototype._strokeUpdate,this.throttle):S.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=t.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}clear(){let{_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(){let t=this._data,e=this._dataUrl,s=this._dataUrlOptions;this.clear(),e&&this.fromDataURL(e,s),this.fromData(t,{clear:!1})}fromDataURL(t,e={}){return new Promise((s,n)=>{let a=new Image,d=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/d,h=e.height||this.canvas.height/d,u=e.xOffset||0,o=e.yOffset||0;this._reset(this._getPointGroupOptions()),a.onload=()=>{this._ctx.drawImage(a,u,o,r,h),s()},a.onerror=y=>{n(y)},a.crossOrigin="anonymous",a.src=t,this._isEmpty=!1,this._dataUrl=t,this._dataUrlOptions={...e}})}toDataURL(t="image/png",e){return t==="image/svg+xml"?(typeof e!="object"&&(e=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(e))}`):(typeof e!="number"&&(e=void 0),this.canvas.toDataURL(t,e))}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none",this.canvas.style.webkitUserSelect="none";let 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.style.webkitUserSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){let 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(){let{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._drawLine.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_isLeftButtonPressed(t,e){return e?t.buttons===1:(t.buttons&1)===1}_pointerEventToSignatureEvent(t){return{event:t,type:t.type,x:t.clientX,y:t.clientY,pressure:"pressure"in t?t.pressure:0}}_touchEventToSignatureEvent(t){let 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){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}_handleMouseUp(t){this._isLeftButtonPressed(t)||this._strokeEnd(this._pointerEventToSignatureEvent(t))}_handleTouchStart(t){t.targetTouches.length!==1||this._drawingStroke||(t.cancelable&&t.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(t)))}_handleTouchMove(t){if(t.targetTouches.length===1){if(t.cancelable&&t.preventDefault(),!this._drawingStroke){this._strokeEnd(this._touchEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._touchEventToSignatureEvent(t))}}_handleTouchEnd(t){t.targetTouches.length===0&&(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 typeof this._strokePointerId>"u"?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){if(this._allowPointerId(t)){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}t.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}}_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;let{addEventListener:s}=this._getListenerFunctions();switch(t.event.type){case"mousedown":s("mousemove",this._handleMouseMove,{passive:!1}),s("mouseup",this._handleMouseUp,{passive:!1});break;case"touchstart":s("touchmove",this._handleTouchMove,{passive:!1}),s("touchend",this._handleTouchEnd,{passive:!1}),s("touchcancel",this._handleTouchCancel,{passive:!1});break;case"pointerdown":s("pointermove",this._handlePointerMove,{passive:!1}),s("pointerup",this._handlePointerUp,{passive:!1}),s("pointercancel",this._handlePointerCancel,{passive:!1});break;default:}this._drawingStroke=!0;let n=this._getPointGroupOptions(),a={...n,points:[]};this._data.push(a),this._reset(n),this._strokeUpdate(t)}_strokeUpdate(t){if(!this._drawingStroke)return;if(this._data.length===0){this._strokeBegin(t);return}this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));let e=this._createPoint(t.x,t.y,t.pressure),s=this._data[this._data.length-1],n=s.points,a=n.length>0&&n[n.length-1],d=a?e.distanceTo(a)<=this.minDistance:!1,r=this._getPointGroupOptions(s);if(!a||!(a&&d)){let h=this._addPoint(e,r);a?h&&this._drawCurve(h,r):this._drawDot(e,r),n.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,s){let n=this.canvas.getBoundingClientRect();return new m(t-n.left,e-n.top,s,new Date().getTime())}_addPoint(t,e){let{_lastPoints:s}=this;if(s.push(t),s.length>2){s.length===3&&s.unshift(s[0]);let n=this._calculateCurveWidths(s[1],s[2],e),a=E.fromPoints(s,n);return s.shift(),a}return null}_calculateCurveWidths(t,e,s){let n=s.velocityFilterWeight*e.velocityFrom(t)+(1-s.velocityFilterWeight)*this._lastVelocity,a=this._strokeWidth(n,s),d={end:a,start:this._lastWidth};return this._lastVelocity=n,this._lastWidth=a,d}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,s){let n=this._ctx;n.moveTo(t,e),n.arc(t,e,s,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){let s=this._ctx,n=t.endWidth-t.startWidth,a=Math.ceil(t.length())*2;s.beginPath(),s.fillStyle=e.penColor;for(let d=0;d<a;d+=1){let r=d/a,h=r*r,u=h*r,o=1-r,y=o*o,v=y*o,p=v*t.startPoint.x;p+=3*y*r*t.control1.x,p+=3*o*h*t.control2.x,p+=u*t.endPoint.x;let g=v*t.startPoint.y;g+=3*y*r*t.control1.y,g+=3*o*h*t.control2.y,g+=u*t.endPoint.y;let f=Math.min(t.startWidth+u*n,e.maxWidth);this._drawCurveSegment(p,g,f)}s.closePath(),s.fill()}_getDotSize(t){return t.dotSize>0?t.dotSize:(t.minWidth+t.maxWidth)/2}_drawDot(t,e){let s=this._ctx,n=this._getDotSize(e);s.beginPath(),this._drawCurveSegment(t.x,t.y,n),s.closePath(),s.fillStyle=e.penColor,s.fill()}_drawLine(t,e,s){let n=this._ctx;n.save(),n.beginPath(),n.moveTo(t.x,t.y),n.lineTo(e.x,e.y),n.lineWidth=this._getDotSize(s)*2,n.lineCap="round",n.strokeStyle=s.penColor,n.stroke(),n.restore(),this._isEmpty=!1}_fromData(t,e,s,n){for(let a of t){let{points:d}=a,r=this._getPointGroupOptions(a);if(d.length>2)for(let h=0;h<d.length;h+=1){let u=d[h],o=new m(u.x,u.y,u.pressure,u.time);h===0&&this._reset(r);let y=this._addPoint(o,r);y&&e(y,r)}else d.length===2?(this._reset(r),n(d[0],d[1],r)):(this._reset(r),s(d[0],r))}}toSVG({includeBackgroundColor:t=!1,includeDataUrl:e=!1}={}){let s=this._data,n=Math.max(window.devicePixelRatio||1,1),a=0,d=0,r=this.canvas.width/n,h=this.canvas.height/n,u=document.createElementNS("http://www.w3.org/2000/svg","svg");if(u.setAttribute("xmlns","http://www.w3.org/2000/svg"),u.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),u.setAttribute("viewBox",`${a} ${d} ${r} ${h}`),u.setAttribute("width",r.toString()),u.setAttribute("height",h.toString()),t&&this.backgroundColor){let o=document.createElement("rect");o.setAttribute("width","100%"),o.setAttribute("height","100%"),o.setAttribute("fill",this.backgroundColor),u.appendChild(o)}if(e&&this._dataUrl){let o=this._dataUrlOptions?.ratio||window.devicePixelRatio||1,y=this._dataUrlOptions?.width||this.canvas.width/o,v=this._dataUrlOptions?.height||this.canvas.height/o,p=this._dataUrlOptions?.xOffset||0,g=this._dataUrlOptions?.yOffset||0,f=document.createElement("image");f.setAttribute("x",p.toString()),f.setAttribute("y",g.toString()),f.setAttribute("width",y.toString()),f.setAttribute("height",v.toString()),f.setAttribute("preserveAspectRatio","none"),f.setAttribute("href",this._dataUrl),u.appendChild(f)}return this._fromData(s,(o,{penColor:y})=>{let v=document.createElement("path");if(!isNaN(o.control1.x)&&!isNaN(o.control1.y)&&!isNaN(o.control2.x)&&!isNaN(o.control2.y)){let p=`M ${o.startPoint.x.toFixed(3)},${o.startPoint.y.toFixed(3)} C ${o.control1.x.toFixed(3)},${o.control1.y.toFixed(3)} ${o.control2.x.toFixed(3)},${o.control2.y.toFixed(3)} ${o.endPoint.x.toFixed(3)},${o.endPoint.y.toFixed(3)}`;v.setAttribute("d",p),v.setAttribute("stroke-width",(o.endWidth*2.25).toFixed(3)),v.setAttribute("stroke",y),v.setAttribute("fill","none"),v.setAttribute("stroke-linecap","round"),u.appendChild(v)}},(o,{penColor:y,dotSize:v,minWidth:p,maxWidth:g})=>{let f=document.createElement("circle"),x=v>0?v:(p+g)/2;f.setAttribute("r",x.toString()),f.setAttribute("cx",o.x.toString()),f.setAttribute("cy",o.y.toString()),f.setAttribute("fill",y),u.appendChild(f)},(o,y,v)=>{let p=document.createElement("line");p.setAttribute("x1",o.x.toString()),p.setAttribute("y1",o.y.toString()),p.setAttribute("x2",y.x.toString()),p.setAttribute("y2",y.y.toString()),p.setAttribute("stroke",v.penColor),p.setAttribute("stroke-width",(this._getDotSize(v)*2).toString()),p.setAttribute("stroke-linecap","round"),u.appendChild(p)}),u.outerHTML}};var D=typeof HTMLElement>"u"?class{}:HTMLElement,P=0,w=class extends D{constructor(){super();i(this,"setDisplayType",()=>{let t=[this.dataset.withDrawn,this.dataset.withTyped,this.dataset.withUpload].filter(e=>e==="false");this.textTypeButton.parentNode.style.display=this.dataset.withTyped==="false"?"none":"inherit",this.drawTypeButton.parentNode.style.display=this.dataset.withDrawn==="false"?"none":"inherit",this.uploadTypeButton.parentNode.style.display=this.dataset.withUpload==="false"?"none":"inherit",this.typeButtonsContainer.parentNode.style.display=t.length>1&&this.dataset.withUpload==="false"?"none":"inherit",t.length===3?console.error('At least one of the "with-typed", "with-drawn", or "with-upload" attributes must be set to "true".'):this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"&&this.enableUploadPanel()});i(this,"setDisplayColorSelect",()=>{this.colorSelect.style.visibility=this.dataset.withColorSelect==="false"?"hidden":"visible"});i(this,"setDisplaySubmit",()=>{this.saveButton.parentNode.style.display=this.dataset.withSubmit==="false"?"none":"inherit"});i(this,"setFontUrl",()=>{this.isFontLoaded=!1,this.fontPromise=null,this.isTextTypeSelected&&this.loadFont()});i(this,"setControlButtonsContainerClassAndStyle",()=>{let t=this.dataset.controlButtonsContainerClass||"",e=this.dataset.controlButtonsContainerStyle||(t?"":this.defaultStyles.controlButtonsContainer);this.controlButtonsContainer.setAttribute("style",e),this.controlButtonsContainer.setAttribute("class",t)});i(this,"setSaveButtonText",()=>{let t=this.saveButton.querySelector("span");t&&(t.innerText=this.dataset.saveButtonText||this.defaultLabels.saveButton)});i(this,"setSaveButtonClassAndStyle",()=>{let t=this.dataset.saveButtonClass||"",e=this.dataset.saveButtonStyle||(t?"":this.defaultStyles.saveButton);this.isSaveButtonDisabled&&(t&&this.dataset.saveButtonDisabledClass&&(t=this.combineStrings(t,this.dataset.saveButtonDisabledClass)),e&&this.dataset.saveButtonDisabledStyle?e=this.combineStrings(e,this.dataset.saveButtonDisabledStyle):t||(e=this.combineStrings(e,this.defaultStyles.saveButtonDisabled))),this.saveButton.setAttribute("class",t),this.saveButton.setAttribute("style",e)});i(this,"setUndoButtonText",()=>{let t=this.undoButton.querySelector("span");t&&(t.innerText=this.dataset.undoButtonText||this.defaultLabels.undoButton)});i(this,"setUndoButtonClassAndStyle",()=>{let t=this.dataset.undoButtonClass||"",e=this.dataset.undoButtonStyle||(t?"":this.defaultStyles.undoButton);this.undoButton.setAttribute("class",t),this.undoButton.setAttribute("style",e)});i(this,"setCleaButtonText",()=>{let t=this.clearButton.querySelector("span");t&&(t.innerText=this.dataset.clearButtonText||this.defaultLabels.clearButton)});i(this,"setClearButtonClassAndStyle",()=>{let t=this.dataset.clearButtonClass||"",e=this.dataset.clearButtonStyle||(t?"":this.defaultStyles.clearButton);this.clearButton.setAttribute("class",t),this.clearButton.setAttribute("style",e)});i(this,"setCanvasClassAndStyle",()=>{let t=this.dataset.canvasClass||"",e=this.dataset.canvasStyle||(t?"padding: 1px; touch-action: none; user-select: none;":this.defaultStyles.canvas);this.canvas.setAttribute("class",t),this.canvas.setAttribute("style",e)});i(this,"setTypeButtonsContainerClassAndStyle",()=>{let t=this.dataset.typeButtonsContainerClass||"",e=this.dataset.typeButtonsContainerStyle||(t?"":this.defaultStyles.typeButtonsContainer);this.typeButtonsContainer.setAttribute("style",e),this.typeButtonsContainer.setAttribute("class",t)});i(this,"setTextInputPlaceholder",()=>{this.textInput.setAttribute("placeholder",this.dataset.textInputPlaceholder||this.defaultLabels.textInputPlaceholder)});i(this,"setTextInputClassAndStyle",()=>{let t=this.dataset.textInputClass||"",e=this.dataset.textInputStyle||(t?"":this.defaultStyles.textInput);this.textInput.setAttribute("class",t),this.textInput.setAttribute("style",e)});i(this,"setDrawTypeButtonText",()=>{let t=this.drawTypeButton.querySelector("span");t&&(t.innerText=this.dataset.drawTypeButtonText||this.defaultLabels.drawTypeButton)});i(this,"setDrawTypeButtonClassAndStyle",()=>{let t=this.dataset.drawTypeButtonClass||"",e=this.dataset.drawTypeButtonStyle||(t?"":this.defaultStyles.drawTypeButton);this.isDrawTypeSelected&&(t&&this.dataset.drawTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.drawTypeButtonActiveClass)),e&&this.dataset.drawTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.drawTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.drawTypeButtonActive))),this.drawTypeButton.setAttribute("class",t),this.drawTypeButton.setAttribute("style",e)});i(this,"setTextTypeButtonText",()=>{let t=this.textTypeButton.querySelector("span");t&&(t.innerText=this.dataset.textTypeButtonText||this.defaultLabels.textTypeButton)});i(this,"setTextTypeButtonClassAndStyle",()=>{let t=this.dataset.textTypeButtonClass||"",e=this.dataset.textTypeButtonStyle||(t?"":this.defaultStyles.textTypeButton);this.isTextTypeSelected&&(t&&this.dataset.textTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.textTypeButtonActiveClass)),e&&this.dataset.textTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.textTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.textTypeButtonActive))),this.textTypeButton.setAttribute("class",t),this.textTypeButton.setAttribute("style",e)});i(this,"setUploadTypeButtonText",()=>{let t=this.uploadTypeButton.querySelector("span");t&&(t.innerText=this.dataset.uploadTypeButtonText||this.defaultLabels.uploadTypeButton)});i(this,"setUploadTypeButtonClassAndStyle",()=>{let t=this.dataset.uploadTypeButtonClass||"",e=this.dataset.uploadTypeButtonStyle||(t?"":this.defaultStyles.uploadTypeButton);this.isUploadTypeSelected&&(t&&this.dataset.uploadTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.uploadTypeButtonActiveClass)),e&&this.dataset.uploadTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.uploadTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.uploadTypeButtonActive))),this.uploadTypeButton.setAttribute("class",t),this.uploadTypeButton.setAttribute("style",e)});this.isMounted=!1,this.uid=++P}get defaultStyles(){return this.constructor.DEFAULT_STYLES}get defaultLabels(){return this.constructor.DEFAULT_LABELS}get clearButton(){return this.querySelector('[data-target="clearButton"]')}get undoButton(){return this.querySelector('[data-target="undoButton"]')}get controlButtonsContainer(){return this.querySelector('[data-target="controlButtonsContainer"]')}get typeButtonsContainer(){return this.querySelector('[data-target="typeButtonsContainer"]')}get drawTypeButton(){return this.querySelector('[data-target="drawTypeButton"]')}get textTypeButton(){return this.querySelector('[data-target="textTypeButton"]')}get uploadTypeButton(){return this.querySelector('[data-target="uploadTypeButton"]')}get textInput(){return this.querySelector('[data-target="textInput"]')}get fileInput(){return this.querySelector('[data-target="fileInput"]')}get saveButton(){return this.querySelector('[data-target="saveButton"]')}get canvas(){return this.querySelector('[data-target="canvas"]')}get colorSelect(){return this.querySelector('[data-target="colorSelect"]')}get colorInputs(){return[...this.querySelectorAll('[data-target="colorInput"]')]}get setters(){return{"data-with-typed":this.setDisplayType,"data-with-drawn":this.setDisplayType,"data-with-upload":this.setDisplayType,"data-with-color-select":this.setDisplayColorSelect,"data-with-submit":this.setDisplaySubmit,"data-font-url":this.setFontUrl,"data-control-buttons-container-class":this.setControlButtonsContainerClassAndStyle,"data-control-buttons-container-style":this.setControlButtonsContainerClassAndStyle,"data-save-button-text":this.setSaveButtonText,"data-save-button-class":this.setSaveButtonClassAndStyle,"data-save-button-style":this.setSaveButtonClassAndStyle,"data-save-button-disabled-class":this.setSaveButtonClassAndStyle,"data-save-button-disabled-style":this.setSaveButtonClassAndStyle,"data-undo-button-text":this.setUndoButtonText,"data-undo-button-class":this.setUndoButtonClassAndStyle,"data-undo-button-style":this.setUndoButtonClassAndStyle,"data-clear-button-text":this.setCleaButtonText,"data-clear-button-class":this.setClearButtonClassAndStyle,"data-clear-button-style":this.setClearButtonClassAndStyle,"data-canvas-class":this.setCanvasClassAndStyle,"data-canvas-style":this.setCanvasClassAndStyle,"data-text-input-placeholder":this.setTextInputPlaceholder,"data-text-input-class":this.setTextInputClassAndStyle,"data-text-input-style":this.setTextInputClassAndStyle,"data-type-buttons-container-class":this.setTypeButtonsContainerClassAndStyle,"data-type-buttons-container-style":this.setTypeButtonsContainerClassAndStyle,"data-draw-type-button-text":this.setDrawTypeButtonText,"data-draw-type-button-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-style":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-style":this.setDrawTypeButtonClassAndStyle,"data-text-type-button-text":this.setTextTypeButtonText,"data-text-type-button-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-style":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-style":this.setTextTypeButtonClassAndStyle,"data-upload-type-button-text":this.setUploadTypeButtonText,"data-upload-type-button-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-style":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-style":this.setUploadTypeButtonClassAndStyle}}get isDrawTypeSelected(){return this.drawTypeButton.querySelector("input").checked}get isTextTypeSelected(){return this.textTypeButton.querySelector("input").checked}get isUploadTypeSelected(){return this.uploadTypeButton.querySelector("input").checked}get isSaveButtonDisabled(){return this.saveButton.disabled}get isDownloadOnSaveSettingEnabled(){return this.dataset.downloadOnSave==="true"}get isColorSelectSettingEnabled(){return this.dataset.withColorSelect!=="false"}get isSubmitButtonSettingEnabled(){return this.dataset.withSubmit!=="false"}combineStrings(t,e){return[t,e].filter(Boolean).join(" ")}attributeChangedCallback(t,e,s){this.isMounted&&this.setters[t]&&e!==s&&this.setters[t]()}connectedCallback(){this.isMounted||(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.init(),{once:!0}):this.init())}init(){if(!(this.isMounted||!this.isConnected)){this.style.display="block",this.childrenNode=document.createElement("div"),this.appendChild(this.childrenNode),Array.from(this.childNodes).map(t=>{this.childrenNode!==t&&this.childrenNode.appendChild(t)}),this.childrenNode.style.display="none",this.fieldNode=document.createElement("div"),this.fieldNode.innerHTML=this.tempalte,this.appendChild(this.fieldNode),this.pad=new B(this.canvas),this.isMounted=!0;for(let t in this.setters)this.setters.hasOwnProperty(t)&&this.setters[t]();this.scale=2,this.isFontLoaded=!1,this.fontPromise=null,this.resizeCanvas(),this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"?this.enableUploadPanel():this.enableDrawPanel(),this.pad.addEventListener("endStroke",()=>{this.handleDownloadState()}),this.clearButton.addEventListener("click",t=>{t.preventDefault(),this.cleaSignaturePad(),this.clearTextInput()}),this.undoButton.addEventListener("click",t=>{t.preventDefault();let e=this.pad.toData();e&&(e.pop(),this.pad.fromData(e),this.handleDownloadState())}),this.drawTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableDrawPanel()}),this.textTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableTextPanel()}),this.uploadTypeButton.addEventListener("click",()=>{this.uploadTypeButton.querySelector('input[type="radio"]').checked=!0,this.enableUploadPanel()}),this.fileInput.addEventListener("change",t=>{this.drawOnCanvas(t.target.files[0]).then(()=>{this.handleDownloadState()}).catch(e=>{alert(e.message)})}),this.colorInputs.forEach(t=>{t.addEventListener("change",e=>{this.textInput.value!==""&&(this.canvas.getContext("2d").fillStyle=e.target.value,this.drawText(),this.handleDownloadState()),this.pad.penColor=e.target.value})}),this.textInput.addEventListener("input",()=>{this.drawText(),this.handleDownloadState()}),this.saveButton.addEventListener("click",t=>{t.preventDefault(),this.disableSaveButton(),this.cropCanvas(this.canvas).then(e=>{this.isDownloadOnSaveSettingEnabled&&this.downloadBlob(e,`signature-${Date.now()}.png`),this.convertBlobToBase64(e).then(s=>{this.dispatchEvent(new CustomEvent("save",{detail:{base64:s,blob:e}}))}).catch(s=>{console.error("Failed to convert blob to base64:",s)})}).then(()=>{this.enableSaveButton()}).catch(e=>{console.error("Download failed:",e),this.disableSaveButton()})}),this.intersectionObserver=new IntersectionObserver((t,e)=>{t.forEach(s=>{s.isIntersecting&&this.resizeCanvas()&&this.intersectionObserver?.disconnect()})}),this.resizeObserver=new ResizeObserver(t=>{for(let e of t){let n=e.contentRect.width<576;this.drawTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.textTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.uploadTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.pad.isEmpty()&&this.textInput.value===""&&this.resizeCanvas()}}),this.resizeObserver.observe(this),this.intersectionObserver.observe(this.canvas)}}resizeCanvas(){let t=this.canvas.parentNode.clientWidth;return t===0?!1:(this.canvas.width!==t*this.scale&&(this.canvas.width=t*this.scale,this.canvas.height=t*this.scale/3,this.canvas.getContext("2d").setTransform(this.scale,0,0,this.scale,0,0),this.pad.clear()),!0)}enableDrawPanel(){this.drawTypeButton.querySelector("input").checked=!0,this.textTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="inline-block",this.pad.on(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableTextPanel(){this.drawTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!0,this.textInput.parentNode.style.display="inherit",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.loadFont(),this.clearTextInput(),this.clearFileInput()}enableUploadPanel(){this.uploadTypeButton.querySelector("input").checked=!0,this.drawTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="hidden"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!1,this.setSaveButtonClassAndStyle())}disableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!0,this.setSaveButtonClassAndStyle())}drawText(){let t=this.canvas,e=t.getContext("2d"),s="SignatureFont",n="58px",a="italic",d="";e.font=a+" "+d+" "+n+" "+s,e.textAlign="center",e.clearRect(0,0,t.width/this.scale,t.height/this.scale),e.fillText(this.textInput.value,t.width/2/this.scale,t.height/2/this.scale+11)}drawOnCanvas(t){return new Promise((e,s)=>{if(t&&t.type.match("image.*")){let n=new FileReader,a=this.canvas;n.onload=d=>{let r=new Image;r.src=d.target.result,r.onload=()=>{let h=a.getContext("2d"),u=r.width/r.height,o=a.width/this.scale,y=a.height/this.scale,v=o,p=y;o/y>u?v=y*u:p=o/u;let g=(o-v)/2,f=(y-p)/2;setTimeout(()=>{h.clearRect(0,0,o,y),h.drawImage(r,g,f,v,p),this.pad.fromDataURL("").catch(()=>{}),e()},50)},r.onerror=()=>s(new Error("Failed to load image"))},n.onerror=()=>s(new Error("Failed to read file")),n.readAsDataURL(t)}else s(new Error("Invalid file type"))})}clearTextInput(){this.textInput&&(this.textInput.value="",this.handleDownloadState())}cleaSignaturePad(){this.pad.clear(),this.handleDownloadState()}clearFileInput(){this.fileInput&&(this.fileInput.value="",this.handleDownloadState())}handleDownloadState(){let t=this.changeId=(this.changeId||0)+1;this.pad.isEmpty()&&this.textInput.value===""?(this.distributeSignatureData(null),this.disableSaveButton()):(this.cropCanvas(this.canvas).then(e=>{t===this.changeId&&this.distributeSignatureData(e)}).catch(e=>{console.error("Failed to create a PNG blob:",e)}),this.enableSaveButton())}distributeSignatureData(t){let e=this.childrenNode.querySelector('input[type="file"]');if(t){if(this.convertBlobToBase64(t).then(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:s,blob:t}}))}).catch(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),console.error("Failed to convert blob to base64:",s)}),e){let s=new File([t],`signature-${Date.now()}.png`,{type:t.type,lastModified:Date.now()}),n=new DataTransfer;n.items.add(s),e.files=n.files}}else this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),e&&(e.value="")}convertBlobToBase64(t){return new Promise((e,s)=>{let n=new FileReader;n.onloadend=()=>{let a=n.result.split(",")[1];e(a)},n.onerror=a=>{s(a)},n.readAsDataURL(t)})}loadFont(){if(!this.fontPromise){let t=this.dataset.fontUrl||"https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff",e=new FontFace("SignatureFont",`url(${t})`);this.fontPromise=e.load().then(s=>{document.fonts.add(s),this.isFontLoaded=!0})}this.fontPromise.then(()=>{this.isTextTypeSelected&&this.textInput.value!==""&&(this.drawText(),this.handleDownloadState())}).catch(t=>{this.fontPromise=null,console.error("Font loading failed:",t)})}downloadBlob(t,e){let s=window.URL.createObjectURL(t),n=document.createElement("a");return n.style="display: none",n.href=s,n.download=e,document.body.appendChild(n),n.click(),window.URL.revokeObjectURL(s),new Promise(a=>{a()})}cropCanvas(t){let e=t.getContext("2d"),s=t.width,n=t.height,a=n,d=0,r=s,h=0,o=e.getImageData(0,0,s,n).data;for(let f=0;f<n;f++)for(let x=0;x<s;x++){let b=(f*s+x)*4;o[b+3]!==0&&(a=Math.min(a,f),d=Math.max(d,f),r=Math.min(r,x),h=Math.max(h,x))}h<r&&(r=0,a=0,h=s-1,d=n-1);let y=h-r+1,v=d-a+1,p=document.createElement("canvas");return p.width=y,p.height=v,p.getContext("2d").drawImage(t,r,a,y,v,0,0,y,v),new Promise((f,x)=>{p.toBlob(b=>{b?f(b):x(new Error("Failed to create a PNG blob."))},"image/png")})}disconnectedCallback(){this.isMounted&&(this.resizeObserver?.disconnect(),this.intersectionObserver?.disconnect(),this.pad.off(),this.fieldNode.remove(),this.append(...this.childrenNode.childNodes),this.childrenNode.remove(),this.isMounted=!1)}get tempalte(){return`
|
|
1
|
+
var _=Object.defineProperty;var C=(c,l,t)=>l in c?_(c,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[l]=t;var i=(c,l,t)=>C(c,typeof l!="symbol"?l+"":l,t);var m=class{constructor(c,l,t,e){i(this,"x");i(this,"y");i(this,"pressure");i(this,"time");if(isNaN(c)||isNaN(l))throw new Error(`Point is invalid: (${c}, ${l})`);this.x=+c,this.y=+l,this.pressure=t||0,this.time=e||Date.now()}distanceTo(c){return Math.sqrt(Math.pow(this.x-c.x,2)+Math.pow(this.y-c.y,2))}equals(c){return this.x===c.x&&this.y===c.y&&this.pressure===c.pressure&&this.time===c.time}velocityFrom(c){return this.time!==c.time?this.distanceTo(c)/(this.time-c.time):0}},E=class T{constructor(l,t,e,s,n,a){i(this,"startPoint");i(this,"control2");i(this,"control1");i(this,"endPoint");i(this,"startWidth");i(this,"endWidth");this.startPoint=l,this.control2=t,this.control1=e,this.endPoint=s,this.startWidth=n,this.endWidth=a}static fromPoints(l,t){let e=this.calculateControlPoints(l[0],l[1],l[2]).c2,s=this.calculateControlPoints(l[1],l[2],l[3]).c1;return new T(l[1],e,s,l[2],t.start,t.end)}static calculateControlPoints(l,t,e){let s=l.x-t.x,n=l.y-t.y,a=t.x-e.x,d=t.y-e.y,r={x:(l.x+t.x)/2,y:(l.y+t.y)/2},h={x:(t.x+e.x)/2,y:(t.y+e.y)/2},u=Math.sqrt(s*s+n*n),o=Math.sqrt(a*a+d*d),y=r.x-h.x,v=r.y-h.y,p=u+o==0?0:o/(u+o),g={x:h.x+y*p,y:h.y+v*p},f=t.x-g.x,x=t.y-g.y;return{c1:new m(r.x+f,r.y+x),c2:new m(h.x+f,h.y+x)}}length(){let t=0,e,s;for(let n=0;n<=10;n+=1){let a=n/10,d=this.point(a,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(a,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){let h=d-e,u=r-s;t+=Math.sqrt(h*h+u*u)}e=d,s=r}return t}point(l,t,e,s,n){return t*(1-l)*(1-l)*(1-l)+3*e*(1-l)*(1-l)*l+3*s*(1-l)*l*l+n*l*l*l}},k=class{constructor(){i(this,"_et");try{this._et=new EventTarget}catch{this._et=document}}addEventListener(c,l,t){this._et.addEventListener(c,l,t)}dispatchEvent(c){return this._et.dispatchEvent(c)}removeEventListener(c,l,t){this._et.removeEventListener(c,l,t)}};function A(c,l=250){let t=0,e=null,s,n,a,d=()=>{t=Date.now(),e=null,s=c.apply(n,a),e||(n=null,a=[])};return function(...h){let u=Date.now(),o=l-(u-t);return n=this,a=h,o<=0||o>l?(e&&(clearTimeout(e),e=null),t=u,s=c.apply(n,a),e||(n=null,a=[])):e||(e=window.setTimeout(d,o)),s}}var B=class S extends k{constructor(t,e={}){super();i(this,"canvas");i(this,"dotSize");i(this,"minWidth");i(this,"maxWidth");i(this,"penColor");i(this,"minDistance");i(this,"velocityFilterWeight");i(this,"compositeOperation");i(this,"backgroundColor");i(this,"throttle");i(this,"canvasContextOptions");i(this,"_ctx");i(this,"_drawingStroke",!1);i(this,"_isEmpty",!0);i(this,"_dataUrl");i(this,"_dataUrlOptions");i(this,"_lastPoints",[]);i(this,"_data",[]);i(this,"_lastVelocity",0);i(this,"_lastWidth",0);i(this,"_strokeMoveUpdate");i(this,"_strokePointerId");this.canvas=t,this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle=e.throttle??16,this.minDistance=e.minDistance??5,this.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=e.compositeOperation||"source-over",this.canvasContextOptions=e.canvasContextOptions??{},this._strokeMoveUpdate=this.throttle?A(S.prototype._strokeUpdate,this.throttle):S.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=t.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}clear(){let{_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(){let t=this._data,e=this._dataUrl,s=this._dataUrlOptions;this.clear(),e&&this.fromDataURL(e,s),this.fromData(t,{clear:!1})}fromDataURL(t,e={}){return new Promise((s,n)=>{let a=new Image,d=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/d,h=e.height||this.canvas.height/d,u=e.xOffset||0,o=e.yOffset||0;this._reset(this._getPointGroupOptions()),a.onload=()=>{this._ctx.drawImage(a,u,o,r,h),s()},a.onerror=y=>{n(y)},a.crossOrigin="anonymous",a.src=t,this._isEmpty=!1,this._dataUrl=t,this._dataUrlOptions={...e}})}toDataURL(t="image/png",e){return t==="image/svg+xml"?(typeof e!="object"&&(e=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(e))}`):(typeof e!="number"&&(e=void 0),this.canvas.toDataURL(t,e))}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none",this.canvas.style.webkitUserSelect="none";let 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.style.webkitUserSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){let 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(){let{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._drawLine.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_isLeftButtonPressed(t,e){return e?t.buttons===1:(t.buttons&1)===1}_pointerEventToSignatureEvent(t){return{event:t,type:t.type,x:t.clientX,y:t.clientY,pressure:"pressure"in t?t.pressure:0}}_touchEventToSignatureEvent(t){let 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){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}_handleMouseUp(t){this._isLeftButtonPressed(t)||this._strokeEnd(this._pointerEventToSignatureEvent(t))}_handleTouchStart(t){t.targetTouches.length!==1||this._drawingStroke||(t.cancelable&&t.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(t)))}_handleTouchMove(t){if(t.targetTouches.length===1){if(t.cancelable&&t.preventDefault(),!this._drawingStroke){this._strokeEnd(this._touchEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._touchEventToSignatureEvent(t))}}_handleTouchEnd(t){t.targetTouches.length===0&&(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 typeof this._strokePointerId>"u"?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){if(this._allowPointerId(t)){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}t.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}}_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;let{addEventListener:s}=this._getListenerFunctions();switch(t.event.type){case"mousedown":s("mousemove",this._handleMouseMove,{passive:!1}),s("mouseup",this._handleMouseUp,{passive:!1});break;case"touchstart":s("touchmove",this._handleTouchMove,{passive:!1}),s("touchend",this._handleTouchEnd,{passive:!1}),s("touchcancel",this._handleTouchCancel,{passive:!1});break;case"pointerdown":s("pointermove",this._handlePointerMove,{passive:!1}),s("pointerup",this._handlePointerUp,{passive:!1}),s("pointercancel",this._handlePointerCancel,{passive:!1});break;default:}this._drawingStroke=!0;let n=this._getPointGroupOptions(),a={...n,points:[]};this._data.push(a),this._reset(n),this._strokeUpdate(t)}_strokeUpdate(t){if(!this._drawingStroke)return;if(this._data.length===0){this._strokeBegin(t);return}this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));let e=this._createPoint(t.x,t.y,t.pressure),s=this._data[this._data.length-1],n=s.points,a=n.length>0&&n[n.length-1],d=a?e.distanceTo(a)<=this.minDistance:!1,r=this._getPointGroupOptions(s);if(!a||!(a&&d)){let h=this._addPoint(e,r);a?h&&this._drawCurve(h,r):this._drawDot(e,r),n.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,s){let n=this.canvas.getBoundingClientRect();return new m(t-n.left,e-n.top,s,new Date().getTime())}_addPoint(t,e){let{_lastPoints:s}=this;if(s.push(t),s.length>2){s.length===3&&s.unshift(s[0]);let n=this._calculateCurveWidths(s[1],s[2],e),a=E.fromPoints(s,n);return s.shift(),a}return null}_calculateCurveWidths(t,e,s){let n=s.velocityFilterWeight*e.velocityFrom(t)+(1-s.velocityFilterWeight)*this._lastVelocity,a=this._strokeWidth(n,s),d={end:a,start:this._lastWidth};return this._lastVelocity=n,this._lastWidth=a,d}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,s){let n=this._ctx;n.moveTo(t,e),n.arc(t,e,s,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){let s=this._ctx,n=t.endWidth-t.startWidth,a=Math.ceil(t.length())*2;s.beginPath(),s.fillStyle=e.penColor;for(let d=0;d<a;d+=1){let r=d/a,h=r*r,u=h*r,o=1-r,y=o*o,v=y*o,p=v*t.startPoint.x;p+=3*y*r*t.control1.x,p+=3*o*h*t.control2.x,p+=u*t.endPoint.x;let g=v*t.startPoint.y;g+=3*y*r*t.control1.y,g+=3*o*h*t.control2.y,g+=u*t.endPoint.y;let f=Math.min(t.startWidth+u*n,e.maxWidth);this._drawCurveSegment(p,g,f)}s.closePath(),s.fill()}_getDotSize(t){return t.dotSize>0?t.dotSize:(t.minWidth+t.maxWidth)/2}_drawDot(t,e){let s=this._ctx,n=this._getDotSize(e);s.beginPath(),this._drawCurveSegment(t.x,t.y,n),s.closePath(),s.fillStyle=e.penColor,s.fill()}_drawLine(t,e,s){let n=this._ctx;n.save(),n.beginPath(),n.moveTo(t.x,t.y),n.lineTo(e.x,e.y),n.lineWidth=this._getDotSize(s)*2,n.lineCap="round",n.strokeStyle=s.penColor,n.stroke(),n.restore(),this._isEmpty=!1}_fromData(t,e,s,n){for(let a of t){let{points:d}=a,r=this._getPointGroupOptions(a);if(d.length>2)for(let h=0;h<d.length;h+=1){let u=d[h],o=new m(u.x,u.y,u.pressure,u.time);h===0&&this._reset(r);let y=this._addPoint(o,r);y&&e(y,r)}else d.length===2?(this._reset(r),n(d[0],d[1],r)):(this._reset(r),s(d[0],r))}}toSVG({includeBackgroundColor:t=!1,includeDataUrl:e=!1}={}){let s=this._data,n=Math.max(window.devicePixelRatio||1,1),a=0,d=0,r=this.canvas.width/n,h=this.canvas.height/n,u=document.createElementNS("http://www.w3.org/2000/svg","svg");if(u.setAttribute("xmlns","http://www.w3.org/2000/svg"),u.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),u.setAttribute("viewBox",`${a} ${d} ${r} ${h}`),u.setAttribute("width",r.toString()),u.setAttribute("height",h.toString()),t&&this.backgroundColor){let o=document.createElement("rect");o.setAttribute("width","100%"),o.setAttribute("height","100%"),o.setAttribute("fill",this.backgroundColor),u.appendChild(o)}if(e&&this._dataUrl){let o=this._dataUrlOptions?.ratio||window.devicePixelRatio||1,y=this._dataUrlOptions?.width||this.canvas.width/o,v=this._dataUrlOptions?.height||this.canvas.height/o,p=this._dataUrlOptions?.xOffset||0,g=this._dataUrlOptions?.yOffset||0,f=document.createElement("image");f.setAttribute("x",p.toString()),f.setAttribute("y",g.toString()),f.setAttribute("width",y.toString()),f.setAttribute("height",v.toString()),f.setAttribute("preserveAspectRatio","none"),f.setAttribute("href",this._dataUrl),u.appendChild(f)}return this._fromData(s,(o,{penColor:y})=>{let v=document.createElement("path");if(!isNaN(o.control1.x)&&!isNaN(o.control1.y)&&!isNaN(o.control2.x)&&!isNaN(o.control2.y)){let p=`M ${o.startPoint.x.toFixed(3)},${o.startPoint.y.toFixed(3)} C ${o.control1.x.toFixed(3)},${o.control1.y.toFixed(3)} ${o.control2.x.toFixed(3)},${o.control2.y.toFixed(3)} ${o.endPoint.x.toFixed(3)},${o.endPoint.y.toFixed(3)}`;v.setAttribute("d",p),v.setAttribute("stroke-width",(o.endWidth*2.25).toFixed(3)),v.setAttribute("stroke",y),v.setAttribute("fill","none"),v.setAttribute("stroke-linecap","round"),u.appendChild(v)}},(o,{penColor:y,dotSize:v,minWidth:p,maxWidth:g})=>{let f=document.createElement("circle"),x=v>0?v:(p+g)/2;f.setAttribute("r",x.toString()),f.setAttribute("cx",o.x.toString()),f.setAttribute("cy",o.y.toString()),f.setAttribute("fill",y),u.appendChild(f)},(o,y,v)=>{let p=document.createElement("line");p.setAttribute("x1",o.x.toString()),p.setAttribute("y1",o.y.toString()),p.setAttribute("x2",y.x.toString()),p.setAttribute("y2",y.y.toString()),p.setAttribute("stroke",v.penColor),p.setAttribute("stroke-width",(this._getDotSize(v)*2).toString()),p.setAttribute("stroke-linecap","round"),u.appendChild(p)}),u.outerHTML}};var P=typeof HTMLElement>"u"?class{}:HTMLElement,D=0,w=class extends P{constructor(){super();i(this,"setDisplayType",()=>{let t=[this.dataset.withDrawn,this.dataset.withTyped,this.dataset.withUpload].filter(e=>e==="false");this.textTypeButton.parentNode.style.display=this.dataset.withTyped==="false"?"none":"inherit",this.drawTypeButton.parentNode.style.display=this.dataset.withDrawn==="false"?"none":"inherit",this.uploadTypeButton.parentNode.style.display=this.dataset.withUpload==="false"?"none":"inherit",this.typeButtonsContainer.parentNode.style.display=t.length>1&&this.dataset.withUpload==="false"?"none":"inherit",t.length===3?console.error('At least one of the "with-typed", "with-drawn", or "with-upload" attributes must be set to "true".'):this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"&&this.enableUploadPanel()});i(this,"setDisplayColorSelect",()=>{this.colorSelect.style.visibility=this.dataset.withColorSelect==="false"?"hidden":"visible"});i(this,"setDisplaySubmit",()=>{this.saveButton.parentNode.style.display=this.dataset.withSubmit==="false"?"none":"inherit"});i(this,"setFontUrl",()=>{this.isFontLoaded=!1,this.fontPromise=null,this.isTextTypeSelected&&this.loadFont()});i(this,"setControlButtonsContainerClassAndStyle",()=>{let t=this.dataset.controlButtonsContainerClass||"",e=this.dataset.controlButtonsContainerStyle||(t?"":this.defaultStyles.controlButtonsContainer);this.controlButtonsContainer.setAttribute("style",e),this.controlButtonsContainer.setAttribute("class",t)});i(this,"setSaveButtonText",()=>{let t=this.saveButton.querySelector("span");t&&(t.innerText=this.dataset.saveButtonText||this.defaultLabels.saveButton)});i(this,"setSaveButtonClassAndStyle",()=>{let t=this.dataset.saveButtonClass||"",e=this.dataset.saveButtonStyle||(t?"":this.defaultStyles.saveButton);this.isSaveButtonDisabled&&(t&&this.dataset.saveButtonDisabledClass&&(t=this.combineStrings(t,this.dataset.saveButtonDisabledClass)),e&&this.dataset.saveButtonDisabledStyle?e=this.combineStrings(e,this.dataset.saveButtonDisabledStyle):t||(e=this.combineStrings(e,this.defaultStyles.saveButtonDisabled))),this.saveButton.setAttribute("class",t),this.saveButton.setAttribute("style",e)});i(this,"setUndoButtonText",()=>{let t=this.undoButton.querySelector("span");t&&(t.innerText=this.dataset.undoButtonText||this.defaultLabels.undoButton)});i(this,"setUndoButtonClassAndStyle",()=>{let t=this.dataset.undoButtonClass||"",e=this.dataset.undoButtonStyle||(t?"":this.defaultStyles.undoButton);this.undoButton.setAttribute("class",t),this.undoButton.setAttribute("style",e)});i(this,"setCleaButtonText",()=>{let t=this.clearButton.querySelector("span");t&&(t.innerText=this.dataset.clearButtonText||this.defaultLabels.clearButton)});i(this,"setClearButtonClassAndStyle",()=>{let t=this.dataset.clearButtonClass||"",e=this.dataset.clearButtonStyle||(t?"":this.defaultStyles.clearButton);this.clearButton.setAttribute("class",t),this.clearButton.setAttribute("style",e)});i(this,"setCanvasClassAndStyle",()=>{let t=this.dataset.canvasClass||"",e=this.dataset.canvasStyle||(t?"padding: 1px; touch-action: none; user-select: none;":this.defaultStyles.canvas);this.canvas.setAttribute("class",t),this.canvas.setAttribute("style",e)});i(this,"setTypeButtonsContainerClassAndStyle",()=>{let t=this.dataset.typeButtonsContainerClass||"",e=this.dataset.typeButtonsContainerStyle||(t?"":this.defaultStyles.typeButtonsContainer);this.typeButtonsContainer.setAttribute("style",e),this.typeButtonsContainer.setAttribute("class",t)});i(this,"setTextInputPlaceholder",()=>{this.textInput.setAttribute("placeholder",this.dataset.textInputPlaceholder||this.defaultLabels.textInputPlaceholder)});i(this,"setTextInputClassAndStyle",()=>{let t=this.dataset.textInputClass||"",e=this.dataset.textInputStyle||(t?"":this.defaultStyles.textInput);this.textInput.setAttribute("class",t),this.textInput.setAttribute("style",e)});i(this,"setDrawTypeButtonText",()=>{let t=this.drawTypeButton.querySelector("span");t&&(t.innerText=this.dataset.drawTypeButtonText||this.defaultLabels.drawTypeButton)});i(this,"setDrawTypeButtonClassAndStyle",()=>{let t=this.dataset.drawTypeButtonClass||"",e=this.dataset.drawTypeButtonStyle||(t?"":this.defaultStyles.drawTypeButton);this.isDrawTypeSelected&&(t&&this.dataset.drawTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.drawTypeButtonActiveClass)),e&&this.dataset.drawTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.drawTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.drawTypeButtonActive))),this.drawTypeButton.setAttribute("class",t),this.drawTypeButton.setAttribute("style",e)});i(this,"setTextTypeButtonText",()=>{let t=this.textTypeButton.querySelector("span");t&&(t.innerText=this.dataset.textTypeButtonText||this.defaultLabels.textTypeButton)});i(this,"setTextTypeButtonClassAndStyle",()=>{let t=this.dataset.textTypeButtonClass||"",e=this.dataset.textTypeButtonStyle||(t?"":this.defaultStyles.textTypeButton);this.isTextTypeSelected&&(t&&this.dataset.textTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.textTypeButtonActiveClass)),e&&this.dataset.textTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.textTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.textTypeButtonActive))),this.textTypeButton.setAttribute("class",t),this.textTypeButton.setAttribute("style",e)});i(this,"setUploadTypeButtonText",()=>{let t=this.uploadTypeButton.querySelector("span");t&&(t.innerText=this.dataset.uploadTypeButtonText||this.defaultLabels.uploadTypeButton)});i(this,"setUploadTypeButtonClassAndStyle",()=>{let t=this.dataset.uploadTypeButtonClass||"",e=this.dataset.uploadTypeButtonStyle||(t?"":this.defaultStyles.uploadTypeButton);this.isUploadTypeSelected&&(t&&this.dataset.uploadTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.uploadTypeButtonActiveClass)),e&&this.dataset.uploadTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.uploadTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.uploadTypeButtonActive))),this.uploadTypeButton.setAttribute("class",t),this.uploadTypeButton.setAttribute("style",e)});this.isMounted=!1,this.uid=++D}get defaultStyles(){return this.constructor.DEFAULT_STYLES}get defaultLabels(){return this.constructor.DEFAULT_LABELS}get clearButton(){return this.querySelector('[data-target="clearButton"]')}get undoButton(){return this.querySelector('[data-target="undoButton"]')}get controlButtonsContainer(){return this.querySelector('[data-target="controlButtonsContainer"]')}get typeButtonsContainer(){return this.querySelector('[data-target="typeButtonsContainer"]')}get drawTypeButton(){return this.querySelector('[data-target="drawTypeButton"]')}get textTypeButton(){return this.querySelector('[data-target="textTypeButton"]')}get uploadTypeButton(){return this.querySelector('[data-target="uploadTypeButton"]')}get textInput(){return this.querySelector('[data-target="textInput"]')}get fileInput(){return this.querySelector('[data-target="fileInput"]')}get saveButton(){return this.querySelector('[data-target="saveButton"]')}get canvas(){return this.querySelector('[data-target="canvas"]')}get colorSelect(){return this.querySelector('[data-target="colorSelect"]')}get colorInputs(){return[...this.querySelectorAll('[data-target="colorInput"]')]}get setters(){return{"data-with-typed":this.setDisplayType,"data-with-drawn":this.setDisplayType,"data-with-upload":this.setDisplayType,"data-with-color-select":this.setDisplayColorSelect,"data-with-submit":this.setDisplaySubmit,"data-font-url":this.setFontUrl,"data-control-buttons-container-class":this.setControlButtonsContainerClassAndStyle,"data-control-buttons-container-style":this.setControlButtonsContainerClassAndStyle,"data-save-button-text":this.setSaveButtonText,"data-save-button-class":this.setSaveButtonClassAndStyle,"data-save-button-style":this.setSaveButtonClassAndStyle,"data-save-button-disabled-class":this.setSaveButtonClassAndStyle,"data-save-button-disabled-style":this.setSaveButtonClassAndStyle,"data-undo-button-text":this.setUndoButtonText,"data-undo-button-class":this.setUndoButtonClassAndStyle,"data-undo-button-style":this.setUndoButtonClassAndStyle,"data-clear-button-text":this.setCleaButtonText,"data-clear-button-class":this.setClearButtonClassAndStyle,"data-clear-button-style":this.setClearButtonClassAndStyle,"data-canvas-class":this.setCanvasClassAndStyle,"data-canvas-style":this.setCanvasClassAndStyle,"data-text-input-placeholder":this.setTextInputPlaceholder,"data-text-input-class":this.setTextInputClassAndStyle,"data-text-input-style":this.setTextInputClassAndStyle,"data-type-buttons-container-class":this.setTypeButtonsContainerClassAndStyle,"data-type-buttons-container-style":this.setTypeButtonsContainerClassAndStyle,"data-draw-type-button-text":this.setDrawTypeButtonText,"data-draw-type-button-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-style":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-style":this.setDrawTypeButtonClassAndStyle,"data-text-type-button-text":this.setTextTypeButtonText,"data-text-type-button-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-style":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-style":this.setTextTypeButtonClassAndStyle,"data-upload-type-button-text":this.setUploadTypeButtonText,"data-upload-type-button-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-style":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-style":this.setUploadTypeButtonClassAndStyle}}get isDrawTypeSelected(){return this.drawTypeButton.querySelector("input").checked}get isTextTypeSelected(){return this.textTypeButton.querySelector("input").checked}get isUploadTypeSelected(){return this.uploadTypeButton.querySelector("input").checked}get isSaveButtonDisabled(){return this.saveButton.disabled}get isDownloadOnSaveSettingEnabled(){return this.dataset.downloadOnSave==="true"}get isColorSelectSettingEnabled(){return this.dataset.withColorSelect!=="false"}get isSubmitButtonSettingEnabled(){return this.dataset.withSubmit!=="false"}combineStrings(t,e){return[t,e].filter(Boolean).join(" ")}attributeChangedCallback(t,e,s){this.isMounted&&this.setters[t]&&e!==s&&this.setters[t]()}connectedCallback(){this.isMounted||(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.init(),{once:!0}):this.init())}init(){if(!(this.isMounted||!this.isConnected)){this.style.display="block",this.childrenNode=document.createElement("div"),this.appendChild(this.childrenNode),Array.from(this.childNodes).map(t=>{this.childrenNode!==t&&this.childrenNode.appendChild(t)}),this.childrenNode.style.display="none",this.fieldNode=document.createElement("div"),this.fieldNode.innerHTML=this.tempalte,this.appendChild(this.fieldNode),this.fieldNode.addEventListener("change",t=>t.stopPropagation()),this.pad=new B(this.canvas),this.isMounted=!0;for(let t in this.setters)this.setters.hasOwnProperty(t)&&this.setters[t]();this.scale=2,this.isFontLoaded=!1,this.fontPromise=null,this.resizeCanvas(),this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"?this.enableUploadPanel():this.enableDrawPanel(),this.pad.addEventListener("endStroke",()=>{this.handleDownloadState()}),this.clearButton.addEventListener("click",t=>{t.preventDefault(),this.cleaSignaturePad(),this.clearTextInput()}),this.undoButton.addEventListener("click",t=>{t.preventDefault();let e=this.pad.toData();e&&(e.pop(),this.pad.fromData(e),this.handleDownloadState())}),this.drawTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableDrawPanel()}),this.textTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableTextPanel()}),this.uploadTypeButton.addEventListener("click",()=>{this.uploadTypeButton.querySelector('input[type="radio"]').checked=!0,this.enableUploadPanel()}),this.fileInput.addEventListener("change",t=>{this.drawOnCanvas(t.target.files[0]).then(()=>{this.handleDownloadState()}).catch(e=>{alert(e.message)})}),this.colorInputs.forEach(t=>{t.addEventListener("change",e=>{this.textInput.value!==""&&(this.canvas.getContext("2d").fillStyle=e.target.value,this.drawText(),this.handleDownloadState()),this.pad.penColor=e.target.value})}),this.textInput.addEventListener("input",()=>{this.drawText(),this.handleDownloadState()}),this.saveButton.addEventListener("click",t=>{t.preventDefault(),this.disableSaveButton(),this.cropCanvas(this.canvas).then(e=>{this.isDownloadOnSaveSettingEnabled&&this.downloadBlob(e,`signature-${Date.now()}.png`),this.convertBlobToBase64(e).then(s=>{this.dispatchEvent(new CustomEvent("save",{detail:{base64:s,blob:e}}))}).catch(s=>{console.error("Failed to convert blob to base64:",s)})}).then(()=>{this.enableSaveButton()}).catch(e=>{console.error("Download failed:",e),this.disableSaveButton()})}),this.intersectionObserver=new IntersectionObserver((t,e)=>{t.forEach(s=>{s.isIntersecting&&this.resizeCanvas()&&this.intersectionObserver?.disconnect()})}),this.resizeObserver=new ResizeObserver(t=>{for(let e of t){let n=e.contentRect.width<576;this.drawTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.textTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.uploadTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.pad.isEmpty()&&this.textInput.value===""&&this.resizeCanvas()}}),this.resizeObserver.observe(this),this.intersectionObserver.observe(this.canvas)}}resizeCanvas(){let t=this.canvas.parentNode.clientWidth;return t===0?!1:(this.canvas.width!==t*this.scale&&(this.canvas.width=t*this.scale,this.canvas.height=t*this.scale/3,this.canvas.getContext("2d").setTransform(this.scale,0,0,this.scale,0,0),this.pad.clear()),!0)}enableDrawPanel(){this.drawTypeButton.querySelector("input").checked=!0,this.textTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="inline-block",this.pad.on(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableTextPanel(){this.drawTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!0,this.textInput.parentNode.style.display="inherit",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.loadFont(),this.clearTextInput(),this.clearFileInput()}enableUploadPanel(){this.uploadTypeButton.querySelector("input").checked=!0,this.drawTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="hidden"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!1,this.setSaveButtonClassAndStyle())}disableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!0,this.setSaveButtonClassAndStyle())}drawText(){let t=this.canvas,e=t.getContext("2d"),s="SignatureFont",n="58px",a="italic",d="";e.font=a+" "+d+" "+n+" "+s,e.textAlign="center",e.clearRect(0,0,t.width/this.scale,t.height/this.scale),e.fillText(this.textInput.value,t.width/2/this.scale,t.height/2/this.scale+11)}drawOnCanvas(t){return new Promise((e,s)=>{if(t&&t.type.match("image.*")){let n=new FileReader,a=this.canvas;n.onload=d=>{let r=new Image;r.src=d.target.result,r.onload=()=>{let h=a.getContext("2d"),u=r.width/r.height,o=a.width/this.scale,y=a.height/this.scale,v=o,p=y;o/y>u?v=y*u:p=o/u;let g=(o-v)/2,f=(y-p)/2;setTimeout(()=>{h.clearRect(0,0,o,y),h.drawImage(r,g,f,v,p),this.pad.fromDataURL("").catch(()=>{}),e()},50)},r.onerror=()=>s(new Error("Failed to load image"))},n.onerror=()=>s(new Error("Failed to read file")),n.readAsDataURL(t)}else s(new Error("Invalid file type"))})}clearTextInput(){this.textInput&&(this.textInput.value="",this.handleDownloadState())}cleaSignaturePad(){this.pad.clear(),this.handleDownloadState()}clearFileInput(){this.fileInput&&(this.fileInput.value="",this.handleDownloadState())}handleDownloadState(){let t=this.changeId=(this.changeId||0)+1;this.pad.isEmpty()&&this.textInput.value===""?(this.distributeSignatureData(null),this.disableSaveButton()):(this.cropCanvas(this.canvas).then(e=>{t===this.changeId&&this.distributeSignatureData(e)}).catch(e=>{console.error("Failed to create a PNG blob:",e)}),this.enableSaveButton())}distributeSignatureData(t){let e=this.childrenNode.querySelector('input[type="file"]');if(t){if(this.convertBlobToBase64(t).then(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:s,blob:t}}))}).catch(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),console.error("Failed to convert blob to base64:",s)}),e){let s=new File([t],`signature-${Date.now()}.png`,{type:t.type,lastModified:Date.now()}),n=new DataTransfer;n.items.add(s),e.files=n.files}}else this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),e&&(e.value="")}convertBlobToBase64(t){return new Promise((e,s)=>{let n=new FileReader;n.onloadend=()=>{let a=n.result.split(",")[1];e(a)},n.onerror=a=>{s(a)},n.readAsDataURL(t)})}loadFont(){if(!this.fontPromise){let t=this.dataset.fontUrl||"https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff",e=new FontFace("SignatureFont",`url(${t})`);this.fontPromise=e.load().then(s=>{document.fonts.add(s),this.isFontLoaded=!0})}this.fontPromise.then(()=>{this.isTextTypeSelected&&this.textInput.value!==""&&(this.drawText(),this.handleDownloadState())}).catch(t=>{this.fontPromise=null,console.error("Font loading failed:",t)})}downloadBlob(t,e){let s=window.URL.createObjectURL(t),n=document.createElement("a");return n.style="display: none",n.href=s,n.download=e,document.body.appendChild(n),n.click(),window.URL.revokeObjectURL(s),new Promise(a=>{a()})}cropCanvas(t){let e=t.getContext("2d"),s=t.width,n=t.height,a=n,d=0,r=s,h=0,o=e.getImageData(0,0,s,n).data;for(let f=0;f<n;f++)for(let x=0;x<s;x++){let b=(f*s+x)*4;o[b+3]!==0&&(a=Math.min(a,f),d=Math.max(d,f),r=Math.min(r,x),h=Math.max(h,x))}h<r&&(r=0,a=0,h=s-1,d=n-1);let y=h-r+1,v=d-a+1,p=document.createElement("canvas");return p.width=y,p.height=v,p.getContext("2d").drawImage(t,r,a,y,v,0,0,y,v),new Promise((f,x)=>{p.toBlob(b=>{b?f(b):x(new Error("Failed to create a PNG blob."))},"image/png")})}disconnectedCallback(){this.isMounted&&(this.resizeObserver?.disconnect(),this.intersectionObserver?.disconnect(),this.pad.off(),this.fieldNode.remove(),this.append(...this.childrenNode.childNodes),this.childrenNode.remove(),this.isMounted=!1)}get tempalte(){return`
|
|
2
2
|
<div>
|
|
3
3
|
<div>
|
|
4
4
|
<div data-target="typeButtonsContainer">
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _=Object.defineProperty;var C=(c,l,t)=>l in c?_(c,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[l]=t;var i=(c,l,t)=>C(c,typeof l!="symbol"?l+"":l,t);var m=class{constructor(c,l,t,e){i(this,"x");i(this,"y");i(this,"pressure");i(this,"time");if(isNaN(c)||isNaN(l))throw new Error(`Point is invalid: (${c}, ${l})`);this.x=+c,this.y=+l,this.pressure=t||0,this.time=e||Date.now()}distanceTo(c){return Math.sqrt(Math.pow(this.x-c.x,2)+Math.pow(this.y-c.y,2))}equals(c){return this.x===c.x&&this.y===c.y&&this.pressure===c.pressure&&this.time===c.time}velocityFrom(c){return this.time!==c.time?this.distanceTo(c)/(this.time-c.time):0}},E=class T{constructor(l,t,e,s,n,a){i(this,"startPoint");i(this,"control2");i(this,"control1");i(this,"endPoint");i(this,"startWidth");i(this,"endWidth");this.startPoint=l,this.control2=t,this.control1=e,this.endPoint=s,this.startWidth=n,this.endWidth=a}static fromPoints(l,t){let e=this.calculateControlPoints(l[0],l[1],l[2]).c2,s=this.calculateControlPoints(l[1],l[2],l[3]).c1;return new T(l[1],e,s,l[2],t.start,t.end)}static calculateControlPoints(l,t,e){let s=l.x-t.x,n=l.y-t.y,a=t.x-e.x,d=t.y-e.y,r={x:(l.x+t.x)/2,y:(l.y+t.y)/2},h={x:(t.x+e.x)/2,y:(t.y+e.y)/2},u=Math.sqrt(s*s+n*n),o=Math.sqrt(a*a+d*d),y=r.x-h.x,v=r.y-h.y,p=u+o==0?0:o/(u+o),g={x:h.x+y*p,y:h.y+v*p},f=t.x-g.x,x=t.y-g.y;return{c1:new m(r.x+f,r.y+x),c2:new m(h.x+f,h.y+x)}}length(){let t=0,e,s;for(let n=0;n<=10;n+=1){let a=n/10,d=this.point(a,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(a,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){let h=d-e,u=r-s;t+=Math.sqrt(h*h+u*u)}e=d,s=r}return t}point(l,t,e,s,n){return t*(1-l)*(1-l)*(1-l)+3*e*(1-l)*(1-l)*l+3*s*(1-l)*l*l+n*l*l*l}},k=class{constructor(){i(this,"_et");try{this._et=new EventTarget}catch{this._et=document}}addEventListener(c,l,t){this._et.addEventListener(c,l,t)}dispatchEvent(c){return this._et.dispatchEvent(c)}removeEventListener(c,l,t){this._et.removeEventListener(c,l,t)}};function A(c,l=250){let t=0,e=null,s,n,a,d=()=>{t=Date.now(),e=null,s=c.apply(n,a),e||(n=null,a=[])};return function(...h){let u=Date.now(),o=l-(u-t);return n=this,a=h,o<=0||o>l?(e&&(clearTimeout(e),e=null),t=u,s=c.apply(n,a),e||(n=null,a=[])):e||(e=window.setTimeout(d,o)),s}}var B=class S extends k{constructor(t,e={}){super();i(this,"canvas");i(this,"dotSize");i(this,"minWidth");i(this,"maxWidth");i(this,"penColor");i(this,"minDistance");i(this,"velocityFilterWeight");i(this,"compositeOperation");i(this,"backgroundColor");i(this,"throttle");i(this,"canvasContextOptions");i(this,"_ctx");i(this,"_drawingStroke",!1);i(this,"_isEmpty",!0);i(this,"_dataUrl");i(this,"_dataUrlOptions");i(this,"_lastPoints",[]);i(this,"_data",[]);i(this,"_lastVelocity",0);i(this,"_lastWidth",0);i(this,"_strokeMoveUpdate");i(this,"_strokePointerId");this.canvas=t,this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle=e.throttle??16,this.minDistance=e.minDistance??5,this.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=e.compositeOperation||"source-over",this.canvasContextOptions=e.canvasContextOptions??{},this._strokeMoveUpdate=this.throttle?A(S.prototype._strokeUpdate,this.throttle):S.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=t.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}clear(){let{_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(){let t=this._data,e=this._dataUrl,s=this._dataUrlOptions;this.clear(),e&&this.fromDataURL(e,s),this.fromData(t,{clear:!1})}fromDataURL(t,e={}){return new Promise((s,n)=>{let a=new Image,d=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/d,h=e.height||this.canvas.height/d,u=e.xOffset||0,o=e.yOffset||0;this._reset(this._getPointGroupOptions()),a.onload=()=>{this._ctx.drawImage(a,u,o,r,h),s()},a.onerror=y=>{n(y)},a.crossOrigin="anonymous",a.src=t,this._isEmpty=!1,this._dataUrl=t,this._dataUrlOptions={...e}})}toDataURL(t="image/png",e){return t==="image/svg+xml"?(typeof e!="object"&&(e=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(e))}`):(typeof e!="number"&&(e=void 0),this.canvas.toDataURL(t,e))}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none",this.canvas.style.webkitUserSelect="none";let 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.style.webkitUserSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){let 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(){let{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._drawLine.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_isLeftButtonPressed(t,e){return e?t.buttons===1:(t.buttons&1)===1}_pointerEventToSignatureEvent(t){return{event:t,type:t.type,x:t.clientX,y:t.clientY,pressure:"pressure"in t?t.pressure:0}}_touchEventToSignatureEvent(t){let 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){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}_handleMouseUp(t){this._isLeftButtonPressed(t)||this._strokeEnd(this._pointerEventToSignatureEvent(t))}_handleTouchStart(t){t.targetTouches.length!==1||this._drawingStroke||(t.cancelable&&t.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(t)))}_handleTouchMove(t){if(t.targetTouches.length===1){if(t.cancelable&&t.preventDefault(),!this._drawingStroke){this._strokeEnd(this._touchEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._touchEventToSignatureEvent(t))}}_handleTouchEnd(t){t.targetTouches.length===0&&(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 typeof this._strokePointerId>"u"?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){if(this._allowPointerId(t)){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}t.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}}_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;let{addEventListener:s}=this._getListenerFunctions();switch(t.event.type){case"mousedown":s("mousemove",this._handleMouseMove,{passive:!1}),s("mouseup",this._handleMouseUp,{passive:!1});break;case"touchstart":s("touchmove",this._handleTouchMove,{passive:!1}),s("touchend",this._handleTouchEnd,{passive:!1}),s("touchcancel",this._handleTouchCancel,{passive:!1});break;case"pointerdown":s("pointermove",this._handlePointerMove,{passive:!1}),s("pointerup",this._handlePointerUp,{passive:!1}),s("pointercancel",this._handlePointerCancel,{passive:!1});break;default:}this._drawingStroke=!0;let n=this._getPointGroupOptions(),a={...n,points:[]};this._data.push(a),this._reset(n),this._strokeUpdate(t)}_strokeUpdate(t){if(!this._drawingStroke)return;if(this._data.length===0){this._strokeBegin(t);return}this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));let e=this._createPoint(t.x,t.y,t.pressure),s=this._data[this._data.length-1],n=s.points,a=n.length>0&&n[n.length-1],d=a?e.distanceTo(a)<=this.minDistance:!1,r=this._getPointGroupOptions(s);if(!a||!(a&&d)){let h=this._addPoint(e,r);a?h&&this._drawCurve(h,r):this._drawDot(e,r),n.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,s){let n=this.canvas.getBoundingClientRect();return new m(t-n.left,e-n.top,s,new Date().getTime())}_addPoint(t,e){let{_lastPoints:s}=this;if(s.push(t),s.length>2){s.length===3&&s.unshift(s[0]);let n=this._calculateCurveWidths(s[1],s[2],e),a=E.fromPoints(s,n);return s.shift(),a}return null}_calculateCurveWidths(t,e,s){let n=s.velocityFilterWeight*e.velocityFrom(t)+(1-s.velocityFilterWeight)*this._lastVelocity,a=this._strokeWidth(n,s),d={end:a,start:this._lastWidth};return this._lastVelocity=n,this._lastWidth=a,d}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,s){let n=this._ctx;n.moveTo(t,e),n.arc(t,e,s,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){let s=this._ctx,n=t.endWidth-t.startWidth,a=Math.ceil(t.length())*2;s.beginPath(),s.fillStyle=e.penColor;for(let d=0;d<a;d+=1){let r=d/a,h=r*r,u=h*r,o=1-r,y=o*o,v=y*o,p=v*t.startPoint.x;p+=3*y*r*t.control1.x,p+=3*o*h*t.control2.x,p+=u*t.endPoint.x;let g=v*t.startPoint.y;g+=3*y*r*t.control1.y,g+=3*o*h*t.control2.y,g+=u*t.endPoint.y;let f=Math.min(t.startWidth+u*n,e.maxWidth);this._drawCurveSegment(p,g,f)}s.closePath(),s.fill()}_getDotSize(t){return t.dotSize>0?t.dotSize:(t.minWidth+t.maxWidth)/2}_drawDot(t,e){let s=this._ctx,n=this._getDotSize(e);s.beginPath(),this._drawCurveSegment(t.x,t.y,n),s.closePath(),s.fillStyle=e.penColor,s.fill()}_drawLine(t,e,s){let n=this._ctx;n.save(),n.beginPath(),n.moveTo(t.x,t.y),n.lineTo(e.x,e.y),n.lineWidth=this._getDotSize(s)*2,n.lineCap="round",n.strokeStyle=s.penColor,n.stroke(),n.restore(),this._isEmpty=!1}_fromData(t,e,s,n){for(let a of t){let{points:d}=a,r=this._getPointGroupOptions(a);if(d.length>2)for(let h=0;h<d.length;h+=1){let u=d[h],o=new m(u.x,u.y,u.pressure,u.time);h===0&&this._reset(r);let y=this._addPoint(o,r);y&&e(y,r)}else d.length===2?(this._reset(r),n(d[0],d[1],r)):(this._reset(r),s(d[0],r))}}toSVG({includeBackgroundColor:t=!1,includeDataUrl:e=!1}={}){let s=this._data,n=Math.max(window.devicePixelRatio||1,1),a=0,d=0,r=this.canvas.width/n,h=this.canvas.height/n,u=document.createElementNS("http://www.w3.org/2000/svg","svg");if(u.setAttribute("xmlns","http://www.w3.org/2000/svg"),u.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),u.setAttribute("viewBox",`${a} ${d} ${r} ${h}`),u.setAttribute("width",r.toString()),u.setAttribute("height",h.toString()),t&&this.backgroundColor){let o=document.createElement("rect");o.setAttribute("width","100%"),o.setAttribute("height","100%"),o.setAttribute("fill",this.backgroundColor),u.appendChild(o)}if(e&&this._dataUrl){let o=this._dataUrlOptions?.ratio||window.devicePixelRatio||1,y=this._dataUrlOptions?.width||this.canvas.width/o,v=this._dataUrlOptions?.height||this.canvas.height/o,p=this._dataUrlOptions?.xOffset||0,g=this._dataUrlOptions?.yOffset||0,f=document.createElement("image");f.setAttribute("x",p.toString()),f.setAttribute("y",g.toString()),f.setAttribute("width",y.toString()),f.setAttribute("height",v.toString()),f.setAttribute("preserveAspectRatio","none"),f.setAttribute("href",this._dataUrl),u.appendChild(f)}return this._fromData(s,(o,{penColor:y})=>{let v=document.createElement("path");if(!isNaN(o.control1.x)&&!isNaN(o.control1.y)&&!isNaN(o.control2.x)&&!isNaN(o.control2.y)){let p=`M ${o.startPoint.x.toFixed(3)},${o.startPoint.y.toFixed(3)} C ${o.control1.x.toFixed(3)},${o.control1.y.toFixed(3)} ${o.control2.x.toFixed(3)},${o.control2.y.toFixed(3)} ${o.endPoint.x.toFixed(3)},${o.endPoint.y.toFixed(3)}`;v.setAttribute("d",p),v.setAttribute("stroke-width",(o.endWidth*2.25).toFixed(3)),v.setAttribute("stroke",y),v.setAttribute("fill","none"),v.setAttribute("stroke-linecap","round"),u.appendChild(v)}},(o,{penColor:y,dotSize:v,minWidth:p,maxWidth:g})=>{let f=document.createElement("circle"),x=v>0?v:(p+g)/2;f.setAttribute("r",x.toString()),f.setAttribute("cx",o.x.toString()),f.setAttribute("cy",o.y.toString()),f.setAttribute("fill",y),u.appendChild(f)},(o,y,v)=>{let p=document.createElement("line");p.setAttribute("x1",o.x.toString()),p.setAttribute("y1",o.y.toString()),p.setAttribute("x2",y.x.toString()),p.setAttribute("y2",y.y.toString()),p.setAttribute("stroke",v.penColor),p.setAttribute("stroke-width",(this._getDotSize(v)*2).toString()),p.setAttribute("stroke-linecap","round"),u.appendChild(p)}),u.outerHTML}};var D=typeof HTMLElement>"u"?class{}:HTMLElement,P=0,w=class extends D{constructor(){super();i(this,"setDisplayType",()=>{let t=[this.dataset.withDrawn,this.dataset.withTyped,this.dataset.withUpload].filter(e=>e==="false");this.textTypeButton.parentNode.style.display=this.dataset.withTyped==="false"?"none":"inherit",this.drawTypeButton.parentNode.style.display=this.dataset.withDrawn==="false"?"none":"inherit",this.uploadTypeButton.parentNode.style.display=this.dataset.withUpload==="false"?"none":"inherit",this.typeButtonsContainer.parentNode.style.display=t.length>1&&this.dataset.withUpload==="false"?"none":"inherit",t.length===3?console.error('At least one of the "with-typed", "with-drawn", or "with-upload" attributes must be set to "true".'):this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"&&this.enableUploadPanel()});i(this,"setDisplayColorSelect",()=>{this.colorSelect.style.visibility=this.dataset.withColorSelect==="false"?"hidden":"visible"});i(this,"setDisplaySubmit",()=>{this.saveButton.parentNode.style.display=this.dataset.withSubmit==="false"?"none":"inherit"});i(this,"setFontUrl",()=>{this.isFontLoaded=!1,this.fontPromise=null,this.isTextTypeSelected&&this.loadFont()});i(this,"setControlButtonsContainerClassAndStyle",()=>{let t=this.dataset.controlButtonsContainerClass||"",e=this.dataset.controlButtonsContainerStyle||(t?"":this.defaultStyles.controlButtonsContainer);this.controlButtonsContainer.setAttribute("style",e),this.controlButtonsContainer.setAttribute("class",t)});i(this,"setSaveButtonText",()=>{let t=this.saveButton.querySelector("span");t&&(t.innerText=this.dataset.saveButtonText||this.defaultLabels.saveButton)});i(this,"setSaveButtonClassAndStyle",()=>{let t=this.dataset.saveButtonClass||"",e=this.dataset.saveButtonStyle||(t?"":this.defaultStyles.saveButton);this.isSaveButtonDisabled&&(t&&this.dataset.saveButtonDisabledClass&&(t=this.combineStrings(t,this.dataset.saveButtonDisabledClass)),e&&this.dataset.saveButtonDisabledStyle?e=this.combineStrings(e,this.dataset.saveButtonDisabledStyle):t||(e=this.combineStrings(e,this.defaultStyles.saveButtonDisabled))),this.saveButton.setAttribute("class",t),this.saveButton.setAttribute("style",e)});i(this,"setUndoButtonText",()=>{let t=this.undoButton.querySelector("span");t&&(t.innerText=this.dataset.undoButtonText||this.defaultLabels.undoButton)});i(this,"setUndoButtonClassAndStyle",()=>{let t=this.dataset.undoButtonClass||"",e=this.dataset.undoButtonStyle||(t?"":this.defaultStyles.undoButton);this.undoButton.setAttribute("class",t),this.undoButton.setAttribute("style",e)});i(this,"setCleaButtonText",()=>{let t=this.clearButton.querySelector("span");t&&(t.innerText=this.dataset.clearButtonText||this.defaultLabels.clearButton)});i(this,"setClearButtonClassAndStyle",()=>{let t=this.dataset.clearButtonClass||"",e=this.dataset.clearButtonStyle||(t?"":this.defaultStyles.clearButton);this.clearButton.setAttribute("class",t),this.clearButton.setAttribute("style",e)});i(this,"setCanvasClassAndStyle",()=>{let t=this.dataset.canvasClass||"",e=this.dataset.canvasStyle||(t?"padding: 1px; touch-action: none; user-select: none;":this.defaultStyles.canvas);this.canvas.setAttribute("class",t),this.canvas.setAttribute("style",e)});i(this,"setTypeButtonsContainerClassAndStyle",()=>{let t=this.dataset.typeButtonsContainerClass||"",e=this.dataset.typeButtonsContainerStyle||(t?"":this.defaultStyles.typeButtonsContainer);this.typeButtonsContainer.setAttribute("style",e),this.typeButtonsContainer.setAttribute("class",t)});i(this,"setTextInputPlaceholder",()=>{this.textInput.setAttribute("placeholder",this.dataset.textInputPlaceholder||this.defaultLabels.textInputPlaceholder)});i(this,"setTextInputClassAndStyle",()=>{let t=this.dataset.textInputClass||"",e=this.dataset.textInputStyle||(t?"":this.defaultStyles.textInput);this.textInput.setAttribute("class",t),this.textInput.setAttribute("style",e)});i(this,"setDrawTypeButtonText",()=>{let t=this.drawTypeButton.querySelector("span");t&&(t.innerText=this.dataset.drawTypeButtonText||this.defaultLabels.drawTypeButton)});i(this,"setDrawTypeButtonClassAndStyle",()=>{let t=this.dataset.drawTypeButtonClass||"",e=this.dataset.drawTypeButtonStyle||(t?"":this.defaultStyles.drawTypeButton);this.isDrawTypeSelected&&(t&&this.dataset.drawTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.drawTypeButtonActiveClass)),e&&this.dataset.drawTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.drawTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.drawTypeButtonActive))),this.drawTypeButton.setAttribute("class",t),this.drawTypeButton.setAttribute("style",e)});i(this,"setTextTypeButtonText",()=>{let t=this.textTypeButton.querySelector("span");t&&(t.innerText=this.dataset.textTypeButtonText||this.defaultLabels.textTypeButton)});i(this,"setTextTypeButtonClassAndStyle",()=>{let t=this.dataset.textTypeButtonClass||"",e=this.dataset.textTypeButtonStyle||(t?"":this.defaultStyles.textTypeButton);this.isTextTypeSelected&&(t&&this.dataset.textTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.textTypeButtonActiveClass)),e&&this.dataset.textTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.textTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.textTypeButtonActive))),this.textTypeButton.setAttribute("class",t),this.textTypeButton.setAttribute("style",e)});i(this,"setUploadTypeButtonText",()=>{let t=this.uploadTypeButton.querySelector("span");t&&(t.innerText=this.dataset.uploadTypeButtonText||this.defaultLabels.uploadTypeButton)});i(this,"setUploadTypeButtonClassAndStyle",()=>{let t=this.dataset.uploadTypeButtonClass||"",e=this.dataset.uploadTypeButtonStyle||(t?"":this.defaultStyles.uploadTypeButton);this.isUploadTypeSelected&&(t&&this.dataset.uploadTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.uploadTypeButtonActiveClass)),e&&this.dataset.uploadTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.uploadTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.uploadTypeButtonActive))),this.uploadTypeButton.setAttribute("class",t),this.uploadTypeButton.setAttribute("style",e)});this.isMounted=!1,this.uid=++P}get defaultStyles(){return this.constructor.DEFAULT_STYLES}get defaultLabels(){return this.constructor.DEFAULT_LABELS}get clearButton(){return this.querySelector('[data-target="clearButton"]')}get undoButton(){return this.querySelector('[data-target="undoButton"]')}get controlButtonsContainer(){return this.querySelector('[data-target="controlButtonsContainer"]')}get typeButtonsContainer(){return this.querySelector('[data-target="typeButtonsContainer"]')}get drawTypeButton(){return this.querySelector('[data-target="drawTypeButton"]')}get textTypeButton(){return this.querySelector('[data-target="textTypeButton"]')}get uploadTypeButton(){return this.querySelector('[data-target="uploadTypeButton"]')}get textInput(){return this.querySelector('[data-target="textInput"]')}get fileInput(){return this.querySelector('[data-target="fileInput"]')}get saveButton(){return this.querySelector('[data-target="saveButton"]')}get canvas(){return this.querySelector('[data-target="canvas"]')}get colorSelect(){return this.querySelector('[data-target="colorSelect"]')}get colorInputs(){return[...this.querySelectorAll('[data-target="colorInput"]')]}get setters(){return{"data-with-typed":this.setDisplayType,"data-with-drawn":this.setDisplayType,"data-with-upload":this.setDisplayType,"data-with-color-select":this.setDisplayColorSelect,"data-with-submit":this.setDisplaySubmit,"data-font-url":this.setFontUrl,"data-control-buttons-container-class":this.setControlButtonsContainerClassAndStyle,"data-control-buttons-container-style":this.setControlButtonsContainerClassAndStyle,"data-save-button-text":this.setSaveButtonText,"data-save-button-class":this.setSaveButtonClassAndStyle,"data-save-button-style":this.setSaveButtonClassAndStyle,"data-save-button-disabled-class":this.setSaveButtonClassAndStyle,"data-save-button-disabled-style":this.setSaveButtonClassAndStyle,"data-undo-button-text":this.setUndoButtonText,"data-undo-button-class":this.setUndoButtonClassAndStyle,"data-undo-button-style":this.setUndoButtonClassAndStyle,"data-clear-button-text":this.setCleaButtonText,"data-clear-button-class":this.setClearButtonClassAndStyle,"data-clear-button-style":this.setClearButtonClassAndStyle,"data-canvas-class":this.setCanvasClassAndStyle,"data-canvas-style":this.setCanvasClassAndStyle,"data-text-input-placeholder":this.setTextInputPlaceholder,"data-text-input-class":this.setTextInputClassAndStyle,"data-text-input-style":this.setTextInputClassAndStyle,"data-type-buttons-container-class":this.setTypeButtonsContainerClassAndStyle,"data-type-buttons-container-style":this.setTypeButtonsContainerClassAndStyle,"data-draw-type-button-text":this.setDrawTypeButtonText,"data-draw-type-button-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-style":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-style":this.setDrawTypeButtonClassAndStyle,"data-text-type-button-text":this.setTextTypeButtonText,"data-text-type-button-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-style":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-style":this.setTextTypeButtonClassAndStyle,"data-upload-type-button-text":this.setUploadTypeButtonText,"data-upload-type-button-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-style":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-style":this.setUploadTypeButtonClassAndStyle}}get isDrawTypeSelected(){return this.drawTypeButton.querySelector("input").checked}get isTextTypeSelected(){return this.textTypeButton.querySelector("input").checked}get isUploadTypeSelected(){return this.uploadTypeButton.querySelector("input").checked}get isSaveButtonDisabled(){return this.saveButton.disabled}get isDownloadOnSaveSettingEnabled(){return this.dataset.downloadOnSave==="true"}get isColorSelectSettingEnabled(){return this.dataset.withColorSelect!=="false"}get isSubmitButtonSettingEnabled(){return this.dataset.withSubmit!=="false"}combineStrings(t,e){return[t,e].filter(Boolean).join(" ")}attributeChangedCallback(t,e,s){this.isMounted&&this.setters[t]&&e!==s&&this.setters[t]()}connectedCallback(){this.isMounted||(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.init(),{once:!0}):this.init())}init(){if(!(this.isMounted||!this.isConnected)){this.style.display="block",this.childrenNode=document.createElement("div"),this.appendChild(this.childrenNode),Array.from(this.childNodes).map(t=>{this.childrenNode!==t&&this.childrenNode.appendChild(t)}),this.childrenNode.style.display="none",this.fieldNode=document.createElement("div"),this.fieldNode.innerHTML=this.tempalte,this.appendChild(this.fieldNode),this.pad=new B(this.canvas),this.isMounted=!0;for(let t in this.setters)this.setters.hasOwnProperty(t)&&this.setters[t]();this.scale=2,this.isFontLoaded=!1,this.fontPromise=null,this.resizeCanvas(),this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"?this.enableUploadPanel():this.enableDrawPanel(),this.pad.addEventListener("endStroke",()=>{this.handleDownloadState()}),this.clearButton.addEventListener("click",t=>{t.preventDefault(),this.cleaSignaturePad(),this.clearTextInput()}),this.undoButton.addEventListener("click",t=>{t.preventDefault();let e=this.pad.toData();e&&(e.pop(),this.pad.fromData(e),this.handleDownloadState())}),this.drawTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableDrawPanel()}),this.textTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableTextPanel()}),this.uploadTypeButton.addEventListener("click",()=>{this.uploadTypeButton.querySelector('input[type="radio"]').checked=!0,this.enableUploadPanel()}),this.fileInput.addEventListener("change",t=>{this.drawOnCanvas(t.target.files[0]).then(()=>{this.handleDownloadState()}).catch(e=>{alert(e.message)})}),this.colorInputs.forEach(t=>{t.addEventListener("change",e=>{this.textInput.value!==""&&(this.canvas.getContext("2d").fillStyle=e.target.value,this.drawText(),this.handleDownloadState()),this.pad.penColor=e.target.value})}),this.textInput.addEventListener("input",()=>{this.drawText(),this.handleDownloadState()}),this.saveButton.addEventListener("click",t=>{t.preventDefault(),this.disableSaveButton(),this.cropCanvas(this.canvas).then(e=>{this.isDownloadOnSaveSettingEnabled&&this.downloadBlob(e,`signature-${Date.now()}.png`),this.convertBlobToBase64(e).then(s=>{this.dispatchEvent(new CustomEvent("save",{detail:{base64:s,blob:e}}))}).catch(s=>{console.error("Failed to convert blob to base64:",s)})}).then(()=>{this.enableSaveButton()}).catch(e=>{console.error("Download failed:",e),this.disableSaveButton()})}),this.intersectionObserver=new IntersectionObserver((t,e)=>{t.forEach(s=>{s.isIntersecting&&this.resizeCanvas()&&this.intersectionObserver?.disconnect()})}),this.resizeObserver=new ResizeObserver(t=>{for(let e of t){let n=e.contentRect.width<576;this.drawTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.textTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.uploadTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.pad.isEmpty()&&this.textInput.value===""&&this.resizeCanvas()}}),this.resizeObserver.observe(this),this.intersectionObserver.observe(this.canvas)}}resizeCanvas(){let t=this.canvas.parentNode.clientWidth;return t===0?!1:(this.canvas.width!==t*this.scale&&(this.canvas.width=t*this.scale,this.canvas.height=t*this.scale/3,this.canvas.getContext("2d").setTransform(this.scale,0,0,this.scale,0,0),this.pad.clear()),!0)}enableDrawPanel(){this.drawTypeButton.querySelector("input").checked=!0,this.textTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="inline-block",this.pad.on(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableTextPanel(){this.drawTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!0,this.textInput.parentNode.style.display="inherit",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.loadFont(),this.clearTextInput(),this.clearFileInput()}enableUploadPanel(){this.uploadTypeButton.querySelector("input").checked=!0,this.drawTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="hidden"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!1,this.setSaveButtonClassAndStyle())}disableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!0,this.setSaveButtonClassAndStyle())}drawText(){let t=this.canvas,e=t.getContext("2d"),s="SignatureFont",n="58px",a="italic",d="";e.font=a+" "+d+" "+n+" "+s,e.textAlign="center",e.clearRect(0,0,t.width/this.scale,t.height/this.scale),e.fillText(this.textInput.value,t.width/2/this.scale,t.height/2/this.scale+11)}drawOnCanvas(t){return new Promise((e,s)=>{if(t&&t.type.match("image.*")){let n=new FileReader,a=this.canvas;n.onload=d=>{let r=new Image;r.src=d.target.result,r.onload=()=>{let h=a.getContext("2d"),u=r.width/r.height,o=a.width/this.scale,y=a.height/this.scale,v=o,p=y;o/y>u?v=y*u:p=o/u;let g=(o-v)/2,f=(y-p)/2;setTimeout(()=>{h.clearRect(0,0,o,y),h.drawImage(r,g,f,v,p),this.pad.fromDataURL("").catch(()=>{}),e()},50)},r.onerror=()=>s(new Error("Failed to load image"))},n.onerror=()=>s(new Error("Failed to read file")),n.readAsDataURL(t)}else s(new Error("Invalid file type"))})}clearTextInput(){this.textInput&&(this.textInput.value="",this.handleDownloadState())}cleaSignaturePad(){this.pad.clear(),this.handleDownloadState()}clearFileInput(){this.fileInput&&(this.fileInput.value="",this.handleDownloadState())}handleDownloadState(){let t=this.changeId=(this.changeId||0)+1;this.pad.isEmpty()&&this.textInput.value===""?(this.distributeSignatureData(null),this.disableSaveButton()):(this.cropCanvas(this.canvas).then(e=>{t===this.changeId&&this.distributeSignatureData(e)}).catch(e=>{console.error("Failed to create a PNG blob:",e)}),this.enableSaveButton())}distributeSignatureData(t){let e=this.childrenNode.querySelector('input[type="file"]');if(t){if(this.convertBlobToBase64(t).then(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:s,blob:t}}))}).catch(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),console.error("Failed to convert blob to base64:",s)}),e){let s=new File([t],`signature-${Date.now()}.png`,{type:t.type,lastModified:Date.now()}),n=new DataTransfer;n.items.add(s),e.files=n.files}}else this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),e&&(e.value="")}convertBlobToBase64(t){return new Promise((e,s)=>{let n=new FileReader;n.onloadend=()=>{let a=n.result.split(",")[1];e(a)},n.onerror=a=>{s(a)},n.readAsDataURL(t)})}loadFont(){if(!this.fontPromise){let t=this.dataset.fontUrl||"https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff",e=new FontFace("SignatureFont",`url(${t})`);this.fontPromise=e.load().then(s=>{document.fonts.add(s),this.isFontLoaded=!0})}this.fontPromise.then(()=>{this.isTextTypeSelected&&this.textInput.value!==""&&(this.drawText(),this.handleDownloadState())}).catch(t=>{this.fontPromise=null,console.error("Font loading failed:",t)})}downloadBlob(t,e){let s=window.URL.createObjectURL(t),n=document.createElement("a");return n.style="display: none",n.href=s,n.download=e,document.body.appendChild(n),n.click(),window.URL.revokeObjectURL(s),new Promise(a=>{a()})}cropCanvas(t){let e=t.getContext("2d"),s=t.width,n=t.height,a=n,d=0,r=s,h=0,o=e.getImageData(0,0,s,n).data;for(let f=0;f<n;f++)for(let x=0;x<s;x++){let b=(f*s+x)*4;o[b+3]!==0&&(a=Math.min(a,f),d=Math.max(d,f),r=Math.min(r,x),h=Math.max(h,x))}h<r&&(r=0,a=0,h=s-1,d=n-1);let y=h-r+1,v=d-a+1,p=document.createElement("canvas");return p.width=y,p.height=v,p.getContext("2d").drawImage(t,r,a,y,v,0,0,y,v),new Promise((f,x)=>{p.toBlob(b=>{b?f(b):x(new Error("Failed to create a PNG blob."))},"image/png")})}disconnectedCallback(){this.isMounted&&(this.resizeObserver?.disconnect(),this.intersectionObserver?.disconnect(),this.pad.off(),this.fieldNode.remove(),this.append(...this.childrenNode.childNodes),this.childrenNode.remove(),this.isMounted=!1)}get tempalte(){return`
|
|
1
|
+
var _=Object.defineProperty;var C=(c,l,t)=>l in c?_(c,l,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[l]=t;var i=(c,l,t)=>C(c,typeof l!="symbol"?l+"":l,t);var m=class{constructor(c,l,t,e){i(this,"x");i(this,"y");i(this,"pressure");i(this,"time");if(isNaN(c)||isNaN(l))throw new Error(`Point is invalid: (${c}, ${l})`);this.x=+c,this.y=+l,this.pressure=t||0,this.time=e||Date.now()}distanceTo(c){return Math.sqrt(Math.pow(this.x-c.x,2)+Math.pow(this.y-c.y,2))}equals(c){return this.x===c.x&&this.y===c.y&&this.pressure===c.pressure&&this.time===c.time}velocityFrom(c){return this.time!==c.time?this.distanceTo(c)/(this.time-c.time):0}},E=class T{constructor(l,t,e,s,n,a){i(this,"startPoint");i(this,"control2");i(this,"control1");i(this,"endPoint");i(this,"startWidth");i(this,"endWidth");this.startPoint=l,this.control2=t,this.control1=e,this.endPoint=s,this.startWidth=n,this.endWidth=a}static fromPoints(l,t){let e=this.calculateControlPoints(l[0],l[1],l[2]).c2,s=this.calculateControlPoints(l[1],l[2],l[3]).c1;return new T(l[1],e,s,l[2],t.start,t.end)}static calculateControlPoints(l,t,e){let s=l.x-t.x,n=l.y-t.y,a=t.x-e.x,d=t.y-e.y,r={x:(l.x+t.x)/2,y:(l.y+t.y)/2},h={x:(t.x+e.x)/2,y:(t.y+e.y)/2},u=Math.sqrt(s*s+n*n),o=Math.sqrt(a*a+d*d),y=r.x-h.x,v=r.y-h.y,p=u+o==0?0:o/(u+o),g={x:h.x+y*p,y:h.y+v*p},f=t.x-g.x,x=t.y-g.y;return{c1:new m(r.x+f,r.y+x),c2:new m(h.x+f,h.y+x)}}length(){let t=0,e,s;for(let n=0;n<=10;n+=1){let a=n/10,d=this.point(a,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(a,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){let h=d-e,u=r-s;t+=Math.sqrt(h*h+u*u)}e=d,s=r}return t}point(l,t,e,s,n){return t*(1-l)*(1-l)*(1-l)+3*e*(1-l)*(1-l)*l+3*s*(1-l)*l*l+n*l*l*l}},k=class{constructor(){i(this,"_et");try{this._et=new EventTarget}catch{this._et=document}}addEventListener(c,l,t){this._et.addEventListener(c,l,t)}dispatchEvent(c){return this._et.dispatchEvent(c)}removeEventListener(c,l,t){this._et.removeEventListener(c,l,t)}};function A(c,l=250){let t=0,e=null,s,n,a,d=()=>{t=Date.now(),e=null,s=c.apply(n,a),e||(n=null,a=[])};return function(...h){let u=Date.now(),o=l-(u-t);return n=this,a=h,o<=0||o>l?(e&&(clearTimeout(e),e=null),t=u,s=c.apply(n,a),e||(n=null,a=[])):e||(e=window.setTimeout(d,o)),s}}var B=class S extends k{constructor(t,e={}){super();i(this,"canvas");i(this,"dotSize");i(this,"minWidth");i(this,"maxWidth");i(this,"penColor");i(this,"minDistance");i(this,"velocityFilterWeight");i(this,"compositeOperation");i(this,"backgroundColor");i(this,"throttle");i(this,"canvasContextOptions");i(this,"_ctx");i(this,"_drawingStroke",!1);i(this,"_isEmpty",!0);i(this,"_dataUrl");i(this,"_dataUrlOptions");i(this,"_lastPoints",[]);i(this,"_data",[]);i(this,"_lastVelocity",0);i(this,"_lastWidth",0);i(this,"_strokeMoveUpdate");i(this,"_strokePointerId");this.canvas=t,this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle=e.throttle??16,this.minDistance=e.minDistance??5,this.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=e.compositeOperation||"source-over",this.canvasContextOptions=e.canvasContextOptions??{},this._strokeMoveUpdate=this.throttle?A(S.prototype._strokeUpdate,this.throttle):S.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=t.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}clear(){let{_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(){let t=this._data,e=this._dataUrl,s=this._dataUrlOptions;this.clear(),e&&this.fromDataURL(e,s),this.fromData(t,{clear:!1})}fromDataURL(t,e={}){return new Promise((s,n)=>{let a=new Image,d=e.ratio||window.devicePixelRatio||1,r=e.width||this.canvas.width/d,h=e.height||this.canvas.height/d,u=e.xOffset||0,o=e.yOffset||0;this._reset(this._getPointGroupOptions()),a.onload=()=>{this._ctx.drawImage(a,u,o,r,h),s()},a.onerror=y=>{n(y)},a.crossOrigin="anonymous",a.src=t,this._isEmpty=!1,this._dataUrl=t,this._dataUrlOptions={...e}})}toDataURL(t="image/png",e){return t==="image/svg+xml"?(typeof e!="object"&&(e=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(e))}`):(typeof e!="number"&&(e=void 0),this.canvas.toDataURL(t,e))}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none",this.canvas.style.webkitUserSelect="none";let 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.style.webkitUserSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){let 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(){let{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._drawLine.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_isLeftButtonPressed(t,e){return e?t.buttons===1:(t.buttons&1)===1}_pointerEventToSignatureEvent(t){return{event:t,type:t.type,x:t.clientX,y:t.clientY,pressure:"pressure"in t?t.pressure:0}}_touchEventToSignatureEvent(t){let 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){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}_handleMouseUp(t){this._isLeftButtonPressed(t)||this._strokeEnd(this._pointerEventToSignatureEvent(t))}_handleTouchStart(t){t.targetTouches.length!==1||this._drawingStroke||(t.cancelable&&t.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(t)))}_handleTouchMove(t){if(t.targetTouches.length===1){if(t.cancelable&&t.preventDefault(),!this._drawingStroke){this._strokeEnd(this._touchEventToSignatureEvent(t),!1);return}this._strokeMoveUpdate(this._touchEventToSignatureEvent(t))}}_handleTouchEnd(t){t.targetTouches.length===0&&(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 typeof this._strokePointerId>"u"?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){if(this._allowPointerId(t)){if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);return}t.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))}}_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;let{addEventListener:s}=this._getListenerFunctions();switch(t.event.type){case"mousedown":s("mousemove",this._handleMouseMove,{passive:!1}),s("mouseup",this._handleMouseUp,{passive:!1});break;case"touchstart":s("touchmove",this._handleTouchMove,{passive:!1}),s("touchend",this._handleTouchEnd,{passive:!1}),s("touchcancel",this._handleTouchCancel,{passive:!1});break;case"pointerdown":s("pointermove",this._handlePointerMove,{passive:!1}),s("pointerup",this._handlePointerUp,{passive:!1}),s("pointercancel",this._handlePointerCancel,{passive:!1});break;default:}this._drawingStroke=!0;let n=this._getPointGroupOptions(),a={...n,points:[]};this._data.push(a),this._reset(n),this._strokeUpdate(t)}_strokeUpdate(t){if(!this._drawingStroke)return;if(this._data.length===0){this._strokeBegin(t);return}this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));let e=this._createPoint(t.x,t.y,t.pressure),s=this._data[this._data.length-1],n=s.points,a=n.length>0&&n[n.length-1],d=a?e.distanceTo(a)<=this.minDistance:!1,r=this._getPointGroupOptions(s);if(!a||!(a&&d)){let h=this._addPoint(e,r);a?h&&this._drawCurve(h,r):this._drawDot(e,r),n.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,s){let n=this.canvas.getBoundingClientRect();return new m(t-n.left,e-n.top,s,new Date().getTime())}_addPoint(t,e){let{_lastPoints:s}=this;if(s.push(t),s.length>2){s.length===3&&s.unshift(s[0]);let n=this._calculateCurveWidths(s[1],s[2],e),a=E.fromPoints(s,n);return s.shift(),a}return null}_calculateCurveWidths(t,e,s){let n=s.velocityFilterWeight*e.velocityFrom(t)+(1-s.velocityFilterWeight)*this._lastVelocity,a=this._strokeWidth(n,s),d={end:a,start:this._lastWidth};return this._lastVelocity=n,this._lastWidth=a,d}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,s){let n=this._ctx;n.moveTo(t,e),n.arc(t,e,s,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){let s=this._ctx,n=t.endWidth-t.startWidth,a=Math.ceil(t.length())*2;s.beginPath(),s.fillStyle=e.penColor;for(let d=0;d<a;d+=1){let r=d/a,h=r*r,u=h*r,o=1-r,y=o*o,v=y*o,p=v*t.startPoint.x;p+=3*y*r*t.control1.x,p+=3*o*h*t.control2.x,p+=u*t.endPoint.x;let g=v*t.startPoint.y;g+=3*y*r*t.control1.y,g+=3*o*h*t.control2.y,g+=u*t.endPoint.y;let f=Math.min(t.startWidth+u*n,e.maxWidth);this._drawCurveSegment(p,g,f)}s.closePath(),s.fill()}_getDotSize(t){return t.dotSize>0?t.dotSize:(t.minWidth+t.maxWidth)/2}_drawDot(t,e){let s=this._ctx,n=this._getDotSize(e);s.beginPath(),this._drawCurveSegment(t.x,t.y,n),s.closePath(),s.fillStyle=e.penColor,s.fill()}_drawLine(t,e,s){let n=this._ctx;n.save(),n.beginPath(),n.moveTo(t.x,t.y),n.lineTo(e.x,e.y),n.lineWidth=this._getDotSize(s)*2,n.lineCap="round",n.strokeStyle=s.penColor,n.stroke(),n.restore(),this._isEmpty=!1}_fromData(t,e,s,n){for(let a of t){let{points:d}=a,r=this._getPointGroupOptions(a);if(d.length>2)for(let h=0;h<d.length;h+=1){let u=d[h],o=new m(u.x,u.y,u.pressure,u.time);h===0&&this._reset(r);let y=this._addPoint(o,r);y&&e(y,r)}else d.length===2?(this._reset(r),n(d[0],d[1],r)):(this._reset(r),s(d[0],r))}}toSVG({includeBackgroundColor:t=!1,includeDataUrl:e=!1}={}){let s=this._data,n=Math.max(window.devicePixelRatio||1,1),a=0,d=0,r=this.canvas.width/n,h=this.canvas.height/n,u=document.createElementNS("http://www.w3.org/2000/svg","svg");if(u.setAttribute("xmlns","http://www.w3.org/2000/svg"),u.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),u.setAttribute("viewBox",`${a} ${d} ${r} ${h}`),u.setAttribute("width",r.toString()),u.setAttribute("height",h.toString()),t&&this.backgroundColor){let o=document.createElement("rect");o.setAttribute("width","100%"),o.setAttribute("height","100%"),o.setAttribute("fill",this.backgroundColor),u.appendChild(o)}if(e&&this._dataUrl){let o=this._dataUrlOptions?.ratio||window.devicePixelRatio||1,y=this._dataUrlOptions?.width||this.canvas.width/o,v=this._dataUrlOptions?.height||this.canvas.height/o,p=this._dataUrlOptions?.xOffset||0,g=this._dataUrlOptions?.yOffset||0,f=document.createElement("image");f.setAttribute("x",p.toString()),f.setAttribute("y",g.toString()),f.setAttribute("width",y.toString()),f.setAttribute("height",v.toString()),f.setAttribute("preserveAspectRatio","none"),f.setAttribute("href",this._dataUrl),u.appendChild(f)}return this._fromData(s,(o,{penColor:y})=>{let v=document.createElement("path");if(!isNaN(o.control1.x)&&!isNaN(o.control1.y)&&!isNaN(o.control2.x)&&!isNaN(o.control2.y)){let p=`M ${o.startPoint.x.toFixed(3)},${o.startPoint.y.toFixed(3)} C ${o.control1.x.toFixed(3)},${o.control1.y.toFixed(3)} ${o.control2.x.toFixed(3)},${o.control2.y.toFixed(3)} ${o.endPoint.x.toFixed(3)},${o.endPoint.y.toFixed(3)}`;v.setAttribute("d",p),v.setAttribute("stroke-width",(o.endWidth*2.25).toFixed(3)),v.setAttribute("stroke",y),v.setAttribute("fill","none"),v.setAttribute("stroke-linecap","round"),u.appendChild(v)}},(o,{penColor:y,dotSize:v,minWidth:p,maxWidth:g})=>{let f=document.createElement("circle"),x=v>0?v:(p+g)/2;f.setAttribute("r",x.toString()),f.setAttribute("cx",o.x.toString()),f.setAttribute("cy",o.y.toString()),f.setAttribute("fill",y),u.appendChild(f)},(o,y,v)=>{let p=document.createElement("line");p.setAttribute("x1",o.x.toString()),p.setAttribute("y1",o.y.toString()),p.setAttribute("x2",y.x.toString()),p.setAttribute("y2",y.y.toString()),p.setAttribute("stroke",v.penColor),p.setAttribute("stroke-width",(this._getDotSize(v)*2).toString()),p.setAttribute("stroke-linecap","round"),u.appendChild(p)}),u.outerHTML}};var P=typeof HTMLElement>"u"?class{}:HTMLElement,D=0,w=class extends P{constructor(){super();i(this,"setDisplayType",()=>{let t=[this.dataset.withDrawn,this.dataset.withTyped,this.dataset.withUpload].filter(e=>e==="false");this.textTypeButton.parentNode.style.display=this.dataset.withTyped==="false"?"none":"inherit",this.drawTypeButton.parentNode.style.display=this.dataset.withDrawn==="false"?"none":"inherit",this.uploadTypeButton.parentNode.style.display=this.dataset.withUpload==="false"?"none":"inherit",this.typeButtonsContainer.parentNode.style.display=t.length>1&&this.dataset.withUpload==="false"?"none":"inherit",t.length===3?console.error('At least one of the "with-typed", "with-drawn", or "with-upload" attributes must be set to "true".'):this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"&&this.enableUploadPanel()});i(this,"setDisplayColorSelect",()=>{this.colorSelect.style.visibility=this.dataset.withColorSelect==="false"?"hidden":"visible"});i(this,"setDisplaySubmit",()=>{this.saveButton.parentNode.style.display=this.dataset.withSubmit==="false"?"none":"inherit"});i(this,"setFontUrl",()=>{this.isFontLoaded=!1,this.fontPromise=null,this.isTextTypeSelected&&this.loadFont()});i(this,"setControlButtonsContainerClassAndStyle",()=>{let t=this.dataset.controlButtonsContainerClass||"",e=this.dataset.controlButtonsContainerStyle||(t?"":this.defaultStyles.controlButtonsContainer);this.controlButtonsContainer.setAttribute("style",e),this.controlButtonsContainer.setAttribute("class",t)});i(this,"setSaveButtonText",()=>{let t=this.saveButton.querySelector("span");t&&(t.innerText=this.dataset.saveButtonText||this.defaultLabels.saveButton)});i(this,"setSaveButtonClassAndStyle",()=>{let t=this.dataset.saveButtonClass||"",e=this.dataset.saveButtonStyle||(t?"":this.defaultStyles.saveButton);this.isSaveButtonDisabled&&(t&&this.dataset.saveButtonDisabledClass&&(t=this.combineStrings(t,this.dataset.saveButtonDisabledClass)),e&&this.dataset.saveButtonDisabledStyle?e=this.combineStrings(e,this.dataset.saveButtonDisabledStyle):t||(e=this.combineStrings(e,this.defaultStyles.saveButtonDisabled))),this.saveButton.setAttribute("class",t),this.saveButton.setAttribute("style",e)});i(this,"setUndoButtonText",()=>{let t=this.undoButton.querySelector("span");t&&(t.innerText=this.dataset.undoButtonText||this.defaultLabels.undoButton)});i(this,"setUndoButtonClassAndStyle",()=>{let t=this.dataset.undoButtonClass||"",e=this.dataset.undoButtonStyle||(t?"":this.defaultStyles.undoButton);this.undoButton.setAttribute("class",t),this.undoButton.setAttribute("style",e)});i(this,"setCleaButtonText",()=>{let t=this.clearButton.querySelector("span");t&&(t.innerText=this.dataset.clearButtonText||this.defaultLabels.clearButton)});i(this,"setClearButtonClassAndStyle",()=>{let t=this.dataset.clearButtonClass||"",e=this.dataset.clearButtonStyle||(t?"":this.defaultStyles.clearButton);this.clearButton.setAttribute("class",t),this.clearButton.setAttribute("style",e)});i(this,"setCanvasClassAndStyle",()=>{let t=this.dataset.canvasClass||"",e=this.dataset.canvasStyle||(t?"padding: 1px; touch-action: none; user-select: none;":this.defaultStyles.canvas);this.canvas.setAttribute("class",t),this.canvas.setAttribute("style",e)});i(this,"setTypeButtonsContainerClassAndStyle",()=>{let t=this.dataset.typeButtonsContainerClass||"",e=this.dataset.typeButtonsContainerStyle||(t?"":this.defaultStyles.typeButtonsContainer);this.typeButtonsContainer.setAttribute("style",e),this.typeButtonsContainer.setAttribute("class",t)});i(this,"setTextInputPlaceholder",()=>{this.textInput.setAttribute("placeholder",this.dataset.textInputPlaceholder||this.defaultLabels.textInputPlaceholder)});i(this,"setTextInputClassAndStyle",()=>{let t=this.dataset.textInputClass||"",e=this.dataset.textInputStyle||(t?"":this.defaultStyles.textInput);this.textInput.setAttribute("class",t),this.textInput.setAttribute("style",e)});i(this,"setDrawTypeButtonText",()=>{let t=this.drawTypeButton.querySelector("span");t&&(t.innerText=this.dataset.drawTypeButtonText||this.defaultLabels.drawTypeButton)});i(this,"setDrawTypeButtonClassAndStyle",()=>{let t=this.dataset.drawTypeButtonClass||"",e=this.dataset.drawTypeButtonStyle||(t?"":this.defaultStyles.drawTypeButton);this.isDrawTypeSelected&&(t&&this.dataset.drawTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.drawTypeButtonActiveClass)),e&&this.dataset.drawTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.drawTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.drawTypeButtonActive))),this.drawTypeButton.setAttribute("class",t),this.drawTypeButton.setAttribute("style",e)});i(this,"setTextTypeButtonText",()=>{let t=this.textTypeButton.querySelector("span");t&&(t.innerText=this.dataset.textTypeButtonText||this.defaultLabels.textTypeButton)});i(this,"setTextTypeButtonClassAndStyle",()=>{let t=this.dataset.textTypeButtonClass||"",e=this.dataset.textTypeButtonStyle||(t?"":this.defaultStyles.textTypeButton);this.isTextTypeSelected&&(t&&this.dataset.textTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.textTypeButtonActiveClass)),e&&this.dataset.textTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.textTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.textTypeButtonActive))),this.textTypeButton.setAttribute("class",t),this.textTypeButton.setAttribute("style",e)});i(this,"setUploadTypeButtonText",()=>{let t=this.uploadTypeButton.querySelector("span");t&&(t.innerText=this.dataset.uploadTypeButtonText||this.defaultLabels.uploadTypeButton)});i(this,"setUploadTypeButtonClassAndStyle",()=>{let t=this.dataset.uploadTypeButtonClass||"",e=this.dataset.uploadTypeButtonStyle||(t?"":this.defaultStyles.uploadTypeButton);this.isUploadTypeSelected&&(t&&this.dataset.uploadTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.uploadTypeButtonActiveClass)),e&&this.dataset.uploadTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.uploadTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.uploadTypeButtonActive))),this.uploadTypeButton.setAttribute("class",t),this.uploadTypeButton.setAttribute("style",e)});this.isMounted=!1,this.uid=++D}get defaultStyles(){return this.constructor.DEFAULT_STYLES}get defaultLabels(){return this.constructor.DEFAULT_LABELS}get clearButton(){return this.querySelector('[data-target="clearButton"]')}get undoButton(){return this.querySelector('[data-target="undoButton"]')}get controlButtonsContainer(){return this.querySelector('[data-target="controlButtonsContainer"]')}get typeButtonsContainer(){return this.querySelector('[data-target="typeButtonsContainer"]')}get drawTypeButton(){return this.querySelector('[data-target="drawTypeButton"]')}get textTypeButton(){return this.querySelector('[data-target="textTypeButton"]')}get uploadTypeButton(){return this.querySelector('[data-target="uploadTypeButton"]')}get textInput(){return this.querySelector('[data-target="textInput"]')}get fileInput(){return this.querySelector('[data-target="fileInput"]')}get saveButton(){return this.querySelector('[data-target="saveButton"]')}get canvas(){return this.querySelector('[data-target="canvas"]')}get colorSelect(){return this.querySelector('[data-target="colorSelect"]')}get colorInputs(){return[...this.querySelectorAll('[data-target="colorInput"]')]}get setters(){return{"data-with-typed":this.setDisplayType,"data-with-drawn":this.setDisplayType,"data-with-upload":this.setDisplayType,"data-with-color-select":this.setDisplayColorSelect,"data-with-submit":this.setDisplaySubmit,"data-font-url":this.setFontUrl,"data-control-buttons-container-class":this.setControlButtonsContainerClassAndStyle,"data-control-buttons-container-style":this.setControlButtonsContainerClassAndStyle,"data-save-button-text":this.setSaveButtonText,"data-save-button-class":this.setSaveButtonClassAndStyle,"data-save-button-style":this.setSaveButtonClassAndStyle,"data-save-button-disabled-class":this.setSaveButtonClassAndStyle,"data-save-button-disabled-style":this.setSaveButtonClassAndStyle,"data-undo-button-text":this.setUndoButtonText,"data-undo-button-class":this.setUndoButtonClassAndStyle,"data-undo-button-style":this.setUndoButtonClassAndStyle,"data-clear-button-text":this.setCleaButtonText,"data-clear-button-class":this.setClearButtonClassAndStyle,"data-clear-button-style":this.setClearButtonClassAndStyle,"data-canvas-class":this.setCanvasClassAndStyle,"data-canvas-style":this.setCanvasClassAndStyle,"data-text-input-placeholder":this.setTextInputPlaceholder,"data-text-input-class":this.setTextInputClassAndStyle,"data-text-input-style":this.setTextInputClassAndStyle,"data-type-buttons-container-class":this.setTypeButtonsContainerClassAndStyle,"data-type-buttons-container-style":this.setTypeButtonsContainerClassAndStyle,"data-draw-type-button-text":this.setDrawTypeButtonText,"data-draw-type-button-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-style":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-style":this.setDrawTypeButtonClassAndStyle,"data-text-type-button-text":this.setTextTypeButtonText,"data-text-type-button-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-style":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-style":this.setTextTypeButtonClassAndStyle,"data-upload-type-button-text":this.setUploadTypeButtonText,"data-upload-type-button-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-style":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-style":this.setUploadTypeButtonClassAndStyle}}get isDrawTypeSelected(){return this.drawTypeButton.querySelector("input").checked}get isTextTypeSelected(){return this.textTypeButton.querySelector("input").checked}get isUploadTypeSelected(){return this.uploadTypeButton.querySelector("input").checked}get isSaveButtonDisabled(){return this.saveButton.disabled}get isDownloadOnSaveSettingEnabled(){return this.dataset.downloadOnSave==="true"}get isColorSelectSettingEnabled(){return this.dataset.withColorSelect!=="false"}get isSubmitButtonSettingEnabled(){return this.dataset.withSubmit!=="false"}combineStrings(t,e){return[t,e].filter(Boolean).join(" ")}attributeChangedCallback(t,e,s){this.isMounted&&this.setters[t]&&e!==s&&this.setters[t]()}connectedCallback(){this.isMounted||(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.init(),{once:!0}):this.init())}init(){if(!(this.isMounted||!this.isConnected)){this.style.display="block",this.childrenNode=document.createElement("div"),this.appendChild(this.childrenNode),Array.from(this.childNodes).map(t=>{this.childrenNode!==t&&this.childrenNode.appendChild(t)}),this.childrenNode.style.display="none",this.fieldNode=document.createElement("div"),this.fieldNode.innerHTML=this.tempalte,this.appendChild(this.fieldNode),this.fieldNode.addEventListener("change",t=>t.stopPropagation()),this.pad=new B(this.canvas),this.isMounted=!0;for(let t in this.setters)this.setters.hasOwnProperty(t)&&this.setters[t]();this.scale=2,this.isFontLoaded=!1,this.fontPromise=null,this.resizeCanvas(),this.dataset.withDrawn!=="false"?this.enableDrawPanel():this.dataset.withTyped!=="false"?this.enableTextPanel():this.dataset.withUpload!=="false"?this.enableUploadPanel():this.enableDrawPanel(),this.pad.addEventListener("endStroke",()=>{this.handleDownloadState()}),this.clearButton.addEventListener("click",t=>{t.preventDefault(),this.cleaSignaturePad(),this.clearTextInput()}),this.undoButton.addEventListener("click",t=>{t.preventDefault();let e=this.pad.toData();e&&(e.pop(),this.pad.fromData(e),this.handleDownloadState())}),this.drawTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableDrawPanel()}),this.textTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableTextPanel()}),this.uploadTypeButton.addEventListener("click",()=>{this.uploadTypeButton.querySelector('input[type="radio"]').checked=!0,this.enableUploadPanel()}),this.fileInput.addEventListener("change",t=>{this.drawOnCanvas(t.target.files[0]).then(()=>{this.handleDownloadState()}).catch(e=>{alert(e.message)})}),this.colorInputs.forEach(t=>{t.addEventListener("change",e=>{this.textInput.value!==""&&(this.canvas.getContext("2d").fillStyle=e.target.value,this.drawText(),this.handleDownloadState()),this.pad.penColor=e.target.value})}),this.textInput.addEventListener("input",()=>{this.drawText(),this.handleDownloadState()}),this.saveButton.addEventListener("click",t=>{t.preventDefault(),this.disableSaveButton(),this.cropCanvas(this.canvas).then(e=>{this.isDownloadOnSaveSettingEnabled&&this.downloadBlob(e,`signature-${Date.now()}.png`),this.convertBlobToBase64(e).then(s=>{this.dispatchEvent(new CustomEvent("save",{detail:{base64:s,blob:e}}))}).catch(s=>{console.error("Failed to convert blob to base64:",s)})}).then(()=>{this.enableSaveButton()}).catch(e=>{console.error("Download failed:",e),this.disableSaveButton()})}),this.intersectionObserver=new IntersectionObserver((t,e)=>{t.forEach(s=>{s.isIntersecting&&this.resizeCanvas()&&this.intersectionObserver?.disconnect()})}),this.resizeObserver=new ResizeObserver(t=>{for(let e of t){let n=e.contentRect.width<576;this.drawTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.textTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.uploadTypeButton.getElementsByTagName("span")[0].style.display=n?"none":"inline-block",this.pad.isEmpty()&&this.textInput.value===""&&this.resizeCanvas()}}),this.resizeObserver.observe(this),this.intersectionObserver.observe(this.canvas)}}resizeCanvas(){let t=this.canvas.parentNode.clientWidth;return t===0?!1:(this.canvas.width!==t*this.scale&&(this.canvas.width=t*this.scale,this.canvas.height=t*this.scale/3,this.canvas.getContext("2d").setTransform(this.scale,0,0,this.scale,0,0),this.pad.clear()),!0)}enableDrawPanel(){this.drawTypeButton.querySelector("input").checked=!0,this.textTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="inline-block",this.pad.on(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableTextPanel(){this.drawTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!0,this.textInput.parentNode.style.display="inherit",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.loadFont(),this.clearTextInput(),this.clearFileInput()}enableUploadPanel(){this.uploadTypeButton.querySelector("input").checked=!0,this.drawTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="hidden"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!1,this.setSaveButtonClassAndStyle())}disableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!0,this.setSaveButtonClassAndStyle())}drawText(){let t=this.canvas,e=t.getContext("2d"),s="SignatureFont",n="58px",a="italic",d="";e.font=a+" "+d+" "+n+" "+s,e.textAlign="center",e.clearRect(0,0,t.width/this.scale,t.height/this.scale),e.fillText(this.textInput.value,t.width/2/this.scale,t.height/2/this.scale+11)}drawOnCanvas(t){return new Promise((e,s)=>{if(t&&t.type.match("image.*")){let n=new FileReader,a=this.canvas;n.onload=d=>{let r=new Image;r.src=d.target.result,r.onload=()=>{let h=a.getContext("2d"),u=r.width/r.height,o=a.width/this.scale,y=a.height/this.scale,v=o,p=y;o/y>u?v=y*u:p=o/u;let g=(o-v)/2,f=(y-p)/2;setTimeout(()=>{h.clearRect(0,0,o,y),h.drawImage(r,g,f,v,p),this.pad.fromDataURL("").catch(()=>{}),e()},50)},r.onerror=()=>s(new Error("Failed to load image"))},n.onerror=()=>s(new Error("Failed to read file")),n.readAsDataURL(t)}else s(new Error("Invalid file type"))})}clearTextInput(){this.textInput&&(this.textInput.value="",this.handleDownloadState())}cleaSignaturePad(){this.pad.clear(),this.handleDownloadState()}clearFileInput(){this.fileInput&&(this.fileInput.value="",this.handleDownloadState())}handleDownloadState(){let t=this.changeId=(this.changeId||0)+1;this.pad.isEmpty()&&this.textInput.value===""?(this.distributeSignatureData(null),this.disableSaveButton()):(this.cropCanvas(this.canvas).then(e=>{t===this.changeId&&this.distributeSignatureData(e)}).catch(e=>{console.error("Failed to create a PNG blob:",e)}),this.enableSaveButton())}distributeSignatureData(t){let e=this.childrenNode.querySelector('input[type="file"]');if(t){if(this.convertBlobToBase64(t).then(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:s,blob:t}}))}).catch(s=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),console.error("Failed to convert blob to base64:",s)}),e){let s=new File([t],`signature-${Date.now()}.png`,{type:t.type,lastModified:Date.now()}),n=new DataTransfer;n.items.add(s),e.files=n.files}}else this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),e&&(e.value="")}convertBlobToBase64(t){return new Promise((e,s)=>{let n=new FileReader;n.onloadend=()=>{let a=n.result.split(",")[1];e(a)},n.onerror=a=>{s(a)},n.readAsDataURL(t)})}loadFont(){if(!this.fontPromise){let t=this.dataset.fontUrl||"https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff",e=new FontFace("SignatureFont",`url(${t})`);this.fontPromise=e.load().then(s=>{document.fonts.add(s),this.isFontLoaded=!0})}this.fontPromise.then(()=>{this.isTextTypeSelected&&this.textInput.value!==""&&(this.drawText(),this.handleDownloadState())}).catch(t=>{this.fontPromise=null,console.error("Font loading failed:",t)})}downloadBlob(t,e){let s=window.URL.createObjectURL(t),n=document.createElement("a");return n.style="display: none",n.href=s,n.download=e,document.body.appendChild(n),n.click(),window.URL.revokeObjectURL(s),new Promise(a=>{a()})}cropCanvas(t){let e=t.getContext("2d"),s=t.width,n=t.height,a=n,d=0,r=s,h=0,o=e.getImageData(0,0,s,n).data;for(let f=0;f<n;f++)for(let x=0;x<s;x++){let b=(f*s+x)*4;o[b+3]!==0&&(a=Math.min(a,f),d=Math.max(d,f),r=Math.min(r,x),h=Math.max(h,x))}h<r&&(r=0,a=0,h=s-1,d=n-1);let y=h-r+1,v=d-a+1,p=document.createElement("canvas");return p.width=y,p.height=v,p.getContext("2d").drawImage(t,r,a,y,v,0,0,y,v),new Promise((f,x)=>{p.toBlob(b=>{b?f(b):x(new Error("Failed to create a PNG blob."))},"image/png")})}disconnectedCallback(){this.isMounted&&(this.resizeObserver?.disconnect(),this.intersectionObserver?.disconnect(),this.pad.off(),this.fieldNode.remove(),this.append(...this.childrenNode.childNodes),this.childrenNode.remove(),this.isMounted=!1)}get tempalte(){return`
|
|
2
2
|
<div>
|
|
3
3
|
<div>
|
|
4
4
|
<div data-target="typeButtonsContainer">
|