Browse Source

删除自适应布局

master
guy 8 years ago
parent
commit
3666860451
  1. 2663
      bi/widget.js
  2. 4
      demo/js/config/widget.js
  3. 13
      demo/js/widget/demo.interactivearrangement.js
  4. 16
      docs/demo.js
  5. 2663
      docs/widget.js
  6. 499
      src/widget/adaptivearrangement/adaptivearrangement.js
  7. 6
      src/widget/arrangement/arrangement.block.js
  8. 6
      src/widget/arrangement/arrangement.droppable.js
  9. 2021
      src/widget/arrangement/arrangement.js
  10. 27
      src/widget/interactivearrangement/interactivearrangement.js

2663
bi/widget.js

File diff suppressed because it is too large Load Diff

4
demo/js/config/widget.js

@ -41,4 +41,8 @@ Demo.WIDGET_CONFIG = [{
pId: 4,
text: "bi.relation_view",
value: "demo.relation_view"
}, {
pId: 4,
text: "bi.interactive_arrangement",
value: "demo.interactive_arrangement"
}];

13
demo/js/widget/demo.interactivearrangement.js

@ -0,0 +1,13 @@
/**
* Created by User on 2017/3/22.
*/
Demo.RelationView = BI.inherit(BI.Widget, {
props: {
},
render: function () {
return {
type: "bi.interactive_arrangement",
};
}
});
BI.shortcut("demo.interactive_arrangement", Demo.RelationView);

16
docs/demo.js

@ -3379,6 +3379,10 @@ Demo.COMPONENT_CONFIG = [{
pId: 4,
text: "bi.relation_view",
value: "demo.relation_view"
}, {
pId: 4,
text: "bi.interactive_arrangement",
value: "demo.interactive_arrangement"
}];Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
@ -5945,6 +5949,18 @@ Demo.West.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
BI.shortcut("demo.west", Demo.West);/**
* Created by User on 2017/3/22.
*/
Demo.RelationView = BI.inherit(BI.Widget, {
props: {
},
render: function () {
return {
type: "bi.interactive_arrangement",
};
}
});
BI.shortcut("demo.interactive_arrangement", Demo.RelationView);/**
* Created by User on 2017/3/22.
*/
Demo.MultiSelectCombo = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-multi-select-combo"

2663
docs/widget.js

File diff suppressed because it is too large Load Diff

499
src/widget/adaptivearrangement/adaptivearrangement.js

@ -17,8 +17,6 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
return BI.extend(BI.AdaptiveArrangement.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-adaptive-arrangement",
resizable: true,
isNeedReLayout: true,
isNeedResizeContainer: true,
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE,
items: []
});
@ -30,73 +28,18 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
this.arrangement = BI.createWidget({
type: "bi.arrangement",
element: this,
isNeedReLayout: o.isNeedReLayout,
layoutType: o.layoutType,
items: o.items
});
this.arrangement.on(BI.Arrangement.EVENT_SCROLL, function () {
self.fireEvent(BI.AdaptiveArrangement.EVENT_SCROLL, arguments);
});
if (o.isNeedResizeContainer) {
var isResizing = false;
var needEnd = false;
var height;
var interval;
var startSize;
var resize = function (e, ui) {
if (isResizing) {
return;
}
isResizing = true;
height = ui.size.height;
interval = setInterval(function () {
height += 40;
self.arrangement.setContainerSize({
width: ui.size.width,
height: height
});
self.arrangement.scrollTo({top: height});
}, 300);
};
this.arrangement.container.element.resizable({
handles: "s",
minWidth: 100,
minHeight: 20,
helper: "bi-resizer",
autoHide: true,
start: function (e, ui) {
startSize = BI.clone(ui.size);
},
resize: function (e, ui) {
if (ui.size.height >= startSize.height - 10) {
resize(e, ui);
} else {
interval && clearInterval(interval);
needEnd = true;
}
},
stop: function (e, ui) {
var size = ui.size;
if (isResizing && !needEnd) {
size.height = height;
}
self.arrangement.setContainerSize(ui.size);
needEnd = false;
isResizing = false;
startSize = null;
interval && clearInterval(interval);
self.fireEvent(BI.AdaptiveArrangement.EVENT_RESIZE);
}
});
this._setLayoutType(o.layoutType);
}
this.zIndex = 0;
BI.each(o.items, function (i, item) {
self._initResizable(item.el);
});
this.element.click(function (e) {
this.element.mousedown(function (e) {
BI.each(self.getAllRegions(), function (i, region) {
if (!region.el.element.__isMouseInBounds__(e)) {
region.el.element.removeClass("selected");
@ -129,159 +72,65 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
item.element.mousedown(function () {
self._setSelect(item)
});
o.resizable && item.element.resizable({
handles: "e, s, se",
minWidth: 20,
minHeight: 20,
autoHide: true,
helper: "bi-resizer",
start: function () {
item.element.css("zIndex", ++self.zIndex);
self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE);
},
resize: function (e, ui) {
// self._resize(item.attr("id"), ui.size);
self._resize(item.attr("id"), ui.size);
self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_RESIZE, item.attr("id"), ui.size);
},
stop: function (e, ui) {
self._stopResize(item.attr("id"), ui.size);
self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE, item.attr("id"), ui.size);
self.fireEvent(BI.AdaptiveArrangement.EVENT_RESIZE);
}
});
},
_resize: function (name, size) {
var self = this;
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
this.setRegionSize(name, size);
break;
}
},
_stopResize: function (name, size) {
var self = this;
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
this.setRegionSize(name, {
width: size.width,
height: size.height
});
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
this.setRegionSize(name, size);
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
this.setRegionSize(name, size);
break;
}
},
//检查宽高是否规范
_checkRegionSize: function (name, size) {
var self = this;
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
var newSize = {};
var leftid, rightid, topid, bottomid;
var region = this.getRegionByName(name);
var rs = this.arrangement._getInDirectRelativeRegions(name, ["right"]).right;
var bs = this.arrangement._getInDirectRelativeRegions(name, ["bottom"]).bottom;
if (rs.left.length > 0) {
topid = BI.first(rs.left).id;
bottomid = BI.last(rs.left).id;
}
if (bs.top.length > 0) {
leftid = BI.first(bs.top).id;
rightid = BI.last(bs.top).id;
}
if (this.arrangement._isEqual(region.width, size.width)) {
topid = name;
bottomid = name;
}
if (this.arrangement._isEqual(region.height, size.height)) {
leftid = name;
rightid = name;
}
var tops = topid ? this.getDirectRelativeRegions(topid, ["top"]).top : [];
var bottoms = bottomid ? this.getDirectRelativeRegions(bottomid, ["bottom"]).bottom : [];
var lefts = leftid ? this.getDirectRelativeRegions(leftid, ["left"]).left : [];
var rights = rightid ? this.getDirectRelativeRegions(rightid, ["right"]).right : [];
if (region.width !== size.width) {
if (rights.length === 0) {//最右边的组件不能调整宽度
newSize.width = region.width;
} else {
var finded = BI.find(tops.concat(bottoms), function (i, r) {
r = self.getRegionByName(r.id);
return Math.abs(size.width + region.left - (r.left + r.width)) <= 3;
});
if (finded) {
finded = this.getRegionByName(finded.id);
newSize.width = finded.left + finded.width - region.left;
} else {
newSize.width = size.width;
}
}
} else {
newSize.width = size.width;
}
if (region.height !== size.height) {
if (bottoms.length === 0) {
newSize.height = region.height;
} else {
var finded = BI.find(lefts.concat(rights), function (i, r) {
r = self.getRegionByName(r.id);
return Math.abs(size.height + region.top - (r.top + r.height)) <= 3;
});
if (finded) {
finded = this.getRegionByName(finded.id);
newSize.height = finded.top + finded.height - region.top;
} else {
newSize.height = size.height;
}
}
} else {
newSize.height = size.height;
}
return newSize;
case BI.Arrangement.LAYOUT_TYPE.FREE:
return size;
case BI.Arrangement.LAYOUT_TYPE.GRID:
return size;
}
},
// o.resizable && item.element.resizable({
// handles: "e, s, se",
// minWidth: 20,
// minHeight: 20,
// autoHide: true,
// helper: "bi-resizer",
// start: function () {
// item.element.css("zIndex", ++self.zIndex);
// self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE);
// },
// resize: function (e, ui) {
// // self._resize(item.attr("id"), ui.size);
// self._resize(item.attr("id"), e, ui.size, ui.position);
// },
// stop: function (e, ui) {
// self._stopResize(item.attr("id"), ui.size);
// self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE, item.attr("id"), ui.size);
// self.fireEvent(BI.AdaptiveArrangement.EVENT_RESIZE);
// }
// });
},
// _resize: function (name, e, size, position) {
// var self = this;
// this.scrollInterval(e, false, true, function (changedSize) {
// size.width += changedSize.offsetX;
// size.height += changedSize.offsetY;
// var containerWidth = self.arrangement.container.element.width();
// var containerHeight = self.arrangement.container.element.height();
// self.arrangement.container.element.width(containerWidth + changedSize.offsetX);
// self.arrangement.container.element.height(containerHeight + changedSize.offsetY);
// switch (self.getLayoutType()) {
// case BI.Arrangement.LAYOUT_TYPE.FREE:
// break;
// case BI.Arrangement.LAYOUT_TYPE.GRID:
// self.setRegionSize(name, size);
// break;
// }
// self.fireEvent(BI.AdaptiveArrangement.EVENT_ELEMENT_RESIZE, name, size);
// });
// },
//
// _stopResize: function (name, size) {
// var self = this;
// this.scrollEnd();
// switch (this.getLayoutType()) {
// case BI.Arrangement.LAYOUT_TYPE.FREE:
// this.setRegionSize(name, size);
// break;
// case BI.Arrangement.LAYOUT_TYPE.GRID:
// this.setRegionSize(name, size);
// break;
// }
// },
_getScrollOffset: function () {
return this.arrangement._getScrollOffset();
},
_setLayoutType: function (type) {
try {
//BI.nextTick(function () {
switch (type) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
$(">.ui-resizable-s", this.arrangement.container.element).css("zIndex", "");
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
$(">.ui-resizable-s", this.arrangement.container.element).css("zIndex", "-1");
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
$(">.ui-resizable-s", this.arrangement.container.element).css("zIndex", "-1");
break;
}
this.arrangement.container.element.resizable("option", "disabled", type === BI.Arrangement.LAYOUT_TYPE.FREE);
//});
} catch (e) {
}
},
getClientWidth: function () {
return this.arrangement.getClientWidth();
},
@ -290,98 +139,14 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
return this.arrangement.getClientHeight();
},
getDirectRelativeRegions: function (name, direction) {
return this.arrangement.getDirectRelativeRegions(name, direction);
},
addRegion: function (region, position) {
this._initResizable(region.el);
this._setSelect(region.el);
var self = this, flag;
var old = this.arrangement.getAllRegions();
if (BI.isNotNull(this.position)) {
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
var type = this.position.type;
var current = this.position.region;
switch (type) {
case "top-gap":
var t = this.arrangement._getEquivalentRelativeRegions(current.id, ["top"])[0];
current = this.getRegionByName(t.id);
break;
case "bottom-gap":
break;
}
var id = BI.UUID();
var insert = this.position.insert;
if (insert.height > 0) {
var clone = this.arrangement._cloneRegion();
//找到最下面的组件
var occupied = this.arrangement._getRegionOccupied();
var bottomRegions = [];
BI.each(clone, function (i, region) {
if (self.arrangement._isEqual(region.top + region.height, occupied.top + occupied.height)) {
bottomRegions.push(region);
}
});
var bs = this.arrangement._getInDirectRelativeRegions(current.id, ["bottom"]).bottom;
var seen = [current.id];
var bottoms = bs.bottom;
var occ = this.arrangement._getRegionOccupied(bottoms);
clone[id] = BI.extend({}, region, {
left: occ.left,
width: occ.width,
top: current.top + current.height,
height: insert.height
});
while (bottoms.length > 0) {
BI.each(bottoms, function (i, bottom) {
seen.push(bottom.id);
var r = self.getRegionByName(bottom.id);
BI.extend(clone[bottom.id], {
top: r.top + insert.height
});
});
var t = [];
BI.each(bottoms, function (i, bottom) {
var n = self.arrangement._getInDirectRelativeRegions(bottom.id, ["bottom"]).bottom;
BI.each(n.top, function (i, region) {
if (!seen.contains(region.id)) {
seen.push(region.id);
var r = self.getRegionByName(region.id);
BI.extend(clone[region.id], {
height: r.height + insert.height
});
}
});
t = t.concat(n.bottom);
});
t = BI.uniq(t, function (i, region) {
return region.id;
});
bottoms = t;
}
BI.each(bottomRegions, function (i, region) {
if (!seen.contains(region.id)) {
region.height = region.height + insert.height;
}
});
this.arrangement.populate(BI.toArray(clone));
this.arrangement.resize();
flag = true;
}
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
break;
}
this.position = null;
} else {
if (flag = this.arrangement.addRegion(region, position)) {
this._old = old;
}
}
return flag;
},
@ -394,13 +159,12 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
this._old = this.getAllRegions();
this.relayout();
}
return true;
return flag;
},
setRegionSize: function (name, size) {
var flag;
var old = this.getAllRegions();
size = this._checkRegionSize(name, size);
if (flag = this.arrangement.setRegionSize(name, size)) {
this._old = old;
}
@ -409,55 +173,114 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
setPosition: function (position, size) {
var self = this;
var at = this.arrangement.setPosition(position, size);
this.position = null;
if (!at) {
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
if (position.left < 0 || position.top < 0) {
return null;
}
var offset = this.arrangement._getScrollOffset();
position = {
left: position.left + offset.left,
top: position.top + offset.top
};
BI.some(this.getAllRegions(), function (id, region) {
if (self.arrangement._isPositionInBounds(position, region)) {
var at = self.arrangement._positionAt(position, region);
if (at.type === "top-gap" || at.type === "bottom-gap") {
self.arrangement._setArrangeSize({
top: region.top - 8 + (at.type === "bottom-gap" ? region.height : 0),
left: region.left,
width: region.width,
height: 16
});
self.position = {
insert: {
height: (size || {}).height
return this.arrangement.setPosition(position, size);
},
type: at.type,
region: region
setRegionPosition: function (name, position) {
var region = this.getRegionByName(name);
return this.arrangement.setRegionPosition(name, position);
},
setDropPosition: function (position) {
return this.arrangement.setDropPosition(position);
},
scrollInterval: function (e, isBorderScroll, isOverflowScroll, cb) {
var self = this;
var map = {
top: [-1, 0],
bottom: [1, 0],
left: [0, -1],
right: [0, 1]
};
self.arrangement._start();
var clientSize = this.element.bounds();
function scrollTo(direction, callback) {
if (direction === "") {
self.lastActiveRegion = "";
if (self._scrollInterval) {
clearInterval(self._scrollInterval);
self._scrollInterval = null;
}
return;
}
return true;
if (self.lastActiveRegion !== direction) {
self.lastActiveRegion = direction;
if (self._scrollInterval) {
clearInterval(self._scrollInterval);
self._scrollInterval = null;
}
self._scrollInterval = setInterval(function () {
var offset = self._getScrollOffset();
var t = offset.top + map[direction][0] * 40;
var l = offset.left + map[direction][1] * 40;
if (t < 0 || l < 0) {
return;
}
callback({
offsetX: map[direction][1] * 40,
offsetY: map[direction][0] * 40
});
self.scrollTo({
top: t,
left: l
});
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
break;
}, 300);
}
}
cb({
offsetX: 0,
offsetY: 0
});
var offset = this.element.offset();
var p = {
left: e.pageX - offset.left,
top: e.pageY - offset.top
};
//向上滚
if (isBorderScroll && p.top >= 0 && p.top <= 30) {
scrollTo("top", cb)
}
//向下滚
else if (isBorderScroll && p.top >= clientSize.height - 30 && p.top <= clientSize.height) {
scrollTo("bottom", cb)
}
//向左滚
else if (isBorderScroll && p.left >= 0 && p.left <= 30) {
scrollTo("left", cb)
}
//向右滚
else if (isBorderScroll && p.left >= clientSize.width - 30 && p.left <= clientSize.width) {
scrollTo("right", cb)
} else {
if (isOverflowScroll === true) {
if (p.top < 0) {
scrollTo("top", cb);
}
else if (p.top > clientSize.height) {
scrollTo("bottom", cb);
}
else if (p.left < 0) {
scrollTo("left", cb);
}
else if (p.left > clientSize.width) {
scrollTo("right", cb);
} else {
scrollTo("", cb);
}
} else {
scrollTo("", cb);
}
}
return this.position || at;
},
setRegionPosition: function (name, position) {
var region = this.getRegionByName(name);
region.el.element.css("zIndex", ++this.zIndex);
return this.arrangement.setRegionPosition(name, position);
scrollEnd: function () {
this.lastActiveRegion = "";
if (this._scrollInterval) {
clearInterval(this._scrollInterval);
this._scrollInterval = null;
}
},
scrollTo: function (scroll) {
@ -478,7 +301,6 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
setLayoutType: function (type) {
var self = this;
this._setLayoutType(type);
this.arrangement.setLayoutType(type);
},
@ -514,17 +336,6 @@ BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
self._initResizable(item.el);
});
this.arrangement.populate(items);
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
BI.nextTick(function () {
self.arrangement.resize();
});
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
break;
}
}
});
BI.AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE = "AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE";

6
src/widget/arrangement/arrangement.block.js

@ -11,12 +11,6 @@ BI.ArrangementBlock = BI.inherit(BI.Widget, {
return BI.extend(BI.ArrangementBlock.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-arrangement-block bi-mask"
});
},
_init: function () {
BI.ArrangementBlock.superclass._init.apply(this, arguments);
var self = this, o = this.options;
}
});
BI.shortcut('bi.arrangement_block', BI.ArrangementBlock);

6
src/widget/arrangement/arrangement.droppable.js

@ -11,12 +11,6 @@ BI.ArrangementDroppable = BI.inherit(BI.Widget, {
return BI.extend(BI.ArrangementDroppable.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-arrangement-droppable bi-resizer"
});
},
_init: function () {
BI.ArrangementDroppable.superclass._init.apply(this, arguments);
var self = this, o = this.options;
}
});
BI.shortcut('bi.arrangement_droppable', BI.ArrangementDroppable);

2021
src/widget/arrangement/arrangement.js

File diff suppressed because it is too large Load Diff

27
src/widget/interactivearrangement/interactivearrangement.js

@ -12,9 +12,7 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
return BI.extend(BI.InteractiveArrangement.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-interactive-arrangement",
resizable: true,
isNeedReLayout: true,
isNeedResizeContainer: true,
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE,
layoutType: BI.Arrangement.LAYOUT_TYPE.GRID,
items: []
});
},
@ -26,8 +24,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
type: "bi.adaptive_arrangement",
element: this,
resizable: o.resizable,
isNeedReLayout: o.isNeedReLayout,
isNeedResizeContainer: o.isNeedResizeContainer,
layoutType: o.layoutType,
items: o.items
});
@ -439,7 +435,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
var self = this;
this.stopDraw();
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
case BI.Arrangement.LAYOUT_TYPE.FREE:
var other = this._getRegionExcept(name);
var left = this._leftAlign(position, size, other);
@ -473,10 +468,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
}
},
getDirectRelativeRegions: function (name, direction) {
return this.arrangement.getDirectRelativeRegions(name, direction);
},
addRegion: function (region, position) {
this.stopDraw();
return this.arrangement.addRegion(region, position);
@ -496,8 +487,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
this.stopDraw();
if (position.left > 0 && position.top > 0) {
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
position = this.getPosition(null, position, size);
this.draw(position, size);
@ -513,8 +502,6 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
setRegionPosition: function (name, position) {
if (position.left > 0 && position.top > 0) {
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.ADAPTIVE:
break;
case BI.Arrangement.LAYOUT_TYPE.FREE:
position = this.getPosition(name, position);
break;
@ -525,6 +512,18 @@ BI.InteractiveArrangement = BI.inherit(BI.Widget, {
return this.arrangement.setRegionPosition(name, position);
},
setDropPosition: function (position) {
return this.arrangement.setDropPosition(position);
},
scrollInterval: function () {
this.arrangement.scrollInterval.apply(this.arrangement, arguments);
},
scrollEnd: function () {
this.arrangement.scrollEnd.apply(this.arrangement, arguments);
},
scrollTo: function (scroll) {
this.arrangement.scrollTo(scroll);
},

Loading…
Cancel
Save