被忽视的TWaver功能（1）-阿里云开发者社区

被忽视的TWaver功能（1）

2017-10-12 1979

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

应客户需求写个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 
          });