@leafer-in/flow 1.7.0 → 1.9.0

package/dist/flow.cjs

@@ -1,89 +1,73 @@
-'use strict';
-
-var draw = require('@leafer-ui/draw');
-require('@leafer-in/resize');
-
-/******************************************************************************
-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, Iterator */
-
-
-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;
-};
+"use strict";
+
+var draw = require("@leafer-ui/draw");
 
-class FlowData extends draw.BoxData {
+require("@leafer-in/resize");
+
+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 draw.BoxData {}
+
 exports.Flow = class Flow extends draw.Box {
-    get __tag() { return 'Flow'; }
+    get __tag() {
+        return "Flow";
+    }
     constructor(data) {
         super(data);
         this.__hasAutoLayout = true;
     }
 };
-__decorate([
-    draw.dataProcessor(FlowData)
-], exports.Flow.prototype, "__", void 0);
-__decorate([
-    draw.autoLayoutType('x')
-], exports.Flow.prototype, "flow", void 0);
-exports.Flow = __decorate([
-    draw.registerUI()
-], exports.Flow);
+
+__decorate([ draw.dataProcessor(FlowData) ], exports.Flow.prototype, "__", void 0);
+
+__decorate([ draw.autoLayoutType("x") ], exports.Flow.prototype, "flow", void 0);
+
+exports.Flow = __decorate([ draw.registerUI() ], exports.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',
+    "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',
+    "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) {
     const data = box.__;
-    const { contentBounds } = box.__layout;
+    const {contentBounds: contentBounds} = box.__layout;
     draw.AlignHelper.toPoint(align, content, contentBounds, point);
     content.x = data.__autoWidth ? contentBounds.x : point.x;
     content.y = data.__autoHeight ? contentBounds.y : point.y;
@@ -91,53 +75,51 @@ function alignContent(box, content, align) {
 
 function align$1(box, data, contentAlign, innerXAlign) {
     alignContent(box, data, contentAlign);
-    const { list } = data;
+    const {list: list} = data;
     if (list.length > 1) {
-        if (!innerXAlign)
-            innerXAlign = alignToInnerXMap[contentAlign];
-        if (innerXAlign !== 'from') {
+        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;
+                if (innerXAlign === "center") row.x /= 2;
             }
         }
     }
 }
 
-const { move: move$3 } = draw.PointHelper;
+const {move: move$3} = draw.PointHelper;
+
 function layout$1(box, data, rowYAlign, reverse) {
-    const { list } = data, reverseWrap = box.__.flowWrap === 'reverse';
-    let row, { x, y } = data;
+    const {list: list} = data, reverseWrap = box.__.flowWrap === "reverse";
+    let row, {x: x, y: 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;
+    const {children: children} = box;
+    let child, local, {x: x, start: 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);
+            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 {
+        } else {
             end++;
         }
     }
 }
 
 function flowWrap(wrapData, data, wrapSide) {
-    const otherSide = wrapSide === 'width' ? 'height' : 'width';
+    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);
@@ -145,29 +127,28 @@ function flowWrap(wrapData, data, wrapSide) {
 }
 
 const p = {};
+
 function getParseData(box, isFlowX) {
-    const { gap, flowAlign: align, flowWrap: wrap, __autoWidth, __autoHeight } = box.__;
+    const {gap: gap, flowAlign: align, flowWrap: wrap, __autoWidth: __autoWidth, __autoHeight: __autoHeight} = box.__;
     const needWrap = wrap && (isFlowX ? !__autoWidth : !__autoHeight);
-    if (typeof gap === 'object') {
+    if (draw.isObject(gap)) {
         p.xGap = gap.x || 0;
         p.yGap = gap.y || 0;
+    } else {
+        p.xGap = p.yGap = draw.tryToNumber(gap);
     }
-    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.isAutoXGap = draw.isString(p.xGap) && !__autoWidth;
+    p.isAutoYGap = draw.isString(p.yGap) && !__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.isFitXGap = p.xGap === "fit" && !__autoWidth;
+        p.isFitYGap = p.yGap === "fit" && !__autoHeight;
+        if (draw.isObject(align)) {
+            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];
@@ -175,15 +156,34 @@ function getParseData(box, isFlowX) {
     }
     return p;
 }
+
 function getDrawData(start, gap) {
-    return { x: 0, y: 0, width: 0, height: 0, gap, start, count: 0, grow: 0 };
+    return {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        gap: gap,
+        start: start,
+        count: 0,
+        grow: 0
+    };
 }
+
 function getWrapDrawData() {
-    return { x: 0, y: 0, width: 0, height: 0, gap: 0, count: 0, list: [] };
+    return {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        gap: 0,
+        count: 0,
+        list: []
+    };
 }
 
 function autoGap(data, side, sideTotal, fit) {
-    const { count } = data;
+    const {count: count} = data;
     if (count > 1 && (sideTotal > data[side] || fit)) {
         data.gap = (sideTotal - data[side]) / (count - 1);
         data[side] = sideTotal;
@@ -191,15 +191,15 @@ function autoGap(data, side, sideTotal, fit) {
 }
 
 function getItemBounds(child, itemBox) {
-    return itemBox === 'box' ? child.__local : child.__layout.localStrokeBounds;
+    return itemBox === "box" ? child.__local : child.__layout.localStrokeBounds;
 }
 
-const { within: within$1 } = draw.MathHelper;
+const {within: within$1} = draw.MathHelper;
+
 function growX(box, row, width, reverse) {
-    let child, grow, remainSpace, remainTotalSpace = 0, list = row.hasRangeSize && [], { grow: totalGrow, start } = row;
-    const growSize = (width - row.width) / totalGrow, { children } = box;
-    if (growSize <= 0)
-        return;
+    let child, grow, remainSpace, remainTotalSpace = 0, list = row.hasRangeSize && [], {grow: totalGrow, start: start} = row;
+    const growSize = (width - row.width) / totalGrow, {children: children} = box;
+    if (growSize <= 0) return;
     row.width = width;
     for (let j = 0, end = row.count; j < end; j++) {
         child = children[reverse ? start - j : start + j];
@@ -209,19 +209,17 @@ function growX(box, row, width, reverse) {
                 if (remainSpace) {
                     remainTotalSpace += remainSpace;
                     totalGrow -= grow;
-                }
-                else if (list) {
+                } else if (list) {
                     child.__.widthRange ? list.unshift(child) : list.push(child);
                 }
             }
-        }
-        else {
+        } else {
             end++;
         }
     }
-    if (remainTotalSpace)
-        assignRemainSpace$1(list, remainTotalSpace, totalGrow);
+    if (remainTotalSpace) assignRemainSpace$1(list, remainTotalSpace, totalGrow);
 }
+
 function assignRemainSpace$1(list, totalSpace, countGrow) {
     let grow, space, local, remain;
     list.forEach(child => {
@@ -232,8 +230,9 @@ function assignRemainSpace$1(list, totalSpace, countGrow) {
         countGrow -= grow;
     });
 }
+
 function resizeWidth(child, local, size) {
-    const { widthRange, lockRatio } = child.__;
+    const {widthRange: widthRange, lockRatio: lockRatio} = child.__;
     const realSize = widthRange ? within$1(size, widthRange) : size;
     const scale = realSize / local.width;
     child.scaleResize(scale, lockRatio ? scale : 1);
@@ -241,12 +240,12 @@ function resizeWidth(child, local, size) {
     return size - realSize;
 }
 
-const { within } = draw.MathHelper;
+const {within: within} = draw.MathHelper;
+
 function growY(box, row, height, reverse) {
-    let child, grow, remainSpace, remainTotalSpace = 0, list = row.hasRangeSize && [], { grow: totalGrow, start } = row;
-    const growSize = (height - row.height) / totalGrow, { children } = box;
-    if (growSize <= 0)
-        return;
+    let child, grow, remainSpace, remainTotalSpace = 0, list = row.hasRangeSize && [], {grow: totalGrow, start: start} = row;
+    const growSize = (height - row.height) / totalGrow, {children: children} = box;
+    if (growSize <= 0) return;
     row.height = height;
     for (let j = 0, end = row.count; j < end; j++) {
         child = children[reverse ? start - j : start + j];
@@ -256,19 +255,17 @@ function growY(box, row, height, reverse) {
                 if (remainSpace) {
                     remainTotalSpace += remainSpace;
                     totalGrow -= grow;
-                }
-                else if (list) {
+                } else if (list) {
                     child.__.heightRange ? list.unshift(child) : list.push(child);
                 }
             }
-        }
-        else {
+        } else {
             end++;
         }
     }
-    if (remainTotalSpace)
-        assignRemainSpace(list, remainTotalSpace, totalGrow);
+    if (remainTotalSpace) assignRemainSpace(list, remainTotalSpace, totalGrow);
 }
+
 function assignRemainSpace(list, totalSpace, countGrow) {
     let grow, space, local, remain;
     list.forEach(child => {
@@ -279,8 +276,9 @@ function assignRemainSpace(list, totalSpace, countGrow) {
         countGrow -= grow;
     });
 }
+
 function resizeHeight(child, local, size) {
-    const { heightRange, lockRatio } = child.__;
+    const {heightRange: heightRange, lockRatio: lockRatio} = child.__;
     const realSize = heightRange ? within(size, heightRange) : size;
     const scale = realSize / local.height;
     child.scaleResize(lockRatio ? scale : 1, scale);
@@ -288,67 +286,52 @@ function resizeHeight(child, local, size) {
     return size - realSize;
 }
 
-const { move: move$2 } = draw.PointHelper;
+const {move: move$2} = draw.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 side = "width", {children: children, itemBox: itemBox} = box, pData = getParseData(box, true);
+    const {complex: complex, wrap: wrap, xGap: xGap, yGap: yGap, isAutoXGap: isAutoXGap, isFitXGap: 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;
+    let child, local, localWidth, index, data, {x: x, y: y, width: width, height: 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 (!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);
+                    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.__.widthRange) data.hasRangeSize = true;
                 }
-                if (child.__heightGrow)
-                    resizeHeight(child, local, height);
+                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 {
+            } else {
                 move$2(child, x - local.x, y - local.y);
                 x += local.width + xGapTempNum;
             }
         }
     }
     if (complex && data) {
-        const { isAutoYGap, isFitYGap, contentAlign, rowXAlign, rowYAlign } = pData;
+        const {isAutoYGap: isAutoYGap, isFitYGap: isFitYGap, contentAlign: contentAlign, rowXAlign: rowXAlign, rowYAlign: 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 (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.height += (wrapData.gap = yGap) * (wrapData.list.length - 1);
+            if (isAutoYGap) autoGap(wrapData, "height", height, isFitYGap); else wrapData.height += (wrapData.gap = yGap) * (wrapData.list.length - 1);
             align$1(box, wrapData, contentAlign, rowXAlign);
             layout$1(box, wrapData, rowYAlign, reverse);
-        }
-        else {
+        } else {
             alignContent(box, data, contentAlign);
             layoutX(box, data, 0, data.y, rowYAlign, reverse);
         }
@@ -357,112 +340,97 @@ function flowX(box, reverse) {
 
 function align(box, data, contentAlign, rowYAlign) {
     alignContent(box, data, contentAlign);
-    const { list } = data;
+    const {list: list} = data;
     if (list.length > 1) {
-        if (!rowYAlign)
-            rowYAlign = alignToInnerYMap[contentAlign];
-        if (rowYAlign !== 'from') {
+        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;
+                if (rowYAlign === "center") row.y /= 2;
             }
         }
     }
 }
 
-const { move: move$1 } = draw.PointHelper;
+const {move: move$1} = draw.PointHelper;
+
 function layout(box, data, rowXAlign, reverse) {
-    const { list } = data, reverseWrap = box.__.flowWrap === 'reverse';
-    let row, { x, y } = data;
+    const {list: list} = data, reverseWrap = box.__.flowWrap === "reverse";
+    let row, {x: x, y: 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;
+    const {children: children} = box;
+    let child, local, {y: y, start: 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);
+            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 {
+        } else {
             end++;
         }
     }
 }
 
-const { move } = draw.PointHelper;
+const {move: move} = draw.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 side = "height", {children: children, itemBox: itemBox} = box, pData = getParseData(box, false);
+    const {complex: complex, wrap: wrap, xGap: xGap, yGap: yGap, isAutoYGap: isAutoYGap, isFitYGap: 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;
+    let child, local, localHeight, index, data, {x: x, y: y, width: width, height: 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 (!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);
+                    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.__.heightRange) data.hasRangeSize = true;
                 }
-                if (child.__widthGrow)
-                    resizeWidth(child, local, width);
+                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 {
+            } else {
                 move(child, x - local.x, y - local.y);
                 y += local.height + yGapTempNum;
             }
         }
     }
     if (complex && data) {
-        const { isAutoXGap, isFitXGap, contentAlign, rowXAlign, rowYAlign } = pData;
+        const {isAutoXGap: isAutoXGap, isFitXGap: isFitXGap, contentAlign: contentAlign, rowXAlign: rowXAlign, rowYAlign: 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 (data.grow) growY(box, data, height, reverse);
+            if (isAutoYGap) autoGap(data, side, height, isFitYGap);
+            if (wrap) flowWrap(wrapData, data, side);
         }
         if (wrap) {
-            if (isAutoXGap)
-                autoGap(wrapData, 'width', width, isFitXGap);
-            else
-                wrapData.width += (wrapData.gap = xGap) * (wrapData.list.length - 1);
+            if (isAutoXGap) autoGap(wrapData, "width", width, isFitXGap); else wrapData.width += (wrapData.gap = xGap) * (wrapData.list.length - 1);
             align(box, wrapData, contentAlign, rowYAlign);
             layout(box, wrapData, rowXAlign, reverse);
-        }
-        else {
+        } else {
             alignContent(box, data, contentAlign);
             layoutY(box, data, data.x, 0, rowXAlign, reverse);
         }
@@ -470,96 +438,101 @@ function flowY(box, reverse) {
 }
 
 function autoBoundsType(defaultValue) {
-    return draw.decorateLeafAttr(defaultValue, (key) => draw.attr({
+    return draw.decorateLeafAttr(defaultValue, key => draw.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; });
+            const grow = draw.isNumber(value) ? 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) && draw.doBoundsType(this);
         }
     }));
 }
 
-draw.Plugin.add('flow', 'resize');
-const box = draw.Box.prototype, { __updateBoxBounds } = draw.Group.prototype;
-draw.UI.addAttr('flow', false, draw.autoLayoutType);
-draw.UI.addAttr('gap', 0, draw.boundsType);
-draw.UI.addAttr('flowAlign', 'top-left', draw.boundsType);
-draw.UI.addAttr('flowWrap', false, draw.boundsType);
-draw.UI.addAttr('itemBox', 'box', draw.boundsType);
-draw.UI.addAttr('inFlow', true, draw.boundsType);
-draw.UI.addAttr('autoWidth', undefined, autoBoundsType);
-draw.UI.addAttr('autoHeight', undefined, autoBoundsType);
-draw.UI.addAttr('autoBox', undefined, draw.boundsType);
-const { copyAndSpread } = draw.BoundsHelper;
-box.__updateFlowLayout = function () {
-    const { leaferIsCreated, flow } = this;
-    if (leaferIsCreated)
-        this.leafer.created = false;
+draw.Plugin.add("flow", "resize");
+
+const box = draw.Box.prototype, {__updateBoxBounds: __updateBoxBounds} = draw.Group.prototype;
+
+draw.UI.addAttr("flow", false, draw.autoLayoutType);
+
+draw.UI.addAttr("gap", 0, draw.boundsType);
+
+draw.UI.addAttr("flowAlign", "top-left", draw.boundsType);
+
+draw.UI.addAttr("flowWrap", false, draw.boundsType);
+
+draw.UI.addAttr("itemBox", "box", draw.boundsType);
+
+draw.UI.addAttr("inFlow", true, draw.boundsType);
+
+draw.UI.addAttr("autoWidth", undefined, autoBoundsType);
+
+draw.UI.addAttr("autoHeight", undefined, autoBoundsType);
+
+draw.UI.addAttr("autoBox", undefined, draw.boundsType);
+
+const {copyAndSpread: copyAndSpread} = draw.BoundsHelper;
+
+box.__updateFlowLayout = function() {
+    const {leaferIsCreated: leaferIsCreated, flow: flow} = this;
+    if (leaferIsCreated) this.leafer.created = false;
     switch (flow) {
-        case 'x':
-        case true:
-            flowX(this);
-            break;
-        case 'y':
-            flowY(this);
-            break;
-        case 'x-reverse':
-            flowX(this, true);
-            break;
-        case 'y-reverse':
-            flowY(this, true);
-            break;
+      case "x":
+      case true:
+        flowX(this);
+        break;
+
+      case "y":
+        flowY(this);
+        break;
+
+      case "x-reverse":
+        flowX(this, true);
+        break;
+
+      case "y-reverse":
+        flowY(this, true);
+        break;
     }
-    if (leaferIsCreated)
-        this.leafer.created = true;
+    if (leaferIsCreated) this.leafer.created = true;
 };
-box.__updateContentBounds = function () {
-    const { padding } = this.__;
+
+box.__updateContentBounds = function() {
+    const {padding: padding} = this.__;
     const layout = this.__layout;
     const same = layout.contentBounds === layout.boxBounds;
     if (padding) {
-        if (same)
-            layout.shrinkContent();
+        if (same) layout.shrinkContent();
         copyAndSpread(layout.contentBounds, layout.boxBounds, padding, true);
-    }
-    else {
-        if (!same)
-            layout.shrinkContentCancel();
+    } else {
+        if (!same) layout.shrinkContentCancel();
     }
 };
-box.__updateBoxBounds = function (secondLayout) {
-    const data = this.__;
+
+box.__updateBoxBounds = function(secondLayout) {
     if (this.children.length && !this.pathInputed) {
-        const { flow } = data;
+        const data = this.__, {flow: flow} = data;
         if (data.__autoSide) {
-            if (data.__hasSurface)
-                this.__extraUpdate();
+            if (data.__hasSurface) this.__extraUpdate();
             flow && !secondLayout ? this.__updateRectBoxBounds() : __updateBoxBounds.call(this);
-            const { boxBounds } = this.__layout;
+            const {boxBounds: boxBounds} = this.__layout;
             if (!data.__autoSize) {
                 if (data.__autoWidth) {
-                    if (!flow)
-                        boxBounds.width += boxBounds.x, boxBounds.x = 0;
+                    if (!flow) boxBounds.width += boxBounds.x, boxBounds.x = 0;
                     boxBounds.height = data.height, boxBounds.y = 0;
-                }
-                else {
-                    if (!flow)
-                        boxBounds.height += boxBounds.y, boxBounds.y = 0;
+                } else {
+                    if (!flow) boxBounds.height += boxBounds.y, boxBounds.y = 0;
                     boxBounds.width = data.width, boxBounds.x = 0;
                 }
             }
-            flow && secondLayout && data.padding && copyAndSpread(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : (data.__autoWidth ? 'width' : 'height'));
+            flow && secondLayout && data.padding && copyAndSpread(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : data.__autoWidth ? "width" : "height");
             this.__updateNaturalSize();
-        }
-        else {
+        } else {
             this.__updateRectBoxBounds();
         }
-        if (flow)
-            this.__updateContentBounds();
-    }
-    else {
+        if (flow) this.__updateContentBounds();
+    } else {
         this.__updateRectBoxBounds();
     }
 };