wux-weapp/packages/lib/e-sign/index.js

一套组件化、可复用、易扩展的微信小程序 UI 组件库

"use strict";var _baseComponent=_interopRequireDefault(require("../helpers/baseComponent")),_useCanvasAPI=require("../helpers/hooks/useCanvasAPI"),_useNativeAPI=require("../helpers/hooks/useNativeAPI"),_useDOM=require("../helpers/hooks/useDOM"),_styleToCssString=_interopRequireDefault(require("../helpers/libs/styleToCssString")),_gestures=require("../helpers/shared/gestures");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function ownKeys(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 _objectSpread(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(n,!0).forEach(function(e){_defineProperty(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):ownKeys(n).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}(0,_baseComponent.default)({properties:{prefixCls:{type:String,value:"wux-e-sign"},type:{type:String,value:"png"},width:{type:[String,Number],value:"auto"},height:{type:Number,value:200},bgColor:{type:String,value:"#ffffff"},lineWidth:{type:Number,value:3},lineColor:{type:String,value:"#000000"},hasFooter:{type:Boolean,value:!0},cancelText:{type:String,value:"重置"},confirmText:{type:String,value:"确定"}},data:{isCanvasEmpty:!0,bodyStyle:""},observers:_defineProperty({},"width, height, bgColor",function(e,t,n){this.setBodyStyle({width:e,height:t}),this.resize(_objectSpread({},this.data,{width:e,height:t,bgColor:n}))}),computed:{classes:["prefixCls",function(e){return{wrap:e,bd:"".concat(e,"__bd"),ft:"".concat(e,"__ft"),button:"".concat(e,"__button")}}]},methods:_defineProperty({onTouchStart:function(e){var n=this;if(!this.canvasRef)return!1;var r=this.data;this.canvasRef.then(function(e){var t=e.value;t.beginPath(),t.lineWidth=r.lineWidth||3,t.strokeStyle=r.lineColor||"#000000",n.triggerEvent("start")})},onTouchMove:function(e){var n=this;if(!this.canvasRef)return!1;this.data.isCanvasEmpty&&this.setData({isCanvasEmpty:!1});var t=(0,_gestures.getTouchPoints)(e),r=t.x-(e.currentTarget.offsetLeft||0),i=t.y-(e.currentTarget.offsetTop||0);this.canvasRef.then(function(e){var t=e.value;t.lineCap="round",t.lineJoin="round",t.lineTo(r,i),t.stroke(),n.triggerEvent("signing",{mouseX:r,mouseY:i})})},onTouchEnd:function(e){this.data.isCanvasEmpty&&this.setData({isCanvasEmpty:!1}),this.triggerEvent("end")},createCanvasContext:function(u){var t=this;return Promise.resolve().then(function(){return("auto"===u.width?(0,_useDOM.useRef)(".".concat(u.prefixCls,"__bd"),t):Promise.resolve({clientWidth:u.width,clientHeight:u.height})).then(function(e){var s=e.clientWidth,o=e.clientHeight;return(0,_useCanvasAPI.getCanvasRef)(u.prefixCls,t).then(function(e){function t(e){e&&u.bgColor&&(e.fillStyle=u.bgColor,e.fillRect(0,0,s,o))}var n=e.getContext("2d"),r=(0,_useNativeAPI.getSystemInfoSync)(["window"]).pixelRatio,i=s*r,a=o*r;e.width=i,e.height=a,n.scale(r,r),t(n);return{value:n,clear:function(){n.clearRect(0,0,s,o),n.closePath(),t(n)},draw:function(){return(0,_useCanvasAPI.toDataURL)({width:s,height:o,type:u.type},e)},resize:function(e){var t=n.getImageData(0,0,i,a);e().then(function(e){e.value.putImageData(t,0,0)})}}})})})},setBodyStyle:function(e){var t=(0,_styleToCssString.default)({width:"auto"===e.width?"auto":"".concat(e.width,"px"),height:"".concat(e.height,"px")});this.data.bodyStyle!==t&&this.setData({bodyStyle:t})},clear:function(){var t=this;this.canvasRef&&this.canvasRef.then(function(e){(0,e.clear)(),t.setData({isCanvasEmpty:!0}),t.triggerEvent("clear")})},submit:function(){var t=this;this.data.isCanvasEmpty?this.triggerEvent("submit",{base64Url:""}):this.canvasRef&&this.canvasRef.then(function(e){(0,e.draw)().then(function(e){return t.triggerEvent("submit",{base64Url:e})})})},resize:function(){var t=this;this.canvasRef&&this.canvasRef.then(function(e){(0,e.resize)(function(){return t.canvasRef=t.createCanvasContext(t.data),t.canvasRef})})}},"export",function(){return{resize:this.resize.bind(this)}}),ready:function(){this.setBodyStyle(this.data),this.canvasRef=this.createCanvasContext(this.data)}});