AI 助理
备案控制台
开发者社区 云计算 文章 正文

Twaver-HTML5基础学习(32)Network样式andTree样式

2024-09-26 9
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了如何在Twaver-HTML5中自定义Network和Tree组件的样式，包括标签、提示、颜色、告警等。

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

关键词：
HTML样式
HTML学习network
html学习样式
HTML network
HTML学习
六卿
目录
相关文章
六卿
|
1天前
Twaver-HTML5基础学习(29)界面交互
这篇文章介绍了Twaver-HTML5中界面交互的多种模式，包括默认模式、编辑模式、创建网元模式、创建连线模式、创建形状连线模式、创建形状网元模式、触屏模式和放大镜模式，并提供了相应的代码示例。
六卿
27 11
Twaver-HTML5基础学习(29)界面交互
六卿
|
1天前
Twaver-HTML5基础学习(27)过滤器
这篇文章介绍了Twaver-HTML5中过滤器的使用，包括可见过滤器、可移动过滤器和可编辑过滤器，并通过代码示例展示了如何通过设置过滤器实现不同用户权限或网元类型的交互和视图。
六卿
18 8
Twaver-HTML5基础学习(27)过滤器
六卿
|
1天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(26)背景
这篇文章介绍了如何在Twaver-HTML5中设置背景，包括栅格图片、颜色、颜色渐变、基本形状以及图片与形状结合的背景类型，并提供了代码示例。
六卿
13 6
Twaver-HTML5基础学习(26)背景
六卿
|
1天前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图，但未成功，可能与版本有关。
六卿
8 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
六卿
|
2天前
|
移动开发 HTML5 容器
Twaver-HTML5基础学习(21)网元管理容器(ElementBox)
本文介绍了Twaver HTML5中的网元管理容器（ElementBox），包括如何监听网元属性变化、容器属性变化、网元元素变化以及数据层次变化。文章通过示例代码展示了如何使用不同的事件监听方法来响应这些变化，并通过控制台输出相关的事件信息。
六卿
13 4
Twaver-HTML5基础学习(21)网元管理容器(ElementBox)
六卿
|
1天前
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
本文介绍了如何在Twaver-HTML5中监听网络视图操作事件，包括视图绘制、鼠标事件以及获取鼠标下的网元等。
六卿
5 1
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
六卿
|
2天前
|
前端开发 容器
Twaver-HTML5基础学习(24)快速查找(QuickFinder)
文章介绍了Twaver中的快速查找工具QuickFinder，用于根据属性值快速查找网络图中的元素，并提供了使用步骤和React代码示例。
六卿
12 2
Twaver-HTML5基础学习(24)快速查找(QuickFinder)
六卿
|
2天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(23)页管理容器(TabBox)、选中模型(SelectionModel)
本文介绍了Twaver HTML5中的页管理容器（TabBox）和选中模型（SelectionModel）。文章解释了如何使用TabBox来管理Tab页，并通过示例代码展示了SelectionModel的多种功能，包括追加选中元素、设置选中元素、选中所有元素、移除元素选中状态、清除所有选中状态等。此外，还介绍了如何监听选中状态的变化事件以及如何设置不同的选中模式，如多选、单选和不可选。
六卿
15 2
Twaver-HTML5基础学习(23)页管理容器(TabBox)、选中模型(SelectionModel)
六卿
|
2天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法，通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能，以减少界面重绘次数并提升效率。
六卿
15 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
六卿
|
2天前
|
XML 移动开发 JSON
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
本文介绍了Twaver HTML5中的数据容器（DataBox），包括如何进行增删查改操作、遍历数据容器以及判断网元是否存在于数据容器中。DataBox用于管理所有的网元对象，如ElementBox、LayerBox、AlarmBox等，并通过示例代码展示了其常用方法的使用。
六卿
13 1
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断