被忽视的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里这个非常简单，使用网元自带的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 
      });

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

被忽视的TWaver功能（1）

猜你喜欢