chore：优化布局

3 years ago · 93f8ab5e2e
21 changed files with 88 additions and 42 deletions
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@ -15,8 +15,8 @@ BI.Layout = BI.inherit(BI.Widget, {
            scrollx: false, // true, false
            scrolly: false, // true, false
            items: [],
-            paddingHgap: 0,
-            paddingVgap: 0,
+            innerHGap: 0,
+            innerVGap: 0,
        };
    },

@ -286,13 +286,13 @@ BI.Layout = BI.inherit(BI.Widget, {
        var o = this.options;
        var innerLgap, innerRgap, innerTgap, innerBgap;
        if (BI.isNull(vIndex)) {
-            innerTgap = innerBgap = o.paddingVgap;
-            innerLgap = hIndex === 0 ? o.paddingHgap : 0;
-            innerRgap = hIndex === o.items.length - 1 ? o.paddingHgap : 0;
+            innerTgap = innerBgap = o.innerVGap;
+            innerLgap = hIndex === 0 ? o.innerHGap : 0;
+            innerRgap = hIndex === o.items.length - 1 ? o.innerHGap : 0;
        } else {
-            innerLgap = innerRgap = o.paddingHgap;
-            innerTgap = vIndex === 0 ? o.paddingVgap : 0;
-            innerBgap = vIndex === o.items.length - 1 ? o.paddingVgap : 0;
+            innerLgap = innerRgap = o.innerHGap;
+            innerTgap = vIndex === 0 ? o.innerVGap : 0;
+            innerBgap = vIndex === o.items.length - 1 ? o.innerVGap : 0;
        }
        if (o.vgap + o.tgap + innerTgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
            var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + innerTgap + (item.tgap || 0) + (item.vgap || 0);
@ -324,15 +324,9 @@ BI.Layout = BI.inherit(BI.Widget, {
    _handleReverseGap: function (w, item, index) {
        var o = this.options;
        var innerLgap, innerRgap, innerTgap, innerBgap;
-        if (BI.isNull(vIndex)) {
-            innerTgap = innerBgap = o.paddingVgap;
-            innerLgap = hIndex === 0 ? o.paddingHgap : 0;
-            innerRgap = hIndex === o.items.length - 1 ? o.paddingHgap : 0;
-        } else {
-            innerLgap = innerRgap = o.paddingHgap;
-            innerTgap = vIndex === 0 ? o.paddingVgap : 0;
-            innerBgap = vIndex === o.items.length - 1 ? o.paddingVgap : 0;
-        }
+        innerLgap = innerRgap = o.innerHGap;
+        innerTgap = index === 0 ? o.innerVGap : 0;
+        innerBgap = index === o.items.length - 1 ? o.innerVGap : 0;
        if (o.vgap + o.tgap + innerTgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
            var top = (index === 0 ? o.vgap : 0) + (index === 0 ? o.tgap : 0) + innerTgap + (item.tgap || 0) + (item.vgap || 0);
            w.element.css({
--- a/src/core/wrapper/layout/adapt/absolute.horizontal.js
+++ b/src/core/wrapper/layout/adapt/absolute.horizontal.js
@ -37,7 +37,9 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
-            bgap: o.bgap
+            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
@ -23,6 +23,8 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
        BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
        return {
            type: "bi.htape",
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
            ref: function (_ref) {
                self.layout = _ref;
            },
--- a/src/core/wrapper/layout/adapt/absolute.vertical.js
+++ b/src/core/wrapper/layout/adapt/absolute.vertical.js
@ -37,7 +37,9 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
-            bgap: o.bgap
+            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/adapt/adapt.center.js
+++ b/src/core/wrapper/layout/adapt/adapt.center.js
@ -38,7 +38,9 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
-            bgap: o.bgap
+            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
@ -34,6 +34,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
        if (leftRight.left || "left" in o.items) {
            layoutArray.push({
                type: "bi.left",
+                lgap: o.innerHGap,
+                vgap: o.innerVGap,
                items: [{
                    el: {
                        type: "bi.vertical_adapt",
@ -55,6 +57,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
        if (leftRight.right || "right" in o.items) {
            layoutArray.push({
                type: "bi.right",
+                rgap: o.innerHGap,
+                vgap: o.innerVGap,
                items: [{
                    el: {
                        type: "bi.vertical_adapt",
@ -144,6 +148,8 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
            tgap: o.tgap,
            bgap: o.bgap,
            vgap: o.vgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
            scrollx: o.scrollx,
            scrolly: o.scrolly,
            scrollable: o.scrollable
@ -196,6 +202,8 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
            tgap: o.tgap,
            bgap: o.bgap,
            vgap: o.vgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
            scrollx: o.scrollx,
            scrolly: o.scrolly,
            scrollable: o.scrollable
--- a/src/core/wrapper/layout/adapt/adapt.vertical.js
+++ b/src/core/wrapper/layout/adapt/adapt.vertical.js
@ -38,7 +38,9 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
-            bgap: o.bgap
+            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/adapt/inline.center.js
+++ b/src/core/wrapper/layout/adapt/inline.center.js
@ -40,7 +40,9 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
-            bgap: o.bgap
+            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/adapt/inline.horizontal.js
+++ b/src/core/wrapper/layout/adapt/inline.horizontal.js
@ -40,7 +40,9 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
-            bgap: o.bgap
+            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/adapt/inline.vertical.js
+++ b/src/core/wrapper/layout/adapt/inline.vertical.js
@ -40,7 +40,9 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
            lgap: o.lgap,
            rgap: o.rgap,
            tgap: o.tgap,
-            bgap: o.bgap
+            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/flex/flex.center.js
+++ b/src/core/wrapper/layout/flex/flex.center.js
@ -37,6 +37,8 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
            vgap: o.vgap,
            tgap: o.tgap,
            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
            items: o.items
        };
    },
--- a/src/core/wrapper/layout/flex/flex.horizontal.center.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.center.js
@ -38,6 +38,8 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
            vgap: o.vgap,
            tgap: o.tgap,
            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
            items: o.items
        };
    },
--- a/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
+++ b/src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
@ -28,7 +28,9 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
            items: this._formatItems(o.items),
            scrollx: o.scrollx,
            scrolly: o.scrolly,
-            scrollable: o.scrollable
+            scrollable: o.scrollable,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/flex/flex.vertical.center.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.center.js
@ -39,6 +39,8 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
            lgap: o.lgap,
            rgap: o.rgap,
            hgap: o.hgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
            items: o.items
        };
    },
--- a/src/core/wrapper/layout/float/float.absolute.horizontal.js
+++ b/src/core/wrapper/layout/float/float.absolute.horizontal.js
@ -35,7 +35,9 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
            bgap: o.bgap,
            // lgap和rgap不传的话内部不会设置left和right
            lgap: o.lgap,
-            rgap: o.rgap
+            rgap: o.rgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
+++ b/src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
@ -29,6 +29,8 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
            verticalAlign: o.verticalAlign,
            items: this._formatItems(o.items),
            vgap: "50%",
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
            scrollx: o.scrollx,
            scrolly: o.scrolly,
            scrollable: o.scrollable
--- a/src/core/wrapper/layout/float/float.absolute.vertical.js
+++ b/src/core/wrapper/layout/float/float.absolute.vertical.js
@ -35,7 +35,9 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
            rgap: o.rgap,
            // tgap和bgap不传的话内部不会设置top和bottom
            tgap: o.tgap,
-            bgap: o.bgap
+            bgap: o.bgap,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
        };
    },

--- a/src/core/wrapper/layout/float/float.horizontal.js
+++ b/src/core/wrapper/layout/float/float.horizontal.js
@ -51,6 +51,8 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
            }],
            horizontalAlign: o.horizontalAlign,
            verticalAlign: o.verticalAlign,
+            innerHGap: o.innerHGap,
+            innerVGap: o.innerVGap,
            scrollx: o.scrollx,
            scrolly: o.scrolly,
            scrollable: o.scrollable
--- a/src/core/wrapper/layout/layout.flow.js
+++ b/src/core/wrapper/layout/layout.flow.js
@ -22,6 +22,18 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
    render: function () {
        BI.FloatLeftLayout.superclass.render.apply(this, arguments);
        var o = this.options;
+        if (o.innerHGap !== 0) {
+            this.element.css({
+                paddingLeft: this._optimiseGap(o.innerHgap),
+                paddingRight: this._optimiseGap(o.innerHgap)
+            })
+        }
+        if (o.innerVGap !== 0) {
+            this.element.css({
+                paddingTop: this._optimiseGap(o.innerVGap),
+                paddingBottom: this._optimiseGap(o.innerVGap)
+            })
+        }
        this.populate(this.options.items);
    },

--- a/src/core/wrapper/layout/layout.inline.js
+++ b/src/core/wrapper/layout/layout.inline.js
@ -52,7 +52,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
        });
        w.element.addClass("i-item");
        if (columnSize === "fill" || columnSize === "") {
-            var length  = 0, gap = o.hgap;
+            var length  = 0, gap = o.hgap + o.innerHGap;
            var fillCount = 0, autoCount = 0;
            for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
                var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
@ -81,8 +81,8 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
        }
        this._handleGap(w, item, i);
        if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
-            var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
-                bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
+            var top = o.innerVGap + o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0),
+                bottom = o.innerVGap + o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0);
            var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : (top + bottom) / BI.pixRatio + BI.pixUnit;
            w.element.css("height", "calc(100% - " + gap + ")");
        }
--- a/src/core/wrapper/layout/layout.tape.js
+++ b/src/core/wrapper/layout/layout.tape.js
@ -43,8 +43,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
            }
            w.element.css({
                position: "absolute",
-                top: self._optimiseGap((item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
-                bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.vgap + o.bgap)
+                top: self._optimiseGap((item.vgap || 0) + (item.tgap || 0) + o.paddingVgap + o.vgap + o.tgap),
+                bottom: self._optimiseGap((item.bgap || 0) + (item.vgap || 0) + o.paddingVgap + o.vgap + o.bgap)
            });
            if (o.verticalAlign === BI.VerticalAlign.Middle) {
                w.element.css({
@ -59,8 +59,8 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
        });

        var left = {}, right = {};
-        left[0] = 0;
-        right[items.length - 1] = 0;
+        left[0] = o.innerHGap;
+        right[items.length - 1] = o.innerHGap;

        BI.any(items, function (i, item) {
            if (BI.isEmptyObject(item)) {
@ -81,7 +81,7 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
                left: self._optimiseGap(left[i] + (item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
                width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
            });
-            
+
            if (columnSize === "" || columnSize === "fill") {
                return true;
            }
@ -100,7 +100,7 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
                right: self._optimiseGap(right[i] + (item.rgap || 0) + (item.hgap || 0) + o.hgap + o.rgap),
                width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
            });
-            
+
            if (columnSize === "" || columnSize === "fill") {
                return true;
            }
@ -163,8 +163,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
            }
            w.element.css({
                position: "absolute",
-                left: self._optimiseGap((item.lgap || 0) + (item.hgap || 0) + o.hgap + o.lgap),
-                right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.hgap + o.rgap)
+                left: self._optimiseGap((item.lgap || 0) + (item.hgap || 0) + o.innerHGap + o.hgap + o.lgap),
+                right: self._optimiseGap((item.hgap || 0) + (item.rgap || 0) + o.innerHGap + o.hgap + o.rgap)
            });
            if (o.horizontalAlign === BI.HorizontalAlign.Center) {
                w.element.css({
@ -179,8 +179,8 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
        });

        var top = {}, bottom = {};
-        top[0] = 0;
-        bottom[items.length - 1] = 0;
+        top[0] = o.innerVGap;
+        bottom[items.length - 1] = o.innerVGap;

        BI.any(items, function (i, item) {
            if (BI.isEmptyObject(item)) {
@ -201,7 +201,7 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
                top: self._optimiseGap(top[i] + (item.vgap || 0) + (item.tgap || 0) + o.vgap + o.tgap),
                height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
            });
-            
+
            if (rowSize === "" || rowSize === "fill") {
                return true;
            }
@ -220,7 +220,7 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
                bottom: self._optimiseGap(bottom[i] + (item.vgap || 0) + (item.bgap || 0) + o.vgap + o.bgap),
                height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
            });
-            
+
            if (rowSize === "" || rowSize === "fill") {
                return true;
            }