被忽視的TWaver功能（1）

應客戶需求寫個Demo，Demo中包含一些常用的功能，包括解析JSON數據生成TWaver中的網元和連線，網元右下角帶上不同標識的小圖標，連線需要是二次曲線，彈出菜單和信息板，跟大家分享下。先上圖讓大家看看效果（大家在學習的同時，能否發現這次Demo有所不同）

解析JSON數據生成TWaver中的網元和連線
下面是Demo中用到的JSON數據格式樣例

var topo_data = [ 
    {"element": "node", "name": "網關", "id": "gateway1", "image": "group", "icon": "icon_wall"}, 
    {"element": "node", "name": "網關", "id": "gateway2", "image": "subnetwork", "icon": "icon_wall"}, 
    {"element": "link", "from": "cloud", "to": "center1", "name":"包含關系"}, 
    {"element": "link", "from": "gather2", "to": "firewall", "arrow": "11"}  
];

 

根據element判斷創建何種對象，是網元還是連線；image設置網元圖片的名稱（這些圖片都是事先需要注冊，如果使用TWaver內置的圖片，則不需要，直接使用TWaver的圖片注冊名稱即可，例如twaver.Defaults.IMAGE_GROUP），icon設置網元上的標識，arrow設置連線的箭頭方向，下面上代碼

function createElement(item){
    var element;
    if(item.element == 'link'){
        var from = this.box.getDataById(item.from);
        var to = this.box.getDataById(item.to);
        var link = new MyLink(from, to);
        if(item.arrow){
            if(item.arrow=="10" || item.arrow=="11") link.setStyle('arrow.from', true);
            if(item.arrow=="01" || item.arrow=="11") link.setStyle('arrow.to', true);
        }                
        this.box.add(link);
        element=link;
    }
    if(item.element =='node'){
        var node = new twaver.Node(item.id);
        if(item.image){
            node.setImage(item.image);
            if(item.image=='group') node.setImage(twaver.Defaults.IMAGE_GROUP);
            if(item.image=='subnetwork') node.setImage(twaver.Defaults.IMAGE_SUBNETWORK);
        }                
        if(item.icon){
            node.setStyle('icons.names', [item.icon]);
            node.setStyle('icons.position', 'bottomright.topleft');
        }                
        node.setStyle('shadow.blur',10);
        node.setStyle('shadow.xoffset',5);
        node.setStyle('shadow.yoffset',5);
        this.box.add(node);
        element=node;
    }

    if(element){
        element.setStyle('label.font', '11px "Microsoft Yahei"');
        element.setName(item.name);
    }
}

 

網元右下角帶上不同標識的小圖標
在TWaver里這個非常簡單，使用網元自帶的IconAttachment就能實現，在上面的代碼中，處理icon部分有用到，icon的names可以是一個數組，同時放多個圖標；還可以設置圖標的X或Y軸上Y的偏移量，更多屬性可以參考TWaver文檔

node.setStyle('icons.names', [item.icon]);
node.setStyle('icons.position', 'bottomright.topleft');

 

來個大圖欣賞欣賞

連線需要是二次曲線
這個需要重寫LinkUI，只需要重寫getLinkPoints的方法就可以。默認此方法返回是的是from和to兩個點，如果需要二次曲線，那就需要一共3個點，這里計算from和to的中心點，並做了一個偏移，方法最后返回的是一個list，第一個元素是from點，第二個元素是包含中間點和to點的list，如果需要連線是貝塞爾曲線第二個元素應是包含3個元素的list，TWaver內部做了個識別

getLinkPoints: function () {
    MyLinkUI.superClass.getLinkPoints.call(this);

    var f = this.getFromPoint();
    var t = this.getToPoint();

    var points = new twaver.List();
    points.add(f);
    points.add(t);

    this._lineLength = _twaver.math.calculateLineLength(points);
    var offset = this._lineLength/10;
    var m = {
        x: (f.x+t.x)/2 + offset,
        y: (f.y+t.y)/2 + offset,
    }
    var cps = new twaver.List();
    cps.add(m);
    cps.add(t);

    points.removeAt(1);
    points.add(cps);
    this._linkPoints = points;

    return this._linkPoints;
}

 

彈出菜單和信息板
彈出菜單使用TWaver的PopupMenu機制，輕松搞定，直接上代碼

var popupMenu = new twaver.controls.PopupMenu(network);
popupMenu.setMenuItems([
    { label: '添加設備'},
    { label: '刪除設備'},
    { separator: true},
    { label: '詳細信息...'},
]);
popupMenu.onMenuItemRendered = function (div, menuItem) {
    div.childNodes[1].style['font-family']="'Microsoft Yahei', 'Open Sans',sans-serif";
    div.childNodes[1].style['font-size']='12px';
};

 

信息板並不需要TWaver的機制，只需要監聽network的事件，控制DOM就可以實現。可以每次生成一個div顯示，也緩存一個div，通過CSS控制它的display屬性，根據具體需求所定。這里緩存了一個div，根據點擊的網元不同，修改div上的標題和圖標

this.network.addInteractionListener(function(e){
if(e.kind == 'clickElement' && e.element && e.element.getClassName() == 'twaver.Node' && e.element.getName()){
    var titleImg = document.getElementById('titleImg');
    var ei = twaver.Util.getImageAsset(e.element.getImage())._cache;
    titleImg.src = ei.toDataURL();

    var titleTxt = document.getElementById('titleTxt');
    var txt = '';
    if(e.element.getName()){
        txt = e.element.getName();
    }
    titleTxt.innerHTML = txt;
    var s = dialog.style;
    s.display = 'block';
    s.left = e.event.x+'px';
    s.top = e.event.y+'px';
} else {
    dialog.style.display = 'none';
}
});

 

開頭括弧中問題，大家肯定已經明白，指的是網元的圖標發生了，是不是比以往更加漂亮了，感謝大家的支持。