Neglected twaver functions (1)

A demo should be written as required by the customer. The demo contains some common functions, including parsing JSON data to generate the Network Element and line in twaver. The lower right corner of the network element contains a small icon with different identifiers. The line must be a quadratic curve, the menu and Information Board are displayed. Let's take a look at the results (whether the demo is different while learning)

Parse JSON data to generate network elements and connections in twaver
The following is an example of the JSON data format used in the demo.

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"}  ];

 

Determine the object to be created based on the element, whether it is a network element or a line; set the name of the Network Element Image (these images need to be registered in advance, if you use the built-in twaver image, you do not need, use the twaver image to register the name, for example, twaver. defaults. image_group), Icon Sets the identifier on the network element, arrow sets the arrow direction of the line, the code below

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);    }}

 

Small icons with different identifiers in the lower right corner of the Network Element
In twaver, this is very simple. It can be achieved by using iconattachment that comes with the net element. In the code above, processing the icon is useful. The names of the icon can be an array and multiple icons are put at the same time; you can also set the offset of y on the x or Y axis of the icon. For more information about the attributes, see twaver.

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

 

To enjoy the big picture

The link must be a quadratic curve.
You only need to override the getlinkpoints method. By default, this method returns two vertices from and to. If a quadratic curve is required, a total of three vertices are required. Here, the center points of the from and to are calculated and an offset is made, the method returns a list. The first element is the from vertex, and the second element is the list containing the intermediate vertex and to vertex, if the line needs to be connected, the second element of the beiser curve should be a list containing three elements, and twaver internally makes an identification.

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;}

 

Pop-up menu and Information Board
The popupmenu mechanism of twaver is used in the pop-up menu, which is easy to handle and can be directly applied to the code.

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‘;};

 

The information board does not need a twaver mechanism. It only needs to listen to network events and control Dom. You can generate a div each time and cache a div. You can use CSS to control its display attribute and set it based on your needs. A div is cached here, and the title and icon on the DIV are modified based on the clicked network element.

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‘;}});

 

In the beginning of the arc, you must have understood that it refers to the occurrence of the Net Element icon. Is it more beautiful than ever before? Thank you for your support.

Neglected twaver functions (1)