首页 > 代码库 > TWaver HTML5 (2D)----数据元素

TWaver HTML5 (2D)----数据元素

2024-08-12 10:35:17   221人阅读

概述

数据元素是数据模型的基本要素，用于描述图形网元，业务网元，或者纯数据。TWaver HTML5中所有数据元素都继承自twaver.Data。为不同功能的需求，预定义了三类数据类型：twaver.Element,twaver.Alarm,twaver.Layer,分别用来描述拓扑的网元，告警和图层。其中拓扑网元扩展定义了十几种网元类型，用以描述丰富的拓扑网元特性，其中最常用的几类拓扑网元包括：Node、Link、Group、SubNetwork、Grid等，TWaver中网元的继承关系如下图，本章将详细介绍这些网元以及其他数据类型的特性，使用以及扩展应用。

技术分享

 

基本数据元素(Data)

 

 

twaver.Data是TWaver HTML5中最基本的数据元素，默认定义了id,name,name2,icon,toolTip,parent,children等基本属性，支持事件派发和监听，由它扩展出来还有twaver.Element,twaver.Alarm,twaver.Layer等数据类型。

事件派发与监听

twaver.Data继承于twaver.PropertyChangeDispatcher类,内部包含一个twaver.EventDispatcher实例对象，这使得Data具有派发事件和监听事件的功能，可以通过调用下面的方法派发事件或者添加监听器：

//派发属性变化事件firePropertyChange:function(property,oldValue,newValue)//添加属性变化监听器addPropertyChangeListener:function(listener,scope,ahead)//删除属性变化监听器removePropertyChangeListener:function(listener)//属性发生变化的处理方法onPropertyChanged:function(listener)

基本属性

定义了一些基本属性，包括id,name,name2,icon,toolTip等。

/** *id:网元的id,如果未设置，TWaver内部会分配唯一的Id。 */twaver.Data:function(id) getId:function()setName:function(value)getName:function()setName2:function(value)getName2:function()setIcon:function(value)getIcon:function()setToolTip:function(value)getToolTip:function()

Note:name2为新增加的属性,增大了label设置的灵活性。

如果需要设置其他属性，可以通过setClient()/getClient()方法设置自定义的属性(包括对象)。

//设置Client属性;setClient = function(clientProp,newValue)//获取Client属性getClient = function(clientProp)

Note:setClient()存放数据类似于Java中的HashMap。

示例:

 var box = new twaver.ElementBox();     var network = new twaver.vector.Network(box);     function init() {         initNetwork();         initDataBox();     }     function initNetwork() {        var view = network.getView();         document.body.appendChild(view);         network.adjustBounds({x: 0, y: 0, width: 1300, height: 600});         network.getToolTip = function (element) {             var Id = element.getId();             var name = element.getName();             var name2 = element.getName2();             var icon = element.getIcon();             var clientProperty = element.getClient(‘clientProperty‘);             return ‘Id:‘ + Id + ‘ ‘ + ‘name:‘ + name + ‘ ‘ + ‘name2:‘ + name2+ ‘ ‘ + ‘icon:‘ + icon;         }         twaver.Styles.setStyle(‘label.color‘,‘#ec6c00‘);         twaver.Styles.setStyle(‘label2.color‘,‘#57ab9a‘);         twaver.Styles.setStyle(‘select.color‘,‘#ef8200‘);     }     function initDataBox() {         var node = new twaver.Node({ name: ‘from‘, name2: ‘from2‘, location: { x: 300, y: 200 } });         box.add(node);         var node2 = new twaver.Node({ name: ‘to‘, name2: ‘to2‘, location: { x: 500, y: 250 } });         box.add(node2); var link = new twaver.Link(node, node2);         link.setName(‘Hello TWaver!‘);         link.setName2(‘Hello Vector!‘);         link.setClient(‘clientProperty‘,node); box.add(link);    }

技术分享

Note:从示例中我们学会了什么？

  • 统一设置样式，如:twaver.Styles.setStyle(‘label.color’,’#ec6c00′)
  • 自定义toolTip的提示语:重写network.getToolTip方法
  • Client属性的使用
  • TWaver内部内置一些颜色，twaver.Colors.***

在这我们特别列举出icon的布局问题，icon作为网元的附件可以围绕在网元的周围，呈现一些特殊信息。TWaver支持多组icon同时存在，且摆放的位置可以分别设置。下面列举使用方法：

function registerImage(){  registerNormalImage(‘./images/list_view.png‘,‘list_view‘);  registerNormalImage(‘./images/settings1.png‘,‘setting1‘);  registerNormalImage(‘./images/ic_mech_wheel.png‘,‘wheel‘);  registerNormalImage(‘./images/ic_search_archive.png‘,‘archive‘);  registerNormalImage(‘./images/super_mono.png‘,‘mono‘);  registerNormalImage(‘./images/twitter_04.png‘,‘twitter‘);}function registerNormalImage(url, name) {  var image = new Image();  image.src = url;  image.onload = function() {    twaver.Util.registerImage(name, image, image.width, image.height);    image.onload = null;    network.invalidateElementUIs();  };}function initNode() {    var node2 = new twaver.Node("node2");    node2.setLocation(450, 205);    box.add(node2);    node2.setName(‘name1‘);    node2.setName2(‘name2‘);    node2.setSize(300,300);    node2.setStyle(‘icons.names‘, [["mono","wheel",‘archive‘],["wheel",‘archive‘,‘mono‘],["archive",‘mono‘],["mono",‘wheel‘]]);    node2.setStyle(‘icons.position‘, [‘topleft.topleft‘,‘topright.topright‘,‘bottomleft.bottomleft‘,      ‘bottomright.bottomright‘]);    node2.s(‘icons.orientation‘,[‘top‘,‘left‘,‘right‘,‘bottom‘]);}

技术分享

其他功能函数

此外，Data中还定义了其他功能函数

//获取所有子网元getChildren:function()getChildSize:function()//获取符合macthFunction的所有childs组成的ListtoChildren:function(macthFunction,scope)addChild:function(child,index)removeChild:function(child)getChildAt:function(index)clearChildren:function()getParent:function()setParent:function(parent)hasChildren:function()isRelatedTo:function(data)isParentOf:function(data)isDescendantOf:function(data)
//toChildren:function(macthFunction,scope)的使用方法parent.toChildren(function(e){    return e.getName() === ‘vector‘;});
var box = new twaver.ElementBox(); var network = new twaver.vector.Network(box); function init() {   initNetwork();   registerImage();   initDataBox(); } function initNetwork() {   var view = network.getView();   document.body.appendChild(view);   network.adjustBounds({x: 0, y: 0, width: 1300, height: 600});  twaver.Styles.setStyle(‘select.color‘, ‘#57ab9a‘); }function registerImage() { //register shadow twaver.Util.registerImage(‘shadow‘, { w: 37, h: 29, shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 5, shadowColor: ‘#ec6c00‘, v: [ { shape: ‘vector‘, name: ‘node_image‘, x: 0, y: 0 } ] }); }function initDataBox() {   var parent = new twaver.Group({ name: ‘parent‘, location: {x: 300, y: 400 }, });   box.add(parent);   var node1 = new twaver.Node({ name: ‘Jeff.fu‘, location: { x: 200, y: 200 } });  node1.setClient(‘vector‘, true);   box.add(node1);   var node2 = new twaver.Node({ name: ‘alex.dong‘, location: { x: 500, y: 350 } });   node2.setClient(‘vector‘, true); box.add(node2);   var node3 = new twaver.Node({ name: ‘paul.peng‘, location: { x: 200, y: 350 } }); box.add(node3);   var node4 = new twaver.Node({ name: ‘vic.cheng‘, location: { x: 500, y: 200 } }); box.add(node4);   var link = new twaver.Link(node1, node2);   link.setName(‘link1‘);   link.setStyle(‘label.position‘,‘topleft.topleft‘);   box.add(link);   var link2 = new twaver.Link(node3, node4);   link2.setName(‘link2‘);   box.add(link2);   parent.addChild(node1);   parent.addChild(node2);   parent.addChild(node3);   parent.addChild(node4);   matchFunction = function (e) {     if (e.getClient(‘vector‘)) {       return true;     }   }   var childrenMatch = parent.toChildren(matchFunction);   childrenMatch.forEach(function (element) {     element.setImage(‘shadow‘);     element.setName(‘child_vector‘);   }); }

技术分享

Note:上述示例我们学会了什么？

  • toChildren()方法的使用
  • shadow阴影的设置

 

TWaver HTML5 (2D)----数据元素


联系
我们