Twaver-HTML5基础学习(21)网元管理容器(ElementBox)

简介: 本文介绍了Twaver HTML5中的网元管理容器(ElementBox),包括如何监听网元属性变化、容器属性变化、网元元素变化以及数据层次变化。文章通过示例代码展示了如何使用不同的事件监听方法来响应这些变化,并通过控制台输出相关的事件信息。

网元管理容器(ElementBox)

TWaver的数据容器不仅包含元素集合,还管理着元素的层次关系,以及选中模型。
当容器中的元素变化都会派发出相应的变化事件,如元素增减变化派发DataBoxChangeEvent,元素属性变化派发PropertyChangeEvent,元素层次变化派发出HierarchyChangeEvent,元素选中变化由SelectionModel管理

主要分为了三大类:在这里插入图片描述

一、属性变化

包括容器元素网元属性变化、容器属性变化:

网元属性变化:addDataBoxChangeListener
容器属性变化:addPropertyChangeListener
使用:
   // 监听网元属性变化
        // name  name1 icon image location 等都算
        box.addDataPropertyChangeListener((e) => {
   
            console.log(e, 'DataPropertyChangeListener')
        })
        // 监听box的属性变化
        box.addPropertyChangeListener((e) => {
   
            console.log(e, 'propertyChangeListener')
        })
        //改变容器name属性 触发propertyChangeListener
        box.setName('LiuQing')
        //
结果:

在这里插入图片描述

改变node节点左边坐标:在这里插入图片描述

二、网元元素变化

网元元素变化:addDataBoxChangeListener
使用:
  // 监听box元素变化
        box.addDataBoxChangeListener((e) => {
   
            console.log(e, 'addDataBoxChangeListener')
        })
        let node2 = returnNodeFun(box, {
    name: "第二个node", location: {
    x: 200, y: 200 } })
结果:

在这里插入图片描述

二、数据层次变化

数据层次变化:addHierarchyChangeListener
使用:
  // 监听数据层次变化
        box.addHierarchyChangeListener(e => {
   
            console.log(e, 'addHierarchyChangeListener')
        })

        box.moveToTop(node2);
结果:

在这里插入图片描述

Note:在发生DataPropertyChange事件的时候,欲想做一些处理,可以重新实现databox#onDataPropertyChanged方法。函数原型为:onDataPropertyChanged:function(data,e)。

学习参考:TWaver Documents

目录
相关文章
|
2月前
|
人工智能
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
43 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
39 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
3月前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
37 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
40 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
3月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
35 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
3月前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
37 2
Twaver-HTML5基础学习(36)是否显示滚动条
|
3月前
Twaver-HTML5基础学习(32)Network样式andTree样式
本文介绍了如何在Twaver-HTML5中自定义Network和Tree组件的样式,包括标签、提示、颜色、告警等。
40 2
Twaver-HTML5基础学习(32)Network样式andTree样式
|
2月前
|
Kubernetes Linux 持续交付
docker容器学习
【10月更文挑战第1天】
39 1
|
3月前
|
Kubernetes API Docker
跟着iLogtail学习容器运行时与K8s下日志采集方案
iLogtail 作为开源可观测数据采集器,对 Kubernetes 环境下日志采集有着非常好的支持,本文跟随 iLogtail 的脚步,了解容器运行时与 K8s 下日志数据采集原理。