轻量高效的拓扑图组件
zh

Qunee Developer Guide

事件处理

容器对图元属性变化事进行统一处理,这样用户只需要通过监听图元容器,就可以响应所有图元的属性变化事件,不需要对每个图元单独添加监听

图元变化事件

图元属性变化时,图元容器会通过#dataChangeDispatcher 转发相应事件,改变图元的父子关系时,则可通过#parentChangeDispatcher进行监听

示例1

添加图元属性变化监听器

var model = graph.graphModel;
var a = new Q.Node();
model.add(a);
model.dataChangeDispatcher.addListener({
    onEvent: function(evt){
        Q.log(evt.kind + ' changed. from [' + evt.oldValue + '] to [' + evt.value + ']');
    }
});
a.name = 'A';
a.name = 'B';

打印结果:

name changed. from [undefined] to [A]
name changed. from [A] to [B]

示例2

监听父节点变化,注意这里用到了监听器的另一种写法,直接传入监听函数

var model = graph.graphModel;
 
var a = new Q.Node('A');
model.add(a);
var b = new Q.Node('B');
model.add(b);
 
model.parentChangeDispatcher.addListener(function(evt){
    Q.log(evt.source.name + '\'s ' + evt.kind + ' changed. from [' + evt.oldValue + '] to [' + evt.value.name + ']');
});
 
a.parent = b;

打印结果:

A's parent changed. from [undefined] to [B]

图元容器变化事件

图元集合发生变化时(如添加,删除……),系统会派发集合变化事件,可通过#listChangeDispatcher进行监听

#listChangeDispatcher :Q.Dispatcher - 集合变化事件派发器

示例

监听图元容器集合变化事件

var model = graph.graphModel;
 
model.listChangeDispatcher.addListener(function(evt){
    Q.log(evt.kind);
});
 
var a = new Q.Node('A');
model.add(a);
var b = new Q.Node('B');
model.add(b);
model.remove(a);
model.clear();

打印结果:

add
add
remove
clear