Rapid Development of HTML5-based Network Topology Map Application--Introduction (2)

In the previous article, we drew a graphView scene, obtained the data container through graphView.dm() on the scene, added two Node nodes through the graphView.dm().add() function, and set the node position through setPosition and setImage adds an image to the node; then adds two lines (actually more) between the two nodes through ht.Edge(sourceNode, targetNode), and adds a label label to the line to display text, and also The position of the text on the connection line is set by label.position.

My idea in this article is to add a "tree" node list that displays all nodes on the left, that is, to add all the nodes in the scene to this "tree" list. This part is extremely simple in my opinion. Of course, many HT components are similar to this, which is very convenient.

First we have to create this "tree". The  ht.widget.treeView  component in HT is used to create a "tree list". We have introduced the addToDOM function in the previous article, which is used to add components into the body. We want to realize the "number list" on the left and the topology scene on the right. How to do it? Here we introduce another component  ht.widget.SplitView , as the name implies, "split" the component. The split component is used to split two sub-components left and right or up and down. The sub-component can be a component HTprovided by the framework or a native HTML component. The sub-component is absolutely positioned with position as absolute.

Initially build a split component object by splitView = new ht.widget.SplitView( leftView, rightView, orientation, position ). leftView left component or upper component rightView right component or lower component orientation string type, the default is horizontal or h for left and right split, can be set to vertical or v for top and bottom split position split position, the default value is 0.5, if the set value is 0~ 1 is divided by percentage, greater than 1 represents the absolute width or height of the left component or upper component, and less than 1 represents the absolute width or height of the right component or lower component.

By splitting the components, we add the tree component and the topology component to the body at the same time, and the required operations are only the following lines:

graphView = new ht.graph.GraphView(); // Topology component 
var treeView = new ht.widget.TreeView(graphView.dm()); // Tree component, the parameter is the data model bound by the tree component, which is bound here is the data model of graphView, you can share data 
var splitView = new ht.widget.SplitView(treeView, graphView, 'h', 0.2); // Split components (leftView, rightView, orientation, position) 
splitView.addToDOM( ); // Add splitView to body

Remember, the graphView.addToDOM statement in the original code must be commented out, otherwise the root layer div of the component added to the body body later will cover the bottom layer div of the component added to the body body last, do you remember? The definition of the addToDOM function, here I will show you the definition of the function again, you can consolidate it:

addToDOM = function(){   
    var self = this,
        view = self.getView(),    // Get the underlying div of the component 
        style = view.style;
    document.body.appendChild(view); // Add the underlying div of the component to the body            
    style.left = '0'; // Most components of HT are absolutely positioned, so you need to set the position 
    style.right = ' 0' ;
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener( 'resize', function () { self.iv(); }, false ); // Add resize event, iv is delayed refresh            
}

We have not moved other parts, you can see the effect:

 

 It seems that it is not clear which part of the topology map is the element on the tree list? Don't worry, let's continue and set "names" for all our nodes. In order not to confuse the audience, I will paste the previous code and review it by the way (only the code of one of the nodes is shown here):

var server = new ht.Node(); // Server node 
graphView.dm().add(server); // Add the server node to the data container of the topology graph component 
server.setName('server'); // The setting name only adds this sentence 
server.setPosition(300, 200); // Set the location of the server node 
server.setImage('images/server.png'); // Set the display image of the server node

The result is as follows:

 

 We will find that there are more names set by setName at the bottom of the server node and client node in the topology diagram! If you don't want to display the word under the node, you can set the node style property directly:

server.s({ // s is the abbreviation of setStyle, set the style 
    'label': '' // set the label property to empty 
});

It doesn't show up! But why is this setting possible? Let's take a look at the definition of the label property. The label property is the encapsulation of the GraphView.getLabel function:

getLabel: function (data) {
    var label = data.getStyle('label');//获取样式属性 label 的值
    return label === undefined ? data.getName() : label;        
}

通过以上代码可知，style 上的 label 属性优先级高于 name 属性，可重载 GraphView.getLabel 函数改变文字获取逻辑。所以就算我们设置了 name 属性，但是再设置 label 属性还是能将 name 属性设置的值给覆盖掉的，而树组件上获取的只是节点的 name，所以两者并不冲突。

突然感觉树上的节点显示图标为什么都一样。。。改图标！

treeView 树组件通过 getIcon(data) 返回 data 对象对应的 icon 图标，可重载自定义，默认返回的都是图元原始的图标，这里我们要自定义这个函数，针对不同的节点返回不同的 icon，前面我们设置的 name 属性派上用场了：

treeView.getIcon = function(data){
    var self = this,
          edge_icon = data.getIcon();//获取对象的 icon
    if(data.getName() === 'server'){//如果是 name 为 server 的节点时
        return 'images/server.png';
    }else if(data.getName() === 'client'){//如果是 name 为 client 的节点时
        return 'images/node.png';
    }else if(data instanceof ht.Edge){//如果是 ht.Edge 类型的节点时
        return edge_icon
    }
}

选中树上的节点，拓扑图中的对应节点也会被选中，反过来，选中拓扑图中的节点，树上的节点也会被选中。

最终结果如下：

次回，我们将在场景中添加工具条！请持续跟踪哦~