forked from fanruan/fineui
windy
7 years ago
37 changed files with 1073 additions and 16831 deletions
@ -1,77 +0,0 @@ |
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
Demo.DirectionPathChooser = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "demo-direction-path-chooser" |
|
||||||
}, |
|
||||||
|
|
||||||
render: function () { |
|
||||||
return { |
|
||||||
type: "bi.center_adapt", |
|
||||||
items: [ |
|
||||||
{ |
|
||||||
type: "bi.direction_path_chooser", |
|
||||||
items: [[{ |
|
||||||
region: "8c4460bc3605685e", |
|
||||||
regionText: "采购订单XXX", |
|
||||||
text: "ID", |
|
||||||
value: "1" |
|
||||||
}, { |
|
||||||
region: "0fbd0dc648f41e97", |
|
||||||
regionText: "采购订单", |
|
||||||
text: "学号", |
|
||||||
value: "3" |
|
||||||
}, { |
|
||||||
region: "c6d72d6c7e19a667", |
|
||||||
regionText: "供应商基本信息", |
|
||||||
text: "ID", |
|
||||||
value: "5" |
|
||||||
}], [{ |
|
||||||
region: "ed013e18cc7c8637", |
|
||||||
regionText: "采购订单XXX", |
|
||||||
text: "ID", |
|
||||||
value: "1" |
|
||||||
}, { |
|
||||||
region: "153d75878431f8ee", |
|
||||||
regionText: "A3", |
|
||||||
text: "学号", |
|
||||||
value: "2" |
|
||||||
}, { |
|
||||||
region: "3861fb024c7d7825", |
|
||||||
regionText: "采购订单", |
|
||||||
text: "学号", |
|
||||||
value: "3" |
|
||||||
}, { |
|
||||||
region: "88e3e5071bd10bc5", |
|
||||||
regionText: "供应商", |
|
||||||
text: "ID", |
|
||||||
value: "4" |
|
||||||
}, { |
|
||||||
region: "8476c77ab5c147e0", |
|
||||||
regionText: "供应商基本信息", |
|
||||||
text: "ID", |
|
||||||
value: "5" |
|
||||||
}], [{ |
|
||||||
region: "f00f67fbb9fba6fe", |
|
||||||
regionText: "采购订单XXX", |
|
||||||
text: "ID", |
|
||||||
value: "1" |
|
||||||
}, { |
|
||||||
region: "1e8badf5d5793408", |
|
||||||
regionText: "A3", |
|
||||||
text: "学号", |
|
||||||
value: "2" |
|
||||||
}, { |
|
||||||
region: "de1ebd3d0986a294", |
|
||||||
regionText: "供应商基本信息", |
|
||||||
text: "ID", |
|
||||||
value: "5" |
|
||||||
}]] |
|
||||||
} |
|
||||||
] |
|
||||||
}; |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
BI.shortcut("demo.direction_path_chooser", Demo.DirectionPathChooser); |
|
||||||
@ -1,177 +0,0 @@ |
|||||||
/** |
|
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
|
||||||
Demo.PathChooser = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "demo-path-chooser" |
|
||||||
}, |
|
||||||
render: function () { |
|
||||||
var pathchooser = BI.createWidget({ |
|
||||||
type: "bi.path_chooser", |
|
||||||
width: 800, |
|
||||||
height: 400, |
|
||||||
items: // [
|
|
||||||
// [{region: "区域X", value: "X1"},
|
|
||||||
// {region: "区域Q", value: "Q"},
|
|
||||||
// {region: "区域A", value: "A"},
|
|
||||||
// {region: "区域B", value: "B"},
|
|
||||||
// {region: "区域D", value: "D"},
|
|
||||||
// {region: "区域E", value: "E"},
|
|
||||||
// {region: "区域G", value: "G"},
|
|
||||||
// {region: "区域I", value: "I"},
|
|
||||||
// {region: "区域J", value: "J"}],
|
|
||||||
// [{region: "区域X", value: "X"},
|
|
||||||
// {region: "区域Q", value: "Q"},
|
|
||||||
// {region: "区域A", value: "A"},
|
|
||||||
// {region: "区域B", value: "B"},
|
|
||||||
// {region: "区域C", value: "C"},
|
|
||||||
// {region: "区域D", value: "D"},
|
|
||||||
// {region: "区域E", value: "E"},
|
|
||||||
// {region: "区域G", value: "G"},
|
|
||||||
// {region: "区域I", value: "I"},
|
|
||||||
// {region: "区域J", value: "J"}],
|
|
||||||
// [{region: "区域X", value: "X"},
|
|
||||||
// //{region: "区域Q", value: "Q"},
|
|
||||||
// {region: "区域A", value: "A"},
|
|
||||||
// {region: "区域C", value: "C"},
|
|
||||||
// {region: "区域D", value: "D"},
|
|
||||||
// {region: "区域E", value: "E"},
|
|
||||||
// {region: "区域G", value: "G"},
|
|
||||||
// {region: "区域I", value: "I"},
|
|
||||||
// {region: "区域J", value: "J"}],
|
|
||||||
// [{region: "区域X", value: "X"},
|
|
||||||
// {region: "区域Q", value: "Q"},
|
|
||||||
// {region: "区域A", value: "A"},
|
|
||||||
// {region: "区域B", value: "B"},
|
|
||||||
// {region: "区域D", value: "D"},
|
|
||||||
// {region: "区域E", value: "E1"},
|
|
||||||
// {region: "区域H", value: "H"},
|
|
||||||
// {region: "区域I", value: "I"},
|
|
||||||
// {region: "区域J", value: "J"}],
|
|
||||||
// [{region: "区域X", value: "X"},
|
|
||||||
// {region: "区域Q", value: "Q"},
|
|
||||||
// {region: "区域A", value: "A"},
|
|
||||||
// {region: "区域B", value: "B"},
|
|
||||||
// {region: "区域C", value: "C"},
|
|
||||||
// {region: "区域D", value: "D"},
|
|
||||||
// {region: "区域E", value: "E1"},
|
|
||||||
// {region: "区域H", value: "H"},
|
|
||||||
// {region: "区域I", value: "I"},
|
|
||||||
// {region: "区域J", value: "J"}],
|
|
||||||
// [{region: "区域X", value: "X"},
|
|
||||||
// {region: "区域Q", value: "Q"},
|
|
||||||
// {region: "区域A", value: "A"},
|
|
||||||
// {region: "区域C", value: "C"},
|
|
||||||
// {region: "区域D", value: "D"},
|
|
||||||
// {region: "区域E", value: "E1"},
|
|
||||||
// {region: "区域H", value: "H"},
|
|
||||||
// {region: "区域I", value: "I"},
|
|
||||||
// {region: "区域J", value: "J"}],
|
|
||||||
// [{region: "区域X", value: "X"},
|
|
||||||
// {region: "区域Q", value: "Q"},
|
|
||||||
// {region: "区域A", value: "A"},
|
|
||||||
// {region: "区域B", value: "B"},
|
|
||||||
// {region: "区域D", value: "D"},
|
|
||||||
// {region: "区域F", value: "F"},
|
|
||||||
// {region: "区域H", value: "H"},
|
|
||||||
// {region: "区域I", value: "I"},
|
|
||||||
// {region: "区域J", value: "J"}],
|
|
||||||
// [{region: "区域X", value: "X"},
|
|
||||||
// {region: "区域Q", value: "Q"},
|
|
||||||
// {region: "区域A", value: "A"},
|
|
||||||
// {region: "区域B", value: "B"},
|
|
||||||
// {region: "区域C", value: "C"},
|
|
||||||
// {region: "区域D", value: "D"},
|
|
||||||
// {region: "区域F", value: "F"},
|
|
||||||
// {region: "区域H", value: "H"},
|
|
||||||
// {region: "区域I", value: "I"},
|
|
||||||
// {region: "区域J", value: "J"}],
|
|
||||||
// [{region: "区域X", value: "X", text: "X"},
|
|
||||||
// {region: "区域Q", value: "Q", text: "Q"},
|
|
||||||
// {region: "区域A", value: "A", text: "A"},
|
|
||||||
// {region: "区域C", value: "C", text: "C"},
|
|
||||||
// {region: "区域D", value: "D", text: "D"},
|
|
||||||
// {region: "区域F", value: "F", text: "F"},
|
|
||||||
// {region: "区域H", value: "H", text: "H"},
|
|
||||||
// {region: "区域I", value: "I", text: "I"},
|
|
||||||
// {region: "区域J", value: "J", text: "J"}]
|
|
||||||
// ]
|
|
||||||
[[{ |
|
||||||
region: "8c4460bc3605685e", |
|
||||||
regionText: "采购订单XXX", |
|
||||||
text: "ID", |
|
||||||
value: "1" |
|
||||||
}, { |
|
||||||
region: "0fbd0dc648f41e97", |
|
||||||
regionText: "采购订单", |
|
||||||
text: "学号", |
|
||||||
value: "3" |
|
||||||
}, { |
|
||||||
region: "c6d72d6c7e19a667", |
|
||||||
regionText: "供应商基本信息", |
|
||||||
text: "ID", |
|
||||||
value: "5" |
|
||||||
}], [{ |
|
||||||
region: "ed013e18cc7c8637", |
|
||||||
regionText: "采购订单XXX", |
|
||||||
text: "ID", |
|
||||||
value: "1" |
|
||||||
}, { |
|
||||||
region: "153d75878431f8ee", |
|
||||||
regionText: "A3", |
|
||||||
text: "学号", |
|
||||||
value: "2" |
|
||||||
}, { |
|
||||||
region: "3861fb024c7d7825", |
|
||||||
regionText: "采购订单", |
|
||||||
text: "学号", |
|
||||||
value: "3" |
|
||||||
}, { |
|
||||||
region: "88e3e5071bd10bc5", |
|
||||||
regionText: "供应商", |
|
||||||
text: "ID", |
|
||||||
value: "4" |
|
||||||
}, { |
|
||||||
region: "8476c77ab5c147e0", |
|
||||||
regionText: "供应商基本信息", |
|
||||||
text: "ID", |
|
||||||
value: "5" |
|
||||||
}], [{ |
|
||||||
region: "f00f67fbb9fba6fe", |
|
||||||
regionText: "采购订单XXX", |
|
||||||
text: "ID", |
|
||||||
value: "1" |
|
||||||
}, { |
|
||||||
region: "1e8badf5d5793408", |
|
||||||
regionText: "A3", |
|
||||||
text: "学号", |
|
||||||
value: "2" |
|
||||||
}, { |
|
||||||
region: "de1ebd3d0986a294", |
|
||||||
regionText: "供应商基本信息", |
|
||||||
text: "ID", |
|
||||||
value: "5" |
|
||||||
}]] |
|
||||||
}); |
|
||||||
pathchooser.setValue(); |
|
||||||
return { |
|
||||||
type: "bi.absolute", |
|
||||||
items: [{ |
|
||||||
el: pathchooser, |
|
||||||
left: 100, |
|
||||||
top: 100 |
|
||||||
}, { |
|
||||||
el: { |
|
||||||
type: "bi.button", |
|
||||||
text: "getValue", |
|
||||||
handler: function () { |
|
||||||
BI.Msg.toast(JSON.stringify(pathchooser.getValue())); |
|
||||||
} |
|
||||||
}, |
|
||||||
left: 100, |
|
||||||
bottom: 10 |
|
||||||
}] |
|
||||||
}; |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.shortcut("demo.path_chooser", Demo.PathChooser); |
|
||||||
@ -1,76 +0,0 @@ |
|||||||
/** |
|
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
|
||||||
Demo.RelationView = BI.inherit(BI.Widget, { |
|
||||||
props: { |
|
||||||
baseCls: "demo-relation-view" |
|
||||||
}, |
|
||||||
render: function () { |
|
||||||
this.relationview = BI.createWidget({ |
|
||||||
type: "bi.relation_view", |
|
||||||
items: [ |
|
||||||
{ |
|
||||||
primary: { |
|
||||||
region: "B", regionText: "比", text: ["try", "try1"], regionTitle: "bbb", regionHandler: function () { |
|
||||||
alert("a"); |
|
||||||
}, |
|
||||||
|
|
||||||
isPrimary: true, |
|
||||||
title: "b2...", |
|
||||||
value: "b2", |
|
||||||
//disabled: true,
|
|
||||||
handler: function () { |
|
||||||
alert("d"); |
|
||||||
}, |
|
||||||
keyword: "A", |
|
||||||
isView: true |
|
||||||
}, |
|
||||||
foreign: {region: "C", text: ["try", "try1"], value: "c1", keyword: "A"} |
|
||||||
}, |
|
||||||
{ |
|
||||||
primary: {region: "A", value: "a1", text: "a1字段", keyword: "A"}, |
|
||||||
foreign: {region: "C", value: "c2", text: "c2字段", keyword: "A"} |
|
||||||
}, |
|
||||||
{ |
|
||||||
primary: {region: "C", value: "c3", text: "c3字段", keyword: "A"}, |
|
||||||
foreign: {region: "D", value: "d1", text: "d1字段", keyword: "A"} |
|
||||||
}, |
|
||||||
{ |
|
||||||
primary: {region: "A", value: "a1", text: "a1字段", keyword: "A"}, |
|
||||||
foreign: {region: "B", value: "b1", text: "b1字段", keyword: "A"} |
|
||||||
}, |
|
||||||
|
|
||||||
{ |
|
||||||
primary: {region: "X", value: "x1", text: "x1字段", keyword: "A"}, |
|
||||||
foreign: {region: "Y", value: "y1", text: "y1字段", keyword: "A"} |
|
||||||
}, |
|
||||||
{ |
|
||||||
primary: {region: "X", value: "x2", text: "x2字段", keyword: "A"}, |
|
||||||
foreign: {region: "Z", value: "z1", text: "z1字段", keyword: "A"} |
|
||||||
}, |
|
||||||
{ |
|
||||||
primary: {region: "X", value: "x2", text: "x2字段", keyword: "A"}, |
|
||||||
foreign: {region: "B", value: "b1", text: "b1字段", keyword: "A"} |
|
||||||
}, |
|
||||||
{ |
|
||||||
primary: {region: "X33", keyword: "A"} |
|
||||||
} |
|
||||||
], |
|
||||||
listeners: [{ |
|
||||||
eventName: "EVENT_PREVIEW", |
|
||||||
action: function (tableName, show) { |
|
||||||
console.log(tableName + ": " + show); |
|
||||||
} |
|
||||||
}] |
|
||||||
}); |
|
||||||
return { |
|
||||||
type: "bi.float_center_adapt", |
|
||||||
items: [{ |
|
||||||
el: this.relationview |
|
||||||
}] |
|
||||||
}; |
|
||||||
}, |
|
||||||
mounted: function () { |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.shortcut("demo.relation_view", Demo.RelationView); |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,40 +0,0 @@ |
|||||||
# direction_path_chooser |
|
||||||
|
|
||||||
## 带方向的路径选择 |
|
||||||
|
|
||||||
{% method %} |
|
||||||
[source](https://jsfiddle.net/fineui/04h6gsps/) |
|
||||||
|
|
||||||
{% common %} |
|
||||||
```javascript |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.direction_path_chooser", |
|
||||||
element: "#wrapper", |
|
||||||
items: [[{ |
|
||||||
"region": "合同信息", |
|
||||||
"text": "客户ID", |
|
||||||
"value": "defa1f7ba8b2684a客户ID" |
|
||||||
}, { |
|
||||||
"region": "客户信息", |
|
||||||
"text": "主键", |
|
||||||
"value": "1f4711c201ef1842", |
|
||||||
"direction": -1 |
|
||||||
}, { |
|
||||||
"region": "合同的回款信息", |
|
||||||
"text": "合同ID", |
|
||||||
"value": "e351e9f1d8147947合同ID", |
|
||||||
"direction": -1 |
|
||||||
}]] |
|
||||||
}); |
|
||||||
``` |
|
||||||
|
|
||||||
{% endmethod %} |
|
||||||
|
|
||||||
##参数 |
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
| :------ |:------------- | :-----| :----|:----| |
|
||||||
| items |二维数组,每个元素代表一条路径,相较于[path_chooser](path_chooser.md)多一个属性direction来指定方向 | array| — | [ ]| |
|
||||||
|
|
||||||
|
|
||||||
--- |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,42 +0,0 @@ |
|||||||
# path_chooser |
|
||||||
|
|
||||||
## 路径选择 |
|
||||||
|
|
||||||
{% method %} |
|
||||||
[source](https://jsfiddle.net/fineui/5519b4xo/) |
|
||||||
|
|
||||||
{% common %} |
|
||||||
```javascript |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.path_chooser", |
|
||||||
element: "#wrapper", |
|
||||||
items: [[{ |
|
||||||
"region": "8c4460bc3605685e", |
|
||||||
"regionText": "采购订单XXX", |
|
||||||
"text": "ID", |
|
||||||
"value": "1" |
|
||||||
}, { |
|
||||||
"region": "0fbd0dc648f41e97", |
|
||||||
"regionText": "采购订单", |
|
||||||
"text": "学号", |
|
||||||
"value": "3" |
|
||||||
}, { |
|
||||||
"region": "c6d72d6c7e19a667", |
|
||||||
"regionText": "供应商基本信息", |
|
||||||
"text": "ID", |
|
||||||
"value": "5" |
|
||||||
}]] |
|
||||||
}); |
|
||||||
``` |
|
||||||
|
|
||||||
{% endmethod %} |
|
||||||
|
|
||||||
##参数 |
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
| :------ |:------------- | :-----| :----|:----| |
|
||||||
| items |二维数组,每个元素代表一条路径 | array| — | [ ] | |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
--- |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,35 +0,0 @@ |
|||||||
# relation_view |
|
||||||
|
|
||||||
## 关联视图 |
|
||||||
|
|
||||||
{% method %} |
|
||||||
[source](https://jsfiddle.net/fineui/k19mvL7q/) |
|
||||||
|
|
||||||
{% common %} |
|
||||||
```javascript |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.relation_view", |
|
||||||
items: [{ |
|
||||||
primary: { |
|
||||||
region: "B", regionText: "比", |
|
||||||
title: "b2...", |
|
||||||
value: "b2", text: "b2字段" |
|
||||||
}, |
|
||||||
foreign: {region: "C", value: "c1", text: "c1字段"} |
|
||||||
}, { |
|
||||||
primary: {region: "A", value: "a1", text: "a1字段"}, |
|
||||||
foreign: {region: "C", value: "c2", text: "c2字段"} |
|
||||||
}] |
|
||||||
}); |
|
||||||
``` |
|
||||||
|
|
||||||
{% endmethod %} |
|
||||||
|
|
||||||
##参数 |
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
| :------ |:------------- | :-----| :----|:----| |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
--- |
|
||||||
@ -1,40 +0,0 @@ |
|||||||
# direction_path_chooser |
|
||||||
|
|
||||||
## 带方向的路径选择 |
|
||||||
|
|
||||||
{% method %} |
|
||||||
[source](https://jsfiddle.net/fineui/04h6gsps/) |
|
||||||
|
|
||||||
{% common %} |
|
||||||
```javascript |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.direction_path_chooser", |
|
||||||
element: "#wrapper", |
|
||||||
items: [[{ |
|
||||||
"region": "合同信息", |
|
||||||
"text": "客户ID", |
|
||||||
"value": "defa1f7ba8b2684a客户ID" |
|
||||||
}, { |
|
||||||
"region": "客户信息", |
|
||||||
"text": "主键", |
|
||||||
"value": "1f4711c201ef1842", |
|
||||||
"direction": -1 |
|
||||||
}, { |
|
||||||
"region": "合同的回款信息", |
|
||||||
"text": "合同ID", |
|
||||||
"value": "e351e9f1d8147947合同ID", |
|
||||||
"direction": -1 |
|
||||||
}]] |
|
||||||
}); |
|
||||||
``` |
|
||||||
|
|
||||||
{% endmethod %} |
|
||||||
|
|
||||||
##参数 |
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
| :------ |:------------- | :-----| :----|:----| |
|
||||||
| items |二维数组,每个元素代表一条路径,相较于[path_chooser](path_chooser.md)多一个属性direction来指定方向 | array| — | [ ]| |
|
||||||
|
|
||||||
|
|
||||||
--- |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
# path_chooser |
|
||||||
|
|
||||||
## 路径选择 |
|
||||||
|
|
||||||
{% method %} |
|
||||||
[source](https://jsfiddle.net/fineui/5519b4xo/) |
|
||||||
|
|
||||||
{% common %} |
|
||||||
```javascript |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.path_chooser", |
|
||||||
element: "#wrapper", |
|
||||||
items: [[{ |
|
||||||
"region": "8c4460bc3605685e", |
|
||||||
"regionText": "采购订单XXX", |
|
||||||
"text": "ID", |
|
||||||
"value": "1" |
|
||||||
}, { |
|
||||||
"region": "0fbd0dc648f41e97", |
|
||||||
"regionText": "采购订单", |
|
||||||
"text": "学号", |
|
||||||
"value": "3" |
|
||||||
}, { |
|
||||||
"region": "c6d72d6c7e19a667", |
|
||||||
"regionText": "供应商基本信息", |
|
||||||
"text": "ID", |
|
||||||
"value": "5" |
|
||||||
}]] |
|
||||||
}); |
|
||||||
``` |
|
||||||
|
|
||||||
{% endmethod %} |
|
||||||
|
|
||||||
##参数 |
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
| :------ |:------------- | :-----| :----|:----| |
|
||||||
| items |二维数组,每个元素代表一条路径 | array| — | [ ] | |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
--- |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
# relation_view |
|
||||||
|
|
||||||
## 关联视图 |
|
||||||
|
|
||||||
{% method %} |
|
||||||
[source](https://jsfiddle.net/fineui/k19mvL7q/) |
|
||||||
|
|
||||||
{% common %} |
|
||||||
```javascript |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.relation_view", |
|
||||||
items: [{ |
|
||||||
primary: { |
|
||||||
region: "B", regionText: "比", |
|
||||||
title: "b2...", |
|
||||||
value: "b2", text: "b2字段" |
|
||||||
}, |
|
||||||
foreign: {region: "C", value: "c1", text: "c1字段"} |
|
||||||
}, { |
|
||||||
primary: {region: "A", value: "a1", text: "a1字段"}, |
|
||||||
foreign: {region: "C", value: "c2", text: "c2字段"} |
|
||||||
}] |
|
||||||
}); |
|
||||||
``` |
|
||||||
|
|
||||||
{% endmethod %} |
|
||||||
|
|
||||||
##参数 |
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
| :------ |:------------- | :-----| :----|:----| |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
--- |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
@import "../../index"; |
|
||||||
|
|
||||||
.bi-path-chooser { |
|
||||||
& .path-chooser-radio { |
|
||||||
z-index: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
@import "../../index"; |
|
||||||
|
|
||||||
.bi-path-region { |
|
||||||
& .path-region-label { |
|
||||||
z-index: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
@import "../../index"; |
|
||||||
|
|
||||||
.bi-relation-view-item{ |
|
||||||
& .primary-key-region{ |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,17 +0,0 @@ |
|||||||
@import "../../index"; |
|
||||||
|
|
||||||
.bi-relation-view-region { |
|
||||||
& .relation-view-region-container { |
|
||||||
z-index: 1; |
|
||||||
.border-radius(2px); |
|
||||||
& .relation-view-region-title { |
|
||||||
& .eye{ |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
& .split-line{ |
|
||||||
border-bottom: 1px solid @color-bi-border-disabled |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,243 +0,0 @@ |
|||||||
/** |
|
||||||
* 带有方向的pathchooser |
|
||||||
* |
|
||||||
* Created by GUY on 2016/4/21. |
|
||||||
* @class BI.DirectionPathChooser |
|
||||||
* @extends BI.Widget |
|
||||||
*/ |
|
||||||
BI.DirectionPathChooser = BI.inherit(BI.Widget, { |
|
||||||
|
|
||||||
_const: { |
|
||||||
lineColor: "#808080", |
|
||||||
selectLineColor: "#009de3" |
|
||||||
}, |
|
||||||
|
|
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.DirectionPathChooser.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
baseCls: "bi-excel-table", |
|
||||||
items: [] |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_init: function () { |
|
||||||
BI.DirectionPathChooser.superclass._init.apply(this, arguments); |
|
||||||
var self = this, o = this.options; |
|
||||||
this.pathChooser = BI.createWidget({ |
|
||||||
type: "bi.path_chooser", |
|
||||||
element: this, |
|
||||||
items: o.items |
|
||||||
}); |
|
||||||
this.pathChooser.on(BI.PathChooser.EVENT_CHANGE, function (start, index) { |
|
||||||
// self._unselectAllArrows();
|
|
||||||
self._setValue(start, index); |
|
||||||
self.fireEvent(BI.DirectionPathChooser.EVENT_CHANGE); |
|
||||||
}); |
|
||||||
this._drawArrows(); |
|
||||||
|
|
||||||
}, |
|
||||||
|
|
||||||
_unselectAllArrows: function () { |
|
||||||
var self = this, lineColor = this._const.lineColor; |
|
||||||
BI.each(this.arrows, function (region, rs) { |
|
||||||
BI.each(rs, function (idx, arrows) { |
|
||||||
BI.each(arrows, function (i, arrow) { |
|
||||||
arrow.attr({fill: lineColor, stroke: lineColor}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_drawOneArrow: function (dot, direction) { |
|
||||||
// 0,1,2,3 上右下左
|
|
||||||
var lineColor = this._const.lineColor; |
|
||||||
var selectLineColor = this._const.selectLineColor; |
|
||||||
var svg = this.pathChooser.svg; |
|
||||||
var path = ""; |
|
||||||
switch (direction) { |
|
||||||
case 0: |
|
||||||
path = "M" + dot.x + "," + dot.y |
|
||||||
+ "L" + (dot.x - 3) + "," + (dot.y + 5) |
|
||||||
+ "L" + (dot.x + 3) + "," + (dot.y + 5) |
|
||||||
+ "L" + dot.x + "," + dot.y; |
|
||||||
break; |
|
||||||
case 1: |
|
||||||
path = "M" + dot.x + "," + dot.y |
|
||||||
+ "L" + (dot.x - 5) + "," + (dot.y - 3) |
|
||||||
+ "L" + (dot.x - 5) + "," + (dot.y + 3) |
|
||||||
+ "L" + dot.x + "," + dot.y; |
|
||||||
break; |
|
||||||
case 2: |
|
||||||
path = "M" + dot.x + "," + dot.y |
|
||||||
+ "L" + (dot.x - 3) + "," + (dot.y - 5) |
|
||||||
+ "L" + (dot.x + 3) + "," + (dot.y - 5) |
|
||||||
+ "L" + dot.x + "," + dot.y; |
|
||||||
break; |
|
||||||
case 3: |
|
||||||
path = "M" + dot.x + "," + dot.y |
|
||||||
+ "L" + (dot.x + 5) + "," + (dot.y - 3) |
|
||||||
+ "L" + (dot.x + 5) + "," + (dot.y + 3) |
|
||||||
+ "L" + dot.x + "," + dot.y; |
|
||||||
break; |
|
||||||
} |
|
||||||
return svg.path(path).attr({fill: lineColor, stroke: lineColor}); |
|
||||||
}, |
|
||||||
|
|
||||||
_drawArrows: function () { |
|
||||||
var self = this, o = this.options; |
|
||||||
var routes = this.pathChooser.routes; |
|
||||||
var pathes = this.pathChooser.pathes; |
|
||||||
var cache = this.pathChooser.cache; |
|
||||||
this.arrows = {}; |
|
||||||
BI.each(routes, function (region, ps) { |
|
||||||
self.arrows[region] = []; |
|
||||||
BI.each(ps, function (idx, path) { |
|
||||||
self.arrows[region][idx] = []; |
|
||||||
var dots = pathes[region][idx]; |
|
||||||
BI.each(dots, function (i, dot) { |
|
||||||
if (i > 0 && i < dots.length - 1) { |
|
||||||
var arrow; |
|
||||||
if (dot.y === dots[i - 1].y) { |
|
||||||
if (dots[i + 1].y != dot.y) { |
|
||||||
if (cache[path[path.length - 2]].direction === -1) { |
|
||||||
if (i - 1 > 0) { |
|
||||||
arrow = self._drawOneArrow(dots[i - 1], 3); |
|
||||||
} |
|
||||||
} else { |
|
||||||
arrow = self._drawOneArrow(dots[i], 1); |
|
||||||
} |
|
||||||
} |
|
||||||
} else if (dot.x === dots[i - 1].x) { |
|
||||||
if (dot.y > dots[i - 1].y) { |
|
||||||
if (cache[BI.first(path)].direction === -1) { |
|
||||||
arrow = self._drawOneArrow(dots[i - 1], 0); |
|
||||||
} else { |
|
||||||
arrow = self._drawOneArrow(dot, 2); |
|
||||||
} |
|
||||||
} else { |
|
||||||
if (cache[path[path.length - 2]].direction === -1) { |
|
||||||
arrow = self._drawOneArrow(dots[i - 1], 2); |
|
||||||
} else { |
|
||||||
arrow = self._drawOneArrow(dot, 0); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
if (arrow) { |
|
||||||
self.arrows[region][idx].push(arrow); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.each(path, function (i, node) { |
|
||||||
if (i !== 0) { |
|
||||||
var arrow; |
|
||||||
var from = path[i - 1]; |
|
||||||
if (cache[from].direction === -1) { |
|
||||||
var regionIndex = self.pathChooser.getRegionIndexById(from); |
|
||||||
var x = getXoffsetByRegionIndex(regionIndex, -1); |
|
||||||
var y = getYByXoffset(dots, x); |
|
||||||
arrow = self._drawOneArrow({x: x, y: y}, 3); |
|
||||||
} else { |
|
||||||
var regionIndex = self.pathChooser.getRegionIndexById(node); |
|
||||||
var x = getXoffsetByRegionIndex(regionIndex); |
|
||||||
var y = getYByXoffset(dots, x); |
|
||||||
arrow = self._drawOneArrow({x: x, y: y}, 1); |
|
||||||
} |
|
||||||
if (arrow) { |
|
||||||
self.arrows[region][idx].push(arrow); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
function getXoffsetByRegionIndex (regionIndex, diregion) { |
|
||||||
if (diregion === -1) { |
|
||||||
return 100 * (regionIndex + 1) - 20; |
|
||||||
} |
|
||||||
return 100 * regionIndex + 20; |
|
||||||
} |
|
||||||
|
|
||||||
function getYByXoffset (dots, xoffset) { |
|
||||||
var finded = BI.find(dots, function (i, dot) { |
|
||||||
if (i > 0) { |
|
||||||
if (dots[i - 1].x < xoffset && dots[i].x > xoffset) { |
|
||||||
return true; |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
return finded.y; |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
_setValue: function (start, index) { |
|
||||||
var self = this; |
|
||||||
var lineColor = this._const.lineColor; |
|
||||||
var selectLineColor = this._const.selectLineColor; |
|
||||||
var routes = this.pathChooser.routes; |
|
||||||
var starts = this.pathChooser.start; |
|
||||||
var each = [start]; |
|
||||||
if (starts.contains(start)) { |
|
||||||
each = starts; |
|
||||||
} |
|
||||||
BI.each(each, function (i, s) { |
|
||||||
BI.each(self.arrows[s], function (j, arrows) { |
|
||||||
BI.each(arrows, function (k, arrow) { |
|
||||||
arrow.attr({fill: lineColor, stroke: lineColor}).toFront(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
BI.each(this.arrows[start][index], function (i, arrow) { |
|
||||||
arrow.attr({fill: selectLineColor, stroke: selectLineColor}).toFront(); |
|
||||||
}); |
|
||||||
var current = BI.last(routes[start][index]); |
|
||||||
while (current && routes[current] && routes[current].length === 1) { |
|
||||||
BI.each(self.arrows[current][0], function (i, arrow) { |
|
||||||
arrow.attr({fill: selectLineColor, stroke: selectLineColor}).toFront(); |
|
||||||
}); |
|
||||||
current = BI.last(routes[current][0]); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
setValue: function (v) { |
|
||||||
this.pathChooser.setValue(v); |
|
||||||
this._unselectAllArrows(); |
|
||||||
var routes = this.pathChooser.routes; |
|
||||||
var nodes = BI.keys(routes), self = this; |
|
||||||
var result = [], array = []; |
|
||||||
BI.each(v, function (i, val) { |
|
||||||
if (BI.contains(nodes, val)) { |
|
||||||
if (array.length > 0) { |
|
||||||
array.push(val); |
|
||||||
result.push(array); |
|
||||||
array = []; |
|
||||||
} |
|
||||||
} |
|
||||||
array.push(val); |
|
||||||
}); |
|
||||||
if (array.length > 0) { |
|
||||||
result.push(array); |
|
||||||
} |
|
||||||
// 画这n条路径
|
|
||||||
BI.each(result, function (idx, path) { |
|
||||||
var start = path[0]; |
|
||||||
var index = BI.findIndex(routes[start], function (idx, p) { |
|
||||||
if (BI.isEqual(path, p)) { |
|
||||||
return true; |
|
||||||
} |
|
||||||
}); |
|
||||||
if (index >= 0) { |
|
||||||
self._setValue(start, index); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
getValue: function () { |
|
||||||
return this.pathChooser.getValue(); |
|
||||||
}, |
|
||||||
|
|
||||||
populate: function (items) { |
|
||||||
this.pathChooser.populate(items); |
|
||||||
this._drawArrows(); |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.DirectionPathChooser.EVENT_CHANGE = "DirectionPathChooser.EVENT_CHANGE"; |
|
||||||
BI.shortcut("bi.direction_path_chooser", BI.DirectionPathChooser); |
|
||||||
@ -1,491 +0,0 @@ |
|||||||
/** |
|
||||||
* 路径选择 |
|
||||||
* |
|
||||||
* Created by GUY on 2015/12/4. |
|
||||||
* @class BI.PathChooser |
|
||||||
* @extends BI.Widget |
|
||||||
*/ |
|
||||||
BI.PathChooser = BI.inherit(BI.Widget, { |
|
||||||
|
|
||||||
_const: { |
|
||||||
lineColor: "#d4dadd", |
|
||||||
selectLineColor: "#3f8ce8" |
|
||||||
}, |
|
||||||
|
|
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.PathChooser.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
baseCls: "bi-path-chooser", |
|
||||||
items: [] |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_init: function () { |
|
||||||
BI.PathChooser.superclass._init.apply(this, arguments); |
|
||||||
this.populate(this.options.items); |
|
||||||
}, |
|
||||||
|
|
||||||
_createRegions: function (regions) { |
|
||||||
var self = this; |
|
||||||
this.regions = BI.createWidgets(BI.map(regions, function (i, region) { |
|
||||||
return { |
|
||||||
type: "bi.path_region", |
|
||||||
title: self.texts[region] || region |
|
||||||
}; |
|
||||||
})); |
|
||||||
this.regionMap = {}; |
|
||||||
BI.each(regions, function (i, region) { |
|
||||||
self.regionMap[region] = i; |
|
||||||
}); |
|
||||||
this.container = BI.createWidget({ |
|
||||||
type: "bi.horizontal", |
|
||||||
verticalAlign: "top", |
|
||||||
scrollx: false, |
|
||||||
scrolly: false, |
|
||||||
hgap: 10, |
|
||||||
items: this.regions |
|
||||||
}); |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.vertical_adapt", |
|
||||||
element: this, |
|
||||||
scrollable: true, |
|
||||||
hgap: 10, |
|
||||||
items: [this.container] |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
getRegionIndexById: function (id) { |
|
||||||
var node = this.cache[id]; |
|
||||||
var regionType = node.get("region"); |
|
||||||
return this.regionMap[regionType]; |
|
||||||
}, |
|
||||||
|
|
||||||
_drawPath: function (start, offset, index) { |
|
||||||
var self = this; |
|
||||||
var starts = []; |
|
||||||
if (BI.contains(this.start, start)) { |
|
||||||
starts = this.start; |
|
||||||
} else { |
|
||||||
starts = [start]; |
|
||||||
} |
|
||||||
|
|
||||||
BI.each(starts, function (i, s) { |
|
||||||
BI.each(self.radios[s], function (i, rad) { |
|
||||||
rad.setSelected(false); |
|
||||||
}); |
|
||||||
BI.each(self.lines[s], function (i, line) { |
|
||||||
line.attr("stroke", self._const.lineColor); |
|
||||||
}); |
|
||||||
BI.each(self.regionIndexes[s], function (i, idx) { |
|
||||||
self.regions[idx].reset(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
BI.each(this.routes[start][index], function (i, id) { |
|
||||||
var regionIndex = self.getRegionIndexById(id); |
|
||||||
self.regions[regionIndex].setSelect(offset + index, id); |
|
||||||
}); |
|
||||||
var current = BI.last(this.routes[start][index]); |
|
||||||
|
|
||||||
while (current && this.routes[current] && this.routes[current].length === 1) { |
|
||||||
BI.each(this.routes[current][0], function (i, id) { |
|
||||||
var regionIndex = self.getRegionIndexById(id); |
|
||||||
self.regions[regionIndex].setSelect(0, id); |
|
||||||
}); |
|
||||||
this.lines[current][0].attr("stroke", self._const.selectLineColor).toFront(); |
|
||||||
current = BI.last(this.routes[current][0]); |
|
||||||
} |
|
||||||
this.lines[start][index].attr("stroke", self._const.selectLineColor).toFront(); |
|
||||||
this.radios[start] && this.radios[start][index] && this.radios[start][index].setSelected(true); |
|
||||||
}, |
|
||||||
|
|
||||||
_drawRadio: function (start, offset, index, x, y) { |
|
||||||
var self = this; |
|
||||||
var radio = BI.createWidget({ |
|
||||||
type: "bi.radio", |
|
||||||
cls: "path-chooser-radio", |
|
||||||
selected: offset + index === 0, |
|
||||||
start: start, |
|
||||||
index: index |
|
||||||
}); |
|
||||||
radio.on(BI.Radio.EVENT_CHANGE, function () { |
|
||||||
self._drawPath(start, offset, index); |
|
||||||
self.fireEvent(BI.PathChooser.EVENT_CHANGE, start, index); |
|
||||||
}); |
|
||||||
if (!this.radios[start]) { |
|
||||||
this.radios[start] = []; |
|
||||||
} |
|
||||||
this.radios[start].push(radio); |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.absolute", |
|
||||||
element: this.container, |
|
||||||
items: [{ |
|
||||||
el: radio, |
|
||||||
left: x - 6.5, |
|
||||||
top: y - 6.5 |
|
||||||
}] |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_drawLine: function (start, lines) { |
|
||||||
var self = this; |
|
||||||
if (!this.lines[start]) { |
|
||||||
this.lines[start] = []; |
|
||||||
} |
|
||||||
if (!this.pathes[start]) { |
|
||||||
this.pathes[start] = []; |
|
||||||
} |
|
||||||
var startRegionIndex = this.getRegionIndexById(start); |
|
||||||
// start所在的位置，然后接着往下画其他的路径
|
|
||||||
var offset = this.regions[startRegionIndex].getIndexByValue(start); |
|
||||||
BI.each(lines, function (i, line) { |
|
||||||
self.pathes[start][i] = []; |
|
||||||
var idx = i + offset; |
|
||||||
var path = ""; |
|
||||||
var stop = 47.5 + 29 * idx; |
|
||||||
var sleft = 50 + 100 * startRegionIndex; |
|
||||||
var radioStartX = sleft, radioStartY = stop; |
|
||||||
var etop = stop; |
|
||||||
var endRegionIndex = self.getRegionIndexById(BI.last(line)); |
|
||||||
var endOffset = self.regions[endRegionIndex].getIndexByValue(BI.last(line)); |
|
||||||
var eleft = 50 + 100 * endRegionIndex; |
|
||||||
if (BI.contains(self.start, start)) { |
|
||||||
radioStartX = sleft - 50; |
|
||||||
path += "M" + (sleft - 50) + "," + stop; |
|
||||||
self.pathes[start][i].push({ |
|
||||||
x: sleft - 50, |
|
||||||
y: stop |
|
||||||
}); |
|
||||||
} else if (idx === 0) { |
|
||||||
radioStartX = sleft + 50; |
|
||||||
path += "M" + sleft + "," + stop; |
|
||||||
self.pathes[start][i].push({ |
|
||||||
x: sleft, |
|
||||||
y: stop |
|
||||||
}); |
|
||||||
} else { |
|
||||||
radioStartX = sleft + 50; |
|
||||||
path += "M" + sleft + "," + 47.5 + "L" + (sleft + 50) + "," + 47.5 + "L" + (sleft + 50) + "," + stop; |
|
||||||
self.pathes[start][i].push({ |
|
||||||
x: sleft, |
|
||||||
y: 47.5 |
|
||||||
}); |
|
||||||
self.pathes[start][i].push({ |
|
||||||
x: sleft + 50, |
|
||||||
y: 47.5 |
|
||||||
}); |
|
||||||
self.pathes[start][i].push({ |
|
||||||
x: sleft + 50, |
|
||||||
y: stop |
|
||||||
}); |
|
||||||
} |
|
||||||
if (idx > 0) { |
|
||||||
var endY = endOffset * 29 + 47.5; |
|
||||||
path += "L" + (eleft - 50) + "," + etop + "L" + (eleft - 50) + "," + endY + "L" + eleft + "," + endY; |
|
||||||
self.pathes[start][i].push({ |
|
||||||
x: eleft - 50, |
|
||||||
y: etop |
|
||||||
}); |
|
||||||
self.pathes[start][i].push({ |
|
||||||
x: eleft - 50, |
|
||||||
y: endY |
|
||||||
}); |
|
||||||
self.pathes[start][i].push({ |
|
||||||
x: eleft, |
|
||||||
y: endY |
|
||||||
}); |
|
||||||
} else { |
|
||||||
path += "L" + eleft + "," + etop; |
|
||||||
self.pathes[start][i].push({ |
|
||||||
x: eleft, |
|
||||||
y: etop |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
var graph = self.svg.path(path) |
|
||||||
.attr({ |
|
||||||
stroke: idx === 0 ? self._const.selectLineColor : self._const.lineColor, |
|
||||||
"stroke-dasharray": "-" |
|
||||||
}); |
|
||||||
self.lines[start].push(graph); |
|
||||||
if (lines.length > 1) { |
|
||||||
self.lines[start][0].toFront(); |
|
||||||
} |
|
||||||
// 第一个元素无论有多少个都要显示radio
|
|
||||||
if (BI.contains(self.start, start)) { |
|
||||||
self.lines[self.regions[0].getValueByIndex(0)][0].toFront(); |
|
||||||
} |
|
||||||
if (lines.length > 1 || BI.contains(self.start, start)) { |
|
||||||
self._drawRadio(start, offset, i, radioStartX, radioStartY); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_drawLines: function (routes) { |
|
||||||
var self = this; |
|
||||||
this.lines = {}; |
|
||||||
this.pathes = {}; |
|
||||||
this.radios = {}; |
|
||||||
this.regionIndexes = {}; |
|
||||||
BI.each(routes, function (k, route) { |
|
||||||
if (!self.regionIndexes[k]) { |
|
||||||
self.regionIndexes[k] = []; |
|
||||||
} |
|
||||||
BI.each(route, function (i, rs) { |
|
||||||
BI.each(rs, function (j, id) { |
|
||||||
var regionIndex = self.getRegionIndexById(id); |
|
||||||
if (!BI.contains(self.regionIndexes[k], regionIndex)) { |
|
||||||
self.regionIndexes[k].push(regionIndex); |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
BI.each(routes, function (k, route) { |
|
||||||
self._drawLine(k, route); |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_pushNodes: function (nodes) { |
|
||||||
var self = this; |
|
||||||
var indexes = []; |
|
||||||
for (var i = 0; i < nodes.length; i++) { |
|
||||||
var id = nodes[i]; |
|
||||||
var index = self.getRegionIndexById(id); |
|
||||||
indexes.push(index); |
|
||||||
var region = self.regions[index]; |
|
||||||
if (i === nodes.length - 1) { |
|
||||||
if (!region.hasItem(id)) { |
|
||||||
region.addItem(id, self.texts[id]); |
|
||||||
} |
|
||||||
break; |
|
||||||
} |
|
||||||
if (i > 0 || BI.contains(self.start, id)) { |
|
||||||
region.addItem(id, self.texts[id]); |
|
||||||
} |
|
||||||
} |
|
||||||
for (var i = BI.first(indexes); i < BI.last(indexes); i++) { |
|
||||||
if (!BI.contains(indexes, i)) { |
|
||||||
self.regions[i].addItem(""); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
_createNodes: function () { |
|
||||||
var self = this, o = this.options; |
|
||||||
this.cache = {}; |
|
||||||
this.texts = {}; |
|
||||||
this.start = []; |
|
||||||
this.end = []; |
|
||||||
BI.each(o.items, function (i, item) { |
|
||||||
self.start.push(BI.first(item).value); |
|
||||||
self.end.push(BI.last(item).value); |
|
||||||
}); |
|
||||||
this.start = BI.uniq(this.start); |
|
||||||
this.end = BI.uniq(this.end); |
|
||||||
var regions = []; |
|
||||||
var tree = new BI.Tree(); |
|
||||||
var branches = {}, max = 0; |
|
||||||
BI.each(o.items, function (i, items) { |
|
||||||
BI.each(items, function (j, item) { |
|
||||||
if (!BI.has(branches, item.value)) { |
|
||||||
branches[item.value] = 0; |
|
||||||
} |
|
||||||
branches[item.value]++; |
|
||||||
max = Math.max(max, branches[item.value]); |
|
||||||
var prev = {}; |
|
||||||
if (j > 0) { |
|
||||||
prev = items[j - 1]; |
|
||||||
} |
|
||||||
var parent = self.cache[prev.value || ""]; |
|
||||||
var node = self.cache[item.value] || new BI.Node(item.value); |
|
||||||
node.set(item); |
|
||||||
self.cache[item.value] = node; |
|
||||||
self.texts[item.value] = item.text; |
|
||||||
self.texts[item.region] = item.regionText; |
|
||||||
parent = BI.isNull(parent) ? tree.getRoot() : parent; |
|
||||||
if (parent.getChildIndex(item.value) === -1) { |
|
||||||
tree.addNode(parent, node); |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
// 算出区域列表
|
|
||||||
tree.traverse(function (node) { |
|
||||||
BI.each(node.getChildren(), function (i, child) { |
|
||||||
if (BI.contains(regions, child.get("region"))) { |
|
||||||
var index1 = BI.indexOf(regions, node.get("region")); |
|
||||||
var index2 = BI.indexOf(regions, child.get("region")); |
|
||||||
// 交换区域
|
|
||||||
if (index1 > index2) { |
|
||||||
var t = regions[index2]; |
|
||||||
for (var j = index2; j < index1; j++) { |
|
||||||
regions[j] = regions[j + 1]; |
|
||||||
} |
|
||||||
regions[index1] = t; |
|
||||||
} |
|
||||||
} else { |
|
||||||
regions.push(child.get("region")); |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
this._createRegions(regions); |
|
||||||
|
|
||||||
// 算出节点
|
|
||||||
BI.each(branches, function (k, branch) { |
|
||||||
if (branch < max) { |
|
||||||
delete branches[k]; |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
// 过滤节点
|
|
||||||
var nodes = []; |
|
||||||
var n = tree.getRoot(); |
|
||||||
while (n && n.getChildrenLength() === 1) { |
|
||||||
if (BI.has(branches, n.getChildren()[0].id)) { |
|
||||||
delete branches[n.getChildren()[0].id]; |
|
||||||
n = n.getChildren()[0]; |
|
||||||
} else { |
|
||||||
n = null; |
|
||||||
} |
|
||||||
} |
|
||||||
tree.traverse(function (node) { |
|
||||||
if (BI.has(branches, node.id)) { |
|
||||||
nodes.push(node.id); |
|
||||||
delete branches[node.id]; |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
// 填充节点
|
|
||||||
var routes = {}; |
|
||||||
var s, e; |
|
||||||
for (var i = 0, len = nodes.length; i < len + 1; i++) { |
|
||||||
if (len === 0) { |
|
||||||
s = []; |
|
||||||
BI.each(this.start, function (i, id) { |
|
||||||
s.push(tree.search(id)); |
|
||||||
}); |
|
||||||
e = []; |
|
||||||
BI.each(this.end, function (i, id) { |
|
||||||
e.push(tree.search(id)); |
|
||||||
}); |
|
||||||
} else if (i === len) { |
|
||||||
s = e; |
|
||||||
e = []; |
|
||||||
BI.each(this.end, function (i, id) { |
|
||||||
e.push(tree.search(id)); |
|
||||||
}); |
|
||||||
} else if (i === 0) { |
|
||||||
s = []; |
|
||||||
BI.each(this.start, function (i, id) { |
|
||||||
s.push(tree.search(id)); |
|
||||||
}); |
|
||||||
e = [tree.search(nodes[i])]; |
|
||||||
} else { |
|
||||||
s = [tree.search(e[0] || tree.getRoot(), nodes[i - 1])]; |
|
||||||
e = [tree.search(s[0], nodes[i])]; |
|
||||||
} |
|
||||||
BI.each(s, function (i, n) { |
|
||||||
tree._recursion(n, [n.id], function (node, route) { |
|
||||||
if (BI.contains(e, node)) { |
|
||||||
if (!routes[n.id]) { |
|
||||||
routes[n.id] = []; |
|
||||||
} |
|
||||||
routes[n.id].push(route); |
|
||||||
self._pushNodes(route); |
|
||||||
if (e.length <= 1) { |
|
||||||
return true; |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
} |
|
||||||
this.routes = routes; |
|
||||||
this._drawLines(routes); |
|
||||||
}, |
|
||||||
|
|
||||||
_unselectAllPath: function () { |
|
||||||
var self = this; |
|
||||||
BI.each(this.radios, function (idx, rad) { |
|
||||||
BI.each(rad, function (i, r) { |
|
||||||
r.setSelected(false); |
|
||||||
}); |
|
||||||
}); |
|
||||||
BI.each(this.lines, function (idx, line) { |
|
||||||
BI.each(line, function (i, li) { |
|
||||||
li.attr("stroke", self._const.lineColor); |
|
||||||
}); |
|
||||||
}); |
|
||||||
BI.each(this.regions, function (idx, region) { |
|
||||||
region.reset(); |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
populate: function (items) { |
|
||||||
this.options.items = items || []; |
|
||||||
var self = this; |
|
||||||
this.empty(); |
|
||||||
if (this.options.items.length <= 0) { |
|
||||||
return; |
|
||||||
} |
|
||||||
this.svg = BI.createWidget({ |
|
||||||
type: "bi.svg" |
|
||||||
}); |
|
||||||
this._createNodes(); |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.absolute", |
|
||||||
element: this.container, |
|
||||||
items: [{ |
|
||||||
el: this.svg, |
|
||||||
top: 0, |
|
||||||
left: 0, |
|
||||||
right: 0, |
|
||||||
bottom: 0 |
|
||||||
}] |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
setValue: function (v) { |
|
||||||
this._unselectAllPath(); |
|
||||||
var nodes = BI.keys(this.routes), self = this; |
|
||||||
var result = [], array = []; |
|
||||||
BI.each(v, function (i, val) { |
|
||||||
if (BI.contains(nodes, val)) { |
|
||||||
if (array.length > 0) { |
|
||||||
array.push(val); |
|
||||||
result.push(array); |
|
||||||
array = []; |
|
||||||
} |
|
||||||
} |
|
||||||
array.push(val); |
|
||||||
}); |
|
||||||
if (array.length > 0) { |
|
||||||
result.push(array); |
|
||||||
} |
|
||||||
// 画这n条路径
|
|
||||||
BI.each(result, function (idx, path) { |
|
||||||
var start = path[0]; |
|
||||||
var index = BI.findIndex(self.routes[start], function (idx, p) { |
|
||||||
if (BI.isEqual(path, p)) { |
|
||||||
return true; |
|
||||||
} |
|
||||||
}); |
|
||||||
if (index >= 0) { |
|
||||||
var startRegionIndex = self.getRegionIndexById(start); |
|
||||||
var offset = self.regions[startRegionIndex].getIndexByValue(start); |
|
||||||
self._drawPath(start, offset, index); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
getValue: function () { |
|
||||||
var path = []; |
|
||||||
BI.each(this.regions, function (i, region) { |
|
||||||
var val = region.getValue(); |
|
||||||
if (BI.isKey(val)) { |
|
||||||
path.push(val); |
|
||||||
} |
|
||||||
}); |
|
||||||
return path; |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.PathChooser.EVENT_CHANGE = "PathChooser.EVENT_CHANGE"; |
|
||||||
BI.shortcut("bi.path_chooser", BI.PathChooser); |
|
||||||
@ -1,115 +0,0 @@ |
|||||||
/** |
|
||||||
* 路径选择区域 |
|
||||||
* |
|
||||||
* Created by GUY on 2015/12/4. |
|
||||||
* @class BI.PathRegion |
|
||||||
* @extends BI.Widget |
|
||||||
*/ |
|
||||||
BI.PathRegion = BI.inherit(BI.Widget, { |
|
||||||
|
|
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.PathRegion.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
baseCls: "bi-path-region bi-background", |
|
||||||
width: 80, |
|
||||||
title: "" |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_init: function () { |
|
||||||
BI.PathRegion.superclass._init.apply(this, arguments); |
|
||||||
var self = this, o = this.options; |
|
||||||
this.zIndex = 100; |
|
||||||
var title = BI.createWidget({ |
|
||||||
type: "bi.label", |
|
||||||
text: o.title, |
|
||||||
title: o.title, |
|
||||||
height: 30 |
|
||||||
}); |
|
||||||
title.element.css("zIndex", this.zIndex--); |
|
||||||
this.items = []; |
|
||||||
this.vertical = BI.createWidget({ |
|
||||||
type: "bi.vertical", |
|
||||||
element: this, |
|
||||||
bgap: 5, |
|
||||||
hgap: 10, |
|
||||||
items: [title] |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
hasItem: function (val) { |
|
||||||
return BI.any(this.items, function (i, item) { |
|
||||||
return val === item.getValue(); |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
addItem: function (value, text) { |
|
||||||
if (BI.isKey(value)) { |
|
||||||
var label = BI.createWidget({ |
|
||||||
type: "bi.label", |
|
||||||
cls: "path-region-label bi-card bi-border bi-list-item-select", |
|
||||||
text: text, |
|
||||||
value: value, |
|
||||||
title: text || value, |
|
||||||
height: 24 |
|
||||||
}); |
|
||||||
} else { |
|
||||||
var label = BI.createWidget({ |
|
||||||
type: "bi.layout", |
|
||||||
height: 24 |
|
||||||
}); |
|
||||||
} |
|
||||||
label.element.css("zIndex", this.zIndex--); |
|
||||||
this.items.push(label); |
|
||||||
this.vertical.addItem(label); |
|
||||||
if (this.items.length === 1) { |
|
||||||
this.setSelect(0, value); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
reset: function () { |
|
||||||
BI.each(this.items, function (i, item) { |
|
||||||
item.element.removeClass("active"); |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
setSelect: function (index, value) { |
|
||||||
this.reset(); |
|
||||||
if (this.items.length <= 0) { |
|
||||||
return; |
|
||||||
} |
|
||||||
if (this.items.length === 1) { |
|
||||||
this.items[0].element.addClass("active"); |
|
||||||
return; |
|
||||||
} |
|
||||||
if (this.items[index].attr("value") === value) { |
|
||||||
this.items[index].element.addClass("active"); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
setValue: function (value) { |
|
||||||
this.setSelect(this.getIndexByValue(value), value); |
|
||||||
}, |
|
||||||
|
|
||||||
getValueByIndex: function (idx) { |
|
||||||
return this.items[idx].attr("value"); |
|
||||||
}, |
|
||||||
|
|
||||||
getIndexByValue: function (value) { |
|
||||||
return BI.findIndex(this.items, function (i, item) { |
|
||||||
return item.attr("value") === value; |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
getValue: function () { |
|
||||||
var res; |
|
||||||
BI.any(this.items, function (i, item) { |
|
||||||
if (item.element.hasClass("active")) { |
|
||||||
res = item.getValue(); |
|
||||||
return true; |
|
||||||
} |
|
||||||
}); |
|
||||||
return res; |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.PathRegion.EVENT_CHANGE = "PathRegion.EVENT_CHANGE"; |
|
||||||
BI.shortcut("bi.path_region", BI.PathRegion); |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
/** |
|
||||||
* 关联视图字段Item |
|
||||||
* |
|
||||||
* Created by GUY on 2015/12/23. |
|
||||||
* @class BI.RelationViewItem |
|
||||||
* @extends BI.Widget |
|
||||||
*/ |
|
||||||
BI.RelationViewItem = BI.inherit(BI.BasicButton, { |
|
||||||
|
|
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.RelationViewItem.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
baseCls: "bi-relation-view-item bi-list-item-active", |
|
||||||
hoverIn: BI.emptyFn, |
|
||||||
hoverOut: BI.emptyFn |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_init: function () { |
|
||||||
BI.RelationViewItem.superclass._init.apply(this, arguments); |
|
||||||
var self = this, o = this.options; |
|
||||||
this.element.hover(o.hoverIn, o.hoverOut); |
|
||||||
o.text = BI.isArray(o.text) ? o.text : [o.text]; |
|
||||||
var body = []; |
|
||||||
var header = { |
|
||||||
type: "bi.vertical_adapt", |
|
||||||
items: [{ |
|
||||||
type: "bi.center_adapt", |
|
||||||
cls: o.isPrimary ? "primary-key-region primary-key-font" : "", |
|
||||||
items: [{ |
|
||||||
type: "bi.icon", |
|
||||||
title: o.isPrimary ? BI.i18nText("BI-Primary_Key") : "" |
|
||||||
}], |
|
||||||
width: 36, |
|
||||||
height: 16 |
|
||||||
}, { |
|
||||||
type: "bi.label", |
|
||||||
text: o.text.length > 1 ? BI.i18nText("BI-Basic_Union_Relation") : o.text[0], |
|
||||||
value: o.value, |
|
||||||
height: 24, |
|
||||||
textAlign: "left" |
|
||||||
}] |
|
||||||
}; |
|
||||||
if(o.text.length > 1){ |
|
||||||
body = BI.map(o.text, function (idx, text) { |
|
||||||
return { |
|
||||||
el: { |
|
||||||
type: "bi.label", |
|
||||||
text: text, |
|
||||||
value: o.value, |
|
||||||
height: 24, |
|
||||||
textAlign: "left" |
|
||||||
}, |
|
||||||
lgap: 49 |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.vertical", |
|
||||||
element: this, |
|
||||||
items: BI.concat([header], body) |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
enableHover: function (opt) { |
|
||||||
BI.RelationViewRegion.superclass.enableHover.apply(this, [{ |
|
||||||
container: "body" |
|
||||||
}]); |
|
||||||
}, |
|
||||||
|
|
||||||
setSelected: function (b) { |
|
||||||
this.element[b ? "addClass" : "removeClass"]("active"); |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.shortcut("bi.relation_view_item", BI.RelationViewItem); |
|
||||||
@ -1,289 +0,0 @@ |
|||||||
/** |
|
||||||
* 关联视图 |
|
||||||
* |
|
||||||
* Created by GUY on 2015/12/22. |
|
||||||
* @class BI.RelationView |
|
||||||
* @extends BI.Widget |
|
||||||
*/ |
|
||||||
BI.RelationView = BI.inherit(BI.Widget, { |
|
||||||
|
|
||||||
_const: { |
|
||||||
lineColor: "#c4c6c6", |
|
||||||
selectLineColor: "#009de3" |
|
||||||
}, |
|
||||||
|
|
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.RelationView.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
baseCls: "bi-relation-view", |
|
||||||
items: [] |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_init: function () { |
|
||||||
BI.RelationView.superclass._init.apply(this, arguments); |
|
||||||
this.populate(this.options.items); |
|
||||||
}, |
|
||||||
|
|
||||||
_calculateWidths: function () { |
|
||||||
var widths = []; |
|
||||||
BI.each(this.views, function (i, items) { |
|
||||||
BI.each(items, function (j, obj) { |
|
||||||
if (!widths[j]) { |
|
||||||
widths[j] = BI.MIN; |
|
||||||
} |
|
||||||
widths[j] = Math.max(widths[j], obj.getWidth()); |
|
||||||
}); |
|
||||||
}); |
|
||||||
return widths; |
|
||||||
}, |
|
||||||
|
|
||||||
_calculateHeights: function () { |
|
||||||
var heights = BI.makeArray(BI.size(this.views), BI.MIN); |
|
||||||
BI.each(this.views, function (i, items) { |
|
||||||
BI.each(items, function (j, obj) { |
|
||||||
heights[i] = Math.max(heights[i], obj.getHeight()); |
|
||||||
}); |
|
||||||
}); |
|
||||||
return heights; |
|
||||||
}, |
|
||||||
|
|
||||||
_hoverIn: function (target) { |
|
||||||
var self = this, c = this._const; |
|
||||||
BI.each(this.relations, function (start, rs) { |
|
||||||
BI.each(rs, function (end, relation) { |
|
||||||
if (relation[0].primary.value === target || relation[0].foreign.value === target) { |
|
||||||
self.lines[start][end].attr("stroke", c.selectLineColor).toFront(); |
|
||||||
self.storeViews[start].setValue(relation[0].primary.value); |
|
||||||
self.storeViews[end].setValue(relation[0].foreign.value); |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_hoverOut: function (target) { |
|
||||||
var self = this, c = this._const; |
|
||||||
BI.each(this.relations, function (start, rs) { |
|
||||||
BI.each(rs, function (end, relation) { |
|
||||||
if (relation[0].primary.value === target || relation[0].foreign.value === target) { |
|
||||||
self.lines[start][end].attr("stroke", c.lineColor); |
|
||||||
self.storeViews[start].setValue([]); |
|
||||||
self.storeViews[end].setValue([]); |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
populate: function (items) { |
|
||||||
var self = this, o = this.options, c = this._const; |
|
||||||
o.items = items || []; |
|
||||||
this.empty(); |
|
||||||
this.svg = BI.createWidget({ |
|
||||||
type: "bi.svg" |
|
||||||
}); |
|
||||||
|
|
||||||
// 算出所有的区域和关联
|
|
||||||
var regions = this.regions = {}, relations = this.relations = {}; |
|
||||||
BI.each(items, function (i, item) { |
|
||||||
var pr = item.primary.region, fr = item.foreign && item.foreign.region; |
|
||||||
if (pr && !relations[pr]) { |
|
||||||
relations[pr] = {}; |
|
||||||
} |
|
||||||
if (pr && fr && !relations[pr][fr]) { |
|
||||||
relations[pr][fr] = []; |
|
||||||
} |
|
||||||
if (pr && !regions[pr]) { |
|
||||||
regions[pr] = []; |
|
||||||
} |
|
||||||
if (fr && !regions[fr]) { |
|
||||||
regions[fr] = []; |
|
||||||
} |
|
||||||
if (pr && !BI.deepContains(regions[pr], item.primary)) { |
|
||||||
regions[pr].push(item.primary); |
|
||||||
} |
|
||||||
if (fr && !BI.deepContains(regions[fr], item.foreign)) { |
|
||||||
regions[fr].push(item.foreign); |
|
||||||
} |
|
||||||
pr && fr && relations[pr][fr].push(item); |
|
||||||
}); |
|
||||||
// 求拓扑
|
|
||||||
var topology = []; |
|
||||||
var rs = BI.clone(regions), store = {}; |
|
||||||
while (!BI.isEmpty(rs)) { |
|
||||||
var clone = BI.clone(rs); |
|
||||||
BI.each(o.items, function (i, item) { |
|
||||||
if (!store[item.primary.region]) { |
|
||||||
delete clone[item.foreign && item.foreign.region]; |
|
||||||
} |
|
||||||
}); |
|
||||||
topology.push(BI.keys(clone)); |
|
||||||
BI.extend(store, clone); |
|
||||||
BI.each(clone, function (k, v) { |
|
||||||
delete rs[k]; |
|
||||||
}); |
|
||||||
} |
|
||||||
// 构建视图
|
|
||||||
var views = this.views = {}, storeViews = this.storeViews = {}, indexes = this.indexes = {}; |
|
||||||
var verticals = []; |
|
||||||
BI.each(topology, function (i, items) { |
|
||||||
if (!views[i]) { |
|
||||||
views[i] = {}; |
|
||||||
} |
|
||||||
var horizontal = []; |
|
||||||
BI.each(items, function (j, region) { |
|
||||||
var items = regions[region]; |
|
||||||
views[i][j] = storeViews[region] = BI.createWidget({ |
|
||||||
type: "bi.relation_view_region_container", |
|
||||||
value: region, |
|
||||||
header: items[0].regionTitle, |
|
||||||
text: items.length > 0 ? items[0].regionText : "", |
|
||||||
handler: items.length > 0 ? items[0].regionHandler : BI.emptyFn, |
|
||||||
isView: items[0].isView, |
|
||||||
keyword: items[0].keyword, |
|
||||||
items: items, |
|
||||||
disabled: items[0].disabled |
|
||||||
}); |
|
||||||
views[i][j].on(BI.RelationViewRegionContainer.EVENT_HOVER_IN, function (v) { |
|
||||||
self._hoverIn(v); |
|
||||||
}); |
|
||||||
views[i][j].on(BI.RelationViewRegionContainer.EVENT_HOVER_OUT, function (v) { |
|
||||||
self._hoverOut(v); |
|
||||||
}); |
|
||||||
views[i][j].on(BI.RelationViewRegionContainer.EVENT_PREVIEW, function (v) { |
|
||||||
self.fireEvent(BI.RelationView.EVENT_PREVIEW, region, v); |
|
||||||
}); |
|
||||||
indexes[region] = {i: i, j: j}; |
|
||||||
horizontal.push(views[i][j]); |
|
||||||
}); |
|
||||||
verticals.push({ |
|
||||||
type: "bi.horizontal", |
|
||||||
items: horizontal |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
// 求每一行的高度
|
|
||||||
var heights = this._calculateHeights(); |
|
||||||
|
|
||||||
// 求每一列的宽度
|
|
||||||
var widths = this._calculateWidths(); |
|
||||||
|
|
||||||
// 求相对宽度和高度
|
|
||||||
var offsetWidths = [0], offsetHeights = [0]; |
|
||||||
BI.each(heights, function (i, h) { |
|
||||||
if (i === 0) { |
|
||||||
return; |
|
||||||
} |
|
||||||
offsetHeights[i] = offsetHeights[i - 1] + heights[i - 1]; |
|
||||||
}); |
|
||||||
BI.each(widths, function (i, w) { |
|
||||||
if (i === 0) { |
|
||||||
return; |
|
||||||
} |
|
||||||
offsetWidths[i] = offsetWidths[i - 1] + widths[i - 1]; |
|
||||||
}); |
|
||||||
|
|
||||||
// 画线
|
|
||||||
var lines = this.lines = {};// 缓存所有的线
|
|
||||||
BI.each(relations, function (start, rs) { |
|
||||||
BI.each(rs, function (end, relation) { |
|
||||||
var startIndex = indexes[start], endIndex = indexes[end]; |
|
||||||
var top = 0, right = 1, bottom = 2, left = 3; |
|
||||||
var startDirection = bottom, endDirection = top; |
|
||||||
// if (startIndex.j > endIndex.j) {
|
|
||||||
// startDirection = left;
|
|
||||||
// endDirection = right;
|
|
||||||
// } else if (startIndex.j < endIndex.j) {
|
|
||||||
// startDirection = right;
|
|
||||||
// endDirection = left;
|
|
||||||
// } else if (startIndex.i < endIndex.i) {
|
|
||||||
// startDirection = bottom;
|
|
||||||
// endDirection = top;
|
|
||||||
// } else if (startIndex.i > endIndex.i) {
|
|
||||||
// startDirection = top;
|
|
||||||
// endDirection = bottom;
|
|
||||||
// }
|
|
||||||
var draw = function (i, j, direction, isForeign) { |
|
||||||
var x = offsetWidths[j] + (widths[j] - views[i][j].getWidth()) / 2; |
|
||||||
var y = offsetHeights[i]; |
|
||||||
var path = "", position; |
|
||||||
switch (direction) { |
|
||||||
case top: |
|
||||||
position = isForeign ? views[i][j].getTopRightPosition() : views[i][j].getTopLeftPosition(); |
|
||||||
x += position.x; |
|
||||||
y += position.y; |
|
||||||
path = "M" + x + "," + y + "L" + x + "," + (y - 10); |
|
||||||
y -= 10; |
|
||||||
break; |
|
||||||
case right: |
|
||||||
position = views[i][j].getRightPosition(); |
|
||||||
x += position.x; |
|
||||||
y += position.y; |
|
||||||
path = "M" + x + "," + y + "L" + (x + 10) + "," + y; |
|
||||||
x += 10; |
|
||||||
break; |
|
||||||
case bottom: |
|
||||||
position = views[i][j].getBottomPosition(); |
|
||||||
x += position.x; |
|
||||||
y += position.y; |
|
||||||
path = "M" + x + "," + y + "L" + x + "," + (y + 10); |
|
||||||
y += 10; |
|
||||||
break; |
|
||||||
case left: |
|
||||||
position = views[i][j].getLeftPosition(); |
|
||||||
x += position.x; |
|
||||||
y += position.y; |
|
||||||
path = "M" + x + "," + y + "L" + (x - 10) + "," + y; |
|
||||||
x -= 10; |
|
||||||
break; |
|
||||||
} |
|
||||||
return {x: x, y: y, path: path}; |
|
||||||
}; |
|
||||||
var path = ""; |
|
||||||
var si = draw(startIndex.i, startIndex.j, startDirection); |
|
||||||
var ei = draw(endIndex.i, endIndex.j, endDirection, true); |
|
||||||
path += si.path + ei.path; |
|
||||||
if (!lines[start]) { |
|
||||||
lines[start] = {}; |
|
||||||
} |
|
||||||
path += "M" + si.x + "," + si.y + "L" + ei.x + "," + ei.y; |
|
||||||
var line = lines[start][end] = self.svg.path(path) |
|
||||||
.attr({stroke: c.lineColor, "stroke-width": "2"}) |
|
||||||
.hover(function () { |
|
||||||
line.attr("stroke", c.selectLineColor).toFront(); |
|
||||||
storeViews[start].setValue(relation[0].primary.value); |
|
||||||
storeViews[end].setValue(relation[0].foreign.value); |
|
||||||
}, function () { |
|
||||||
line.attr("stroke", c.lineColor); |
|
||||||
storeViews[start].setValue([]); |
|
||||||
storeViews[end].setValue([]); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
var container = BI.createWidget(); |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.vertical", |
|
||||||
element: container, |
|
||||||
items: verticals |
|
||||||
}); |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.absolute", |
|
||||||
element: container, |
|
||||||
items: [{ |
|
||||||
el: this.svg, |
|
||||||
left: 0, |
|
||||||
right: 0, |
|
||||||
top: 0, |
|
||||||
bottom: 0 |
|
||||||
}] |
|
||||||
}); |
|
||||||
|
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.center_adapt", |
|
||||||
scrollable: true, |
|
||||||
element: this, |
|
||||||
items: [container] |
|
||||||
}); |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.RelationView.EVENT_CHANGE = "RelationView.EVENT_CHANGE"; |
|
||||||
BI.RelationView.EVENT_PREVIEW = "EVENT_PREVIEW"; |
|
||||||
BI.shortcut("bi.relation_view", BI.RelationView); |
|
||||||
@ -1,89 +0,0 @@ |
|||||||
/** |
|
||||||
* Created by Young's on 2017/3/10. |
|
||||||
*/ |
|
||||||
BI.RelationViewRegionContainer = BI.inherit(BI.Widget, { |
|
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.RelationViewRegionContainer.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
baseCls: "bi-relation-view-region-container", |
|
||||||
width: 210 |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_init: function () { |
|
||||||
BI.RelationViewRegionContainer.superclass._init.apply(this, arguments); |
|
||||||
var self = this, o = this.options; |
|
||||||
this.region = BI.createWidget({ |
|
||||||
type: "bi.relation_view_region", |
|
||||||
value: o.value, |
|
||||||
width: o.width, |
|
||||||
header: o.header, |
|
||||||
text: o.text, |
|
||||||
handler: o.handler, |
|
||||||
disabled: o.disabled, |
|
||||||
items: o.items, |
|
||||||
isView: o.isView, |
|
||||||
keyword: o.keyword |
|
||||||
}); |
|
||||||
this.region.on(BI.RelationViewRegion.EVENT_PREVIEW, function (v) { |
|
||||||
self.fireEvent(BI.RelationViewRegionContainer.EVENT_PREVIEW, v); |
|
||||||
}); |
|
||||||
this.region.on(BI.RelationViewRegion.EVENT_HOVER_IN, function (v) { |
|
||||||
self.fireEvent(BI.RelationViewRegionContainer.EVENT_HOVER_IN, v); |
|
||||||
}); |
|
||||||
this.region.on(BI.RelationViewRegion.EVENT_HOVER_OUT, function (v) { |
|
||||||
self.fireEvent(BI.RelationViewRegionContainer.EVENT_HOVER_OUT, v); |
|
||||||
}); |
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.vertical", |
|
||||||
element: this, |
|
||||||
items: [this.region], |
|
||||||
width: this.region.getWidth(), |
|
||||||
height: this.region.getHeight() |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
getWidth: function () { |
|
||||||
return this.region.getWidth(); |
|
||||||
}, |
|
||||||
|
|
||||||
getHeight: function () { |
|
||||||
return this.region.getHeight(); |
|
||||||
}, |
|
||||||
|
|
||||||
// 获取上方开始划线的位置
|
|
||||||
getTopLeftPosition: function () { |
|
||||||
return this.region.getTopLeftPosition(); |
|
||||||
}, |
|
||||||
|
|
||||||
getTopRightPosition: function () { |
|
||||||
return this.region.getTopRightPosition(); |
|
||||||
}, |
|
||||||
|
|
||||||
getBottomPosition: function () { |
|
||||||
return this.region.getBottomPosition(); |
|
||||||
}, |
|
||||||
|
|
||||||
getLeftPosition: function () { |
|
||||||
return this.region.getLeftPosition(); |
|
||||||
}, |
|
||||||
|
|
||||||
getRightPosition: function () { |
|
||||||
return this.region.getRightPosition(); |
|
||||||
}, |
|
||||||
|
|
||||||
setValue: function (v) { |
|
||||||
this.region.setValue(v); |
|
||||||
}, |
|
||||||
|
|
||||||
toggleRegion: function (v) { |
|
||||||
v === true ? this.region.element.fadeIn() : this.region.element.fadeOut(); |
|
||||||
}, |
|
||||||
|
|
||||||
setPreviewSelected: function (v) { |
|
||||||
this.region.setPreviewSelected(v); |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.RelationViewRegionContainer.EVENT_HOVER_IN = "RelationViewRegion.EVENT_HOVER_IN"; |
|
||||||
BI.RelationViewRegionContainer.EVENT_HOVER_OUT = "RelationViewRegion.EVENT_HOVER_OUT"; |
|
||||||
BI.RelationViewRegionContainer.EVENT_PREVIEW = "RelationViewRegion.EVENT_PREVIEW"; |
|
||||||
BI.shortcut("bi.relation_view_region_container", BI.RelationViewRegionContainer); |
|
||||||
@ -1,160 +0,0 @@ |
|||||||
/** |
|
||||||
* 关联视图 |
|
||||||
* |
|
||||||
* Created by GUY on 2015/12/23. |
|
||||||
* @class BI.RelationViewRegion |
|
||||||
* @extends BI.BasicButton |
|
||||||
*/ |
|
||||||
BI.RelationViewRegion = BI.inherit(BI.BasicButton, { |
|
||||||
|
|
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.RelationViewRegion.superclass._defaultConfig.apply(this, arguments), { |
|
||||||
baseCls: "bi-relation-view-region cursor-pointer", |
|
||||||
width: 150, |
|
||||||
text: "", |
|
||||||
value: "", |
|
||||||
header: "", |
|
||||||
items: [] |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_init: function () { |
|
||||||
BI.RelationViewRegion.superclass._init.apply(this, arguments); |
|
||||||
var self = this, o = this.options; |
|
||||||
|
|
||||||
this.preview = BI.createWidget({ |
|
||||||
type: "bi.icon_button", |
|
||||||
cls: "eye relation-table-preview-font", |
|
||||||
width: 36, |
|
||||||
height: 24, |
|
||||||
stopPropagation: true, |
|
||||||
selected: o.isView |
|
||||||
}); |
|
||||||
this.preview.on(BI.IconButton.EVENT_CHANGE, function () { |
|
||||||
self.fireEvent(BI.RelationViewRegion.EVENT_PREVIEW, this.isSelected()); |
|
||||||
}); |
|
||||||
|
|
||||||
this.title = BI.createWidget({ |
|
||||||
type: "bi.label", |
|
||||||
height: 24, |
|
||||||
width: 70, |
|
||||||
text: o.text, |
|
||||||
value: o.value, |
|
||||||
textAlign: "left", |
|
||||||
disabled: o.disabled, |
|
||||||
keyword: o.keyword |
|
||||||
}); |
|
||||||
// title放body上
|
|
||||||
if (BI.isKey(o.header)) { |
|
||||||
this.title.setTitle(o.header, { |
|
||||||
container: "body" |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
this.button_group = BI.createWidget({ |
|
||||||
type: "bi.button_group", |
|
||||||
items: this._createItems(o.items), |
|
||||||
layouts: [{ |
|
||||||
type: "bi.vertical" |
|
||||||
}] |
|
||||||
}); |
|
||||||
|
|
||||||
BI.createWidget({ |
|
||||||
type: "bi.vertical", |
|
||||||
element: this, |
|
||||||
items: [{ |
|
||||||
type: "bi.vertical", |
|
||||||
cls: "relation-view-region-container bi-card bi-border", |
|
||||||
items: [{ |
|
||||||
type: "bi.vertical_adapt", |
|
||||||
cls: "relation-view-region-title bi-border-bottom bi-background", |
|
||||||
items: [this.preview, this.title] |
|
||||||
}, this.button_group] |
|
||||||
}], |
|
||||||
hgap: 25, |
|
||||||
vgap: 20 |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
_createItems: function (items) { |
|
||||||
var self = this; |
|
||||||
return BI.map(items, function (i, item) { |
|
||||||
var texts = BI.isArray(item.text) ? item.text : [item.text]; |
|
||||||
return BI.extend(item, { |
|
||||||
type: "bi.relation_view_item", |
|
||||||
height: texts.length > 1 ? (texts.length + 1) * 24 : 24, |
|
||||||
cls: i === items.length - 1 ? "" : "split-line", |
|
||||||
hoverIn: function () { |
|
||||||
self.setValue(item.value); |
|
||||||
self.fireEvent(BI.RelationViewRegion.EVENT_HOVER_IN, item.value); |
|
||||||
}, |
|
||||||
hoverOut: function () { |
|
||||||
self.setValue([]); |
|
||||||
self.fireEvent(BI.RelationViewRegion.EVENT_HOVER_OUT, item.value); |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
getWidth: function () { |
|
||||||
return this.options.width; |
|
||||||
}, |
|
||||||
|
|
||||||
getHeight: function () { |
|
||||||
var height = 0; |
|
||||||
var buttons = this.button_group.getAllButtons(); |
|
||||||
BI.each(buttons, function (idx, button) { |
|
||||||
//获取item高度的时候加上边框
|
|
||||||
height += button.getHeight() + (idx === buttons.length - 1 ? 0 : 1); |
|
||||||
}); |
|
||||||
return height + 24 + 2 * 20 + 3; |
|
||||||
}, |
|
||||||
|
|
||||||
// 获取上方开始划线的位置
|
|
||||||
getTopLeftPosition: function () { |
|
||||||
return { |
|
||||||
x: 25 + 10, |
|
||||||
y: 20 |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
getTopRightPosition: function () { |
|
||||||
return { |
|
||||||
x: this.getWidth() - 25 - 10, |
|
||||||
y: 20 |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
getBottomPosition: function () { |
|
||||||
return { |
|
||||||
x: 25 + 10, |
|
||||||
y: this.getHeight() - 20 |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
getLeftPosition: function () { |
|
||||||
return { |
|
||||||
x: 25, |
|
||||||
y: 20 + 10 |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
getRightPosition: function () { |
|
||||||
return { |
|
||||||
x: this.getWidth() - 25, |
|
||||||
y: 20 + 10 |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
setValue: function (v) { |
|
||||||
this.button_group.setValue(v); |
|
||||||
}, |
|
||||||
|
|
||||||
setPreviewSelected: function (v) { |
|
||||||
this.preview.setSelected(v); |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.RelationViewRegion.EVENT_HOVER_IN = "RelationViewRegion.EVENT_HOVER_IN"; |
|
||||||
BI.RelationViewRegion.EVENT_HOVER_OUT = "RelationViewRegion.EVENT_HOVER_OUT"; |
|
||||||
BI.RelationViewRegion.EVENT_PREVIEW = "RelationViewRegion.EVENT_PREVIEW"; |
|
||||||
BI.shortcut("bi.relation_view_region", BI.RelationViewRegion); |
|
||||||
Loading…
Reference in new issue