vue3-signature-pad
Version:
A Vue3 Signature Pad
1 lines • 7.54 kB
JavaScript
var SignaturePad=function(t,e,n){"use strict";function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a,i,o=r(e),u=r(n);function c(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function l(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?s(Object(n),!0).forEach((function(e){c(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function f(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var n=[],r=!0,a=!1,i=void 0;try{for(var o,u=t[Symbol.iterator]();!(r=(o=u.next()).done)&&(n.push(o.value),!e||n.length!==e);r=!0);}catch(t){a=!0,i=t}finally{try{r||null==u.return||u.return()}finally{if(a)throw i}}return n}(t,e)||g(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(t){return function(t){if(Array.isArray(t))return p(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||g(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function g(t,e){if(t){if("string"==typeof t)return p(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(t,e):void 0}}function p(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function m(t,e,n){for(var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:Date.now(),a=t.length,i=new Uint8Array(a);a--;)i[a]=t.charCodeAt(a);return new File([i],e,{type:n,lastModified:r})}function v(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Date.now(),r=t.split(","),a=r[0],i=a.match(/:(.*?);/);if(!i)throw new Error("Invalid data url");var o=i[1],u=atob(r[1]);return m(u,e,o,n)}!function(t){t.PNG="image/png",t.JPEG="image/jpeg",t.SVG="image/svg+xml"}(a||(a={})),function(t){t.FILE="file",t.DATA_URL="data_url"}(i||(i={}));var h=function(t){return JSON.parse(JSON.stringify(t))},y={x:0,y:0,src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="},A={dotSize:1.5,minWidth:.5,maxWidth:2.5,throttle:16,minDistance:5,backgroundColor:"rgba(0,0,0,0)",penColor:"black",velocityFilterWeight:.7},b=t.defineComponent({name:"VueSignaturePad",props:{modelValue:{type:[String,File],required:!1},width:{type:Number,default:250,validator:function(t){return 0<=t&&t<=99999}},height:{type:Number,default:150,validator:function(t){return 0<=t&&t<=99999}},saveType:{type:String,default:a.PNG,validator:function(t){var e=Object.values(a);return!!e.includes(t)||(console.warn("The Image type is incorrect! Supported ones are ".concat(e.join(", "),".")),!1)}},saveOutput:{type:String,default:i.DATA_URL,validator:function(t){var e=Object.values(i);return!!e.includes(t)||(console.warn("The save output is incorrect! Supported ones are ".concat(e.join(", "),".")),!1)}},customStyle:{type:Object,default:function(){return{}}},options:{type:Object,default:function(){return A}},images:{type:Array,default:function(){return[]}}},setup:function(e,n){var r=t.reactive({cacheImages:[],onResizeHandler:null,signaturePad:{},signatureData:y}),c=t.ref(null),s=t.computed((function(){if(!c.value)throw new Error('No canvas could be found with this "ref" in the template');return c.value})),f=t.computed((function(){var t=Array.from(h(e.images)),n=Array.from(h(r.cacheImages));return[].concat(d(t),d(n))}));function g(){var t=s.value,e=r.signaturePad.toData(),n=Math.max(window.devicePixelRatio||1,1);t.width=t.offsetWidth*n,t.height=t.offsetHeight*n;var a=t.getContext("2d");a&&a.scale(n,n),r.signaturePad.clear(),r.signatureData=y,r.signaturePad.fromData(e)}function p(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e.saveType,n=arguments.length>1?arguments[1]:void 0;if(r.signaturePad.isEmpty()){if(e.saveOutput===i.FILE)return{isEmpty:!0,file:null,output:i.FILE};if(e.saveOutput===i.DATA_URL)return{isEmpty:!0,data:null,output:i.DATA_URL};throw new Error("This saveOutput ".concat(e.saveOutput," is not supported"))}var a=r.signaturePad.toDataURL(t,n);if(r.signatureData.src=a,e.saveOutput===i.FILE)return{isEmpty:!1,file:v(a,"signature"),output:i.FILE};if(e.saveOutput===i.DATA_URL)return{isEmpty:!1,data:a,output:i.DATA_URL};throw new Error("This saveOutput ".concat(e.saveOutput," is not supported"))}function m(){var t=p(),e=null;t.output===i.FILE?e=t.file:t.output===i.DATA_URL&&(e=t.data),n.emit("input",e)}return t.watch((function(){return e.options}),(function(t){Object.keys(t).forEach((function(e){Object.prototype.hasOwnProperty.call(r.signaturePad,e)&&(r.signaturePad[e]=t[e])}))})),t.onMounted((function(){var t=s.value,n=new o.default(t,l({onEnd:m},e.options));r.signaturePad=n,r.onResizeHandler=g,window.addEventListener("resize",r.onResizeHandler,!1),g()})),t.onBeforeUnmount((function(){r.onResizeHandler&&window.removeEventListener("resize",r.onResizeHandler,!1)})),l(l({},t.toRefs(r)),{},{signaturePadCanvas:c,propsImagesAndCustomImages:f,resizeCanvas:g,saveSignature:p,undoSignature:function(){var t=r.signaturePad.toData();t&&r.signaturePad.fromData(t.slice(0,-1))},mergeImageAndSignature:function(t){return r.signatureData=t,u.default([].concat(d(e.images),d(r.cacheImages),[r.signatureData]))},addImages:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return r.cacheImages=[].concat(d(r.cacheImages),d(t)),u.default([].concat(d(e.images),d(r.cacheImages),[r.signatureData]))},fromDataURL:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2?arguments[2]:void 0;r.signaturePad.fromDataURL(t,e,n)},toDataURL:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:a.PNG,e=arguments.length>1?arguments[1]:void 0;return r.signaturePad.toDataURL(t,e)},fromData:function(t){r.signaturePad.fromData(t)},toData:function(){return r.signaturePad.toData()},lockSignaturePad:function(){r.signaturePad.off()},openSignaturePad:function(){r.signaturePad.on()},isEmpty:function(){return r.signaturePad.isEmpty()},getPropImagesAndCacheImages:function(){return f.value},clearCacheImages:function(){return r.cacheImages=[],r.cacheImages},clearSignature:function(){r.signaturePad.clear(),n.emit("input",null)}})},render:function(){var e=this.width,n=this.height,r=this.customStyle,a={width:"".concat(e,"px"),height:"".concat(n,"px")};return t.h("div",{style:l(l({},a),r)},[t.h("canvas",{style:{width:"100%",height:"100%"},ref:"signaturePadCanvas"})])}}),O=function(){var t=b;return t.install=function(e){e.component("SignaturePad",t)},t}(),w=Object.freeze({__proto__:null,default:O});return Object.entries(w).forEach((function(t){var e=f(t,2),n=e[0],r=e[1];"default"!==n&&(O[n]=r)})),O}(Vue,OriginalSignaturePad,mergeImages);