2 lines
6.6 KiB
JavaScript
2 lines
6.6 KiB
JavaScript
"use strict";var t=(t,e,i)=>new Promise(((s,n)=>{var h=t=>{try{r(i.next(t))}catch(e){n(e)}},a=t=>{try{r(i.throw(t))}catch(e){n(e)}},r=t=>t.done?s(t.value):Promise.resolve(t.value).then(h,a);r((i=i.apply(t,e)).next())}));const e=require("../../../../common/vendor.js"),i=require("../common/relation.js"),s=require("./props.js"),n=require("./utils.js"),h=require("./painter.js"),a={name:"lime-painter",mixins:[s.props,i.parent("painter"),{}],data:()=>({use2dCanvas:!1,canvasHeight:150,canvasWidth:null,parentWidth:0,inited:!1,progress:0,firstRender:0,done:!1,tasks:[]}),computed:{styles(){return`${this.size}${this.customStyle||""};`+(this.hidden&&"position: fixed; left: 1500rpx;")},canvasId(){return`l-painter${this._&&this._.uid||this._uid}`},size(){if(this.boardWidth&&this.boardHeight)return`width:${this.boardWidth}px; height: ${this.boardHeight}px;`},dpr(){return this.pixelRatio||e.index.getSystemInfoSync().pixelRatio},boardWidth(){const{width:t=0}=this.elements&&this.elements.css||this.elements||this,e=n.toPx(t||this.width);return e||Math.max(e,n.toPx(this.canvasWidth))},boardHeight(){const{height:t=0}=this.elements&&this.elements.css||this.elements||this,e=n.toPx(t||this.height);return e||Math.max(e,n.toPx(this.canvasHeight))},hasBoard(){return this.board&&Object.keys(this.board).length},elements(){return this.hasBoard?this.board:JSON.parse(JSON.stringify(this.el))}},created(){this.use2dCanvas="2d"===this.type&&n.canIUseCanvas2d()&&!n.isPC},mounted(){return t(this,null,(function*(){yield n.sleep(30),yield this.getParentWeith(),this.$nextTick((()=>{setTimeout((()=>{this.$watch("elements",this.watchRender,{deep:!0,immediate:!0})}),30)}))}))},unmounted(){this.done=!1,this.inited=!1,this.firstRender=0,this.progress=0,this.painter=null,clearTimeout(this.rendertimer)},methods:{watchRender(e,i){return t(this,null,(function*(){e&&e.views&&(this.firstRender?this.firstRender:e.views.length)&&Object.keys(e).length&&JSON.stringify(e)!=JSON.stringify(i)&&(this.firstRender=1,this.progress=0,this.done=!1,clearTimeout(this.rendertimer),this.rendertimer=setTimeout((()=>{this.render(e)}),this.beforeDelay))}))},setFilePath(e,i){return t(this,null,(function*(){let t=e;const{pathType:s=this.pathType}=i||this;return"base64"!=s||n.isBase64(e)?"url"==s&&n.isBase64(e)&&(t=yield n.base64ToPath(e)):t=yield n.pathToBase64(e),i&&i.isEmit&&this.$emit("success",t),t}))},getSize(e){return t(this,null,(function*(){const{width:t}=e.css||e,{height:i}=e.css||e;this.size||(t||i?(this.canvasWidth=t||this.canvasWidth,this.canvasHeight=i||this.canvasHeight,yield n.sleep(30)):yield this.getParentWeith())}))},canvasToTempFilePathSync(t){this.tasks.push(t),this.done&&this.runTask()},runTask(){for(;this.tasks.length;){const t=this.tasks.shift();this.canvasToTempFilePath(t)}},getParentWeith(){return new Promise((t=>{e.index.createSelectorQuery().in(this).select(".lime-painter").boundingClientRect().exec((e=>{const{width:i,height:s}=e[0]||{};this.parentWidth=Math.ceil(i||0),this.canvasWidth=this.parentWidth||300,this.canvasHeight=s||this.canvasHeight||150,t(e[0])}))}))},render(){return t(this,arguments,(function*(t={}){if(!Object.keys(t).length)return;this.progress=0,this.done=!1,yield this.getSize(t);const e=yield this.getContext();let{use2dCanvas:i,boardWidth:s,boardHeight:a,canvas:r,afterDelay:c}=this;if(i&&!r)return Promise.reject(new Error("canvas 没创建"));if(this.boundary={top:0,left:0,width:s,height:a},this.painter=null,!this.painter){const{width:i}=t.css||t;t.css,!i&&this.parentWidth&&Object.assign(t,{width:this.parentWidth});const c={context:e,canvas:r,width:s,height:a,pixelRatio:this.dpr,useCORS:this.useCORS,createImage:n.getImageInfo.bind(this),performance:this.performance,listen:{onProgress:t=>{this.progress=t,this.$emit("progress",t)},onEffectFail:t=>{this.$emit("faill",t)}}};this.painter=new h.kt(c)}try{const{width:s,height:h}=yield this.painter.source(JSON.parse(JSON.stringify(t)));return this.boundary.height=this.canvasHeight=h,this.boundary.width=this.canvasWidth=s,yield n.sleep(this.sleep),yield this.painter.render(),yield new Promise((t=>this.$nextTick(t))),i||(yield this.canvasDraw()),c&&i&&(yield n.sleep(c)),this.$emit("done"),this.done=!0,this.isCanvasToTempFilePath&&this.canvasToTempFilePath().then((t=>{this.$emit("success",t.tempFilePath)})).catch((t=>{this.$emit("fail",new Error(JSON.stringify(t)))})),this.runTask(),Promise.resolve({ctx:e,draw:this.painter,node:this.node})}catch(d){}}))},canvasDraw(t=!1){return new Promise(((e,i)=>this.ctx.draw(t,(()=>setTimeout((()=>e()),this.afterDelay)))))},getContext(){return t(this,null,(function*(){if(!this.canvasWidth)return this.$emit("fail","painter no size"),Promise.reject();if(this.ctx&&this.inited)return Promise.resolve(this.ctx);const{type:t,use2dCanvas:i,dpr:s,boardWidth:n,boardHeight:h}=this,a=()=>new Promise((t=>{e.index.createSelectorQuery().in(this).select(`#${this.canvasId}`).boundingClientRect().exec((i=>{if(i){const s=e.index.createCanvasContext(this.canvasId,this);if(this.inited||(this.inited=!0,this.use2dCanvas=!1,this.canvas=i),!s.measureText){let t=function(t){let e=0;for(let i=0;i<t.length;i++)t.charCodeAt(i)>0&&t.charCodeAt(i)<128?e++:e+=2;return e};s.measureText=e=>{let i=s.state&&s.state.fontSize||12;const n=s.__font;return n&&12==i&&(i=parseInt(n.split(" ")[3],10)),i/=2,{width:t(e)*i}}}this.ctx=s,t(this.ctx)}}))}));return i?new Promise((i=>{e.index.createSelectorQuery().in(this).select(`#${this.canvasId}`).node().exec((e=>{let{node:s}=e&&e[0]||{};if(s){const e=s.getContext(t);this.inited||(this.inited=!0,this.use2dCanvas=!0,this.canvas=s),this.ctx=e,i(this.ctx)}}))})):a()}))},canvasToTempFilePath(i={}){return new Promise(((s,n)=>t(this,null,(function*(){const{use2dCanvas:h,canvasId:a,dpr:r,fileType:c,quality:d}=this;this.boundary;const o=Object.assign({canvasId:a,id:a,fileType:c,quality:d},i,{success:e=>t(this,null,(function*(){try{const t=yield this.setFilePath(e.tempFilePath||e,i),n=Object.assign(e,{tempFilePath:t});i.success&&i.success(n),s(n)}catch(t){this.$emit("fail",t)}}))});if(h){o.canvas=this.canvas;try{const t=this.canvas.toDataURL(`image/${i.fileType||c}`.replace(/pg/,"peg"),i.quality||d);if(/data:,/.test(t))e.index.canvasToTempFilePath(o,this);else{const e=yield this.setFilePath(t,i);i.success&&i.success({tempFilePath:e}),s({tempFilePath:e})}}catch(l){i.fail&&i.fail(l),n(l)}}else e.index.canvasToTempFilePath(o,this)}))))}}};const r=e._export_sfc(a,[["render",function(t,i,s,n,h,a){return e.e({a:a.canvasId&&a.size},a.canvasId&&a.size?e.e({b:h.use2dCanvas},h.use2dCanvas?{c:a.canvasId,d:e.s(a.size)}:{e:a.canvasId,f:a.canvasId,g:e.s(a.size),h:a.boardWidth*a.dpr,i:a.boardHeight*a.dpr,j:t.hidpi},{k:e.s(a.styles)}):{})}]]);wx.createComponent(r);
|