连线(Link)
连线通常表示为节点间的连接关系，需要指定起始结束节点，TWaver支持自环，即起始结束节点为同一个节点。直接与连线相连的节点我们称之为fromNode,toNode,如果起始或者结束节点放在网元组中，网元组合并状态时，外观上网元组和连线相连，这个时候此网元组为代理节点。
当节点之间有多条连线时，TWaver支持连线的捆绑和展开，默认双击其中一条连线即可实现两种状态的切换，绑定时显示的连线称为绑定代理，默认将第一条连线设为代理，用户也可以指定代理。
//获取、设置起始点
get/setFromNode:function(fromNode)
//获取、设置结束点
get/setToNode:function(toNode)
//获取代理起始点
getFromAgent:function()
//获取代理结束点
getToAgent:function()
getBundleLinks:function()
getBundleCount:function()
getBundleIndex:function()
reverseBundleExpanded:function()
isBundleAgent:function()
例子
工具Js
const twaver = require('twaver');
// 设置每个图元name的颜色
twaver.Styles.setStyle('label.color', '#ec6c00');
// 设置每个图元name2的颜色
twaver.Styles.setStyle('label2.color', '#57ab9a');
twaver.Styles.setStyle('select.color', '#ef8200');
//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");
const {
CRITICAL, MAJOR, WARNING, MINOR, INDETERMINATE, CLEARED } = twaver.AlarmSeverity
export const ALARM1 = CLEARED
export const ALARM2 = INDETERMINATE
export const ALARM3 = MINOR
export const ALARM4 = MAJOR
export const ALARM5 = CRITICAL
/**
* 创建一个dataBox容器
* 容器中可以add图元
*/
export const returnElementBoxFun = () => new twaver.ElementBox()
/**
* 创建一个画布 network对象
* @param {ElementBox} box 创建一个画布 network对象
*/
export const returnNetworkFun = (box) => new twaver.vector.Network(box)
/**
* 创建一个Group
* 用于包裹图元
*/
export const returnGroupFun = (box, obj = {
}) => {
let group = new twaver.Group(obj)
box.add(group)
return group
}
/**
* 创建一个容器dataBox和一个画布
* 并将容器实例化画布
* @returns [box,network] box network
*/
export const returnElementBoxAndNetworkFun = () => {
let box = returnElementBoxFun();
let network = returnNetworkFun(box);
return [box, network]
}
/**
* 用于创建一个节点
* @param {ElementBox} box dataBox
* @param {String} name 当前节点的name
* @param {Number} x 当前节点的x坐标
* @param {Number} y 当前节点的y坐标
* @returns {Node} Node
*/
export const returnNodeFun = (box, Obj = {
}) => {
let node = new twaver.Node(Obj);
// node.setName(name);
// node.setLocation(x, y);
box.add(node);
return node
}
/**
*
* @param {Node} node1 节点1
* @param {Node} node2 节点2
*/
export const returnLineFun = (node1, node2) => new twaver.Link(node1, node2)
/**
* 注册图片 用于设置图元的img setImage
* @param {String} url 图片 url
* @param {NetWork} svg NetWork对象
*/
export function returnRegisterImage(url, svg) {
var image = new Image();
image.src = url;
var views = arguments;
image.onload = function () {
// getImageName 获取到的图片name用做 node节点的显示img
twaver.Util.registerImage(getImageName(url), image, image.width, image.height, svg === true);
image.onload = null;
for (var i = 1; i < views.length; i++) {
var view = views[i];
if (view.invalidateElementUIs) {
view.invalidateElementUIs();
}
if (view.invalidateDisplay) {
view.invalidateDisplay();
}
}
};
// getImageName 获取到的图片name用做 node节点的显示img
const getImageName = (url) => {
var index = url.lastIndexOf('/');
var name = url;
if (index >= 0) {
name = url.substring(index + 1);
}
index = name.lastIndexOf('.');
if (index >= 0) {
name = name.substring(0, index);
}
return name;
}
}
/*
* @param {*} 告警的Id
* @param {*} 告警网元的Id
* @param {*} 告警级别
* @param {*} alarmBox 网元容器.getAlarmBox()
*/
export const returnAlarmFun = (alarmID, elementID, alarmSeverity, alarmBox) => {
var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity);
alarmBox.add(alarm);
}
/**
*
* @param {*} box 容器dataBox
* @param {*} layer layer对象
* @param {*} shape 图层的形状
* @param {*} x node点的坐标
* @param {*} y node点的坐标
* @param {*} width 图层的宽高
* @param {*} height 图层的宽高
* @param {*} fillColor 图层填充颜色
*/
/**
*
* shape
* circle 圆形
* diamond 菱形
* rectangle 长方形
*/
export const createNode = (box, layer, shape, x, y, width, height, fillColor, ) => {
var node = new twaver.Node();
node.setLayerId(layer.getId());
node.setName('layer-' + layer.getId());
node.setStyle('body.type', 'vector');
node.setStyle('vector.fill.alpha', 0.7);
node.setStyle('vector.shape', shape);
node.setSize(width, height);
node.setLocation(x, y);
node.setStyle('vector.fill.color', fillColor);
box.add(node); return node;
}
/**
*
* @param {*} table
* @param {*} name
* @param {*} propetyName
* @param {*} propertyType
* @param {*} valueType
*/
export const returnCreateColumn = (table, name, propetyName, propertyType, valueType) => {
var column = new twaver.Column(name);
column.setName(name);
column.setPropertyName(propetyName);
column.setPropertyType(propertyType);
if (valueType) {
column.setValueType(valueType);
}
table.getColumnBox().add(column);
return column;
}
export const returnRandomColor = () => {
var r = randomInt(255);
var g = randomInt(255);
var b = randomInt(255);
return '#' + formatNumber((r << 16) | (g << 8) | b);
}
function randomInt(n) {
return Math.floor(Math.random() * n);
}
function formatNumber(value) {
var result = value.toString(16);
while (result.length < 6) {
result = '0' + result; } return result;
}
react页面
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2022-04-18 14:44:05
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-04-19 18:27:38
*/
import React, {
useEffect, useState } from 'react'
import {
returnElementBoxAndNetworkFun,
returnNodeFun,
returnLineFun,
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
const [network, setnetwork] = useState({
})
const init = () => {
const [box, network] = returnElementBoxAndNetworkFun()
setnetwork(_ => network)
network.invalidateElementUIs();
document.getElementById("testID").appendChild(network.getView());
// 设置最初的大小
network.adjustBounds({
x: 0, y: 0, width: 1000, height: 1000 });
initDataBox();
function initDataBox() {
let from = returnNodeFun(box, {
name: 'from', location: {
x: 100, y: 100 } })
let to = returnNodeFun(box, {
name: 'to', location: {
x: 300, y: 300 } })
let otherNode = returnNodeFun(box, {
name: 'otherNode', location: {
x: 500, y: 500 } })
var link1 = returnLineFun(from, to);
link1.setName('link1');
link1.s('link.color', '#238475');
// 设置 name的偏移量
link1.s('label.xoffset', -10);
link1.s('label.yoffset', -10);
box.add(link1)
var link2 = returnLineFun(from, to);
link2.setName('link2');
link2.s('link.color', '#238475');
box.add(link2);
var link3 = returnLineFun(from, to);
link3.setName('link3');
// 设置 name的偏移量
link3.s('label.xoffset', 10);
link3.s('label.yoffset', 10);
link3.s('link.color', '#238475');
box.add(link3);
var link4 = returnLineFun(from, to);
link4.setName('link4');
// 获取link4的起始点 node 的 name
console.log(link4.getFromNode().getName())
// 获取link4的结束点 node 的 name
console.log(link4.getToNode().getName())
// 设置link4 to指向的节点
link4.setToNode(otherNode)
//获取代理起始点
console.log(link4.getFromAgent())
// 设置 name的偏移量
link4.s('label.xoffset', 10);
link4.s('label.yoffset', 20);
link4.s('link.color', '#238475');
box.add(link4);
}
}
useEffect(init, [])
return (
<>
<p style={
{
fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
<ul style={
{
fontSize: "20px", paddingLeft: "50px" }}>
<li>连线(Link)</li>
</ul>
{
/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
<div id="testID" style={
{
width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
</>
)
}
export default Demo
学习参考：TWaver Documents
