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.$nex
|