Twaver-HTML5基础学习(21)网元管理容器(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