Browse Source

Pull request #3336: KERNEL-14035 refactor: layout相关es6

Merge in VISUAL/fineui from ~ZHENFEI.LI/fineui:es6 to es6

* commit '0743286aeab2f97eaa800902a1661e74b761ab60':
  KERNEL-14035 refactor: layout相关es6
es6
Zhenfei.Li-李振飞 2 years ago
parent
commit
1e683b1d0f
  1. 3
      src/core/index.js
  2. 2
      src/core/wrapper/index.js
  3. 736
      src/core/wrapper/layout.js
  4. 51
      src/core/wrapper/layout/adapt/absolute.center.js
  5. 50
      src/core/wrapper/layout/adapt/absolute.horizontal.js
  6. 160
      src/core/wrapper/layout/adapt/absolute.leftrightvertical.js
  7. 48
      src/core/wrapper/layout/adapt/absolute.vertical.js
  8. 51
      src/core/wrapper/layout/adapt/adapt.center.js
  9. 11
      src/core/wrapper/layout/adapt/adapt.horizontal.js
  10. 177
      src/core/wrapper/layout/adapt/adapt.leftrightvertical.js
  11. 103
      src/core/wrapper/layout/adapt/adapt.table.js
  12. 47
      src/core/wrapper/layout/adapt/adapt.vertical.js
  13. 50
      src/core/wrapper/layout/adapt/auto.horizontal.js
  14. 13
      src/core/wrapper/layout/adapt/index.js
  15. 47
      src/core/wrapper/layout/adapt/inline.center.js
  16. 47
      src/core/wrapper/layout/adapt/inline.horizontal.js
  17. 47
      src/core/wrapper/layout/adapt/inline.vertical.js
  18. 17
      src/core/wrapper/layout/index.js
  19. 138
      src/core/wrapper/layout/layout.absolute.js
  20. 69
      src/core/wrapper/layout/layout.adaptive.js
  21. 102
      src/core/wrapper/layout/layout.border.js
  22. 215
      src/core/wrapper/layout/layout.card.js
  23. 48
      src/core/wrapper/layout/layout.default.js
  24. 126
      src/core/wrapper/layout/layout.division.js
  25. 181
      src/core/wrapper/layout/layout.flow.js
  26. 106
      src/core/wrapper/layout/layout.grid.js
  27. 14
      src/core/wrapper/layout/layout.horizontal.js
  28. 91
      src/core/wrapper/layout/layout.inline.js
  29. 55
      src/core/wrapper/layout/layout.lattice.js
  30. 95
      src/core/wrapper/layout/layout.table.js
  31. 244
      src/core/wrapper/layout/layout.tape.js
  32. 134
      src/core/wrapper/layout/layout.td.js
  33. 63
      src/core/wrapper/layout/layout.vertical.js
  34. 163
      src/core/wrapper/layout/layout.window.js

3
src/core/index.js

@ -16,6 +16,7 @@ import * as constant from "./constant";
import * as logic from "./logic";
import { Element } from "./element";
import * as utils from "./utils";
import * as wrapper from "./wrapper";
import * as platform from "./platform/web";
export * from "./decorator";
@ -32,6 +33,7 @@ export * from "./h";
export * from "./constant";
export * from "./logic";
export * from "./utils";
export * from "./wrapper";
export * from "./platform/web";
export {
@ -62,5 +64,6 @@ Object.assign(BI, {
useInWorker,
...h,
...utils,
...wrapper,
...platform,
});

2
src/core/wrapper/index.js

@ -0,0 +1,2 @@
export { Layout } from "./layout";
export * from "./layout/index";

736
src/core/wrapper/layout.js

File diff suppressed because it is too large Load Diff

51
src/core/wrapper/layout/adapt/absolute.center.js

@ -1,47 +1,54 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend, isFunction } from "../../../2.base";
/**
* absolute实现的居中布局
* @class BI.AbsoluteCenterLayout
* @extends BI.Layout
* @class AbsoluteCenterLayout
* @extends Layout
*/
BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.AbsoluteCenterLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class AbsoluteCenterLayout extends Layout {
static xtype ="bi.absolute_center_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-c-a",
hgap: 0,
lgap: 0,
rgap: 0,
vgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
}
render: function () {
BI.AbsoluteCenterLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var o = this.options;
var w = BI.AbsoluteCenterLayout.superclass._addElement.apply(this, arguments);
_addElement(i, item) {
const o = this.options;
const w = super._addElement(...arguments);
w.element.css({
position: "absolute",
left: this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
right: this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
top: this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)),
bottom: this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)),
margin: "auto"
margin: "auto",
});
return w;
},
}
populate: function (items) {
BI.AbsoluteCenterLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.absolute_center_adapt", BI.AbsoluteCenterLayout);
}

50
src/core/wrapper/layout/adapt/absolute.horizontal.js

@ -1,26 +1,35 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend } from "../../../2.base";
import { HorizontalAlign } from "../../../constant";
/**
* absolute实现的居中布局
* @class BI.AbsoluteHorizontalLayout
* @extends BI.Layout
* absolute实现的水平布局
* @class AbsoluteHorizontalLayout
* @extends Layout
*/
BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.AbsoluteHorizontalLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class AbsoluteHorizontalLayout extends Layout {
static xtype = "bi.absolute_horizontal_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-h-a",
horizontalAlign: BI.HorizontalAlign.Center,
horizontalAlign: HorizontalAlign.Center,
rowSize: [],
hgap: 0,
lgap: 0,
rgap: 0,
vgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
}
render: function () {
var self = this, o = this.options;
BI.AbsoluteHorizontalLayout.superclass.render.apply(this, arguments);
render() {
const o = this.options;
super.render(...arguments);
return {
type: "bi.vtape",
horizontalAlign: o.horizontalAlign,
@ -29,8 +38,8 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
hgap: o.hgap,
vgap: o.vgap,
@ -41,14 +50,13 @@ BI.AbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
};
},
}
resize: function () {
resize() {
this.layout.resize();
},
}
populate: function (items) {
this.layout.populate.apply(this, arguments);
populate(...args) {
this.layout.populate(...args);
}
});
BI.shortcut("bi.absolute_horizontal_adapt", BI.AbsoluteHorizontalLayout);
}

160
src/core/wrapper/layout/adapt/absolute.leftrightvertical.js

@ -1,8 +1,16 @@
BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend, isArray, each, map, stripEL } from "../../../2.base";
import { VerticalAlign } from "../../../constant";
@shortcut()
export class AbsoluteLeftRightVerticalAdaptLayout extends Layout {
static xtype = "bi.absolute_left_right_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-lr-v-a",
verticalAlign: BI.VerticalAlign.Middle,
verticalAlign: VerticalAlign.Middle,
items: {},
llgap: 0,
lrgap: 0,
@ -15,32 +23,34 @@ BI.AbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rhgap: 0,
rtgap: 0,
rbgap: 0,
rvgap: 0
rvgap: 0,
});
},
render: function () {
var o = this.options, self = this;
BI.AbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
}
render() {
const o = this.options;
super.render(...arguments);
return {
type: "bi.htape",
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
verticalAlign: o.verticalAlign,
items: this._formatItems(o.items),
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable
scrollable: o.scrollable,
};
},
}
_formatItems: function (items) {
var self = this, o = this.options;
var left, right;
if (BI.isArray(items)) {
BI.each(items, function (i, item) {
_formatItems(items) {
const o = this.options;
let left, right;
if (isArray(items)) {
each(items, (i, item) => {
if (item.left) {
left = item.left;
}
@ -49,85 +59,92 @@ 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
let leftItems = left || items.left || [];
let rightItems = right || items.right || [];
leftItems = map(leftItems, (i, item) => {
const json = {
el: stripEL(item),
width: item.width,
};
if (o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
json.tgap = o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item);
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 + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(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 + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._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 + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
json.bgap = o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(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
rightItems = map(rightItems, (i, item) => {
const json = {
el: stripEL(item),
width: item.width,
};
if (o.rvgap + o.rtgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) {
json.tgap = o.rvgap + o.rtgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item);
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 + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(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 + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) {
json.rgap = o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._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 + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) {
json.bgap = o.rvgap + o.rbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(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 leftItems.concat({}, rightItems);
},
}
resize: function () {
resize() {
this.layout.stroke(this._formatItems(this.options.items));
},
}
addItem: function () {
addItem() {
// do nothing
throw new Error("不能添加子组件");
},
}
populate: function (items) {
populate(items) {
this.layout.populate(this._formatItems(items));
}
});
BI.shortcut("bi.absolute_left_right_vertical_adapt", BI.AbsoluteLeftRightVerticalAdaptLayout);
}
@shortcut()
export class AbsoluteRightVerticalAdaptLayout extends Layout {
static xtype = "bi.absolute_right_vertical_adapt";
BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.AbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
props () {
return extend(super.props(...arguments), {
baseCls: "bi-abs-r-v-a",
verticalAlign: BI.VerticalAlign.Middle,
verticalAlign: VerticalAlign.Middle,
items: [],
lgap: 0,
rgap: 0,
hgap: 0,
tgap: 0,
bgap: 0,
vgap: 0
vgap: 0,
});
},
render: function () {
var o = this.options, self = this;
BI.AbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
}
render () {
const o = this.options;
super.render(...arguments);
return {
type: "bi.htape",
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
verticalAlign: o.verticalAlign,
items: [{}].concat(o.items),
@ -139,21 +156,20 @@ BI.AbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
vgap: o.vgap,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable
scrollable: o.scrollable,
};
},
}
resize: function () {
resize () {
this.layout.stroke([{}].concat(this.options.items));
},
}
addItem: function () {
addItem () {
// do nothing
throw new Error("不能添加子组件");
},
}
populate: function (items) {
populate (items) {
this.layout.populate([{}].concat(items));
}
});
BI.shortcut("bi.absolute_right_vertical_adapt", BI.AbsoluteRightVerticalAdaptLayout);
}

48
src/core/wrapper/layout/adapt/absolute.vertical.js

@ -1,26 +1,35 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend } from "../../../2.base";
import { VerticalAlign } from "../../../constant";
/**
* absolute实现的居中布局
* @class BI.AbsoluteVerticalLayout
* @extends BI.Layout
* @class AbsoluteVerticalLayout
* @extends Layout
*/
BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.AbsoluteVerticalLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class AbsoluteVerticalLayout extends Layout {
static xtype = "bi.absolute_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-v-a",
verticalAlign: BI.VerticalAlign.Middle,
verticalAlign: VerticalAlign.Middle,
columnSize: [],
hgap: 0,
lgap: 0,
rgap: 0,
vgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
}
render: function () {
var self = this, o = this.options;
BI.AbsoluteVerticalLayout.superclass.render.apply(this, arguments);
render() {
const o = this.options;
super.render(...arguments);
return {
type: "bi.htape",
verticalAlign: o.verticalAlign,
@ -29,8 +38,8 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
hgap: o.hgap,
vgap: o.vgap,
@ -41,14 +50,13 @@ BI.AbsoluteVerticalLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
};
},
}
resize: function () {
resize() {
this.layout.resize();
},
}
populate: function (items) {
this.layout.populate.apply(this, arguments);
populate(...args) {
this.layout.populate(...args);
}
});
BI.shortcut("bi.absolute_vertical_adapt", BI.AbsoluteVerticalLayout);
}

51
src/core/wrapper/layout/adapt/adapt.center.js

@ -1,13 +1,21 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend } from "../../../2.base";
import { HorizontalAlign, VerticalAlign } from "../../../constant";
/**
* 自适应水平和垂直方向都居中容器
* @class BI.CenterAdaptLayout
* @extends BI.Layout
* @class CenterAdaptLayout
* @extends Layout
*/
BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.CenterAdaptLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class CenterAdaptLayout extends Layout {
static xtype = "bi.center_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-c-a",
horizontalAlign: BI.HorizontalAlign.Center,
horizontalAlign: HorizontalAlign.Center,
columnSize: [],
scrollx: false,
hgap: 0,
@ -15,23 +23,25 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
render: function () {
var o = this.options, self = this;
BI.CenterAdaptLayout.superclass.render.apply(this, arguments);
}
render() {
const o = this.options;
super.render(...arguments);
return {
type: "bi.horizontal",
verticalAlign: BI.VerticalAlign.Middle,
verticalAlign: VerticalAlign.Middle,
horizontalAlign: o.horizontalAlign,
columnSize: o.columnSize,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
items: o.items,
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
hgap: o.hgap,
vgap: o.vgap,
@ -42,14 +52,13 @@ BI.CenterAdaptLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
};
},
}
resize: function () {
resize() {
this.layout.resize();
},
}
populate: function (items) {
this.layout.populate.apply(this, arguments);
populate(...args) {
this.layout.populate(...args);
}
});
BI.shortcut("bi.center_adapt", BI.CenterAdaptLayout);
}

11
src/core/wrapper/layout/adapt/adapt.horizontal.js

@ -1,8 +1,9 @@
import { shortcut } from "../../../decorator";
/**
* 水平方向居中容器
* @class BI.HorizontalAdaptLayout
* @extends BI.Layout
*/
BI.HorizontalAdaptLayout = function () {
};
BI.shortcut("bi.horizontal_adapt", BI.HorizontalAdaptLayout);
@shortcut()
export class HorizontalAdaptLayout {
static xtype = "bi.horizontal_adapt";
}

177
src/core/wrapper/layout/adapt/adapt.leftrightvertical.js

@ -1,15 +1,23 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend, isArray, each } from "../../../2.base";
import { HorizontalAlign } from "../../../constant";
/**
* 左右分离垂直方向居中容器
* items:{
left: [{el:{type:"bi.button"}}],
right:[{el:{type:"bi.button"}}]
}
* @class BI.LeftRightVerticalAdaptLayout
* @extends BI.Layout
* @class LeftRightVerticalAdaptLayout
* @extends Layout
*/
BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class LeftRightVerticalAdaptLayout extends Layout {
static xtype = "bi.left_right_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-lr-v-a",
items: {},
llgap: 0,
@ -23,14 +31,15 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rhgap: 0,
rtgap: 0,
rbgap: 0,
rvgap: 0
rvgap: 0,
});
},
render: function () {
var o = this.options, self = this;
BI.LeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments);
var leftRight = this._getLeftRight(o.items);
var layoutArray = [];
}
render() {
const o = this.options;
super.render(...arguments);
const leftRight = this._getLeftRight(o.items);
const layoutArray = [];
if (leftRight.left || "left" in o.items) {
layoutArray.push({
type: "bi.left",
@ -39,8 +48,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
items: [{
el: {
type: "bi.vertical_adapt",
ref: function (_ref) {
self.left = _ref;
ref: _ref => {
this.left = _ref;
},
height: "100%",
items: leftRight.left || o.items.left,
@ -49,9 +58,9 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rgap: o.lrgap,
tgap: o.ltgap,
bgap: o.lbgap,
vgap: o.lvgap
}
}]
vgap: o.lvgap,
},
}],
});
}
if (leftRight.right || "right" in o.items) {
@ -62,8 +71,8 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
items: [{
el: {
type: "bi.vertical_adapt",
ref: function (_ref) {
self.right = _ref;
ref: _ref => {
this.right = _ref;
},
height: "100%",
items: leftRight.right || o.items.right,
@ -72,18 +81,19 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rgap: o.rrgap,
tgap: o.rtgap,
bgap: o.rbgap,
vgap: o.rvgap
}
}]
vgap: o.rvgap,
},
}],
});
}
return layoutArray;
},
}
_getLeftRight: function (items) {
var left, right;
if (BI.isArray(items)) {
BI.each(items, function (i, item) {
_getLeftRight(items) {
let left, right;
if (isArray(items)) {
each(items, (i, item) => {
if (item.left) {
left = item.left;
}
@ -92,35 +102,37 @@ BI.LeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
}
});
}
return {
left: left,
right: right
left,
right,
};
},
}
resize: function () {
var leftRight = this._getLeftRight(this.options.items);
resize() {
const 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 () {
addItem() {
// do nothing
throw new Error("不能添加子组件");
},
}
populate: function (items) {
var leftRight = this._getLeftRight(items);
populate(items) {
const 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);
}
@shortcut()
export class LeftVerticalAdaptLayout extends Layout {
static xtype = "bi.left_vertical_adapt";
BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.LeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
props() {
return extend(super.props(...arguments), {
baseCls: "bi-l-v-a",
items: [],
columnSize: [],
@ -129,16 +141,18 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
hgap: 0,
tgap: 0,
bgap: 0,
vgap: 0
vgap: 0,
});
},
render: function () {
var o = this.options, self = this;
BI.LeftVerticalAdaptLayout.superclass.render.apply(this, arguments);
}
render() {
const o = this.options;
super.render(...arguments);
return {
type: "bi.vertical_adapt",
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
items: o.items,
columnSize: o.columnSize,
@ -152,28 +166,30 @@ BI.LeftVerticalAdaptLayout = BI.inherit(BI.Layout, {
innerVgap: o.innerVgap,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable
scrollable: o.scrollable,
};
},
}
resize: function () {
resize() {
this.layout.resize();
},
}
addItem: function () {
addItem() {
// do nothing
throw new Error("不能添加子组件");
},
}
populate: function (items) {
this.layout.populate.apply(this, arguments);
populate(items) {
this.layout.populate(...arguments);
}
});
BI.shortcut("bi.left_vertical_adapt", BI.LeftVerticalAdaptLayout);
}
BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.RightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class RightVerticalAdaptLayout extends Layout {
static xtype = "bi.right_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-r-v-a",
items: [],
columnSize: [],
@ -182,18 +198,20 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
hgap: 0,
tgap: 0,
bgap: 0,
vgap: 0
vgap: 0,
});
},
render: function () {
var o = this.options, self = this;
BI.RightVerticalAdaptLayout.superclass.render.apply(this, arguments);
}
render() {
const o = this.options;
super.render(...arguments);
return {
type: "bi.vertical_adapt",
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
horizontalAlign: BI.HorizontalAlign.Right,
horizontalAlign: HorizontalAlign.Right,
items: o.items,
columnSize: o.columnSize,
hgap: o.hgap,
@ -206,21 +224,20 @@ BI.RightVerticalAdaptLayout = BI.inherit(BI.Layout, {
innerVgap: o.innerVgap,
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable
scrollable: o.scrollable,
};
},
}
resize: function () {
resize() {
this.layout.resize();
},
}
addItem: function () {
addItem() {
// do nothing
throw new Error("不能添加子组件");
},
}
populate: function (items) {
this.layout.populate(items);
populate(...args) {
this.layout.populate(...args);
}
});
BI.shortcut("bi.right_vertical_adapt", BI.RightVerticalAdaptLayout);
}

103
src/core/wrapper/layout/adapt/adapt.table.js

@ -1,78 +1,91 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend, isFunction, some, isNull } from "../../../2.base";
import { Widget } from "../../../4.widget";
import { _lazyCreateWidget } from "../../../5.inject";
import { HorizontalAlign, VerticalAlign } from "../../../constant";
/**
* 使用display:table和display:table-cell实现的horizontal布局
* @class BI.TableAdaptLayout
* @extends BI.Layout
* @class TableAdaptLayout
* @extends Layout
*/
BI.TableAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.TableAdaptLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class TableAdaptLayout extends Layout {
static xtype = "bi.table_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-t-a",
columnSize: [],
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: VerticalAlign.Top,
horizontalAlign: HorizontalAlign.Left,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
render: function () {
BI.TableAdaptLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
this.$table = BI.Widget._renderEngine.createElement("<div>").css({
}
render() {
super.render(...arguments);
const o = this.options;
this.$table = Widget._renderEngine.createElement("<div>").css({
position: "relative",
display: "table",
width: (o.horizontalAlign === BI.HorizontalAlign.Center || o.horizontalAlign === BI.HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto",
height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto",
"white-space": "nowrap"
width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch || this._hasFill()) ? "100%" : "auto",
height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto",
"white-space": "nowrap",
});
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_hasFill: function () {
var o = this.options;
_hasFill() {
const o = this.options;
if (o.columnSize.length > 0) {
return o.columnSize.indexOf("fill") >= 0;
}
return BI.some(o.items, function (i, item) {
return some(o.items, (i, item) => {
if (item.width === "fill") {
return true;
}
});
},
}
_addElement: function (i, item) {
var o = this.options;
var td, width = "";
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
_addElement(i, item) {
const o = this.options;
let td, width = "";
let w;
const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize > 0) {
width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
}
if ((BI.isNull(columnSize) || columnSize === "") && this._hasFill()) {
if ((isNull(columnSize) || columnSize === "") && this._hasFill()) {
width = 2;
}
if (!this.hasWidget(this._getChildName(i))) {
var w = BI._lazyCreateWidget(item);
w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
td = BI._lazyCreateWidget({
w = _lazyCreateWidget(item);
w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" });
td = _lazyCreateWidget({
type: "bi.default",
width: width,
items: [w]
width,
items: [w],
});
this.addWidget(this._getChildName(i), td);
} else {
td = this.getWidgetByName(this._getChildName(i));
td.element.width(width);
}
if (o.verticalAlign === BI.VerticalAlign.Stretch) {
var top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
if (o.verticalAlign === VerticalAlign.Stretch) {
const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`);
}
// 对于表现为td的元素设置最大宽度,有几点需要注意
// 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
@ -81,7 +94,7 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
if (columnSize > 0) {
td.element.css({
"max-width": width,
"min-width": width
"min-width": width,
});
}
if (i === 0) {
@ -91,20 +104,20 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
position: "relative",
display: "table-cell",
"vertical-align": o.verticalAlign,
height: "100%"
height: "100%",
});
this._handleGap(w, item, i);
return td;
},
}
appendFragment: function (frag) {
appendFragment(frag) {
this.$table.append(frag);
this.element.append(this.$table);
},
}
populate: function (items) {
BI.TableAdaptLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.table_adapt", BI.TableAdaptLayout);
}

47
src/core/wrapper/layout/adapt/adapt.vertical.js

@ -1,13 +1,20 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { HorizontalAlign, VerticalAlign } from "../../../constant";
/**
* 垂直方向居中容器
* @class BI.VerticalAdaptLayout
* @extends BI.Layout
* @class VerticalAdaptLayout
* @extends Layout
*/
BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
props: {
@shortcut()
export class VerticalAdaptLayout extends Layout {
static xtype = "bi.vertical_adapt";
props = {
baseCls: "bi-v-a",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: HorizontalAlign.Left,
verticalAlign: VerticalAlign.Middle,
columnSize: [],
scrollx: false,
hgap: 0,
@ -15,12 +22,13 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
},
bgap: 0,
}
render: function () {
var self = this, o = this.options;
BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
render() {
const o = this.options;
super.render(...arguments);
return {
type: "bi.horizontal",
horizontalAlign: o.horizontalAlign,
@ -30,8 +38,8 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
scrollx: o.scrollx,
scrolly: o.scrolly,
scrollable: o.scrollable,
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
hgap: o.hgap,
vgap: o.vgap,
@ -42,14 +50,13 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
};
},
}
resize: function () {
resize() {
this.layout.resize();
},
}
populate: function (items) {
this.layout.populate.apply(this, arguments);
populate(...args) {
this.layout.populate(...args);
}
});
BI.shortcut("bi.vertical_adapt", BI.VerticalAdaptLayout);
}

50
src/core/wrapper/layout/adapt/auto.horizontal.js

@ -1,44 +1,50 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend, isFunction } from "../../../2.base";
/**
* 水平方向居中自适应容器
* @class BI.HorizontalAutoLayout
* @extends BI.Layout
* @class HorizontalAutoLayout
* @extends Layout
*/
BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.HorizontalAutoLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class HorizontalAutoLayout extends Layout {
static xtype = "bi.horizontal_auto";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-h-o",
hgap: 0,
lgap: 0,
rgap: 0,
vgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
}
render: function () {
BI.HorizontalAutoLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var o = this.options;
var w = BI.HorizontalAutoLayout.superclass._addElement.apply(this, arguments);
_addElement(i, item) {
const w = super._addElement(...arguments);
w.element.css({
position: "relative",
margin: "0px auto"
margin: "0px auto",
});
this._handleGap(w, item, null, i);
return w;
},
}
populate: function (items) {
BI.HorizontalAutoLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.horizontal_auto", BI.HorizontalAutoLayout);
}

13
src/core/wrapper/layout/adapt/index.js

@ -0,0 +1,13 @@
export { AbsoluteCenterLayout } from "./absolute.center";
export { AbsoluteHorizontalLayout } from "./absolute.horizontal";
export { AbsoluteLeftRightVerticalAdaptLayout, AbsoluteRightVerticalAdaptLayout } from "./absolute.leftrightvertical";
export { AbsoluteVerticalLayout } from "./absolute.vertical";
export { CenterAdaptLayout } from "./adapt.center";
export { HorizontalAdaptLayout } from "./adapt.horizontal";
export { LeftRightVerticalAdaptLayout, LeftVerticalAdaptLayout, RightVerticalAdaptLayout } from "./adapt.leftrightvertical";
export { TableAdaptLayout } from "./adapt.table";
export { VerticalAdaptLayout } from "./adapt.vertical";
export { HorizontalAutoLayout } from "./auto.horizontal";
export { InlineCenterAdaptLayout } from "./inline.center";
export { InlineHorizontalAdaptLayout } from "./inline.horizontal";
export { InlineVerticalAdaptLayout } from "./inline.vertical";

47
src/core/wrapper/layout/adapt/inline.center.js

@ -1,35 +1,43 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend } from "../../../2.base";
import { HorizontalAlign, VerticalAlign } from "../../../constant";
/**
* 内联布局
* @class BI.InlineCenterAdaptLayout
* @extends BI.Layout
* @class InlineCenterAdaptLayout
* @extends Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
@shortcut()
export class InlineCenterAdaptLayout extends Layout {
static xtype = "bi.inline_center_adapt";
props: function () {
return BI.extend(BI.InlineCenterAdaptLayout.superclass.props.apply(this, arguments), {
props() {
return extend(super.props(...arguments), {
baseCls: "bi-i-c-a",
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: HorizontalAlign.Center,
verticalAlign: VerticalAlign.Middle,
columnSize: [],
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
}
render: function () {
var self = this, o = this.options;
render() {
const o = this.options;
return {
type: "bi.inline",
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
items: o.items,
horizontalAlign: o.horizontalAlign,
@ -44,14 +52,13 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
};
},
}
resize: function () {
resize() {
this.layout.resize();
},
}
populate: function (items) {
this.layout.populate.apply(this.layout, arguments);
populate(...args) {
this.layout.populate(...args);
}
});
BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout);
}

47
src/core/wrapper/layout/adapt/inline.horizontal.js

@ -1,35 +1,43 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend } from "../../../2.base";
import { HorizontalAlign, VerticalAlign } from "../../../constant";
/**
* 内联布局
* @class BI.InlineHorizontalAdaptLayout
* @extends BI.Layout
* @class InlineHorizontalAdaptLayout
* @extends Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
@shortcut()
export class InlineHorizontalAdaptLayout extends Layout {
static xtype = "bi.inline_horizontal_adapt";
props: function () {
return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), {
props() {
return extend(super.props(...arguments), {
baseCls: "bi-i-h-a",
horizontalAlign: BI.HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: HorizontalAlign.Center,
verticalAlign: VerticalAlign.Top,
columnSize: [],
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
}
render: function () {
var self = this, o = this.options;
render() {
const o = this.options;
return {
type: "bi.inline",
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
items: o.items,
horizontalAlign: o.horizontalAlign,
@ -44,14 +52,13 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
};
},
}
resize: function () {
resize() {
this.layout.resize();
},
}
populate: function (items) {
this.layout.populate.apply(this.layout, arguments);
populate(...args) {
this.layout.populate(...args);
}
});
BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout);
}

47
src/core/wrapper/layout/adapt/inline.vertical.js

@ -1,35 +1,43 @@
import { shortcut } from "../../../decorator";
import { Layout } from "../../layout";
import { extend } from "../../../2.base";
import { HorizontalAlign, VerticalAlign } from "../../../constant";
/**
* 内联布局
* @class BI.InlineVerticalAdaptLayout
* @extends BI.Layout
* @class InlineVerticalAdaptLayout
* @extends Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
@shortcut()
export class InlineVerticalAdaptLayout extends Layout {
static xtype = "bi.inline_vertical_adapt";
props: function () {
return BI.extend(BI.InlineVerticalAdaptLayout.superclass.props.apply(this, arguments), {
props() {
return extend(super.props(...arguments), {
baseCls: "bi-i-v-a",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: HorizontalAlign.Left,
verticalAlign: VerticalAlign.Middle,
columnSize: [],
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
}
render: function () {
var self = this, o = this.options;
render() {
const o = this.options;
return {
type: "bi.inline",
ref: function (_ref) {
self.layout = _ref;
ref: _ref => {
this.layout = _ref;
},
items: o.items,
horizontalAlign: o.horizontalAlign,
@ -44,14 +52,13 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap,
innerVgap: o.innerVgap,
};
},
}
resize: function () {
resize() {
this.layout.resize();
},
}
populate: function (items) {
this.layout.populate.apply(this.layout, arguments);
populate(...args) {
this.layout.populate(...args);
}
});
BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);
}

17
src/core/wrapper/layout/index.js

@ -0,0 +1,17 @@
export { AbsoluteLayout } from "./layout.absolute";
export { AdaptiveLayout } from "./layout.adaptive";
export { BorderLayout } from "./layout.border";
export { CardLayout } from "./layout.card";
export { DefaultLayout } from "./layout.default";
export { DivisionLayout } from "./layout.division";
export { FloatLeftLayout, FloatRightLayout } from "./layout.flow";
export { GridLayout } from "./layout.grid";
export { HorizontalLayout } from "./layout.horizontal";
export { InlineLayout } from "./layout.inline";
export { LatticeLayout } from "./layout.lattice";
export { TableLayout } from "./layout.table";
export { HTapeLayout, VTapeLayout } from "./layout.tape";
export { TdLayout } from "./layout.td";
export { VerticalLayout } from "./layout.vertical";
export { WindowLayout } from "./layout.window";
export * from "./adapt";

138
src/core/wrapper/layout/layout.absolute.js

@ -1,115 +1,119 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, map, parseFloat, isKey, pick, isNotNull, isNumber } from "../../2.base";
/**
* 固定子组件上下左右的布局容器
* @class BI.AbsoluteLayout
* @extends BI.Layout
*/
BI.AbsoluteLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.AbsoluteLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class AbsoluteLayout extends Layout {
static xtype = "bi.absolute";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs",
hgap: null,
vgap: null,
lgap: null,
rgap: null,
tgap: null,
bgap: null
bgap: null,
});
},
render: function () {
BI.AbsoluteLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
}
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var o = this.options;
var w = BI.AbsoluteLayout.superclass._addElement.apply(this, arguments);
var left = 0, right = 0, top = 0, bottom = 0;
var offsets = BI.pick(item, ["top", "right", "bottom", "left"]);
_addElement(i, item) {
const o = this.options;
const w = super._addElement(...arguments);
let left = 0, right = 0, top = 0, bottom = 0;
let offsets = pick(item, ["top", "right", "bottom", "left"]);
if (BI.isKey(item.inset)) {
var insets = BI.map((item.inset + "").split(" "), function (i, str) {
return BI.parseFloat(str);
});
if (isKey(item.inset)) {
const insets = map((`${item.inset}`).split(" "), (i, str) => parseFloat(str));
switch (insets.length) {
case 1:
offsets = {top: insets[0], bottom: insets[0], left: insets[0], right: insets[0]}
break;
case 2:
offsets = {top: insets[0], bottom: insets[0], left: insets[1], right: insets[1]}
break;
case 3:
offsets = {top: insets[0], left: insets[1], right: insets[1], bottom: insets[2]}
break
case 4:
default:
offsets = {top: insets[0], right: insets[1], bottom: insets[2], left: insets[3]}
break;
case 1:
offsets = { top: insets[0], bottom: insets[0], left: insets[0], right: insets[0] };
break;
case 2:
offsets = { top: insets[0], bottom: insets[0], left: insets[1], right: insets[1] };
break;
case 3:
offsets = { top: insets[0], left: insets[1], right: insets[1], bottom: insets[2] };
break;
case 4:
default:
offsets = { top: insets[0], right: insets[1], bottom: insets[2], left: insets[3] };
break;
}
}
if (BI.isNotNull(offsets.left)) {
w.element.css({left: BI.isNumber(offsets.left) ? this._optimiseGap(offsets.left) : offsets.left});
if (isNotNull(offsets.left)) {
w.element.css({ left: isNumber(offsets.left) ? this._optimiseGap(offsets.left) : offsets.left });
left += offsets.left;
}
if (BI.isNotNull(offsets.right)) {
w.element.css({right: BI.isNumber(offsets.right) ? this._optimiseGap(offsets.right) : offsets.right});
if (isNotNull(offsets.right)) {
w.element.css({ right: isNumber(offsets.right) ? this._optimiseGap(offsets.right) : offsets.right });
right += offsets.right;
}
if (BI.isNotNull(offsets.top)) {
w.element.css({top: BI.isNumber(offsets.top) ? this._optimiseGap(offsets.top) : offsets.top});
if (isNotNull(offsets.top)) {
w.element.css({ top: isNumber(offsets.top) ? this._optimiseGap(offsets.top) : offsets.top });
top += offsets.top;
}
if (BI.isNotNull(offsets.bottom)) {
w.element.css({bottom: BI.isNumber(offsets.bottom) ? this._optimiseGap(offsets.bottom) : offsets.bottom});
if (isNotNull(offsets.bottom)) {
w.element.css({ bottom: isNumber(offsets.bottom) ? this._optimiseGap(offsets.bottom) : offsets.bottom });
bottom += offsets.bottom;
}
if (BI.isNotNull(o.hgap)) {
if (isNotNull(o.hgap)) {
left += o.hgap;
w.element.css({left: this._optimiseGap(left)});
w.element.css({ left: this._optimiseGap(left) });
right += o.hgap;
w.element.css({right: this._optimiseGap(right)});
w.element.css({ right: this._optimiseGap(right) });
}
if (BI.isNotNull(o.vgap)) {
if (isNotNull(o.vgap)) {
top += o.vgap;
w.element.css({top: this._optimiseGap(top)});
w.element.css({ top: this._optimiseGap(top) });
bottom += o.vgap;
w.element.css({bottom: this._optimiseGap(bottom)});
w.element.css({ bottom: this._optimiseGap(bottom) });
}
if (BI.isNotNull(o.lgap)) {
if (isNotNull(o.lgap)) {
left += o.lgap;
w.element.css({left: this._optimiseGap(left)});
w.element.css({ left: this._optimiseGap(left) });
}
if (BI.isNotNull(o.rgap)) {
if (isNotNull(o.rgap)) {
right += o.rgap;
w.element.css({right: this._optimiseGap(right)});
w.element.css({ right: this._optimiseGap(right) });
}
if (BI.isNotNull(o.tgap)) {
if (isNotNull(o.tgap)) {
top += o.tgap;
w.element.css({top: this._optimiseGap(top)});
w.element.css({ top: this._optimiseGap(top) });
}
if (BI.isNotNull(o.bgap)) {
if (isNotNull(o.bgap)) {
bottom += o.bgap;
w.element.css({bottom: this._optimiseGap(bottom)});
w.element.css({ bottom: this._optimiseGap(bottom) });
}
if (BI.isNotNull(item.width)) {
w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
if (isNotNull(item.width)) {
w.element.css({ width: isNumber(item.width) ? this._optimiseGap(item.width) : item.width });
}
if (BI.isNotNull(item.height)) {
w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
if (isNotNull(item.height)) {
w.element.css({ height: isNumber(item.height) ? this._optimiseGap(item.height) : item.height });
}
w.element.css({position: "absolute"});
w.element.css({ position: "absolute" });
return w;
},
}
populate: function (items) {
BI.AbsoluteLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.absolute", BI.AbsoluteLayout);
}

69
src/core/wrapper/layout/layout.adaptive.js

@ -1,63 +1,70 @@
BI.AdaptiveLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.AdaptiveLayout.superclass.props.apply(this, arguments), {
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isNumber, isNotNull, isFunction } from "../../2.base";
@shortcut()
export class AdaptiveLayout extends Layout {
static xtype = "bi.adaptive";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-adaptive",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
render: function () {
BI.AdaptiveLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
}
render() {
super.render(...arguments);
const self = this, o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
self.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var o = this.options;
var w = BI.AdaptiveLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative"});
if (BI.isNotNull(item.left)) {
_addElement(i, item) {
const w = super._addElement(...arguments);
w.element.css({ position: "relative" });
if (isNotNull(item.left)) {
w.element.css({
left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left
left: isNumber(item.left) ? this._optimiseGap(item.left) : item.left,
});
}
if (BI.isNotNull(item.right)) {
if (isNotNull(item.right)) {
w.element.css({
right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right
right: isNumber(item.right) ? this._optimiseGap(item.right) : item.right,
});
}
if (BI.isNotNull(item.top)) {
if (isNotNull(item.top)) {
w.element.css({
top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top
top: isNumber(item.top) ? this._optimiseGap(item.top) : item.top,
});
}
if (BI.isNotNull(item.bottom)) {
if (isNotNull(item.bottom)) {
w.element.css({
bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom
bottom: isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom,
});
}
this._handleGap(w, item);
if (BI.isNotNull(item.width)) {
w.element.css({width: BI.isNumber(item.width) ? this._optimiseGap(item.width) : item.width});
if (isNotNull(item.width)) {
w.element.css({ width: isNumber(item.width) ? this._optimiseGap(item.width) : item.width });
}
if (BI.isNotNull(item.height)) {
w.element.css({height: BI.isNumber(item.height) ? this._optimiseGap(item.height) : item.height});
if (isNotNull(item.height)) {
w.element.css({ height: isNumber(item.height) ? this._optimiseGap(item.height) : item.height });
}
return w;
},
}
populate: function (items) {
BI.AbsoluteLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.adaptive", BI.AdaptiveLayout);
}

102
src/core/wrapper/layout/layout.border.js

@ -1,42 +1,51 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isNotNull, isFunction } from "../../2.base";
import { _lazyCreateWidget } from "../../5.inject";
/**
* 上下的高度固定/左右的宽度固定中间的高度/宽度自适应
*
* @class BI.BorderLayout
* @extends BI.Layout
* @class BorderLayout
* @extends Layout
*/
BI.BorderLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.BorderLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class BorderLayout extends Layout {
static xtype = "bi.border";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-border-layout",
items: {}
items: {},
});
},
render: function () {
BI.BorderLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
}
render() {
super.render(...arguments);
const self = this, o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
self.populate(newValue);
}) : o.items;
this.populate(items);
},
}
addItem: function (item) {
addItem(item) {
// do nothing
throw new Error("不能添加子组件");
},
}
stroke: function (regions) {
var item;
var top = 0;
var bottom = 0;
var left = 0;
var right = 0;
stroke(regions) {
let item;
let top = 0;
let bottom = 0;
let left = 0;
let right = 0;
if ("north" in regions) {
item = regions["north"];
if (item != null) {
item = regions.north;
if (isNotNull(item)) {
if (item.el) {
if (!this.hasWidget(this._getChildName("north"))) {
var w = BI._lazyCreateWidget(item);
const w = _lazyCreateWidget(item);
this.addWidget(this._getChildName("north"), w);
}
this.getWidgetByName(this._getChildName("north")).element.height(this._optimiseGap(item.height))
@ -45,18 +54,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
top: this._optimiseGap(item.top || 0),
left: this._optimiseGap(item.left || 0),
right: this._optimiseGap(item.right || 0),
bottom: "initial"
bottom: "initial",
});
}
top = (item.height || 0) + (item.top || 0) + (item.bottom || 0);
}
}
if ("south" in regions) {
item = regions["south"];
if (item != null) {
item = regions.south;
if (isNotNull(item)) {
if (item.el) {
if (!this.hasWidget(this._getChildName("south"))) {
var w = BI._lazyCreateWidget(item);
const w = _lazyCreateWidget(item);
this.addWidget(this._getChildName("south"), w);
}
this.getWidgetByName(this._getChildName("south")).element.height(this._optimiseGap(item.height))
@ -65,18 +74,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
bottom: this._optimiseGap(item.bottom || 0),
left: this._optimiseGap(item.left || 0),
right: this._optimiseGap(item.right || 0),
top: "initial"
top: "initial",
});
}
bottom = (item.height || 0) + (item.top || 0) + (item.bottom || 0);
}
}
if ("west" in regions) {
item = regions["west"];
if (item != null) {
item = regions.west;
if (isNotNull(item)) {
if (item.el) {
if (!this.hasWidget(this._getChildName("west"))) {
var w = BI._lazyCreateWidget(item);
const w = _lazyCreateWidget(item);
this.addWidget(this._getChildName("west"), w);
}
this.getWidgetByName(this._getChildName("west")).element.width(this._optimiseGap(item.width))
@ -85,18 +94,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
left: this._optimiseGap(item.left || 0),
top: this._optimiseGap(top),
bottom: this._optimiseGap(bottom),
right: "initial"
right: "initial",
});
}
left = (item.width || 0) + (item.left || 0) + (item.right || 0);
}
}
if ("east" in regions) {
item = regions["east"];
if (item != null) {
item = regions.east;
if (isNotNull(item)) {
if (item.el) {
if (!this.hasWidget(this._getChildName("east"))) {
var w = BI._lazyCreateWidget(item);
const w = _lazyCreateWidget(item);
this.addWidget(this._getChildName("east"), w);
}
this.getWidgetByName(this._getChildName("east")).element.width(this._optimiseGap(item.width))
@ -105,17 +114,17 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
right: this._optimiseGap(item.right || 0),
top: this._optimiseGap(top),
bottom: this._optimiseGap(bottom),
left: "initial"
left: "initial",
});
}
right = (item.width || 0) + (item.left || 0) + (item.right || 0);
}
}
if ("center" in regions) {
item = regions["center"];
if (item != null) {
item = regions.center;
if (isNotNull(item)) {
if (!this.hasWidget(this._getChildName("center"))) {
var w = BI._lazyCreateWidget(item);
const w = _lazyCreateWidget(item);
this.addWidget(this._getChildName("center"), w);
}
this.getWidgetByName(this._getChildName("center")).element
@ -124,19 +133,18 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
top: this._optimiseGap(top),
bottom: this._optimiseGap(bottom),
left: this._optimiseGap(left),
right: this._optimiseGap(right)
right: this._optimiseGap(right),
});
}
}
},
}
update: function (opt) {
update(opt) {
return this.forceUpdate(opt);
},
}
populate: function (items) {
BI.BorderLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.border", BI.BorderLayout);
}

215
src/core/wrapper/layout/layout.card.js

@ -1,211 +1,215 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, each, isNotNull, isFunction, findIndex, isWidget, some, map, isKey } from "../../2.base";
import { _lazyCreateWidget } from "../../5.inject";
import { Events } from "../../constant";
import { Action } from "../../action";
/**
* 卡片布局可以做到当前只显示一个组件其他的都隐藏
* @class BI.CardLayout
* @extends BI.Layout
* @class CardLayout
* @extends Layout
*
* @cfg {JSON} options 配置属性
* @cfg {String} options.defaultShowName 默认展示的子组件名
*/
BI.CardLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.CardLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class CardLayout extends Layout {
static xtype = "bi.card";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-card-layout",
items: []
items: [],
});
},
}
render: function () {
BI.CardLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
stroke: function (items) {
var self = this, o = this.options;
stroke(items) {
const o = this.options;
this.showIndex = void 0;
BI.each(items, function (i, item) {
each(items, (i, item) => {
if (item) {
if (!self.hasWidget(item.cardName)) {
var w = BI._lazyCreateWidget(item);
w.on(BI.Events.DESTROY, function () {
var index = BI.findIndex(o.items, function (i, tItem) {
return tItem.cardName == item.cardName;
});
let w;
if (!this.hasWidget(item.cardName)) {
w = _lazyCreateWidget(item);
w.on(Events.DESTROY, () => {
const index = findIndex(o.items, (i, tItem) => tItem.cardName === item.cardName);
if (index > -1) {
o.items.splice(index, 1);
}
});
self.addWidget(self._getChildName(item.cardName), w);
this.addWidget(this._getChildName(item.cardName), w);
} else {
var w = self.getWidgetByName(self._getChildName(item.cardName));
w = this.getWidgetByName(this._getChildName(item.cardName));
}
w.element.css({
position: "relative",
top: "0",
left: "0",
width: "100%",
height: "100%"
height: "100%",
});
w.setVisible(false);
}
});
},
}
resize: function () {
resize() {
// console.log("Card布局不需要resize");
},
}
update: function (opt) {
update(opt) {
return this.forceUpdate(opt);
},
}
empty: function () {
BI.CardLayout.superclass.empty.apply(this, arguments);
empty(...args) {
super.empty(...args);
this.options.items = [];
},
}
populate: function (items) {
BI.CardLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
this.options.defaultShowName && this.showCardByName(this.options.defaultShowName);
},
}
isCardExisted: function (cardName) {
return BI.some(this.options.items, function (i, item) {
return item.cardName == cardName && item.el;
});
},
isCardExisted(cardName) {
return some(this.options.items, (i, item) => item.cardName === cardName && item.el);
}
getCardByName: function (cardName) {
getCardByName(cardName) {
if (!this.isCardExisted(cardName)) {
throw new Error("cardName不存在", cardName);
}
return this._children[this._getChildName(cardName)];
},
}
_deleteCardByName: function (cardName) {
_deleteCardByName(cardName) {
delete this._children[this._getChildName(cardName)];
var index = BI.findIndex(this.options.items, function (i, item) {
return item.cardName == cardName;
});
const index = findIndex(this.options.items, (i, item) => item.cardName === cardName);
if (index > -1) {
this.options.items.splice(index, 1);
}
},
}
deleteCardByName: function (cardName) {
deleteCardByName(cardName) {
if (!this.isCardExisted(cardName)) {
throw new Error("cardName不存在", cardName);
}
var child = this._children[this._getChildName(cardName)];
const child = this._children[this._getChildName(cardName)];
this._deleteCardByName(cardName);
child && child._destroy();
},
}
addCardByName: function (cardName, cardItem) {
addCardByName(cardName, cardItem) {
if (this.isCardExisted(cardName)) {
throw new Error("cardName 已存在", cardName);
}
var widget = BI._lazyCreateWidget(cardItem, this);
const widget = _lazyCreateWidget(cardItem, this);
widget.element.css({
position: "relative",
top: "0",
left: "0",
width: "100%",
height: "100%"
height: "100%",
}).appendTo(this.element);
widget.invisible();
this.addWidget(this._getChildName(cardName), widget);
this.options.items.push({el: cardItem, cardName: cardName});
this.options.items.push({ el: cardItem, cardName });
return widget;
},
}
showCardByName: function (name, action, callback) {
var self = this;
showCardByName(name, action, callback) {
// name不存在的时候全部隐藏
var exist = this.isCardExisted(name);
if (this.showIndex != null) {
const exist = this.isCardExisted(name);
if (isNotNull(this.showIndex)) {
this.lastShowIndex = this.showIndex;
}
this.showIndex = name;
var flag = false;
BI.each(this.options.items, function (i, item) {
var el = self._children[self._getChildName(item.cardName)];
let flag = false;
each(this.options.items, (i, item) => {
const el = this._children[this._getChildName(item.cardName)];
if (el) {
if (name != item.cardName) {
if (name !== item.cardName) {
// 动画效果只有在全部都隐藏的时候才有意义,且只要执行一次动画操作就够了
!flag && !exist && (BI.Action && action instanceof BI.Action) ? (action.actionBack(el), flag = true) : el.invisible();
!flag && !exist && (Action && action instanceof Action) ? (action.actionBack(el), flag = true) : el.invisible();
} else {
(BI.Action && action instanceof BI.Action) ? action.actionPerformed(void 0, el, callback) : (el.visible(), callback && callback());
(Action && action instanceof Action) ? action.actionPerformed(void 0, el, callback) : (el.visible(), callback && callback());
}
}
});
},
}
showLastCard: function () {
var self = this;
showLastCard() {
this.showIndex = this.lastShowIndex;
BI.each(this.options.items, function (i, item) {
self._children[self._getChildName(item.cardName)].setVisible(self.showIndex == i);
each(this.options.items, (i, item) => {
this._children[this._getChildName(item.cardName)].setVisible(this.showIndex === i);
});
},
}
setDefaultShowName: function (name) {
setDefaultShowName(name) {
this.options.defaultShowName = name;
return this;
},
}
getDefaultShowName: function () {
getDefaultShowName() {
return this.options.defaultShowName;
},
}
getAllCardNames: function () {
return BI.map(this.options.items, function (i, item) {
return item.cardName;
});
},
getAllCardNames() {
return map(this.options.items, (i, item) => item.cardName);
}
getShowingCard: function () {
if (!BI.isKey(this.showIndex)) {
getShowingCard() {
if (!isKey(this.showIndex)) {
return void 0;
}
return this.getWidgetByName(this._getChildName(this.showIndex));
},
}
deleteAllCard: function () {
var self = this;
BI.each(this.getAllCardNames(), function (i, name) {
self.deleteCardByName(name);
deleteAllCard() {
each(this.getAllCardNames(), (i, name) => {
this.deleteCardByName(name);
});
},
}
hideAllCard: function () {
var self = this;
BI.each(this.options.items, function (i, item) {
self._children[self._getChildName(item.cardName)].invisible();
hideAllCard() {
each(this.options.items, (i, item) => {
this._children[this._getChildName(item.cardName)].invisible();
});
},
}
isAllCardHide: function () {
var self = this;
var flag = true;
BI.some(this.options.items, function (i, item) {
if (self._children[self._getChildName(item.cardName)].isVisible()) {
isAllCardHide() {
let flag = true;
some(this.options.items, (i, item) => {
if (this._children[this._getChildName(item.cardName)].isVisible()) {
flag = false;
return false;
}
});
return flag;
},
}
removeWidget: function (nameOrWidget) {
var removeName, self = this;
if (BI.isWidget(nameOrWidget)) {
BI.each(this._children, function (name, child) {
removeWidget(nameOrWidget) {
let removeName;
if (isWidget(nameOrWidget)) {
each(this._children, (name, child) => {
if (child === nameOrWidget) {
removeName = name;
}
@ -217,5 +221,4 @@ BI.CardLayout = BI.inherit(BI.Layout, {
this._deleteCardByName(removeName);
}
}
});
BI.shortcut("bi.card", BI.CardLayout);
}

48
src/core/wrapper/layout/layout.default.js

@ -1,39 +1,47 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction } from "../../2.base";
/**
* 默认的布局方式
*
* @class BI.DefaultLayout
* @extends BI.Layout
* @class DefaultLayout
* @extends Layout
*/
BI.DefaultLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.DefaultLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class DefaultLayout extends Layout {
static xtype = "bi.default";
props() {
return extend(super.props(...arguments), {
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0,
items: []
items: [],
});
},
render: function () {
BI.DefaultLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
}
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var w = BI.DefaultLayout.superclass._addElement.apply(this, arguments);
_addElement(i, item) {
const w = super._addElement(...arguments);
this._handleGap(w, item);
return w;
},
}
populate: function (items) {
BI.DefaultLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.default", BI.DefaultLayout);
}

126
src/core/wrapper/layout/layout.division.js

@ -1,36 +1,46 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, makeArray, each, isArray } from "../../2.base";
import { Widget } from "../../4.widget";
import { _lazyCreateWidget } from "../../5.inject";
/**
* 分隔容器的控件按照宽度和高度所占比平分整个容器
*
* @class BI.DivisionLayout
* @extends BI.Layout
* @class DivisionLayout
* @extends Layout
*/
BI.DivisionLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.DivisionLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class DivisionLayout extends Layout {
static xtype = "bi.division";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-division",
columns: null,
rows: null,
items: []
items: [],
});
},
render: function () {
BI.DivisionLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
}
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
addItem: function (item) {
addItem(item) {
// do nothing
throw new Error("不能添加子组件");
},
}
stroke: function (items) {
var o = this.options, self = this;
var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
var map = BI.makeArray(rows), widths = {}, heights = {};
stroke(items) {
const o = this.options;
const rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
const map = makeArray(rows), widths = {}, heights = {};
function firstElement (item, cls) {
item.addClass(cls);
@ -45,9 +55,9 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
}
function first (item, cls) {
if (item instanceof BI.Widget) {
if (item instanceof Widget) {
firstElement(item.element, cls);
} else if (item.el instanceof BI.Widget) {
} else if (item.el instanceof Widget) {
firstElement(item.el.element, cls);
} else if (item.el) {
firstObject(item.el, cls);
@ -56,12 +66,12 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
}
}
BI.each(map, function (i) {
map[i] = BI.makeArray(columns);
each(map, i => {
map[i] = makeArray(columns);
});
BI.each(items, function (i, item) {
if (BI.isArray(item)) {
BI.each(item, function (j, el) {
each(items, (i, item) => {
if (isArray(item)) {
each(item, (j, el) => {
widths[i] = (widths[i] || 0) + item.width;
heights[j] = (heights[j] || 0) + item.height;
map[i][j] = el;
@ -73,56 +83,56 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
heights[item.column] = (heights[item.column] || 0) + item.height;
map[item.row][item.column] = item;
});
for (var i = 0; i < rows; i++) {
var totalW = 0;
for (var j = 0; j < columns; j++) {
for (let i = 0; i < rows; i++) {
let totalW = 0;
for (let j = 0; j < columns; j++) {
let w;
if (!map[i][j]) {
throw new Error("item(" + i + "" + j + ") 必须", map);
throw new Error(`item(${i}${j}) 必须`, map);
}
if (!this.hasWidget(this._getChildName(i + "_" + j))) {
var w = BI._lazyCreateWidget(map[i][j]);
this.addWidget(this._getChildName(i + "_" + j), w);
if (!this.hasWidget(this._getChildName(`${i}_${j}`))) {
w = _lazyCreateWidget(map[i][j]);
this.addWidget(this._getChildName(`${i}_${j}`), w);
} else {
w = this.getWidgetByName(this._getChildName(i + "_" + j));
w = this.getWidgetByName(this._getChildName(`${i}_${j}`));
}
var left = totalW * 100 / widths[i];
w.element.css({position: "absolute", left: left + "%"});
const left = totalW * 100 / widths[i];
w.element.css({ position: "absolute", left: `${left}%` });
if (j > 0) {
var lastW = this.getWidgetByName(this._getChildName(i + "_" + (j - 1)));
lastW.element.css({right: (100 - left) + "%"});
const lastW = this.getWidgetByName(this._getChildName(`${i}_${j - 1}`));
lastW.element.css({ right: `${100 - left}%` });
}
if (j == o.columns - 1) {
w.element.css({right: "0%"});
if (j === o.columns - 1) {
w.element.css({ right: "0%" });
}
first(w, self.getRowColumnCls(i, j, rows - 1, columns - 1));
first(w, this.getRowColumnCls(i, j, rows - 1, columns - 1));
totalW += map[i][j].width;
}
}
for (var j = 0; j < o.columns; j++) {
var totalH = 0;
for (var i = 0; i < o.rows; i++) {
var w = this.getWidgetByName(this._getChildName(i + "_" + j));
var top = totalH * 100 / heights[j];
w.element.css({top: top + "%"});
for (let j = 0; j < o.columns; j++) {
let totalH = 0;
for (let i = 0; i < o.rows; i++) {
const w = this.getWidgetByName(this._getChildName(`${i}_${j}`));
const top = totalH * 100 / heights[j];
w.element.css({ top: `${top}%` });
if (i > 0) {
var lastW = this.getWidgetByName(this._getChildName((i - 1) + "_" + j));
lastW.element.css({bottom: (100 - top) + "%"});
const lastW = this.getWidgetByName(this._getChildName(`${i - 1}_${j}`));
lastW.element.css({ bottom: `${100 - top}%` });
}
if (i == o.rows - 1) {
w.element.css({bottom: "0%"});
if (i === o.rows - 1) {
w.element.css({ bottom: "0%" });
}
totalH += map[i][j].height;
}
}
},
}
update: function (opt) {
update(opt) {
return this.forceUpdate(opt);
},
}
populate: function (items) {
BI.DivisionLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.division", BI.DivisionLayout);
}

181
src/core/wrapper/layout/layout.flow.js

@ -1,183 +1,196 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, isNotNull, isNumber } from "../../2.base";
import { pixFormat } from "../../constant";
/**
* 靠左对齐的自由浮动布局
* @class BI.FloatLeftLayout
* @extends BI.Layout
* @class FloatLeftLayout
* @extends Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.FloatLeftLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FloatLeftLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class FloatLeftLayout extends Layout {
static xtype = "bi.left";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-left clearfix",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
render: function () {
BI.FloatLeftLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
}
render() {
super.render(...arguments);
const o = this.options;
if (o.innerHgap !== 0) {
this.element.css({
paddingLeft: this._optimiseGap(o.innerHgap),
paddingRight: 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)
})
paddingBottom: this._optimiseGap(o.innerVgap),
});
}
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var o = this.options;
var w = BI.FloatLeftLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", float: "left"});
if (BI.isNotNull(item.left)) {
w.element.css({left: BI.isNumber(item.left) ? this._optimiseGap(item.left) : item.left});
_addElement(i, item) {
const o = this.options;
const w = super._addElement(...arguments);
w.element.css({ position: "relative", "float": "left" });
if (isNotNull(item.left)) {
w.element.css({ left: isNumber(item.left) ? this._optimiseGap(item.left) : item.left });
}
if (BI.isNotNull(item.right)) {
w.element.css({right: BI.isNumber(item.right) ? this._optimiseGap(item.right) : item.right});
if (isNotNull(item.right)) {
w.element.css({ right: isNumber(item.right) ? this._optimiseGap(item.right) : item.right });
}
if (BI.isNotNull(item.top)) {
w.element.css({top: BI.isNumber(item.top) ? this._optimiseGap(item.top) : item.top});
if (isNotNull(item.top)) {
w.element.css({ top: isNumber(item.top) ? this._optimiseGap(item.top) : item.top });
}
if (BI.isNotNull(item.bottom)) {
w.element.css({bottom: BI.isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom});
if (isNotNull(item.bottom)) {
w.element.css({ bottom: isNumber(item.bottom) ? this._optimiseGap(item.bottom) : item.bottom });
}
if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
const top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
w.element.css({
"margin-top": this._optimiseGap(top)
"margin-top": this._optimiseGap(top),
});
}
if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
const left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
w.element.css({
"margin-left": this._optimiseGap(left)
"margin-left": this._optimiseGap(left),
});
}
if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
const right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
w.element.css({
"margin-right": this._optimiseGap(right)
"margin-right": this._optimiseGap(right),
});
}
if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
const bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
w.element.css({
"margin-bottom": this._optimiseGap(bottom)
"margin-bottom": this._optimiseGap(bottom),
});
}
return w;
},
}
populate: function (items) {
BI.FloatLeftLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.left", BI.FloatLeftLayout);
}
/**
* 靠右对齐的自由浮动布局
* @class BI.FloatRightLayout
* @extends BI.Layout
* @class FloatRightLayout
* @extends Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.FloatRightLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.FloatRightLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class FloatRightLayout extends Layout {
static xtype = "bi.right";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-right clearfix",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
bgap: 0,
});
},
render: function () {
BI.FloatRightLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
}
render() {
super.render(...arguments);
const o = this.options;
if (o.innerHgap !== 0) {
this.element.css({
paddingLeft: this._optimiseGap(o.innerHgap),
paddingRight: 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)
})
paddingBottom: this._optimiseGap(o.innerVgap),
});
}
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var o = this.options;
var w = BI.FloatRightLayout.superclass._addElement.apply(this, arguments);
w.element.css({position: "relative", float: "right"});
if (BI.isNotNull(item.left)) {
w.element.css({left: BI.pixFormat(item.left)});
_addElement(i, item) {
const o = this.options;
const w = super._addElement(...arguments);
w.element.css({ position: "relative", "float": "right" });
if (isNotNull(item.left)) {
w.element.css({ left: pixFormat(item.left) });
}
if (BI.isNotNull(item.right)) {
w.element.css({right: BI.pixFormat(item.right)});
if (isNotNull(item.right)) {
w.element.css({ right: pixFormat(item.right) });
}
if (BI.isNotNull(item.top)) {
w.element.css({top: BI.pixFormat(item.top)});
if (isNotNull(item.top)) {
w.element.css({ top: pixFormat(item.top) });
}
if (BI.isNotNull(item.bottom)) {
w.element.css({bottom: BI.pixFormat(item.bottom)});
if (isNotNull(item.bottom)) {
w.element.css({ bottom: pixFormat(item.bottom) });
}
if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
const top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
w.element.css({
"margin-top": this._optimiseGap(top)
"margin-top": this._optimiseGap(top),
});
}
if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
var left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
const left = o.hgap / 2 + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
w.element.css({
"margin-left": this._optimiseGap(left)
"margin-left": this._optimiseGap(left),
});
}
if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
var right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
const right = o.hgap / 2 + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
w.element.css({
"margin-right": this._optimiseGap(right)
"margin-right": this._optimiseGap(right),
});
}
if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
var bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
const bottom = o.vgap / 2 + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
w.element.css({
"margin-bottom": this._optimiseGap(bottom)
"margin-bottom": this._optimiseGap(bottom),
});
}
return w;
},
}
populate: function (items) {
BI.FloatRightLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.right", BI.FloatRightLayout);
}

106
src/core/wrapper/layout/layout.grid.js

@ -1,38 +1,42 @@
/**
* 上下的高度固定/左右的宽度固定中间的高度/宽度自适应
*
* @class BI.BorderLayout
* @extends BI.Layout
*/
BI.GridLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.GridLayout.superclass.props.apply(this, arguments), {
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, isArray, each } from "../../2.base";
import { Widget } from "../../4.widget";
import { _lazyCreateWidget } from "../../5.inject";
@shortcut()
export class GridLayout extends Layout {
static xtype = "bi.grid";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-grid",
columns: null,
rows: null,
items: []
items: [],
});
},
render: function () {
BI.GridLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
}
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
addItem: function () {
addItem() {
// do nothing
throw new Error("不能添加子组件");
},
}
stroke: function (items) {
var self = this, o = this.options;
var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
var width = 100 / columns, height = 100 / rows;
var els = [];
for (var i = 0; i < rows; i++) {
stroke(items) {
const o = this.options;
const rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
const width = 100 / columns, height = 100 / rows;
const els = [];
for (let i = 0; i < rows; i++) {
els[i] = [];
}
@ -49,9 +53,9 @@ BI.GridLayout = BI.inherit(BI.Layout, {
}
function first (item, row, col) {
if (item instanceof BI.Widget) {
if (item instanceof Widget) {
firstElement(item.element, row, col);
} else if (item.el instanceof BI.Widget) {
} else if (item.el instanceof Widget) {
firstElement(item.el.element, row, col);
} else if (item.el) {
firstObject(item.el, row, col);
@ -60,46 +64,46 @@ BI.GridLayout = BI.inherit(BI.Layout, {
}
}
BI.each(items, function (i, item) {
if (BI.isArray(item)) {
BI.each(item, function (j, el) {
els[i][j] = BI._lazyCreateWidget(el);
each(items, (i, item) => {
if (isArray(item)) {
each(item, (j, el) => {
els[i][j] = _lazyCreateWidget(el);
});
return;
}
els[item.row][item.column] = BI._lazyCreateWidget(item);
els[item.row][item.column] = _lazyCreateWidget(item);
});
for (var i = 0; i < rows; i++) {
for (var j = 0; j < columns; j++) {
for (let i = 0; i < rows; i++) {
for (let j = 0; j < columns; j++) {
if (!els[i][j]) {
els[i][j] = BI._lazyCreateWidget({
type: "bi.layout"
els[i][j] = _lazyCreateWidget({
type: "bi.layout",
});
}
first(els[i][j], self.getRowColumnCls(i, j, rows - 1, columns - 1));
first(els[i][j], this.getRowColumnCls(i, j, rows - 1, columns - 1));
els[i][j].element.css({
position: "absolute",
top: height * i + "%",
left: width * j + "%",
right: (100 - (width * (j + 1))) + "%",
bottom: (100 - (height * (i + 1))) + "%"
top: `${height * i}%`,
left: `${width * j}%`,
right: `${100 - (width * (j + 1))}%`,
bottom: `${100 - (height * (i + 1))}%`,
});
this.addWidget(this._getChildName(i + "_" + j), els[i][j]);
this.addWidget(this._getChildName(`${i}_${j}`), els[i][j]);
}
}
},
}
resize: function () {
resize() {
// console.log("grid布局不需要resize")
},
}
update: function (opt) {
update(opt) {
return this.forceUpdate(opt);
},
}
populate: function (items) {
BI.GridLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.grid", BI.GridLayout);
}

14
src/core/wrapper/layout/layout.horizontal.js

@ -1,8 +1,6 @@
/**
* 水平布局
* @class BI.HorizontalLayout
* @extends BI.Layout
*/
BI.HorizontalLayout = function () {
};
BI.shortcut("bi.horizontal", BI.HorizontalLayout);
import { shortcut } from "../../decorator";
@shortcut()
export class HorizontalLayout {
static xtype = "bi.horizontal";
}

91
src/core/wrapper/layout/layout.inline.js

@ -1,19 +1,26 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, isNull } from "../../2.base";
import { pixFormat, HorizontalAlign, VerticalAlign } from "../../constant";
/**
* 内联布局
* @class BI.InlineLayout
* @extends BI.Layout
* @class InlineLayout
* @extends Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineLayout = BI.inherit(BI.Layout, {
@shortcut()
export class InlineLayout extends Layout {
static xtype = "bi.inline";
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
props() {
return extend(super.props(...arguments), {
baseCls: "bi-i",
horizontalAlign: BI.HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: HorizontalAlign.Left,
verticalAlign: VerticalAlign.Top,
columnSize: [],
hgap: 0,
vgap: 0,
@ -21,80 +28,80 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
rgap: 0,
tgap: 0,
bgap: 0,
items: []
items: [],
});
},
}
render: function () {
BI.InlineLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
render() {
super.render(...arguments);
const o = this.options;
this.element.css({
textAlign: o.horizontalAlign
textAlign: o.horizontalAlign,
});
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var o = this.options;
var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
_addElement(i, item) {
const o = this.options;
const w = super._addElement(...arguments);
let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null;
}
}
if (columnSize > 0) {
w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : BI.pixFormat(columnSize));
w.element.width(columnSize < 1 ? (`${(columnSize * 100).toFixed(1)}%`) : pixFormat(columnSize));
}
w.element.css({
position: "relative",
"vertical-align": o.verticalAlign
"vertical-align": o.verticalAlign,
});
w.element.addClass("i-item");
if (columnSize === "fill" || columnSize === "") {
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;
let length = 0, gap = o.hgap + o.innerHgap;
let fillCount = 0, autoCount = 0;
for (let k = 0, len = o.columnSize.length || o.items.length; k < len; k++) {
let cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width;
if (cz === "fill") {
fillCount++;
cz = 0;
} else if (cz === "" || BI.isNull(cz)) {
} else if (cz === "" || isNull(cz)) {
autoCount++;
cz = 0;
}
gap += o.hgap + o.lgap + o.rgap + this._optimiseItemLgap(o.items[k]) + this._optimiseItemRgap(o.items[k]) + this._optimiseItemHgap(o.items[k]);
length += cz;
}
length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : BI.pixFormat(length);
gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap);
length = length > 0 && length < 1 ? `${(length * 100).toFixed(1)}%` : pixFormat(length);
gap = gap > 0 && gap < 1 ? `${(gap * 100).toFixed(1)}%` : pixFormat(gap);
if (columnSize === "fill") {
w.element.css("min-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
w.element.css("min-width", `calc((100% - ${length} - ${gap})${fillCount > 1 ? `/${fillCount}` : ""})`);
}
if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
if (o.horizontalAlign === HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) {
if (columnSize === "fill") {
w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
w.element.css("max-width", `calc((100% - ${length} - ${gap})${fillCount > 1 ? `/${fillCount}` : ""})`);
} else {
w.element.css("max-width", "calc((100% - " + length + " - " + gap + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")");
w.element.css("max-width", `calc((100% - ${length} - ${gap})${autoCount > 1 ? `/${autoCount}` : ""})`);
}
}
}
this._handleGap(w, item, i);
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
var top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) {
const top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
bottom = o.innerVgap + o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : BI.pixFormat(top + bottom);
w.element.css("height", "calc(100% - " + gap + ")");
const gap = (top + bottom) > 0 && (top + bottom) < 1 ? `${((top + bottom) * 100).toFixed(1)}%` : pixFormat(top + bottom);
w.element.css("height", `calc(100% - ${gap})`);
}
return w;
},
}
populate: function (items) {
BI.InlineLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.inline", BI.InlineLayout);
}

55
src/core/wrapper/layout/layout.lattice.js

@ -1,43 +1,52 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, sum } from "../../2.base";
/**
* 靠左对齐的自由浮动布局
* @class BI.LatticeLayout
* @extends BI.Layout
* @class LatticeLayout
* @extends Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.LatticeLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.LatticeLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-lattice clearfix"
@shortcut()
export class LatticeLayout extends Layout {
static xtype = "bi.lattice";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-lattice clearfix",
// columnSize: [0.2, 0.2, 0.6],
});
},
render: function () {
BI.LatticeLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
}
render() {
super.render(...arguments);
const self = this, o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
self.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var o = this.options;
var w = BI.LatticeLayout.superclass._addElement.apply(this, arguments);
_addElement(i, item) {
const o = this.options;
const w = super._addElement(...arguments);
let width;
if (o.columnSize && o.columnSize[i]) {
var width = o.columnSize[i] / BI.sum(o.columnSize) * 100 + "%";
width = `${o.columnSize[i] / sum(o.columnSize) * 100}%`;
} else {
var width = 1 / this.options.items.length * 100 + "%";
width = `${1 / this.options.items.length * 100}%`;
}
w.element.css({position: "relative", float: "left", width: width});
w.element.css({ position: "relative", "float": "left", width });
return w;
},
}
populate: function (items) {
BI.LatticeLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.lattice", BI.LatticeLayout);
}

95
src/core/wrapper/layout/layout.table.js

@ -1,36 +1,46 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, range, isArray, map, reduce, isEmpty, formatEL } from "../../2.base";
import { Widget } from "../../4.widget";
import { HorizontalAlign, VerticalAlign } from "../../constant";
/**
* 上下的高度固定/左右的宽度固定中间的高度/宽度自适应
*
* @class BI.TableLayout
* @extends BI.Layout
* @class TableLayout
* @extends Layout
*/
BI.TableLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.TableLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class TableLayout extends Layout {
static xtype = "bi.table";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-t",
// scrolly: true,
columnSize: [],
rowSize: [],
horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch,
horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: VerticalAlign.Stretch,
// rowSize: 30, // or [30,30,30]
hgap: 0,
vgap: 0,
items: [],
});
},
render: function () {
BI.TableLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
}
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
var columnSize = o.columnSize.length > 0 ? o.columnSize : BI.range(items[0].length).fill("");
const columnSize = o.columnSize.length > 0 ? o.columnSize : range(items[0].length).fill("");
if (columnSize.length > 0) {
var template = [];
for (var i = 0; i < columnSize.length; i++) {
const template = [];
for (let i = 0; i < columnSize.length; i++) {
if (columnSize[i] === "") {
template.push("auto");
} else if (columnSize[i] === "fill") {
@ -41,9 +51,7 @@ BI.TableLayout = BI.inherit(BI.Layout, {
}
this.element.css({
"grid-template-columns": template.join(" "),
"grid-template-rows": BI.isArray(o.rowSize) ? BI.map(o.rowSize, function (i, size) {
return self._optimiseGap(size);
}).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
"grid-template-rows": isArray(o.rowSize) ? map(o.rowSize, (i, size) => this._optimiseGap(size)).join(" ") : range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
"grid-row-gap": this._optimiseGap(o.vgap),
"grid-column-gap": this._optimiseGap(o.hgap),
});
@ -51,15 +59,15 @@ BI.TableLayout = BI.inherit(BI.Layout, {
return {
type: "bi.default",
ref: function (_ref) {
self.layout = _ref;
ref(_ref) {
this.layout = _ref;
},
items: this._formatItems(items),
};
},
}
_formatItems: function (items) {
var o = this.options, self = this;
_formatItems(items) {
const o = this.options;
function firstElement (item, cls) {
item.addClass(cls);
@ -74,9 +82,9 @@ BI.TableLayout = BI.inherit(BI.Layout, {
}
function first (item, cls) {
if (item instanceof BI.Widget) {
if (item instanceof Widget) {
return firstElement(item.element, cls);
} else if (item.el instanceof BI.Widget) {
} else if (item.el instanceof Widget) {
return firstElement(item.el.element, cls);
} else if (item.el) {
return firstObject(item.el, cls);
@ -91,30 +99,27 @@ BI.TableLayout = BI.inherit(BI.Layout, {
columnSize: ["fill"],
horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign,
items: [BI.formatEL(item)],
items: [formatEL(item)],
};
}
return BI.reduce(items, function (rowItems, result, rowIndex) {
return result.concat(BI.map(rowItems, function (colIndex, item) {
var cls = self.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1);
if (BI.isEmpty(item)) {
return first(wrapLayout({
type: "bi.layout",
}), cls);
}
return reduce(items, (rowItems, result, rowIndex) => result.concat(map(rowItems, (colIndex, item) => {
const cls = this.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1);
if (isEmpty(item)) {
return first(wrapLayout({
type: "bi.layout",
}), cls);
}
return first(wrapLayout(item), cls);
}));
}, []);
},
return first(wrapLayout(item), cls);
})), []);
}
resize: function () {
resize() {
// console.log("table布局不需要resize");
},
}
populate: function (items) {
populate(items) {
this.layout.populate(this._formatItems(items));
},
});
BI.shortcut("bi.table", BI.TableLayout);
}
}

244
src/core/wrapper/layout/layout.tape.js

@ -1,13 +1,22 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, compact, each, isEmptyObject, isNumber, isNull, any, backAny } from "../../2.base";
import { _lazyCreateWidget } from "../../5.inject";
import { HorizontalAlign, VerticalAlign } from "../../constant";
/**
* 水平tape布局
* @class BI.HTapeLayout
* @extends BI.Layout
* @class HTapeLayout
* @extends Layout
*/
BI.HTapeLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.HTapeLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class HTapeLayout extends Layout {
static xtype = "bi.htape";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-h-tape",
verticalAlign: BI.VerticalAlign.Top,
verticalAlign: VerticalAlign.Top,
hgap: 0,
vgap: 0,
lgap: 0,
@ -15,37 +24,39 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
tgap: 0,
bgap: 0,
columnSize: [],
items: []
items: [],
});
},
render: function () {
BI.HTapeLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
}
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
addItem: function (item) {
addItem(item) {
// do nothing
throw new Error("不能添加子组件");
},
}
stroke: function (items) {
var self = this, o = this.options;
items = BI.compact(items);
BI.each(items, function (i, item) {
if (BI.isEmptyObject(item)) {
stroke(items) {
const o = this.options;
items = compact(items);
each(items, (i, item) => {
let w;
if (isEmptyObject(item)) {
return;
}
if (!self.hasWidget(self._getChildName(i))) {
var w = BI._lazyCreateWidget(item);
self.addWidget(self._getChildName(i), w);
if (!this.hasWidget(this._getChildName(i))) {
w = _lazyCreateWidget(item);
this.addWidget(this._getChildName(i), w);
} else {
w = self.getWidgetByName(self._getChildName(i));
w = this.getWidgetByName(this._getChildName(i));
}
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = item.width;
@ -53,90 +64,92 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
}
w.element.css({
position: "absolute",
top: self._optimiseGap(self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap),
bottom: self._optimiseGap(self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap),
width: BI.isNumber(columnSize) ? self._optimiseGap(columnSize) : ""
top: this._optimiseGap(this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.tgap),
bottom: this._optimiseGap(this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.innerVgap + o.vgap + o.bgap),
width: isNumber(columnSize) ? this._optimiseGap(columnSize) : "",
});
if (o.verticalAlign === BI.VerticalAlign.Middle) {
if (o.verticalAlign === VerticalAlign.Middle) {
w.element.css({
marginTop: "auto",
marginBottom: "auto"
marginBottom: "auto",
});
} else if (o.verticalAlign === BI.VerticalAlign.Bottom) {
} else if (o.verticalAlign === VerticalAlign.Bottom) {
w.element.css({
marginTop: "auto"
marginTop: "auto",
});
}
});
var left = {}, right = {};
const left = {}, right = {};
left[0] = o.innerHgap;
right[items.length - 1] = o.innerHgap;
BI.any(items, function (i, item) {
if (BI.isEmptyObject(item)) {
any(items, (i, item) => {
if (isEmptyObject(item)) {
return true;
}
var w = self.getWidgetByName(self._getChildName(i));
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
const w = this.getWidgetByName(this._getChildName(i));
let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = item.width;
}
}
if (BI.isNull(left[i])) {
var preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width;
left[i] = left[i - 1] + preColumnSize + self._optimiseItemLgap(items[i - 1]) + self._optimiseItemRgap(items[i - 1]) + 2 * self._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap;
if (isNull(left[i])) {
const preColumnSize = o.columnSize.length > 0 ? o.columnSize[i - 1] : items[i - 1].width;
left[i] = left[i - 1] + preColumnSize + this._optimiseItemLgap(items[i - 1]) + this._optimiseItemRgap(items[i - 1]) + 2 * this._optimiseItemHgap(items[i - 1]) + o.hgap + o.lgap + o.rgap;
}
w.element.css({
left: self._optimiseGap(left[i] + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.hgap + o.lgap)
left: this._optimiseGap(left[i] + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) + o.hgap + o.lgap),
});
if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") {
if (isNull(columnSize) || columnSize === "" || columnSize === "fill") {
return true;
}
});
BI.backAny(items, function (i, item) {
if (BI.isEmptyObject(item)) {
backAny(items, (i, item) => {
if (isEmptyObject(item)) {
return true;
}
var w = self.getWidgetByName(self._getChildName(i));
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (BI.isNull(right[i])) {
var nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width;
right[i] = right[i + 1] + nextColumnSize + self._optimiseItemLgap(items[i + 1]) + self._optimiseItemRgap(items[i + 1]) + 2 * self._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap;
const w = this.getWidgetByName(this._getChildName(i));
const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (isNull(right[i])) {
const nextColumnSize = o.columnSize.length > 0 ? o.columnSize[i + 1] : items[i + 1].width;
right[i] = right[i + 1] + nextColumnSize + this._optimiseItemLgap(items[i + 1]) + this._optimiseItemRgap(items[i + 1]) + 2 * this._optimiseItemHgap(items[i + 1]) + o.hgap + o.lgap + o.rgap;
}
w.element.css({
right: self._optimiseGap(right[i] + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.hgap + o.rgap)
right: this._optimiseGap(right[i] + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) + o.hgap + o.rgap),
});
if (BI.isNull(columnSize) || columnSize === "" || columnSize === "fill") {
if (isNull(columnSize) || columnSize === "" || columnSize === "fill") {
return true;
}
});
},
}
update: function (opt) {
update(opt) {
return this.forceUpdate(opt);
},
}
populate: function (items) {
BI.HTapeLayout.superclass.populate.apply(this, arguments);
populate(items) {
super.populate(...arguments);
this._mount();
}
});
BI.shortcut("bi.htape", BI.HTapeLayout);
}
/**
* 垂直tape布局
* @class BI.VTapeLayout
* @extends BI.Layout
* @class VTapeLayout
* @extends Layout
*/
BI.VTapeLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.VTapeLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class VTapeLayout extends Layout {
static xtype = "bi.vtape";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-v-tape",
horizontalAlign: BI.HorizontalAlign.Left,
horizontalAlign: HorizontalAlign.Left,
hgap: 0,
vgap: 0,
lgap: 0,
@ -144,33 +157,35 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
tgap: 0,
bgap: 0,
rowSize: [],
items: []
items: [],
});
},
render: function () {
BI.VTapeLayout.superclass.render.apply(this, arguments);
}
render() {
super.render(...arguments);
this.populate(this.options.items);
},
}
addItem: function (item) {
addItem(item) {
// do nothing
throw new Error("不能添加子组件");
},
}
stroke: function (items) {
var self = this, o = this.options;
items = BI.compact(items);
BI.each(items, function (i, item) {
if (BI.isEmptyObject(item)) {
stroke(items) {
const o = this.options;
items = compact(items);
each(items, (i, item) => {
let w;
if (isEmptyObject(item)) {
return;
}
if (!self.hasWidget(self._getChildName(i))) {
var w = BI._lazyCreateWidget(item);
self.addWidget(self._getChildName(i), w);
if (!this.hasWidget(this._getChildName(i))) {
w = _lazyCreateWidget(item);
this.addWidget(this._getChildName(i), w);
} else {
w = self.getWidgetByName(self._getChildName(i));
w = this.getWidgetByName(this._getChildName(i));
}
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = item.height;
@ -178,76 +193,75 @@ BI.VTapeLayout = BI.inherit(BI.Layout, {
}
w.element.css({
position: "absolute",
left: self._optimiseGap(self._optimiseItemLgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap),
right: self._optimiseGap(self._optimiseItemRgap(item) + self._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap),
height: BI.isNumber(rowSize) ? self._optimiseGap(rowSize) : ""
left: this._optimiseGap(this._optimiseItemLgap(item) + this._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.lgap),
right: this._optimiseGap(this._optimiseItemRgap(item) + this._optimiseItemHgap(item) + o.innerHgap + o.hgap + o.rgap),
height: isNumber(rowSize) ? this._optimiseGap(rowSize) : "",
});
if (o.horizontalAlign === BI.HorizontalAlign.Center) {
if (o.horizontalAlign === HorizontalAlign.Center) {
w.element.css({
marginLeft: "auto",
marginRight: "auto"
marginRight: "auto",
});
} else if (o.horizontalAlign === BI.HorizontalAlign.Right) {
} else if (o.horizontalAlign === HorizontalAlign.Right) {
w.element.css({
marginLeft: "auto"
marginLeft: "auto",
});
}
});
var top = {}, bottom = {};
const top = {}, bottom = {};
top[0] = o.innerVgap;
bottom[items.length - 1] = o.innerVgap;
BI.any(items, function (i, item) {
if (BI.isEmptyObject(item)) {
any(items, (i, item) => {
if (isEmptyObject(item)) {
return true;
}
var w = self.getWidgetByName(self._getChildName(i));
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
const w = this.getWidgetByName(this._getChildName(i));
let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = item.height;
}
}
if (BI.isNull(top[i])) {
var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
if (isNull(top[i])) {
const preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
top[i] = top[i - 1] + preRowSize + this._optimiseItemTgap(items[i - 1]) + this._optimiseItemBgap(items[i - 1]) + 2 * this._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
}
w.element.css({
top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap)
top: this._optimiseGap(top[i] + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.vgap + o.tgap),
});
if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") {
if (isNull(rowSize) || rowSize === "" || rowSize === "fill") {
return true;
}
});
BI.backAny(items, function (i, item) {
if (BI.isEmptyObject(item)) {
backAny(items, (i, item) => {
if (isEmptyObject(item)) {
return true;
}
var w = self.getWidgetByName(self._getChildName(i));
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (BI.isNull(bottom[i])) {
var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
const w = this.getWidgetByName(this._getChildName(i));
const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (isNull(bottom[i])) {
const nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
bottom[i] = bottom[i + 1] + nextRowSize + this._optimiseItemTgap(items[i + 1]) + this._optimiseItemBgap(items[i + 1]) + 2 * this._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
}
w.element.css({
bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap)
bottom: this._optimiseGap(bottom[i] + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.vgap + o.bgap),
});
if (BI.isNull(rowSize) || rowSize === "" || rowSize === "fill") {
if (isNull(rowSize) || rowSize === "" || rowSize === "fill") {
return true;
}
});
},
}
update: function (opt) {
update(opt) {
return this.forceUpdate(opt);
},
}
populate: function (items) {
BI.VTapeLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.vtape", BI.VTapeLayout);
}

134
src/core/wrapper/layout/layout.td.js

@ -1,45 +1,56 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, isOdd, some, isNumber, isNull } from "../../2.base";
import { Widget } from "../../4.widget";
import { _lazyCreateWidget } from "../../5.inject";
import { HorizontalAlign, VerticalAlign } from "../../constant";
/**
* td布局
* @class BI.TdLayout
* @extends BI.Layout
* @class TdLayout
* @extends Layout
*/
BI.TdLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class TdLayout extends Layout {
static xtype = "bi.td";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-td",
columnSize: [],
rowSize: [],
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: VerticalAlign.Middle,
horizontalAlign: HorizontalAlign.Stretch,
hgap: 0,
vgap: 0,
tgap: 0,
bgap: 0,
lgap: 0,
rgap: 0,
items: []
items: [],
});
},
render: function () {
BI.TdLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
this.$table = BI.Widget._renderEngine.createElement("<table>").attr({cellspacing: 0, cellpadding: 0}).css({
}
render() {
super.render(...arguments);
const o = this.options;
this.$table = Widget._renderEngine.createElement("<table>").attr({ cellspacing: 0, cellpadding: 0 }).css({
position: "relative",
width: (o.horizontalAlign === BI.HorizontalAlign.Center || o.horizontalAlign === BI.HorizontalAlign.Stretch) ? "100%" : "auto",
height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto",
width: (o.horizontalAlign === HorizontalAlign.Center || o.horizontalAlign === HorizontalAlign.Stretch) ? "100%" : "auto",
height: (o.verticalAlign !== VerticalAlign.Top) ? "100%" : "auto",
"border-spacing": "0px",
border: "none",
"border-collapse": "separate"
"border-collapse": "separate",
});
this.rows = 0;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (idx, arr) {
var o = this.options;
_addElement(idx, arr) {
const o = this.options;
function firstElement (item, row, col) {
if (row === 0) {
@ -48,28 +59,28 @@ BI.TdLayout = BI.inherit(BI.Layout, {
if (col === 0) {
item.addClass("first-col");
}
item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
item.addClass(isOdd(row + 1) ? "odd-row" : "even-row");
item.addClass(isOdd(col + 1) ? "odd-col" : "even-col");
item.addClass("center-element");
}
function firstObject (item, row, col) {
var cls = "";
let cls = "";
if (row === 0) {
cls += " first-row";
}
if (col === 0) {
cls += " first-col";
}
BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
item.cls = (item.cls || "") + cls + " center-element";
isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
item.cls = `${(item.cls || "") + cls} center-element`;
}
function first (item, row, col) {
if (item instanceof BI.Widget) {
if (item instanceof Widget) {
firstElement(item.element, row, col);
} else if (item.el instanceof BI.Widget) {
} else if (item.el instanceof Widget) {
firstElement(item.el.element, row, col);
} else if (item.el) {
firstObject(item.el, row, col);
@ -78,30 +89,30 @@ BI.TdLayout = BI.inherit(BI.Layout, {
}
}
var height = BI.isNumber(o.rowSize) ? this._optimiseGap(o.rowSize) : (o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx]));
var tr = BI._lazyCreateWidget({
const height = isNumber(o.rowSize) ? this._optimiseGap(o.rowSize) : (o.rowSize[idx] === "" ? this._optimiseGap(1) : this._optimiseGap(o.rowSize[idx]));
const tr = _lazyCreateWidget({
type: "bi.default",
tagName: "tr",
height: height,
height,
css: {
"max-height": height,
"min-height": height
}
"min-height": height,
},
});
for (var i = 0; i < arr.length; i++) {
var w = BI._lazyCreateWidget(arr[i]);
if (o.verticalAlign === BI.VerticalAlign.Stretch) {
var top = o.vgap + o.tgap + this._optimiseItemTgap(arr[i]) + this._optimiseItemVgap(arr[i]),
for (let i = 0; i < arr.length; i++) {
const w = _lazyCreateWidget(arr[i]);
if (o.verticalAlign === VerticalAlign.Stretch) {
const top = o.vgap + o.tgap + this._optimiseItemTgap(arr[i]) + this._optimiseItemVgap(arr[i]),
bottom = o.vgap + o.bgap + this._optimiseItemBgap(arr[i]) + this._optimiseItemVgap(arr[i]);
w.element.css("height", "calc(100% - " + this._optimiseGap(top + bottom) + ")");
w.element.css("height", `calc(100% - ${this._optimiseGap(top + bottom)})`);
}
w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
var item = arr[i];
w.element.css({ position: "relative", top: "0", left: "0", margin: "0px auto" });
const item = arr[i];
this._handleGap(w, item, i);
first(w, this.rows++, i);
var width = "";
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
let width = "";
const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize > 0) {
width = this._optimiseGap(columnSize + (i === 0 ? o.hgap : 0) + o.hgap + o.lgap + o.rgap);
}
@ -109,20 +120,21 @@ BI.TdLayout = BI.inherit(BI.Layout, {
if (o.columnSize.length > 0) {
return o.columnSize.indexOf("fill") >= 0;
}
return BI.some(arr, function (i, item) {
return some(arr, (i, item) => {
if (item.width === "fill") {
return true;
}
});
}
if ((BI.isNull(columnSize) || columnSize === "") && hasFill()) {
if ((isNull(columnSize) || columnSize === "") && hasFill()) {
width = 2;
}
var td = BI._lazyCreateWidget({
const td = _lazyCreateWidget({
type: "bi.default",
width: width,
width,
tagName: "td",
items: [w]
items: [w],
});
// 对于表现为td的元素设置最大宽度,有几点需要注意
// 1、由于直接对td设置最大宽度是在规范中未定义的, 所以要使用类似td:firstChild来迂回实现
@ -131,7 +143,7 @@ BI.TdLayout = BI.inherit(BI.Layout, {
if (columnSize > 0) {
td.element.css({
"max-width": width,
"min-width": width
"min-width": width,
});
}
td.element.css({
@ -139,30 +151,30 @@ BI.TdLayout = BI.inherit(BI.Layout, {
"vertical-align": o.verticalAlign,
margin: "0",
padding: "0",
border: "none"
border: "none",
});
tr.addItem(td);
}
this.addWidget(this._getChildName(idx), tr);
return tr;
},
}
appendFragment: function (frag) {
appendFragment(frag) {
this.$table.append(frag);
this.element.append(this.$table);
},
}
resize: function () {
resize() {
// console.log("td布局不需要resize");
},
}
update: function (opt) {
update(opt) {
return this.forceUpdate(opt);
},
}
populate: function (items) {
BI.TdLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.td", BI.TdLayout);
}

63
src/core/wrapper/layout/layout.vertical.js

@ -1,54 +1,63 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction } from "../../2.base";
import { HorizontalAlign } from "../../constant";
/**
* 垂直布局
* @class BI.VerticalLayout
* @extends BI.Layout
* @class VerticalLayout
* @extends Layout
*/
BI.VerticalLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.VerticalLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class VerticalLayout extends Layout {
static xtype = "bi.vertical";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-v",
horizontalAlign: BI.HorizontalAlign.Stretch,
horizontalAlign: HorizontalAlign.Stretch,
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0,
scrolly: true
scrolly: true,
});
},
render: function () {
BI.VerticalLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
}
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
_addElement: function (i, item) {
var o = this.options;
var w = BI.VerticalLayout.superclass._addElement.apply(this, arguments);
_addElement(i, item) {
const o = this.options;
const w = super._addElement(...arguments);
w.element.css({
position: "relative"
position: "relative",
});
this._handleGap(w, item, null, i);
if (o.horizontalAlign === BI.HorizontalAlign.Center) {
if (o.horizontalAlign === HorizontalAlign.Center) {
w.element.css({
marginLeft: "auto",
marginRight: "auto"
marginRight: "auto",
});
} else if (o.horizontalAlign === BI.HorizontalAlign.Right) {
} else if (o.horizontalAlign === HorizontalAlign.Right) {
w.element.css({
marginLeft: "auto"
marginLeft: "auto",
});
}
return w;
},
}
populate: function (items) {
BI.VerticalLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.vertical", BI.VerticalLayout);
}

163
src/core/wrapper/layout/layout.window.js

@ -1,11 +1,20 @@
import { shortcut } from "../../decorator";
import { Layout } from "../layout";
import { extend, isFunction, makeArray, isNumber, isNull } from "../../2.base";
import { Widget } from "../../4.widget";
import { _lazyCreateWidget } from "../../5.inject";
/**
*
* @class BI.WindowLayout
* @extends BI.Layout
* @class WindowLayout
* @extends Layout
*/
BI.WindowLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.WindowLayout.superclass.props.apply(this, arguments), {
@shortcut()
export class WindowLayout extends Layout {
static xtype = "bi.window";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-window",
columns: 3,
rows: 2,
@ -17,30 +26,31 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
bgap: 0,
columnSize: [],
rowSize: [],
items: []
items: [],
});
},
render: function () {
BI.WindowLayout.superclass.render.apply(this, arguments);
var self = this, o = this.options;
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
self.populate(newValue);
}
render() {
super.render(...arguments);
const o = this.options;
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items;
this.populate(items);
},
}
addItem: function (item) {
addItem(item) {
// do nothing
throw new Error("不能添加子组件");
},
}
stroke: function (items) {
var o = this.options, self = this;
if (BI.isNumber(o.rowSize)) {
o.rowSize = BI.makeArray(o.items.length, 1 / o.items.length);
stroke(items) {
const o = this.options;
if (isNumber(o.rowSize)) {
o.rowSize = makeArray(o.items.length, 1 / o.items.length);
}
if (BI.isNumber(o.columnSize)) {
o.columnSize = BI.makeArray(o.items[0].length, 1 / o.items[0].length);
if (isNumber(o.columnSize)) {
o.columnSize = makeArray(o.items[0].length, 1 / o.items[0].length);
}
function firstElement (item, cls) {
@ -56,9 +66,9 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
}
function first (item, row, col) {
if (item instanceof BI.Widget) {
if (item instanceof Widget) {
firstElement(item.element, row, col);
} else if (item.el instanceof BI.Widget) {
} else if (item.el instanceof Widget) {
firstElement(item.el.element, row, col);
} else if (item.el) {
firstObject(item.el, row, col);
@ -67,108 +77,111 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
}
}
for (var i = 0; i < o.rows; i++) {
for (var j = 0; j < o.columns; j++) {
for (let i = 0; i < o.rows; i++) {
for (let j = 0; j < o.columns; j++) {
if (!o.items[i][j]) {
throw new Error("构造错误", o.items);
}
if (!this.hasWidget(this._getChildName(i + "_" + j))) {
var w = BI._lazyCreateWidget(o.items[i][j]);
w.element.css({position: "absolute"});
this.addWidget(this._getChildName(i + "_" + j), w);
if (!this.hasWidget(this._getChildName(`${i}_${j}`))) {
const w = _lazyCreateWidget(o.items[i][j]);
w.element.css({ position: "absolute" });
this.addWidget(this._getChildName(`${i}_${j}`), w);
}
}
}
var left = {}, right = {}, top = {}, bottom = {};
const left = {}, right = {}, top = {}, bottom = {};
left[0] = 0;
top[0] = 0;
right[o.columns - 1] = 0;
bottom[o.rows - 1] = 0;
// 从上到下
for (var i = 0; i < o.rows; i++) {
for (var j = 0; j < o.columns; j++) {
var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
if (BI.isNull(top[i])) {
for (let i = 0; i < o.rows; i++) {
for (let j = 0; j < o.columns; j++) {
const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
if (isNull(top[i])) {
top[i] = top[i - 1] + (o.rowSize[i - 1] < 1 ? o.rowSize[i - 1] : o.rowSize[i - 1] + o.vgap + o.bgap);
}
var t = this._optimiseGap(top[i] + o.vgap + o.tgap), h = "";
if (BI.isNumber(o.rowSize[i])) {
const t = this._optimiseGap(top[i] + o.vgap + o.tgap);
let h = "";
if (isNumber(o.rowSize[i])) {
h = this._optimiseGap(o.rowSize[i]);
}
wi.element.css({top: t, height: h});
first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
wi.element.css({ top: t, height: h });
first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
}
if (!BI.isNumber(o.rowSize[i])) {
if (!isNumber(o.rowSize[i])) {
break;
}
}
// 从下到上
for (var i = o.rows - 1; i >= 0; i--) {
for (var j = 0; j < o.columns; j++) {
var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
if (BI.isNull(bottom[i])) {
for (let i = o.rows - 1; i >= 0; i--) {
for (let j = 0; j < o.columns; j++) {
const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
if (isNull(bottom[i])) {
bottom[i] = bottom[i + 1] + (o.rowSize[i + 1] < 1 ? o.rowSize[i + 1] : o.rowSize[i + 1] + o.vgap + o.tgap);
}
var b = this._optimiseGap(bottom[i] + o.vgap + o.bgap), h = "";
if (BI.isNumber(o.rowSize[i])) {
const b = this._optimiseGap(bottom[i] + o.vgap + o.bgap);
let h = "";
if (isNumber(o.rowSize[i])) {
h = this._optimiseGap(o.rowSize[i]);
}
wi.element.css({bottom: b, height: h});
first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
wi.element.css({ bottom: b, height: h });
first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
}
if (!BI.isNumber(o.rowSize[i])) {
if (!isNumber(o.rowSize[i])) {
break;
}
}
// 从左到右
for (var j = 0; j < o.columns; j++) {
for (var i = 0; i < o.rows; i++) {
var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
if (BI.isNull(left[j])) {
for (let j = 0; j < o.columns; j++) {
for (let i = 0; i < o.rows; i++) {
const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
if (isNull(left[j])) {
left[j] = left[j - 1] + (o.columnSize[j - 1] < 1 ? o.columnSize[j - 1] : o.columnSize[j - 1] + o.hgap + o.rgap);
}
var l = this._optimiseGap(left[j] + o.hgap + o.lgap), w = "";
if (BI.isNumber(o.columnSize[j])) {
const l = this._optimiseGap(left[j] + o.hgap + o.lgap);
let w = "";
if (isNumber(o.columnSize[j])) {
w = this._optimiseGap(o.columnSize[j]);
}
wi.element.css({left: l, width: w});
first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
wi.element.css({ left: l, width: w });
first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
}
if (!BI.isNumber(o.columnSize[j])) {
if (!isNumber(o.columnSize[j])) {
break;
}
}
// 从右到左
for (var j = o.columns - 1; j >= 0; j--) {
for (var i = 0; i < o.rows; i++) {
var wi = this.getWidgetByName(this._getChildName(i + "_" + j));
if (BI.isNull(right[j])) {
for (let j = o.columns - 1; j >= 0; j--) {
for (let i = 0; i < o.rows; i++) {
const wi = this.getWidgetByName(this._getChildName(`${i}_${j}`));
if (isNull(right[j])) {
right[j] = right[j + 1] + (o.columnSize[j + 1] < 1 ? o.columnSize[j + 1] : o.columnSize[j + 1] + o.hgap + o.lgap);
}
var r = this._optimiseGap(right[j] + o.hgap + o.rgap), w = "";
if (BI.isNumber(o.columnSize[j])) {
const r = this._optimiseGap(right[j] + o.hgap + o.rgap);
let w = "";
if (isNumber(o.columnSize[j])) {
w = this._optimiseGap(o.columnSize[j]);
}
wi.element.css({right: r, width: w});
first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
wi.element.css({ right: r, width: w });
first(wi, this.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
}
if (!BI.isNumber(o.columnSize[j])) {
if (!isNumber(o.columnSize[j])) {
break;
}
}
},
}
resize: function () {
resize() {
// console.log("window布局不需要resize");
},
}
update: function (opt) {
update(opt) {
return this.forceUpdate(opt);
},
}
populate: function (items) {
BI.WindowLayout.superclass.populate.apply(this, arguments);
populate(...args) {
super.populate(...args);
this._mount();
}
});
BI.shortcut("bi.window", BI.WindowLayout);
}

Loading…
Cancel
Save