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

Posted 2020-08-07 limeOracle

概述

数据元素是数据模型的基本要素，用于描述图形网元，业务网元，或者纯数据。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组成的List
toChildren: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阴影的设置

 

告警元素(Alarm)

TWaver中定义了告警，每个告警有告警级别，用以反映告警的紧急程度，告警使用AlarmBox进行管理，将告警与拓扑网元相关联。网元本身不存储具体的告警，而只存储当前告警状态信息。

告警(Alarm)

用来表示网管系统中设备故障或者网络异常的数据模型，与Element关联以反映网元的告警信息，Alarm中预定义了告警级别、告警是否已清除，告警是否已确认以及发出告警的网元id，用户也可以通过setClient()方法添加自己的属性。
告警中定义的属性如下：

/**
* id:告警的Id
* elementId:告警网元的Id
* alarmSeverity:告警级别
* isAcked:告警是否确认
* isCleared:告警是否清除
*/
twaver.Alarm: function(id, elementId, alarmSeverity, isAcked, isCleared)
 
getElementId:function()
isAcked:function()
setAcked:function(value)
isCleared:function()
setCleared:function(value)
getAlarmSeverity:function()
setAlarmSeverity:function(value)

告警级别(AlarmSeverity)

告警级别用以反映告警的紧急程度，TWaver HTML5中预定义了六种告警级别，告警级别的value属性表示告警的严重程度，默认值越大告警越严重。

/**
* value:
* name:
* nickName:
* color:
* displayName:
*/
twaver.AlarmSeverity:function(value,name,nickName,color,displayName)
 
//TWaver内部预定义六种告警级别
twaver.AlarmSeverity.CRITICAL = twaver.AlarmSeverity.add(500,\'Critical\',\'C\',"#FF0000");
twaver.AlarmSeverity.MAJOR = twaver.AlarmSeverity.add(400,\'Major\',\'M\',"#FFA000");
twaver.AlarmSeverity.MINOR = twaver.AlarmSeverity.add(300,\'Minor\',\'m\',"#FFFF00");
twaver.AlarmSeverity.WARNING = twaver.AlarmSeverity.add(200,\'Warning\',\'W\',"#00FFFF");
twaver.AlarmSeverity.INDETERMINATE = twaver.AlarmSeverity.add(100,\'Indeterminate\',\'N\',"#C800FF");
twaver.AlarmSeverity.CLEARED = twaver.AlarmSeverity.add(0,\'Cleared\',\'R\',"#00FF00");

AlarmSeverity中的级别都是静态变量，用户也可以全局注册或者卸载自己的告警级别，此外还提供清除所有告警级别的方法。

//添加告警级别
twaver.AlarmSeverity.add:function(value,name,nickName,colour,displayName)
//删除告警级别
twaver.AlarmSeverity.remove:function(name)
//清空告警级别
twaver.AlarmSeverity.clear:function()

Note:因为告警级别是全局变量，删除告警级别会对整个程序产生影响，所以请谨慎操作。

告警状态(AlarmState)

实际应用中，告警的出现可能成千上万，面对告警风暴，直接与告警关联是沉重的,所以TWaver采用网元与告警分离，由告警容器去管理所有告警，网元本身只存储告警状态信息，如当前有多少条告警，最高级别是什么，而对于每条告警具体的信息存放在告警容器(AlarmBox)中。
网元告警状态用twaver.AlarmState来定义，用来反映新发告警的级别和数量。告警状态属性包括:确认告警的最高级别、新发告警的最高级别、该网元所有告警的最高级别、新发告警次高级别、资深告警最高级别，传递告警级别以及各级告警的数量。

getHighestAcknowledgedAlarmSeverity:function()
getHighestNewAlarmSeverity:function()
getHighestOverallAlarmSeverity:function()
hasLessSevereNewAlarms:function()
getAcknowledgedAlarmCount:function(severity)
getAlarmCount:function(severity)
getNewAlarmCount:function(severity)
setNewAlarmCount:function(severity,count)
getPropagateSeverity:function()
setPropagateSeverity:function(propagateSeverity)
isEmpty:function()
isEnablePropagation:function()
setEnablePropagation:function(enablePropagation)

修改告警状态的相关方法：确认告警，清除告警，增加/减少确认告警，删除告警…

acknowledgeAlarm:function(severity)
acknowledgeAllAlarms:function(severity)
increaseAcknowledgesAlarm:function(severity,increment)
increaseNewAlarm:function(severity,increment)
decreaseAcknowledgedAlarm:function(severity,decrement)
decreaseNewAlarm；function(severity,decrement)
removeAllNewAlarms:function(severity)
setAcknowledgedAlarmCount:function(severity,count)
removeAllAcknowledgedAlarms:function(severity)
clear:function()

告警的使用

在使用告警时需要注意一点，告警增删都要通过alarmBox来操作，这点与网元需要在elementBox中增删是一致的。
示例：

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 }, }); 
  addAlarm("alarm 0",parent.getId(),twaver.AlarmSeverity.MINOR,box.getAlarmBox()); 
  box.add(parent); 
  var node1 = new twaver.Node({ name: \'Jeff.fu\', location: { x: 200, y: 200 } }); 
  addAlarm("alarm 1", node1.getId(), twaver.AlarmSeverity.CRITICAL, box.getAlarmBox()); 
  node1.setClient(\'vector\', true); 
  box.add(node1); 
  var node2 = new twaver.Node({ name: \'alex.dong\', location: { x: 500, y: 350 } });
  node2.setClient(\'vector\', true); 
  addAlarm("alarm 2", node2.getId(), twaver.AlarmSeverity.MAJOR, box.getAlarmBox()); 
  box.add(node2); 
  var link = new twaver.Link(node1, node2); 
  link.setName(\'link1\'); link.setStyle(\'label.position\', \'topleft.topleft\'); 
  addAlarm("alarm 3",link.getId(),twaver.AlarmSeverity.WARNING,box.getAlarmBox()); 
  box.add(link);
  parent.addChild(node1);
  parent.addChild(node2); 
} 
function addAlarm(alarmID, elementID, alarmSeverity, alarmBox) { 
  var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity); 
  alarmBox.add(alarm); 
}