diff --git a/dist/easy-canvas.min.js b/dist/easy-canvas.min.js index 89205a7..2aaf33f 100644 --- a/dist/easy-canvas.min.js +++ b/dist/easy-canvas.min.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).easyCanvas=e()}(this,(function(){"use strict";const t={BLOCK:"block",INLINE_BLOCK:"inline-block",INLINE:"inline",FLEX:"flex",NONE:"none"},e={AUTO:"auto",OUTER:"100%"},i={ROW:"row",COLUMN:"column"};var s={DISPLAY:t,WIDTH:e,POSITION:{ABSOLUTE:"absolute",FIXED:"fixed",RELATIVE:"relative",STATIC:"static"},DEFAULT_STYLES:{display:t.BLOCK,fontSize:14,fontWeight:400,fontFamily:"Microsoft Yahei",color:"#000",paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0,marginTop:0,marginBottom:0,marginLeft:0,marginRight:0,height:e.AUTO,borderRadius:0,lineCap:"square",flexDirection:i.ROW,verticalAlign:"top",textAlign:"left",justifyContent:"flex-start",alignItems:"flex-start",whiteSpace:"normal",zIndex:1,visible:!0},TEXT_ALIGN:{LEFT:"left",RIGHT:"right",CENTER:"center"},FLEX_DIRECTION:i};function n(t){return"number"==typeof t}function r(t){return"auto"===t}function h(t){if("string"==typeof t)return t.match("%")}function o(t){let e=parseInt(t.replace("%",""));return isNaN(e)||e<0?0:e/100}function l(t,e){let i=!1,s=!1;const n=()=>i=!0,r=()=>s=!0;if(null!=t){var h=[];for(h.push(t);0!=h.length;){var o=h.pop();if(e(o,n,r),s)s=!1;else for(var l=o._getChildren(),d=l.length-1;d>=0;d--)i?i=!1:h.push(l[d])}}}function d(t,e){let i=t,s=!1;const n=()=>{s=!0};for(;i.parent&&(e(i.parent,n),!s);)i=i.parent}function a(){return!window}class g{constructor(){this.width=0,this.height=0,this.contentWidth=0,this.y=0,this.doorClosed=!1,this.outerWidth=0,this.container=null,this.elements=[],this.start=null,this.end=null,this.offsetX=0,this.id=Math.random()}bind(t){this.container=t.parent,this.initHeight(t),this.outerWidth=t.parent&&r(t.parent.styles.width)?1/0:t.parent.renderStyles.contentWidth,this.start=t,this.add(t)}initHeight(t){this.height=t.parent&&t.parent.renderStyles.lineHeight||0}initLayout(t){this.right=t._getContainerLayout().contentX,this.x=t._getContainerLayout().contentX,this.y=this.getPreLine(t).y}refreshElementPosition(t){this.start===t&&this.initLayout(t),t.x=this.right+this.offsetX,t.y=this.y+this.getOffsetY(t),this.right+=t.renderStyles.width}getOffsetY(t){return"bottom"===t.renderStyles.verticalAlign?this.height-t.renderStyles.height:"middle"===t.renderStyles.verticalAlign?(this.height-t.renderStyles.height)/2:0}add(t){this.elements.push(t),t.line=this,this.refreshWidthHeight(t),t.next||this.closeLine()}refreshWidthHeight(t){t.renderStyles.height>this.height&&(this.height=t.renderStyles.height),this.width+=t.renderStyles.width}canIEnter(t){return!(t.renderStyles.width+this.width>this.outerWidth)||(this.closeLine(),!1)}closeLine(){this.end=this.elements[this.elements.length-1],this.refreshXAlign()}getPreLine(t){return t.pre?t.pre.line?{y:t.pre.line.height+t.pre.line.y,x:t.pre.line.x}:{y:t._getPreLayout().y+t._getPreLayout().height,x:t._getPreLayout().x}:{y:t._getContainerLayout().contentY,x:t._getContainerLayout().contentX}}refreshXAlign(){if(this.outerWidth>5e3)return;if(!this.end.parent)return;let t=this.outerWidth-this.width;"center"===this.end.parent.renderStyles.textAlign?t/=2:"left"===this.end.parent.renderStyles.textAlign&&(t=0),this.offsetX=t}}const c={[s.FLEX_DIRECTION.ROW]:{width:"width",contentWidth:"contentWidth",x:"x",y:"y",contentX:"contentX",height:"height",contentHeight:"contentHeight"},[s.FLEX_DIRECTION.COLUMN]:{width:"height",contentWidth:"contentHeight",x:"y",y:"x",contentX:"contentY",height:"width",contentHeight:"contentWidth"}};class y extends g{constructor(){super(),this.exactValue=0,this.flexTotal=0,this.key=null}closeLine(){super.closeLine(),this.calcFlex()}bind(t){this.container=t.parent,t.parent&&(this.key=c[t.parent.renderStyles.flexDirection]),this.initHeight(t),this.outerWidth=t.parent&&r(t.parent.styles[this.key.width])?1/0:t.parent.renderStyles[this.key.contentWidth],this.start=t,this.add(t)}add(t){n(t.styles.flex)?this.flexTotal+=t.styles.flex:n(t.styles[this.key.width])&&(this.exactValue+=t.styles[this.key.width]),super.add(t)}initHeight(){this[this.key.height]=0}refreshWidthHeight(t){t.renderStyles[this.key.height]>this[this.key.height]&&(this[this.key.height]=t.renderStyles[this.key.height]),this[this.key.width]+=t.renderStyles[this.key.width]}initLayout(t){this.right=t._getContainerLayout()[this.key.contentX],this[this.key.x]=t._getContainerLayout()[this.key.contentX],this[this.key.y]=this.getPreLine(t)[this.key.y]}refreshElementPosition(t){this.start===t&&this.initLayout(t),t[this.key.x]=this.right+this.offsetX,t[this.key.y]=this[this.key.y]+this.getOffsetY(t),this.right+=t.renderStyles[this.key.width]}calcFlex(){const{[this.key.contentWidth]:t}=this.container.renderStyles;this.elements.forEach(e=>{n(e.styles.flex)&&(e.renderStyles[this.key.width]=e.styles.flex/this.flexTotal*(t-this.exactValue),e._refreshContentWithLayout())})}refreshXAlign(){if(!this.end.parent)return;let t=this.outerWidth-this[this.key.width];"center"===this.end.parent.renderStyles.justifyContent?t/=2:"flex-start"===this.end.parent.renderStyles.justifyContent&&(t=0),this.offsetX=t}getOffsetY(t){return"flex-end"===t.renderStyles.alignSelf?this.container.renderStyles[this.key.contentHeight]-t.renderStyles[this.key.height]:"center"===t.renderStyles.alignSelf?(this.container.renderStyles[this.key.contentHeight]-t.renderStyles[this.key.height])/2:0}}class p{static connectChildren(t){t.hasChildren()&&t._getChildren().map((e,i)=>{e._setParent(t),e._setSibling(t._getChildren()[i-1],t._getChildren()[i+1]),p.connectChildren(e)})}constructor(t){this.children=t||[],this.parent=null,this.root=null,this.pre=null,this.next=null}hasChildren(){return!(!Array.isArray(this.children)||!this.children.length)}_getChildren(){return this.hasChildren()?this.children:[]}_setParent(t){this.parent=t,this.root=t.root}_setSibling(t,e){this.pre=t||null,this.next=e||null}appendChild(t){if(!t instanceof p)throw Error("Unknown treeNode type");const e=this._getChildren()[this._getChildren().length-1];this.children.push(t),t._setParent(this),t._setSibling(e,null)}prependChild(t){if(!t instanceof p)throw Error("Unknown treeNode type");const e=this._getChildren()[0];this.children.unshift(t),t._setParent(this),t._setSibling(null,e)}removeChild(t){if(!t instanceof p)throw Error("Unknown treeNode type");const e=this._getChildren().indexOf(t);if(e<0)throw Error("treeNode must be the child of parent");const i=this._getChildren()[e-1],s=this._getChildren()[e+1];i&&i._setSibling(i.pre,s),s&&s._setSibling(i,s.next),this.children.splice(e,1)}remove(){if(!this.parent)throw Error("Can not remove root node");this.parent.removeChild(this)}append(t){if(!t instanceof p)throw Error("Unknown treeNode type");if(!this.parent)throw Error("Can not add treeNode to root level!");let e=[];t._setParent(this.parent),this.parent.children.forEach((i,s)=>{e.push(i),i===this&&(t._setSibling(i,this.parent.children[s+1]),e.push(t))}),this.parent.children=e}prepend(t){if(!t instanceof p)throw Error("Unknown treeNode type");if(!this.parent)throw Error("Can not add treeNode to root level!");let e=[];t._setParent(this.parent);for(let i=this.parent.children.length-1;i>=0;i--)e.unshift(this.parent.children[i]),this.parent.children[i]===this&&(t._setSibling(this.parent.children[i-1],this.parent.children[i]),e.unshift(t));this.parent.children=e}}function u(t){!function(t){t.parent&&t.parent.styles.display===s.DISPLAY.FLEX&&(t.styles.flex?"column"!==t.parent.styles.flexDirection||n(t.styles.height)?"row"!==t.parent.styles.flexDirection||n(t.styles.width)||(t.styles.width=0):t.styles.height=0:n(t.styles.height)||n(t.styles.width)||(t.styles.flex=1))}(t),function(t){t.styles.width||(t.styles.display!==s.DISPLAY.INLINE_BLOCK&&t.styles.display!==s.DISPLAY.INLINE&&t.isInFlow()?t.styles.display===s.DISPLAY.BLOCK||t.styles.display===s.DISPLAY.FLEX?t.styles.width=s.WIDTH.OUTER:t.styles.width=0:t.styles.width=s.WIDTH.AUTO);h(t.styles.width)&&t.parent&&r(t.parent.styles.width)&&(t.styles.width=s.WIDTH.AUTO);h(t.styles.height)&&t.parent&&r(t.parent.styles.height)&&(t.styles.height=s.WIDTH.AUTO)}(t),function(t){let{borderWidth:e,borderLeftWidth:i,borderRightWidth:s,borderBottomWidth:n,borderTopWidth:r,borderRadius:h}=t.styles;e||(t.styles.borderWidth=0,e=0);Array.isArray(e)?(t.styles.borderTopWidth=e[0],t.styles.borderRightWidth=e[1],t.styles.borderBottomWidth=e[2],t.styles.borderLeftWidth=e[3]):(i||(t.styles.borderLeftWidth=e),s||(t.styles.borderRightWidth=e),n||(t.styles.borderBottomWidth=e),r||(t.styles.borderTopWidth=e));h&&(t.styles.overflow="hidden")}(t),function(t){t.styles.fontSize&&!t.styles.lineHeight&&(t.styles.lineHeight=1.4*t.styles.fontSize)}(t),function(t){t.styles.padding&&(n(t.styles.padding)?(t.styles.paddingLeft=t.styles.padding,t.styles.paddingBottom=t.styles.padding,t.styles.paddingRight=t.styles.padding,t.styles.paddingTop=t.styles.padding):Array.isArray(t.styles.padding)&&(2===t.styles.padding.length?(t.styles.paddingLeft=t.styles.paddingRight=t.styles.padding[1],t.styles.paddingBottom=t.styles.paddingTop=t.styles.padding[0]):4===t.styles.padding.length&&(t.styles.paddingLeft=t.styles.padding[3],t.styles.paddingBottom=t.styles.padding[2],t.styles.paddingRight=t.styles.padding[1],t.styles.paddingTop=t.styles.padding[0])));n(t.styles.margin)?(t.styles.marginLeft=t.styles.margin,t.styles.marginBottom=t.styles.margin,t.styles.marginRight=t.styles.margin,t.styles.marginTop=t.styles.margin):Array.isArray(t.styles.margin)&&(2===t.styles.margin.length?(t.styles.marginLeft=t.styles.marginRight=t.styles.margin[1],t.styles.marginBottom=t.styles.marginTop=t.styles.margin[0]):4===t.styles.margin.length&&(t.styles.marginLeft=t.styles.margin[3],t.styles.marginBottom=t.styles.margin[2],t.styles.marginRight=t.styles.margin[1],t.styles.marginTop=t.styles.margin[0]))}(t)}class f extends p{constructor(t,e){super(e),this.options=Object.assign({attrs:{},styles:{},on:{}},t),this.styles=null,this.renderStyles=null,this.x=0,this.y=0,this.render=null,this.container=null,this.visible=!0}init(){this._initStyles(),this.initEvent()}initEvent(){const{click:t}=this.options.on;if(t){const{click:t}=this.options.on;this.getLayer().eventManager.onClick(t,this)}}removeEvent(){this.getLayer().eventManager.removeElement(this)}getLayer(){return this.root.layer}getRender(){return this.root.layer.render}mount(t){t.mountNode(this)}_initStyles(){this.styles=Object.assign({},this._getDefaultStyles(),this._getParentStyles(this.options.styles),this.options.styles||{}),this._completeStyles(),this._initRenderStyles()}_initRenderStyles(){const t={...this.styles},e=this._getContainerLayout().contentWidth,i=this._getContainerLayout().contentHeight;r(t.width)?t.width=0:h(t.width)&&(t.width=o(t.width)*e),r(t.height)?t.height=0:h(t.height)&&(t.height=o(t.height)*i),t.width||(t.width=0),t.height||(t.height=0),t.contentWidth=t.width-t.paddingLeft-t.paddingRight-t.marginLeft-t.marginRight-this._getTotalBorderWidth(t),t.contentHeight=t.height-t.paddingTop-t.paddingBottom-t.marginTop-t.marginBottom-this._getTotalBorderHeight(t),this.renderStyles=t,this._InFlexBox()&&this._bindFlexBox()}_getParentStyles(t){let{textAlign:e,lineHeight:i,fontSize:s,color:n,fontFamily:r,alignItems:h,visible:o=!0}=this.parent&&this.parent.renderStyles||{},l={};return e&&(l.textAlign=e),s&&(l.fontSize=s),n&&(l.color=n),r&&(l.fontFamily=r),h&&!t.alignSelf&&(l.alignSelf=h),l.visible=o,l}_completeStyles(){u(this)}_getDefaultStyles(){return s.DEFAULT_STYLES}_getChildrenInFlow(){return this._getChildren().filter(t=>t.isInFlow())}isInFlow(){const{position:t,display:e}=this.styles;return t!==s.POSITION.ABSOLUTE&&t!==s.POSITION.FIXED}isVisible(){return this.renderStyles.visible&&this.visible}_generateRender(){return this}getCtx(){return this.root.layer.ctx}_reflow(){}_initWidthHeight(){const{width:t,height:e,display:i,flex:n,marginLeft:h,marginRight:o,marginTop:l,marginBottom:d}=this.styles;if(r(t)||r(e)){const i=this._measureLayout();r(t)&&(this.renderStyles.contentWidth=i.width),r(e)&&(this.renderStyles.contentHeight=i.height)}this._refreshLayoutWithContent(),this._InFlexBox()?this.line.refreshWidthHeight(this):i===s.DISPLAY.INLINE_BLOCK&&this._bindLine()}_initPosition(){const{contentX:t,contentY:e,contentWidth:i,contentHeight:r}=this._getContainerLayout(),{paddingLeft:l,paddingTop:d,borderLeftWidth:a,borderTopWidth:g,marginLeft:c,marginTop:y}=this.renderStyles;if(this.isInFlow())this._InFlexBox()||this.renderStyles.display===s.DISPLAY.INLINE_BLOCK?this.line.refreshElementPosition(this):(this.x=t,this.y=this._getPreLayout().y+this._getPreLayout().height);else{let{top:s,bottom:l,right:d,left:a,width:g,height:c}=this.renderStyles;h(s)&&(s=o(s)*r),h(l)&&(l=o(l)*r),h(a)&&(a=o(a)*i),h(d)&&(d=o(d)*i),n(s)?this.y=e+s:n(l)&&(this.y=e+r-l-c),n(a)?this.x=t+a:n(d)&&(this.x=t+i-d-g)}this.contentX=this.x+l+a+c,this.contentY=this.y+d+g+y}_InFlexBox(){return!!this.isInFlow()&&(!!this.parent&&(!(!this.parent||this.parent.renderStyles.display!==s.DISPLAY.FLEX)||void 0))}_refreshLayoutWithContent(){this.renderStyles.height=this.renderStyles.contentHeight+this.renderStyles.paddingTop+this.renderStyles.paddingBottom+this.renderStyles.marginTop+this.renderStyles.marginBottom+this._getTotalBorderHeight(),this.renderStyles.width=this.renderStyles.contentWidth+this.renderStyles.paddingLeft+this.renderStyles.paddingRight+this.renderStyles.marginLeft+this.renderStyles.marginRight+this._getTotalBorderWidth()}_refreshContentWithLayout(){this.renderStyles.contentHeight=this.renderStyles.height-this.renderStyles.paddingTop-this.renderStyles.paddingBottom-this.renderStyles.marginTop-this.renderStyles.marginBottom-this._getTotalBorderHeight(),this.renderStyles.contentWidth=this.renderStyles.width-this.renderStyles.paddingLeft-this.renderStyles.paddingRight-this.renderStyles.marginLeft-this.renderStyles.marginRight-this._getTotalBorderWidth()}_getTotalBorderWidth(t=this.renderStyles){return t.borderLeftWidth+t.borderRightWidth}_getTotalBorderHeight(t=this.renderStyles){return t.borderTopWidth+t.borderBottomWidth}_bindLine(){this.pre&&this.pre.line&&this.pre.line.canIEnter(this)?this.pre.line.add(this):(new g).bind(this)}_bindFlexBox(){this.pre&&this.pre.line?this.pre.line.add(this):(new y).bind(this)}_getContainerLayout(){let t=this.parent;return this.styles.position===s.POSITION.FIXED&&(t=this.root),t||(t={renderStyles:{width:this.container.width,height:this.container.height,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0,marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,contentWidth:this.container.width,contentHeight:this.container.height},x:0,y:0,contentX:0,contentY:0}),{width:t.renderStyles.width,height:t.renderStyles.height,x:t.x,y:t.y,paddingTop:t.renderStyles.paddingTop,paddingBottom:t.renderStyles.paddingBottom,paddingLeft:t.renderStyles.paddingLeft,paddingRight:t.renderStyles.paddingRight,marginLeft:t.renderStyles.marginLeft,marginRight:t.renderStyles.marginRight,marginTop:t.renderStyles.marginTop,marginBottom:t.renderStyles.marginBottom,contentX:t.contentX,contentY:t.contentY,contentWidth:t.renderStyles.contentWidth,contentHeight:t.renderStyles.contentHeight}}_getPreLayout(){let t=this.pre;for(;t&&!t.isInFlow();)t=t.pre;return t?{width:t.renderStyles.width,height:t.renderStyles.height,x:t.x,y:t.y}:{width:0,height:0,x:this._getContainerLayout().contentX,y:this._getContainerLayout().contentY}}_measureLayout(){let t=0,e=0;return this._getChildrenInFlow().forEach(i=>{i.line?i.line.start===i&&(i.line.width>t&&(t=i.line.width),e+=i.line.height):i.renderStyles.width>t?(t=i.renderStyles.width,e+=i.renderStyles.height):e+=i.renderStyles.height}),{width:t,height:e}}getElementBy(t,e){let i=[];return l(this,s=>{s.options.attrs[t]===e&&i.push(s)}),i}appendChild(t){return super.appendChild(t),this.getLayer().mountNode(this.root),t}prependChild(t){return super.prependChild(t),this.getLayer().mountNode(this.root),t}removeChild(t){super.removeChild(t),t.removeEvent(),this.getLayer().mountNode(this.root)}append(t){super.append(t),this.getLayer().mountNode(this.root)}prepend(t){super.prepend(t),this.getLayer().mountNode(this.root)}}class m extends f{constructor(t,e){super(t,e),this.type="view"}_getDefaultStyles(){return{...s.DEFAULT_STYLES,display:s.DISPLAY.BLOCK}}}class S extends f{constructor(t,e){super(t,e),this._layout=null,this._lines=[],this.children+="",this.type="text"}_getDefaultStyles(){return{...s.DEFAULT_STYLES,display:s.DISPLAY.INLINE_BLOCK,width:s.WIDTH.AUTO,textAlign:"left"}}_completeStyles(){super._completeStyles()}_completeWidth(){super._completeWidth(),"left"!==this.styles.textAlign&&this.parent&&!r(this.parent.styles.width)&&(this.styles.width="100%")}_measureLayout(){return this._layout=this.getRender().measureText(this,this.children),this._layout.fontHeight=.8*this.renderStyles.fontSize,this._layout.height=this.renderStyles.lineHeight,this._calcLine(),this._layout}_getFont(){const{fontSize:t,fontWeight:e,fontFamily:i}=this.renderStyles;return`${e} ${t}px ${i}`}_calcLine(){if(!this.parent||!this.children)return;const{width:t,height:e}=this._layout,{contentWidth:i}=this.parent.renderStyles,{width:r}=this.parent.styles;if(n(i)&&i>=t||r===s.WIDTH.AUTO)this._lines=[this.children];else{this._lines=[];let t=1,e="",s=null;for(let n=0;ni){if(t>=this.renderStyles.maxLine){e=e.substring(0,e.length-2)+"...";break}this._lines.push(e),e="",t+=1}e+=this.children[n]}this._layout.width=i,this._lines.push(e),this._layout.height=this._lines.length*this.renderStyles.lineHeight}}}class _ extends m{constructor(t,e){super(t,e),this.type="image",this._imageInfo={width:0,height:0,sx:0,sy:0,swidth:0,sheight:0,dx:0,dy:0,dwidth:0,dheight:0},this.debugColor="blue",this._image=null,this._layout=null}init(){super.init(),this._loadImage()}_loadImage(){const{mode:t}=this.options.attrs;return new Promise((t,e)=>{this.getRender().getImageInstance(this.options.attrs.src).then(({info:e,image:i})=>{this._imageInfo=e,this._image=i,t(),this._layoutImage(),this.isVisible()&&this.getLayer().onElementChange(this),this.options.on&&this.options.on.load&&this.options.on.load(this)})})}_layoutImage(){const{contentWidth:t,contentHeight:e}=this.renderStyles,{mode:i}=this.options.attrs,{width:s,height:n}=this.styles,{width:h,height:o}=this._imageInfo;let l=t,d=e;!r(s)&&r(n)?(l=t,d=x(l,h,o)):!r(n)&&r(s)?(d=e,l=w(d,h,o)):r(s)&&r(n)?(l=h,d=o):"aspectFill"===i?l/d>h/o?(this._imageInfo.swidth=h,this._imageInfo.sheight=x(h,l,d),this._imageInfo.sx=0,this._imageInfo.sy=(o-this._imageInfo.sheight)/2):(this._imageInfo.sheight=o,this._imageInfo.swidth=w(o,t,e),this._imageInfo.sy=0,this._imageInfo.sx=(h-this._imageInfo.swidth)/2):"aspectFit"===i?l/d>h/o?(this._imageInfo.dwidth=w(e,h,o),this._imageInfo.dheight=e,this._imageInfo.dy=this.contentY,this._imageInfo.dx=(t-this._imageInfo.dwidth)/2+this.contentX):(this._imageInfo.dheight=x(t,h,o),this._imageInfo.dwidth=t,this._imageInfo.dx=this.contentX,this._imageInfo.dy=(e-this._imageInfo.dheight)/2+this.contentY):(l=t,d=e),this._layout={width:l,height:d}}_measureLayout(){return this._layout?this._layout:{width:this.renderStyles.width,height:this.renderStyles.height}}}function w(t,e,i){return t/i*e}function x(t,e,i){return t/e*i}class L{constructor({simulateClick:t=!0}){this.clickTree=new p,this.touchstartTree=new p,this.touchmoveTree=new p,this.touchendTree=new p,this.clickList=[],this.touchstartList=[],this.touchmoveList=[],this.touchendList=[],this.touchStartEvent=null,this.simulateClick=t}clear(){this.clickTree=new p,this.touchstartTree=new p,this.touchmoveTree=new p,this.touchendTree=new p,this.clickList=[],this.touchstartList=[],this.touchmoveList=[],this.touchendList=[]}click(t,e){let i=new C({x:t,y:e,type:"click"});this._emit(i)}touchstart(t,e){let i=new C({x:t,y:e,type:"touchstart"});this.touchStartEvent=i,this._emit(i)}touchmove(t,e){let i=new C({x:t,y:e,type:"touchmove"});this._emit(i)}touchend(t,e){let i=new C({x:t,y:e,type:"touchend"});this._emit(i),this.checkClick(i)}_emit(t){let e=[];switch(t.type){case"click":e=this.clickTree;break;case"touchstart":e=this.touchstartTree;break;case"touchmove":e=this.touchmoveTree;break;case"touchend":e=this.touchendTree}let i=[];l(e,(e,s,n)=>{e.element&&(this.isPointInElement(t.relativeX,t.relativeY,e.element)?(e.runCapture(t),i.unshift(e)):s())});for(let e=0;e=i.x,n=e>=i.y,r=t<=i.x+i.renderStyles.width,h=e<=i.y+i.renderStyles.height;return!!(s&&n&&r&&h)}removeElement(t){this.clickList=this.clickList.filter(e=>(e.element===t&&e.remove(),e.element!==t)),this.touchstartList=this.touchstartList.filter(e=>(e.element===t&&e.remove(),e.element!==t)),this.touchmoveList=this.touchmoveList.filter(e=>(e.element===t&&e.remove(),e.element!==t)),this.touchendList=this.touchendList.filter(e=>(e.element===t&&e.remove(),e.element!==t))}onClick(t,e,i=!1){this.addCallback(t,e,this.clickTree,this.clickList,i)}onTouchStart(t,e,i=!1){this.addCallback(t,e,this.touchstartTree,this.touchstartList,i)}onTouchMove(t,e,i=!1){this.addCallback(t,e,this.touchmoveTree,this.touchmoveList,i)}onTouchEnd(t,e,i=!1){this.addCallback(t,e,this.touchendTree,this.touchendList,i)}addCallback(t,e,i,s,n){let r=null,h=null;for(let t=s.length-1;t>=0;t--){if(e===s[t].element){r=s[t-1],h=s[t];break}if(d(e,(e,i)=>{e===s[t].element&&(r=s[t],i())}),r)break}h||(h=new T(e,t)),n?h.addCapture(t):h.addCallback(t),r?r.appendChild(h):i.appendChild(h),s.push(h)}checkClick(t){if(this.touchStartEvent&&this.simulateClick){let{x:e,y:i}=this.touchStartEvent,{x:s,y:n}=t,r=n*n+s*s-(i*i+e*e);r<5&&r>-5&&this.click(s,n)}}}class C{constructor({x:t,y:e,type:i}){this.x=t,this.y=e,this.relativeX=t,this.relativeY=e,this.type=i,this.cancelBubble=!1,this.currentTarget=null}stopPropagation(){this.cancelBubble=!0}}class T extends p{constructor(t){super(),this.element=t,this.callbackList=[],this.captureList=[]}addCallback(t){this.callbackList.push(t)}addCapture(t){this.captureList.push(t)}runCallback(t){this.callbackList.forEach(e=>e(t))}runCapture(t){this.captureList.forEach(e=>e(t))}}class b{constructor(t){this.layer=t,this.imageBus={}}getCtx(){return this.layer.ctx}getLayer(){return this.layer}_restore(t){this.getCtx().save(),t(),this.getCtx().restore()}_path(t){this.getCtx().beginPath(),t(),this.getCtx().closePath()}paint(t){this.getCtx().save(),this._drawBox(t),this._drawBackground(t),this._drawContent(t),this.afterPaint(t)}afterPaint(t){t.hasChildren()&&"text"!==t.type||this.getCtx().restore(),this._helpParentRestoreCtx(t)}_helpParentRestoreCtx(t){if(t.isVisible()&&(!(e=t).parent||e.next||e.hasChildren())||!t.isVisible()&&t.next)return;var e;let i=t.parent;for(;i&&!i.next;)this.getCtx().restore(),i=i.parent;i&&i.next&&this.getCtx().restore()}_drawBox(t){if(!t.renderStyles.borderColor&&!t.renderStyles.shadowBlur)return;const{contentWidth:e,contentHeight:i,paddingLeft:s,paddingTop:r,borderStyle:h,paddingRight:o,paddingBottom:l,shadowBlur:d,shadowColor:a,backgroundColor:g,shadowOffsetX:c,shadowOffsetY:y,borderLeftWidth:p,borderRightWidth:u,borderTopWidth:f,borderBottomWidth:m}=t.renderStyles,S=Math.PI/2;let _=I(t),w=t.contentX-t.renderStyles.paddingLeft-p/2,x=t.contentY-t.renderStyles.paddingTop-f/2,L=e+s+o+(p+u)/2,C=i+r+l+(f+m)/2;const T=()=>{this.getCtx().moveTo(w,x+_),_&&this.getCtx().arc(w+_,x+_,_,2*S,3*S),this.getCtx().lineTo(w+L-_,x)},b=()=>{_&&this.getCtx().arc(w+L-_,x+_,_,3*S,4*S),this.getCtx().lineTo(w+L,x+C-_)},v=()=>{_&&this.getCtx().arc(w+L-_,x+C-_,_,0,S),this.getCtx().lineTo(w+_,x+C)},W=()=>{_&&this.getCtx().arc(w+_,x+C-_,_,S,2*S),this.getCtx().lineTo(w,x+_)};this.getCtx().lineCap=t.renderStyles.lineCap,this.getCtx().strokeStyle=t.renderStyles.borderColor,h&&"solid"!==h&&(Array.isArray(h)?this.getCtx().setLineDash(h):this.getCtx().setLineDash([5,5]));const k=t=>{this.getCtx().lineWidth=t,this.getCtx().stroke()};a&&d&&this._restore(()=>{this._path(()=>{T(),b(),v(),W()}),n(c)&&(this.getCtx().shadowOffsetX=c),n(y)&&(this.getCtx().shadowOffsetY=y),this.getCtx().shadowBlur=d,this.getCtx().shadowColor=a,this.getCtx().fillStyle=a,this.getCtx().fill()}),this._restore(()=>{this._path(()=>{w=t.contentX-t.renderStyles.paddingLeft-p/2,x=t.contentY-t.renderStyles.paddingTop-f/2,L=e+s+o+(p+u)/2,C=i+r+l+(f+m)/2,t.renderStyles.borderTopWidth&&(T(),k(t.renderStyles.borderTopWidth)),t.renderStyles.borderRightWidth&&(this.getCtx().moveTo(w+L-_,x),b(),k(t.renderStyles.borderRightWidth)),t.renderStyles.borderBottomWidth&&(this.getCtx().moveTo(w+L,x+C-_),v(),k(t.renderStyles.borderBottomWidth)),t.renderStyles.borderLeftWidth&&(this.getCtx().moveTo(w+_,x+C),W(),k(t.renderStyles.borderLeftWidth))})})}_drawBackground(t){const{backgroundColor:e,contentWidth:i,contentHeight:s,paddingLeft:r,paddingRight:h,paddingTop:o,paddingBottom:l,opacity:d}=t.renderStyles,a=this.getCtx();n(d)&&(a.globalAlpha=d),this._clip(t),e&&(this.getCtx().fillStyle=this._parseBackground(e,t),this.getCtx().fillRect(t.contentX-r,t.contentY-o,i+r+h,s+o+l)),this.getLayer().options&&this.getLayer().options.debug&&(this.getCtx().strokeStyle="green",this.getCtx().strokeRect(t.contentX,t.contentY,t.renderStyles.contentWidth,t.renderStyles.contentHeight))}_clip(t){if("hidden"!==t.renderStyles.overflow)return;const{contentWidth:e,contentHeight:i,paddingLeft:s,paddingTop:n,paddingRight:r,paddingBottom:h,shadowBlur:o,shadowColor:l,backgroundColor:d,borderLeftWidth:a,borderRightWidth:g,borderTopWidth:c,borderBottomWidth:y}=t.renderStyles,p=Math.PI/2;let u=I(t),f=t.contentX-t.renderStyles.paddingLeft-a,m=t.contentY-t.renderStyles.paddingTop-c,S=e+s+r+a+g,_=i+n+h+c+y;const w=()=>{this.getCtx().moveTo(f,m+u),u&&this.getCtx().arc(f+u,m+u,u,2*p,3*p),this.getCtx().lineTo(f+S-u,m)},x=()=>{u&&this.getCtx().arc(f+S-u,m+u,u,3*p,4*p),this.getCtx().lineTo(f+S,m+_-u)},L=()=>{u&&this.getCtx().arc(f+S-u,m+_-u,u,0,p),this.getCtx().lineTo(f+u,m+_)},C=()=>{u&&this.getCtx().arc(f+u,m+_-u,u,p,2*p),this.getCtx().lineTo(f,m+u)};this._path(()=>{w(),x(),L(),C()}),this.getCtx().clip()}_parseBackground(t,e){if(Array.isArray(t)){const i=this.getCtx().createLinearGradient(e.contentX,e.contentY,e.renderStyles.contentWidth,e.renderStyles.contentHeight);for(let e=0;e{l=0===i&&h?o+h:o,this.getCtx().fillText(e,l,t.contentY+(n+t._layout.fontHeight)/2+n*i)})}measureText(t,e){let i=0;return this._restore(()=>{this.getCtx().font=t._getFont();const{width:s}=this.getCtx().measureText(e);i=s}),{width:i}}_drawImage(t){if(!t._image)return;const{contentWidth:e,contentHeight:i}=t.renderStyles,{mode:s}=t.options.attrs,{sx:n,sy:r,swidth:h,sheight:o,dx:l,dy:d,dwidth:a,dheight:g,width:c,height:y}=t._imageInfo;"aspectFill"===s?this.getCtx().drawImage(t._image,n,r,h,o,t.contentX,t.contentY,e,i):"aspectFit"===s?this.getCtx().drawImage(t._image,0,0,c,y,l,d,a,g):this.getCtx().drawImage(t._image,t.contentX,t.contentY,e,i)}_drawScroll(t){const{direction:e}=t.renderStyles;"y"===e?this.getCtx().translate(0,t.currentScroll):this.getCtx().translate(t.currentScroll,0)}getImageInstance(t){let e=null;if(this.imageBus[t])e=this.imageBus[t];else{if(a()){if(!this.getLayer().options.canvas)throw Error("微信小程序中需要在options中设置canvas以创建图片");e=this.getLayer().options.canvas.createImage()}else e=new Image;t&&(this.imageBus[t]=new Promise((t,i)=>{e.onload=function(i){t({image:e,info:{width:i.target.width,height:i.target.height}})}})),e.src=t}return this.imageBus[t]}render(t){t.parent?this.getCtx().clearRect(t.x,t.y,t.renderStyles.width,t.renderStyles.height):this.getCtx().clearRect(0,0,this.getLayer().options.width,this.getLayer().options.height),l(t,(t,e,i)=>{t.isVisible()?this.paint(t):(i(),this._helpParentRestoreCtx(t))}),a()&&this.getCtx().draw&&this.getCtx().draw()}}function I(t){const{contentWidth:e,contentHeight:i}=t.renderStyles;let{borderRadius:s}=t.renderStyles;return 2*s>e&&(s=e/2),2*s>i&&(s=i/2),s<0&&(s=0),s}class v{constructor(t,e){this.ctx=t,this.node=null,this.isAnimate=!1,this.nodeList=[],this.p2cList=[],this.c2pList=[],this.renderList=[],this.options=e,this.eventManager=new L(e),this.render=new b(this)}update(t,e){this.ctx=t,this.options=e,this.options.renderStyles=e,this.node.container=this.options}mountNode(t){this.node=t,this.node.root=this.node,this.node.layer=this,this.node.container=this.options,this.eventManager.clear(),this.initRender()}initRender(){p.connectChildren(this.node),this.p2cList=this.getP2CList(this.node),this.c2pList=function(t){var e=[];if(null!=t){var i=[];for(i.unshift(t);0!=i.length;){var s=i.shift();e.push(s._generateRender());for(var n=s._getChildren(),r=n.length-1;r>=0;r--)i.push(n[r]._generateRender())}}return e}(this.node).reverse(),this.initNode(),this.flow(),this.repaint()}getP2CList(t){return function(t){var e=[];if(null!=t){var i=[];for(i.unshift(t);0!=i.length;){var s=i.shift();e.push(s._generateRender());for(var n=s._getChildren(),r=0;r{t._initWidthHeight()});for(let t=0;tthis._animate())}animate(){this.isAnimate=!0,window.requestAnimationFrame(()=>this._animate())}stopAnimate(){this.isAnimate=!1}}class W extends m{constructor(t,e){return super(t,e),t.styles.overflow="hidden",this.type="scroll-view",this._scrollView=new m(t,[this]),this._scrollView.type="scroll-view-container",this.visibleIndex=null,this._scrollView}_getDefaultStyles(){return{...s.DEFAULT_STYLES,direction:"y"}}beforePaint(){this.initChildrenVisible()}init(){super.init(),this.addEventListener();const{height:t,width:e,direction:i}=this.styles;"y"===i?r(t)?console.error("scroll-view 必须设置明确的高度"):(this.styles.height="auto",this.renderStyles.height="auto"):"x"===i&&(r(e)?console.error("scroll-view 必须设置明确的宽度"):(this.styles.width="auto",this.renderStyles.width="auto"))}addEventListener(){this.currentScroll=0;let t=this.styles.direction,e=0,i=0,s=!1,n=0,r=0,h=null,o=1;this.getLayer().eventManager.onClick(e=>{"y"===t?e.relativeY-=this.currentScroll:e.relativeX-=this.currentScroll},this._scrollView,!0),this.getLayer().eventManager.onTouchStart(n=>{n.stopPropagation(),e=n[t],i=e,s=!0,clearInterval(h)},this._scrollView),this.getLayer().eventManager.onTouchMove(r=>{s&&(r.stopPropagation(),n=r[t]-e,this.scrollBy(n)&&(i=e,e=r[t]))},this._scrollView),this.getLayer().eventManager.onTouchEnd(e=>{s&&(s=!1,r=1.5*(e[t]-i),o=.02*-r,clearInterval(h),h=setInterval(()=>{this.scrollBy(r)||clearInterval(h),r+=o,r*r<=.05&&(r=0,clearInterval(h))},17))},this._scrollView)}calcScrollBound(t){const{contentWidth:e,contentHeight:i}=this._scrollView.renderStyles,{width:s,height:n,direction:r}=this.renderStyles;if("y"===r){if(i-this.currentScroll-t>n)return!1;if(this.currentScroll+t>0)return!1}else{if(e-this.currentScroll-t>s)return!1;if(this.currentScroll+t>0)return!1}return!0}scrollBy(t){return!!this.calcScrollBound(t)&&(this.currentScroll+=t,this.calcChildrenVisible(),this.getLayer().repaint(),!0)}scrollTo(t){}initChildrenVisible(){const t=this._getChildrenInFlow();for(let e=0;e=0;e--){if(this.isElementInViewport(t[e])){this.visibleIndex[1]=e;break}t[e].visible=!1}for(let e=this.visibleIndex[0];e<=this.visibleIndex[1];e++)t[e].visible=!0}calcChildrenVisible(){const t=this._getChildrenInFlow(),e=[this.visibleIndex[0]-1,this.visibleIndex[0],this.visibleIndex[0]+1],i=[this.visibleIndex[1]-1,this.visibleIndex[1],this.visibleIndex[1]+1];let s=[];for(let i=e[0];i<=e[2];i++)t[i]&&(this.isElementInViewport(t[i])?(t[i].visible=!0,s.length||s.push(i)):t[i].visible=!1);for(let e=i[2];e>=i[0];e--)t[e]&&(this.isElementInViewport(t[e])?(t[e].visible=!0,1===s.length&&s.push(e)):t[e].visible=!1);this.visibleIndex=s}isElementInViewport(t){return"y"===this.styles.direction?t.y+t.renderStyles.height+this.currentScroll>this._scrollView.contentY&&t.y+this.currentScrollthis._scrollView.contentX&&t.x+this.currentScrollnew m(t,e)),E("text",(t,e)=>new S(t,e)),E("image",(t,e)=>new _(t,e)),E("scroll-view",(t,e)=>new W(t,e)),E("scrollview",(t,e)=>new W(t,e));return{createLayer:function(t,e){return new v(t,e)},createElement:function(t){return t((function t(e,i={},s=[]){let n=null,r=s;if(!k[e])throw Error(`Unknown tag name [${e}] !`);return n=k[e](i,r,t),n}))},component:E,View:m,Text:S,Image:_,Layer:v,ScrollView:W}})); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).easyCanvas=e()}(this,(function(){"use strict";const t={BLOCK:"block",INLINE_BLOCK:"inline-block",INLINE:"inline",FLEX:"flex",NONE:"none"},e={AUTO:"auto",OUTER:"100%"},i={ROW:"row",COLUMN:"column"};var s={DISPLAY:t,WIDTH:e,POSITION:{ABSOLUTE:"absolute",FIXED:"fixed",RELATIVE:"relative",STATIC:"static"},DEFAULT_STYLES:{display:t.BLOCK,fontSize:14,fontWeight:400,fontFamily:"Microsoft Yahei",color:"#000",paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0,marginTop:0,marginBottom:0,marginLeft:0,marginRight:0,height:e.AUTO,borderRadius:0,lineCap:"square",flexDirection:i.ROW,verticalAlign:"middle",textAlign:"left",justifyContent:"flex-start",alignItems:"flex-start",whiteSpace:"normal",zIndex:1,visible:!0},TEXT_ALIGN:{LEFT:"left",RIGHT:"right",CENTER:"center"},FLEX_DIRECTION:i};function n(t){return"number"==typeof t}function r(t){return"auto"===t}function h(t){if("string"==typeof t)return t.match("%")}function o(t){let e=parseInt(t.replace("%",""));return isNaN(e)||e<0?0:e/100}function l(t,e){let i=!1,s=!1;const n=()=>i=!0,r=()=>s=!0;if(null!=t){var h=[];for(h.push(t);0!=h.length;){var o=h.pop();if(e(o,n,r),s)s=!1;else for(var l=o._getChildren(),d=l.length-1;d>=0;d--)i?i=!1:h.push(l[d])}}}function d(t,e){let i=t,s=!1;const n=()=>{s=!0};for(;i.parent&&(e(i.parent,n),!s);)i=i.parent}function a(){return!window}class g{constructor(){this.width=0,this.height=0,this.contentWidth=0,this.y=0,this.doorClosed=!1,this.outerWidth=0,this.container=null,this.elements=[],this.start=null,this.end=null,this.offsetX=0,this.id=Math.random()}bind(t){this.container=t.parent,this.initHeight(t),this.outerWidth=t.parent&&r(t.parent.styles.width)?1/0:t.parent.renderStyles.contentWidth,this.start=t,this.add(t)}initHeight(t){this.height=t.parent&&t.parent.renderStyles.lineHeight||0}initLayout(t){this.right=t._getContainerLayout().contentX,this.x=t._getContainerLayout().contentX,this.y=this.getPreLine(t).y}refreshElementPosition(t){this.start===t&&this.initLayout(t),t.x=this.right+this.offsetX,t.y=this.y+this.getOffsetY(t),this.right+=t.renderStyles.width}getOffsetY(t){return"bottom"===t.renderStyles.verticalAlign?this.height-t.renderStyles.height:"middle"===t.renderStyles.verticalAlign?(this.height-t.renderStyles.height)/2:0}add(t){this.elements.push(t),t.line=this,this.refreshWidthHeight(t),t.next||this.closeLine()}refreshWidthHeight(t){t.renderStyles.height>this.height&&(this.height=t.renderStyles.height),this.width+=t.renderStyles.width}canIEnter(t){return!(t.renderStyles.width+this.width>this.outerWidth)||(this.closeLine(),!1)}closeLine(){this.end=this.elements[this.elements.length-1],this.refreshXAlign()}getPreLine(t){return t.pre?t.pre.line?{y:t.pre.line.height+t.pre.line.y,x:t.pre.line.x}:{y:t._getPreLayout().y+t._getPreLayout().height,x:t._getPreLayout().x}:{y:t._getContainerLayout().contentY,x:t._getContainerLayout().contentX}}refreshXAlign(){if(this.outerWidth>5e3)return;if(!this.end.parent)return;let t=this.outerWidth-this.width;"center"===this.end.parent.renderStyles.textAlign?t/=2:"left"===this.end.parent.renderStyles.textAlign&&(t=0),this.offsetX=t}}const c={[s.FLEX_DIRECTION.ROW]:{width:"width",contentWidth:"contentWidth",x:"x",y:"y",contentX:"contentX",height:"height",contentHeight:"contentHeight"},[s.FLEX_DIRECTION.COLUMN]:{width:"height",contentWidth:"contentHeight",x:"y",y:"x",contentX:"contentY",height:"width",contentHeight:"contentWidth"}};class y extends g{constructor(){super(),this.exactValue=0,this.flexTotal=0,this.key=null}closeLine(){super.closeLine(),this.calcFlex()}bind(t){this.container=t.parent,t.parent&&(this.key=c[t.parent.renderStyles.flexDirection]),this.initHeight(t),this.outerWidth=t.parent&&r(t.parent.styles[this.key.width])?1/0:t.parent.renderStyles[this.key.contentWidth],this.start=t,this.add(t)}add(t){n(t.styles.flex)?this.flexTotal+=t.styles.flex:n(t.styles[this.key.width])&&(this.exactValue+=t.styles[this.key.width]),super.add(t)}initHeight(){this[this.key.height]=0}refreshWidthHeight(t){t.renderStyles[this.key.height]>this[this.key.height]&&(this[this.key.height]=t.renderStyles[this.key.height]),this[this.key.width]+=t.renderStyles[this.key.width]}initLayout(t){this.right=t._getContainerLayout()[this.key.contentX],this[this.key.x]=t._getContainerLayout()[this.key.contentX],this[this.key.y]=this.getPreLine(t)[this.key.y]}refreshElementPosition(t){this.start===t&&this.initLayout(t),t[this.key.x]=this.right+this.offsetX,t[this.key.y]=this[this.key.y]+this.getOffsetY(t),this.right+=t.renderStyles[this.key.width]}calcFlex(){const{[this.key.contentWidth]:t}=this.container.renderStyles;this.elements.forEach(e=>{n(e.styles.flex)&&(e.renderStyles[this.key.width]=e.styles.flex/this.flexTotal*(t-this.exactValue),e._refreshContentWithLayout())})}refreshXAlign(){if(!this.end.parent)return;let t=this.outerWidth-this[this.key.width];"center"===this.end.parent.renderStyles.justifyContent?t/=2:"flex-start"===this.end.parent.renderStyles.justifyContent&&(t=0),this.offsetX=t}getOffsetY(t){return"flex-end"===t.renderStyles.alignSelf?this.container.renderStyles[this.key.contentHeight]-t.renderStyles[this.key.height]:"center"===t.renderStyles.alignSelf?(this.container.renderStyles[this.key.contentHeight]-t.renderStyles[this.key.height])/2:0}}class p{static connectChildren(t){t.hasChildren()&&t._getChildren().map((e,i)=>{e._setParent(t),e._setSibling(t._getChildren()[i-1],t._getChildren()[i+1]),p.connectChildren(e)})}constructor(t){this.children=t||[],this.parent=null,this.root=null,this.pre=null,this.next=null}hasChildren(){return!(!Array.isArray(this.children)||!this.children.length)}_getChildren(){return this.hasChildren()?this.children:[]}_setParent(t){this.parent=t,this.root=t.root}_setSibling(t,e){this.pre=t||null,this.next=e||null}appendChild(t){if(!t instanceof p)throw Error("Unknown treeNode type");const e=this._getChildren()[this._getChildren().length-1];this.children.push(t),t._setParent(this),t._setSibling(e,null)}prependChild(t){if(!t instanceof p)throw Error("Unknown treeNode type");const e=this._getChildren()[0];this.children.unshift(t),t._setParent(this),t._setSibling(null,e)}removeChild(t){if(!t instanceof p)throw Error("Unknown treeNode type");const e=this._getChildren().indexOf(t);if(e<0)throw Error("treeNode must be the child of parent");const i=this._getChildren()[e-1],s=this._getChildren()[e+1];i&&i._setSibling(i.pre,s),s&&s._setSibling(i,s.next),this.children.splice(e,1)}remove(){if(!this.parent)throw Error("Can not remove root node");this.parent.removeChild(this)}append(t){if(!t instanceof p)throw Error("Unknown treeNode type");if(!this.parent)throw Error("Can not add treeNode to root level!");let e=[];t._setParent(this.parent),this.parent.children.forEach((i,s)=>{e.push(i),i===this&&(t._setSibling(i,this.parent.children[s+1]),e.push(t))}),this.parent.children=e}prepend(t){if(!t instanceof p)throw Error("Unknown treeNode type");if(!this.parent)throw Error("Can not add treeNode to root level!");let e=[];t._setParent(this.parent);for(let i=this.parent.children.length-1;i>=0;i--)e.unshift(this.parent.children[i]),this.parent.children[i]===this&&(t._setSibling(this.parent.children[i-1],this.parent.children[i]),e.unshift(t));this.parent.children=e}}function u(t){!function(t){t.parent&&t.parent.styles.display===s.DISPLAY.FLEX&&(t.styles.flex?"column"===t.parent.styles.flexDirection&&n(t.styles.flex)?t.styles.height=0:"row"===t.parent.styles.flexDirection&&n(t.styles.flex)&&(t.styles.width=0):n(t.styles.height)||n(t.styles.width)||(t.styles.flex=1))}(t),function(t){t.styles.width||(t.styles.display!==s.DISPLAY.INLINE_BLOCK&&t.styles.display!==s.DISPLAY.INLINE&&t.isInFlow()?t.styles.display===s.DISPLAY.BLOCK||t.styles.display===s.DISPLAY.FLEX?t.styles.width=s.WIDTH.OUTER:t.styles.width=0:t.styles.width=s.WIDTH.AUTO);h(t.styles.width)&&t.parent&&r(t.parent.styles.width)&&(t.styles.width=s.WIDTH.AUTO);h(t.styles.height)&&t.parent&&r(t.parent.styles.height)&&(t.styles.height=s.WIDTH.AUTO)}(t),function(t){let{borderWidth:e,borderLeftWidth:i,borderRightWidth:s,borderBottomWidth:n,borderTopWidth:r,borderRadius:h}=t.styles;e||(t.styles.borderWidth=0,e=0);Array.isArray(e)?(t.styles.borderTopWidth=e[0],t.styles.borderRightWidth=e[1],t.styles.borderBottomWidth=e[2],t.styles.borderLeftWidth=e[3]):(i||(t.styles.borderLeftWidth=e),s||(t.styles.borderRightWidth=e),n||(t.styles.borderBottomWidth=e),r||(t.styles.borderTopWidth=e));h&&(t.styles.overflow="hidden")}(t),function(t){t.styles.fontSize&&!t.styles.lineHeight&&(t.styles.lineHeight=1.4*t.styles.fontSize)}(t),function(t){t.styles.padding&&(n(t.styles.padding)?(t.styles.paddingLeft=t.styles.padding,t.styles.paddingBottom=t.styles.padding,t.styles.paddingRight=t.styles.padding,t.styles.paddingTop=t.styles.padding):Array.isArray(t.styles.padding)&&(2===t.styles.padding.length?(t.styles.paddingLeft=t.styles.paddingRight=t.styles.padding[1],t.styles.paddingBottom=t.styles.paddingTop=t.styles.padding[0]):4===t.styles.padding.length&&(t.styles.paddingLeft=t.styles.padding[3],t.styles.paddingBottom=t.styles.padding[2],t.styles.paddingRight=t.styles.padding[1],t.styles.paddingTop=t.styles.padding[0])));n(t.styles.margin)?(t.styles.marginLeft=t.styles.margin,t.styles.marginBottom=t.styles.margin,t.styles.marginRight=t.styles.margin,t.styles.marginTop=t.styles.margin):Array.isArray(t.styles.margin)&&(2===t.styles.margin.length?(t.styles.marginLeft=t.styles.marginRight=t.styles.margin[1],t.styles.marginBottom=t.styles.marginTop=t.styles.margin[0]):4===t.styles.margin.length&&(t.styles.marginLeft=t.styles.margin[3],t.styles.marginBottom=t.styles.margin[2],t.styles.marginRight=t.styles.margin[1],t.styles.marginTop=t.styles.margin[0]))}(t)}class f extends p{constructor(t,e){super(e),this.options=Object.assign({attrs:{},styles:{},on:{}},t),this.styles=null,this.renderStyles=null,this.x=0,this.y=0,this.render=null,this.container=null,this.visible=!0}init(){this._initStyles(),this.initEvent()}initEvent(){const{click:t}=this.options.on;if(t){const{click:t}=this.options.on;this.getLayer().eventManager.onClick(t,this)}}removeEvent(){this.getLayer().eventManager.removeElement(this)}getLayer(){return this.root.layer}getRender(){return this.root.layer.render}mount(t){t.mountNode(this)}_initStyles(){this.styles=Object.assign({},this._getDefaultStyles(),this._getParentStyles(this.options.styles),this.options.styles||{}),this._completeStyles(),this._initRenderStyles()}_initRenderStyles(){const t={...this.styles},e=this._getContainerLayout().contentWidth,i=this._getContainerLayout().contentHeight;r(t.width)?t.width=0:h(t.width)&&(t.width=o(t.width)*e),r(t.height)?t.height=0:h(t.height)&&(t.height=o(t.height)*i),t.width||(t.width=0),t.height||(t.height=0),t.contentWidth=t.width-t.paddingLeft-t.paddingRight-t.marginLeft-t.marginRight-this._getTotalBorderWidth(t),t.contentHeight=t.height-t.paddingTop-t.paddingBottom-t.marginTop-t.marginBottom-this._getTotalBorderHeight(t),this.renderStyles=t,this._InFlexBox()&&this._bindFlexBox()}_getParentStyles(t){let{textAlign:e,lineHeight:i,fontSize:s,color:n,fontFamily:r,alignItems:h,visible:o=!0}=this.parent&&this.parent.renderStyles||{},l={};return e&&(l.textAlign=e),s&&(l.fontSize=s),n&&(l.color=n),r&&(l.fontFamily=r),h&&!t.alignSelf&&(l.alignSelf=h),l.visible=o,l}_completeStyles(){u(this)}_getDefaultStyles(){return s.DEFAULT_STYLES}_getChildrenInFlow(){return this._getChildren().filter(t=>t.isInFlow())}isInFlow(){const{position:t,display:e}=this.styles;return t!==s.POSITION.ABSOLUTE&&t!==s.POSITION.FIXED}isVisible(){return this.renderStyles.visible&&this.visible}_generateRender(){return this}getCtx(){return this.root.layer.ctx}_reflow(){}_initWidthHeight(){const{width:t,height:e,display:i,flex:n,marginLeft:h,marginRight:o,marginTop:l,marginBottom:d}=this.styles;if(r(t)||r(e)){const i=this._measureLayout();r(t)&&(this.renderStyles.contentWidth=i.width),r(e)&&(this.renderStyles.contentHeight=i.height)}this._refreshLayoutWithContent(),this._InFlexBox()?this.line.refreshWidthHeight(this):i===s.DISPLAY.INLINE_BLOCK&&this._bindLine()}_initPosition(){const{contentX:t,contentY:e,contentWidth:i,contentHeight:r}=this._getContainerLayout(),{paddingLeft:l,paddingTop:d,borderLeftWidth:a,borderTopWidth:g,marginLeft:c,marginTop:y}=this.renderStyles;if(this.isInFlow())this._InFlexBox()||this.renderStyles.display===s.DISPLAY.INLINE_BLOCK?this.line.refreshElementPosition(this):(this.x=t,this.y=this._getPreLayout().y+this._getPreLayout().height);else{let{top:s,bottom:l,right:d,left:a,width:g,height:c}=this.renderStyles;h(s)&&(s=o(s)*r),h(l)&&(l=o(l)*r),h(a)&&(a=o(a)*i),h(d)&&(d=o(d)*i),n(s)?this.y=e+s:n(l)&&(this.y=e+r-l-c),n(a)?this.x=t+a:n(d)&&(this.x=t+i-d-g)}this.contentX=this.x+l+a+c,this.contentY=this.y+d+g+y}_InFlexBox(){return!!this.isInFlow()&&(!!this.parent&&(!(!this.parent||this.parent.renderStyles.display!==s.DISPLAY.FLEX)||void 0))}_refreshLayoutWithContent(){this.renderStyles.height=this.renderStyles.contentHeight+this.renderStyles.paddingTop+this.renderStyles.paddingBottom+this.renderStyles.marginTop+this.renderStyles.marginBottom+this._getTotalBorderHeight(),this.renderStyles.width=this.renderStyles.contentWidth+this.renderStyles.paddingLeft+this.renderStyles.paddingRight+this.renderStyles.marginLeft+this.renderStyles.marginRight+this._getTotalBorderWidth()}_refreshContentWithLayout(){this.renderStyles.contentHeight=this.renderStyles.height-this.renderStyles.paddingTop-this.renderStyles.paddingBottom-this.renderStyles.marginTop-this.renderStyles.marginBottom-this._getTotalBorderHeight(),this.renderStyles.contentWidth=this.renderStyles.width-this.renderStyles.paddingLeft-this.renderStyles.paddingRight-this.renderStyles.marginLeft-this.renderStyles.marginRight-this._getTotalBorderWidth()}_getTotalBorderWidth(t=this.renderStyles){return t.borderLeftWidth+t.borderRightWidth}_getTotalBorderHeight(t=this.renderStyles){return t.borderTopWidth+t.borderBottomWidth}_bindLine(){this.pre&&this.pre.line&&this.pre.line.canIEnter(this)?this.pre.line.add(this):(new g).bind(this)}_bindFlexBox(){this.pre&&this.pre.line?this.pre.line.add(this):(new y).bind(this)}_getContainerLayout(){let t=this.parent;return this.styles.position===s.POSITION.FIXED&&(t=this.root),t||(t={renderStyles:{width:this.container.width,height:this.container.height,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0,marginLeft:0,marginRight:0,marginTop:0,marginBottom:0,contentWidth:this.container.width,contentHeight:this.container.height},x:0,y:0,contentX:0,contentY:0}),{width:t.renderStyles.width,height:t.renderStyles.height,x:t.x,y:t.y,paddingTop:t.renderStyles.paddingTop,paddingBottom:t.renderStyles.paddingBottom,paddingLeft:t.renderStyles.paddingLeft,paddingRight:t.renderStyles.paddingRight,marginLeft:t.renderStyles.marginLeft,marginRight:t.renderStyles.marginRight,marginTop:t.renderStyles.marginTop,marginBottom:t.renderStyles.marginBottom,contentX:t.contentX,contentY:t.contentY,contentWidth:t.renderStyles.contentWidth,contentHeight:t.renderStyles.contentHeight}}_getPreLayout(){let t=this.pre;for(;t&&!t.isInFlow();)t=t.pre;return t?{width:t.renderStyles.width,height:t.renderStyles.height,x:t.x,y:t.y}:{width:0,height:0,x:this._getContainerLayout().contentX,y:this._getContainerLayout().contentY}}_measureLayout(){let t=0,e=0;return this._getChildrenInFlow().forEach(i=>{i.line?i.line.start===i&&(i.line.width>t&&(t=i.line.width),e+=i.line.height):i.renderStyles.width>t?(t=i.renderStyles.width,e+=i.renderStyles.height):e+=i.renderStyles.height}),{width:t,height:e}}getElementBy(t,e){let i=[];return l(this,s=>{s.options.attrs[t]===e&&i.push(s)}),i}appendChild(t){return super.appendChild(t),this.getLayer().mountNode(this.root),t}prependChild(t){return super.prependChild(t),this.getLayer().mountNode(this.root),t}removeChild(t){super.removeChild(t),t.removeEvent(),this.getLayer().mountNode(this.root)}append(t){super.append(t),this.getLayer().mountNode(this.root)}prepend(t){super.prepend(t),this.getLayer().mountNode(this.root)}}class m extends f{constructor(t,e){super(t,e),this.type="view"}_getDefaultStyles(){return{...s.DEFAULT_STYLES,display:s.DISPLAY.BLOCK}}}class S extends f{constructor(t,e){super(t,e),this._layout=null,this._lines=[],this.children+="",this.type="text"}_getDefaultStyles(){return{...s.DEFAULT_STYLES,display:s.DISPLAY.INLINE_BLOCK,width:s.WIDTH.AUTO,textAlign:"left"}}_measureLayout(){return this._layout=this.getRender().measureText(this,this.children),this._layout.fontHeight=.8*this.renderStyles.fontSize,this._layout.height=this.renderStyles.lineHeight,this._calcLine(),this._layout}_getFont(){const{fontSize:t,fontWeight:e,fontFamily:i}=this.renderStyles;return`${e} ${t}px ${i}`}_calcLine(){if(!this.parent||!this.children)return;const{width:t,height:e}=this._layout;let{contentWidth:i}=this.parent.renderStyles;const{width:h}=this.parent.styles;if(r(this.styles.width)||(i=this.renderStyles.width),n(i)&&i>=t||h===s.WIDTH.AUTO)this._lines=[this.children];else{this._lines=[];let t=1,e="",s=null;for(let n=0;ni){if(t>=this.renderStyles.maxLine){e=e.substring(0,e.length-2)+"...";break}this._lines.push(e),e="",t+=1}e+=this.children[n]}this._layout.width=i,this._lines.push(e),this._layout.height=this._lines.length*this.renderStyles.lineHeight}}}class _ extends m{constructor(t,e){super(t,e),this.type="image",this._imageInfo={width:0,height:0,sx:0,sy:0,swidth:0,sheight:0,dx:0,dy:0,dwidth:0,dheight:0},this.debugColor="blue",this._image=null,this._layout=null}init(){super.init(),this._loadImage()}_loadImage(){const{mode:t}=this.options.attrs;return new Promise((t,e)=>{this.getRender().getImageInstance(this.options.attrs.src).then(({info:e,image:i})=>{this._imageInfo=e,this._image=i,t(),this._layoutImage(),this.isVisible()&&this.getLayer().onElementChange(this),this.options.on&&this.options.on.load&&this.options.on.load(this)})})}_layoutImage(){const{contentWidth:t,contentHeight:e}=this.renderStyles,{mode:i}=this.options.attrs,{width:s,height:n}=this.styles,{width:h,height:o}=this._imageInfo;let l=t,d=e;!r(s)&&r(n)?(l=t,d=x(l,h,o)):!r(n)&&r(s)?(d=e,l=w(d,h,o)):r(s)&&r(n)?(l=h,d=o):"aspectFill"===i?l/d>h/o?(this._imageInfo.swidth=h,this._imageInfo.sheight=x(h,l,d),this._imageInfo.sx=0,this._imageInfo.sy=(o-this._imageInfo.sheight)/2):(this._imageInfo.sheight=o,this._imageInfo.swidth=w(o,t,e),this._imageInfo.sy=0,this._imageInfo.sx=(h-this._imageInfo.swidth)/2):"aspectFit"===i?l/d>h/o?(this._imageInfo.dwidth=w(e,h,o),this._imageInfo.dheight=e,this._imageInfo.dy=this.contentY,this._imageInfo.dx=(t-this._imageInfo.dwidth)/2+this.contentX):(this._imageInfo.dheight=x(t,h,o),this._imageInfo.dwidth=t,this._imageInfo.dx=this.contentX,this._imageInfo.dy=(e-this._imageInfo.dheight)/2+this.contentY):(l=t,d=e),this._layout={width:l,height:d}}_measureLayout(){return this._layout?this._layout:{width:this.renderStyles.width,height:this.renderStyles.height}}}function w(t,e,i){return t/i*e}function x(t,e,i){return t/e*i}class L{constructor({simulateClick:t=!0}){this.clickTree=new p,this.touchstartTree=new p,this.touchmoveTree=new p,this.touchendTree=new p,this.clickList=[],this.touchstartList=[],this.touchmoveList=[],this.touchendList=[],this.touchStartEvent=null,this.simulateClick=t}clear(){this.clickTree=new p,this.touchstartTree=new p,this.touchmoveTree=new p,this.touchendTree=new p,this.clickList=[],this.touchstartList=[],this.touchmoveList=[],this.touchendList=[]}click(t,e){let i=new C({x:t,y:e,type:"click"});this._emit(i)}touchstart(t,e){let i=new C({x:t,y:e,type:"touchstart"});this.touchStartEvent=i,this._emit(i)}touchmove(t,e){let i=new C({x:t,y:e,type:"touchmove"});this._emit(i)}touchend(t,e){let i=new C({x:t,y:e,type:"touchend"});this._emit(i),this.checkClick(i)}_emit(t){let e=[];switch(t.type){case"click":e=this.clickTree;break;case"touchstart":e=this.touchstartTree;break;case"touchmove":e=this.touchmoveTree;break;case"touchend":e=this.touchendTree}let i=[];l(e,(e,s,n)=>{e.element&&(this.isPointInElement(t.relativeX,t.relativeY,e.element)?(e.runCapture(t),i.unshift(e)):s())});for(let e=0;e=i.x,n=e>=i.y,r=t<=i.x+i.renderStyles.width,h=e<=i.y+i.renderStyles.height;return!!(s&&n&&r&&h)}removeElement(t){this.clickList=this.clickList.filter(e=>(e.element===t&&e.remove(),e.element!==t)),this.touchstartList=this.touchstartList.filter(e=>(e.element===t&&e.remove(),e.element!==t)),this.touchmoveList=this.touchmoveList.filter(e=>(e.element===t&&e.remove(),e.element!==t)),this.touchendList=this.touchendList.filter(e=>(e.element===t&&e.remove(),e.element!==t))}onClick(t,e,i=!1){this.addCallback(t,e,this.clickTree,this.clickList,i)}onTouchStart(t,e,i=!1){this.addCallback(t,e,this.touchstartTree,this.touchstartList,i)}onTouchMove(t,e,i=!1){this.addCallback(t,e,this.touchmoveTree,this.touchmoveList,i)}onTouchEnd(t,e,i=!1){this.addCallback(t,e,this.touchendTree,this.touchendList,i)}addCallback(t,e,i,s,n){let r=null,h=null;for(let t=s.length-1;t>=0;t--){if(e===s[t].element){r=s[t-1],h=s[t];break}if(d(e,(e,i)=>{e===s[t].element&&(r=s[t],i())}),r)break}h||(h=new T(e,t)),n?h.addCapture(t):h.addCallback(t),r?r.appendChild(h):i.appendChild(h),s.push(h)}checkClick(t){if(this.touchStartEvent&&this.simulateClick){let{x:e,y:i}=this.touchStartEvent,{x:s,y:n}=t,r=n*n+s*s-(i*i+e*e);r<5&&r>-5&&this.click(s,n)}}}class C{constructor({x:t,y:e,type:i}){this.x=t,this.y=e,this.relativeX=t,this.relativeY=e,this.type=i,this.cancelBubble=!1,this.currentTarget=null}stopPropagation(){this.cancelBubble=!0}}class T extends p{constructor(t){super(),this.element=t,this.callbackList=[],this.captureList=[]}addCallback(t){this.callbackList.push(t)}addCapture(t){this.captureList.push(t)}runCallback(t){this.callbackList.forEach(e=>e(t))}runCapture(t){this.captureList.forEach(e=>e(t))}}class b{constructor(t){this.layer=t,this.imageBus={}}getCtx(){return this.layer.ctx}getLayer(){return this.layer}_restore(t){this.getCtx().save(),t(),this.getCtx().restore()}_path(t){this.getCtx().beginPath(),t(),this.getCtx().closePath()}paint(t){this.getCtx().save(),this._drawBox(t),this._drawBackground(t),this._drawContent(t),this.afterPaint(t)}afterPaint(t){t.hasChildren()&&"text"!==t.type||this.getCtx().restore(),this._helpParentRestoreCtx(t)}_helpParentRestoreCtx(t){if(t.isVisible()&&(!(e=t).parent||e.next||e.hasChildren())||!t.isVisible()&&t.next)return;var e;let i=t.parent;for(;i&&!i.next;)this.getCtx().restore(),i=i.parent;i&&i.next&&this.getCtx().restore()}_drawBox(t){if(!t.renderStyles.borderColor&&!t.renderStyles.shadowBlur)return;const{contentWidth:e,contentHeight:i,paddingLeft:s,paddingTop:r,borderStyle:h,paddingRight:o,paddingBottom:l,shadowBlur:d,shadowColor:a,backgroundColor:g,shadowOffsetX:c,shadowOffsetY:y,borderLeftWidth:p,borderRightWidth:u,borderTopWidth:f,borderBottomWidth:m}=t.renderStyles,S=Math.PI/2;let _=I(t),w=t.contentX-t.renderStyles.paddingLeft-p/2,x=t.contentY-t.renderStyles.paddingTop-f/2,L=e+s+o+(p+u)/2,C=i+r+l+(f+m)/2;const T=()=>{this.getCtx().moveTo(w,x+_),_&&this.getCtx().arc(w+_,x+_,_,2*S,3*S),this.getCtx().lineTo(w+L-_,x)},b=()=>{_&&this.getCtx().arc(w+L-_,x+_,_,3*S,4*S),this.getCtx().lineTo(w+L,x+C-_)},v=()=>{_&&this.getCtx().arc(w+L-_,x+C-_,_,0,S),this.getCtx().lineTo(w+_,x+C)},W=()=>{_&&this.getCtx().arc(w+_,x+C-_,_,S,2*S),this.getCtx().lineTo(w,x+_)};this.getCtx().lineCap=t.renderStyles.lineCap,this.getCtx().strokeStyle=t.renderStyles.borderColor,h&&"solid"!==h&&(Array.isArray(h)?this.getCtx().setLineDash(h):this.getCtx().setLineDash([5,5]));const k=t=>{this.getCtx().lineWidth=t,this.getCtx().stroke()};a&&d&&this._restore(()=>{this._path(()=>{T(),b(),v(),W()}),n(c)&&(this.getCtx().shadowOffsetX=c),n(y)&&(this.getCtx().shadowOffsetY=y),this.getCtx().shadowBlur=d,this.getCtx().shadowColor=a,this.getCtx().fillStyle=a,this.getCtx().fill()}),this._restore(()=>{this._path(()=>{w=t.contentX-t.renderStyles.paddingLeft-p/2,x=t.contentY-t.renderStyles.paddingTop-f/2,L=e+s+o+(p+u)/2,C=i+r+l+(f+m)/2,t.renderStyles.borderTopWidth&&(T(),k(t.renderStyles.borderTopWidth)),t.renderStyles.borderRightWidth&&(this.getCtx().moveTo(w+L-_,x),b(),k(t.renderStyles.borderRightWidth)),t.renderStyles.borderBottomWidth&&(this.getCtx().moveTo(w+L,x+C-_),v(),k(t.renderStyles.borderBottomWidth)),t.renderStyles.borderLeftWidth&&(this.getCtx().moveTo(w+_,x+C),W(),k(t.renderStyles.borderLeftWidth))})})}_drawBackground(t){const{backgroundColor:e,contentWidth:i,contentHeight:s,paddingLeft:r,paddingRight:h,paddingTop:o,paddingBottom:l,opacity:d}=t.renderStyles,a=this.getCtx();n(d)&&(a.globalAlpha=d),this._clip(t),e&&(this.getCtx().fillStyle=this._parseBackground(e,t),this.getCtx().fillRect(t.contentX-r,t.contentY-o,i+r+h,s+o+l)),this.getLayer().options&&this.getLayer().options.debug&&(this.getCtx().strokeStyle="green",this.getCtx().strokeRect(t.contentX,t.contentY,t.renderStyles.contentWidth,t.renderStyles.contentHeight))}_clip(t){if("hidden"!==t.renderStyles.overflow)return;const{contentWidth:e,contentHeight:i,paddingLeft:s,paddingTop:n,paddingRight:r,paddingBottom:h,shadowBlur:o,shadowColor:l,backgroundColor:d,borderLeftWidth:a,borderRightWidth:g,borderTopWidth:c,borderBottomWidth:y}=t.renderStyles,p=Math.PI/2;let u=I(t),f=t.contentX-t.renderStyles.paddingLeft-a,m=t.contentY-t.renderStyles.paddingTop-c,S=e+s+r+a+g,_=i+n+h+c+y;const w=()=>{this.getCtx().moveTo(f,m+u),u&&this.getCtx().arc(f+u,m+u,u,2*p,3*p),this.getCtx().lineTo(f+S-u,m)},x=()=>{u&&this.getCtx().arc(f+S-u,m+u,u,3*p,4*p),this.getCtx().lineTo(f+S,m+_-u)},L=()=>{u&&this.getCtx().arc(f+S-u,m+_-u,u,0,p),this.getCtx().lineTo(f+u,m+_)},C=()=>{u&&this.getCtx().arc(f+u,m+_-u,u,p,2*p),this.getCtx().lineTo(f,m+u)};this._path(()=>{w(),x(),L(),C()}),this.getCtx().clip()}_parseBackground(t,e){if(Array.isArray(t)){const i=this.getCtx().createLinearGradient(e.contentX,e.contentY,e.renderStyles.contentWidth,e.renderStyles.contentHeight);for(let e=0;e{l=0===i&&h?o+h:o,this.getCtx().fillText(e,l,t.contentY+(n+t._layout.fontHeight)/2+n*i)})}measureText(t,e){let i=0;return this._restore(()=>{this.getCtx().font=t._getFont();const{width:s}=this.getCtx().measureText(e);i=s}),{width:i}}_drawImage(t){if(!t._image)return;const{contentWidth:e,contentHeight:i}=t.renderStyles,{mode:s}=t.options.attrs,{sx:n,sy:r,swidth:h,sheight:o,dx:l,dy:d,dwidth:a,dheight:g,width:c,height:y}=t._imageInfo;"aspectFill"===s?this.getCtx().drawImage(t._image,n,r,h,o,t.contentX,t.contentY,e,i):"aspectFit"===s?this.getCtx().drawImage(t._image,0,0,c,y,l,d,a,g):this.getCtx().drawImage(t._image,t.contentX,t.contentY,e,i)}_drawScroll(t){this.getCtx().translate(t.currentScrollX,t.currentScrollY)}getImageInstance(t){let e=null;if(this.imageBus[t])e=this.imageBus[t];else{if(a()){if(!this.getLayer().options.canvas)throw Error("微信小程序中需要在options中设置canvas以创建图片");e=this.getLayer().options.canvas.createImage()}else e=new Image;t&&(this.imageBus[t]=new Promise((t,i)=>{e.onload=function(i){t({image:e,info:{width:i.target.width,height:i.target.height}})}})),e.src=t}return this.imageBus[t]}render(t){t.parent?this.getCtx().clearRect(t.x,t.y,t.renderStyles.width,t.renderStyles.height):this.getCtx().clearRect(0,0,this.getLayer().options.width,this.getLayer().options.height),l(t,(t,e,i)=>{t.isVisible()?this.paint(t):(i(),this._helpParentRestoreCtx(t))}),a()&&this.getCtx().draw&&this.getCtx().draw()}}function I(t){const{contentWidth:e,contentHeight:i}=t.renderStyles;let{borderRadius:s}=t.renderStyles;return 2*s>e&&(s=e/2),2*s>i&&(s=i/2),s<0&&(s=0),s}class v{constructor(t,e){this.ctx=t,this.node=null,this.isAnimate=!1,this.nodeList=[],this.p2cList=[],this.c2pList=[],this.renderList=[],this.options=e,this.eventManager=new L(e),this.render=new b(this)}update(t,e){this.ctx=t,this.options=e,this.options.renderStyles=e,this.node.container=this.options}mountNode(t){this.node=t,this.node.root=this.node,this.node.layer=this,this.node.container=this.options,this.eventManager.clear(),this.initRender()}initRender(){const t=Date.now();p.connectChildren(this.node),this.p2cList=this.getP2CList(this.node),this.c2pList=function(t){var e=[];if(null!=t){var i=[];for(i.unshift(t);0!=i.length;){var s=i.shift();e.push(s._generateRender());for(var n=s._getChildren(),r=n.length-1;r>=0;r--)i.push(n[r]._generateRender())}}return e}(this.node).reverse(),this.initNode(),this.flow(),this.repaint(),console.log(`渲染${this.p2cList.length}个元素 耗时 ${Date.now()-t} ms`)}getP2CList(t){return function(t){var e=[];if(null!=t){var i=[];for(i.unshift(t);0!=i.length;){var s=i.shift();e.push(s._generateRender());for(var n=s._getChildren(),r=0;r{t._initWidthHeight()});for(let t=0;tthis._animate())}animate(){this.isAnimate=!0,window.requestAnimationFrame(()=>this._animate())}stopAnimate(){this.isAnimate=!1}}class W extends m{constructor(t,e){return super(t,e),t.styles.overflow="hidden",this.type="scroll-view",this._scrollView=new m(t,[this]),this._scrollView.type="scroll-view-container",this.visibleIndex=null,this.renderOnDemand=t.attrs&&t.attrs.renderOnDemand||!1,this._scrollView}_getDefaultStyles(){return{...s.DEFAULT_STYLES,direction:"y"}}beforePaint(){this.initChildrenVisible()}init(){super.init(),this.addEventListener();const{height:t,width:e,direction:i}=this.styles;i.match("y")&&(r(t)?console.error("scroll-view 必须设置明确的高度"):(this.styles.height="auto",this.renderStyles.height="auto")),i.match("x")&&(r(e)?console.error("scroll-view 必须设置明确的宽度"):(this.styles.width="auto",this.renderStyles.width="auto"))}addEventListener(){this.currentScrollX=0,this.currentScrollY=0;let t=this.styles.direction,e=0,i=0,s=0,n=0,r=!1,h=0,o=0,l=0,d=0,a=null,g=1,c=1;this.getLayer().eventManager.onClick(e=>{t.match("y")&&(e.relativeY-=this.currentScrollY),t.match("x")&&(e.relativeX-=this.currentScrollX)},this._scrollView,!0),this.getLayer().eventManager.onTouchStart(t=>{t.stopPropagation(),e=t.x,i=t.y,s=e,n=i,r=!0,clearInterval(a)},this._scrollView),this.getLayer().eventManager.onTouchMove(t=>{r&&(t.stopPropagation(),h=t.x-e,o=t.y-i,this.scrollBy(h,o)&&(s=e,n=i,e=t.x,i=t.y))},this._scrollView),this.getLayer().eventManager.onTouchEnd(t=>{r&&(r=!1,l=t.x-s,d=t.y-n,g=.02*-l,c=.02*-d,clearInterval(a),a=setInterval(()=>{this.scrollBy(l,d)||clearInterval(a),l+=g,d+=c,l*l<=.05&&d*d<=.05&&(l=0,d=0,clearInterval(a))},17))},this._scrollView)}calcScrollBoundX(t){const{contentWidth:e,contentHeight:i}=this._scrollView.renderStyles,{width:s,height:n,direction:r}=this.renderStyles;if(r.match("x")){if(e-this.currentScrollX-t>s)return!1;if(this.currentScrollX+t>0)return!1}return!0}calcScrollBoundY(t){const{contentWidth:e,contentHeight:i}=this._scrollView.renderStyles,{width:s,height:n,direction:r}=this.renderStyles;if(r.match("y")){if(i-this.currentScrollY-t>n)return!1;if(this.currentScrollY+t>0)return!1}return!0}scrollByX(t){return!!this.renderStyles.direction.match("x")&&(!!this.calcScrollBoundX(t)&&(this.currentScrollX+=t,!0))}scrollByY(t){return!!this.renderStyles.direction.match("y")&&(!!this.calcScrollBoundY(t)&&(this.currentScrollY+=t,this.calcChildrenVisible(),!0))}scrollBy(t,e){return!!(this.scrollByX(t)|this.scrollByY(e))&&(this.getLayer().repaint(this._scrollView),!0)}scrollTo(t){}initChildrenVisible(){if(!this.renderOnDemand)return;const t=this._getChildrenInFlow();for(let e=0;e=0;e--){if(this.isElementInViewport(t[e])){this.visibleIndex[1]=e;break}t[e].visible=!1}for(let e=this.visibleIndex[0];e<=this.visibleIndex[1];e++)t[e].visible=!0}calcChildrenVisible(){if(!this.renderOnDemand)return;const t=this._getChildrenInFlow(),e=[this.visibleIndex[0]-1,this.visibleIndex[0],this.visibleIndex[0]+1],i=[this.visibleIndex[1]-1,this.visibleIndex[1],this.visibleIndex[1]+1];let s=[];for(let i=e[0];i<=e[2];i++)t[i]&&(this.isElementInViewport(t[i])?(t[i].visible=!0,s.length||s.push(i)):t[i].visible=!1);for(let e=i[2];e>=i[0];e--)t[e]&&(this.isElementInViewport(t[e])?(t[e].visible=!0,1===s.length&&s.push(e)):t[e].visible=!1);this.visibleIndex=s}isElementInViewport(t){return!this.styles.direction.match("y")||t.y+t.renderStyles.height+this.currentScrollY>this._scrollView.contentY&&t.y+this.currentScrollYnew m(t,e)),E("text",(t,e)=>new S(t,e)),E("image",(t,e)=>new _(t,e)),E("scroll-view",(t,e)=>new W(t,e)),E("scrollview",(t,e)=>new W(t,e));return{createLayer:function(t,e){return new v(t,e)},createElement:function(t){return t((function t(e,i={},s=[]){let n=null,r=s;if(!k[e])throw Error(`Unknown tag name [${e}] !`);return n=k[e](i,r,t),n}))},component:E,View:m,Text:S,Image:_,Layer:v,ScrollView:W}})); diff --git a/example/draw.js b/example/draw.js index 2b3e07c..7cdc137 100644 --- a/example/draw.js +++ b/example/draw.js @@ -147,31 +147,29 @@ function drawListItem(h, tag) { } function drawButton(h, text = 'text', options = {}) { return h( - 'view', - Object.assign({ - styles: { - height: 20, - backgroundColor: '#ff6c79', - borderRadius: 10, - borderColor: '#fff', - margin: 2, - display: 'inline-block', - paddingLeft: 10, - paddingRight: 10, - verticalAlign: 'middle' - }, - on: { - click(e) { - console.log(e) - } + 'view', { + styles: { + height: 20, + backgroundColor: '#ff6c79', + borderRadius: 10, + borderColor: '#fff', + margin: 2, + display: 'inline-block', + paddingLeft: 10, + paddingRight: 10, + lineHeight: 16, + }, + on: { + click(e) { + console.log(e) } - }, options), + } + }, [ h( 'text', { styles: { - lineHeight: 16, color: options.color || '#fff', textAlign: 'center', fontSize: 11, @@ -239,6 +237,7 @@ function drawInlineBlock(h) { paddingLeft: 10, paddingRight: 10, display: 'inline-block', + lineHeight: 16 }, }, [ @@ -286,7 +285,7 @@ function drawCard(h) { borderStyle: 'dash', shadowColor: '#999', shadowBlur: 20, - shadowOffsetY:10, + shadowOffsetY: 10, }, }, [ @@ -523,7 +522,7 @@ function drawTicket(h) { color: '#fff' } }, [ - h('text', {styles:{lineHeight: 24,}}, '领取') + h('text', { styles: { lineHeight: 24, } }, '领取') ]) ]) ]), @@ -586,6 +585,68 @@ function Dialog(h, options) { } +const data = { + date: '2016-05-02', + name: '王小虎', + province: '上海', + city: '普陀区', + address: '上海市普陀区金沙江路 1518 弄', + zip: 200333, +} +function getTableData(count = 100) { + let list = [] + for (let i = 0; i < count; i++) { + list.push(data) + } + return list +} +function drawTable(h) { + const tableData = getTableData(1000) + const tr = { + width: 700, + display: 'flex', + borderBottomWidth: 0.5, + borderColor: '#999', + padding: [10, 0], + } + const td = { + flex: 1, + color: '#666', + padding: [0, 5], + display: 'block', + maxLine: 1, + } + const th = { + flex: 1, + padding: [0, 5], + display: 'block', + maxLine: 1, + color: '#333', + textAlign: 'center', + } + const tdFirst = { + ...td, + color: '#333', + textAlign: 'center', + fontWeight: 800 + } + return [ + h('view', { + styles: tr + }, ['序号', '日期', '姓名', '地区', '城市', '详细地址', '邮编'].map(item => h('text', { styles: th }, item))), + ...tableData.map((item, index) => h('view', { styles: tr }, [ + h('text', { styles: tdFirst }, index + 1), + h('text', { styles: td }, item.date), + h('text', { styles: td }, item.name), + h('text', { styles: td }, item.province), + h('text', { styles: td }, item.city), + h('text', { styles: td }, item.address), + h('text', { styles: td }, item.zip), + ])) + ] +} + + function setLayer(_layer) { layer = _layer } diff --git a/example/table.html b/example/table.html new file mode 100644 index 0000000..b858b0b --- /dev/null +++ b/example/table.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/example/test.html b/example/test.html index ff6c573..5d7938b 100644 --- a/example/test.html +++ b/example/test.html @@ -39,18 +39,18 @@ canvas.width = w * dpr canvas.height = h * dpr ctx.scale(dpr, dpr) - layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h,debug:false }) + layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h, debug: false }) const node = easyCanvas.createElement((h) => { return h('view', { styles: { backgroundColor: '#fff' } }, [ // this.drawBox(h), this.drawSimple(h), this.drawInlineBlock(h), - this.drawCard(h), + this.drawTicket(h), this.drawScrollViewX(h), - this.drawScrollView(h), + this.drawListItem(h), this.drawAbsolute(h), - h('view', { styles: { textAlign: 'left',lineHeight:20,padding:5 } }, [ + h('view', { styles: { textAlign: 'left', lineHeight: 20, padding: 5 } }, [ ...('如果需要在text中间增加inline-block元素，请使用split将text分割成每个文字一个text元素，这种模式下maxline不生效，如果在最前面，请使用textIndent配合绝对定位'.split('').map(w => h('text', {}, w))), h('button', { styles: { backgroundColor: '#ffd8bf' } }, 'Inline Block'), h('text', { styles: { textIndent: 10 } }, '支持textIndent') diff --git a/lib/canvas-render.js b/lib/canvas-render.js index fc4da3f..8fd9b5b 100644 --- a/lib/canvas-render.js +++ b/lib/canvas-render.js @@ -337,12 +337,7 @@ export default class CanvasRender { } _drawScroll(element) { - const { direction } = element.renderStyles - if (direction === 'y') { - this.getCtx().translate(0, element.currentScroll) - } else { - this.getCtx().translate(element.currentScroll, 0) - } + this.getCtx().translate(element.currentScrollX, element.currentScrollY) } /** diff --git a/lib/complete-styles.js b/lib/complete-styles.js index 1231aba..c56af95 100644 --- a/lib/complete-styles.js +++ b/lib/complete-styles.js @@ -126,9 +126,9 @@ function _completeFlex(element) { element.styles.flex = 1 } } else { - if (element.parent.styles.flexDirection === 'column' && !isExact(element.styles.height)) { + if (element.parent.styles.flexDirection === 'column' && isExact(element.styles.flex)) { element.styles.height = 0 - } else if (element.parent.styles.flexDirection === 'row' && !isExact(element.styles.width)) { + } else if (element.parent.styles.flexDirection === 'row' && isExact(element.styles.flex)) { element.styles.width = 0 } } diff --git a/lib/constants.js b/lib/constants.js index 34fd1cb..fea6444 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -47,7 +47,7 @@ const DEFAULT_STYLES = { borderRadius: 0, lineCap: 'square', flexDirection: FLEX_DIRECTION.ROW, - verticalAlign: 'top', + verticalAlign: 'middle', textAlign: 'left', justifyContent: 'flex-start', alignItems: 'flex-start', diff --git a/lib/layer.js b/lib/layer.js index 29e3f29..b480474 100644 --- a/lib/layer.js +++ b/lib/layer.js @@ -34,6 +34,9 @@ export default class Layer { } initRender() { + // for 打印耗时 + const startTime = Date.now() + TreeNode.connectChildren(this.node) this.p2cList = this.getP2CList(this.node) this.c2pList = breadthFirstSearchRight(this.node).reverse() @@ -47,6 +50,7 @@ export default class Layer { this.repaint() + console.log(`渲染${this.p2cList.length}个元素 耗时 ${(Date.now() - startTime)} ms`) } getP2CList(el) { diff --git a/lib/scroll-view.js b/lib/scroll-view.js index 907ef74..806075e 100644 --- a/lib/scroll-view.js +++ b/lib/scroll-view.js @@ -12,6 +12,7 @@ export default class ScrollView extends View { this._scrollView = new View(options, [this]) this._scrollView.type = 'scroll-view-container' this.visibleIndex = null + this.renderOnDemand = options.attrs && options.attrs.renderOnDemand || false return this._scrollView } @@ -22,7 +23,7 @@ export default class ScrollView extends View { } } - beforePaint(){ + beforePaint() { this.initChildrenVisible() } @@ -31,59 +32,72 @@ export default class ScrollView extends View { this.addEventListener() const { height, width, direction } = this.styles - if (direction === 'y') { - if (!isAuto(height)) { - this.styles.height = 'auto' - this.renderStyles.height = 'auto' - } else { + if (direction.match('y')) { + if (isAuto(height)) { // 必须设置 console.error('scroll-view 必须设置明确的高度') - } - } else if (direction === 'x') { - if (!isAuto(width)) { - this.styles.width = 'auto' - this.renderStyles.width = 'auto' } else { + this.styles.height = 'auto' + this.renderStyles.height = 'auto' + } + } + if (direction.match('x')) { + if (isAuto(width)) { // 必须设置 console.error('scroll-view 必须设置明确的宽度') + } else { + this.styles.width = 'auto' + this.renderStyles.width = 'auto' } } } addEventListener() { // 监听滚动 - this.currentScroll = 0 + this.currentScrollX = 0 + this.currentScrollY = 0 let direction = this.styles.direction - let start = 0 - let lastStart = 0 + let startX = 0 + let startY = 0 + let lastStartX = 0 + let lastStartY = 0 let startMove = false - let offset = 0 - let speed = 0 + let offsetX = 0 + let offsetY = 0 + let speedX = 0 + let speedY = 0 let glideInterval = null - let resistance = 1 + let resistanceX = 1 + let resistanceY = 1 this.getLayer().eventManager.onClick((e) => { - if (direction === 'y') { - e.relativeY -= this.currentScroll - } else { - e.relativeX -= this.currentScroll + if (direction.match('y')) { + e.relativeY -= this.currentScrollY + } + if (direction.match('x')) { + e.relativeX -= this.currentScrollX } }, this._scrollView, true) this.getLayer().eventManager.onTouchStart((e) => { e.stopPropagation() - start = e[direction] - lastStart = start + startX = e.x + startY = e.y + lastStartX = startX + lastStartY = startY startMove = true clearInterval(glideInterval) }, this._scrollView) this.getLayer().eventManager.onTouchMove((e) => { if (startMove) { e.stopPropagation() - offset = (e[direction] - start) - if (this.scrollBy(offset)) { - lastStart = start - start = e[direction] + offsetX = (e.x - startX) + offsetY = (e.y - startY) + if (this.scrollBy(offsetX, offsetY)) { + lastStartX = startX + lastStartY = startY + startX = e.x + startY = e.y } } }, this._scrollView) @@ -91,16 +105,20 @@ export default class ScrollView extends View { if (startMove) { startMove = false - speed = (e[direction] - lastStart) * 1.5 - resistance = -speed * 0.02 + speedX = (e.x - lastStartX) + speedY = (e.y - lastStartY) + resistanceX = -speedX * 0.02 + resistanceY = -speedY * 0.02 clearInterval(glideInterval) glideInterval = setInterval(() => { - if (!this.scrollBy(speed)) { + if (!this.scrollBy(speedX, speedY)) { clearInterval(glideInterval) } - speed += resistance - if (speed * speed <= 0.05) { - speed = 0 + speedX += resistanceX + speedY += resistanceY + if (speedX * speedX <= 0.05 && speedY * speedY <= 0.05) { + speedX = 0 + speedY = 0 clearInterval(glideInterval) } }, 17) @@ -108,19 +126,27 @@ export default class ScrollView extends View { }, this._scrollView) } - calcScrollBound(offset) { + calcScrollBoundX(offsetX) { const { contentWidth: offsetWidth, contentHeight: offsetHeight } = this._scrollView.renderStyles const { width: scrollWidth, height: scrollHeight, direction } = this.renderStyles - if (direction === 'y') { - if ((offsetHeight - this.currentScroll - offset) > scrollHeight) { + if (direction.match('x')) { + if ((offsetWidth - this.currentScrollX - offsetX) > scrollWidth) { return false - } else if (this.currentScroll + offset > 0) { + } else if (this.currentScrollX + offsetX > 0) { return false } - } else { - if ((offsetWidth - this.currentScroll - offset) > scrollWidth) { + } + + return true + } + + calcScrollBoundY(offsetY) { + const { contentWidth: offsetWidth, contentHeight: offsetHeight } = this._scrollView.renderStyles + const { width: scrollWidth, height: scrollHeight, direction } = this.renderStyles + if (direction.match('y')) { + if ((offsetHeight - this.currentScrollY - offsetY) > scrollHeight) { return false - } else if (this.currentScroll + offset > 0) { + } else if (this.currentScrollY + offsetY > 0) { return false } } @@ -128,11 +154,21 @@ export default class ScrollView extends View { return true } - scrollBy(offset) { - if (this.calcScrollBound(offset)) { - this.currentScroll += offset + scrollByX(offsetX) { + if (!this.renderStyles.direction.match('x')) return false + if (this.calcScrollBoundX(offsetX)) { + this.currentScrollX += offsetX + return true + } else { + return false + } + } + + scrollByY(offsetY) { + if (!this.renderStyles.direction.match('y')) return false + if (this.calcScrollBoundY(offsetY)) { + this.currentScrollY += offsetY this.calcChildrenVisible() - this.getLayer().repaint() // this.getLayer().repaint(this._scrollView) return true } else { @@ -140,66 +176,79 @@ export default class ScrollView extends View { } } + scrollBy(offsetX, offsetY) { + // 这里要两个都运行，所以不要用短路 + if (this.scrollByX(offsetX) | this.scrollByY(offsetY)) { + this.getLayer().repaint(this._scrollView) + return true + } + return false + } + scrollTo(pos) { } // TODO: initChildrenVisible() { + if (!this.renderOnDemand) return + // console.log('==============') const children = this._getChildrenInFlow() // 左 for (let i = 0; i < children.length; i++) { if (this.isElementInViewport(children[i])) { - this.visibleIndex = [i,-1] + this.visibleIndex = [i, -1] break - }else{ + } else { children[i].visible = false - } + } } // 右 - for(let i = children.length-1; i>=0; i--){ + for (let i = children.length - 1; i >= 0; i--) { if (this.isElementInViewport(children[i])) { this.visibleIndex[1] = i break - }else{ + } else { children[i].visible = false - } + } } // 中间 - for(let i = this.visibleIndex[0]; i<=this.visibleIndex[1]; i++){ + for (let i = this.visibleIndex[0]; i <= this.visibleIndex[1]; i++) { children[i].visible = true } } // 只用计算两头 - calcChildrenVisible(){ + // 滚动太快会有问题，暂时使用上面的init + calcChildrenVisible() { + if (!this.renderOnDemand) return const children = this._getChildrenInFlow() - const head = [this.visibleIndex[0]-1,this.visibleIndex[0],this.visibleIndex[0] + 1] - const foot = [this.visibleIndex[1] - 1,this.visibleIndex[1],this.visibleIndex[1]+1] + const head = [this.visibleIndex[0] - 1, this.visibleIndex[0], this.visibleIndex[0] + 1] + const foot = [this.visibleIndex[1] - 1, this.visibleIndex[1], this.visibleIndex[1] + 1] let visibleIndex = [] - for(let i = head[0]; i<=head[2]; i++){ - if (children[i]){ - if(this.isElementInViewport(children[i])){ + for (let i = head[0]; i <= head[2]; i++) { + if (children[i]) { + if (this.isElementInViewport(children[i])) { children[i].visible = true - if(!visibleIndex.length){ + if (!visibleIndex.length) { visibleIndex.push(i) } - }else{ + } else { children[i].visible = false } } } - for(let i = foot[2]; i>=foot[0]; i--){ - if (children[i]){ - if(this.isElementInViewport(children[i])){ + for (let i = foot[2]; i >= foot[0]; i--) { + if (children[i]) { + if (this.isElementInViewport(children[i])) { children[i].visible = true - if(visibleIndex.length ===1){ + if (visibleIndex.length === 1) { visibleIndex.push(i) } - }else{ + } else { children[i].visible = false } } @@ -207,13 +256,14 @@ export default class ScrollView extends View { this.visibleIndex = visibleIndex } - isElementInViewport(element){ - if(this.styles.direction === 'y'){ - return ((element.y + element.renderStyles.height + this.currentScroll) > this._scrollView.contentY) - && ((element.y + this.currentScroll) < this._scrollView.contentY + this._scrollView.renderStyles.contentHeight) - }else{ - return ((element.x + element.renderStyles.width + this.currentScroll) > this._scrollView.contentX) - && ((element.x + this.currentScroll) < this._scrollView.contentX + this._scrollView.renderStyles.contentWidth) + isElementInViewport(element) { + if (this.styles.direction.match('y')) { + return ((element.y + element.renderStyles.height + this.currentScrollY) > this._scrollView.contentY) + && ((element.y + this.currentScrollY) < this._scrollView.contentY + this._scrollView.renderStyles.contentHeight) + } else { + return true + // return ((element.x + element.renderStyles.width + this.currentScroll) > this._scrollView.contentX) + // && ((element.x + this.currentScroll) < this._scrollView.contentX + this._scrollView.renderStyles.contentWidth) } } diff --git a/lib/text.js b/lib/text.js index 3bb1d0f..7197d7b 100644 --- a/lib/text.js +++ b/lib/text.js @@ -20,18 +20,6 @@ export default class Text extends Element { } } - _completeStyles() { - super._completeStyles() - } - - _completeWidth() { - super._completeWidth() - - if (this.styles.textAlign !== 'left' && this.parent && !isAuto(this.parent.styles.width)) { - this.styles.width = '100%' - } - } - _measureLayout() { this._layout = this.getRender().measureText(this, this.children) this._layout.fontHeight = this.renderStyles.fontSize * 0.8 @@ -48,8 +36,9 @@ export default class Text extends Element { _calcLine() { if (!this.parent || !this.children) return const { width: textWidth, height: textHeight } = this._layout - const { contentWidth: parentContentWidth } = this.parent.renderStyles + let { contentWidth: parentContentWidth } = this.parent.renderStyles const { width: parentWidth } = this.parent.styles + if (!isAuto(this.styles.width)) parentContentWidth = this.renderStyles.width // 如果一行宽度够，或者父级宽度是auto if ((isExact(parentContentWidth) && parentContentWidth >= textWidth) || parentWidth === STYLES.WIDTH.AUTO) { this._lines = [this.children] diff --git a/lib/utils.js b/lib/utils.js index d39d89f..1e475cb 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -155,3 +155,4 @@ export function breadthFirstSearchRight(node) { return nodes; } +