mxGraph源码学习：mxCell

Posted 2023-02-23 remo0x

1. 概览

mxCell是graph model的元素。它们表示graph中的group、vertex和edge的状态。

对于自定义属性，建议使用XML节点作为cell的值。以下代码可用于创建具有XML节点的cell作为值：

var doc = mxUtils.createXmlDocument();
var node = doc.createElement('MyNode')
node.setAttribute('label', 'MyLabel');
node.setAttribute('attribute1', 'value1');
graph.insertVertex(graph.getDefaultParent(), null, node, 40, 40, 80, 30);

要使标签起作用，应重写mxGraph.convertValueToString和mxGraph.cellLabelChanged，如下所示：

graph.convertValueToString = function(cell) 
  if (mxUtils.isNode(cell.value)) 
    return cell.getAttribute('label', '')
  
;

var cellLabelChanged = graph.cellLabelChanged;
graph.cellLabelChanged = function(cell, newValue, autoSize) 
  if (mxUtils.isNode(cell.value)) 
    // clone正确撤消/重做的值
    var elt = cell.value.cloneNode(true);
    elt.setAttribute('label', newValue);
    newValue = elt;
  

  cellLabelChanged.apply(this, arguments);
;

2. 构造

mxCell的构造函数如下：

/**
 * value - 表示cell值的可选对象。
 * geometry - 可选的mxGeometry，用于指定几何体。
 * style - 可选的格式化字符串，用于定义样式
 */
function mxCell(value, geometry, style) 
    this.value = value;
    this.setGeometry(geometry);
    this.setStyle(style);

    if (this.onInit != null) 
        this.onInit();
    

3. 原型属性

列举一些mxCell的原型属性：

// cell的id。默认为null
mxCell.prototype.id = null;

// 用户对象。默认为null
mxCell.prototype.value = null;

// mxGeometry表示cell的几何状态。默认为null
mxCell.prototype.geometry = null;

// 将样式保存为[(stylename|key = value);]形式的字符串。默认值为null
mxCell.prototype.style = null;

// 指定cell是否为vertex。默认值为false
mxCell.prototype.vertex = false;

// 指定cell是否为edge。默认值为false
mxCell.prototype.edge = false;

// 指向父cell
mxCell.prototype.parent = null;

// 指向子cell
mxCell.prototype.children = null;


// 不应在clone中克隆的成员列表。此字段将传递给mxUtils.clone，并且不会在mxCellCodec中保持持久性。
// 这不是所有类的约定，它仅在此类中用于标记瞬态字段，因为js不支持瞬态修饰符。
mxCell.prototype.mxTransient = ['id', 'value', 'parent', 'source',
    'target', 'children', 'edges'];

4. 原型方法

除了原型属性的getter和setter外，列举几个方法的实现：

/**
 * 将指定的edge插入edge数组并返回edge。将更新edge的相应终端参考
 *
 * edge - 要插入edge数组的mxCell
 * isOutgoing - Boolean，指定边是否外支
 */
mxCell.prototype.insertEdge = function (edge, isOutgoing) 
    if (edge != null) 
        edge.removeFromTerminal(isOutgoing);
        edge.setTerminal(this, isOutgoing);

        if (this.edges == null ||
            edge.getTerminal(!isOutgoing) != this ||
            mxUtils.indexOf(this.edges, edge) < 0) 
            if (this.edges == null) 
                this.edges = [];
            

            this.edges.push(edge);
        
    

    return edge;
;

/**
 * 返回cell的克隆。使用cloneValue克隆用户对象。克隆过程中将忽略mxTransient中的所有字段
 */
mxCell.prototype.clone = function () 
    var clone = mxUtils.clone(this, this.mxTransient);
    clone.setValue(this.cloneValue());

    return clone;
;

/**
 * 返回cell用户对象的克隆。
 */
mxCell.prototype.cloneValue = function () 
    var value = this.getValue();

    if (value != null) 
        if (typeof(value.clone) == 'function') 
            value = value.clone();
        
        else if (!isNaN(value.nodeType)) 
            value = value.cloneNode(true);
        
    

    return value;
;