mxGraph源码学习：mxEventSource

Posted 2022-11-28 remo0x

mxGraph继承自mxEventSource，所以首先了解一下mxEventSource这个类。

1. 作用

mxEventSource是分派命名事件的对象的基类，采用原型链方式继承，如下所示：

function MyClass()  ;
MyClass.prototype = new mxEventSource();
MyClass.prototype.constructor = MyClass;

在mxGraph库中已有如下子类：mxGraphModel，mxGraph，mxGraphView，mxEditor，mxCellOverlay，mxToolbar，mxWindow。

mxEventSource的构造函数如下，可以指定一个事件源：

function mxEventSource(eventSource) 
    this.setEventSource(eventSource);

2. 原型属性

mxEventSource定义了三个原型属性：

// 在数组中保存事件名称和关联的监听器。该数组包含事件名称，其后跟着每个已注册监听器的相应监听器。
mxEventSource.prototype.eventListeners = null;

// 指定是否可以触发事件。默认为true。
mxEventSource.prototype.eventsEnabled = true;

// 事件的可选来源。默认值为null。
mxEventSource.prototype.eventSource = null;

同时还定义了eventsEnabled和eventSource的getter和setter。

3. 原型方法

mxEventSource定义了三个原型方法，分别用于添加、移除和触发监听器：

/**
 * 将指定的函数绑定到给定的事件名称。如果没有给出事件名称，则为所有事件注册监听器。
 * 侦听器的参数是发送方和<mxEventObject>。
 */
mxEventSource.prototype.addListener = function (name, funct) 
    if (this.eventListeners == null) 
        this.eventListeners = [];
    

    this.eventListeners.push(name);
    this.eventListeners.push(funct);
;

/**
 * 从<eventListeners>中删除所有出现的给定监听器。
 */
mxEventSource.prototype.removeListener = function (funct) 
    if (this.eventListeners != null) 
        var i = 0;

        while (i < this.eventListeners.length) 
            if (this.eventListeners[i + 1] == funct) 
                this.eventListeners.splice(i, 2);
             else 
                i += 2;
            
        
    
;

/**
 * 将给定事件分派给为事件注册的监听器。sender参数是可选的。
 * 当前执行范围（“this”）用于监听器调用（参阅<mxUtils.bind>）。
 *
 * evt - 表示事件的<mxEventObject>
 * sender - 要传递给监听器的可选sender。默认值是<getEventSource>的返回值
 */
mxEventSource.prototype.fireEvent = function (evt, sender) 
    if (this.eventListeners != null && this.isEventsEnabled()) 
        if (evt == null) 
            evt = new mxEventObject();
        

        if (sender == null) 
            sender = this.getEventSource();
        

        if (sender == null) 
            sender = this;
        

        var args = [sender, evt];

        for (var i = 0; i < this.eventListeners.length; i += 2) 
            var listen = this.eventListeners[i];

            if (listen == null || listen == evt.getName()) 
                this.eventListeners[i + 1].apply(this, args);
            
        
    
;

4. mxEventObject

在上面mxEventSource.fireEvent中使用的mxEventObject，是单个事件的所有属性的包装器。此外，它还提供了触发事件的功能，并检查它是否被触发。

mxEventObject的构造函数如下，构造具有指定名称的新事件对象。可以附加可选的键值对序列以定义属性：

function mxEventObject(name) 
    this.name = name;
    this.properties = [];

    for (var i = 1; i < arguments.length; i += 2) 
        if (arguments[i + 1] != null) 
            this.properties[arguments[i]] = arguments[i + 1];
        
    

定义了如下原型属性：

// 事件名
mxEventObject.prototype.name = null;

// 将属性保存为关联数组
mxEventObject.prototype.properties = null;

// 触发状态。默认值为false
mxEventObject.prototype.consumed = false;

除了name和properties的getter之外，还定义了三个原型方法：

/**
 * 返回给定键的属性。
 */
mxEventObject.prototype.getProperty = function (key) 
    return this.properties[key];
;

/**
 * 如果事件已触发，则返回true。
 */
mxEventObject.prototype.isConsumed = function () 
    return this.consumed;
;

/**
 * Function: consume
 *
 * 触发事件
 */
mxEventObject.prototype.consume = function () 
    this.consumed = true;
;

mxEventSource和mxEventObject是通过事件名交互的，首先在mxEventSource中注册事件及其监听器，然后将mxEventObject传递给mxEventSource触发对应事件的监听器，将mxEventObject作为参数调用该监听器，如下图所示：