Network样式
TWaver
HTML5中使用规则函数的方式设置组件的样式，包括树图或拓扑图中节点颜色渲染、边框、冒泡等。本节主要介绍拓扑图中的相关规则。拓扑图中网元的颜色渲染、边框颜色、告警颜色、告警文本、连线捆绑文本、工具条提示文本等都是通过规则函数的方式实现的，用户也可以设置自己的规则函数实现定制。
Network中的样式规则
getLabel：网元文本标签函数,用于设置网元的标签
getToolTip：工具提示
getInnerColor：网元内渲染色函数
getOuterColor：网元边框颜色
getSelectColor：网元选中颜色
getAlarmFillColor：告警冒泡颜色
getAlarmLabel：告警冒泡文本
getLinkHandlerLabel：绑定连线文本
默认实现
//label
Network#getLabel: function (data) {
return data.getStyle('network.label') || data.getName();
};
Tree#getLabel = function (data) {
return data.getName();
};
//toolTip
Network#getToolTip = function (data) {
return data.getToolTip();
};
//innerColor
Network/Tree#
getInnerColor = function (data) {
if (data.IElement) {
var severity = data.getAlarmState().getHighestNativeAlarmSeverity();
if (severity) {
return severity.color;
}
return data.getStyle('inner.color');
}
return null;
};
//outerColor
Network/Tree#
getOuterColor = function (data) {
if (data.IElement) {
var severity = data.getAlarmState().getPropagateSeverity();
if (severity) {
return severity.color;
}
return data.getStyle('outer.color');
}
return null;
};
//selectColor
Network#getSelectColor: function (element) {
return element.getStyle('select.color');
};
//alarmFillColor
Network/Tree#
getAlarmFillColor = function (data) {
if (data.IElement) {
var severity = data.getAlarmState().getHighestNewAlarmSeverity();
if (severity) {
return severity.color;
}
}
return null;
};
//alarmLabel
getAlarmLabel: function (element) {
var severity = element.getAlarmState().getHighestNewAlarmSeverity();
if (severity) {
var label = element.getAlarmState().getNewAlarmCount(severity) + severity.nickName;
if (element.getAlarmState().hasLessSevereNewAlarms()) {
label += "+";
}
return label;
}
return null;
}
//linkHandlerLabel
Network#
getLinkHandlerLabel: function (link) {
if (link.isBundleAgent()) {
return "+(" + link.getBundleCount() + ")";
}
return null;
};
定制规则
准备：
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2022-04-18 14:44:05
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-04-29 15:27:48
*/
import React, {
useEffect, useState } from 'react'
const twaver = require('twaver');
const Demo = () => {
const init = () => {
var box;
var number;
init()
function init() {
number = 0;
var network = new twaver.vector.Network();
network.setToolTipEnabled(true);
box = network.getElementBox();
var tree = new twaver.controls.Tree(box);
var group = new twaver.Group();
group.setName("group"); box.add(group);
group.addChild(createTWaverNode("node1", 300, 100));
group.addChild(createTWaverNode("node2", 300, 130));
group.setExpanded(true);
var from = createTWaverNode("from", 230, 30);
var to = createTWaverNode("to", 270, 150);
var link = new twaver.Link(from, to);
link.setName("hello TWaver HTML5");
box.add(link); // 树节点自身渲染颜色
//tree.getInnerColor = function (data) {
//return "yellow";
// return twaver.Colors.blue_dark;
// };
var treeDom = tree.getView();
treeDom.style.width = "150px";
treeDom.style.height = "100%";
var view = network.getView();
document.getElementById("testID").appendChild(network.getView());
network.adjustBounds({
x: 0, y: 0, width: 1300, height: 600 });
document.getElementById("testID").appendChild(treeDom);
}
function createTWaverNode(name, x, y) {
var node = new twaver.Node();
node.setName(name);
node.setToolTip(name);
//开启告警显示
//node.getAlarmState().increaseNewAlarm(twaver.AlarmSeverity.MAJOR);
node.setClient("number", number++); node.setLocation(x, y);
box.add(node); return node;
}
}
useEffect(init, [])
return (
<>
<p style={
{
fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
<ul style={
{
fontSize: "20px", paddingLeft: "50px" }}>
<li>过滤器</li>
</ul>
{
/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
<div id="testID" style={
{
width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
</>
)
}
export default Demo
开始：
tree元素的内置颜色
网元内渲染色函数
tree.getInnerColor = function (data) {
return "yellow";
// return twaver.Colors.blue_dark;
};
网元边框颜色
网元边框颜色
// 树节点边框颜色
tree.getOuterColor = function (data) {
return "red";
// return twaver.Colors.orange_dark;
};
getOuterColor 同样适用network
告警冒泡颜色
首先将最上面的告警代码放开：
//开启告警显示
node.getAlarmState().increaseNewAlarm(twaver.AlarmSeverity.MAJOR);
发现告警元素在tree中增加了小球显示，颜色与告警颜色一致。
修改告警冒泡颜色：
// 告警冒泡颜色
tree.getAlarmFillColor = function (data) {
if (data instanceof twaver.Element && !data.getAlarmState().isEmpty()) {
return "red";
// return twaver.Colors.orange_light;
} return null;
};
getAlarmFillColor 同样适用network
修改告警显示的label
network.getAlarmFillColor = function (data) {
if (data instanceof twaver.Element && !data.getAlarmState().isEmpty()) {
return "#0000ff";
// return twaver.Colors.green_light;
} return null;
};
network.getAlarmLabel = function (element) {
if (!element.getAlarmState().isEmpty()) {
return "liuqing";
} return null;
};
选中颜色
tree.getSelectColor = function (element) {
return "red";
// return twaver.Colors.gray_dark;
};
绑定连线文本
network.getLinkHandlerLabel = function (data) {
return "liuqing";
// // return twaver.Colors.blue_dark;
};
最终代码：
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2022-04-18 14:44:05
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-04-29 15:27:48
*/
import React, {
useEffect, useState } from 'react'
import {
returnElementBoxAndNetworkFun,
returnNodeFun,
returnLineFun,
returnRegisterImage,
returnGroupFun,
returnAlarmFun, ALARM4
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
// const [network, setnetwork] = useState({})
const init = () => {
// const [_, network] = returnElementBoxAndNetworkFun()
// setnetwork(_ => network)
// network.invalidateElementUIs();
// document.getElementById("testID").appendChild(network.getView());
// 设置最初的大小
// network.adjustBounds({ x: 0, y: 0, width: 800, height: 800 });
// network.getView().style.backgroundColor = "#fff"
// network.getView().style.border = "2px solid #ccc"
// var toolbar = document.createElement('div');
// console.log(network.getLabel(to))
// console.log(network.getToolTip(to))
// console.log(network.getInnerColor(to))
// console.log(network.getOuterColor(to))
// console.log(network.getSelectColor(to))
// console.log(network.getAlarmFillColor(to))
// console.log(network.getAlarmLabel(to))
// console.log(network.getLinkHandlerLabel(link))
var box;
var number;
init()
function init() {
number = 0;
var network = new twaver.vector.Network();
network.setToolTipEnabled(true);
box = network.getElementBox();
var tree = new twaver.controls.Tree(box);
var group = new twaver.Group();
group.setName("group"); box.add(group);
group.addChild(createTWaverNode("node1", 300, 100));
group.addChild(createTWaverNode("node2", 300, 130));
group.setExpanded(true);
var from = createTWaverNode("from", 230, 30);
var to = createTWaverNode("to", 270, 150);
var link = new twaver.Link(from, to);
link.setName("hello TWaver HTML5");
box.add(link); // 树节点自身渲染颜色
// tree.getInnerColor = function (data) {
// return "yellow";
// // return twaver.Colors.blue_dark;
// };
// 树节点边框颜色
// tree.getOuterColor = function (data) {
// return "red";
// // return twaver.Colors.orange_dark;
// };
// network.getOuterColor = function (data) {
// return "red";
// // return twaver.Colors.orange_dark;
// };
// 告警冒泡颜色
// tree.getAlarmFillColor = function (data) {
// if (data instanceof twaver.Element && !data.getAlarmState().isEmpty()) {
// return "red";
// // return twaver.Colors.orange_light;
// } return null;
// };
// network.getAlarmFillColor = function (data) {
// if (data instanceof twaver.Element && !data.getAlarmState().isEmpty()) {
// return "red";
// // return twaver.Colors.orange_light;
// } return null;
// };
// network.getInnerColor = function (data) {
// return "yellow";
// // return twaver.Colors.blue_dark;
// };
// network.getLinkHandlerLabel = function (data) {
// return "liuqing";
// // // return twaver.Colors.blue_dark;
// };
// network是同样的原理，同样的默认实现，
// innerColor - 节点渲染色
// outerColor - 边框颜色
// alarmFillColor － 告警冒泡颜色，如果下面的告警文本为空，告警冒泡不显示
// alarmLabel － 告警文本
// Body 渲染色
// network.getInnerColor = function (data) {
// // return "#ff0000";
// return twaver.Colors.blue_light;
// };
// // 节点边框颜色
// network.getOuterColor = function (data) {
// // return "#00ff00";
// return twaver.Colors.orange_dark;
// };
// // 告警冒泡的颜色，如果下面相应的alarmLabel返回null或者颜色为null不显示
// network.getAlarmFillColor = function (data) {
// if (data instanceof twaver.Element && !data.getAlarmState().isEmpty()) {
// return "#0000ff";
// // return twaver.Colors.green_light;
// } return null;
// };
// network.getAlarmLabel = function (element) {
// if (!element.getAlarmState().isEmpty()) {
// return "liuqing";
// } return null;
// };
tree.getSelectColor = function (element) {
return "red";
// return twaver.Colors.gray_dark;
};
network.getSelectColor = function (element) {
return "red";
// return twaver.Colors.gray_dark;
};
var treeDom = tree.getView();
treeDom.style.width = "150px";
treeDom.style.height = "100%";
// var networkDom = network.getView();
// networkDom.style.left = "150px";
// networkDom.style.width = "100%";
// networkDom.style.height = "100%";
var view = network.getView();
document.getElementById("testID").appendChild(network.getView());
network.adjustBounds({
x: 0, y: 0, width: 1300, height: 600 });
document.getElementById("testID").appendChild(treeDom);
}
function createTWaverNode(name, x, y) {
var node = new twaver.Node();
node.setName(name);
node.setToolTip(name);
node.getAlarmState().increaseNewAlarm(twaver.AlarmSeverity.MAJOR);
node.setClient("number", number++); node.setLocation(x, y);
box.add(node); return node;
}
}
useEffect(init, [])
return (
<>
<p style={
{
fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
<ul style={
{
fontSize: "20px", paddingLeft: "50px" }}>
<li>过滤器</li>
</ul>
{
/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
<div id="testID" style={
{
width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
</>
)
}
export default Demo
学习参考：TWaver Documents