Comparing version 0.0.4 to 0.0.5
@@ -1,2 +0,2 @@ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).karas=e()}(this,function(){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function e(t,e,i){return e&&r(t.prototype,e),i&&r(t,i),t}function i(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,r)}return i}function a(n){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(a,!0).forEach(function(t){var e,i,r;e=n,r=a[i=t],i in e?Object.defineProperty(e,i,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[i]=r}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):i(a).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(a,t))})}return n}function t(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&n(t,e)}function C(t){return(C=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function M(t,e,i){return(M="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,i){var r=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=C(t)););return t}(t,e);if(r){var n=Object.getOwnPropertyDescriptor(r,e);return n.get?n.get.call(i):n.value}})(t,e,i||t)}function P(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if(!(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t)))return;var i=[],r=!0,n=!1,a=void 0;try{for(var s,o=t[Symbol.iterator]();!(r=(s=o.next()).done)&&(i.push(s.value),!e||i.length!==e);r=!0);}catch(t){n=!0,a=t}finally{try{r||null==o.return||o.return()}finally{if(n)throw a}}return i}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var h,l=function(){function t(){o(this,t),this.__x=0,this.__y=0,this.__ox=0,this.__oy=0,this.__width=0,this.__height=0,this.__prev=null,this.__next=null,this.__ctx=null,this.__parent=null,this.__style={},this.__baseLine=0,this.__virtualDom={}}return e(t,[{key:"__offsetX",value:function(t){this.__ox+=t}},{key:"__offsetY",value:function(t){this.__oy+=t}},{key:"x",get:function(){return this.__x}},{key:"y",get:function(){return this.__y}},{key:"ox",get:function(){return this.__ox}},{key:"oy",get:function(){return this.__oy}},{key:"rx",get:function(){return this.x+this.ox}},{key:"ry",get:function(){return this.y+this.oy}},{key:"width",get:function(){return this.__width}},{key:"height",get:function(){return this.__height}},{key:"outerWidth",get:function(){return this.__width}},{key:"outerHeight",get:function(){return this.__height}},{key:"prev",get:function(){return this.__prev}},{key:"next",get:function(){return this.__next}},{key:"parent",get:function(){return this.__parent}},{key:"style",get:function(){return this.__style}},{key:"ctx",get:function(){return this.__ctx}},{key:"baseLine",get:function(){return this.__baseLine}},{key:"virtualDom",get:function(){return this.__virtualDom}}]),t}(),ft={CANVAS:0,SVG:1,measure:function(t,e){h||((h=document.createElement("div")).style.position="absolute",h.style.left="99999px",h.style.top="-99999px",h.style.visibility="hidden",document.body.appendChild(h)),h.style.fontSize=e.fontSize+"px",h.innerText=t;var i=window.getComputedStyle(h,null);return parseFloat(i.width)}},_t=0,dt=1,U=2;var Q=function(){function r(t,e){var i;return o(this,r),i=s(this,C(r).call(this)),e=e||[],Array.isArray(e)?(i.props=function(t){for(var e={},i=0,r=t.length;i<r;i++){var n=t[i];if(Array.isArray(n))e[n[0]]=n[1];else for(var a=Object.keys(n),s=a.length-1;0<=s;s--){var o=a[s];e[o]=n[o]}}return e}(e),i.__props=function(t){for(var e=0,i=t.length;e<i;e++){var r=t[e];if(!Array.isArray(r)){for(var n=[],a=Object.keys(r),s=0,o=a.length;s<o;s++){var h=a[s];n.push([h,r[h]])}t.splice.apply(t,[e,1].concat(n))}}return t}(e)):(i.props=e,i.__props=function(t){for(var e=[],i=Object.keys(t),r=0,n=i.length;r<n;r++){var a=i[r];e.push([a,t[a]])}return e}(e)),i.__tagName=t,i.__style=i.props.style||{},i.__listener={},i.__props.forEach(function(t){var e=t[0];/^on[a-zA-Z]/.test(e)&&(i.__listener[e.slice(2).toLowerCase()]=t[1])}),i.__mtw=0,i.__mrw=0,i.__mbw=0,i.__mlw=0,i.__ptw=0,i.__prw=0,i.__pbw=0,i.__plw=0,i}return t(r,l),e(r,[{key:"__layout",value:function(t){var e=t.w,i=this.style,r=i.display,n=i.width,a=i.marginTop,s=i.marginRight,o=i.marginBottom,h=i.marginLeft,l=i.paddingTop,u=i.paddingRight,c=i.paddingBottom,f=i.paddingLeft;if("none"!==r){if(n&&n.unit!==_t)switch(n.unit){case dt:e=n.value;break;case U:e*=.01*n.value}this.__mlw=this.__mpWidth(h,e),this.__mtw=this.__mpWidth(a,e),this.__mrw=this.__mpWidth(s,e),this.__mbw=this.__mpWidth(o,e),this.__plw=this.__mpWidth(f,e),this.__ptw=this.__mpWidth(l,e),this.__prw=this.__mpWidth(u,e),this.__pbw=this.__mpWidth(c,e),"block"===r?this.__layoutBlock(t):"flex"===r?this.__layoutFlex(t):"inline"===r&&this.__layoutInline(t)}}},{key:"__mpWidth",value:function(t,e){return t.unit===dt?t.value:t.unit===U?t.value*e*.01:0}},{key:"render",value:function(t){this.__virtualDom={bb:[]};var e=this.ctx,i=this.style,r=this.width,n=this.height,a=this.mlw,s=this.mtw,o=this.plw,h=this.ptw,l=this.prw,u=this.pbw,c=this.virtualDom,f=i.display,_=i.position,d=i.top,p=i.right,v=i.bottom,y=i.left,g=i.backgroundColor,w=i.borderTopWidth,m=i.borderTopColor,b=i.borderTopStyle,x=i.borderRightWidth,k=i.borderRightColor,W=i.borderRightStyle,A=i.borderBottomWidth,S=i.borderBottomColor,L=i.borderBottomStyle,T=i.borderLeftWidth,N=i.borderLeftColor,E=i.borderLeftStyle,O=i.transform;if("none"!==f){if("relative"===_&&this.parent){var P=this.parent,C=P.width,M=P.height,D=this.parent.style.height;if(y.unit!==_t){var B=y.unit===dt?y.value:y.value*C*.01;this.__offsetX(B)}else if(p.unit!==_t){var F=p.unit===dt?p.value:p.value*C*.01;this.__offsetX(-F)}if(d.unit!==_t){var V=d.unit===dt?d.value:d.value*M*.01*(D.unit===_t?0:1);this.__offsetY(V)}else if(v.unit!==_t){var j=v.unit===dt?v.value:v.value*M*.01*(D.unit===_t?0:1);this.__offsetY(-j)}}if(O){var G=O.translateX,I=O.translateY;if(G){var Y=G.unit===dt?G.value:G.value*r*.01;this.__offsetX(Y)}if(I){var R=I.unit===dt?I.value:I.value*n*.01;this.__offsetY(R)}}var X=this.rx,H=this.ry;if(X+=a,H+=s,g){var z=X;T&&(z+=T.value);var $=H;w&&($+=w.value);var Z=r+o+l,q=n+h+u;t===ft.CANVAS?(e.beginPath(),e.fillStyle=g,e.rect(z,$,Z,q),e.fill(),e.closePath()):t===ft.SVG&&c.bb.push({type:"item",tagName:"rect",props:[["x",z],["y",$],["width",Z],["height",q],["fill",g]]})}if(w.value){var U=X+T.value,Q=H+.5*w.value,J=U+r;if(J+=o+l,t===ft.CANVAS)e.beginPath(),e.lineWidth=w.value,e.strokeStyle=m,"dashed"===b?e.setLineDash([3*w.value,2*w.value]):"dotted"===b?e.setLineDash([w.value,w.value]):e.setLineDash([]),e.moveTo(U,Q),e.lineTo(J,Q),e.stroke(),e.closePath();else if(t===ft.SVG){var K={type:"item",tagName:"line",props:[["x1",U],["y1",Q],["x2",J],["y2",Q],["stroke-width",w.value],["stroke",m]]};"dashed"===b?K.props.push(["stroke-dasharray","".concat(3*w.value,", ").concat(2*w.value)]):"dotted"===b&&K.props.push(["stroke-dasharray","".concat(w.value,", ").concat(w.value)]),c.bb.push(K)}}if(x.value){var tt=X+r+T.value+.5*x.value,et=H,it=et+n+w.value+A.value;if(tt+=o+l,it+=h+u,t===ft.CANVAS)e.beginPath(),e.lineWidth=x.value,e.strokeStyle=k,"dashed"===W?e.setLineDash([3*x.value,2*x.value]):"dotted"===W?e.setLineDash([x.value,2*x.value]):e.setLineDash([]),e.moveTo(tt,et),e.lineTo(tt,it),e.stroke(),e.closePath();else if(t===ft.SVG){var rt={type:"item",tagName:"line",props:[["x1",tt],["y1",et],["x2",tt],["y2",it],["stroke-width",x.value],["stroke",k]]};"dashed"===W?rt.props.push(["stroke-dasharray","".concat(3*x.value,", ").concat(2*x.value)]):"dotted"===b&&rt.props.push(["stroke-dasharray","".concat(x.value,", ").concat(x.value)]),c.bb.push(rt)}}if(A.value){var nt=X+T.value,at=H+n+w.value+.5*A.value,st=nt+r;if(st+=o+l,at+=h+u,t===ft.CANVAS)e.beginPath(),e.lineWidth=A.value,e.strokeStyle=S,"dashed"===L?e.setLineDash([3*A.value,2*A.value]):"dotted"===L?e.setLineDash([A.value,2*A.value]):e.setLineDash([]),e.moveTo(nt,at),e.lineTo(st,at),e.stroke(),e.closePath();else if(t===ft.SVG){var ot={type:"item",tagName:"line",props:[["x1",nt],["y1",at],["x2",st],["y2",at],["stroke-width",A.value],["stroke",S]]};"dashed"===L?ot.props.push(["stroke-dasharray","".concat(3*A.value,", ").concat(2*A.value)]):"dotted"===L&&ot.props.push(["stroke-dasharray","".concat(A.value,", ").concat(A.value)]),c.bb.push(ot)}}if(T.value){var ht=X+.5*T.value,lt=H,ut=lt+n+w.value+A.value;if(ut+=h+u,t===ft.CANVAS)e.beginPath(),e.lineWidth=T.value,e.strokeStyle=N,"dashed"===E?e.setLineDash([3*T.value,2*T.value]):"dotted"===E?e.setLineDash([T.value,2*T.value]):e.setLineDash([]),e.moveTo(ht,lt),e.lineTo(ht,ut),e.stroke(),e.closePath();else if(t===ft.SVG){var ct={type:"item",tagName:"line",props:[["x1",ht],["y1",lt],["x2",ht],["y2",ut],["stroke-width",T.value],["stroke",N]]};"dashed"===E?ct.props.push(["stroke-dasharray","".concat(3*T.value,", ").concat(2*T.value)]):"dotted"===E&&ct.props.push(["stroke-dasharray","".concat(T.value,", ").concat(T.value)]),c.bb.push(ct)}}}}},{key:"tagName",get:function(){return this.__tagName}},{key:"mtw",get:function(){return this.__mtw}},{key:"mrw",get:function(){return this.__mrw}},{key:"mbw",get:function(){return this.__mbw}},{key:"mlw",get:function(){return this.__mlw}},{key:"ptw",get:function(){return this.__ptw}},{key:"prw",get:function(){return this.__prw}},{key:"pbw",get:function(){return this.__pbw}},{key:"plw",get:function(){return this.__plw}},{key:"outerWidth",get:function(){var t=this.mlw,e=this.mrw,i=this.plw,r=this.prw,n=this.style,a=n.borderLeftWidth,s=n.borderRightWidth;return this.width+a.value+s.value+t+e+i+r}},{key:"outerHeight",get:function(){var t=this.mtw,e=this.mbw,i=this.ptw,r=this.pbw,n=this.style,a=n.borderTopWidth,s=n.borderBottomWidth;return this.height+a.value+s.value+t+e+i+r}},{key:"listener",get:function(){return this.__listener}}]),r}(),u={lhr:1.14990234375,car:1.1171875,blr:.9052734375,mdr:.64599609375,lgr:.03271484375},c={position:"static",display:"block",borderSizing:"content-box",top:"auto",right:"auto",bottom:"auto",left:"auto",marginTop:0,marginRight:0,marginBottom:0,marginLeft:0,paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0,fontSize:16,fontFamily:"arial",color:"#000",fontStyle:"normal",fontWeight:400,lineHeight:"normal",borderTopWidth:0,borderRightWidth:0,borderBottomWidth:0,borderLeftWidth:0,borderTopStyle:"solid",borderRightStyle:"solid",borderBottomStyle:"solid",borderLeftStyle:"solid",verticalAlign:"baseline",width:"auto",height:"auto",flexGrow:0,flexShrink:1,flexBasis:"auto",flexDirection:"row",justifyContent:"flex-start",alignItems:"stretch",textAlign:"left",visibility:"visible",fill:"#000",stroke:"#000",strokeWidth:0,strokeDasharray:[]},f=[];Object.keys(c).forEach(function(t){var e=c[t];f.push({k:t,v:e})});var _={}.toString;function d(e){return function(t){return _.call(t)==="[object "+e+"]"}}var p=d("Number");function v(t){return y(t)?"":t.toString()}function y(t){return null==t}var g={isObject:d("Object"),isString:d("String"),isFunction:d("Function"),isNumber:p,isBoolean:d("Boolean"),isDate:d("Date"),stringify:v,joinSourceArray:function(t){return function t(e){for(var i="",r=0,n=e.length;r<n;r++){var a=e[r];Array.isArray(a)?i+=t(a):i+=v(a)}return i}(t)},encodeHtml:function(t,e){return e?t.replace(/"/g,"""):t.replace(/&/g,"&").replace(/</g,"<")},isNil:y,joinVirtualDom:function e(t){if("item"===t.type){var i="";return t.props.forEach(function(t){i+=" ".concat(t[0],'="').concat(t[1],'"')}),"text"===t.tagName?"<text".concat(i,">").concat(t.content,"</text>"):"<".concat(t.tagName).concat(i,"/>")}if("text"===t.type){var r="";return t.children.forEach(function(t){r+=e(t)}),"<g>".concat(r,"</g>")}if("dom"===t.type){var n="<g>";return t.bb.forEach(function(t){n+=e(t)}),n+="</g><g>",t.children.forEach(function(t){n+=e(t)}),"<g>".concat(n+="</g>","</g>")}if("geom"===t.type){var a="<g>";return t.bb.forEach(function(t){a+=e(t)}),a+="</g><g>",t.content.forEach(function(t){a+=e(t)}),"<g>".concat(a+="</g>","</g>")}}};function w(t,e){var i="border".concat(e);if(t[i]){var r=/\b\d+px\b/i.exec(t[i]);r&&(t[i+"Width"]=r[0]);var n=/\b(solid|dashed|dotted)\b/i.exec(t[i]);n&&(t[i+"Style"]=n[1]);var a=/#[0-9a-f]{3,6}/i.exec(t[i]);a&&-1<[4,7].indexOf(a[0].length)&&(t[i+"Color"]=a[0])}}var m={normalize:function(i){if(f.forEach(function(t){i.hasOwnProperty(t.k)||(i[t.k]=t.v)}),i.background){var t=/#[0-9a-f]{3,6}/i.exec(i.background);t&&-1<[4,7].indexOf(t[0].length)&&(i.backgroundColor=t[0])}if(i.flex&&("none"===i.flex?(i.flexGrow=0,i.flexShrink=0,i.flexBasis="auto"):"auto"===i.flex?(i.flexGrow=1,i.flexShrink=1,i.flexBasis="auto"):/^[\d.]+$/.test(i.flex)?(i.flexGrow=parseFloat(i.flex),i.flexShrink=1,i.flexBasis=0):/^[\d.]+px$/.test(i.flex)||/^[\d.]+%$/.test(i.flex)||(i.flexGrow=0,i.flexShrink=1,i.flexBasis="auto")),i.border&&(i.borderTop=i.borderRight=i.borderBottom=i.borderLeft=i.border),i.margin&&(i.marginTop=i.marginRight=i.marginBottom=i.marginLeft=i.margin),i.padding&&(i.paddingTop=i.paddingRight=i.paddingBottom=i.paddingLeft=i.padding),i.transform){var e=i.transform.match(/\w+\(.+?\)/g);if(e){var _=i.transform={};e.forEach(function(t){var e=t.indexOf("("),i=t.slice(0,e),r=t.slice(e+1,t.length-1);if("matrix"===i){var n=r.split(",");if(6<(n=n.map(function(t){return parseFloat(t)})).length)n=n.slice(0,6);else if(n.length<6)for(;n.length<6;)n.push(0);_.matrix=n}else if("matrix3d"===i){var a=r.split(",");if(9<(a=a.map(function(t){return parseFloat(t)})).length)a=a.slice(0,9);else if(a.length<9)for(;a.length<9;)a.push(0);_.matrix3d=a}else if("translateX"===i)_.translateX=r;else if("translateY"===i)_.translateY=r;else if("translateZ"===i)_.translateZ=r;else if("translate"===i){var s=r.split(",");_.translateX=s[0],_.translateY=s[1]}else if("translate3d"===i){var o=r.split(",");_.translateX=o[0],_.translateY=o[1],_.translateZ=o[2]}else if("scaleX"===i)_.scaleX=parseFloat(r)||0;else if("scaleY"===i)_.scaleY=parseFloat(r)||0;else if("scaleZ"===i)_.scaleZ=parseFloat(r)||0;else if("scale"===i){var h=r.split(",");_.scaleX=parseFloat(h[0])||0,_.scaleY=parseFloat(h[1])||0}else if("scale3d"===i){var l=r.split(",");_.scaleX=parseFloat(l[0])||0,_.scaleY=parseFloat(l[1])||0,_.scaleZ=parseFloat(l[2])||0}else if("rotateX"===i)_.rotateX=parseFloat(r)||0;else if("rotateY"===i)_.rotateY=parseFloat(r)||0;else if("rotateZ"===i)_.rotateZ=parseFloat(r)||0;else if("rotate"===i){var u=r.split(",");_.rotateX=parseFloat(u[0])||0,_.rotateY=parseFloat(u[1])||0}else if("rotate3d"===i){var c=r.split(",");_.rotateX=parseFloat(c[0])||0,_.rotateY=parseFloat(c[1])||0,_.rotateZ=parseFloat(c[2])||0}else if("skewX"===i)_.skewX=parseFloat(r)||0;else if("skewY"===i)_.skewY=parseFloat(r)||0;else if("skew"===i){var f=r.split(",");_.skewX=parseFloat(f[0])||0,_.skewY=parseFloat(f[1])||0}else"perspective"===i&&(_.perspective=parseFloat(r))}),["translateX","translateY","translateZ"].forEach(function(t){var e=_[t];!g.isNil(e)&&e.unit||(/%$/.test(e)?(e=parseFloat(e)||0,_[t]={value:e,unit:U}):(e=parseFloat(e)||0,_[t]={value:e,unit:dt}))})}}w(i,"Top"),w(i,"Right"),w(i,"Bottom"),w(i,"Left"),["marginTop","marginRight","marginBottom","marginLeft","paddingTop","paddingRight","paddingBottom","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","top","right","bottom","left","width","height","flexBasis"].forEach(function(t){var e=i[t];!g.isNil(e)&&e.unit||("auto"===e?i[t]={unit:_t}:/%$/.test(e)?0===t.indexOf("border")?i[t]={value:0,unit:dt}:(e=parseFloat(e)||0,i[t]={value:e,unit:U}):(e=parseFloat(e)||0,i[t]={value:e,unit:dt}))});var r=i.lineHeight;r="normal"===r?{value:i.fontSize*u.lhr,unit:dt}:/px$/.test(r)?(r=parseFloat(r),{value:Math.max(i.fontSize,r),unit:dt}):"normal"===(r=parseFloat(r)||"normal")?{value:i.fontSize*u.lhr,unit:dt}:{value:r*i.fontSize,unit:dt},i.lineHeight=r},setFontStyle:function(t){var e=t.fontStyle,i=t.fontWeight,r=t.fontSize,n=t.fontFamily;return"".concat(e," ").concat(i," ").concat(r,"px/").concat(r,"px ").concat(n)},getBaseLine:function(t){var e=t.fontSize*u.lhr;return.5*(t.lineHeight.value-e)+t.fontSize*u.blr}},b=function(){function s(t,e,i,r,n,a){o(this,s),this.__parent=t,this.__x=e,this.__y=i,this.__width=r,this.__content=n,this.__style=a,this.__virtualDom={}}return e(s,[{key:"render",value:function(t,e){var i=this.style,r=this.content,n=this.x,a=this.y,s=this.parent,o=s.ox,h=s.oy;a+=m.getBaseLine(i),n+=o,a+=h,t===ft.CANVAS?e.fillText(r,n,a):t===ft.SVG&&(this.__virtualDom={type:"item",tagName:"text",props:[["x",n],["y",a],["fill",i.color],["font-size","".concat(i.fontSize,"px")]],content:r})}},{key:"__offsetX",value:function(t){this.__x+=t}},{key:"__offsetY",value:function(t){this.__y+=t}},{key:"x",get:function(){return this.__x}},{key:"y",get:function(){return this.__y}},{key:"width",get:function(){return this.__width}},{key:"content",get:function(){return this.__content}},{key:"style",get:function(){return this.__style}},{key:"baseLine",get:function(){return m.getBaseLine(this.style)}},{key:"virtualDom",get:function(){return this.__virtualDom}},{key:"parent",get:function(){return this.__parent}}]),s}(),x={},k=function(){function i(t){var e;return o(this,i),(e=s(this,C(i).call(this))).__content=t.toString(),e.__lineBoxes=[],e.__charWidthList=[],e.__charWidth=0,e.__textWidth=0,e}return t(i,l),e(i,[{key:"__measure",value:function(){this.__charWidthList=[];var t=this.ctx,e=this.content,i=this.style,r=this.charWidthList,n=this.renderMode;n===ft.CANVAS&&(t.font=m.setFontStyle(i));for(var a=x[i.fontSize]=x[i.fontSize]||{},s=e.length,o=0,h=0;h<s;h++){var l=e.charAt(h),u=void 0;a.hasOwnProperty(l)?u=a[l]:n===ft.CANVAS?u=a[l]=t.measureText(l).width:n===ft.SVG&&(u=a[l]=ft.measure(l,i)),r.push(u),o+=u,this.__charWidth=Math.max(this.charWidth,u)}this.__textWidth=o}},{key:"__layout",value:function(t,e){var i=this,r=t.x,n=t.y,a=t.w;t.h;this.__x=r,this.__y=n;for(var s=r,o=(this.ctx,this.content),h=this.style,l=this.lineBoxes,u=this.charWidthList,c=(this.renderMode,0),f=0,_=0,d=o.length;f<d;)if((_+=u[f])===a){var p=new b(this,r,n,_,o.slice(c,f+1),h);l.push(p),s=Math.max(s,r+_),n+=this.style.lineHeight.value,f=(c=f+1)+1,_=0}else if(a<_){f===c&&(f=c+1);var v=new b(this,r,n,_-u[f],o.slice(c,f),h);l.push(v),s=Math.max(s,r+_-u[f]),n+=this.style.lineHeight.value,c=f,f+=1,_=0}else f++;if(c<d&&c<f){for(_=0,f=c;f<d;f++)_+=u[f];var y=new b(this,r,n,_,o.slice(c,d),h);l.push(y),s=Math.max(s,r+_),n+=h.lineHeight.value}if(this.__width=s-r,this.__height=n-t.y,e)this.__lineBoxes=[];else{var g=h.textAlign;-1<["center","right"].indexOf(g)&&l.forEach(function(t){var e=i.__width-t.width;0<e&&t.__offsetX("center"===g?.5*e:e)})}}},{key:"render",value:function(e){var i=this.ctx,t=this.style;e===ft.CANVAS&&(i.font=m.setFontStyle(t),i.fillStyle=t.color),this.lineBoxes.forEach(function(t){t.render(e,i)}),e===ft.SVG&&(this.__virtualDom={type:"text",children:this.lineBoxes.map(function(t){return t.virtualDom})})}},{key:"__tryLayInline",value:function(t){return t-this.textWidth}},{key:"__calMaxAndMinWidth",value:function(){var e=0;return this.charWidthList.forEach(function(t){e=Math.max(e,t)}),{max:this.textWidth,min:e}}},{key:"content",get:function(){return this.__content},set:function(t){this.__content=t}},{key:"lineBoxes",get:function(){return this.__lineBoxes}},{key:"charWidthList",get:function(){return this.__charWidthList}},{key:"charWidth",get:function(){return this.__charWidth}},{key:"textWidth",get:function(){return this.__textWidth}},{key:"baseLine",get:function(){var t=this.lineBoxes[this.lineBoxes.length-1];return t.y-this.y+t.baseLine}},{key:"renderMode",get:function(){return this.__renderMode}}]),i}(),T=function(){function i(t,e){o(this,i),this.__list=[],this.__x=t,this.__y=e,this.__baseLine=0}return e(i,[{key:"add",value:function(t){this.list.push(t)}},{key:"__calBaseLine",value:function(){var e=0;return this.list.forEach(function(t){e=Math.max(e,t.baseLine)}),e}},{key:"verticalAlign",value:function(){var e=this;this.__baseLine=this.__calBaseLine(),1<this.list.length&&this.list.forEach(function(t){t.baseLine!==e.baseLine&&t.__offsetY(e.baseLine-t.baseLine)})}},{key:"horizonAlign",value:function(e){this.list.forEach(function(t){t.__offsetX(e)})}},{key:"list",get:function(){return this.__list}},{key:"x",get:function(){return this.__x}},{key:"y",get:function(){return this.__y}},{key:"width",get:function(){var e=0;return this.list.forEach(function(t){e+=t.width}),e}},{key:"height",get:function(){var e=0;return this.list.forEach(function(t){e=Math.max(e,t.height)}),e}},{key:"baseLine",get:function(){return this.__baseLine}},{key:"size",get:function(){return this.__list.length}}]),i}(),W={},A=function(){function i(t,e){return o(this,i),s(this,C(i).call(this,t,e))}return t(i,Q),e(i,[{key:"__initStyle",value:function(){m.normalize(this.style)}},{key:"__tryLayInline",value:function(t,e){var i=this.style.width;return i.unit===dt?t-i.value:i.unit===U?t-e*i.value*.01:t}},{key:"__calAutoBasis",value:function(t,e,i){var r=0,n=0,a=0,s=this.style,o=s.width,h=s.height,l=s.borderTopWidth,u=s.borderRightWidth,c=s.borderBottomWidth,f=s.borderLeftWidth,_=t?o:h;if(_.unit!==_t&&(r=a+=_.value),t){var d=u.value+f.value;r+=d,a+=d,n+=d}else{var p=l.value+c.value;r+=p,a+=p,n+=p}return{b:r,min:n,max:a}}},{key:"__layoutBlock",value:function(t){var e=t.x,i=t.y,r=t.w,n=t.h;this.__x=e,this.__y=i,this.__width=r;var a,s=this.style,o=s.width,h=s.height,l=s.borderTopWidth,u=s.borderRightWidth,c=s.borderBottomWidth,f=s.borderLeftWidth;if(o&&o.unit!==_t)switch(o.unit){case dt:r=o.value}if(h&&h.unit!==_t)switch(a=!0,h.unit){case dt:n=h.value;break;case U:n*=.01*h.value}e+=f.value,t.x=e,i+=l.value,t.y=i,r-=f.value+u.value,n-=l.value+c.value,this.__width=r,this.__height=a?n:0}},{key:"__layoutFlex",value:function(t){this.__layoutBlock(t)}},{key:"__layoutInline",value:function(t){var e=t.x,i=t.y,r=t.w,n=t.h;this.__x=e,this.__y=i;var a,s,o=this.style,h=o.width,l=o.height,u=o.borderTopWidth,c=o.borderRightWidth,f=o.borderBottomWidth,_=o.borderLeftWidth;if(h&&h.unit!==_t)switch(a=!0,h.unit){case dt:r=h.value}if(l&&l.unit!==_t)switch(s=!0,l.unit){case dt:n=l.value}e+=_.value,t.x=e,i+=u.value,t.y=i,r-=_.value+c.value,n-=u.value+f.value,this.__width=a?r:e-t.x,this.__height=s?n:i-t.y}},{key:"__calAbs",value:function(){return 0}},{key:"__emitEvent",value:function(t,e){var i,r=t.event.type,n=t.x,a=t.y,s=t.covers,o=this.listener,h=this.style,l=this.rx,u=this.ry,c=this.outerWidth,f=this.outerHeight;if("none"!==h.display)if(o.hasOwnProperty(r)&&(i=o[r]),e)i&&i(t);else if(l<=n&&u<=a&&n<=l+c&&a<=u+f){for(var _=0,d=s.length;_<d;_++){var p=s[_],v=p.x,y=p.y,g=p.w,w=p.h;if(v<=n&&y<=a&&n<=v+g&&a<=y+w)return}t.target||(t.target=this),s.push({x:n,y:a,w:c,h:f}),i&&i(t)}}},{key:"render",value:function(t){M(C(i.prototype),"render",this).call(this,t),t===ft.SVG&&(this.__virtualDom=a({},M(C(i.prototype),"virtualDom",this),{type:"geom",content:[]}))}},{key:"tagName",get:function(){return this.__tagName}},{key:"baseLine",get:function(){return this.__height}}],[{key:"getImplement",value:function(t){if(!W.hasOwnProperty(t))throw new Error("Geom has not register: ".concat(t));return W[t]}},{key:"register",value:function(t,e){if(W.hasOwnProperty(t))throw new Error("Geom has already register: ".concat(t));W[t]=e}}]),i}(),S={div:!0,span:!0},L={span:!0},N=function(){function l(t,e,i){var r;return o(this,l),(r=s(this,C(l).call(this,t,e))).__children=i,r.__flowChildren=[],r.__absChildren=[],r.__lineGroups=[],r.__flowY=0,r}return t(l,Q),e(l,[{key:"__traverse",value:function(e,t){var i=this,r=[];this.__traverseChildren(this.children,r,e,t);for(var n=r.length-1;0<n;n--){var a=r[n];if(a instanceof k){var s=r[n-1];s instanceof k?(s.content+=a.content,r.splice(n,1)):n--}}if("inline"===this.style.display&&"flex"!==this.parent.style.display)for(var o=r.length-1;0<=o;o--){var h=r[o];if(h instanceof l&&"inline"!==h.style.display)throw new Error("inline can not contain block/flex")}r.forEach(function(t){t.__ctx=e,t.__parent=i,t.__prev=null,t instanceof k||"absolute"!==t.style.position?i.__flowChildren.push(t):i.__absChildren.push(t)}),this.__children=r}},{key:"__traverseChildren",value:function(t,e,i,r){var n=this;if(Array.isArray(t))t.forEach(function(t){n.__traverseChildren(t,e,i,r)});else if(t instanceof l)e.push(t),t.__traverse(i,r);else if(t instanceof A)e.push(t);else if(!g.isNil(t)){var a=new k(t);a.__renderMode=r,e.push(a)}}},{key:"__initStyle",value:function(){var e=this.__style;e.display&&-1!==["flex","block","inline","none"].indexOf(e.display)||(L.hasOwnProperty(this.tagName)?e.display="inline":e.display="block");var t=this.parent;if(t){var i=t.style;["fontSize","fontWeight","fontStyle","lineHeight","wordBreak","color","textAlign"].forEach(function(t){!e.hasOwnProperty(t)&&i.hasOwnProperty(t)&&(e[t]=i[t])})}m.normalize(e),this.children.forEach(function(t){t instanceof Q?t.__initStyle():(t.__style=e,t.__measure())})}},{key:"__tryLayInline",value:function(t,e){var i=this.flowChildren,r=this.style.width;if(r.unit===dt)return t-r.value;if(r.unit===U)return t-e*r.value*.01;for(var n=0;n<i.length;n++){if(t<0)return t;var a=i[n];t-=a instanceof Q?a.__tryLayInline(t,e):a.textWidth}return t}},{key:"__offsetX",value:function(e){M(C(l.prototype),"__offsetX",this).call(this,e),this.flowChildren.forEach(function(t){t&&t.__offsetX(e)})}},{key:"__offsetY",value:function(e){M(C(l.prototype),"__offsetY",this).call(this,e),this.flowChildren.forEach(function(t){t&&t.__offsetY(e)})}},{key:"__calAutoBasis",value:function(a,s,o,t){var h=0,l=0,u=0,e=this.mtw,i=this.mrw,r=this.mbw,n=this.mlw,c=this.ptw,f=this.prw,_=this.pbw,d=this.plw,p=this.flowChildren,v=this.style,y=v.width,g=v.height,w=v.borderTopWidth,m=v.borderRightWidth,b=v.borderBottomWidth,x=v.borderLeftWidth,k=a?y:g;if(k.unit===dt&&(h=u=k.value,t&&(l=h)),p.forEach(function(t){if(t instanceof Q){var e=t.__calAutoBasis(a,s,o,!0),i=e.b,r=e.min,n=e.max;h=Math.max(h,i),l=Math.max(l,r),u=Math.max(u,n)}else u=a?(l=Math.max(t.charWidth,l),Math.max(t.textWidth,u)):(t.__layout({x:0,y:0,w:s,h:o},!0),l=Math.max(l,t.height),Math.max(u,t.height))}),a){var W=m.value+x.value+n+i+d+f;h+=W,u+=W,l+=W}else{var A=w.value+b.value+e+r+c+_;h+=A,u+=A,l+=A}return{b:h,min:l,max:u}}},{key:"__calAbs",value:function(i){var r=0,t=this.mtw,e=this.mrw,n=this.mbw,a=this.mlw,s=this.ptw,o=this.prw,h=this.pbw,l=this.plw,u=this.flowChildren,c=this.style,f=c.width,_=c.height,d=c.borderTopWidth,p=c.borderRightWidth,v=c.borderBottomWidth,y=c.borderLeftWidth,g=i?f:_;if(g.unit===dt&&(r=g.value),u.forEach(function(t){if(t instanceof Q){var e=t.__calAbs(i);r=Math.max(r,e)}else r=i?Math.max(t.textWidth,r):(t.__layout({x:0,y:0,w:1/0,h:1/0},!0),Math.max(r,t.height))}),i){var w=p.value+y.value+a+e+l+o;r+=w}else{var m=d.value+v.value+t+n+s+h;r+=m}return r}},{key:"__layoutBlock",value:function(e){var i=e.x,r=e.y,n=e.w,a=e.h;this.__x=i,this.__y=r,this.__width=n;var t,s=this.flowChildren,o=this.style,h=this.lineGroups,l=this.mlw,u=this.mtw,c=this.mrw,f=this.mbw,_=this.plw,d=this.ptw,p=this.prw,v=this.pbw,y=o.width,g=o.height,w=o.borderTopWidth,m=o.borderRightWidth,b=o.borderBottomWidth,x=o.borderLeftWidth,k=o.textAlign;if(y&&y.unit!==_t)switch(y.unit){case dt:n=y.value;break;case U:n*=.01*y.value}if(g&&g.unit!==_t)switch(t=!0,g.unit){case dt:a=g.value;break;case U:a*=.01*g.value}i+=x.value+l+_,e.x=i,r+=w.value+u+d,e.y=r,y.unit===_t&&(n-=x.value+m.value+l+c+_+p),a-=w.value+b.value+u+f+d+v;var W=new T(i,r);s.forEach(function(t){t instanceof Q?"inline"===t.style.display?i===e.x?(W.add(t),t.__layout({x:i,y:r,w:n,h:a}),i+=t.outerWidth):(0<=t.__tryLayInline(n-i,n)?t.__layout({x:i,y:r,w:n,h:a}):(h.push(W),W.verticalAlign(),i=e.x,r+=W.height,t.__layout({x:e.x,y:r,w:n,h:a}),W=new T(i,r)),i+=t.outerWidth,W.add(t)):(W.size&&(h.push(W),W.verticalAlign(),r+=W.height,W=new T(e.x,r)),t.__layout({x:e.x,y:r,w:n,h:a}),i=e.x,r+=t.outerHeight):i===e.x?(W.add(t),t.__layout({x:i,y:r,w:n,h:a}),i+=t.width):(0<=t.__tryLayInline(n-i,n)?t.__layout({x:i,y:r,w:n,h:a}):(h.push(W),W.verticalAlign(),i=e.x,r+=W.height,t.__layout({x:e.x,y:r,w:n,h:a}),W=new T(i,r)),i+=t.width,W.add(t))}),W.size&&(h.push(W),W.verticalAlign(),r+=W.height),-1<["center","right"].indexOf(k)&&h.forEach(function(t){var e=n-t.width;0<e&&t.horizonAlign("center"===k?.5*e:e)}),this.__width=n,this.__height=t?a:r-e.y,this.__flowY=r}},{key:"__layoutFlex",value:function(t){var A=t.x,S=t.y,L=t.w,T=t.h;this.__x=A,this.__y=S,this.__width=L;var e,N,i=this.flowChildren,r=this.style,n=this.mlw,a=this.mtw,s=this.mrw,o=this.mbw,h=this.plw,l=this.ptw,u=this.prw,c=this.pbw,f=r.width,_=r.height,d=r.flexDirection,p=r.borderTopWidth,v=r.borderRightWidth,y=r.borderBottomWidth,g=r.borderLeftWidth,w=r.justifyContent,m=r.alignItems;if(f&&f.unit!==_t)switch(e=!0,f.unit){case dt:L=f.value;break;case U:L*=.01*f.value}if(_&&_.unit!==_t)switch(N=!0,_.unit){case dt:T=_.value;break;case U:T*=.01*_.value}A+=g.value+n+h,t.x=A,S+=p.value+a+l,t.y=S,f.unit===_t&&(L-=g.value+v.value+n+s+h+u),T-=p.value+y.value+a+o+l+c;var E="row"===d;if(!E&&!N)return i.forEach(function(t){if(t instanceof Q){var e=t.style,i=t.style,r=i.display,n=i.flexDirection,a=i.width;"inline"===r?e.display="block":"flex"===r&&"row"===n&&a.unit===_t&&(a.value=L,a.unit=dt),t.__layout({x:A,y:S,w:L,h:T}),S+=t.outerHeight}else t.__layout({x:A,y:S,w:L,h:T}),S+=t.outerHeight}),this.__width=L,void(this.__height=S-t.y);var O=[],P=[],C=[],M=[],D=0,B=0,F=0,b=0;i.forEach(function(t){if(t instanceof Q){var e=t.style,i=e.flexGrow,r=e.flexShrink,n=e.flexBasis;O.push(i),P.push(r),D+=i,B+=r;var a=t.__calAutoBasis(E,L,T),s=a.b,o=a.min,h=a.max;n.unit===_t?(C.push(h),F+=h):n.unit===dt?(s=n.value,C.push(s),F+=s):n.unit===U&&(s=(E?L:T)*n.value,C.push(s),F+=s),b+=h,M.push(o)}else O.push(0),P.push(1),B+=1,E?(C.push(t.textWidth),F+=t.textWidth,b+=t.textWidth,M.push(t.charWidth)):(t.__layout({x:0,y:0,w:L,h:T},!0),C.push(t.height),F+=t.height,b+=t.height,M.push(t.height))});var V=0,j=(E?L:T)<b;i.forEach(function(t,e){var i,r=P[e],n=O[e];if(j){var a=F-(E?L:T);i=r?C[e]-a*r/B:C[e]}else{var s=(E?L:T)-F;i=n?C[e]+s*n/D:C[e]}if(i=Math.max(i,M[e]),t instanceof Q){var o=t.style,h=t.mlw,l=t.mtw,u=t.mrw,c=t.mbw,f=t.plw,_=t.ptw,d=t.prw,p=t.pbw,v=t.style,y=v.display,g=v.flexDirection,w=v.width,m=v.height,b=v.borderTopWidth,x=v.borderRightWidth,k=v.borderBottomWidth,W=v.borderLeftWidth;E?("inline"===y?o.display="block":"flex"===y&&"column"===g&&N&&m.unit===_t&&(m.value=T,m.unit=dt),t.__layout({x:A,y:S,w:i,h:T})):("inline"===y?o.display="block":"flex"===y&&"row"===g&&w.unit===_t&&(w.value=L,w.unit=dt),t.__layout({x:A,y:S,w:L,h:i})),j&&r?E?t.__width=i-h-u-f-d-W.value-x.value:t.__height=i-l-c-_-p-b.value-k.value:!j&&n&&(E?t.__width=i-h-u-f-d-W.value-x.value:t.__height=i-l-c-_-p-b.value-k.value)}else t.__layout({x:A,y:S,w:E?i:L,h:E?T:i});V=E?(A+=t.outerWidth,Math.max(V,t.outerHeight)):(S+=t.outerHeight,Math.max(V,t.outerWidth))});var x=E?L-A+t.x:T-S+t.y;if(!j&&0===D&&0<x){var k=i.length;if("flex-end"===w)for(var W=0;W<k;W++){var G=i[W];E?G.__offsetX(x):G.__offsetY(x)}else if("center"===w)for(var I=.5*x,Y=0;Y<k;Y++){var R=i[Y];E?R.__offsetX(I):R.__offsetY(I)}else if("space-between"===w)for(var X=x/(k-1),H=1;H<k;H++){var z=i[H];E?z.__offsetX(X*H):z.__offsetY(X*H)}else if("space-around"===w)for(var $=x/(k+1),Z=0;Z<k;Z++){var q=i[Z];E?q.__offsetX($*(Z+1)):q.__offsetY($*(Z+1))}}E?(N&&(V=T),S+=V):e&&(V=L),"stretch"===m?i.forEach(function(t){var e=t.style,i=t.mlw,r=t.mtw,n=t.mrw,a=t.mbw,s=t.ptw,o=t.prw,h=t.plw,l=t.pbw;E?e.height.unit===_t&&(t.__height=V-r-a-s-l-e.borderTopWidth.value-e.borderBottomWidth.value):e.width.unit===_t&&(t.__width=V-i-n-h-o-v.value-g.value)}):"center"===m?i.forEach(function(t){var e=V-t.outerHeight;0<e&&t.__offsetY(.5*e)}):"flex-end"===m&&i.forEach(function(t){var e=V-t.outerHeight;0<e&&t.__offsetY(e)}),this.__width=L,this.__height=N?T:S-t.y,this.__flowY=S}},{key:"__layoutInline",value:function(e){var i=this,r=e.x,n=e.y,a=e.w,s=e.h;this.__x=r,this.__y=n;var t,o,h=r,l=this.flowChildren,u=this.style,c=this.lineGroups,f=this.mlw,_=this.mtw,d=this.mrw,p=this.mbw,v=this.plw,y=this.ptw,g=this.prw,w=this.pbw,m=u.width,b=u.height,x=u.borderTopWidth,k=u.borderRightWidth,W=u.borderBottomWidth,A=u.borderLeftWidth,S=u.textAlign;if(m&&m.unit!==_t)switch(t=!0,m.unit){case dt:a=m.value;break;case U:a*=.01*m.value}if(b&&b.unit!==_t)switch(o=!0,b.unit){case dt:s=b.value;break;case U:s*=.01*b.value}r+=A.value+f+v,e.x=r,n+=x.value+_+y,e.y=n,m.unit===_t&&(a-=A.value+k.value+f+d+v+g),s-=x.value+W.value+_+p+y+w;var L=new T(r,n);l.forEach(function(t){if(t instanceof Q){if("absolute"===t.style.position)return void i.absChildren.push(t);if(t.style.display="inline",r===e.x)L.add(t),t.__layout({x:r,y:n,w:a,h:s}),r+=t.outerWidth,h=Math.max(h,r);else 0<=t.__tryLayInline(a-r,a)?t.__layout({x:r,y:n,w:a,h:s}):(c.push(L),L.verticalAlign(),r=e.x,n+=L.height,t.__layout({x:e.x,y:n,w:a,h:s}),L=new T(r,n)),r+=t.outerWidth,h=Math.max(h,r),L.add(t)}else{if(r===e.x)L.add(t),t.__layout({x:r,y:n,w:a,h:s}),r+=t.width,h=Math.max(h,r);else 0<=t.__tryLayInline(a-r,a)?t.__layout({x:r,y:n,w:a,h:s}):(c.push(L),L.verticalAlign(),r=e.x,n+=L.height,t.__layout({x:e.x,y:n,w:a,h:s}),L=new T(r,n)),r+=t.width,h=Math.max(h,r),L.add(t)}}),L.size&&(c.push(L),L.verticalAlign(),n+=L.height),-1<["center","right"].indexOf(S)&&c.forEach(function(t){var e=a-t.width;0<e&&t.horizonAlign("center"===S?.5*e:e)}),this.__width=t?a:h-e.x,this.__height=o?s:n-e.y,this.__flowY=n}},{key:"__layoutAbs",value:function(e){var y=this.x,g=this.y,w=this.flowY,m=this.width,b=this.height,t=this.children,i=this.absChildren,r=this.style,n=(this.mlw,this.mtw,this.mrw,this.mbw,this.plw),a=this.ptw,s=this.prw,o=this.pbw,x=r.borderTopWidth,k=r.borderLeftWidth,W=m+n+s,A=b+a+o;t.forEach(function(t){t instanceof l&&t.__layoutAbs(-1<["absolute","relative"].indexOf(t.style.position)?t:e)}),i.forEach(function(t){var e,i,r,n,a=t.mtw,s=t.mlw,o=t.style,h=t.style,l=h.left,u=h.top,c=h.right,f=h.bottom,_=h.width,d=h.height;if(l.unit!==_t&&c.unit!==_t)e=l.unit===dt?y+s+k.value+l.value:y+s+k.value+m*l.value*.01,r=c.unit===dt?y+s+k.value+W-c.value-e:y+s+k.value+W-m*c.value*.01-e;else if(l.unit!==_t&&_.unit!==_t)e=l.unit===dt?y+s+k.value+l.value:y+s+k.value+m*l.value*.01,r=_.unit===dt?_.value:m;else if(c.unit!==_t&&_.unit!==_t){r=_.unit===dt?_.value:m;var p=_.unit===dt?_.value:m*_.value*.01;e=c.unit===dt?y+s+k.value+W-c.value-p:y+s+k.value+W-m*c.value*.01-p}else l.unit!==_t?(e=l.unit===dt?y+l.value:y+s+k.value+m*l.value*.01,r=t.__calAbs(!0)):c.unit!==_t?(r=t.__calAbs(!0),e=c.unit===dt?y+s+k.value+W-c.value-r:y+s+k.value+W-m*c.value*.01-r):r=_.unit!==_t?(e=y+s+k.value,_.unit===dt?_.value:m):(e=y+s+k.value,t.__calAbs(!0));if(u.unit!==_t&&f.unit!==_t)i=u.unit===dt?g+u.value:g+a+x.value+b*u.value*.01,n=f.unit===dt?g+a+x.value+A-f.value-i:g+a+x.value+A-b*f.value*.01-i,o.height={value:n,unit:dt};else if(u.unit!==_t&&d.unit!==_t)i=u.unit===dt?g+u.value:g+a+x.value+b*u.value*.01,n=d.unit===dt?d.value:b;else if(f.unit!==_t&&d.unit!==_t){n=d.unit===dt?d.value:b;var v=d.unit===dt?d.value:b*d.value*.01;i=f.unit===dt?g+a+x.value+A-f.value-v:g+a+x.value+A-b*f.value*.01-v}else u.unit!==_t?(i=u.unit===dt?g+u.value:g+a+x.value+b*u.value*.01,n=t.__calAbs()):f.unit!==_t?(n=t.__calAbs(),i=f.unit===dt?g+a+x.value+A-f.value-n:g+a+x.value+A-b*f.value*.01-n):n=d.unit!==_t?(i=w+a+x.value,d.unit===dt?d.value:b):(i=w+a+x.value,t.__calAbs());"inline"===o.display&&(o.display="block"),t.__layout({x:e,y:i,w:r,h:n})})}},{key:"__emitEvent",value:function(t,e){var i=t.event.type,r=t.x,n=t.y,a=t.covers,s=this.listener,o=this.children,h=this.style,l=this.rx,u=this.ry,c=this.outerWidth,f=this.outerHeight;if("none"!==h.display){var _,d;s.hasOwnProperty(i)&&(_=s[i]);for(var p=o.length-1;0<=p;p--){var v=o[p];v instanceof Q&&-1<["absolute","relative"].indexOf(v.style.position)&&v.__emitEvent(t,e)&&(d=!0)}for(var y=o.length-1;0<=y;y--){var g=o[y];g instanceof Q&&-1===["absolute","relative"].indexOf(g.style.position)&&g.__emitEvent(t,e)&&(d=!0)}if(e)_&&_(t);else if(d)a.push({x:r,y:n,w:c,h:f}),_&&_(t);else if(l<=r&&u<=n&&r<=l+c&&n<=u+f){for(var w=0,m=a.length;w<m;w++){var b=a[w],x=b.x,k=b.y,W=b.w,A=b.h;if(x<=r&&k<=n&&r<=x+W&&n<=k+A)return}t.target||(t.target=this),a.push({x:r,y:n,w:c,h:f}),_&&_(t)}}}},{key:"render",value:function(e){M(C(l.prototype),"render",this).call(this,e);var t=this.style,i=this.flowChildren,r=this.children,n=t.display;t.position,t.top,t.right,t.bottom,t.left,t.height;"none"!==n&&(i.forEach(function(t){(t instanceof k||"static"===t.style.position)&&t.render(e)}),r.forEach(function(t){t instanceof Q&&-1<["relative","absolute"].indexOf(t.style.position)&&t.render(e)}),e===ft.SVG&&(this.__virtualDom=a({},M(C(l.prototype),"virtualDom",this),{type:"dom",children:this.children.map(function(t){return t.virtualDom})})))}},{key:"tagName",get:function(){return this.__tagName}},{key:"children",get:function(){return this.__children}},{key:"flowChildren",get:function(){return this.__flowChildren}},{key:"absChildren",get:function(){return this.__absChildren}},{key:"lineGroups",get:function(){return this.__lineGroups}},{key:"baseLine",get:function(){var t=this.lineGroups.length;if(t){var e=this.lineGroups[t-1];return e.y-this.y+e.baseLine}return this.y}},{key:"flowY",get:function(){return this.__flowY}}],[{key:"isValid",value:function(t){return S.hasOwnProperty(t)}}]),l}();function E(t,e,i){"dom"===e.type?"dom"===i.type?function(t,e,i){O(t.firstChild,e.bb,i.bb);for(var r=e.children.length,n=i.children.length,a=0,s=t.lastChild,o=s.childNodes;a<Math.min(r,n);a++)E(o[a],e.children[a],i.children[a]);if(a<r)for(;a<r;a++)V(s,o,a);else if(a<n)for(;a<n;a++)F(s,o,a,i.children[a])}(t,e,i):"text"===i.type?B(t,i):"geom"===i.type&&function(t,e,i){O(t.firstChild,e.bb,i.bb),B(t.lastChild,i.content)}(t,e,i):"text"===i.type?"dom"===i.type?B(t,i):"text"===i.type?function(t,e,i){for(var r=e.children.length,n=i.children.length,a=0;a<Math.min(r,n);a++)D(t,a,e.children[a],i.children[a],!0);var s=t.childNodes;if(a<r)for(;a<r;a++)V(t,s,a);else if(a<n)for(;a<n;a++)F(t,s,a,i.children[a])}(t,e,i):"geom"===i.type&&B(t,i):"geom"===i.type&&("dom"===i.type?function(t,e,i){O(t.firstChild,e.bb,i.bb),B(t.lastChild,i.children)}(t,e,i):"text"===i.type?B(t,i):"geom"===i.type&&function(t,e,i){O(t.firstChild,e.bb,i.bb);for(var r=e.content.length,n=i.content.length,a=0,s=t.lastChild,o=s.childNodes;a<Math.min(r,n);a++)D(s,a,e.content[a],i.content[a]);if(a<r)for(;a<r;a++)V(s,o,a);else if(a<n)for(;a<n;a++)F(s,o,a,i.content[a])}(t,e,i))}function O(t,e,i){for(var r=e.length,n=i.length,a=0;a<Math.min(r,n);a++)D(t,a,e[a],i[a]);var s=t.childNodes;if(a<r)for(;a<r;a++)V(t,s,a);else if(a<n)for(;a<n;a++)F(t,s,a,i[a])}function D(t,e,i,r,n){var a=t.childNodes;if(i.tagName!==r.tagName)B(a[e],r);else{for(var s={},o=0,h=i.props.length;o<h;o++){var l=P(i.props[o],2),u=l[0],c=l[1];s[u]=c}for(var f=0,_=r.props.length;f<_;f++){var d=P(r.props[f],2),p=d[0];c=d[1];s.hasOwnProperty(p)?(s[p]!==c&&a[e].setAttribute(p,c),delete s[p]):a[e].setAttribute(p,c)}for(var v in s)s.hasOwnProperty(v)&&a[e].removeAttribute(v);n&&i.content!==r.content&&(a[e].textContent=r.content)}}function B(t,e){var i;Array.isArray(e)?(i="",e.forEach(function(t){i+=g.joinVirtualDom(t)})):i=g.joinVirtualDom(e),t.insertAdjacentHTML("afterend",i),t.parentNode.removeChild(t)}function F(t,e,i,r){var n=g.joinVirtualDom(r);i>=e.length?t.insertAdjacentHTML("beforeend",n):e[i].insertAdjacentHTML("beforebegin",n)}function V(t,e,i){e[i]&&t.removeChild(e[i])}var j=function(){function n(t,e,i){var r;return o(this,n),(r=s(this,C(n).call(this,t,e,i))).__node=null,r}return t(n,N),e(n,[{key:"__initProps",value:function(){if(void 0!==this.props.width){var t=parseInt(this.props.width);!isNaN(t)&&0<t&&(this.__width=t)}if(void 0!==this.props.height){var e=parseInt(this.props.height);!isNaN(e)&&0<e&&(this.__height=e)}}},{key:"__genHtml",value:function(){for(var t,e,i,r="<".concat(this.tagName),n=0,a=this.__props.length;n<a;n++){var s=this.__props[n];r+=(t=s[0],e=s[1],void 0,i=Array.isArray(e)?g.joinSourceArray(e):g.stringify(e),"className"===t&&(t="class")," "+t+'="'+g.encodeHtml(i,!0)+'"')}return r+="></".concat(this.tagName,">")}},{key:"__cb",value:function(t,e){if(!(t.touches&&1<t.touches.length)){var i=this.node.getBoundingClientRect(),r=i.x,n=i.y,a=i.top,s=i.right;r=r||a||0,n=n||s||0;var o=t.touches?t.touches[0]||{}:t;r=o.clientX-r,n=o.clientY-n,this.__emitEvent({event:t,x:r,y:n,covers:[]},e)}}},{key:"__initEvent",value:function(){var i=this,t=this.node;["click","dblclick","mousedown","mousemove","mouseup","touchstart","touchmove","touchend","touchcancel"].forEach(function(e){t.addEventListener(e,function(t){i.__cb(t,-1<["touchend","touchcancel"].indexOf(e))})})}},{key:"appendTo",value:function(t){if(t=function(t){if(g.isString(t)){var e=document.querySelector(t);if(!e)throw new Error("can not find dom of selector: "+t);return e}if(!t)throw new Error("can not find dom: "+t);return t}(t),this.__initProps(),t.nodeName.toUpperCase()===this.tagName.toUpperCase()?(this.__node=t,this.width&&t.setAttribute("width",this.width),this.height&&t.setAttribute("height",this.height)):(this.__node=t.querySelector(this.tagName),this.__node||(t.innerHTML=this.__genHtml(),this.__node=t.querySelector(this.tagName))),!this.width||!this.height){var e=window.getComputedStyle(t,null);this.width||(this.__width=parseInt(e.getPropertyValue("width")),t.setAttribute("width",this.width)),this.height||(this.__height=parseInt(e.getPropertyValue("height")),t.setAttribute("height",this.height))}var i;"canvas"===this.tagName?(this.__ctx=this.__node.getContext("2d"),this.__ctx.clearRect(0,0,this.width,this.height),i=ft.CANVAS):"svg"===this.tagName&&(i=ft.SVG);var r=this.style;if(-1===["flex","block"].indexOf(r.display)&&(r.display="block"),"absolute"===r.position&&(r.position="static"),this.__traverse(this.__ctx,i),r.width=this.width,r.height=this.height,this.__initStyle(),this.__layout({x:0,y:0,w:this.width,h:this.height}),this.__layoutAbs(this),this.render(i),i===ft.SVG){var n=this.virtualDom;this.node.__karasInit?E(this.node.firstChild,this.node.__ovd,n):this.node.innerHTML=g.joinVirtualDom(n),this.node.__ovd=n}this.node.__karasInit||(this.node.__karasInit=!0,this.__initEvent())}},{key:"node",get:function(){return this.__node}}]),n}(),G=function(){function P(t,e){var i;return o(this,P),(i=s(this,C(P).call(this,t,e))).__start=[],i.__end=[],i.__control=[],Array.isArray(i.props.start)&&(i.__start=i.props.start),Array.isArray(i.props.end)&&(i.__end=i.props.end),Array.isArray(i.props.control)&&(i.__control=i.props.control),i}return t(P,A),e(P,[{key:"render",value:function(t){M(C(P.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,s=this.mtw,o=this.plw,h=this.ptw,l=this.style,u=this.ctx,c=this.start,f=this.end,_=this.control,d=this.virtualDom;if(!(c.length<2||f.length<2)){var p=l.display,v=l.borderTopWidth,y=(l.borderRightWidth,l.borderBottomWidth,l.borderLeftWidth),g=l.stroke,w=l.strokeWidth,m=l.strokeDasharray;if("none"!==p){var b,x,k,W,A=e+y.value+a+o,S=i+v.value+s+h,L=A+c[0]*r,T=S+c[1]*n,N=A+f[0]*r,E=S+f[1]*n,O=0;Array.isArray(_[0])&&(O++,b=A+_[0][0]*r,x=S+_[0][1]*n),Array.isArray(_[1])&&(O++,k=A+_[1][0]*r,W=S+_[1][1]*n),t===ft.CANVAS?(u.strokeStyle=g,u.lineWidth=w,u.setLineDash(m),u.beginPath(),u.moveTo(L,T),2===O?u.bezierCurveTo(b,x,k,W,N,E):1===O?u.quadraticCurveTo(b,x,N,E):u.lineTo(N,E),u.stroke(),u.closePath()):t===ft.SVG&&(2===O?d.content.push({type:"item",tagName:"path",props:[["d","M".concat(L," ").concat(T," C").concat(b," ").concat(x," ").concat(k," ").concat(W," ").concat(N," ").concat(E)],["fill","none"],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]}):1===O?d.content.push({type:"item",tagName:"path",props:[["d","M".concat(L," ").concat(T," Q").concat(b," ").concat(x," ").concat(N," ").concat(E)],["fill","none"],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]}):d.content.push({type:"item",tagName:"line",props:[["x1",L],["y1",T],["x2",N],["y2",E],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]}))}}}},{key:"start",get:function(){return this.__start}},{key:"end",get:function(){return this.__end}},{key:"control",get:function(){return this.__control}}]),P}(),I=function(){function P(t,e){var i;return o(this,P),(i=s(this,C(P).call(this,t,e))).__points=[],Array.isArray(i.props.points)&&(i.__points=i.props.points),-1<["TOP_LEFT","TOP_RIGHT","BOTTOM_LEFT","BOTTOM_RIGHT"].indexOf(i.props.origin)?i.__origin=i.props.origin:i.__origin="BOTTOM_LEFT",i}return t(P,A),e(P,[{key:"render",value:function(t){M(C(P.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,s=this.mtw,o=this.plw,h=this.ptw,l=this.style,u=this.ctx,c=this.points,f=this.origin,_=this.virtualDom;if(!(c.length<2)){for(var d=0,p=c.length;d<p;d++)if(!Array.isArray(c[d])||c[d].length<2)return;var v=l.display,y=l.borderTopWidth,g=l.borderLeftWidth,w=l.stroke,m=l.strokeWidth,b=l.strokeDasharray;if("none"!==v){var x=e+g.value+a+o,k=i+y.value+s+h,W=this.__pts=[];if("TOP_LEFT"===f?c.forEach(function(t){W.push([x+t[0]*r,k+t[1]*n])}):"TOP_RIGHT"===f?c.forEach(function(t){W.push([x+r-t[0]*r,k+t[1]*n])}):"BOTTOM_LEFT"===f?c.forEach(function(t){W.push([x+t[0]*r,k+n-t[1]*n])}):"BOTTOM_RIGHT"===f&&c.forEach(function(t){W.push([x+r-t[0]*r,k+n-t[1]*n])}),t===ft.CANVAS){u.strokeStyle=w,u.lineWidth=m,u.setLineDash(b),u.beginPath(),u.moveTo(W[0][0],k+W[0][1]);for(var A=1,S=W.length;A<S;A++){var L=W[A];u.lineTo(L[0],L[1])}m&&"transparent"!==w&&u.stroke(),u.closePath()}else if(t===ft.SVG){for(var T="",N=0,E=W.length;N<E;N++){var O=W[N];T+="".concat(O[0],",").concat(O[1]," ")}_.content.push({type:"item",tagName:"polyline",props:[["points",T],["fill","none"],["stroke",w],["stroke-width",m],["stroke-dasharray",b]]})}}}}},{key:"getPointsByX",value:function(t){for(var e=1/0,i=this.__pts.length,r=[],n=0;n<i;n++){var a=Math.abs(this.__pts[n][0]-t);a<e&&(e=a)}for(var s=0;s<i;s++){Math.abs(this.__pts[s][0]-t)===e&&r.push({index:s,x:this.__pts[s][0],y:this.__pts[s][1]})}return r}},{key:"points",get:function(){return this.__points}},{key:"origin",get:function(){return this.__origin}}]),P}(),Y=function(){function O(t,e){var i;return o(this,O),(i=s(this,C(O).call(this,t,e))).__points=[],Array.isArray(i.props.points)&&(i.__points=i.props.points),i}return t(O,A),e(O,[{key:"render",value:function(t){M(C(O.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,s=this.mtw,o=this.plw,h=this.ptw,l=this.style,u=this.ctx,c=this.points,f=this.virtualDom;if(!(c.length<3)){for(var _=0,d=c.length;_<d;_++)if(!Array.isArray(c[_])||c[_].length<2)return;var p=l.display,v=l.borderTopWidth,y=l.borderLeftWidth,g=l.stroke,w=l.strokeWidth,m=l.strokeDasharray,b=l.fill;if("none"!==p){var x=e+y.value+a+o,k=i+v.value+s+h;if(c.forEach(function(t){t[0]=x+t[0]*r,t[1]=k+t[1]*n}),t===ft.CANVAS){u.strokeStyle=g,u.lineWidth=w,u.fillStyle=b,u.setLineDash(m),u.beginPath(),u.moveTo(c[0][0],k+c[0][1]);for(var W=1,A=c.length;W<A;W++){var S=c[W];u.lineTo(S[0],S[1])}u.fill(),w&&"transparent"!==g&&u.stroke(),u.closePath()}else if(t===ft.SVG){for(var L="",T=0,N=L.length;T<N;T++){var E=L[T];L+="".concat(E[0],",").concat(E[1]," ")}f.content.push({type:"item",tagName:"polygon",props:[["points",L],["fill",b],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]})}}}}},{key:"points",get:function(){return this.__points}}]),O}(),R=.5*Math.PI;function X(t,e,i,r){for(;360<r;)r-=360;for(;r<0;)r+=360;return 0<=r&&r<90?[t+Math.sin(r*Math.PI/180)*i,e-Math.cos(r*Math.PI/180)*i]:90<=r&&r<180?[t+Math.cos((r-90)*Math.PI/180)*i,e+Math.sin((r-90)*Math.PI/180)*i]:180<=r&&r<270?[t-Math.cos((270-r)*Math.PI/180)*i,e+Math.sin((270-r)*Math.PI/180)*i]:[t-Math.sin((360-r)*Math.PI/180)*i,e-Math.cos((360-r)*Math.PI/180)*i]}var H=function(){function O(t,e){var i;return o(this,O),(i=s(this,C(O).call(this,t,e))).__start=0,i.__end=0,i.props.start&&(i.__start=parseFloat(i.props.start),isNaN(i.start)&&(i.__start=0)),i.props.end&&(i.__end=parseFloat(i.props.end),isNaN(i.end)&&(i.__end=0)),i.__r=1,i.props.r&&(i.__r=parseFloat(i.props.r),isNaN(i.r)&&(i.__r=1)),i}return t(O,A),e(O,[{key:"render",value:function(t){M(C(O.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,s=this.mtw,o=this.plw,h=this.ptw,l=this.style,u=this.ctx,c=this.start,f=this.end,_=this.r,d=this.virtualDom;if(c!==f){var p=l.display,v=l.borderTopWidth,y=l.borderLeftWidth,g=l.stroke,w=l.strokeWidth,m=l.strokeDasharray,b=l.fill;if("none"!==p){var x=e+y.value+a+o,k=i+v.value+s+h;if(x+=.5*r,k+=.5*n,_*=.5*Math.min(r,n),t===ft.CANVAS)u.strokeStyle=g,u.lineWidth=w,u.fillStyle=b,u.setLineDash(m),u.beginPath(),u.moveTo(x,k),u.arc(x,k,_,c*Math.PI/180-R,f*Math.PI/180-R),u.fill(),w&&"transparent"!==g&&u.stroke(),u.closePath();else if(t===ft.SVG){var W,A,S,L,T=P(X(x,k,_,c),2);W=T[0],A=T[1];var N=P(X(x,k,_,f),2);S=N[0],L=N[1];var E=180<f-c?1:0;d.content.push({type:"item",tagName:"path",props:[["d","M".concat(x," ").concat(k," L").concat(W," ").concat(A," A").concat(_," ").concat(_," 0 ").concat(E," 1 ").concat(S," ").concat(L," z")],["fill",b],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]})}}}}},{key:"start",get:function(){return this.__start}},{key:"end",get:function(){return this.__end}},{key:"r",get:function(){return this.__r}}]),O}(),z=function(){function b(t,e){return o(this,b),s(this,C(b).call(this,t,e))}return t(b,A),e(b,[{key:"render",value:function(t){M(C(b.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,s=this.mtw,o=this.plw,h=this.ptw,l=this.style,u=this.ctx,c=this.virtualDom,f=l.display,_=l.borderTopWidth,d=l.borderLeftWidth,p=l.stroke,v=l.strokeWidth,y=l.strokeDasharray,g=l.fill;if("none"!==f){var w=e+d.value+a+o,m=i+_.value+s+h;t===ft.CANVAS?(u.strokeStyle=p,u.lineWidth=v,u.fillStyle=g,u.setLineDash(y),u.beginPath(),u.moveTo(w,m),u.lineTo(w+r,m),u.lineTo(w+r,m+n),u.lineTo(w,m+n),u.fill(),v&&"transparent"!==p&&u.stroke(),u.closePath()):t===ft.SVG&&c.content.push({type:"item",tagName:"rect",props:[["x",e],["y",i],["width",r],["height",n],["fill",g],["stroke",p],["stroke-width",v],["stroke-dasharray",y]]})}}}]),b}(),$=function(){function x(t,e){var i;return o(this,x),(i=s(this,C(x).call(this,t,e))).__r=1,i.props.r&&(i.__r=parseFloat(i.props.r),isNaN(i.r)&&(i.__r=1)),i}return t(x,A),e(x,[{key:"render",value:function(t){M(C(x.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,s=this.mtw,o=this.plw,h=this.ptw,l=this.style,u=this.ctx,c=this.r,f=this.virtualDom,_=l.display,d=l.borderTopWidth,p=l.borderLeftWidth,v=l.stroke,y=l.strokeWidth,g=l.strokeDasharray,w=l.fill;if("none"!==_){var m=e+p.value+a+o,b=i+d.value+s+h;m+=.5*r,b+=.5*n,c*=.5*Math.min(r,n),t===ft.CANVAS?(u.strokeStyle=v,u.lineWidth=y,u.fillStyle=w,u.setLineDash(g),u.beginPath(),u.arc(m,b,c,0,2*Math.PI),"transparent"!==w&&u.fill(),y&&"transparent"!==v&&u.stroke(),u.closePath()):t===ft.SVG&&f.content.push({type:"item",tagName:"circle",props:[["cx",m],["cy",b],["r",c],["fill",w],["stroke",v],["stroke-width",y],["stroke-dasharray",g]]})}}},{key:"r",get:function(){return this.__r}}]),x}(),Z=function(){function k(t,e){var i;return o(this,k),(i=s(this,C(k).call(this,t,e))).__rx=1,i.props.rx&&(i.__rx=parseFloat(i.props.rx),isNaN(i.rx)&&(i.__rx=1)),i.__ry=1,i.props.ry&&(i.__ry=parseFloat(i.props.ry),isNaN(i.rx)&&(i.__ry=1)),i}return t(k,A),e(k,[{key:"render",value:function(t){M(C(k.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,s=this.mtw,o=this.plw,h=this.ptw,l=this.style,u=this.ctx,c=this.rx,f=this.ry,_=this.virtualDom,d=l.display,p=l.borderTopWidth,v=l.borderLeftWidth,y=l.stroke,g=l.strokeWidth,w=l.strokeDasharray,m=l.fill;if("none"!==d){var b=e+v.value+a+o,x=i+p.value+s+h;b+=.5*r,x+=.5*n,c*=.5*r,f*=.5*n,t===ft.CANVAS?(u.strokeStyle=y,u.lineWidth=g,u.fillStyle=m,u.setLineDash(w),u.beginPath(),u.moveTo(b,x),u.ellipse&&u.ellipse(b,x,c,f,0,0,2*Math.PI),u.fill(),g&&"transparent"!==y&&u.stroke(),u.closePath()):t===ft.SVG&&_.content.push({type:"item",tagName:"ellipse",props:[["cx",b],["cy",x],["rx",c],["ry",f],["fill",m],["stroke",y],["stroke-width",g],["stroke-dasharray",w]]})}}},{key:"rx",get:function(){return this.__rx}},{key:"ry",get:function(){return this.__ry}}]),k}(),q=function(){function E(t,e){var i;return o(this,E),(i=s(this,C(E).call(this,t,e))).__nx=0,i.props.nx&&(i.__nx=parseFloat(i.props.nx),isNaN(i.nx)&&(i.__nx=0)),i.__ny=0,i.props.ny&&(i.__ny=parseFloat(i.props.ny),isNaN(i.ny)&&(i.__ny=0)),i}return t(E,A),e(E,[{key:"render",value:function(t){M(C(E.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,s=this.mtw,o=this.plw,h=this.ptw,l=this.style,u=this.ctx,c=this.nx,f=this.ny,_=this.virtualDom;if(!(r<=0||n<=0||c<3&&f<3)){var d=l.display,p=l.borderTopWidth,v=l.borderLeftWidth,y=l.stroke,g=l.strokeWidth,w=l.strokeDasharray;if("none"!==d){var m=e+v.value+a+o,b=i+p.value+s+h,x=m+r,k=b+n,W=[],A=[];if(3<=c)for(var S=r/(c-1),L=0;L<c;L++)A.push(m+L*S);if(3<=f)for(var T=n/(f-1),N=0;N<f;N++)W.push(b+N*T);t===ft.CANVAS?(u.strokeStyle=y,u.lineWidth=g,u.setLineDash(w),u.beginPath(),W.forEach(function(t){u.moveTo(m,t),u.lineTo(x,t)}),A.forEach(function(t){u.moveTo(t,b),u.lineTo(t,k)}),g&&"transparent"!==y&&u.stroke(),u.closePath()):t===ft.SVG&&(W.forEach(function(t){_.content.push({type:"item",tagName:"line",props:[["x1",m],["y1",t],["x2",x],["y2",t],["stroke",y],["stroke-width",g],["stroke-dasharray",w]]})}),A.forEach(function(t){_.content.push({type:"item",tagName:"line",props:[["x1",t],["y1",b],["x2",t],["y2",k],["stroke",y],["stroke-width",g],["stroke-dasharray",w]]})}))}}}},{key:"nx",get:function(){return this.__nx}},{key:"ny",get:function(){return this.__ny}},{key:"dash",get:function(){return this.__dash}}]),E}();A.register("$line",G),A.register("$polyline",I),A.register("$polygon",Y),A.register("$sector",H),A.register("$rect",z),A.register("$circle",$),A.register("$ellipse",Z),A.register("$grid",q);var J={render:function(t,e){if(!(t instanceof j))throw new Error("render root muse be canvas or svg");return e&&t.appendTo(e),t},createVd:function(t,e,i){if(-1<["canvas","svg"].indexOf(t))return new j(t,e,i);if(N.isValid(t))return new N(t,e,i);throw new Error("can not use marker: "+t)},createGm:function(t,e){return new(A.getImplement(t))(t,e)},createCp:function(t,e){return new t(e)},Geom:A,mode:ft};return"undefined"!=typeof window&&(window.karas=J),J}); | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).karas=e()}(this,function(){"use strict";function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function e(t,e,i){return e&&r(t.prototype,e),i&&r(t,i),t}function i(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),i.push.apply(i,r)}return i}function a(n){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(a,!0).forEach(function(t){var e,i,r;e=n,r=a[i=t],i in e?Object.defineProperty(e,i,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[i]=r}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):i(a).forEach(function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(a,t))})}return n}function t(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&n(t,e)}function C(t){return(C=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function B(t,e,i){return(B="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,i){var r=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=C(t)););return t}(t,e);if(r){var n=Object.getOwnPropertyDescriptor(r,e);return n.get?n.get.call(i):n.value}})(t,e,i||t)}function E(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if(!(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t)))return;var i=[],r=!0,n=!1,a=void 0;try{for(var o,s=t[Symbol.iterator]();!(r=(o=s.next()).done)&&(i.push(o.value),!e||i.length!==e);r=!0);}catch(t){n=!0,a=t}finally{try{r||null==s.return||s.return()}finally{if(n)throw a}}return i}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var h,l=function(){function t(){s(this,t),this.__x=0,this.__y=0,this.__ox=0,this.__oy=0,this.__width=0,this.__height=0,this.__prev=null,this.__next=null,this.__ctx=null,this.__parent=null,this.__style={},this.__baseLine=0,this.__virtualDom={}}return e(t,[{key:"__offsetX",value:function(t){this.__ox+=t}},{key:"__offsetY",value:function(t){this.__oy+=t}},{key:"x",get:function(){return this.__x}},{key:"y",get:function(){return this.__y}},{key:"ox",get:function(){return this.__ox}},{key:"oy",get:function(){return this.__oy}},{key:"rx",get:function(){return this.x+this.ox}},{key:"ry",get:function(){return this.y+this.oy}},{key:"width",get:function(){return this.__width}},{key:"height",get:function(){return this.__height}},{key:"outerWidth",get:function(){return this.__width}},{key:"outerHeight",get:function(){return this.__height}},{key:"prev",get:function(){return this.__prev}},{key:"next",get:function(){return this.__next}},{key:"parent",get:function(){return this.__parent}},{key:"style",get:function(){return this.__style}},{key:"ctx",get:function(){return this.__ctx}},{key:"baseLine",get:function(){return this.__baseLine}},{key:"virtualDom",get:function(){return this.__virtualDom}}]),t}(),ne={CANVAS:0,SVG:1,measure:function(t,e){h||((h=document.createElement("div")).style.position="absolute",h.style.left="99999px",h.style.top="-99999px",h.style.visibility="hidden",document.body.appendChild(h)),h.style.fontSize=e.fontSize+"px",h.innerText=t;var i=window.getComputedStyle(h,null);return parseFloat(i.width)}},ae=0,oe=1,U=2;function d(t,e,i,r,n,a,o,s){var h=1,l=1,u=1;t:for(var f=a;n<=f;f--)for(var c=s;o<=c;c--){var _=f+c,d=Math.floor((t+c)/_),p=c;if(d*_<c+t)if(s<(p=(t-d*f)/(d-1)))continue;if(_=f+p,1<e&&f<e){if(f<e%_)continue;if(1<i)if(f<(e+r)%_)continue}if(1<i)if(f<(e+r)%_)continue;0<d&&(h=d,l=f,u=p);break t}return{n:h,ps:l,pd:u}}function se(t,e,i,r,n,a){var o=n-e,s=r-i,h=i-e,l=n-r;if("dotted"===t)return d(o,h,l,s,a,a,Math.max(1,.25*a),2*a);var u=d(o,h,l,s,a,3*a,Math.max(1,.25*a),2*a),f=u.n,c=u.ps,_=u.pd;return 1===f?d(o,h,l,s,a,a,Math.max(1,.25*a),2*a):{n:f,ps:c,pd:_}}function he(t,e,r,n,i){if(t===ne.CANVAS)e.forEach(function(t){n.beginPath(),n.fillStyle=r,n.moveTo(t[0],t[1]);for(var e=2,i=t.length;e<i;e+=2)n.lineTo(t[e],t[e+1]);n.fill(),n.closePath()});else if(t===ne.SVG){var a="";e.forEach(function(t){a+="M ".concat(t[0]," ").concat(t[1]);for(var e=2,i=t.length;e<i;e+=2)a+="L ".concat(t[e]," ").concat(t[e+1]," ")});var o={type:"item",tagName:"path",props:[["d",a],["fill",r]]};i.bb.push(o)}}var Q=function(){function r(t,e){var i;return s(this,r),i=o(this,C(r).call(this)),e=e||[],Array.isArray(e)?(i.props=function(t){for(var e={},i=0,r=t.length;i<r;i++){var n=t[i];if(Array.isArray(n))e[n[0]]=n[1];else for(var a=Object.keys(n),o=a.length-1;0<=o;o--){var s=a[o];e[s]=n[s]}}return e}(e),i.__props=function(t){for(var e=0,i=t.length;e<i;e++){var r=t[e];if(!Array.isArray(r)){for(var n=[],a=Object.keys(r),o=0,s=a.length;o<s;o++){var h=a[o];n.push([h,r[h]])}t.splice.apply(t,[e,1].concat(n))}}return t}(e)):(i.props=e,i.__props=function(t){for(var e=[],i=Object.keys(t),r=0,n=i.length;r<n;r++){var a=i[r];e.push([a,t[a]])}return e}(e)),i.__tagName=t,i.__style=i.props.style||{},i.__listener={},i.__props.forEach(function(t){var e=t[0];/^on[a-zA-Z]/.test(e)&&(i.__listener[e.slice(2).toLowerCase()]=t[1])}),i.__mtw=0,i.__mrw=0,i.__mbw=0,i.__mlw=0,i.__ptw=0,i.__prw=0,i.__pbw=0,i.__plw=0,i}return t(r,l),e(r,[{key:"__layout",value:function(t){var e=t.w,i=this.style,r=i.display,n=i.width,a=i.marginTop,o=i.marginRight,s=i.marginBottom,h=i.marginLeft,l=i.paddingTop,u=i.paddingRight,f=i.paddingBottom,c=i.paddingLeft;if("none"!==r){if(n&&n.unit!==ae)switch(n.unit){case oe:e=n.value;break;case U:e*=.01*n.value}this.__mlw=this.__mpWidth(h,e),this.__mtw=this.__mpWidth(a,e),this.__mrw=this.__mpWidth(o,e),this.__mbw=this.__mpWidth(s,e),this.__plw=this.__mpWidth(c,e),this.__ptw=this.__mpWidth(l,e),this.__prw=this.__mpWidth(u,e),this.__pbw=this.__mpWidth(f,e),"block"===r?this.__layoutBlock(t):"flex"===r?this.__layoutFlex(t):"inline"===r&&this.__layoutInline(t)}}},{key:"__mpWidth",value:function(t,e){return t.unit===oe?t.value:t.unit===U?t.value*e*.01:0}},{key:"render",value:function(t){this.__virtualDom={bb:[]};var e=this.ctx,i=this.style,r=this.width,n=this.height,a=this.mlw,o=this.mtw,s=this.plw,h=this.ptw,l=this.prw,u=this.pbw,f=this.virtualDom,c=i.display,_=i.position,d=i.top,p=i.right,v=i.bottom,y=i.left,g=i.backgroundColor,w=i.borderTopWidth,m=i.borderTopColor,b=i.borderTopStyle,x=i.borderRightWidth,k=i.borderRightColor,W=i.borderRightStyle,A=i.borderBottomWidth,M=i.borderBottomColor,S=i.borderBottomStyle,L=i.borderLeftWidth,T=i.borderLeftColor,O=i.borderLeftStyle,N=i.transform;if("none"!==c){if("relative"===_&&this.parent){var E=this.parent,C=E.width,B=E.height,P=this.parent.style.height;if(y.unit!==ae){var D=y.unit===oe?y.value:y.value*C*.01;this.__offsetX(D)}else if(p.unit!==ae){var R=p.unit===oe?p.value:p.value*C*.01;this.__offsetX(-R)}if(d.unit!==ae){var F=d.unit===oe?d.value:d.value*B*.01*(P.unit===ae?0:1);this.__offsetY(F)}else if(v.unit!==ae){var V=v.unit===oe?v.value:v.value*B*.01*(P.unit===ae?0:1);this.__offsetY(-V)}}if(N){var j=N.translateX,I=N.translateY;if(j){var Y=j.unit===oe?j.value:j.value*r*.01;this.__offsetX(Y)}if(I){var G=I.unit===oe?I.value:I.value*n*.01;this.__offsetY(G)}}var X=this.rx,H=this.ry,z=w.value,$=x.value,Z=A.value,q=L.value,U=X+a,Q=U+q,J=Q+r+s+l,K=J+$,tt=H+o,et=tt+z,it=et+n+h+u,rt=it+Z;if(g&&"transparent"!==g){var nt=r+s+l,at=n+h+u;t===ne.CANVAS?(e.beginPath(),e.fillStyle=g,e.rect(Q,et,nt,at),e.fill(),e.closePath()):t===ne.SVG&&f.bb.push({type:"item",tagName:"rect",props:[["x",Q],["y",et],["width",nt],["height",at],["fill",g]]})}if(0<z&&"transparent"!==m){var ot=[];if(-1<["dashed","dotted"].indexOf(b)){var st=se(b,U,Q,J,K,z),ht=st.n,lt=st.ps,ut=st.pd;if(ht<=1)ot.push([U,tt,K,tt,J,et,Q,et]);else for(var ft=Math.atan(z/q),ct=Math.atan(z/$),_t=0;_t<ht;_t++){var dt=_t===ht-1,pt=_t?U+lt*_t+ut*_t:U,vt=pt+lt,yt=void 0,gt=void 0;vt<Q?dt?ot.push([U,tt,K,tt,J,et,Q,et]):(yt=tt+(pt-U)*Math.tan(ft),gt=tt+(vt-U)*Math.tan(ft),ot.push([pt,tt,vt,tt,vt,gt,pt,yt])):J<pt?(yt=tt+(K-pt)*Math.tan(ct),gt=tt+(K-vt)*Math.tan(ct),dt?ot.push([pt,tt,K,tt,pt,yt]):ot.push([pt,tt,vt,tt,vt,gt,pt,yt])):pt<Q?(yt=tt+(pt-U)*Math.tan(ft),dt?ot.push([pt,tt,K,tt,J,et,Q,et,pt,yt]):J<vt?ot.push([pt,tt,vt,tt,J,et,Q,et,pt,yt]):ot.push([pt,tt,vt,tt,vt,et,Q,et,pt,yt])):J<vt?(yt=tt+(K-vt)*Math.tan(ct),pt<Q?dt?ot.push([pt,tt,K,tt,J,et,Q,et,pt,yt]):ot.push([pt,tt,vt,tt,vt,yt,J,et,Q,et,pt,yt]):dt?ot.push([pt,tt,K,tt,J,et,pt,et]):ot.push([pt,tt,vt,tt,vt,yt,J,et,pt,et])):dt?ot.push([pt,tt,K,tt,J,et,pt,et]):ot.push([pt,tt,vt,tt,vt,et,pt,et])}}else ot.push([U,tt,K,tt,J,et,Q,et]);he(t,ot,m,e,f)}if(0<$&&"transparent"!==k){var wt=[];if(-1<["dashed","dotted"].indexOf(W)){var mt=se(W,tt,et,it,rt,$),bt=mt.n,xt=mt.ps,kt=mt.pd;if(bt<=1)wt.push([J,et,K,tt,K,rt,J,it]);else for(var Wt=Math.atan($/z),At=Math.atan($/Z),Mt=0;Mt<bt;Mt++){var St=Mt===bt-1,Lt=Mt?tt+xt*Mt+kt*Mt:tt,Tt=Lt+xt,Ot=void 0,Nt=void 0;Tt<et?St?wt.push([J,et,K,tt,K,rt,J,it]):(Ot=K-(Tt-tt)*Math.tan(Wt),Nt=K-(Lt-tt)*Math.tan(Wt),wt.push([Ot,Tt,Nt,Lt,K,Lt,K,Tt])):it<Lt?(Ot=J+(Lt-it)*Math.tan(At),Nt=J+(Tt-it)*Math.tan(At),St?wt.push([Ot,Lt,K,Lt,K,rt]):wt.push([Ot,Lt,K,Lt,K,Tt,Nt,Tt])):Lt<et?(Ot=J+(et-Lt)*Math.tan(Wt),St?wt.push([J,et,Ot,Lt,K,Lt,K,rt,J,rt]):it<Tt?wt.push([J,et,Ot,Lt,K,Lt,K,Tt,Ot,Tt,J,it]):wt.push([J,et,Ot,Lt,K,Lt,K,Tt,J,Tt])):it<Tt?(Ot=J+(Tt-it)*Math.tan(At),Lt<et?St?wt.push([J,et,Ot,Lt,K,Lt,K,rt,J,it]):wt.push([J,et,Ot,Lt,K,Lt,K,Tt,Ot,Tt,J,it]):St?wt.push([J,Lt,K,Lt,K,rt,J,it]):wt.push([J,Lt,K,Lt,K,Tt,Ot,Tt,J,it])):St?wt.push([J,Lt,K,Lt,K,rt,J,it]):wt.push([J,Lt,K,Lt,K,Tt,J,Tt])}}else wt.push([J,et,K,tt,K,rt,J,it]);he(t,wt,k,e,f)}if(0<Z&&"transparent"!==M){var Et=[];if(-1<["dashed","dotted"].indexOf(S))for(var Ct=se(S,U,Q,J,K,Z),Bt=Ct.n,Pt=Ct.ps,Dt=Ct.pd,Rt=Math.atan(Z/q),Ft=Math.atan(Z/$),Vt=0;Vt<Bt;Vt++){var jt=Vt===Bt-1,It=Vt?U+Pt*Vt+Dt*Vt:U,Yt=It+Pt,Gt=void 0,Xt=void 0;Yt<Q?jt?Et.push([U,rt,Q,it,J,it,K,rt]):(Gt=rt-(It-U)*Math.tan(Rt),Xt=rt-(Yt-U)*Math.tan(Rt),Et.push([It,Gt,Yt,Xt,Yt,rt,It,rt])):J<It?(Gt=rt-(It-U)*Math.tan(Ft),Xt=rt-(Yt-U)*Math.tan(Ft),jt?Et.push([It,Gt,K,rt,It,rt]):Et.push([It,Gt,Yt,Xt,Yt,rt,It,rt])):It<Q?(Gt=it+(It-U)*Math.tan(Rt),jt?Et.push([It,Gt,Q,it,J,it,K,rt,It,rt]):J<Yt?Et.push([It,Gt,Q,it,J,it,Yt,rt,It,rt]):Et.push([It,Gt,Q,it,Yt,it,Yt,rt,It,rt])):J<Yt?(Gt=rt-(K-Yt)*Math.tan(Ft),It<Q?jt?Et.push([It,Gt,J,it,K,rt,It,rt]):Et.push([It,Gt,J,it,Yt,Gt,Yt,rt,It,rt]):jt?Et.push([It,it,J,it,K,rt,It,rt]):Et.push([It,it,J,it,Yt,Gt,Yt,rt,It,rt])):jt?Et.push([It,it,J,it,K,rt,It,rt]):Et.push([It,it,Yt,it,Yt,rt,It,rt])}else Et.push([U,rt,Q,it,J,it,K,rt]);he(t,Et,M,e,f)}if(0<q&&"transparent"!==T){var Ht=[];if(-1<["dashed","dotted"].indexOf(O)){var zt=se(O,tt,et,it,rt,q),$t=zt.n,Zt=zt.ps,qt=zt.pd;if($t<=1)Ht.push([U,tt,Q,et,Q,it,U,rt]);else for(var Ut=Math.atan(q/z),Qt=Math.atan(q/Z),Jt=0;Jt<$t;Jt++){var Kt=Jt===$t-1,te=Jt?tt+Zt*Jt+qt*Jt:tt,ee=te+Zt,ie=void 0,re=void 0;ee<et?Kt?Ht.push([U,tt,Q,et,Q,it,U,rt]):(ie=U+(te-tt)*Math.tan(Ut),re=U+(ee-tt)*Math.tan(Ut),Ht.push([U,te,ie,te,re,ee,U,ee])):it<te?(ie=U+(rt-te)*Math.tan(Qt),re=U+(rt-ee)*Math.tan(Qt),Kt?Ht.push([U,te,ie,te,U,rt]):Ht.push([U,te,ie,te,re,ee,U,ee])):te<et?(ie=U+(te-tt)*Math.tan(Ut),Kt?Ht.push([U,te,ie,te,Q,et,Q,it,U,rt]):it<ee?Ht.push([U,te,ie,te,Q,et,Q,it,ie,ee,U,ee]):Ht.push([U,te,ie,te,Q,et,Q,ee,U,ee])):it<ee?(ie=U+(rt-ee)*Math.tan(Qt),te<et?Kt?Ht.push([U,te,ie,te,Q,et,Q,it,U,rt]):Ht.push([U,te,ie,te,Q,et,Q,it,ie,ee,U,ee]):Kt?Ht.push([U,te,Q,te,Q,it,U,rt]):Ht.push([U,te,Q,te,Q,it,ie,ee,U,ee])):Kt?Ht.push([U,te,Q,te,Q,it,U,rt]):Ht.push([U,te,Q,te,Q,ee,U,ee])}}else Ht.push([U,tt,Q,et,Q,it,U,rt]);he(t,Ht,T,e,f)}}}},{key:"tagName",get:function(){return this.__tagName}},{key:"mtw",get:function(){return this.__mtw}},{key:"mrw",get:function(){return this.__mrw}},{key:"mbw",get:function(){return this.__mbw}},{key:"mlw",get:function(){return this.__mlw}},{key:"ptw",get:function(){return this.__ptw}},{key:"prw",get:function(){return this.__prw}},{key:"pbw",get:function(){return this.__pbw}},{key:"plw",get:function(){return this.__plw}},{key:"outerWidth",get:function(){var t=this.mlw,e=this.mrw,i=this.plw,r=this.prw,n=this.style,a=n.borderLeftWidth,o=n.borderRightWidth;return this.width+a.value+o.value+t+e+i+r}},{key:"outerHeight",get:function(){var t=this.mtw,e=this.mbw,i=this.ptw,r=this.pbw,n=this.style,a=n.borderTopWidth,o=n.borderBottomWidth;return this.height+a.value+o.value+t+e+i+r}},{key:"listener",get:function(){return this.__listener}}]),r}(),u={lhr:1.14990234375,car:1.1171875,blr:.9052734375,mdr:.64599609375,lgr:.03271484375},f={position:"static",display:"block",borderSizing:"content-box",top:"auto",right:"auto",bottom:"auto",left:"auto",marginTop:0,marginRight:0,marginBottom:0,marginLeft:0,paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0,fontSize:16,fontFamily:"arial",color:"#000",fontStyle:"normal",fontWeight:400,lineHeight:"normal",borderTopWidth:0,borderRightWidth:0,borderBottomWidth:0,borderLeftWidth:0,borderTopColor:"#000",borderRightColor:"#000",borderBottomColor:"#000",borderLeftColor:"#000",borderTopStyle:"solid",borderRightStyle:"solid",borderBottomStyle:"solid",borderLeftStyle:"solid",borderTopLeftRadius:0,borderTopRightRadius:0,borderBottomLeftRadius:0,borderBottomRightRadius:0,verticalAlign:"baseline",width:"auto",height:"auto",flexGrow:0,flexShrink:1,flexBasis:"auto",flexDirection:"row",justifyContent:"flex-start",alignItems:"stretch",textAlign:"left",visibility:"visible",fill:"#000",stroke:"#000",strokeWidth:0,strokeDasharray:[]},c=[];Object.keys(f).forEach(function(t){var e=f[t];c.push({k:t,v:e})});var _={}.toString;function p(e){return function(t){return _.call(t)==="[object "+e+"]"}}var v=p("Number");function y(t){return g(t)?"":t.toString()}function g(t){return null==t}var w={isObject:p("Object"),isString:p("String"),isFunction:p("Function"),isNumber:v,isBoolean:p("Boolean"),isDate:p("Date"),stringify:y,joinSourceArray:function(t){return function t(e){for(var i="",r=0,n=e.length;r<n;r++){var a=e[r];Array.isArray(a)?i+=t(a):i+=y(a)}return i}(t)},encodeHtml:function(t,e){return e?t.replace(/"/g,"""):t.replace(/&/g,"&").replace(/</g,"<")},isNil:g,joinVirtualDom:function e(t){if("item"===t.type){var i="";return t.props.forEach(function(t){i+=" ".concat(t[0],'="').concat(t[1],'"')}),"text"===t.tagName?"<text".concat(i,">").concat(t.content,"</text>"):"<".concat(t.tagName).concat(i,"/>")}if("text"===t.type){var r="";return t.children.forEach(function(t){r+=e(t)}),"<g>".concat(r,"</g>")}if("dom"===t.type){var n="<g>";return t.bb.forEach(function(t){n+=e(t)}),n+="</g><g>",t.children.forEach(function(t){n+=e(t)}),"<g>".concat(n+="</g>","</g>")}if("geom"===t.type){var a="<g>";return t.bb.forEach(function(t){a+=e(t)}),a+="</g><g>",t.content.forEach(function(t){a+=e(t)}),"<g>".concat(a+="</g>","</g>")}}};function m(t,e){var i="border".concat(e);if(t[i]){var r=/\b\d+px\b/i.exec(t[i]);r&&(t[i+"Width"]=r[0]);var n=/\b(solid|dashed|dotted)\b/i.exec(t[i]);n&&(t[i+"Style"]=n[1]);var a=/#[0-9a-f]{3,6}/i.exec(t[i]);a&&-1<[4,7].indexOf(a[0].length)?t[i+"Color"]=a[0]:/\btransparent\b/i.test(t[i])&&(t[i+"Color"]="transparent")}}var b={normalize:function(i){if(c.forEach(function(t){i.hasOwnProperty(t.k)||(i[t.k]=t.v)}),i.background){var t=/#[0-9a-f]{3,6}/i.exec(i.background);t&&-1<[4,7].indexOf(t[0].length)&&(i.backgroundColor=t[0])}if(i.flex&&("none"===i.flex?(i.flexGrow=0,i.flexShrink=0,i.flexBasis="auto"):"auto"===i.flex?(i.flexGrow=1,i.flexShrink=1,i.flexBasis="auto"):/^[\d.]+$/.test(i.flex)?(i.flexGrow=parseFloat(i.flex),i.flexShrink=1,i.flexBasis=0):/^[\d.]+px$/.test(i.flex)||/^[\d.]+%$/.test(i.flex)||(i.flexGrow=0,i.flexShrink=1,i.flexBasis="auto")),i.border&&(i.borderTop=i.borderRight=i.borderBottom=i.borderLeft=i.border),i.margin&&(i.marginTop=i.marginRight=i.marginBottom=i.marginLeft=i.margin),i.padding&&(i.paddingTop=i.paddingRight=i.paddingBottom=i.paddingLeft=i.padding),i.borderRadius&&(i.borderTopRightRadius=i.borderTopLeftRadius=i.borderBottomRightRadius=i.borderBottomLeftRadius=i.borderRadius),i.transform){var e=i.transform.match(/\w+\(.+?\)/g);if(e){var _=i.transform={};e.forEach(function(t){var e=t.indexOf("("),i=t.slice(0,e),r=t.slice(e+1,t.length-1);if("matrix"===i){var n=r.split(",");if(6<(n=n.map(function(t){return parseFloat(t)})).length)n=n.slice(0,6);else if(n.length<6)for(;n.length<6;)n.push(0);_.matrix=n}else if("matrix3d"===i){var a=r.split(",");if(9<(a=a.map(function(t){return parseFloat(t)})).length)a=a.slice(0,9);else if(a.length<9)for(;a.length<9;)a.push(0);_.matrix3d=a}else if("translateX"===i)_.translateX=r;else if("translateY"===i)_.translateY=r;else if("translateZ"===i)_.translateZ=r;else if("translate"===i){var o=r.split(",");_.translateX=o[0],_.translateY=o[1]}else if("translate3d"===i){var s=r.split(",");_.translateX=s[0],_.translateY=s[1],_.translateZ=s[2]}else if("scaleX"===i)_.scaleX=parseFloat(r)||0;else if("scaleY"===i)_.scaleY=parseFloat(r)||0;else if("scaleZ"===i)_.scaleZ=parseFloat(r)||0;else if("scale"===i){var h=r.split(",");_.scaleX=parseFloat(h[0])||0,_.scaleY=parseFloat(h[1])||0}else if("scale3d"===i){var l=r.split(",");_.scaleX=parseFloat(l[0])||0,_.scaleY=parseFloat(l[1])||0,_.scaleZ=parseFloat(l[2])||0}else if("rotateX"===i)_.rotateX=parseFloat(r)||0;else if("rotateY"===i)_.rotateY=parseFloat(r)||0;else if("rotateZ"===i)_.rotateZ=parseFloat(r)||0;else if("rotate"===i){var u=r.split(",");_.rotateX=parseFloat(u[0])||0,_.rotateY=parseFloat(u[1])||0}else if("rotate3d"===i){var f=r.split(",");_.rotateX=parseFloat(f[0])||0,_.rotateY=parseFloat(f[1])||0,_.rotateZ=parseFloat(f[2])||0}else if("skewX"===i)_.skewX=parseFloat(r)||0;else if("skewY"===i)_.skewY=parseFloat(r)||0;else if("skew"===i){var c=r.split(",");_.skewX=parseFloat(c[0])||0,_.skewY=parseFloat(c[1])||0}else"perspective"===i&&(_.perspective=parseFloat(r))}),["translateX","translateY","translateZ"].forEach(function(t){var e=_[t];!w.isNil(e)&&e.unit||(/%$/.test(e)?(e=parseFloat(e)||0,_[t]={value:e,unit:U}):(e=parseFloat(e)||0,_[t]={value:e,unit:oe}))})}}m(i,"Top"),m(i,"Right"),m(i,"Bottom"),m(i,"Left"),["marginTop","marginRight","marginBottom","marginLeft","paddingTop","paddingRight","paddingBottom","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","top","right","bottom","left","width","height","flexBasis"].forEach(function(t){var e=i[t];!w.isNil(e)&&e.unit||("auto"===e?i[t]={unit:ae}:/%$/.test(e)?0===t.indexOf("border")?i[t]={value:0,unit:oe}:(e=parseFloat(e)||0,i[t]={value:e,unit:U}):(e=parseFloat(e)||0,i[t]={value:e,unit:oe}))});var r=i.lineHeight;r="normal"===r?{value:i.fontSize*u.lhr,unit:oe}:/px$/.test(r)?(r=parseFloat(r),{value:Math.max(i.fontSize,r),unit:oe}):"normal"===(r=parseFloat(r)||"normal")?{value:i.fontSize*u.lhr,unit:oe}:{value:r*i.fontSize,unit:oe},i.lineHeight=r},setFontStyle:function(t){var e=t.fontStyle,i=t.fontWeight,r=t.fontSize,n=t.fontFamily;return"".concat(e," ").concat(i," ").concat(r,"px/").concat(r,"px ").concat(n)},getBaseLine:function(t){var e=t.fontSize*u.lhr;return.5*(t.lineHeight.value-e)+t.fontSize*u.blr}},x=function(){function o(t,e,i,r,n,a){s(this,o),this.__parent=t,this.__x=e,this.__y=i,this.__width=r,this.__content=n,this.__style=a,this.__virtualDom={}}return e(o,[{key:"render",value:function(t,e){var i=this.style,r=this.content,n=this.x,a=this.y,o=this.parent,s=o.ox,h=o.oy;a+=b.getBaseLine(i),n+=s,a+=h,t===ne.CANVAS?e.fillText(r,n,a):t===ne.SVG&&(this.__virtualDom={type:"item",tagName:"text",props:[["x",n],["y",a],["fill",i.color],["font-size","".concat(i.fontSize,"px")]],content:r})}},{key:"__offsetX",value:function(t){this.__x+=t}},{key:"__offsetY",value:function(t){this.__y+=t}},{key:"x",get:function(){return this.__x}},{key:"y",get:function(){return this.__y}},{key:"width",get:function(){return this.__width}},{key:"content",get:function(){return this.__content}},{key:"style",get:function(){return this.__style}},{key:"baseLine",get:function(){return b.getBaseLine(this.style)}},{key:"virtualDom",get:function(){return this.__virtualDom}},{key:"parent",get:function(){return this.__parent}}]),o}(),k={},W=function(){function i(t){var e;return s(this,i),(e=o(this,C(i).call(this))).__content=t.toString(),e.__lineBoxes=[],e.__charWidthList=[],e.__charWidth=0,e.__textWidth=0,e}return t(i,l),e(i,[{key:"__measure",value:function(){this.__charWidthList=[];var t=this.ctx,e=this.content,i=this.style,r=this.charWidthList,n=this.renderMode;n===ne.CANVAS&&(t.font=b.setFontStyle(i));for(var a=k[i.fontSize]=k[i.fontSize]||{},o=e.length,s=0,h=0;h<o;h++){var l=e.charAt(h),u=void 0;a.hasOwnProperty(l)?u=a[l]:n===ne.CANVAS?u=a[l]=t.measureText(l).width:n===ne.SVG&&(u=a[l]=ne.measure(l,i)),r.push(u),s+=u,this.__charWidth=Math.max(this.charWidth,u)}this.__textWidth=s}},{key:"__layout",value:function(t,e){var i=this,r=t.x,n=t.y,a=t.w;t.h;this.__x=r,this.__y=n;for(var o=r,s=(this.ctx,this.content),h=this.style,l=this.lineBoxes,u=this.charWidthList,f=(this.renderMode,0),c=0,_=0,d=s.length;c<d;)if((_+=u[c])===a){var p=new x(this,r,n,_,s.slice(f,c+1),h);l.push(p),o=Math.max(o,r+_),n+=this.style.lineHeight.value,c=(f=c+1)+1,_=0}else if(a<_){c===f&&(c=f+1);var v=new x(this,r,n,_-u[c],s.slice(f,c),h);l.push(v),o=Math.max(o,r+_-u[c]),n+=this.style.lineHeight.value,f=c,c+=1,_=0}else c++;if(f<d&&f<c){for(_=0,c=f;c<d;c++)_+=u[c];var y=new x(this,r,n,_,s.slice(f,d),h);l.push(y),o=Math.max(o,r+_),n+=h.lineHeight.value}if(this.__width=o-r,this.__height=n-t.y,e)this.__lineBoxes=[];else{var g=h.textAlign;-1<["center","right"].indexOf(g)&&l.forEach(function(t){var e=i.__width-t.width;0<e&&t.__offsetX("center"===g?.5*e:e)})}}},{key:"render",value:function(e){var i=this.ctx,t=this.style;e===ne.CANVAS&&(i.font=b.setFontStyle(t),i.fillStyle=t.color),this.lineBoxes.forEach(function(t){t.render(e,i)}),e===ne.SVG&&(this.__virtualDom={type:"text",children:this.lineBoxes.map(function(t){return t.virtualDom})})}},{key:"__tryLayInline",value:function(t){return t-this.textWidth}},{key:"__calMaxAndMinWidth",value:function(){var e=0;return this.charWidthList.forEach(function(t){e=Math.max(e,t)}),{max:this.textWidth,min:e}}},{key:"content",get:function(){return this.__content},set:function(t){this.__content=t}},{key:"lineBoxes",get:function(){return this.__lineBoxes}},{key:"charWidthList",get:function(){return this.__charWidthList}},{key:"charWidth",get:function(){return this.__charWidth}},{key:"textWidth",get:function(){return this.__textWidth}},{key:"baseLine",get:function(){var t=this.lineBoxes[this.lineBoxes.length-1];return t.y-this.y+t.baseLine}},{key:"renderMode",get:function(){return this.__renderMode}}]),i}(),L=function(){function i(t,e){s(this,i),this.__list=[],this.__x=t,this.__y=e,this.__baseLine=0}return e(i,[{key:"add",value:function(t){this.list.push(t)}},{key:"__calBaseLine",value:function(){var e=0;return this.list.forEach(function(t){e=Math.max(e,t.baseLine)}),e}},{key:"verticalAlign",value:function(){var e=this;this.__baseLine=this.__calBaseLine(),1<this.list.length&&this.list.forEach(function(t){t.baseLine!==e.baseLine&&t.__offsetY(e.baseLine-t.baseLine)})}},{key:"horizonAlign",value:function(e){this.list.forEach(function(t){t.__offsetX(e)})}},{key:"list",get:function(){return this.__list}},{key:"x",get:function(){return this.__x}},{key:"y",get:function(){return this.__y}},{key:"width",get:function(){var e=0;return this.list.forEach(function(t){e+=t.width}),e}},{key:"height",get:function(){var e=0;return this.list.forEach(function(t){e=Math.max(e,t.height)}),e}},{key:"baseLine",get:function(){return this.__baseLine}},{key:"size",get:function(){return this.__list.length}}]),i}(),A={},M=function(){function i(t,e){return s(this,i),o(this,C(i).call(this,t,e))}return t(i,Q),e(i,[{key:"__initStyle",value:function(){b.normalize(this.style)}},{key:"__tryLayInline",value:function(t,e){var i=this.style.width;return i.unit===oe?t-i.value:i.unit===U?t-e*i.value*.01:t}},{key:"__calAutoBasis",value:function(t,e,i){var r=0,n=0,a=0,o=this.style,s=o.width,h=o.height,l=o.borderTopWidth,u=o.borderRightWidth,f=o.borderBottomWidth,c=o.borderLeftWidth,_=t?s:h;if(_.unit!==ae&&(r=a+=_.value),t){var d=u.value+c.value;r+=d,a+=d,n+=d}else{var p=l.value+f.value;r+=p,a+=p,n+=p}return{b:r,min:n,max:a}}},{key:"__layoutBlock",value:function(t){var e=t.x,i=t.y,r=t.w,n=t.h;this.__x=e,this.__y=i,this.__width=r;var a,o=this.style,s=o.width,h=o.height,l=o.borderTopWidth,u=o.borderRightWidth,f=o.borderBottomWidth,c=o.borderLeftWidth;if(s&&s.unit!==ae)switch(s.unit){case oe:r=s.value}if(h&&h.unit!==ae)switch(a=!0,h.unit){case oe:n=h.value;break;case U:n*=.01*h.value}e+=c.value,t.x=e,i+=l.value,t.y=i,r-=c.value+u.value,n-=l.value+f.value,this.__width=r,this.__height=a?n:0}},{key:"__layoutFlex",value:function(t){this.__layoutBlock(t)}},{key:"__layoutInline",value:function(t){var e=t.x,i=t.y,r=t.w,n=t.h;this.__x=e,this.__y=i;var a,o,s=this.style,h=s.width,l=s.height,u=s.borderTopWidth,f=s.borderRightWidth,c=s.borderBottomWidth,_=s.borderLeftWidth;if(h&&h.unit!==ae)switch(a=!0,h.unit){case oe:r=h.value}if(l&&l.unit!==ae)switch(o=!0,l.unit){case oe:n=l.value}e+=_.value,t.x=e,i+=u.value,t.y=i,r-=_.value+f.value,n-=u.value+c.value,this.__width=a?r:e-t.x,this.__height=o?n:i-t.y}},{key:"__calAbs",value:function(){return 0}},{key:"__emitEvent",value:function(t,e){var i,r=t.event.type,n=t.x,a=t.y,o=t.covers,s=this.listener,h=this.style,l=this.rx,u=this.ry,f=this.outerWidth,c=this.outerHeight;if("none"!==h.display)if(s.hasOwnProperty(r)&&(i=s[r]),e)i&&i(t);else if(l<=n&&u<=a&&n<=l+f&&a<=u+c){for(var _=0,d=o.length;_<d;_++){var p=o[_],v=p.x,y=p.y,g=p.w,w=p.h;if(v<=n&&y<=a&&n<=v+g&&a<=y+w)return}t.target||(t.target=this),o.push({x:n,y:a,w:f,h:c}),i&&i(t)}}},{key:"render",value:function(t){B(C(i.prototype),"render",this).call(this,t),t===ne.SVG&&(this.__virtualDom=a({},B(C(i.prototype),"virtualDom",this),{type:"geom",content:[]}))}},{key:"tagName",get:function(){return this.__tagName}},{key:"baseLine",get:function(){return this.__height}}],[{key:"getImplement",value:function(t){if(!A.hasOwnProperty(t))throw new Error("Geom has not register: ".concat(t));return A[t]}},{key:"register",value:function(t,e){if(A.hasOwnProperty(t))throw new Error("Geom has already register: ".concat(t));A[t]=e}}]),i}(),S={div:!0,span:!0},T={span:!0},O=function(){function l(t,e,i){var r;return s(this,l),(r=o(this,C(l).call(this,t,e))).__children=i,r.__flowChildren=[],r.__absChildren=[],r.__lineGroups=[],r.__flowY=0,r}return t(l,Q),e(l,[{key:"__traverse",value:function(e,t){var i=this,r=[];this.__traverseChildren(this.children,r,e,t);for(var n=r.length-1;0<n;n--){var a=r[n];if(a instanceof W){var o=r[n-1];o instanceof W?(o.content+=a.content,r.splice(n,1)):n--}}if("inline"===this.style.display&&"flex"!==this.parent.style.display)for(var s=r.length-1;0<=s;s--){var h=r[s];if(h instanceof l&&"inline"!==h.style.display)throw new Error("inline can not contain block/flex")}r.forEach(function(t){t.__ctx=e,t.__parent=i,t.__prev=null,t instanceof W||"absolute"!==t.style.position?i.__flowChildren.push(t):i.__absChildren.push(t)}),this.__children=r}},{key:"__traverseChildren",value:function(t,e,i,r){var n=this;if(Array.isArray(t))t.forEach(function(t){n.__traverseChildren(t,e,i,r)});else if(t instanceof l)e.push(t),t.__traverse(i,r);else if(t instanceof M)e.push(t);else if(!w.isNil(t)){var a=new W(t);a.__renderMode=r,e.push(a)}}},{key:"__initStyle",value:function(){var e=this.__style;e.display&&-1!==["flex","block","inline","none"].indexOf(e.display)||(T.hasOwnProperty(this.tagName)?e.display="inline":e.display="block");var t=this.parent;if(t){var i=t.style;["fontSize","fontWeight","fontStyle","lineHeight","wordBreak","color","textAlign"].forEach(function(t){!e.hasOwnProperty(t)&&i.hasOwnProperty(t)&&(e[t]=i[t])})}b.normalize(e),this.children.forEach(function(t){t instanceof Q?t.__initStyle():(t.__style=e,t.__measure())})}},{key:"__tryLayInline",value:function(t,e){var i=this.flowChildren,r=this.style.width;if(r.unit===oe)return t-r.value;if(r.unit===U)return t-e*r.value*.01;for(var n=0;n<i.length;n++){if(t<0)return t;var a=i[n];t-=a instanceof Q?a.__tryLayInline(t,e):a.textWidth}return t}},{key:"__offsetX",value:function(e){B(C(l.prototype),"__offsetX",this).call(this,e),this.flowChildren.forEach(function(t){t&&t.__offsetX(e)})}},{key:"__offsetY",value:function(e){B(C(l.prototype),"__offsetY",this).call(this,e),this.flowChildren.forEach(function(t){t&&t.__offsetY(e)})}},{key:"__calAutoBasis",value:function(a,o,s,t){var h=0,l=0,u=0,e=this.mtw,i=this.mrw,r=this.mbw,n=this.mlw,f=this.ptw,c=this.prw,_=this.pbw,d=this.plw,p=this.flowChildren,v=this.style,y=v.width,g=v.height,w=v.borderTopWidth,m=v.borderRightWidth,b=v.borderBottomWidth,x=v.borderLeftWidth,k=a?y:g;if(k.unit===oe&&(h=u=k.value,t&&(l=h)),p.forEach(function(t){if(t instanceof Q){var e=t.__calAutoBasis(a,o,s,!0),i=e.b,r=e.min,n=e.max;h=Math.max(h,i),l=Math.max(l,r),u=Math.max(u,n)}else u=a?(l=Math.max(t.charWidth,l),Math.max(t.textWidth,u)):(t.__layout({x:0,y:0,w:o,h:s},!0),l=Math.max(l,t.height),Math.max(u,t.height))}),a){var W=m.value+x.value+n+i+d+c;h+=W,u+=W,l+=W}else{var A=w.value+b.value+e+r+f+_;h+=A,u+=A,l+=A}return{b:h,min:l,max:u}}},{key:"__calAbs",value:function(i){var r=0,t=this.mtw,e=this.mrw,n=this.mbw,a=this.mlw,o=this.ptw,s=this.prw,h=this.pbw,l=this.plw,u=this.flowChildren,f=this.style,c=f.width,_=f.height,d=f.borderTopWidth,p=f.borderRightWidth,v=f.borderBottomWidth,y=f.borderLeftWidth,g=i?c:_;if(g.unit===oe&&(r=g.value),u.forEach(function(t){if(t instanceof Q){var e=t.__calAbs(i);r=Math.max(r,e)}else r=i?Math.max(t.textWidth,r):(t.__layout({x:0,y:0,w:1/0,h:1/0},!0),Math.max(r,t.height))}),i){var w=p.value+y.value+a+e+l+s;r+=w}else{var m=d.value+v.value+t+n+o+h;r+=m}return r}},{key:"__layoutBlock",value:function(e){var i=e.x,r=e.y,n=e.w,a=e.h;this.__x=i,this.__y=r,this.__width=n;var t,o=this.flowChildren,s=this.style,h=this.lineGroups,l=this.mlw,u=this.mtw,f=this.mrw,c=this.mbw,_=this.plw,d=this.ptw,p=this.prw,v=this.pbw,y=s.width,g=s.height,w=s.borderTopWidth,m=s.borderRightWidth,b=s.borderBottomWidth,x=s.borderLeftWidth,k=s.textAlign;if(y&&y.unit!==ae)switch(y.unit){case oe:n=y.value;break;case U:n*=.01*y.value}if(g&&g.unit!==ae)switch(t=!0,g.unit){case oe:a=g.value;break;case U:a*=.01*g.value}i+=x.value+l+_,e.x=i,r+=w.value+u+d,e.y=r,y.unit===ae&&(n-=x.value+m.value+l+f+_+p),g.unit===ae&&(a-=w.value+b.value+u+c+d+v);var W=new L(i,r);o.forEach(function(t){t instanceof Q?"inline"===t.style.display?i===e.x?(W.add(t),t.__layout({x:i,y:r,w:n,h:a}),i+=t.outerWidth):(0<=t.__tryLayInline(n-i,n)?t.__layout({x:i,y:r,w:n,h:a}):(h.push(W),W.verticalAlign(),i=e.x,r+=W.height,t.__layout({x:e.x,y:r,w:n,h:a}),W=new L(i,r)),i+=t.outerWidth,W.add(t)):(W.size&&(h.push(W),W.verticalAlign(),r+=W.height,W=new L(e.x,r)),t.__layout({x:e.x,y:r,w:n,h:a}),i=e.x,r+=t.outerHeight):i===e.x?(W.add(t),t.__layout({x:i,y:r,w:n,h:a}),i+=t.width):(0<=t.__tryLayInline(n-i,n)?t.__layout({x:i,y:r,w:n,h:a}):(h.push(W),W.verticalAlign(),i=e.x,r+=W.height,t.__layout({x:e.x,y:r,w:n,h:a}),W=new L(i,r)),i+=t.width,W.add(t))}),W.size&&(h.push(W),W.verticalAlign(),r+=W.height),-1<["center","right"].indexOf(k)&&h.forEach(function(t){var e=n-t.width;0<e&&t.horizonAlign("center"===k?.5*e:e)}),this.__width=n,this.__height=t?a:r-e.y,this.__flowY=r}},{key:"__layoutFlex",value:function(t){var A=t.x,M=t.y,S=t.w,L=t.h;this.__x=A,this.__y=M,this.__width=S;var e,T,i=this.flowChildren,r=this.style,n=this.mlw,a=this.mtw,o=this.mrw,s=this.mbw,h=this.plw,l=this.ptw,u=this.prw,f=this.pbw,c=r.width,_=r.height,d=r.flexDirection,p=r.borderTopWidth,v=r.borderRightWidth,y=r.borderBottomWidth,g=r.borderLeftWidth,w=r.justifyContent,m=r.alignItems;if(c&&c.unit!==ae)switch(e=!0,c.unit){case oe:S=c.value;break;case U:S*=.01*c.value}if(_&&_.unit!==ae)switch(T=!0,_.unit){case oe:L=_.value;break;case U:L*=.01*_.value}A+=g.value+n+h,t.x=A,M+=p.value+a+l,t.y=M,c.unit===ae&&(S-=g.value+v.value+n+o+h+u),_.unit===ae&&(L-=p.value+y.value+a+s+l+f);var O="row"===d;if(!O&&!T)return i.forEach(function(t){if(t instanceof Q){var e=t.style,i=t.style,r=i.display,n=i.flexDirection,a=i.width;"inline"===r?e.display="block":"flex"===r&&"row"===n&&a.unit===ae&&(a.value=S,a.unit=oe),t.__layout({x:A,y:M,w:S,h:L}),M+=t.outerHeight}else t.__layout({x:A,y:M,w:S,h:L}),M+=t.outerHeight}),this.__width=S,void(this.__height=M-t.y);var N=[],E=[],C=[],B=[],P=0,D=0,R=0,b=0;i.forEach(function(t){if(t instanceof Q){var e=t.style,i=e.flexGrow,r=e.flexShrink,n=e.flexBasis;N.push(i),E.push(r),P+=i,D+=r;var a=t.__calAutoBasis(O,S,L),o=a.b,s=a.min,h=a.max;n.unit===ae?(C.push(h),R+=h):n.unit===oe?(o=n.value,C.push(o),R+=o):n.unit===U&&(o=(O?S:L)*n.value,C.push(o),R+=o),b+=h,B.push(s)}else N.push(0),E.push(1),D+=1,O?(C.push(t.textWidth),R+=t.textWidth,b+=t.textWidth,B.push(t.charWidth)):(t.__layout({x:0,y:0,w:S,h:L},!0),C.push(t.height),R+=t.height,b+=t.height,B.push(t.height))});var F=0,V=(O?S:L)<b;i.forEach(function(t,e){var i,r=E[e],n=N[e];if(V){var a=R-(O?S:L);i=r?C[e]-a*r/D:C[e]}else{var o=(O?S:L)-R;i=n?C[e]+o*n/P:C[e]}if(i=Math.max(i,B[e]),t instanceof Q){var s=t.style,h=t.mlw,l=t.mtw,u=t.mrw,f=t.mbw,c=t.plw,_=t.ptw,d=t.prw,p=t.pbw,v=t.style,y=v.display,g=v.flexDirection,w=v.width,m=v.height,b=v.borderTopWidth,x=v.borderRightWidth,k=v.borderBottomWidth,W=v.borderLeftWidth;O?("inline"===y?s.display="block":"flex"===y&&"column"===g&&T&&m.unit===ae&&(m.value=L,m.unit=oe),t.__layout({x:A,y:M,w:i,h:L})):("inline"===y?s.display="block":"flex"===y&&"row"===g&&w.unit===ae&&(w.value=S,w.unit=oe),t.__layout({x:A,y:M,w:S,h:i})),V&&r?O?t.__width=i-h-u-c-d-W.value-x.value:t.__height=i-l-f-_-p-b.value-k.value:!V&&n&&(O?t.__width=i-h-u-c-d-W.value-x.value:t.__height=i-l-f-_-p-b.value-k.value)}else t.__layout({x:A,y:M,w:O?i:S,h:O?L:i});F=O?(A+=t.outerWidth,Math.max(F,t.outerHeight)):(M+=t.outerHeight,Math.max(F,t.outerWidth))});var x=O?S-A+t.x:L-M+t.y;if(!V&&0===P&&0<x){var k=i.length;if("flex-end"===w)for(var W=0;W<k;W++){var j=i[W];O?j.__offsetX(x):j.__offsetY(x)}else if("center"===w)for(var I=.5*x,Y=0;Y<k;Y++){var G=i[Y];O?G.__offsetX(I):G.__offsetY(I)}else if("space-between"===w)for(var X=x/(k-1),H=1;H<k;H++){var z=i[H];O?z.__offsetX(X*H):z.__offsetY(X*H)}else if("space-around"===w)for(var $=x/(k+1),Z=0;Z<k;Z++){var q=i[Z];O?q.__offsetX($*(Z+1)):q.__offsetY($*(Z+1))}}O?(T&&(F=L),M+=F):e&&(F=S),"stretch"===m?i.forEach(function(t){var e=t.style,i=t.mlw,r=t.mtw,n=t.mrw,a=t.mbw,o=t.ptw,s=t.prw,h=t.plw,l=t.pbw;O?e.height.unit===ae&&(t.__height=F-r-a-o-l-e.borderTopWidth.value-e.borderBottomWidth.value):e.width.unit===ae&&(t.__width=F-i-n-h-s-v.value-g.value)}):"center"===m?i.forEach(function(t){var e=F-t.outerHeight;0<e&&t.__offsetY(.5*e)}):"flex-end"===m&&i.forEach(function(t){var e=F-t.outerHeight;0<e&&t.__offsetY(e)}),this.__width=S,this.__height=T?L:M-t.y,this.__flowY=M}},{key:"__layoutInline",value:function(e){var i=this,r=e.x,n=e.y,a=e.w,o=e.h;this.__x=r,this.__y=n;var t,s,h=r,l=this.flowChildren,u=this.style,f=this.lineGroups,c=this.mlw,_=this.mtw,d=this.mrw,p=this.mbw,v=this.plw,y=this.ptw,g=this.prw,w=this.pbw,m=u.width,b=u.height,x=u.borderTopWidth,k=u.borderRightWidth,W=u.borderBottomWidth,A=u.borderLeftWidth,M=u.textAlign;if(m&&m.unit!==ae)switch(t=!0,m.unit){case oe:a=m.value;break;case U:a*=.01*m.value}if(b&&b.unit!==ae)switch(s=!0,b.unit){case oe:o=b.value;break;case U:o*=.01*b.value}r+=A.value+c+v,e.x=r,n+=x.value+_+y,e.y=n,m.unit===ae&&(a-=A.value+k.value+c+d+v+g),b.unit===ae&&(o-=x.value+W.value+_+p+y+w);var S=new L(r,n);l.forEach(function(t){if(t instanceof Q){if("absolute"===t.style.position)return void i.absChildren.push(t);if(t.style.display="inline",r===e.x)S.add(t),t.__layout({x:r,y:n,w:a,h:o}),r+=t.outerWidth,h=Math.max(h,r);else 0<=t.__tryLayInline(a-r,a)?t.__layout({x:r,y:n,w:a,h:o}):(f.push(S),S.verticalAlign(),r=e.x,n+=S.height,t.__layout({x:e.x,y:n,w:a,h:o}),S=new L(r,n)),r+=t.outerWidth,h=Math.max(h,r),S.add(t)}else{if(r===e.x)S.add(t),t.__layout({x:r,y:n,w:a,h:o}),r+=t.width,h=Math.max(h,r);else 0<=t.__tryLayInline(a-r,a)?t.__layout({x:r,y:n,w:a,h:o}):(f.push(S),S.verticalAlign(),r=e.x,n+=S.height,t.__layout({x:e.x,y:n,w:a,h:o}),S=new L(r,n)),r+=t.width,h=Math.max(h,r),S.add(t)}}),S.size&&(f.push(S),S.verticalAlign(),n+=S.height),-1<["center","right"].indexOf(M)&&f.forEach(function(t){var e=a-t.width;0<e&&t.horizonAlign("center"===M?.5*e:e)}),this.__width=t?a:h-e.x,this.__height=s?o:n-e.y,this.__flowY=n}},{key:"__layoutAbs",value:function(e){var y=this.x,g=this.y,w=this.flowY,m=this.width,b=this.height,t=this.children,i=this.absChildren,r=this.style,n=(this.mlw,this.mtw,this.mrw,this.mbw,this.plw),a=this.ptw,o=this.prw,s=this.pbw,x=r.borderTopWidth,k=r.borderLeftWidth,W=m+n+o,A=b+a+s;t.forEach(function(t){t instanceof l&&t.__layoutAbs(-1<["absolute","relative"].indexOf(t.style.position)?t:e)}),i.forEach(function(t){var e,i,r,n,a=t.mtw,o=t.mlw,s=t.style,h=t.style,l=h.left,u=h.top,f=h.right,c=h.bottom,_=h.width,d=h.height;if(l.unit!==ae&&f.unit!==ae)e=l.unit===oe?y+o+k.value+l.value:y+o+k.value+m*l.value*.01,r=f.unit===oe?y+o+k.value+W-f.value-e:y+o+k.value+W-m*f.value*.01-e;else if(l.unit!==ae&&_.unit!==ae)e=l.unit===oe?y+o+k.value+l.value:y+o+k.value+m*l.value*.01,r=_.unit===oe?_.value:m;else if(f.unit!==ae&&_.unit!==ae){r=_.unit===oe?_.value:m;var p=_.unit===oe?_.value:m*_.value*.01;e=f.unit===oe?y+o+k.value+W-f.value-p:y+o+k.value+W-m*f.value*.01-p}else l.unit!==ae?(e=l.unit===oe?y+l.value:y+o+k.value+m*l.value*.01,r=t.__calAbs(!0)):f.unit!==ae?(r=t.__calAbs(!0),e=f.unit===oe?y+o+k.value+W-f.value-r:y+o+k.value+W-m*f.value*.01-r):r=_.unit!==ae?(e=y+o+k.value,_.unit===oe?_.value:m):(e=y+o+k.value,t.__calAbs(!0));if(u.unit!==ae&&c.unit!==ae)i=u.unit===oe?g+u.value:g+a+x.value+b*u.value*.01,n=c.unit===oe?g+a+x.value+A-c.value-i:g+a+x.value+A-b*c.value*.01-i,s.height={value:n,unit:oe};else if(u.unit!==ae&&d.unit!==ae)i=u.unit===oe?g+u.value:g+a+x.value+b*u.value*.01,n=d.unit===oe?d.value:b;else if(c.unit!==ae&&d.unit!==ae){n=d.unit===oe?d.value:b;var v=d.unit===oe?d.value:b*d.value*.01;i=c.unit===oe?g+a+x.value+A-c.value-v:g+a+x.value+A-b*c.value*.01-v}else u.unit!==ae?(i=u.unit===oe?g+u.value:g+a+x.value+b*u.value*.01,n=t.__calAbs()):c.unit!==ae?(n=t.__calAbs(),i=c.unit===oe?g+a+x.value+A-c.value-n:g+a+x.value+A-b*c.value*.01-n):n=d.unit!==ae?(i=w+a+x.value,d.unit===oe?d.value:b):(i=w+a+x.value,t.__calAbs());"inline"===s.display&&(s.display="block"),t.__layout({x:e,y:i,w:r,h:n})})}},{key:"__emitEvent",value:function(t,e){var i=t.event.type,r=t.x,n=t.y,a=t.covers,o=this.listener,s=this.children,h=this.style,l=this.rx,u=this.ry,f=this.outerWidth,c=this.outerHeight;if("none"!==h.display){var _,d;o.hasOwnProperty(i)&&(_=o[i]);for(var p=s.length-1;0<=p;p--){var v=s[p];v instanceof Q&&-1<["absolute","relative"].indexOf(v.style.position)&&v.__emitEvent(t,e)&&(d=!0)}for(var y=s.length-1;0<=y;y--){var g=s[y];g instanceof Q&&-1===["absolute","relative"].indexOf(g.style.position)&&g.__emitEvent(t,e)&&(d=!0)}if(e)_&&_(t);else if(d)a.push({x:r,y:n,w:f,h:c}),_&&_(t);else if(l<=r&&u<=n&&r<=l+f&&n<=u+c){for(var w=0,m=a.length;w<m;w++){var b=a[w],x=b.x,k=b.y,W=b.w,A=b.h;if(x<=r&&k<=n&&r<=x+W&&n<=k+A)return}t.target||(t.target=this),a.push({x:r,y:n,w:f,h:c}),_&&_(t)}}}},{key:"render",value:function(e){B(C(l.prototype),"render",this).call(this,e);var t=this.style,i=this.flowChildren,r=this.children,n=t.display;t.position,t.top,t.right,t.bottom,t.left,t.height;"none"!==n&&(i.forEach(function(t){(t instanceof W||"static"===t.style.position)&&t.render(e)}),r.forEach(function(t){t instanceof Q&&-1<["relative","absolute"].indexOf(t.style.position)&&t.render(e)}),e===ne.SVG&&(this.__virtualDom=a({},B(C(l.prototype),"virtualDom",this),{type:"dom",children:this.children.map(function(t){return t.virtualDom})})))}},{key:"tagName",get:function(){return this.__tagName}},{key:"children",get:function(){return this.__children}},{key:"flowChildren",get:function(){return this.__flowChildren}},{key:"absChildren",get:function(){return this.__absChildren}},{key:"lineGroups",get:function(){return this.__lineGroups}},{key:"baseLine",get:function(){var t=this.lineGroups.length;if(t){var e=this.lineGroups[t-1];return e.y-this.y+e.baseLine}return this.y}},{key:"flowY",get:function(){return this.__flowY}}],[{key:"isValid",value:function(t){return S.hasOwnProperty(t)}}]),l}();function N(t,e,i){"dom"===e.type?"dom"===i.type?function(t,e,i){P(t.firstChild,e.bb,i.bb);for(var r=e.children.length,n=i.children.length,a=0,o=t.lastChild,s=o.childNodes;a<Math.min(r,n);a++)N(s[a],e.children[a],i.children[a]);if(a<r)for(;a<r;a++)V(o,s,a);else if(a<n)for(;a<n;a++)F(o,s,a,i.children[a])}(t,e,i):"text"===i.type?R(t,i):"geom"===i.type&&function(t,e,i){P(t.firstChild,e.bb,i.bb),R(t.lastChild,i.content)}(t,e,i):"text"===i.type?"dom"===i.type?R(t,i):"text"===i.type?function(t,e,i){for(var r=e.children.length,n=i.children.length,a=0;a<Math.min(r,n);a++)D(t,a,e.children[a],i.children[a],!0);var o=t.childNodes;if(a<r)for(;a<r;a++)V(t,o,a);else if(a<n)for(;a<n;a++)F(t,o,a,i.children[a])}(t,e,i):"geom"===i.type&&R(t,i):"geom"===i.type&&("dom"===i.type?function(t,e,i){P(t.firstChild,e.bb,i.bb),R(t.lastChild,i.children)}(t,e,i):"text"===i.type?R(t,i):"geom"===i.type&&function(t,e,i){P(t.firstChild,e.bb,i.bb);for(var r=e.content.length,n=i.content.length,a=0,o=t.lastChild,s=o.childNodes;a<Math.min(r,n);a++)D(o,a,e.content[a],i.content[a]);if(a<r)for(;a<r;a++)V(o,s,a);else if(a<n)for(;a<n;a++)F(o,s,a,i.content[a])}(t,e,i))}function P(t,e,i){for(var r=e.length,n=i.length,a=0;a<Math.min(r,n);a++)D(t,a,e[a],i[a]);var o=t.childNodes;if(a<r)for(;a<r;a++)V(t,o,a);else if(a<n)for(;a<n;a++)F(t,o,a,i[a])}function D(t,e,i,r,n){var a=t.childNodes;if(i.tagName!==r.tagName)R(a[e],r);else{for(var o={},s=0,h=i.props.length;s<h;s++){var l=E(i.props[s],2),u=l[0],f=l[1];o[u]=f}for(var c=0,_=r.props.length;c<_;c++){var d=E(r.props[c],2),p=d[0];f=d[1];o.hasOwnProperty(p)?(o[p]!==f&&a[e].setAttribute(p,f),delete o[p]):a[e].setAttribute(p,f)}for(var v in o)o.hasOwnProperty(v)&&a[e].removeAttribute(v);n&&i.content!==r.content&&(a[e].textContent=r.content)}}function R(t,e){var i;Array.isArray(e)?(i="",e.forEach(function(t){i+=w.joinVirtualDom(t)})):i=w.joinVirtualDom(e),t.insertAdjacentHTML("afterend",i),t.parentNode.removeChild(t)}function F(t,e,i,r){var n=w.joinVirtualDom(r);i>=e.length?t.insertAdjacentHTML("beforeend",n):e[i].insertAdjacentHTML("beforebegin",n)}function V(t,e,i){e[i]&&t.removeChild(e[i])}var j=function(){function n(t,e,i){var r;return s(this,n),(r=o(this,C(n).call(this,t,e,i))).__node=null,r}return t(n,O),e(n,[{key:"__initProps",value:function(){if(void 0!==this.props.width){var t=parseInt(this.props.width);!isNaN(t)&&0<t&&(this.__width=t)}if(void 0!==this.props.height){var e=parseInt(this.props.height);!isNaN(e)&&0<e&&(this.__height=e)}}},{key:"__genHtml",value:function(){for(var t,e,i,r="<".concat(this.tagName),n=0,a=this.__props.length;n<a;n++){var o=this.__props[n];r+=(t=o[0],e=o[1],void 0,i=Array.isArray(e)?w.joinSourceArray(e):w.stringify(e),"className"===t&&(t="class")," "+t+'="'+w.encodeHtml(i,!0)+'"')}return r+="></".concat(this.tagName,">")}},{key:"__cb",value:function(t,e){if(!(t.touches&&1<t.touches.length)){var i=this.node.getBoundingClientRect(),r=i.x,n=i.y,a=i.top,o=i.right;r=r||a||0,n=n||o||0;var s=t.touches?t.touches[0]||{}:t;r=s.clientX-r,n=s.clientY-n,this.__emitEvent({event:t,x:r,y:n,covers:[]},e)}}},{key:"__initEvent",value:function(){var i=this,t=this.node;["click","dblclick","mousedown","mousemove","mouseup","touchstart","touchmove","touchend","touchcancel"].forEach(function(e){t.addEventListener(e,function(t){i.__cb(t,-1<["touchend","touchcancel"].indexOf(e))})})}},{key:"appendTo",value:function(t){if(t=function(t){if(w.isString(t)){var e=document.querySelector(t);if(!e)throw new Error("can not find dom of selector: "+t);return e}if(!t)throw new Error("can not find dom: "+t);return t}(t),this.__initProps(),t.nodeName.toUpperCase()===this.tagName.toUpperCase()?(this.__node=t,this.width&&t.setAttribute("width",this.width),this.height&&t.setAttribute("height",this.height)):(this.__node=t.querySelector(this.tagName),this.__node||(t.innerHTML=this.__genHtml(),this.__node=t.querySelector(this.tagName))),!this.width||!this.height){var e=window.getComputedStyle(t,null);this.width||(this.__width=parseInt(e.getPropertyValue("width")),t.setAttribute("width",this.width)),this.height||(this.__height=parseInt(e.getPropertyValue("height")),t.setAttribute("height",this.height))}var i;"canvas"===this.tagName?(this.__ctx=this.__node.getContext("2d"),this.__ctx.clearRect(0,0,this.width,this.height),i=ne.CANVAS):"svg"===this.tagName&&(i=ne.SVG);var r=this.style;if(-1===["flex","block"].indexOf(r.display)&&(r.display="block"),"absolute"===r.position&&(r.position="static"),this.__traverse(this.__ctx,i),r.width=this.width,r.height=this.height,this.__initStyle(),this.__layout({x:0,y:0,w:this.width,h:this.height}),this.__layoutAbs(this),this.render(i),i===ne.SVG){var n=this.virtualDom;this.node.__karasInit?N(this.node.firstChild,this.node.__ovd,n):this.node.innerHTML=w.joinVirtualDom(n),this.node.__ovd=n}this.node.__karasInit||(this.node.__karasInit=!0,this.__initEvent())}},{key:"node",get:function(){return this.__node}}]),n}(),I=function(){function E(t,e){var i;return s(this,E),(i=o(this,C(E).call(this,t,e))).__start=[],i.__end=[],i.__control=[],Array.isArray(i.props.start)&&(i.__start=i.props.start),Array.isArray(i.props.end)&&(i.__end=i.props.end),Array.isArray(i.props.control)&&(i.__control=i.props.control),i}return t(E,M),e(E,[{key:"render",value:function(t){B(C(E.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,o=this.mtw,s=this.plw,h=this.ptw,l=this.style,u=this.ctx,f=this.start,c=this.end,_=this.control,d=this.virtualDom;if(!(f.length<2||c.length<2)){var p=l.display,v=l.borderTopWidth,y=(l.borderRightWidth,l.borderBottomWidth,l.borderLeftWidth),g=l.stroke,w=l.strokeWidth,m=l.strokeDasharray;if("none"!==p){var b,x,k,W,A=e+y.value+a+s,M=i+v.value+o+h,S=A+f[0]*r,L=M+f[1]*n,T=A+c[0]*r,O=M+c[1]*n,N=0;Array.isArray(_[0])&&(N++,b=A+_[0][0]*r,x=M+_[0][1]*n),Array.isArray(_[1])&&(N++,k=A+_[1][0]*r,W=M+_[1][1]*n),t===ne.CANVAS?(u.strokeStyle=g,u.lineWidth=w,u.setLineDash(m),u.beginPath(),u.moveTo(S,L),2===N?u.bezierCurveTo(b,x,k,W,T,O):1===N?u.quadraticCurveTo(b,x,T,O):u.lineTo(T,O),u.stroke(),u.closePath()):t===ne.SVG&&(2===N?d.content.push({type:"item",tagName:"path",props:[["d","M".concat(S," ").concat(L," C").concat(b," ").concat(x," ").concat(k," ").concat(W," ").concat(T," ").concat(O)],["fill","none"],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]}):1===N?d.content.push({type:"item",tagName:"path",props:[["d","M".concat(S," ").concat(L," Q").concat(b," ").concat(x," ").concat(T," ").concat(O)],["fill","none"],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]}):d.content.push({type:"item",tagName:"line",props:[["x1",S],["y1",L],["x2",T],["y2",O],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]}))}}}},{key:"start",get:function(){return this.__start}},{key:"end",get:function(){return this.__end}},{key:"control",get:function(){return this.__control}}]),E}(),Y=function(){function E(t,e){var i;return s(this,E),(i=o(this,C(E).call(this,t,e))).__points=[],Array.isArray(i.props.points)&&(i.__points=i.props.points),-1<["TOP_LEFT","TOP_RIGHT","BOTTOM_LEFT","BOTTOM_RIGHT"].indexOf(i.props.origin)?i.__origin=i.props.origin:i.__origin="BOTTOM_LEFT",i}return t(E,M),e(E,[{key:"render",value:function(t){B(C(E.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,o=this.mtw,s=this.plw,h=this.ptw,l=this.style,u=this.ctx,f=this.points,c=this.origin,_=this.virtualDom;if(!(f.length<2)){for(var d=0,p=f.length;d<p;d++)if(!Array.isArray(f[d])||f[d].length<2)return;var v=l.display,y=l.borderTopWidth,g=l.borderLeftWidth,w=l.stroke,m=l.strokeWidth,b=l.strokeDasharray;if("none"!==v){var x=e+g.value+a+s,k=i+y.value+o+h,W=this.__pts=[];if("TOP_LEFT"===c?f.forEach(function(t){W.push([x+t[0]*r,k+t[1]*n])}):"TOP_RIGHT"===c?f.forEach(function(t){W.push([x+r-t[0]*r,k+t[1]*n])}):"BOTTOM_LEFT"===c?f.forEach(function(t){W.push([x+t[0]*r,k+n-t[1]*n])}):"BOTTOM_RIGHT"===c&&f.forEach(function(t){W.push([x+r-t[0]*r,k+n-t[1]*n])}),t===ne.CANVAS){u.strokeStyle=w,u.lineWidth=m,u.setLineDash(b),u.beginPath(),u.moveTo(W[0][0],k+W[0][1]);for(var A=1,M=W.length;A<M;A++){var S=W[A];u.lineTo(S[0],S[1])}m&&"transparent"!==w&&u.stroke(),u.closePath()}else if(t===ne.SVG){for(var L="",T=0,O=W.length;T<O;T++){var N=W[T];L+="".concat(N[0],",").concat(N[1]," ")}_.content.push({type:"item",tagName:"polyline",props:[["points",L],["fill","none"],["stroke",w],["stroke-width",m],["stroke-dasharray",b]]})}}}}},{key:"getPointsByX",value:function(t){for(var e=1/0,i=this.__pts.length,r=[],n=0;n<i;n++){var a=Math.abs(this.__pts[n][0]-t);a<e&&(e=a)}for(var o=0;o<i;o++){Math.abs(this.__pts[o][0]-t)===e&&r.push({index:o,x:this.__pts[o][0],y:this.__pts[o][1]})}return r}},{key:"points",get:function(){return this.__points}},{key:"origin",get:function(){return this.__origin}}]),E}(),G=function(){function N(t,e){var i;return s(this,N),(i=o(this,C(N).call(this,t,e))).__points=[],Array.isArray(i.props.points)&&(i.__points=i.props.points),i}return t(N,M),e(N,[{key:"render",value:function(t){B(C(N.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,o=this.mtw,s=this.plw,h=this.ptw,l=this.style,u=this.ctx,f=this.points,c=this.virtualDom;if(!(f.length<3)){for(var _=0,d=f.length;_<d;_++)if(!Array.isArray(f[_])||f[_].length<2)return;var p=l.display,v=l.borderTopWidth,y=l.borderLeftWidth,g=l.stroke,w=l.strokeWidth,m=l.strokeDasharray,b=l.fill;if("none"!==p){var x=e+y.value+a+s,k=i+v.value+o+h;if(f.forEach(function(t){t[0]=x+t[0]*r,t[1]=k+t[1]*n}),t===ne.CANVAS){u.strokeStyle=g,u.lineWidth=w,u.fillStyle=b,u.setLineDash(m),u.beginPath(),u.moveTo(f[0][0],k+f[0][1]);for(var W=1,A=f.length;W<A;W++){var M=f[W];u.lineTo(M[0],M[1])}u.fill(),w&&"transparent"!==g&&u.stroke(),u.closePath()}else if(t===ne.SVG){for(var S="",L=0,T=S.length;L<T;L++){var O=S[L];S+="".concat(O[0],",").concat(O[1]," ")}c.content.push({type:"item",tagName:"polygon",props:[["points",S],["fill",b],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]})}}}}},{key:"points",get:function(){return this.__points}}]),N}(),X=.5*Math.PI;function H(t,e,i,r){for(;360<r;)r-=360;for(;r<0;)r+=360;return 0<=r&&r<90?[t+Math.sin(r*Math.PI/180)*i,e-Math.cos(r*Math.PI/180)*i]:90<=r&&r<180?[t+Math.cos((r-90)*Math.PI/180)*i,e+Math.sin((r-90)*Math.PI/180)*i]:180<=r&&r<270?[t-Math.cos((270-r)*Math.PI/180)*i,e+Math.sin((270-r)*Math.PI/180)*i]:[t-Math.sin((360-r)*Math.PI/180)*i,e-Math.cos((360-r)*Math.PI/180)*i]}var z=function(){function N(t,e){var i;return s(this,N),(i=o(this,C(N).call(this,t,e))).__start=0,i.__end=0,i.props.start&&(i.__start=parseFloat(i.props.start),isNaN(i.start)&&(i.__start=0)),i.props.end&&(i.__end=parseFloat(i.props.end),isNaN(i.end)&&(i.__end=0)),i.__r=1,i.props.r&&(i.__r=parseFloat(i.props.r),isNaN(i.r)&&(i.__r=1)),i}return t(N,M),e(N,[{key:"render",value:function(t){B(C(N.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,o=this.mtw,s=this.plw,h=this.ptw,l=this.style,u=this.ctx,f=this.start,c=this.end,_=this.r,d=this.virtualDom;if(f!==c){var p=l.display,v=l.borderTopWidth,y=l.borderLeftWidth,g=l.stroke,w=l.strokeWidth,m=l.strokeDasharray,b=l.fill;if("none"!==p){var x=e+y.value+a+s,k=i+v.value+o+h;if(x+=.5*r,k+=.5*n,_*=.5*Math.min(r,n),t===ne.CANVAS)u.strokeStyle=g,u.lineWidth=w,u.fillStyle=b,u.setLineDash(m),u.beginPath(),u.moveTo(x,k),u.arc(x,k,_,f*Math.PI/180-X,c*Math.PI/180-X),u.fill(),w&&"transparent"!==g&&u.stroke(),u.closePath();else if(t===ne.SVG){var W,A,M,S,L=E(H(x,k,_,f),2);W=L[0],A=L[1];var T=E(H(x,k,_,c),2);M=T[0],S=T[1];var O=180<c-f?1:0;d.content.push({type:"item",tagName:"path",props:[["d","M".concat(x," ").concat(k," L").concat(W," ").concat(A," A").concat(_," ").concat(_," 0 ").concat(O," 1 ").concat(M," ").concat(S," z")],["fill",b],["stroke",g],["stroke-width",w],["stroke-dasharray",m]]})}}}}},{key:"start",get:function(){return this.__start}},{key:"end",get:function(){return this.__end}},{key:"r",get:function(){return this.__r}}]),N}(),$=function(){function b(t,e){return s(this,b),o(this,C(b).call(this,t,e))}return t(b,M),e(b,[{key:"render",value:function(t){B(C(b.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,o=this.mtw,s=this.plw,h=this.ptw,l=this.style,u=this.ctx,f=this.virtualDom,c=l.display,_=l.borderTopWidth,d=l.borderLeftWidth,p=l.stroke,v=l.strokeWidth,y=l.strokeDasharray,g=l.fill;if("none"!==c){var w=e+d.value+a+s,m=i+_.value+o+h;t===ne.CANVAS?(u.strokeStyle=p,u.lineWidth=v,u.fillStyle=g,u.setLineDash(y),u.beginPath(),u.moveTo(w,m),u.lineTo(w+r,m),u.lineTo(w+r,m+n),u.lineTo(w,m+n),u.fill(),v&&"transparent"!==p&&u.stroke(),u.closePath()):t===ne.SVG&&f.content.push({type:"item",tagName:"rect",props:[["x",e],["y",i],["width",r],["height",n],["fill",g],["stroke",p],["stroke-width",v],["stroke-dasharray",y]]})}}}]),b}(),Z=function(){function x(t,e){var i;return s(this,x),(i=o(this,C(x).call(this,t,e))).__r=1,i.props.r&&(i.__r=parseFloat(i.props.r),isNaN(i.r)&&(i.__r=1)),i}return t(x,M),e(x,[{key:"render",value:function(t){B(C(x.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,o=this.mtw,s=this.plw,h=this.ptw,l=this.style,u=this.ctx,f=this.r,c=this.virtualDom,_=l.display,d=l.borderTopWidth,p=l.borderLeftWidth,v=l.stroke,y=l.strokeWidth,g=l.strokeDasharray,w=l.fill;if("none"!==_){var m=e+p.value+a+s,b=i+d.value+o+h;m+=.5*r,b+=.5*n,f*=.5*Math.min(r,n),t===ne.CANVAS?(u.strokeStyle=v,u.lineWidth=y,u.fillStyle=w,u.setLineDash(g),u.beginPath(),u.arc(m,b,f,0,2*Math.PI),"transparent"!==w&&u.fill(),y&&"transparent"!==v&&u.stroke(),u.closePath()):t===ne.SVG&&c.content.push({type:"item",tagName:"circle",props:[["cx",m],["cy",b],["r",f],["fill",w],["stroke",v],["stroke-width",y],["stroke-dasharray",g]]})}}},{key:"r",get:function(){return this.__r}}]),x}(),q=function(){function k(t,e){var i;return s(this,k),(i=o(this,C(k).call(this,t,e))).__rx=1,i.props.rx&&(i.__rx=parseFloat(i.props.rx),isNaN(i.rx)&&(i.__rx=1)),i.__ry=1,i.props.ry&&(i.__ry=parseFloat(i.props.ry),isNaN(i.rx)&&(i.__ry=1)),i}return t(k,M),e(k,[{key:"render",value:function(t){B(C(k.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,o=this.mtw,s=this.plw,h=this.ptw,l=this.style,u=this.ctx,f=this.rx,c=this.ry,_=this.virtualDom,d=l.display,p=l.borderTopWidth,v=l.borderLeftWidth,y=l.stroke,g=l.strokeWidth,w=l.strokeDasharray,m=l.fill;if("none"!==d){var b=e+v.value+a+s,x=i+p.value+o+h;b+=.5*r,x+=.5*n,f*=.5*r,c*=.5*n,t===ne.CANVAS?(u.strokeStyle=y,u.lineWidth=g,u.fillStyle=m,u.setLineDash(w),u.beginPath(),u.moveTo(b,x),u.ellipse&&u.ellipse(b,x,f,c,0,0,2*Math.PI),u.fill(),g&&"transparent"!==y&&u.stroke(),u.closePath()):t===ne.SVG&&_.content.push({type:"item",tagName:"ellipse",props:[["cx",b],["cy",x],["rx",f],["ry",c],["fill",m],["stroke",y],["stroke-width",g],["stroke-dasharray",w]]})}}},{key:"rx",get:function(){return this.__rx}},{key:"ry",get:function(){return this.__ry}}]),k}(),J=function(){function O(t,e){var i;return s(this,O),(i=o(this,C(O).call(this,t,e))).__nx=0,i.props.nx&&(i.__nx=parseFloat(i.props.nx),isNaN(i.nx)&&(i.__nx=0)),i.__ny=0,i.props.ny&&(i.__ny=parseFloat(i.props.ny),isNaN(i.ny)&&(i.__ny=0)),i}return t(O,M),e(O,[{key:"render",value:function(t){B(C(O.prototype),"render",this).call(this,t);var e=this.rx,i=this.ry,r=this.width,n=this.height,a=this.mlw,o=this.mtw,s=this.plw,h=this.ptw,l=this.style,u=this.ctx,f=this.nx,c=this.ny,_=this.virtualDom;if(!(r<=0||n<=0||f<3&&c<3)){var d=l.display,p=l.borderTopWidth,v=l.borderLeftWidth,y=l.stroke,g=l.strokeWidth,w=l.strokeDasharray;if("none"!==d){var m=e+v.value+a+s,b=i+p.value+o+h,x=m+r,k=b+n,W=[],A=[];if(3<=f)for(var M=r/(f-1),S=0;S<f;S++)A.push(m+S*M);if(3<=c)for(var L=n/(c-1),T=0;T<c;T++)W.push(b+T*L);t===ne.CANVAS?(u.strokeStyle=y,u.lineWidth=g,u.setLineDash(w),u.beginPath(),W.forEach(function(t){u.moveTo(m,t),u.lineTo(x,t)}),A.forEach(function(t){u.moveTo(t,b),u.lineTo(t,k)}),g&&"transparent"!==y&&u.stroke(),u.closePath()):t===ne.SVG&&(W.forEach(function(t){_.content.push({type:"item",tagName:"line",props:[["x1",m],["y1",t],["x2",x],["y2",t],["stroke",y],["stroke-width",g],["stroke-dasharray",w]]})}),A.forEach(function(t){_.content.push({type:"item",tagName:"line",props:[["x1",t],["y1",b],["x2",t],["y2",k],["stroke",y],["stroke-width",g],["stroke-dasharray",w]]})}))}}}},{key:"nx",get:function(){return this.__nx}},{key:"ny",get:function(){return this.__ny}},{key:"dash",get:function(){return this.__dash}}]),O}();M.register("$line",I),M.register("$polyline",Y),M.register("$polygon",G),M.register("$sector",z),M.register("$rect",$),M.register("$circle",Z),M.register("$ellipse",q),M.register("$grid",J);var K={render:function(t,e){if(!(t instanceof j))throw new Error("render root muse be canvas or svg");return e&&t.appendTo(e),t},createVd:function(t,e,i){if(-1<["canvas","svg"].indexOf(t))return new j(t,e,i);if(O.isValid(t))return new O(t,e,i);throw new Error("can not use marker: "+t)},createGm:function(t,e){return new(M.getImplement(t))(t,e)},createCp:function(t,e){return new t(e)},Geom:M,mode:ne};return"undefined"!=typeof window&&(window.karas=K),K}); | ||
//# sourceMappingURL=index.min.js.map |
{ | ||
"name": "karas", | ||
"version": "0.0.4", | ||
"version": "0.0.5", | ||
"description": "鸦", | ||
@@ -5,0 +5,0 @@ "maintainers": [ |
@@ -24,10 +24,10 @@ import Dom from './node/Dom'; | ||
let karas = { | ||
render(cs, dom) { | ||
if(!(cs instanceof Root)) { | ||
render(root, dom) { | ||
if(!(root instanceof Root)) { | ||
throw new Error('render root muse be canvas or svg'); | ||
} | ||
if(dom) { | ||
cs.appendTo(dom); | ||
root.appendTo(dom); | ||
} | ||
return cs; | ||
return root; | ||
}, | ||
@@ -34,0 +34,0 @@ createVd(tagName, props, children) { |
@@ -335,3 +335,5 @@ import Xom from './Xom'; | ||
} | ||
h -= borderTopWidth.value + borderBottomWidth.value + mtw + mbw + ptw + pbw; | ||
if(height.unit === unit.AUTO) { | ||
h -= borderTopWidth.value + borderBottomWidth.value + mtw + mbw + ptw + pbw; | ||
} | ||
// 递归布局,将inline的节点组成lineGroup一行 | ||
@@ -516,3 +518,5 @@ let lineGroup = new LineGroup(x, y); | ||
} | ||
h -= borderTopWidth.value + borderBottomWidth.value + mtw + mbw + ptw + pbw; | ||
if(height.unit === unit.AUTO) { | ||
h -= borderTopWidth.value + borderBottomWidth.value + mtw + mbw + ptw + pbw; | ||
} | ||
let isDirectionRow = flexDirection === 'row'; | ||
@@ -849,3 +853,5 @@ // column时height可能为auto,此时取消伸展,退化为类似block布局,但所有子元素强制block | ||
} | ||
h -= borderTopWidth.value + borderBottomWidth.value + mtw + mbw + ptw + pbw; | ||
if(height.unit === unit.AUTO) { | ||
h -= borderTopWidth.value + borderBottomWidth.value + mtw + mbw + ptw + pbw; | ||
} | ||
// 递归布局,将inline的节点组成lineGroup一行 | ||
@@ -852,0 +858,0 @@ let lineGroup = new LineGroup(x, y); |
@@ -5,3 +5,3 @@ class Node { | ||
this.__y = 0; | ||
this.__ox = 0; // relative或transform造成的偏移量 | ||
this.__ox = 0; // relative/transform2d/margin:auto/text-align等造成的偏移量 | ||
this.__oy = 0; | ||
@@ -8,0 +8,0 @@ this.__width = 0; |
@@ -46,2 +46,113 @@ import Node from './Node'; | ||
/* 获取合适的虚线实体空白宽度ps/pd和数量n | ||
* 总长total,start边长bs,end边长be,内容长w, | ||
* 实体长范围[smin,smax],空白长范围[dmin,dmax] | ||
*/ | ||
function getFitDashed(total, bs, be, w, smin, smax, dmin, dmax) { | ||
let n = 1; | ||
let ps = 1; | ||
let pd = 1; | ||
// 从最大实体空白长开始尝试 | ||
outer: | ||
for(let i = smax; i >= smin; i--) { | ||
for(let j = dmax; j >= dmin; j--) { | ||
// 已知实体空白长度,n实体和n-1空白组成total,计算获取n数量 | ||
let per = i + j; | ||
let num = Math.floor((total + j) / per); | ||
let k = j; | ||
// 可能除不尽,此时扩展空白长 | ||
if(num * per < j + total) { | ||
let free = total - num * i; | ||
k = free / (num - 1); | ||
if(k > dmax) { | ||
continue; | ||
} | ||
} | ||
per = i + k; | ||
// bs比实体大才有效,因为小的话必定和第一个实体完整相连 | ||
if(bs > 1 && bs > i) { | ||
let mo = bs % per; | ||
if(mo > i) { | ||
continue; | ||
} | ||
if(be > 1) { | ||
let mo = (bs + w) % per; | ||
if(mo > i) { | ||
continue; | ||
} | ||
} | ||
} | ||
if(be > 1) { | ||
let mo = (bs + w) % per; | ||
if(mo > i) { | ||
continue; | ||
} | ||
} | ||
if(num > 0) { | ||
n = num; | ||
ps = i; | ||
pd = k; | ||
} | ||
break outer; | ||
} | ||
} | ||
return { | ||
n, | ||
ps, | ||
pd, | ||
}; | ||
} | ||
// dashed时n个实线和n-1虚线默认以3:1宽度组成,dotted则是n和n以1:1组成 | ||
function getDashed(style, m1, m2, m3, m4, bw) { | ||
let total = m4 - m1; | ||
let w = m3 - m2; | ||
let bs = m2 - m1; | ||
let be = m4 - m3; | ||
if(style === 'dotted') { | ||
return getFitDashed(total, bs, be, w, bw, bw, Math.max(1, bw * 0.25), bw * 2); | ||
} | ||
else { | ||
let { n, ps, pd } = getFitDashed(total, bs, be, w, bw, bw * 3, Math.max(1, bw * 0.25), bw * 2); | ||
if(n === 1) { | ||
return getFitDashed(total, bs, be, w, bw, bw, Math.max(1, bw * 0.25), bw * 2); | ||
} | ||
// 降级为dotted | ||
return { n, ps, pd }; | ||
} | ||
} | ||
function renderBorder(renderMode, points, color, ctx, virtualDom) { | ||
if(renderMode === mode.CANVAS) { | ||
points.forEach(point => { | ||
ctx.beginPath(); | ||
ctx.fillStyle = color; | ||
ctx.moveTo(point[0], point[1]); | ||
for(let i = 2, len = point.length; i < len; i += 2) { | ||
ctx.lineTo(point[i], point[i + 1]); | ||
} | ||
ctx.fill(); | ||
ctx.closePath(); | ||
}); | ||
} | ||
else if(renderMode === mode.SVG) { | ||
let s = ''; | ||
points.forEach(point => { | ||
s += `M ${point[0]} ${point[1]}`; | ||
for(let i = 2, len = point.length; i < len; i += 2) { | ||
s += `L ${point[i]} ${point[i + 1]} `; | ||
} | ||
}); | ||
let item = { | ||
type: 'item', | ||
tagName: 'path', | ||
props: [ | ||
['d', s], | ||
['fill', color], | ||
], | ||
}; | ||
virtualDom.bb.push(item); | ||
} | ||
} | ||
class Xom extends Node { | ||
@@ -149,15 +260,15 @@ constructor(tagName, props) { | ||
left, | ||
backgroundColor, | ||
backgroundColor: bgc, | ||
borderTopWidth, | ||
borderTopColor, | ||
borderTopStyle, | ||
borderTopColor: btc, | ||
borderTopStyle: bts, | ||
borderRightWidth, | ||
borderRightColor, | ||
borderRightStyle, | ||
borderRightColor: brc, | ||
borderRightStyle: brs, | ||
borderBottomWidth, | ||
borderBottomColor, | ||
borderBottomStyle, | ||
borderBottomColor: bbc, | ||
borderBottomStyle: bbs, | ||
borderLeftWidth, | ||
borderLeftColor, | ||
borderLeftStyle, | ||
borderLeftColor: blc, | ||
borderLeftStyle : bls, | ||
transform, | ||
@@ -201,14 +312,17 @@ } = style; | ||
} | ||
// 使用rx和ry渲染位置,考虑了relative和translate影响 | ||
let { rx: x, ry: y } = this; | ||
x += mlw; | ||
y += mtw; | ||
if(backgroundColor) { | ||
let x1 = x; | ||
if(borderLeftWidth) { | ||
x1 += borderLeftWidth.value; | ||
} | ||
let y1 = y; | ||
if(borderTopWidth) { | ||
y1 += borderTopWidth.value; | ||
} | ||
let btw = borderTopWidth.value; | ||
let brw = borderRightWidth.value; | ||
let bbw = borderBottomWidth.value; | ||
let blw = borderLeftWidth.value; | ||
let x1 = x + mlw; | ||
let x2 = x1 + blw; | ||
let x3 = x2 + width + plw + prw; | ||
let x4 = x3 + brw; | ||
let y1 = y + mtw; | ||
let y2 = y1 + btw; | ||
let y3 = y2 + height + ptw + pbw; | ||
let y4 = y3 + bbw; | ||
if(bgc && bgc !== 'transparent') { | ||
let w = width + plw + prw; | ||
@@ -218,4 +332,4 @@ let h = height + ptw + pbw; | ||
ctx.beginPath(); | ||
ctx.fillStyle = backgroundColor; | ||
ctx.rect(x1, y1, w, h); | ||
ctx.fillStyle = bgc; | ||
ctx.rect(x2, y2, w, h); | ||
ctx.fill(); | ||
@@ -229,7 +343,7 @@ ctx.closePath(); | ||
props: [ | ||
['x', x1], | ||
['y', y1], | ||
['x', x2], | ||
['y', y2], | ||
['width', w], | ||
['height', h], | ||
['fill', backgroundColor] | ||
['fill', bgc] | ||
], | ||
@@ -239,183 +353,394 @@ }); | ||
} | ||
if(borderTopWidth.value) { | ||
let x1 = x + borderLeftWidth.value; | ||
let y1 = y + borderTopWidth.value * 0.5; | ||
let x2 = x1 + width; | ||
x2 += plw + prw; | ||
if(renderMode === mode.CANVAS) { | ||
ctx.beginPath(); | ||
ctx.lineWidth = borderTopWidth.value; | ||
ctx.strokeStyle = borderTopColor; | ||
if(borderTopStyle === 'dashed') { | ||
ctx.setLineDash([borderTopWidth.value * 3, borderTopWidth.value * 2]); | ||
// 边框需考虑尖角,两条相交边平分45°夹角 | ||
if(btw > 0 && btc !== 'transparent') { | ||
let points = []; | ||
if(['dashed', 'dotted'].indexOf(bts) > -1) { | ||
// 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
let { n, ps, pd } = getDashed(bts, x1, x2, x3, x4, btw); | ||
if(n <= 1) { | ||
points.push([x1, y1, x4, y1, x3, y2, x2, y2]); | ||
} | ||
else if(borderTopStyle === 'dotted') { | ||
ctx.setLineDash([borderTopWidth.value, borderTopWidth.value]); | ||
} | ||
else { | ||
ctx.setLineDash([]); | ||
let deg1 = Math.atan(btw / blw); | ||
let deg2 = Math.atan(btw / brw); | ||
for(let i = 0; i < n; i++) { | ||
// 最后一个可能没有到底,延长之 | ||
let isLast = i === n - 1; | ||
let xx1 = i ? (x1 + ps * i + pd * i) : x1; | ||
let xx4 = xx1 + ps; | ||
let yy1; | ||
let yy2; | ||
// 整个和borderLeft重叠 | ||
if(xx4 < x2) { | ||
if(isLast) { | ||
points.push([x1, y1, x4, y1, x3, y2, x2, y2]); | ||
} | ||
else { | ||
yy1 = y1 + (xx1 - x1) * Math.tan(deg1); | ||
yy2 = y1 + (xx4 - x1) * Math.tan(deg1); | ||
points.push([xx1, y1, xx4, y1, xx4, yy2, xx1, yy1]); | ||
} | ||
} | ||
// 整个和borderRight重叠 | ||
else if(xx1 > x3) { | ||
yy1 = y1 + (x4 - xx1) * Math.tan(deg2); | ||
yy2 = y1 + (x4 - xx4) * Math.tan(deg2); | ||
if(isLast) { | ||
points.push([xx1, y1, x4, y1, xx1, yy1]); | ||
} | ||
else { | ||
points.push([xx1, y1, xx4, y1, xx4, yy2, xx1, yy1]); | ||
} | ||
} | ||
// 不被整个重叠的情况再细分 | ||
else { | ||
// 上部分和borderLeft重叠 | ||
if(xx1 < x2) { | ||
yy1 = y1 + (xx1 - x1) * Math.tan(deg1); | ||
if(isLast) { | ||
points.push([xx1, y1, x4, y1, x3, y2, x2, y2, xx1, yy1]); | ||
} | ||
else { | ||
// 下部分和borderRight重叠 | ||
if(xx4 > x3) { | ||
points.push([xx1, y1, xx4, y1, x3, y2, x2, y2, xx1, yy1]); | ||
} | ||
// 下部独立 | ||
else { | ||
points.push([xx1, y1, xx4, y1, xx4, y2, x2, y2, xx1, yy1]); | ||
} | ||
} | ||
} | ||
// 下部分和borderRight重叠 | ||
else if(xx4 > x3) { | ||
yy1 = y1 + (x4 - xx4) * Math.tan(deg2); | ||
// 上部分和borderLeft重叠 | ||
if(xx1 < x2) { | ||
if(isLast) { | ||
points.push([xx1, y1, x4, y1, x3, y2, x2, y2, xx1, yy1]); | ||
} | ||
else { | ||
points.push([xx1, y1, xx4, y1, xx4, yy1, x3, y2, x2, y2, xx1, yy1]); | ||
} | ||
} | ||
// 上部独立 | ||
else { | ||
if(isLast) { | ||
points.push([xx1, y1, x4, y1, x3, y2, xx1, y2]); | ||
} | ||
else { | ||
points.push([xx1, y1, xx4, y1, xx4, yy1, x3, y2, xx1, y2]); | ||
} | ||
} | ||
} | ||
// 完全独立 | ||
else { | ||
if(isLast) { | ||
points.push([xx1, y1, x4, y1, x3, y2, xx1, y2]); | ||
} | ||
else { | ||
points.push([xx1, y1, xx4, y1, xx4, y2, xx1, y2]); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
ctx.moveTo(x1, y1); | ||
ctx.lineTo(x2, y1); | ||
ctx.stroke(); | ||
ctx.closePath(); | ||
} | ||
else if(renderMode === mode.SVG) { | ||
let item = { | ||
type: 'item', | ||
tagName: 'line', | ||
props: [ | ||
['x1', x1], | ||
['y1', y1], | ||
['x2', x2], | ||
['y2', y1], | ||
['stroke-width', borderTopWidth.value], | ||
['stroke', borderTopColor] | ||
], | ||
}; | ||
if(borderTopStyle === 'dashed') { | ||
item.props.push(['stroke-dasharray', `${borderTopWidth.value * 3}, ${borderTopWidth.value * 2}`]) | ||
} | ||
else if(borderTopStyle === 'dotted') { | ||
item.props.push(['stroke-dasharray', `${borderTopWidth.value}, ${borderTopWidth.value}`]) | ||
} | ||
virtualDom.bb.push(item); | ||
else { | ||
points.push([x1, y1, x4, y1, x3, y2, x2, y2]); | ||
} | ||
renderBorder(renderMode, points, btc, ctx, virtualDom); | ||
} | ||
if(borderRightWidth.value) { | ||
let x1 = x + width + borderLeftWidth.value + borderRightWidth.value * 0.5; | ||
let y1 = y; | ||
let y2 = y1 + height + borderTopWidth.value + borderBottomWidth.value; | ||
x1 += plw + prw; | ||
y2 += ptw + pbw; | ||
if(renderMode === mode.CANVAS) { | ||
ctx.beginPath(); | ||
ctx.lineWidth = borderRightWidth.value; | ||
ctx.strokeStyle = borderRightColor; | ||
if(borderRightStyle === 'dashed') { | ||
ctx.setLineDash([borderRightWidth.value * 3, borderRightWidth.value * 2]); | ||
if(brw > 0 && brc !== 'transparent') { | ||
let points = []; | ||
if(['dashed', 'dotted'].indexOf(brs) > -1) { | ||
// 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
let { n, ps, pd } = getDashed(brs, y1, y2, y3, y4, brw); | ||
if(n <= 1) { | ||
points.push([x3, y2, x4, y1, x4, y4, x3, y3]); | ||
} | ||
else if(borderRightStyle === 'dotted') { | ||
ctx.setLineDash([borderRightWidth.value, borderRightWidth.value * 2]); | ||
} | ||
else { | ||
ctx.setLineDash([]); | ||
let deg1 = Math.atan(brw / btw); | ||
let deg2 = Math.atan(brw / bbw); | ||
for(let i = 0; i < n; i++) { | ||
// 最后一个可能没有到底,延长之 | ||
let isLast = i === n - 1; | ||
let yy1 = i ? (y1 + ps * i + pd * i) : y1; | ||
let yy4 = yy1 + ps; | ||
let xx1; | ||
let xx2; | ||
// 整个和borderTop重叠 | ||
if(yy4 < y2) { | ||
if(isLast) { | ||
points.push([x3, y2, x4, y1, x4, y4, x3, y3]); | ||
} | ||
else { | ||
xx1 = x4 - (yy4 - y1) * Math.tan(deg1); | ||
xx2 = x4 - (yy1 - y1) * Math.tan(deg1); | ||
points.push([xx1, yy4, xx2, yy1, x4, yy1, x4, yy4]); | ||
} | ||
} | ||
// 整个和borderBottom重叠 | ||
else if(yy1 > y3) { | ||
xx1 = x3 + (yy1 - y3) * Math.tan(deg2); | ||
xx2 = x3 + (yy4 - y3) * Math.tan(deg2); | ||
if(isLast) { | ||
points.push([xx1, yy1, x4, yy1, x4, y4]); | ||
} | ||
else { | ||
points.push([xx1, yy1, x4, yy1, x4, yy4, xx2, yy4]); | ||
} | ||
} | ||
// 不被整个重叠的情况再细分 | ||
else { | ||
// 上部分和borderTop重叠 | ||
if(yy1 < y2) { | ||
xx1 = x3 + (y2 - yy1) * Math.tan(deg1); | ||
if(isLast) { | ||
points.push([x3, y2, xx1, yy1, x4, yy1, x4, y4, x3, y4]); | ||
} | ||
else { | ||
// 下部分和borderBottom重叠 | ||
if(yy4 > y3) { | ||
points.push([x3, y2, xx1, yy1, x4, yy1, x4, yy4, xx1, yy4, x3, y3]); | ||
} | ||
// 下部独立 | ||
else { | ||
points.push([x3, y2, xx1, yy1, x4, yy1, x4, yy4, x3, yy4]); | ||
} | ||
} | ||
} | ||
// 下部分和borderBottom重叠 | ||
else if(yy4 > y3) { | ||
xx1 = x3 + (yy4 - y3) * Math.tan(deg2); | ||
// 上部分和borderTop重叠 | ||
if(yy1 < y2) { | ||
if(isLast) { | ||
points.push([x3, y2, xx1, yy1, x4, yy1, x4, y4, x3, y3]); | ||
} | ||
else { | ||
points.push([x3, y2, xx1, yy1, x4, yy1, x4, yy4, xx1, yy4, x3, y3]); | ||
} | ||
} | ||
// 上部独立 | ||
else { | ||
if(isLast) { | ||
points.push([x3, yy1, x4, yy1, x4, y4, x3, y3]); | ||
} | ||
else { | ||
points.push([x3, yy1, x4, yy1, x4, yy4, xx1, yy4, x3, y3]); | ||
} | ||
} | ||
} | ||
// 完全独立 | ||
else { | ||
if(isLast) { | ||
points.push([x3, yy1, x4, yy1, x4, y4, x3, y3]); | ||
} | ||
else { | ||
points.push([x3, yy1, x4, yy1, x4, yy4, x3, yy4]); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
ctx.moveTo(x1, y1); | ||
ctx.lineTo(x1, y2); | ||
ctx.stroke(); | ||
ctx.closePath(); | ||
} | ||
else if(renderMode === mode.SVG) { | ||
let item = { | ||
type: 'item', | ||
tagName: 'line', | ||
props: [ | ||
['x1', x1], | ||
['y1', y1], | ||
['x2', x1], | ||
['y2', y2], | ||
['stroke-width', borderRightWidth.value], | ||
['stroke', borderRightColor] | ||
], | ||
}; | ||
if(borderRightStyle === 'dashed') { | ||
item.props.push(['stroke-dasharray', `${borderRightWidth.value * 3}, ${borderRightWidth.value * 2}`]) | ||
} | ||
else if(borderTopStyle === 'dotted') { | ||
item.props.push(['stroke-dasharray', `${borderRightWidth.value}, ${borderRightWidth.value}`]) | ||
} | ||
virtualDom.bb.push(item); | ||
else { | ||
points.push([x3, y2, x4, y1, x4, y4, x3, y3]); | ||
} | ||
renderBorder(renderMode, points, brc, ctx, virtualDom); | ||
} | ||
if(borderBottomWidth.value) { | ||
let x1 = x + borderLeftWidth.value; | ||
let y1 = y + height + borderTopWidth.value + borderBottomWidth.value * 0.5; | ||
let x2 = x1 + width; | ||
x2 += plw + prw; | ||
y1 += ptw + pbw; | ||
if(renderMode === mode.CANVAS) { | ||
ctx.beginPath(); | ||
ctx.lineWidth = borderBottomWidth.value; | ||
ctx.strokeStyle = borderBottomColor; | ||
if(borderBottomStyle === 'dashed') { | ||
ctx.setLineDash([borderBottomWidth.value * 3, borderBottomWidth.value * 2]); | ||
if(bbw > 0 && bbc !== 'transparent') { | ||
let points = []; | ||
// 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
if(['dashed', 'dotted'].indexOf(bbs) > -1) { | ||
// 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
let { n, ps, pd } = getDashed(bbs, x1, x2, x3, x4, bbw); | ||
let deg1 = Math.atan(bbw / blw); | ||
let deg2 = Math.atan(bbw / brw); | ||
for(let i = 0; i < n; i++) { | ||
// 最后一个可能没有到底,延长之 | ||
let isLast = i === n - 1; | ||
let xx1 = i ? (x1 + ps * i + pd * i) : x1; | ||
let xx4 = xx1 + ps; | ||
let yy1; | ||
let yy2; | ||
// 整个和borderLeft重叠 | ||
if(xx4 < x2) { | ||
if(isLast) { | ||
points.push([x1, y4, x2, y3, x3, y3, x4, y4]); | ||
} | ||
else { | ||
yy1 = y4 - (xx1 - x1) * Math.tan(deg1); | ||
yy2 = y4 - (xx4 - x1) * Math.tan(deg1); | ||
points.push([xx1, yy1, xx4, yy2, xx4, y4, xx1, y4]); | ||
} | ||
} | ||
// 整个和borderRight重叠 | ||
else if(xx1 > x3) { | ||
yy1 = y4 - (xx1 - x1) * Math.tan(deg2); | ||
yy2 = y4 - (xx4 - x1) * Math.tan(deg2); | ||
if(isLast) { | ||
points.push([xx1, yy1, x4, y4, xx1, y4]); | ||
} | ||
else { | ||
points.push([xx1, yy1, xx4, yy2, xx4, y4, xx1, y4]); | ||
} | ||
} | ||
// 不被整个重叠的情况再细分 | ||
else { | ||
// 上部分和borderLeft重叠 | ||
if(xx1 < x2) { | ||
yy1 = y3 + (xx1 - x1) * Math.tan(deg1); | ||
if(isLast) { | ||
points.push([xx1, yy1, x2, y3, x3, y3, x4, y4, xx1, y4]); | ||
} | ||
else { | ||
// 下部分和borderRight重叠 | ||
if(xx4 > x3) { | ||
points.push([xx1, yy1, x2, y3, x3, y3, xx4, y4, xx1, y4]); | ||
} | ||
// 下部独立 | ||
else { | ||
points.push([xx1, yy1, x2, y3, xx4, y3, xx4, y4, xx1, y4]); | ||
} | ||
} | ||
} | ||
// 下部分和borderRight重叠 | ||
else if(xx4 > x3) { | ||
yy1 = y4 - (x4 - xx4) * Math.tan(deg2); | ||
// 上部分和borderLeft重叠 | ||
if(xx1 < x2) { | ||
if(isLast) { | ||
points.push([xx1, yy1, x3, y3, x4, y4, xx1, y4]); | ||
} | ||
else { | ||
points.push([xx1, yy1, x3, y3, xx4, yy1, xx4, y4, xx1, y4]); | ||
} | ||
} | ||
// 上部独立 | ||
else { | ||
if(isLast) { | ||
points.push([xx1, y3, x3, y3, x4, y4, xx1, y4]); | ||
} | ||
else { | ||
points.push([xx1, y3, x3, y3, xx4, yy1, xx4, y4, xx1, y4]); | ||
} | ||
} | ||
} | ||
// 完全独立 | ||
else { | ||
if(isLast) { | ||
points.push([xx1, y3, x3, y3, x4, y4, xx1, y4]); | ||
} | ||
else { | ||
points.push([xx1, y3, xx4, y3, xx4, y4, xx1, y4]); | ||
} | ||
} | ||
} | ||
} | ||
else if(borderBottomStyle === 'dotted') { | ||
ctx.setLineDash([borderBottomWidth.value, borderBottomWidth.value * 2]); | ||
} | ||
else { | ||
ctx.setLineDash([]); | ||
} | ||
ctx.moveTo(x1, y1); | ||
ctx.lineTo(x2, y1); | ||
ctx.stroke(); | ||
ctx.closePath(); | ||
} | ||
else if(renderMode === mode.SVG) { | ||
let item = { | ||
type: 'item', | ||
tagName: 'line', | ||
props: [ | ||
['x1', x1], | ||
['y1', y1], | ||
['x2', x2], | ||
['y2', y1], | ||
['stroke-width', borderBottomWidth.value], | ||
['stroke', borderBottomColor] | ||
], | ||
}; | ||
if(borderBottomStyle === 'dashed') { | ||
item.props.push(['stroke-dasharray', `${borderBottomWidth.value * 3}, ${borderBottomWidth.value * 2}`]) | ||
} | ||
else if(borderBottomStyle === 'dotted') { | ||
item.props.push(['stroke-dasharray', `${borderBottomWidth.value}, ${borderBottomWidth.value}`]) | ||
} | ||
virtualDom.bb.push(item); | ||
else { | ||
points.push([x1, y4, x2, y3, x3, y3, x4, y4]); | ||
} | ||
renderBorder(renderMode, points, bbc, ctx, virtualDom); | ||
} | ||
if(borderLeftWidth.value) { | ||
let x1 = x + borderLeftWidth.value * 0.5; | ||
let y1 = y; | ||
let y2 = y1 + height + borderTopWidth.value + borderBottomWidth.value; | ||
y2 += ptw + pbw; | ||
if(renderMode === mode.CANVAS) { | ||
ctx.beginPath(); | ||
ctx.lineWidth = borderLeftWidth.value; | ||
ctx.strokeStyle = borderLeftColor; | ||
if(borderLeftStyle === 'dashed') { | ||
ctx.setLineDash([borderLeftWidth.value * 3, borderLeftWidth.value * 2]); | ||
if(blw > 0 && blc !== 'transparent') { | ||
let points = []; | ||
if(['dashed', 'dotted'].indexOf(bls) > -1) { | ||
// 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
let { n, ps, pd } = getDashed(bls, y1, y2, y3, y4, blw); | ||
if(n <= 1) { | ||
points.push([x1, y1, x2, y2, x2, y3, x1, y4]); | ||
} | ||
else if(borderLeftStyle === 'dotted') { | ||
ctx.setLineDash([borderLeftWidth.value, borderLeftWidth.value * 2]); | ||
} | ||
else { | ||
ctx.setLineDash([]); | ||
let deg1 = Math.atan(blw / btw); | ||
let deg2 = Math.atan(blw / bbw); | ||
for(let i = 0; i < n; i++) { | ||
// 最后一个可能没有到底,延长之 | ||
let isLast = i === n - 1; | ||
let yy1 = i ? (y1 + ps * i + pd * i) : y1; | ||
let yy4 = yy1 + ps; | ||
let xx1; | ||
let xx2; | ||
// 整个和borderTop重叠 | ||
if(yy4 < y2) { | ||
if(isLast) { | ||
points.push([x1, y1, x2, y2, x2, y3, x1, y4]); | ||
} | ||
else { | ||
xx1 = x1 + (yy1 - y1) * Math.tan(deg1); | ||
xx2 = x1 + (yy4 - y1) * Math.tan(deg1); | ||
points.push([x1, yy1, xx1, yy1, xx2, yy4, x1, yy4]); | ||
} | ||
} | ||
// 整个和borderBottom重叠 | ||
else if(yy1 > y3) { | ||
xx1 = x1 + (y4 - yy1) * Math.tan(deg2); | ||
xx2 = x1 + (y4 - yy4) * Math.tan(deg2); | ||
if(isLast) { | ||
points.push([x1, yy1, xx1, yy1, x1, y4]); | ||
} | ||
else { | ||
points.push([x1, yy1, xx1, yy1, xx2, yy4, x1, yy4]); | ||
} | ||
} | ||
// 不被整个重叠的情况再细分 | ||
else { | ||
// 上部分和borderTop重叠 | ||
if(yy1 < y2) { | ||
xx1 = x1 + (yy1 - y1) * Math.tan(deg1); | ||
if(isLast) { | ||
points.push([x1, yy1, xx1, yy1, x2, y2, x2, y3, x1, y4]); | ||
} | ||
else { | ||
// 下部分和borderBottom重叠 | ||
if(yy4 > y3) { | ||
points.push([x1, yy1, xx1, yy1, x2, y2, x2, y3, xx1, yy4, x1, yy4]); | ||
} | ||
// 下部独立 | ||
else { | ||
points.push([x1, yy1, xx1, yy1, x2, y2, x2, yy4, x1, yy4]); | ||
} | ||
} | ||
} | ||
// 下部分和borderBottom重叠 | ||
else if(yy4 > y3) { | ||
xx1 = x1 + (y4 - yy4) * Math.tan(deg2); | ||
// 上部分和borderTop重叠 | ||
if(yy1 < y2) { | ||
if(isLast) { | ||
points.push([x1, yy1, xx1, yy1, x2, y2, x2, y3, x1, y4]); | ||
} | ||
else { | ||
points.push([x1, yy1, xx1, yy1, x2, y2, x2, y3, xx1, yy4, x1, yy4]); | ||
} | ||
} | ||
// 上部独立 | ||
else { | ||
if(isLast) { | ||
points.push([x1, yy1, x2, yy1, x2, y3, x1, y4]); | ||
} | ||
else { | ||
points.push([x1, yy1, x2, yy1, x2, y3, xx1, yy4, x1, yy4]); | ||
} | ||
} | ||
} | ||
// 完全独立 | ||
else { | ||
if(isLast) { | ||
points.push([x1, yy1, x2, yy1, x2, y3, x1, y4]); | ||
} | ||
else { | ||
points.push([x1, yy1, x2, yy1, x2, yy4, x1, yy4]); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
ctx.moveTo(x1, y1); | ||
ctx.lineTo(x1, y2); | ||
ctx.stroke(); | ||
ctx.closePath(); | ||
} | ||
else if(renderMode === mode.SVG) { | ||
let item = { | ||
type: 'item', | ||
tagName: 'line', | ||
props: [ | ||
['x1', x1], | ||
['y1', y1], | ||
['x2', x1], | ||
['y2', y2], | ||
['stroke-width', borderLeftWidth.value], | ||
['stroke', borderLeftColor] | ||
], | ||
}; | ||
if(borderLeftStyle === 'dashed') { | ||
item.props.push(['stroke-dasharray', `${borderLeftWidth.value * 3}, ${borderLeftWidth.value * 2}`]) | ||
} | ||
else if(borderLeftStyle === 'dotted') { | ||
item.props.push(['stroke-dasharray', `${borderLeftWidth.value}, ${borderLeftWidth.value}`]) | ||
} | ||
virtualDom.bb.push(item); | ||
else { | ||
points.push([x1, y1, x2, y2, x2, y3, x1, y4]); | ||
} | ||
renderBorder(renderMode, points, blc, ctx, virtualDom); | ||
} | ||
@@ -422,0 +747,0 @@ } |
@@ -23,2 +23,5 @@ import unit from './unit'; | ||
} | ||
else if(/\btransparent\b/i.test(style[key])) { | ||
style[key + 'Color'] = 'transparent'; | ||
} | ||
} | ||
@@ -74,2 +77,5 @@ | ||
} | ||
if(style.borderRadius) { | ||
style.borderTopRightRadius = style.borderTopLeftRadius = style.borderBottomRightRadius = style.borderBottomLeftRadius = style.borderRadius; | ||
} | ||
if(style.transform) { | ||
@@ -229,2 +235,6 @@ let match = style.transform.match(/\w+\(.+?\)/g); | ||
'borderLeftWidth', | ||
'borderTopLeftRadius', | ||
'borderTopRightRadius', | ||
'borderBottomLeftRadius', | ||
'borderBottomRightRadius', | ||
'top', | ||
@@ -231,0 +241,0 @@ 'right', |
@@ -27,2 +27,6 @@ const RESET = { | ||
borderLeftWidth: 0, | ||
borderTopColor: '#000', | ||
borderRightColor: '#000', | ||
borderBottomColor: '#000', | ||
borderLeftColor: '#000', | ||
borderTopStyle: 'solid', | ||
@@ -32,2 +36,6 @@ borderRightStyle: 'solid', | ||
borderLeftStyle: 'solid', | ||
borderTopLeftRadius: 0, | ||
borderTopRightRadius: 0, | ||
borderBottomLeftRadius: 0, | ||
borderBottomRightRadius: 0, | ||
verticalAlign: 'baseline', | ||
@@ -34,0 +42,0 @@ width: 'auto', |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
825493
9125