被忽视的TWaver功能（1）

应客户需求写个Demo，Demo中包括一些经常使用的功能。包括解析JSON数据生成TWaver中的网元和连线。网元右下角带上不同标识的小图标，连线须要是二次曲线。弹出菜单和信息板。跟大家分享下。先上图让大家看看效果（大家在学习的同一时候，是否能发现这次Demo有所不同）

解析JSON数据生成TWaver中的网元和连线
以下是Demo中用到的JSON数据格式例子

1	var topo_data = [

2	{"element": "node", "name": "网关", "id": "gateway1", "image": "group","icon": "icon_wall"},

3	{"element": "node", "name": "网关", "id": "gateway2", "image":"subnetwork", "icon": "icon_wall"},

4	{"element": "link", "from": "cloud", "to": "center1", "name":"包括关系"},

5	{"element": "link", "from": "gather2", "to": "firewall", "arrow": "11"}

6

];

依据element推断创建何种对象，是网元还是连线；image设置网元图片的名称（这些图片都是事先须要注冊。假设使用TWaver内置的图片，则不须要。直接使用TWaver的图片注冊名称就可以。比如twaver.Defaults.IMAGE_GROUP），icon设置网元上的标识，arrow设置连线的箭头方向，以下上代码

1	function createElement(item){

2	var element;

3	if(item.element == 'link'){

4	var from = this.box.getDataById(item.from);

5	var to = this.box.getDataById(item.to);

6	var link = new MyLink(from, to);

7	if(item.arrow){

8	if(item.arrow=="10" || item.arrow=="11") link.setStyle('arrow.from', true);

9	if(item.arrow=="01" || item.arrow=="11") link.setStyle('arrow.to', true);

10

}

11	this.box.add(link);

12	element=link;

13

}

14	if(item.element =='node'){

15	var node = new twaver.Node(item.id);

16	if(item.image){

17	node.setImage(item.image);

18	if(item.image=='group') node.setImage(twaver.Defaults.IMAGE_GROUP);

19	if(item.image=='subnetwork') node.setImage(twaver.Defaults.IMAGE_SUBNETWORK);

20

}

21	if(item.icon){

22	node.setStyle('icons.names', [item.icon]);

23	node.setStyle('icons.position', 'bottomright.topleft');

24

}

25	node.setStyle('shadow.blur',10);

26	node.setStyle('shadow.xoffset',5);

27	node.setStyle('shadow.yoffset',5);

28	this.box.add(node);

29	element=node;

30

}

31

32	if(element){

33	element.setStyle('label.font', '11px "Microsoft Yahei"');

34	element.setName(item.name);

35

}

36

}

网元右下角带上不同标识的小图标
在TWaver里这个很easy，使用网元自带的IconAttachment就能实现。在上面的代码中，处理icon部分实用到，icon的names能够是一个数组，同一时候放多个图标；还能够设置图标的X或Y轴上Y的偏移量，很多其它属性能够參考TWaver文档

1	node.setStyle('icons.names', [item.icon]);

2	node.setStyle('icons.position', 'bottomright.topleft');

来个大图赞赏赞赏

连线须要是二次曲线
这个须要重写LinkUI，仅仅须要重写getLinkPoints的方法就能够。默认此方法返回是的是from和to两个点。假设须要二次曲线，那就须要一共3个点。这里计算from和to的中心点，并做了一个偏移，方法最后返回的是一个list。第一个元素是from点，第二个元素是包括中间点和to点的list，假设须要连线是贝塞尔曲线第二个元素应是包括3个元素的list，TWaver内部做了个识别

1	getLinkPoints: function () {

2	MyLinkUI.superClass.getLinkPoints.call(this);

3

4	var f = this.getFromPoint();

5	var t = this.getToPoint();

6

7	var points = new twaver.List();

8	points.add(f);

9	points.add(t);

10

11	this._lineLength = _twaver.math.calculateLineLength(points);

12	var offset = this._lineLength/10;

13

var m = {

14	x: (f.x+t.x)/2 + offset,

15	y: (f.y+t.y)/2 + offset,

16

}

17	var cps = new twaver.List();

18	cps.add(m);

19	cps.add(t);

20

21	points.removeAt(1);

22	points.add(cps);

23	this._linkPoints = points;

24

25	return this._linkPoints;

26

}

弹出菜单和信息板
弹出菜单使用TWaver的PopupMenu机制，轻松搞定，直接上代码

1	var popupMenu = new twaver.controls.PopupMenu(network);

2	popupMenu.setMenuItems([

3	{ label: '加入设备'},

4	{ label: '删除设备'},

5	{ separator: true},

6	{ label: '具体信息...'},

7

]);

8	popupMenu.onMenuItemRendered = function (div, menuItem) {

9	div.childNodes[1].style['font-family']="'Microsoft Yahei', 'Open Sans',sans-serif";

10	div.childNodes[1].style['font-size']='12px';

11

};

信息板并不须要TWaver的机制，仅仅须要监听network的事件，控制DOM就能够实现。能够每次生成一个div显示，也缓存一个div，通过CSS控制它的display属性。依据详细需求所定。

这里缓存了一个div，依据点击的网元不同，改动div上的标题和图标

1	this.network.addInteractionListener(function(e){

2	if(e.kind == 'clickElement' && e.element && e.element.getClassName() =='twaver.Node' && e.element.getName()){

3	var titleImg = document.getElementById('titleImg');

4	var ei = twaver.Util.getImageAsset(e.element.getImage())._cache;

5	titleImg.src = ei.toDataURL();

6

7	var titleTxt = document.getElementById('titleTxt');

8	var txt = '';

9	if(e.element.getName()){

10	txt = e.element.getName();

11

}

12	titleTxt.innerHTML = txt;

13	var s = dialog.style;

14	s.display = 'block';

15	s.left = e.event.x+'px';

16	s.top = e.event.y+'px';

17

} else {

18	dialog.style.display = 'none';

19

}

20

});

开头括弧中问题，大家肯定已经明确。指的是网元的图标发生了。是不是比以往更加美丽了，感谢大家的支持。