Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

从fineui中移除arrangement

es6
windy 7 years ago
parent
db99c3f375
commit
a55b628a90
15 changed files with 25 additions and 8427 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      demo/js/config/widget.js
  2. 107
      demo/js/widget/arrangment/demo.adaptive_arrangement.js
  3. 100
      demo/js/widget/arrangment/demo.arrangement.js
  4. 108
      demo/js/widget/arrangment/demo.interactive_arrangement.js
  5. 1936
      dist/bundle.js
  6. 25
      dist/bundle.min.js
  7. 326
      dist/demo.js
  8. 1936
      dist/fineui.js
  9. 25
      dist/fineui.min.js
  10. 1936
      dist/widget.js
  11. 299
      src/widget/adaptivearrangement/adaptivearrangement.js
  12. 16
      src/widget/arrangement/arrangement.block.js
  13. 16
      src/widget/arrangement/arrangement.droppable.js
  14. 1058
      src/widget/arrangement/arrangement.js
  15. 552
      src/widget/interactivearrangement/interactivearrangement.js

12
demo/js/config/widget.js
Unescape View File

@ -214,18 +214,6 @@ Demo.WIDGET_CONFIG = [{
pId: 4, pId: 4,
id: 417, id: 417,
text: "布局" text: "布局"
}, {
pId: 417,
text: "bi.arrangement",
value: "demo.arrangement"
}, {
pId: 417,
text: "bi.adaptive_arrangement",
value: "demo.adaptive_arrangement"
}, {
pId: 417,
text: "bi.interactive_arrangement",
value: "demo.interactive_arrangement"
}, { }, {
pId: 4, pId: 4,
id: 419, id: 419,

107
demo/js/widget/arrangment/demo.adaptive_arrangement.js
Unescape View File

@ -1,107 +0,0 @@
Demo.AdaptiveArrangement = BI.inherit(BI.Widget, {
_createItem: function () {
var self = this;
var id = BI.UUID();
var item = BI.createWidget({
type: "bi.text_button",
id: id,
cls: "layout-bg" + BI.random(1, 8),
value: "点我我就在最上面了",
handler: function () {
// self.arrangement.deleteRegion(id);
}
});
return item;
},
render: function () {
var self = this;
this.arrangement = BI.createWidget({
type: "bi.adaptive_arrangement",
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE,
cls: "bi-border",
width: 800,
height: 400,
items: []
});
var drag = BI.createWidget({
type: "bi.label",
cls: "bi-border",
width: 70,
height: 25,
text: "drag me"
});
drag.element.draggable({
revert: true,
cursorAt: {left: 0, top: 0},
drag: function (e, ui) {
self.arrangement.setPosition({
left: ui.position.left,
top: ui.position.top
}, {
width: 300,
height: 200
});
},
stop: function (e, ui) {
self.arrangement.addRegion({
el: self._createItem()
});
},
helper: function (e) {
var helper = self.arrangement.getHelper();
return helper.element;
}
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: drag,
left: 30,
top: 450
}, {
el: this.arrangement,
left: 30,
top: 30
}, {
el: {
type: "bi.button",
text: "getAllRegions",
height: 25,
handler: function () {
var items = [];
BI.each(self.arrangement.getAllRegions(), function (i, region) {
items.push({
id: region.id,
left: region.left,
top: region.top,
width: region.width,
height: region.height
});
});
BI.Msg.toast(JSON.stringify(items));
}
},
left: 230,
top: 450
}, {
el: {
type: "bi.button",
text: "relayout",
height: 25,
handler: function () {
self.arrangement.relayout();
}
},
left: 330,
top: 450
}]
});
}
});
BI.shortcut("demo.adaptive_arrangement", Demo.AdaptiveArrangement);

100
demo/js/widget/arrangment/demo.arrangement.js
Unescape View File

@ -1,100 +0,0 @@
Demo.Arrangement = BI.inherit(BI.Widget, {
beforeCreate: function () {
this.index = 0;
},
_createItem: function () {
var self = this;
var item = BI.createWidget({
type: "bi.text_button",
id: this.index,
text: "点我删掉",
cls: "layout-bg" + BI.random(1, 8),
handler: function () {
self.arrangement.deleteRegion(this.attr("id"));
}
});
this.index++;
return item;
},
render: function () {
var self = this;
this.arrangement = BI.createWidget({
type: "bi.arrangement",
layoutType: BI.Arrangement.LAYOUT_TYPE.GRID,
cls: "bi-border",
width: 800,
height: 400,
items: []
});
var drag = BI.createWidget({
type: "bi.label",
cls: "bi-border",
width: 70,
height: 25,
text: "drag me"
});
drag.element.draggable({
revert: true,
cursorAt: {left: 0, top: 0},
drag: function (e, ui) {
self.arrangement.setPosition({
left: ui.position.left,
top: ui.position.top
}, {
width: 300,
height: 200
});
},
stop: function (e, ui) {
self.arrangement.addRegion({
el: self._createItem()
});
},
helper: function (e) {
var helper = self.arrangement.getHelper();
return helper.element;
}
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: drag,
left: 30,
top: 450
}, {
el: this.arrangement,
left: 30,
top: 30
}, {
el: {
type: "bi.button",
text: "getAllRegions",
height: 25,
handler: function () {
var items = [];
BI.each(self.arrangement.getAllRegions(), function (i, region) {
items.push({
id: region.id,
left: region.left,
top: region.top,
width: region.width,
height: region.height
});
});
BI.Msg.toast(JSON.stringify(items));
}
},
left: 230,
top: 450
}]
});
}
});
BI.shortcut("demo.arrangement", Demo.Arrangement);

108
demo/js/widget/arrangment/demo.interactive_arrangement.js
Unescape View File

@ -1,108 +0,0 @@
/**
* Created by User on 2017/3/22.
*/
Demo.RelationView = BI.inherit(BI.Widget, {
_createItem: function () {
var self = this;
var id = BI.UUID();
var item = BI.createWidget({
type: "bi.text_button",
id: id,
text: "对齐的时候是不是有根线？",
cls: "layout-bg" + BI.random(1, 8),
handler: function () {
self.arrangement.deleteRegion(id);
}
});
return item;
},
render: function () {
var self = this;
this.arrangement = BI.createWidget({
type: "bi.interactive_arrangement",
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE,
cls: "bi-border",
width: 800,
height: 400,
items: []
});
var drag = BI.createWidget({
type: "bi.label",
cls: "bi-border",
width: 70,
height: 25,
text: "drag me"
});
drag.element.draggable({
revert: true,
cursorAt: {left: 0, top: 0},
drag: function (e, ui) {
self.arrangement.setPosition({
left: ui.position.left,
top: ui.position.top
}, {
width: 300,
height: 200
});
},
stop: function (e, ui) {
self.arrangement.addRegion({
el: self._createItem()
});
},
helper: function (e) {
var helper = self.arrangement.getHelper();
return helper.element;
}
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: drag,
left: 30,
top: 450
}, {
el: this.arrangement,
left: 30,
top: 30
}, {
el: {
type: "bi.button",
text: "getAllRegions",
height: 25,
handler: function () {
var items = [];
BI.each(self.arrangement.getAllRegions(), function (i, region) {
items.push({
id: region.id,
left: region.left,
top: region.top,
width: region.width,
height: region.height
});
});
BI.Msg.toast(JSON.stringify(items));
}
},
left: 230,
top: 450
}, {
el: {
type: "bi.button",
text: "relayout",
height: 25,
handler: function () {
self.arrangement.relayout();
}
},
left: 330,
top: 450
}]
});
}
});
BI.shortcut("demo.interactive_arrangement", Demo.RelationView);

1936
dist/bundle.js vendored
View File

File diff suppressed because it is too large Load Diff

25
dist/bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

326
dist/demo.js vendored
Unescape View File

@ -5697,18 +5697,6 @@ Demo.FIX_CONFIG = [{
pId: 4, pId: 4,
id: 417, id: 417,
text: "布局" text: "布局"
}, {
pId: 417,
text: "bi.arrangement",
value: "demo.arrangement"
}, {
pId: 417,
text: "bi.adaptive_arrangement",
value: "demo.adaptive_arrangement"
}, {
pId: 417,
text: "bi.interactive_arrangement",
value: "demo.interactive_arrangement"
}, { }, {
pId: 4, pId: 4,
id: 419, id: 419,
@ -11432,319 +11420,7 @@ BI.shortcut("demo.preview", Demo.Preview);Demo.West = BI.inherit(BI.Widget, {
} }
}); });
Demo.West.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; Demo.West.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
BI.shortcut("demo.west", Demo.West);Demo.AdaptiveArrangement = BI.inherit(BI.Widget, { BI.shortcut("demo.west", Demo.West);/**
_createItem: function () {
var self = this;
var id = BI.UUID();
var item = BI.createWidget({
type: "bi.text_button",
id: id,
cls: "layout-bg" + BI.random(1, 8),
value: "点我我就在最上面了",
handler: function () {
// self.arrangement.deleteRegion(id);
}
});
return item;
},
render: function () {
var self = this;
this.arrangement = BI.createWidget({
type: "bi.adaptive_arrangement",
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE,
cls: "bi-border",
width: 800,
height: 400,
items: []
});
var drag = BI.createWidget({
type: "bi.label",
cls: "bi-border",
width: 70,
height: 25,
text: "drag me"
});
drag.element.draggable({
revert: true,
cursorAt: {left: 0, top: 0},
drag: function (e, ui) {
self.arrangement.setPosition({
left: ui.position.left,
top: ui.position.top
}, {
width: 300,
height: 200
});
},
stop: function (e, ui) {
self.arrangement.addRegion({
el: self._createItem()
});
},
helper: function (e) {
var helper = self.arrangement.getHelper();
return helper.element;
}
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: drag,
left: 30,
top: 450
}, {
el: this.arrangement,
left: 30,
top: 30
}, {
el: {
type: "bi.button",
text: "getAllRegions",
height: 25,
handler: function () {
var items = [];
BI.each(self.arrangement.getAllRegions(), function (i, region) {
items.push({
id: region.id,
left: region.left,
top: region.top,
width: region.width,
height: region.height
});
});
BI.Msg.toast(JSON.stringify(items));
}
},
left: 230,
top: 450
}, {
el: {
type: "bi.button",
text: "relayout",
height: 25,
handler: function () {
self.arrangement.relayout();
}
},
left: 330,
top: 450
}]
});
}
});
BI.shortcut("demo.adaptive_arrangement", Demo.AdaptiveArrangement);Demo.Arrangement = BI.inherit(BI.Widget, {
beforeCreate: function () {
this.index = 0;
},
_createItem: function () {
var self = this;
var item = BI.createWidget({
type: "bi.text_button",
id: this.index,
text: "点我删掉",
cls: "layout-bg" + BI.random(1, 8),
handler: function () {
self.arrangement.deleteRegion(this.attr("id"));
}
});
this.index++;
return item;
},
render: function () {
var self = this;
this.arrangement = BI.createWidget({
type: "bi.arrangement",
layoutType: BI.Arrangement.LAYOUT_TYPE.GRID,
cls: "bi-border",
width: 800,
height: 400,
items: []
});
var drag = BI.createWidget({
type: "bi.label",
cls: "bi-border",
width: 70,
height: 25,
text: "drag me"
});
drag.element.draggable({
revert: true,
cursorAt: {left: 0, top: 0},
drag: function (e, ui) {
self.arrangement.setPosition({
left: ui.position.left,
top: ui.position.top
}, {
width: 300,
height: 200
});
},
stop: function (e, ui) {
self.arrangement.addRegion({
el: self._createItem()
});
},
helper: function (e) {
var helper = self.arrangement.getHelper();
return helper.element;
}
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: drag,
left: 30,
top: 450
}, {
el: this.arrangement,
left: 30,
top: 30
}, {
el: {
type: "bi.button",
text: "getAllRegions",
height: 25,
handler: function () {
var items = [];
BI.each(self.arrangement.getAllRegions(), function (i, region) {
items.push({
id: region.id,
left: region.left,
top: region.top,
width: region.width,
height: region.height
});
});
BI.Msg.toast(JSON.stringify(items));
}
},
left: 230,
top: 450
}]
});
}
});
BI.shortcut("demo.arrangement", Demo.Arrangement);/**
* Created by User on 2017/3/22.
*/
Demo.RelationView = BI.inherit(BI.Widget, {
_createItem: function () {
var self = this;
var id = BI.UUID();
var item = BI.createWidget({
type: "bi.text_button",
id: id,
text: "对齐的时候是不是有根线？",
cls: "layout-bg" + BI.random(1, 8),
handler: function () {
self.arrangement.deleteRegion(id);
}
});
return item;
},
render: function () {
var self = this;
this.arrangement = BI.createWidget({
type: "bi.interactive_arrangement",
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE,
cls: "bi-border",
width: 800,
height: 400,
items: []
});
var drag = BI.createWidget({
type: "bi.label",
cls: "bi-border",
width: 70,
height: 25,
text: "drag me"
});
drag.element.draggable({
revert: true,
cursorAt: {left: 0, top: 0},
drag: function (e, ui) {
self.arrangement.setPosition({
left: ui.position.left,
top: ui.position.top
}, {
width: 300,
height: 200
});
},
stop: function (e, ui) {
self.arrangement.addRegion({
el: self._createItem()
});
},
helper: function (e) {
var helper = self.arrangement.getHelper();
return helper.element;
}
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: drag,
left: 30,
top: 450
}, {
el: this.arrangement,
left: 30,
top: 30
}, {
el: {
type: "bi.button",
text: "getAllRegions",
height: 25,
handler: function () {
var items = [];
BI.each(self.arrangement.getAllRegions(), function (i, region) {
items.push({
id: region.id,
left: region.left,
top: region.top,
width: region.width,
height: region.height
});
});
BI.Msg.toast(JSON.stringify(items));
}
},
left: 230,
top: 450
}, {
el: {
type: "bi.button",
text: "relayout",
height: 25,
handler: function () {
self.arrangement.relayout();
}
},
left: 330,
top: 450
}]
});
}
});
BI.shortcut("demo.interactive_arrangement", Demo.RelationView);/**
* Created by Dailer on 2017/7/25. * Created by Dailer on 2017/7/25.
*/ */

1936
dist/fineui.js vendored
View File

File diff suppressed because it is too large Load Diff

25
dist/fineui.min.js vendored
View File

File diff suppressed because one or more lines are too long

1936
dist/widget.js vendored
View File

File diff suppressed because it is too large Load Diff

299
src/widget/adaptivearrangement/adaptivearrangement.js
Unescape View File

@ -1,299 +0,0 @@
/**
* 自适应布局
*
* 1、resize
* 2、吸附
* 3、当前组件在最上方
* 4、可以撤销
* 5、上下之间插入组件
*
* Created by GUY on 2016/2/23.
* @class BI.AdaptiveArrangement
* @extends BI.Widget
*/
BI.AdaptiveArrangement = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.AdaptiveArrangement.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-adaptive-arrangement",
resizable: true,
layoutType: BI.Arrangement.LAYOUT_TYPE.FREE,
items: []
});
},
_init: function () {
BI.AdaptiveArrangement.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.arrangement = BI.createWidget({
type: "bi.arrangement",
element: this,
layoutType: o.layoutType,
items: o.items
});
this.arrangement.on(BI.Arrangement.EVENT_SCROLL, function () {
self.fireEvent(BI.AdaptiveArrangement.EVENT_SCROLL, arguments);
});
this.zIndex = 0;
BI.each(o.items, function (i, item) {
self._initResizable(item.el);
});
$(document).mousedown(function (e) {
BI.each(self.getAllRegions(), function (i, region) {
if (region.el.element.find(e.target).length === 0) {
region.el.element.removeClass("selected");
}
});
});
BI.ResizeDetector.addResizeListener(this, function () {
self.arrangement.resize();
self.fireEvent(BI.AdaptiveArrangement.EVENT_RESIZE);
});
},
_isEqual: function () {
return this.arrangement._isEqual.apply(this.arrangement, arguments);
},
_setSelect: function (item) {
if (!item.element.hasClass("selected")) {
item.element.css("zIndex", ++this.zIndex);
BI.each(this.getAllRegions(), function (i, region) {
region.el.element.removeClass("selected");
});
item.element.addClass("selected");
}
},
_initResizable: function (item) {
var self = this, o = this.options;
item.element.css("zIndex", ++this.zIndex);
item.element.mousedown(function () {
self._setSelect(item);
});
},
_getScrollOffset: function () {
return this.arrangement._getScrollOffset();
},
getClientWidth: function () {
return this.arrangement.getClientWidth();
},
getClientHeight: function () {
return this.arrangement.getClientHeight();
},
addRegion: function (region, position) {
this._initResizable(region.el);
this._setSelect(region.el);
var self = this, flag;
var old = this.arrangement.getAllRegions();
if (flag = this.arrangement.addRegion(region, position)) {
this._old = old;
}
return flag;
},
deleteRegion: function (name) {
var flag;
var old = this.getAllRegions();
if (flag = this.arrangement.deleteRegion(name)) {
this._old = old;
} else {
this._old = this.getAllRegions();
this.relayout();
}
return flag;
},
setRegionSize: function (name, size) {
var flag;
var old = this.getAllRegions();
if (flag = this.arrangement.setRegionSize(name, size)) {
this._old = old;
}
return flag;
},
setPosition: function (position, size) {
var self = this;
return this.arrangement.setPosition(position, size);
},
setRegionPosition: function (name, position) {
var region = this.getRegionByName(name);
return this.arrangement.setRegionPosition(name, position);
},
setDropPosition: function (position, size) {
return this.arrangement.setDropPosition(position, size);
},
scrollInterval: function (e, isBorderScroll, isOverflowScroll, cb) {
// var self = this;
// var map = {
// top: [-1, 0],
// bottom: [1, 0],
// left: [0, -1],
// right: [0, 1]
// };
// var clientWidth = this.arrangement.getClientWidth();
// var clientHeight = this.arrangement.getClientHeight();
//
// function scrollTo(direction, callback) {
// if (direction === "") {
// self.lastActiveRegion = "";
// if (self._scrollInterval) {
// clearInterval(self._scrollInterval);
// self._scrollInterval = null;
// }
// return;
// }
// if (self.lastActiveRegion !== direction) {
// self.lastActiveRegion = direction;
// if (self._scrollInterval) {
// clearInterval(self._scrollInterval);
// self._scrollInterval = null;
// }
// var count = 0;
// self._scrollInterval = setInterval(function () {
// count++;
// if (count <= 3) {
// return;
// }
// 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
// });
// }, 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 >= clientHeight - 30 && p.top <= clientHeight) {
// scrollTo("bottom", cb)
// }
// //向左滚
// else if (isBorderScroll && p.left >= 0 && p.left <= 30) {
// scrollTo("left", cb)
// }
// //向右滚
// else if (isBorderScroll && p.left >= clientWidth - 30 && p.left <= clientWidth) {
// scrollTo("right", cb)
// } else {
// if (isOverflowScroll === true) {
// if (p.top < 0) {
// scrollTo("top", cb);
// }
// else if (p.top > clientHeight) {
// scrollTo("bottom", cb);
// }
// else if (p.left < 0) {
// scrollTo("left", cb);
// }
// else if (p.left > clientWidth) {
// scrollTo("right", cb);
// } else {
// scrollTo("", cb);
// }
// } else {
// scrollTo("", cb);
// }
// }
},
scrollEnd: function () {
this.lastActiveRegion = "";
if (this._scrollInterval) {
clearInterval(this._scrollInterval);
this._scrollInterval = null;
}
},
scrollTo: function (scroll) {
this.arrangement.scrollTo(scroll);
},
zoom: function (ratio) {
this.arrangement.zoom(ratio);
},
resize: function () {
this.arrangement.resize();
},
relayout: function () {
return this.arrangement.relayout();
},
setLayoutType: function (type) {
var self = this;
this.arrangement.setLayoutType(type);
},
getLayoutType: function () {
return this.arrangement.getLayoutType();
},
getLayoutRatio: function () {
return this.arrangement.getLayoutRatio();
},
getHelper: function () {
return this.arrangement.getHelper();
},
getRegionByName: function (name) {
return this.arrangement.getRegionByName(name);
},
getAllRegions: function () {
return this.arrangement.getAllRegions();
},
revoke: function () {
if (this._old) {
this.populate(BI.toArray(this._old));
}
},
populate: function (items) {
var self = this;
BI.each(items, function (i, item) {
self._initResizable(item.el);
});
this.arrangement.populate(items);
}
});
BI.AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE = "AdaptiveArrangement.EVENT_ELEMENT_START_RESIZE";
BI.AdaptiveArrangement.EVENT_ELEMENT_RESIZE = "AdaptiveArrangement.EVENT_ELEMENT_RESIZE";
BI.AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE = "AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE";
BI.AdaptiveArrangement.EVENT_RESIZE = "AdaptiveArrangement.EVENT_RESIZE";
BI.AdaptiveArrangement.EVENT_SCROLL = "AdaptiveArrangement.EVENT_SCROLL";
BI.shortcut("bi.adaptive_arrangement", BI.AdaptiveArrangement);

16
src/widget/arrangement/arrangement.block.js
Unescape View File

@ -1,16 +0,0 @@
/**
* Arrangement的block面板
*
* Created by GUY on 2016/3/1.
* @class BI.ArrangementBlock
* @extends BI.Widget
*/
BI.ArrangementBlock = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.ArrangementBlock.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-arrangement-block bi-mask"
});
}
});
BI.shortcut("bi.arrangement_block", BI.ArrangementBlock);

16
src/widget/arrangement/arrangement.droppable.js
Unescape View File

@ -1,16 +0,0 @@
/**
* Arrangement的drop面板
*
* Created by GUY on 2016/3/1.
* @class BI.ArrangementDroppable
* @extends BI.Widget
*/
BI.ArrangementDroppable = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.ArrangementDroppable.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-arrangement-droppable bi-resizer"
});
}
});
BI.shortcut("bi.arrangement_droppable", BI.ArrangementDroppable);

1058
src/widget/arrangement/arrangement.js
View File

File diff suppressed because it is too large Load Diff

552
src/widget/interactivearrangement/interactivearrangement.js
Unescape View File

@ -1,552 +0,0 @@
/**
* 交互行为布局
*
*
* Created by GUY on 2016/7/23.
* @class BI.InteractiveArrangement
* @extends BI.Widget
*/
BI.InteractiveArrangement = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.InteractiveArrangement.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-interactive-arrangement",
resizable: true,
layoutType: BI.Arrangement.LAYOUT_TYPE.GRID,
items: []
});
},
_init: function () {
BI.InteractiveArrangement.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.arrangement = BI.createWidget({
type: "bi.adaptive_arrangement",
element: this,
resizable: o.resizable,
layoutType: o.layoutType,
items: o.items
});
this.arrangement.on(BI.AdaptiveArrangement.EVENT_SCROLL, function () {
self.fireEvent(BI.InteractiveArrangement.EVENT_SCROLL, arguments);
});
this.arrangement.on(BI.AdaptiveArrangement.EVENT_RESIZE, function () {
self.fireEvent(BI.InteractiveArrangement.EVENT_RESIZE, arguments);
});
this.arrangement.on(BI.AdaptiveArrangement.EVENT_ELEMENT_RESIZE, function (id, size) {
var p = self._getRegionClientPosition(id);
self.draw({
left: p.left,
top: p.top
}, size, id);
});
this.arrangement.on(BI.AdaptiveArrangement.EVENT_ELEMENT_STOP_RESIZE, function (id, size) {
self.stopDraw();
self.setRegionSize(id, size);
});
this.tags = [];
},
_isEqual: function (num1, num2) {
return this.arrangement._isEqual(num1, num2);
},
_getScrollOffset: function () {
return this.arrangement._getScrollOffset();
},
_positionAt: function (position, regions) {
var self = this;
regions = regions || this.getAllRegions();
var left = [], center = [], right = [], top = [], middle = [], bottom = [];
BI.each(regions, function (i, region) {
var client = self._getRegionClientPosition(region.id);
if (Math.abs(client.left - position.left) <= 3) {
left.push(region);
}
if (Math.abs(client.left + client.width / 2 - position.left) <= 3) {
center.push(region);
}
if (Math.abs(client.left + client.width - position.left) <= 3) {
right.push(region);
}
if (Math.abs(client.top - position.top) <= 3) {
top.push(region);
}
if (Math.abs(client.top + client.height / 2 - position.top) <= 3) {
middle.push(region);
}
if (Math.abs(client.top + client.height - position.top) <= 3) {
bottom.push(region);
}
});
return {
left: left,
center: center,
right: right,
top: top,
middle: middle,
bottom: bottom
};
},
_getRegionClientPosition: function (name) {
var region = this.getRegionByName(name);
var offset = this.arrangement._getScrollOffset();
return {
top: region.top - offset.top,
left: region.left - offset.left,
width: region.width,
height: region.height,
id: region.id
};
},
_vAlign: function (position, regions) {
var self = this;
var vs = this._positionAt(position, regions);
var positions = [];
var l;
if (vs.left.length > 0) {
l = this._getRegionClientPosition(vs.left[0].id).left;
} else if (vs.right.length > 0) {
var temp = this._getRegionClientPosition(vs.right[0].id);
l = temp.left + temp.width;
} else if (vs.center.length > 0) {
var temp = this._getRegionClientPosition(vs.center[0].id);
l = temp.left + temp.width / 2;
}
var rs = vs.left.concat(vs.right).concat(vs.center);
BI.each(rs, function (i, region) {
var p = self._getRegionClientPosition(region.id);
if (self._isEqual(p.left, l) || self._isEqual(p.left + p.width, l) || self._isEqual(p.left + p.width / 2, l)) {
var topPoint = {
top: p.top + p.height / 2,
left: l
};
positions.push({
id: region.id,
start: topPoint,
end: {
left: l,
top: position.top
}
});
}
});
return positions;
},
_leftAlign: function (position, size, regions) {
var self = this;
return this._vAlign({
left: position.left,
top: position.top + size.height / 2
}, regions);
},
_rightAlign: function (position, size, regions) {
var self = this;
return this._vAlign({
left: position.left + size.width,
top: position.top + size.height / 2
}, regions);
},
_hAlign: function (position, regions) {
var self = this;
var hs = this._positionAt(position, regions);
var positions = [];
var t;
if (hs.top.length > 0) {
var temp = this._getRegionClientPosition(hs.top[0].id);
t = temp.top;
} else if (hs.bottom.length > 0) {
var temp = this._getRegionClientPosition(hs.bottom[0].id);
t = temp.top + temp.height;
} else if (hs.middle.length > 0) {
var temp = this._getRegionClientPosition(hs.middle[0].id);
t = temp.top + temp.height / 2;
}
var rs = hs.top.concat(hs.bottom).concat(hs.middle);
BI.each(rs, function (i, region) {
var p = self._getRegionClientPosition(region.id);
if (self._isEqual(p.top, t) || self._isEqual(p.top + p.height, t) || self._isEqual(p.top + p.height / 2, t)) {
var leftPoint = {
top: t,
left: p.left + p.width / 2
};
positions.push({
id: p.id,
start: leftPoint,
end: {
left: position.left,
top: t
}
});
}
});
return positions;
},
_topAlign: function (position, size, regions) {
var self = this;
return this._hAlign({
left: position.left + size.width / 2,
top: position.top
}, regions);
},
_bottomAlign: function (position, size, regions) {
var self = this;
return this._hAlign({
left: position.left + size.width / 2,
top: position.top + size.height
}, regions);
},
_centerAlign: function (position, size, regions) {
var self = this;
return this._vAlign({
left: position.left + size.width / 2,
top: position.top + size.height / 2
}, regions);
},
_middleAlign: function (position, size, regions) {
var self = this;
return this._hAlign({
left: position.left + size.width / 2,
top: position.top + size.height / 2
}, regions);
},
_drawOneTag: function (start, end) {
var s = BI.createWidget({
type: "bi.icon_button",
// invisible: true,
width: 13,
height: 13,
cls: "drag-tag-font interactive-arrangement-dragtag-icon"
});
var e = BI.createWidget({
type: "bi.icon_button",
// invisible: true,
width: 13,
height: 13,
cls: "drag-tag-font interactive-arrangement-dragtag-icon"
});
if (this._isEqual(start.left, end.left)) {
var line = BI.createWidget({
type: "bi.layout",
// invisible: true,
cls: "interactive-arrangement-dragtag-line",
width: 1,
height: Math.abs(start.top - end.top)
});
} else {
var line = BI.createWidget({
type: "bi.layout",
// invisible: true,
cls: "interactive-arrangement-dragtag-line",
height: 1,
width: Math.abs(start.left - end.left)
});
}
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: s,
left: start.left - 6,
top: start.top - 7
}, {
el: e,
left: end.left - 6,
top: end.top - 7
}, {
el: line,
left: Math.min(start.left, end.left),
top: Math.min(start.top, end.top)
}]
});
this.tags.push(s);
this.tags.push(e);
this.tags.push(line);
},
stopDraw: function () {
BI.each(this.tags, function (i, w) {
w.destroy();
});
this.tags = [];
},
_getRegionExcept: function (name, regions) {
var other = [];
BI.each(regions || this.getAllRegions(), function (i, region) {
if (!(name && region.id === name)) {
other.push(region);
}
});
return other;
},
getClientWidth: function () {
return this.arrangement.getClientWidth();
},
getClientHeight: function () {
return this.arrangement.getClientHeight();
},
getPosition: function (name, position, size) {
var regions = this.getAllRegions();
var me;
if (name) {
me = this._getRegionClientPosition(name);
}
var other = this._getRegionExcept(name, regions);
position = position || {
left: me.left,
top: me.top
};
size = size || {
width: me.width,
height: me.height
};
var left = this._leftAlign(position, size, other);
var right = this._rightAlign(position, size, other);
var top = this._topAlign(position, size, other, other);
var bottom = this._bottomAlign(position, size, other);
var center = this._centerAlign(position, size, other);
var middle = this._middleAlign(position, size, other);
BI.each(center, function (i, pos) {
position.left = pos.end.left - size.width / 2;
});
BI.each(right, function (i, pos) {
position.left = pos.end.left - size.width;
});
BI.each(left, function (i, pos) {
position.left = pos.end.left;
});
BI.each(middle, function (i, pos) {
position.top = pos.end.top - size.height / 2;
});
BI.each(bottom, function (i, pos) {
position.top = pos.end.top - size.height;
});
BI.each(top, function (i, pos) {
position.top = pos.end.top;
});
return position;
},
// position不动 变size
getSize: function (name, position, size) {
var regions = this.getAllRegions();
var me;
if (name) {
me = this._getRegionClientPosition(name);
}
var other = this._getRegionExcept(name, regions);
position = position || {
left: me.left,
top: me.top
};
size = size || {
width: me.width,
height: me.height
};
var left = this._leftAlign(position, size, other);
var right = this._rightAlign(position, size, other);
var top = this._topAlign(position, size, other, other);
var bottom = this._bottomAlign(position, size, other);
var center = this._centerAlign(position, size, other);
var middle = this._middleAlign(position, size, other);
BI.each(center, function (i, pos) {
size.width = (pos.end.left - position.left) * 2;
});
BI.each(right, function (i, pos) {
size.width = pos.end.left - position.left;
});
BI.each(left, function (i, pos) {
});
BI.each(middle, function (i, pos) {
size.height = (pos.end.top - position.top) * 2;
});
BI.each(bottom, function (i, pos) {
size.height = pos.end.top - position.top;
});
BI.each(top, function (i, pos) {
});
return size;
},
draw: function (position, size, name) {
var self = this;
this.stopDraw();
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.FREE:
var other = this._getRegionExcept(name);
var left = this._leftAlign(position, size, other);
var right = this._rightAlign(position, size, other);
var top = this._topAlign(position, size, other);
var bottom = this._bottomAlign(position, size, other);
var center = this._centerAlign(position, size, other);
var middle = this._middleAlign(position, size, other);
BI.each(center, function (i, pos) {
self._drawOneTag(pos.start, pos.end);
});
BI.each(right, function (i, pos) {
self._drawOneTag(pos.start, pos.end);
});
BI.each(left, function (i, pos) {
self._drawOneTag(pos.start, pos.end);
});
BI.each(middle, function (i, pos) {
self._drawOneTag(pos.start, pos.end);
});
BI.each(bottom, function (i, pos) {
self._drawOneTag(pos.start, pos.end);
});
BI.each(top, function (i, pos) {
self._drawOneTag(pos.start, pos.end);
});
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
break;
}
},
addRegion: function (region, position) {
this.stopDraw();
return this.arrangement.addRegion(region, position);
},
deleteRegion: function (name) {
return this.arrangement.deleteRegion(name);
},
setRegionSize: function (name, size) {
size = this.getSize(name, null, size);
return this.arrangement.setRegionSize(name, size);
},
setPosition: function (position, size) {
var self = this;
this.stopDraw();
if (position.left > 0 && position.top > 0) {
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.FREE:
position = this.getPosition(null, position, size);
this.draw(position, size);
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
break;
}
}
var at = this.arrangement.setPosition(position, size);
return at;
},
setRegionPosition: function (name, position) {
if (position.left > 0 && position.top > 0) {
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.FREE:
position = this.getPosition(name, position);
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
break;
}
}
return this.arrangement.setRegionPosition(name, position);
},
setDropPosition: function (position, size) {
var self = this;
this.stopDraw();
if (position.left > 0 && position.top > 0) {
switch (this.getLayoutType()) {
case BI.Arrangement.LAYOUT_TYPE.FREE:
position = this.getPosition(null, position, size);
this.draw(position, size);
break;
case BI.Arrangement.LAYOUT_TYPE.GRID:
break;
}
}
var callback = self.arrangement.setDropPosition(position, size);
return function () {
callback();
self.stopDraw();
};
},
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);
},
zoom: function (ratio) {
this.arrangement.zoom(ratio);
},
resize: function () {
return this.arrangement.resize();
},
relayout: function () {
return this.arrangement.relayout();
},
setLayoutType: function (type) {
this.arrangement.setLayoutType(type);
},
getLayoutType: function () {
return this.arrangement.getLayoutType();
},
getLayoutRatio: function () {
return this.arrangement.getLayoutRatio();
},
getHelper: function () {
return this.arrangement.getHelper();
},
getRegionByName: function (name) {
return this.arrangement.getRegionByName(name);
},
getAllRegions: function () {
return this.arrangement.getAllRegions();
},
revoke: function () {
return this.arrangement.revoke();
},
populate: function (items) {
var self = this;
this.arrangement.populate(items);
}
});
BI.InteractiveArrangement.EVENT_RESIZE = "InteractiveArrangement.EVENT_RESIZE";
BI.InteractiveArrangement.EVENT_SCROLL = "InteractiveArrangement.EVENT_SCROLL";
BI.shortcut("bi.interactive_arrangement", BI.InteractiveArrangement);
Write Preview
Loading…
Cancel
Save