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

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

2024-09-26 36
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了如何在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学习
HTML学习network
html学习样式
HTML network
六卿
目录
相关文章
游客x4uejvahonufa
|
23天前
|
人工智能
通过AI学习一些HTML的布局方式
学习到了很多
游客x4uejvahonufa
46 3
六卿
|
2月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼（Overview）可视化视图组件，它作为Network的缩略图，允许用户通过缩略图导航Network，支持单击、双击和框选操作来控制Network视图。
六卿
38 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
六卿
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件（List），展示了如何创建列表、设置列表属性（如行高、间隔颜色等）、实现数据绑定和排序，以及如何通过React代码示例进行操作。
六卿
30 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
六卿
|
2月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板，通过动态调整分割条来改变面板的大小，支持水平和垂直分割。
六卿
32 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
六卿
|
2月前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法，包括横向和纵向滚动条的控制，但遇到了设置不生效的问题，可能与软件版本有关。
六卿
35 2
Twaver-HTML5基础学习(36)是否显示滚动条
游客44yag4ft7nckq
|
13天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式，通过&lt;head&gt;部分的&lt;style&gt;标签定义；外部样式表适用于多个页面，通过&lt;link&gt;标签引用外部CSS文件；&lt;style&gt;定义样式，&lt;link&gt;引用资源；已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;，属性有color和bgcolor。
游客44yag4ft7nckq
22 0
游客44yag4ft7nckq
|
13天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式，以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
游客44yag4ft7nckq
12 0
游客44yag4ft7nckq
|
13天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式，包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式，并提供实例演示。
游客44yag4ft7nckq
21 0
六卿
|
2月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载，主要通过将network转换为canvas对象，然后转换为base64编码的图片进行展示和下载。
六卿
35 5
六卿
|
2月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件（Table），包括创建表格、定义列对象、实现数据绑定和排序，以及处理表格事件和获取表格数据的方法。
六卿
38 1