From 06e450d1ef53e8d94d03eca59b18e839598aa36c Mon Sep 17 00:00:00 2001 From: guy Date: Fri, 13 May 2022 10:22:39 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E5=B8=83=E5=B1=80=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=86=99=E6=B3=95=EF=BC=8C=E4=B8=BA=E7=B3=BB=E7=BB=9F=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E5=81=9A=E5=87=86=E5=A4=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../adapt/absolute.leftrightvertical.js | 32 +-- .../layout/adapt/adapt.leftrightvertical.js | 215 ++++++++++++------ 2 files changed, 157 insertions(+), 90 deletions(-) diff --git a/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js b/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js index 148897cfe..1aff2a7a9 100644 --- a/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js +++ b/src/core/wrapper/layout/adapt/absolute.leftrightvertical.js @@ -56,17 +56,17 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { el: BI.stripEL(item), width: item.width }; - if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0); + if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { + json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); } - if (o.lhgap + o.llgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + (item.lgap || 0) + (item.hgap || 0); + if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { + json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); } - if (o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - json.rgap = o.lhgap + o.lrgap + (item.rgap || 0) + (item.hgap || 0); + if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { + json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); } - if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0); + if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { + json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); } return json; }); @@ -75,17 +75,17 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { el: BI.stripEL(item), width: item.width }; - if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0); + if (o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { + json.tgap = o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); } - if (o.rhgap + o.rlgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + (item.lgap || 0) + (item.hgap || 0); + if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { + json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); } - if (o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - json.rgap = o.rhgap + o.rrgap + (item.rgap || 0) + (item.hgap || 0); + if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { + json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); } - if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0); + if (o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { + json.bgap = o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); } return json; }); diff --git a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js index 1aff2a7a9..cafc1dafb 100644 --- a/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js +++ b/src/core/wrapper/layout/adapt/adapt.leftrightvertical.js @@ -1,8 +1,16 @@ -BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { +/** + * 左右分离，垂直方向居中容器 + * items:{ + left: [{el:{type:"bi.button"}}], + right:[{el:{type:"bi.button"}}] + } + * @class BI.LeftRightVerticalAdaptLayout + * @extends BI.Layout + */ +BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { props: function () { - return BI.extend(BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { - baseCls: "bi-abs-lr-v-a", - verticalAlign: BI.VerticalAlign.Middle, + return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { + baseCls: "bi-lr-v-a", items: {}, llgap: 0, lrgap: 0, @@ -20,24 +28,59 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { }, render: function () { var o = this.options, self = this; - BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); - return { - type: "bi.htape", - innerHgap: o.innerHgap, - innerVgap: o.innerVgap, - ref: function (_ref) { - self.layout = _ref; - }, - verticalAlign: o.verticalAlign, - items: this._formatItems(o.items), - scrollx: o.scrollx, - scrolly: o.scrolly, - scrollable: o.scrollable - }; + BI.LeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); + var leftRight = this._getLeftRight(o.items); + var layoutArray = []; + if (leftRight.left || "left" in o.items) { + layoutArray.push({ + type: "bi.left", + lgap: o.innerHgap, + vgap: o.innerVgap, + items: [{ + el: { + type: "bi.vertical_adapt", + ref: function (_ref) { + self.left = _ref; + }, + height: "100%", + items: leftRight.left || o.items.left, + hgap: o.lhgap, + lgap: o.llgap, + rgap: o.lrgap, + tgap: o.ltgap, + bgap: o.lbgap, + vgap: o.lvgap + } + }] + }); + } + if (leftRight.right || "right" in o.items) { + layoutArray.push({ + type: "bi.right", + rgap: o.innerHgap, + vgap: o.innerVgap, + items: [{ + el: { + type: "bi.vertical_adapt", + ref: function (_ref) { + self.right = _ref; + }, + height: "100%", + items: leftRight.right || o.items.right, + hgap: o.rhgap, + lgap: o.rlgap, + rgap: o.rrgap, + tgap: o.rtgap, + bgap: o.rbgap, + vgap: o.rvgap + } + }] + }); + } + return layoutArray; }, - _formatItems: function (items) { - var o = this.options; + _getLeftRight: function (items) { var left, right; if (BI.isArray(items)) { BI.each(items, function (i, item) { @@ -49,51 +92,72 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { } }); } - var leftItems = left || items.left || []; - var rightItems = right || items.right || []; - leftItems = BI.map(leftItems, function (i, item) { - var json = { - el: BI.stripEL(item), - width: item.width - }; - if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { - json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); - } - if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { - json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); - } - if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { - json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); - } - if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { - json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); - } - return json; - }); - rightItems = BI.map(rightItems, function (i, item) { - var json = { - el: BI.stripEL(item), - width: item.width - }; - if (o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) { - json.tgap = o.rvgap + o.rtgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item); - } - if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) { - json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item); - } - if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) { - json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item); - } - if (o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) { - json.bgap = o.rvgap + o.rbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item); - } - return json; + return { + left: left, + right: right + }; + }, + + resize: function () { + var leftRight = this._getLeftRight(this.options.items); + this.left.stroke(leftRight.left || this.options.items.left); + this.right.stroke(leftRight.right || this.options.items.right); + }, + + addItem: function () { + // do nothing + throw new Error("不能添加子组件"); + }, + + populate: function (items) { + var leftRight = this._getLeftRight(items); + this.left.populate(leftRight.left || items.left); + this.right.populate(leftRight.right || items.right); + } +}); +BI.shortcut("bi.left_right_vertical_adapt", BI.LeftRightVerticalAdaptLayout); + + +BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, { + props: function () { + return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { + baseCls: "bi-l-v-a", + items: [], + columnSize: [], + lgap: 0, + rgap: 0, + hgap: 0, + tgap: 0, + bgap: 0, + vgap: 0 }); - return leftItems.concat({}, rightItems); + }, + render: function () { + var o = this.options, self = this; + BI.LeftVerticalAdaptLayout.superclass.render.apply(this, arguments); + return { + type: "bi.vertical_adapt", + ref: function (_ref) { + self.layout = _ref; + }, + items: o.items, + columnSize: o.columnSize, + hgap: o.hgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap, + vgap: o.vgap, + innerHgap: o.innerHgap, + innerVgap: o.innerVgap, + scrollx: o.scrollx, + scrolly: o.scrolly, + scrollable: o.scrollable + }; }, resize: function () { - this.layout.stroke(this._formatItems(this.options.items)); + this.layout.resize(); }, addItem: function () { @@ -102,17 +166,17 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { }, populate: function (items) { - this.layout.populate(this._formatItems(items)); + this.layout.populate.apply(this, arguments); } }); -BI.shortcut("bi.absolute_left_right_vertical_adapt", BI.AbsoluteLeftRightVerticalAdaptLayout); +BI.shortcut("bi.left_vertical_adapt", BI.LeftVerticalAdaptLayout); -BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { +BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, { props: function () { - return BI.extend(BI.AbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { - baseCls: "bi-abs-r-v-a", - verticalAlign: BI.VerticalAlign.Middle, + return BI.extend(BI.RightVerticalAdaptLayout.superclass.props.apply(this, arguments), { + baseCls: "bi-r-v-a", items: [], + columnSize: [], lgap: 0, rgap: 0, hgap: 0, @@ -123,20 +187,23 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { }, render: function () { var o = this.options, self = this; - BI.AbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments); + BI.RightVerticalAdaptLayout.superclass.render.apply(this, arguments); return { - type: "bi.htape", + type: "bi.vertical_adapt", ref: function (_ref) { self.layout = _ref; }, - verticalAlign: o.verticalAlign, - items: [{}].concat(o.items), + horizontalAlign: BI.HorizontalAlign.Right, + items: o.items, + columnSize: o.columnSize, hgap: o.hgap, lgap: o.lgap, rgap: o.rgap, tgap: o.tgap, bgap: o.bgap, vgap: o.vgap, + innerHgap: o.innerHgap, + innerVgap: o.innerVgap, scrollx: o.scrollx, scrolly: o.scrolly, scrollable: o.scrollable @@ -144,7 +211,7 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { }, resize: function () { - this.layout.stroke([{}].concat(this.options.items)); + this.layout.resize(); }, addItem: function () { @@ -153,7 +220,7 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { }, populate: function (items) { - this.layout.populate([{}].concat(items)); + this.layout.populate(items); } }); -BI.shortcut("bi.absolute_right_vertical_adapt", BI.AbsoluteRightVerticalAdaptLayout); +BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout);