From 2671995821cfab0eaae8fa7fa047e74e3c146238 Mon Sep 17 00:00:00 2001 From: guy Date: Mon, 9 Aug 2021 19:34:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E7=90=86=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/wrapper/layout.js | 24 ++++++++++++++ src/core/wrapper/layout/adapt/adapt.table.js | 21 +------------ .../wrapper/layout/adapt/auto.horizontal.js | 21 +------------ .../wrapper/layout/flex/flex.horizontal.js | 21 +------------ src/core/wrapper/layout/flex/flex.vertical.js | 21 +------------ .../flex/wrapper/flex.wrapper.horizontal.js | 21 +------------ .../flex/wrapper/flex.wrapper.vertical.js | 21 +------------ src/core/wrapper/layout/layout.adaptive.js | 31 +------------------ src/core/wrapper/layout/layout.default.js | 22 +------------ src/core/wrapper/layout/layout.inline.js | 21 +------------ src/core/wrapper/layout/layout.vertical.js | 21 +------------ 11 files changed, 34 insertions(+), 211 deletions(-) diff --git a/src/core/wrapper/layout.js b/src/core/wrapper/layout.js index 20f68850c..01e50c54f 100644 --- a/src/core/wrapper/layout.js +++ b/src/core/wrapper/layout.js @@ -214,6 +214,30 @@ BI.Layout = BI.inherit(BI.Widget, { this.options.items.splice(index, 1); }, + _handleGap: function (w, item, hIndex, vIndex) { + var o = this.options; + if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { + w.element.css({ + "margin-top": (((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit + }); + } + if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { + w.element.css({ + "margin-left": (((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + }); + } + if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { + w.element.css({ + "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + }); + } + if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { + w.element.css({ + "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit + }); + } + }, + /** * 添加一个子组件到容器中 * @param {JSON/BI.Widget} item 子组件 diff --git a/src/core/wrapper/layout/adapt/adapt.table.js b/src/core/wrapper/layout/adapt/adapt.table.js index cf153b93b..f1391c29b 100644 --- a/src/core/wrapper/layout/adapt/adapt.table.js +++ b/src/core/wrapper/layout/adapt/adapt.table.js @@ -91,26 +91,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, { "vertical-align": o.verticalAlign, height: "100%" }); - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } + this._handleGap(w, item, i); return td; }, diff --git a/src/core/wrapper/layout/adapt/auto.horizontal.js b/src/core/wrapper/layout/adapt/auto.horizontal.js index 6e840a09c..27b64bd9c 100644 --- a/src/core/wrapper/layout/adapt/auto.horizontal.js +++ b/src/core/wrapper/layout/adapt/auto.horizontal.js @@ -28,26 +28,7 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, { position: "relative", margin: "0px auto" }); - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } + this._handleGap(w, item, null, i); return w; }, diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js index ebd67976f..7c4fbcc0d 100644 --- a/src/core/wrapper/layout/flex/flex.horizontal.js +++ b/src/core/wrapper/layout/flex/flex.horizontal.js @@ -74,26 +74,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { if (i === o.items.length - 1) { w.element.addClass("l-c"); } - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } + this._handleGap(w, item, i); return w; }, diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js index 649b1bded..515541e46 100644 --- a/src/core/wrapper/layout/flex/flex.vertical.js +++ b/src/core/wrapper/layout/flex/flex.vertical.js @@ -73,26 +73,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, { if (i === o.items.length - 1) { w.element.addClass("l-c"); } - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } + this._handleGap(w, item, null, i); return w; }, diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js index 5ed9bf5bf..075ffe8cb 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js @@ -71,26 +71,7 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { if (i === o.items.length - 1) { w.element.addClass("l-c"); } - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } + this._handleGap(w, item, i); return w; }, diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js index 708a00c2a..89214e9a8 100644 --- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js +++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js @@ -71,26 +71,7 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { if (i === o.items.length - 1) { w.element.addClass("l-c"); } - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } + this._handleGap(w, item, null, i); return w; }, diff --git a/src/core/wrapper/layout/layout.adaptive.js b/src/core/wrapper/layout/layout.adaptive.js index f94a8c503..f82a9e321 100644 --- a/src/core/wrapper/layout/layout.adaptive.js +++ b/src/core/wrapper/layout/layout.adaptive.js @@ -19,7 +19,6 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, { var o = this.options; var w = BI.AdaptiveLayout.superclass._addElement.apply(this, arguments); w.element.css({position: "relative"}); - var left = 0, right = 0, top = 0, bottom = 0; if (BI.isNotNull(item.left)) { w.element.css({ left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left @@ -41,35 +40,7 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, { }); } - if (BI.isNotNull(o.hgap)) { - left += o.hgap; - w.element.css({"margin-left": left / BI.pixRatio + BI.pixUnit}); - right += o.hgap; - w.element.css({"margin-right": right / BI.pixRatio + BI.pixUnit}); - } - if (BI.isNotNull(o.vgap)) { - top += o.vgap; - w.element.css({"margin-top": top / BI.pixRatio + BI.pixUnit}); - bottom += o.vgap; - w.element.css({"margin-bottom": bottom / BI.pixRatio + BI.pixUnit}); - } - - if (BI.isNotNull(o.lgap)) { - left += o.lgap; - w.element.css({"margin-left": left / BI.pixRatio + BI.pixUnit}); - } - if (BI.isNotNull(o.rgap)) { - right += o.rgap; - w.element.css({"margin-right": right / BI.pixRatio + BI.pixUnit}); - } - if (BI.isNotNull(o.tgap)) { - top += o.tgap; - w.element.css({"margin-top": top / BI.pixRatio + BI.pixUnit}); - } - if (BI.isNotNull(o.bgap)) { - bottom += o.bgap; - w.element.css({"margin-bottom": bottom / BI.pixRatio + BI.pixUnit}); - } + this._handleGap(w, item); if (BI.isNotNull(item.width)) { w.element.css({width: BI.isNumber(item.width) ? item.width / BI.pixRatio + BI.pixUnit : item.width}); diff --git a/src/core/wrapper/layout/layout.default.js b/src/core/wrapper/layout/layout.default.js index 6553245c4..516b7e3a1 100644 --- a/src/core/wrapper/layout/layout.default.js +++ b/src/core/wrapper/layout/layout.default.js @@ -22,28 +22,8 @@ BI.DefaultLayout = BI.inherit(BI.Layout, { }, _addElement: function (i, item) { - var o = this.options; var w = BI.DefaultLayout.superclass._addElement.apply(this, arguments); - if (o.vgap + o.tgap + (item.tgap || 0) !== 0) { - w.element.css({ - "margin-top": (o.vgap + o.tgap + (item.tgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) !== 0) { - w.element.css({ - "margin-left": (o.hgap + o.lgap + (item.lgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } + this._handleGap(w, item); return w; }, diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js index 47f43bccd..053b49562 100644 --- a/src/core/wrapper/layout/layout.inline.js +++ b/src/core/wrapper/layout/layout.inline.js @@ -67,31 +67,12 @@ BI.InlineLayout = BI.inherit(BI.Layout, { w.element.css("max-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")"); } } + this._handleGap(w, item, i); if (o.verticalAlign === BI.VerticalAlign.Stretch) { var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")"); } - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } return w; }, diff --git a/src/core/wrapper/layout/layout.vertical.js b/src/core/wrapper/layout/layout.vertical.js index 41be60797..d34e14d31 100644 --- a/src/core/wrapper/layout/layout.vertical.js +++ b/src/core/wrapper/layout/layout.vertical.js @@ -28,26 +28,7 @@ BI.VerticalLayout = BI.inherit(BI.Layout, { w.element.css({ position: "relative" }); - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": ((i === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } + this._handleGap(w, item, null, i); if (o.horizontalAlign === BI.HorizontalAlign.Center) { w.element.css({ marginLeft: "auto",