@leafer-in/flow 1.0.0 → 1.0.1

package/dist/flow.esm.js

@@ -1 +1,709 @@
-export*from"@leafer-in/resize";import{BoxData as t,dataProcessor as o,autoLayoutType as e,registerUI as n,Box as i,AlignHelper as h,PointHelper as r,MathHelper as s,decorateLeafAttr as c,attr as a,doBoundsType as l,UI as _,BoundsHelper as g}from"@leafer-ui/draw";function u(t,o,e,n){var i,h=arguments.length,r=h<3?o:null===n?n=Object.getOwnPropertyDescriptor(o,e):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,o,e,n);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(r=(h<3?i(r):h>3?i(o,e,r):i(o,e))||r);return h>3&&r&&Object.defineProperty(o,e,r),r}"function"==typeof SuppressedError&&SuppressedError;let f=class extends i{get __tag(){return"Flow"}constructor(t){super(t),this.__hasAutoLayout=!0}};u([o(class extends t{})],f.prototype,"__",void 0),u([e("x")],f.prototype,"flow",void 0),f=u([n()],f);const w={},p={"top-left":"from",top:"center","top-right":"to",right:"to","bottom-right":"to",bottom:"center","bottom-left":"from",left:"from",center:"center","baseline-left":"from","baseline-center":"center","baseline-right":"to"},d={"top-left":"from",top:"from","top-right":"from",right:"center","bottom-right":"to",bottom:"to","bottom-left":"to",left:"center",center:"center","baseline-left":"to","baseline-center":"to","baseline-right":"to"};function y(t,o,e){h.toPoint(e,o,t.__layout.contentBounds,w);const n=t.__;o.x=n.__autoWidth?0:w.x,o.y=n.__autoHeight?0:w.y}const{move:x}=r;function G(t,o,e,n,i,h){const{children:r}=t;let s,c,{x:a,start:l}=o,_=n;a+=e;for(let t=0,e=o.count;t<e;t++)s=r[h?l-t:l+t],s.__.inFlow&&0!==s.__.visible?(c=s.__flowBounds,"from"!==i&&(_=n+(o.height-c.height)/("center"===i?2:1)),x(s,a-c.x,_-c.y),a+=c.width+o.gap):e++}function m(t,o,e){const n="width"===e?"height":"width";t[e]=Math.max(t[e],o[e]),t[n]+=t.count?o[n]+t.gap:o[n],t.list.push(o),t.count++}const b={};function A(t,o){const{gap:e,flowAlign:n,flowWrap:i,__autoWidth:h,__autoHeight:r}=t.__,s=i&&(o?!h:!r);return"object"==typeof e?(b.xGap=e.x||0,b.yGap=e.y||0):b.xGap=b.yGap=e,b.isAutoXGap="string"==typeof b.xGap&&!h,b.isAutoYGap="string"==typeof b.yGap&&!r,b.complex=s||"top-left"!==n||t.__hasGrow||b.isAutoXGap||b.isAutoYGap,b.wrap=s,b.complex&&(b.isFitXGap="fit"===b.xGap&&!h,b.isFitYGap="fit"===b.yGap&&!r,"object"==typeof n?(b.contentAlign=n.content||"top-left",b.rowXAlign=n.x||"from",b.rowYAlign=n.y||"from"):(b.contentAlign=n,b.rowXAlign=p[n],b.rowYAlign=d[n])),b}function v(t,o){return{x:0,y:0,width:0,height:0,gap:o,start:t,count:0,grow:0}}function B(t,o,e,n){const{count:i}=t;i>1&&(e>t[o]||n)&&(t.gap=(e-t[o])/(i-1),t[o]=e)}function R(t,o){return"box"===o?t.__local:t.__layout.localStrokeBounds}const{within:F}=s;function X(t,o,e,n){let i,h,r,s=0,c=o.hasRangeSize&&[],{grow:a,start:l}=o;const _=o.width<e?(e-o.width)/a:0,{children:g}=t;_&&(o.width=e);for(let t=0,e=o.count;t<e;t++)i=g[n?l-t:l+t],i.__.inFlow&&0!==i.__.visible?(h=i.__widthGrow)&&(r=Y(i,i.__flowBounds,_*h),r?(s+=r,a-=h):c&&(i.__.widthRange?c.unshift(i):c.push(i))):e++;s&&function(t,o,e){let n,i,h,r;t.forEach((t=>{n=t.__widthGrow,i=o/e*n,r=Y(t,h=t.__flowBounds,h.width+i),o-=i-r,e-=n}))}(c,s,a)}function Y(t,o,e){const{widthRange:n,lockRatio:i}=t.__,h=n?F(e,n.min,n.max):e,r=h/o.width;return t.scaleResize(r,i?r:1),o.width=h,e-h}const{within:k}=s;function S(t,o,e,n){let i,h,r,s=0,c=o.hasRangeSize&&[],{grow:a,start:l}=o;const _=o.height<e?(e-o.height)/a:0,{children:g}=t;_&&(o.height=e);for(let t=0,e=o.count;t<e;t++)i=g[n?l-t:l+t],i.__.inFlow&&0!==i.__.visible?(h=i.__heightGrow)&&(r=z(i,i.__flowBounds,_*h),r?(s+=r,a-=h):c&&(i.__.heightRange?c.unshift(i):c.push(i))):e++;s&&function(t,o,e){let n,i,h,r;t.forEach((t=>{n=t.__heightGrow,i=o/e*n,r=z(t,h=t.__flowBounds,h.height+i),o-=i-r,e-=n}))}(c,s,a)}function z(t,o,e){const{heightRange:n,lockRatio:i}=t.__,h=n?k(e,n.min,n.max):e,r=h/o.height;return t.scaleResize(i?r:1,r),o.height=h,e-h}const{move:W}=r;const{move:j}=r;function C(t,o,e,n,i,h){const{children:r}=t;let s,c,{y:a,start:l}=o,_=e;a+=n;for(let t=0,n=o.count;t<n;t++)s=r[h?l-t:l+t],s.__.inFlow&&0!==s.__.visible?(c=s.__flowBounds,"from"!==i&&(_=e+(o.width-c.width)/("center"===i?2:1)),j(s,_-c.x,a-c.y),a+=c.height+o.gap):n++}const{move:E}=r;function P(t){return c(t,(t=>a({set(o){const e="number"==typeof o?o:0;"autoWidth"===t?this.__widthGrow=e:this.__heightGrow=e,!e||this.parent&&this.parent.__hasGrow||this.waitParent((()=>{this.parent.__hasGrow=!0})),this.__setAttr(t,o)&&l(this)}})))}const{copyAndSpread:H}=g;let M=function(t,o){const e="width",{children:n,itemBox:i}=t,h=A(t,!0),{complex:r,wrap:s,xGap:c,yGap:a,isAutoXGap:l,isFitXGap:_}=h;if(!n.length)return;const g=s&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},u=l?0:c;let f,w,d,x,b,{x:F,y:Y,width:k,height:S}=t.__layout.contentBounds;for(let h=0,c=n.length;h<c;h++)f=n[x=o?c-1-h:h],f.__.inFlow&&0!==f.__.visible&&(w=R(f,i),r?(f.__flowBounds=w,b||(b=v(x,u)),s&&b.count&&b.width+w.width>k&&(b.grow?X(t,b,k,o):l&&B(b,e,k,_),m(g,b,e),b=v(x,u)),d=w.width,f.__widthGrow&&(b.grow+=f.__widthGrow,d=0,f.__.widthRange&&(b.hasRangeSize=!0)),f.__heightGrow&&z(f,w,S),b.width+=b.count?d+u:d,b.height=Math.max(b.height,w.height),b.count++):(W(f,F-w.x,Y-w.y),F+=w.width+u));if(r){const{isAutoYGap:n,isFitYGap:i,contentAlign:r,rowXAlign:c,rowYAlign:u}=h;b.count&&(b.grow?X(t,b,k,o):l&&B(b,e,k,_),s&&m(g,b,e)),s?(n?B(g,"height",S,i):g.gap=a,function(t,o,e,n){y(t,o,e);const{list:i}=o;if(i.length>1&&(n||(n=p[e]),"from"!==n)){let t;for(let e=0,h=i.length;e<h;e++)t=i[e],t.x=o.width-t.width,"center"===n&&(t.x/=2)}}(t,g,r,c),function(t,o,e,n){const{list:i}=o,h="reverse"===t.__.flowWrap;let r,{x:s,y:c}=o;for(let a=0,l=i.length;a<l;a++)r=i[h?l-1-a:a],G(t,r,s,c,e,n),c+=r.height+o.gap}(t,g,u,o)):(y(t,b,r),G(t,b,0,b.y,u,o))}},O=function(t,o){const e="height",{children:n,itemBox:i}=t,h=A(t,!1),{complex:r,wrap:s,xGap:c,yGap:a,isAutoYGap:l,isFitYGap:_}=h;if(!n.length)return;const g=s&&{x:0,y:0,width:0,height:0,gap:0,count:0,list:[]},u=l?0:a;let f,w,p,x,G,{x:b,y:F,width:X,height:k}=t.__layout.contentBounds;for(let h=0,c=n.length;h<c;h++)f=n[x=o?c-1-h:h],f.__.inFlow&&0!==f.__.visible&&(w=R(f,i),r?(f.__flowBounds=w,G||(G=v(x,u)),s&&G.count&&G.height+w.height>k&&(G.grow&&S(t,G,k,o),l&&B(G,e,k,_),m(g,G,e),G=v(x,u)),p=w.height,f.__heightGrow&&(G.grow+=f.__heightGrow,p=0,f.__.heightRange&&(G.hasRangeSize=!0)),f.__widthGrow&&Y(f,w,X),G.height+=G.count?p+u:p,G.width=Math.max(G.width,w.width),G.count++):(E(f,b-w.x,F-w.y),F+=w.height+u));if(r){const{isAutoXGap:n,isFitXGap:i,contentAlign:r,rowXAlign:a,rowYAlign:u}=h;G.count&&(G.grow&&S(t,G,k,o),l&&B(G,e,k,_),s&&m(g,G,e)),s?(n?B(g,"width",X,i):g.gap=c,function(t,o,e,n){y(t,o,e);const{list:i}=o;if(i.length>1&&(n||(n=d[e]),"from"!==n)){let t;for(let e=0,h=i.length;e<h;e++)t=i[e],t.y=o.height-t.height,"center"===n&&(t.y/=2)}}(t,g,r,u),function(t,o,e,n){const{list:i}=o,h="reverse"===t.__.flowWrap;let r,{x:s,y:c}=o;for(let a=0,l=i.length;a<l;a++)r=i[h?l-1-a:a],C(t,r,s,c,e,n),s+=r.width+o.gap}(t,g,a,o)):(y(t,G,r),C(t,G,G.x,0,a,o))}};_.changeAttr("autoWidth",void 0,P),_.changeAttr("autoHeight",void 0,P),i.prototype.__updateFlowLayout=function(){this.leafer.created=!1;const{flow:t}=this.__;switch(t){case"x":case!0:M(this);break;case"y":O(this);break;case"x-reverse":M(this,!0);break;case"y-reverse":O(this,!0)}this.leafer.created=!0},i.prototype.__updateContentBounds=function(){const{padding:t}=this.__,o=this.__layout,e=o.contentBounds===o.boxBounds;t?(e&&o.shrinkContent(),H(o.contentBounds,o.boxBounds,t,!0)):e||o.shrinkContentCancel()};export{f as Flow};
+import { PathCommandMap, MatrixHelper, Leaf, Text, Path, Line, Polygon, Group, Box, BoxData, dataProcessor, autoLayoutType, registerUI, AlignHelper, PointHelper, MathHelper, decorateLeafAttr, attr, doBoundsType, UI, BoundsHelper } from '@leafer-ui/draw';
+
+const { M, L, C, Q, Z, N, D, X, G, F, O, P, U } = PathCommandMap;
+const PathScaler = {
+    scale(data, scaleX, scaleY) {
+        if (!data)
+            return;
+        let command;
+        let i = 0, len = data.length;
+        while (i < len) {
+            command = data[i];
+            switch (command) {
+                case M:
+                    scalePoints(data, scaleX, scaleY, i, 1);
+                    i += 3;
+                    break;
+                case L:
+                    scalePoints(data, scaleX, scaleY, i, 1);
+                    i += 3;
+                    break;
+                case C:
+                    scalePoints(data, scaleX, scaleY, i, 3);
+                    i += 7;
+                    break;
+                case Q:
+                    scalePoints(data, scaleX, scaleY, i, 2);
+                    i += 5;
+                    break;
+                case Z:
+                    i += 1;
+                    break;
+                case N:
+                    scalePoints(data, scaleX, scaleY, i, 2);
+                    i += 5;
+                    break;
+                case D:
+                    scalePoints(data, scaleX, scaleY, i, 2);
+                    i += 9;
+                    break;
+                case X:
+                    scalePoints(data, scaleX, scaleY, i, 2);
+                    i += 6;
+                    break;
+                case G:
+                    scalePoints(data, scaleX, scaleY, i, 2);
+                    i += 9;
+                    break;
+                case F:
+                    scalePoints(data, scaleX, scaleY, i, 2);
+                    i += 5;
+                    break;
+                case O:
+                    data[i] = G;
+                    data.splice(i + 4, 0, data[i + 3], 0);
+                    scalePoints(data, scaleX, scaleY, i, 2);
+                    i += 7 + 2;
+                    len += 2;
+                    break;
+                case P:
+                    data[i] = F;
+                    data.splice(i + 4, 0, data[i + 3]);
+                    scalePoints(data, scaleX, scaleY, i, 2);
+                    i += 4 + 1;
+                    len += 1;
+                    break;
+                case U:
+                    scalePoints(data, scaleX, scaleY, i, 2);
+                    i += 6;
+                    break;
+            }
+        }
+    },
+    scalePoints(data, scaleX, scaleY, start, pointCount) {
+        for (let i = pointCount ? start + 1 : 0, end = pointCount ? i + pointCount * 2 : data.length; i < end; i += 2) {
+            data[i] *= scaleX;
+            data[i + 1] *= scaleY;
+        }
+    }
+};
+const { scalePoints } = PathScaler;
+
+const matrix = MatrixHelper.get();
+function scaleResize(leaf, scaleX, scaleY) {
+    if (leaf.pathInputed) {
+        scaleResizePath(leaf, scaleX, scaleY);
+    }
+    else {
+        if (scaleX !== 1)
+            leaf.width *= scaleX;
+        if (scaleY !== 1)
+            leaf.height *= scaleY;
+    }
+}
+function scaleResizeFontSize(leaf, scaleX, scaleY) {
+    const { width, height } = leaf.__localBoxBounds;
+    if (scaleX !== 1) {
+        leaf.fontSize *= scaleX;
+        leaf.y -= height * (scaleX - scaleY) / 2;
+    }
+    else if (scaleY !== 1) {
+        leaf.fontSize *= scaleY;
+        leaf.x -= width * (scaleY - scaleX) / 2;
+    }
+}
+function scaleResizePath(leaf, scaleX, scaleY) {
+    PathScaler.scale(leaf.__.path, scaleX, scaleY);
+    leaf.path = leaf.__.path;
+}
+function scaleResizePoints(leaf, scaleX, scaleY) {
+    PathScaler.scalePoints(leaf.__.points, scaleX, scaleY);
+    leaf.points = leaf.__.points;
+}
+function scaleResizeGroup(group, scaleX, scaleY) {
+    const { children } = group;
+    for (let i = 0; i < children.length; i++) {
+        matrix.a = scaleX;
+        matrix.d = scaleY;
+        children[i].transform(matrix, true);
+    }
+}
+
+const leaf = Leaf.prototype;
+leaf.scaleResize = function (scaleX, scaleY = scaleX, noResize) {
+    const data = this;
+    if (noResize || (data.editConfig && data.editConfig.editSize === 'scale')) {
+        data.scaleX *= scaleX;
+        data.scaleY *= scaleY;
+    }
+    else {
+        if (scaleX < 0)
+            data.scaleX *= -1, scaleX = -scaleX;
+        if (scaleY < 0)
+            data.scaleY *= -1, scaleY = -scaleY;
+        this.__scaleResize(scaleX, scaleY);
+    }
+};
+leaf.__scaleResize = function (scaleX, scaleY) {
+    scaleResize(this, scaleX, scaleY);
+};
+leaf.resizeWidth = function (width) {
+    const scale = width / this.getBounds('box', 'local').width;
+    this.scaleOf(this.__layout.boxBounds, scale, this.__.lockRatio ? scale : 1, true);
+};
+leaf.resizeHeight = function (height) {
+    const scale = height / this.getBounds('box', 'local').height;
+    this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
+};
+Text.prototype.__scaleResize = function (scaleX, scaleY) {
+    if (this.__.__autoSize && (this.__.resizeFontSize || (this.editConfig && this.editConfig.editSize === 'font-size'))) {
+        scaleResizeFontSize(this, scaleX, scaleY);
+    }
+    else {
+        scaleResize(this, scaleX, scaleY);
+    }
+};
+Path.prototype.__scaleResize = function (scaleX, scaleY) {
+    scaleResizePath(this, scaleX, scaleY);
+};
+Line.prototype.__scaleResize = function (scaleX, scaleY) {
+    if (this.pathInputed) {
+        scaleResizePath(this, scaleX, scaleY);
+    }
+    else if (this.points) {
+        scaleResizePoints(this, scaleX, scaleY);
+    }
+    else {
+        this.width *= scaleX;
+    }
+};
+Polygon.prototype.__scaleResize = function (scaleX, scaleY) {
+    if (this.pathInputed) {
+        scaleResizePath(this, scaleX, scaleY);
+    }
+    else if (this.points) {
+        scaleResizePoints(this, scaleX, scaleY);
+    }
+    else {
+        scaleResize(this, scaleX, scaleY);
+    }
+};
+Group.prototype.__scaleResize = function (scaleX, scaleY) {
+    scaleResizeGroup(this, scaleX, scaleY);
+};
+Box.prototype.__scaleResize = function (scaleX, scaleY) {
+    if (this.__.__autoSize && this.children.length) {
+        scaleResizeGroup(this, scaleX, scaleY);
+    }
+    else {
+        scaleResize(this, scaleX, scaleY);
+        if (this.__.resizeChildren)
+            scaleResizeGroup(this, scaleX, scaleY);
+    }
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+class FlowData extends BoxData {
+}
+
+let Flow = class Flow extends Box {
+    get __tag() { return 'Flow'; }
+    constructor(data) {
+        super(data);
+        this.__hasAutoLayout = true;
+    }
+};
+__decorate([
+    dataProcessor(FlowData)
+], Flow.prototype, "__", void 0);
+__decorate([
+    autoLayoutType('x')
+], Flow.prototype, "flow", void 0);
+Flow = __decorate([
+    registerUI()
+], Flow);
+
+const point = {};
+const alignToInnerXMap = {
+    'top-left': 'from',
+    'top': 'center',
+    'top-right': 'to',
+    'right': 'to',
+    'bottom-right': 'to',
+    'bottom': 'center',
+    'bottom-left': 'from',
+    'left': 'from',
+    'center': 'center',
+    'baseline-left': 'from',
+    'baseline-center': 'center',
+    'baseline-right': 'to',
+};
+const alignToInnerYMap = {
+    'top-left': 'from',
+    'top': 'from',
+    'top-right': 'from',
+    'right': 'center',
+    'bottom-right': 'to',
+    'bottom': 'to',
+    'bottom-left': 'to',
+    'left': 'center',
+    'center': 'center',
+    'baseline-left': 'to',
+    'baseline-center': 'to',
+    'baseline-right': 'to',
+};
+function alignContent(box, content, align) {
+    AlignHelper.toPoint(align, content, box.__layout.contentBounds, point);
+    const data = box.__;
+    content.x = data.__autoWidth ? 0 : point.x;
+    content.y = data.__autoHeight ? 0 : point.y;
+}
+
+function align$1(box, data, contentAlign, innerXAlign) {
+    alignContent(box, data, contentAlign);
+    const { list } = data;
+    if (list.length > 1) {
+        if (!innerXAlign)
+            innerXAlign = alignToInnerXMap[contentAlign];
+        if (innerXAlign !== 'from') {
+            let row;
+            for (let i = 0, len = list.length; i < len; i++) {
+                row = list[i];
+                row.x = data.width - row.width;
+                if (innerXAlign === 'center')
+                    row.x /= 2;
+            }
+        }
+    }
+}
+
+const { move: move$3 } = PointHelper;
+function layout$1(box, data, rowYAlign, reverse) {
+    const { list } = data, reverseWrap = box.__.flowWrap === 'reverse';
+    let row, { x, y } = data;
+    for (let i = 0, len = list.length; i < len; i++) {
+        row = list[reverseWrap ? len - 1 - i : i];
+        layoutX(box, row, x, y, rowYAlign, reverse);
+        y += row.height + data.gap;
+    }
+}
+function layoutX(box, row, fromX, fromY, rowYAlign, reverse) {
+    const { children } = box;
+    let child, local, { x, start } = row, y = fromY;
+    x += fromX;
+    for (let j = 0, end = row.count; j < end; j++) {
+        child = children[reverse ? start - j : start + j];
+        if (child.__.inFlow && child.__.visible !== 0) {
+            local = child.__flowBounds;
+            if (rowYAlign !== 'from')
+                y = fromY + (row.height - local.height) / (rowYAlign === 'center' ? 2 : 1);
+            move$3(child, x - local.x, y - local.y);
+            x += local.width + row.gap;
+        }
+        else {
+            end++;
+        }
+    }
+}
+
+function flowWrap(wrapData, data, wrapSide) {
+    const otherSide = wrapSide === 'width' ? 'height' : 'width';
+    wrapData[wrapSide] = Math.max(wrapData[wrapSide], data[wrapSide]);
+    wrapData[otherSide] += wrapData.count ? data[otherSide] + wrapData.gap : data[otherSide];
+    wrapData.list.push(data);
+    wrapData.count++;
+}
+
+const p = {};
+function getParseData(box, isFlowX) {
+    const { gap, flowAlign: align, flowWrap: wrap, __autoWidth, __autoHeight } = box.__;
+    const needWrap = wrap && (isFlowX ? !__autoWidth : !__autoHeight);
+    if (typeof gap === 'object') {
+        p.xGap = gap.x || 0;
+        p.yGap = gap.y || 0;
+    }
+    else {
+        p.xGap = p.yGap = gap;
+    }
+    p.isAutoXGap = typeof p.xGap === 'string' && !__autoWidth;
+    p.isAutoYGap = typeof p.yGap === 'string' && !__autoHeight;
+    p.complex = needWrap || align !== 'top-left' || box.__hasGrow || p.isAutoXGap || p.isAutoYGap;
+    p.wrap = needWrap;
+    if (p.complex) {
+        p.isFitXGap = p.xGap === 'fit' && !__autoWidth;
+        p.isFitYGap = p.yGap === 'fit' && !__autoHeight;
+        if (typeof align === 'object') {
+            p.contentAlign = align.content || 'top-left';
+            p.rowXAlign = align.x || 'from';
+            p.rowYAlign = align.y || 'from';
+        }
+        else {
+            p.contentAlign = align;
+            p.rowXAlign = alignToInnerXMap[align];
+            p.rowYAlign = alignToInnerYMap[align];
+        }
+    }
+    return p;
+}
+function getDrawData(start, gap) {
+    return { x: 0, y: 0, width: 0, height: 0, gap, start, count: 0, grow: 0 };
+}
+function getWrapDrawData() {
+    return { x: 0, y: 0, width: 0, height: 0, gap: 0, count: 0, list: [] };
+}
+
+function autoGap(data, side, sideTotal, fit) {
+    const { count } = data;
+    if (count > 1 && (sideTotal > data[side] || fit)) {
+        data.gap = (sideTotal - data[side]) / (count - 1);
+        data[side] = sideTotal;
+    }
+}
+
+function getItemBounds(child, itemBox) {
+    return itemBox === 'box' ? child.__local : child.__layout.localStrokeBounds;
+}
+
+const { within: within$1 } = MathHelper;
+function growX(box, row, width, reverse) {
+    let child, grow, remainSpace, remainTotalSpace = 0, list = row.hasRangeSize && [], { grow: totalGrow, start } = row;
+    const growSize = row.width < width ? (width - row.width) / totalGrow : 0, { children } = box;
+    if (growSize)
+        row.width = width;
+    for (let j = 0, end = row.count; j < end; j++) {
+        child = children[reverse ? start - j : start + j];
+        if (child.__.inFlow && child.__.visible !== 0) {
+            if (grow = child.__widthGrow) {
+                remainSpace = resizeWidth(child, child.__flowBounds, growSize * grow);
+                if (remainSpace) {
+                    remainTotalSpace += remainSpace;
+                    totalGrow -= grow;
+                }
+                else if (list) {
+                    child.__.widthRange ? list.unshift(child) : list.push(child);
+                }
+            }
+        }
+        else {
+            end++;
+        }
+    }
+    if (remainTotalSpace)
+        assignRemainSpace$1(list, remainTotalSpace, totalGrow);
+}
+function assignRemainSpace$1(list, totalSpace, countGrow) {
+    let grow, space, local, remain;
+    list.forEach(child => {
+        grow = child.__widthGrow;
+        space = totalSpace / countGrow * grow;
+        remain = resizeWidth(child, local = child.__flowBounds, local.width + space);
+        totalSpace -= space - remain;
+        countGrow -= grow;
+    });
+}
+function resizeWidth(child, local, size) {
+    const { widthRange, lockRatio } = child.__;
+    const realSize = widthRange ? within$1(size, widthRange) : size;
+    const scale = realSize / local.width;
+    child.scaleResize(scale, lockRatio ? scale : 1);
+    local.width = realSize;
+    return size - realSize;
+}
+
+const { within } = MathHelper;
+function growY(box, row, height, reverse) {
+    let child, grow, remainSpace, remainTotalSpace = 0, list = row.hasRangeSize && [], { grow: totalGrow, start } = row;
+    const growSize = row.height < height ? (height - row.height) / totalGrow : 0, { children } = box;
+    if (growSize)
+        row.height = height;
+    for (let j = 0, end = row.count; j < end; j++) {
+        child = children[reverse ? start - j : start + j];
+        if (child.__.inFlow && child.__.visible !== 0) {
+            if (grow = child.__heightGrow) {
+                remainSpace = resizeHeight(child, child.__flowBounds, growSize * grow);
+                if (remainSpace) {
+                    remainTotalSpace += remainSpace;
+                    totalGrow -= grow;
+                }
+                else if (list) {
+                    child.__.heightRange ? list.unshift(child) : list.push(child);
+                }
+            }
+        }
+        else {
+            end++;
+        }
+    }
+    if (remainTotalSpace)
+        assignRemainSpace(list, remainTotalSpace, totalGrow);
+}
+function assignRemainSpace(list, totalSpace, countGrow) {
+    let grow, space, local, remain;
+    list.forEach(child => {
+        grow = child.__heightGrow;
+        space = totalSpace / countGrow * grow;
+        remain = resizeHeight(child, local = child.__flowBounds, local.height + space);
+        totalSpace -= space - remain;
+        countGrow -= grow;
+    });
+}
+function resizeHeight(child, local, size) {
+    const { heightRange, lockRatio } = child.__;
+    const realSize = heightRange ? within(size, heightRange) : size;
+    const scale = realSize / local.height;
+    child.scaleResize(lockRatio ? scale : 1, scale);
+    local.height = realSize;
+    return size - realSize;
+}
+
+const { move: move$2 } = PointHelper;
+function flowX(box, reverse) {
+    const side = 'width', { children, itemBox } = box, pData = getParseData(box, true);
+    const { complex, wrap, xGap, yGap, isAutoXGap, isFitXGap } = pData;
+    if (!children.length)
+        return;
+    const wrapData = wrap && getWrapDrawData(), xGapTempNum = isAutoXGap ? 0 : xGap;
+    let child, local, localWidth, index, data, { x, y, width, height } = box.__layout.contentBounds;
+    for (let i = 0, len = children.length; i < len; i++) {
+        child = children[index = reverse ? len - 1 - i : i];
+        if (child.__.inFlow && child.__.visible !== 0) {
+            local = getItemBounds(child, itemBox);
+            if (complex) {
+                child.__flowBounds = local;
+                if (!data)
+                    data = getDrawData(index, xGapTempNum);
+                if (wrap && data.count && data.width + local.width > width) {
+                    if (data.grow)
+                        growX(box, data, width, reverse);
+                    else if (isAutoXGap)
+                        autoGap(data, side, width, isFitXGap);
+                    flowWrap(wrapData, data, side);
+                    data = getDrawData(index, xGapTempNum);
+                }
+                localWidth = local.width;
+                if (child.__widthGrow) {
+                    data.grow += child.__widthGrow, localWidth = 0;
+                    if (child.__.widthRange)
+                        data.hasRangeSize = true;
+                }
+                if (child.__heightGrow)
+                    resizeHeight(child, local, height);
+                data.width += data.count ? localWidth + xGapTempNum : localWidth;
+                data.height = Math.max(data.height, local.height);
+                data.count++;
+            }
+            else {
+                move$2(child, x - local.x, y - local.y);
+                x += local.width + xGapTempNum;
+            }
+        }
+    }
+    if (complex) {
+        const { isAutoYGap, isFitYGap, contentAlign, rowXAlign, rowYAlign } = pData;
+        if (data.count) {
+            if (data.grow)
+                growX(box, data, width, reverse);
+            else if (isAutoXGap)
+                autoGap(data, side, width, isFitXGap);
+            if (wrap)
+                flowWrap(wrapData, data, side);
+        }
+        if (wrap) {
+            if (isAutoYGap)
+                autoGap(wrapData, 'height', height, isFitYGap);
+            else
+                wrapData.gap = yGap;
+            align$1(box, wrapData, contentAlign, rowXAlign);
+            layout$1(box, wrapData, rowYAlign, reverse);
+        }
+        else {
+            alignContent(box, data, contentAlign);
+            layoutX(box, data, 0, data.y, rowYAlign, reverse);
+        }
+    }
+}
+
+function align(box, data, contentAlign, rowYAlign) {
+    alignContent(box, data, contentAlign);
+    const { list } = data;
+    if (list.length > 1) {
+        if (!rowYAlign)
+            rowYAlign = alignToInnerYMap[contentAlign];
+        if (rowYAlign !== 'from') {
+            let row;
+            for (let i = 0, len = list.length; i < len; i++) {
+                row = list[i];
+                row.y = data.height - row.height;
+                if (rowYAlign === 'center')
+                    row.y /= 2;
+            }
+        }
+    }
+}
+
+const { move: move$1 } = PointHelper;
+function layout(box, data, rowXAlign, reverse) {
+    const { list } = data, reverseWrap = box.__.flowWrap === 'reverse';
+    let row, { x, y } = data;
+    for (let i = 0, len = list.length; i < len; i++) {
+        row = list[reverseWrap ? len - 1 - i : i];
+        layoutY(box, row, x, y, rowXAlign, reverse);
+        x += row.width + data.gap;
+    }
+}
+function layoutY(box, row, fromX, fromY, rowXAlign, reverse) {
+    const { children } = box;
+    let child, local, { y, start } = row, x = fromX;
+    y += fromY;
+    for (let j = 0, end = row.count; j < end; j++) {
+        child = children[reverse ? start - j : start + j];
+        if (child.__.inFlow && child.__.visible !== 0) {
+            local = child.__flowBounds;
+            if (rowXAlign !== 'from')
+                x = fromX + (row.width - local.width) / (rowXAlign === 'center' ? 2 : 1);
+            move$1(child, x - local.x, y - local.y);
+            y += local.height + row.gap;
+        }
+        else {
+            end++;
+        }
+    }
+}
+
+const { move } = PointHelper;
+function flowY(box, reverse) {
+    const side = 'height', { children, itemBox } = box, pData = getParseData(box, false);
+    const { complex, wrap, xGap, yGap, isAutoYGap, isFitYGap } = pData;
+    if (!children.length)
+        return;
+    const wrapData = wrap && getWrapDrawData(), yGapTempNum = isAutoYGap ? 0 : yGap;
+    let child, local, localHeight, index, data, { x, y, width, height } = box.__layout.contentBounds;
+    for (let i = 0, len = children.length; i < len; i++) {
+        child = children[index = reverse ? len - 1 - i : i];
+        if (child.__.inFlow && child.__.visible !== 0) {
+            local = getItemBounds(child, itemBox);
+            if (complex) {
+                child.__flowBounds = local;
+                if (!data)
+                    data = getDrawData(index, yGapTempNum);
+                if (wrap && data.count && data.height + local.height > height) {
+                    if (data.grow)
+                        growY(box, data, height, reverse);
+                    if (isAutoYGap)
+                        autoGap(data, side, height, isFitYGap);
+                    flowWrap(wrapData, data, side);
+                    data = getDrawData(index, yGapTempNum);
+                }
+                localHeight = local.height;
+                if (child.__heightGrow) {
+                    data.grow += child.__heightGrow, localHeight = 0;
+                    if (child.__.heightRange)
+                        data.hasRangeSize = true;
+                }
+                if (child.__widthGrow)
+                    resizeWidth(child, local, width);
+                data.height += data.count ? localHeight + yGapTempNum : localHeight;
+                data.width = Math.max(data.width, local.width);
+                data.count++;
+            }
+            else {
+                move(child, x - local.x, y - local.y);
+                y += local.height + yGapTempNum;
+            }
+        }
+    }
+    if (complex) {
+        const { isAutoXGap, isFitXGap, contentAlign, rowXAlign, rowYAlign } = pData;
+        if (data.count) {
+            if (data.grow)
+                growY(box, data, height, reverse);
+            if (isAutoYGap)
+                autoGap(data, side, height, isFitYGap);
+            if (wrap)
+                flowWrap(wrapData, data, side);
+        }
+        if (wrap) {
+            if (!isAutoXGap)
+                wrapData.gap = xGap;
+            else
+                autoGap(wrapData, 'width', width, isFitXGap);
+            align(box, wrapData, contentAlign, rowYAlign);
+            layout(box, wrapData, rowXAlign, reverse);
+        }
+        else {
+            alignContent(box, data, contentAlign);
+            layoutY(box, data, data.x, 0, rowXAlign, reverse);
+        }
+    }
+}
+
+function autoBoundsType(defaultValue) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            const grow = typeof value === 'number' ? value : 0;
+            key === 'autoWidth' ? this.__widthGrow = grow : this.__heightGrow = grow;
+            if (grow && !(this.parent && this.parent.__hasGrow))
+                this.waitParent(() => { this.parent.__hasGrow = true; });
+            this.__setAttr(key, value) && doBoundsType(this);
+        }
+    }));
+}
+
+const { copyAndSpread } = BoundsHelper;
+let doFlowX = flowX, doFlowY = flowY;
+UI.changeAttr('autoWidth', undefined, autoBoundsType);
+UI.changeAttr('autoHeight', undefined, autoBoundsType);
+Box.prototype.__updateFlowLayout = function () {
+    this.leafer.created = false;
+    const { flow } = this.__;
+    switch (flow) {
+        case 'x':
+        case true:
+            doFlowX(this);
+            break;
+        case 'y':
+            doFlowY(this);
+            break;
+        case 'x-reverse':
+            doFlowX(this, true);
+            break;
+        case 'y-reverse':
+            doFlowY(this, true);
+            break;
+    }
+    this.leafer.created = true;
+};
+Box.prototype.__updateContentBounds = function () {
+    const { padding } = this.__;
+    const layout = this.__layout;
+    const same = layout.contentBounds === layout.boxBounds;
+    if (padding) {
+        if (same)
+            layout.shrinkContent();
+        copyAndSpread(layout.contentBounds, layout.boxBounds, padding, true);
+    }
+    else {
+        if (!same)
+            layout.shrinkContentCancel();
+    }
+};
+
+export { Flow, PathScaler, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints };