【mxGraph】源码学习：（6）mxGraphModel

1. 概览

mxGraphModel继承自mxEventSource以实现graph model。graph model是负责存储graph数据结构的包装器。graph model充当事务包装器，其中包含所有更改的事件通知，而cell包含用于更新实际数据结构的原子操作。

1.1 图层

模型中的cell层次结构必须具有顶级根cell，其中包含图层（通常是一个默认图层），而这些图层又包含图层的顶级cell。这意味着每个cell都包含在一个图层中。如果不需要图层，则应将所有新cell添加到默认图层。

图层可用于隐藏和显示cell组，或用于将cell组放置在显示中的其他cell之上。要识别图层，可以使用isLayer方法。如果给定cell的父级是模型的根，则返回true。

1.2 事件

有关详细信息，参阅事件部分。有一组新事件可用于跟踪事件发生的变化。这些事件称为初始beginUpdate的startEdit，为每个执行的更改执行，endEdit为endUpdate执行。执行的事件包含一个名为change的属性，表示执行后的更改。

1.3 编码模型

使用如下代码编码graph model，这将创建一个包含所有模型信息的XML节点：

var enc = new mxCodec();
var node = enc.encode(graph.getModel());

对于更改的编码，需要graph model监听器来编码来自给定更改数组的每个更改：

model.addListener(mxEvent.CHANGE, function(sender, evt) {
   
  var changes = evt.getProperty('edit').changes;
  var nodes = [];
  var codec = new mxCodec();

  for (var i = 0; i < changes.length; i++) {
   
    nodes.push(codec.encode(changes[i]));
  }
  // do something with the nodes
});

对于解码和执行更改，编解码器需要一个查找功能，允许它按如下方式解析单元ID：

var codec = new mxCodec();
codec.lookup = function(id) {
   
  return model.getCell(id);
}

对于每个编码的变化（由节点表示），可以使用以下代码来执行解码并创建变更对象：

var changes = [];
var change = codec.decode(node);
change.model = model;
change.execute();
changes.push(change);

然后可以使用模型如下调度更改：

var edit = new mxUndoableEdit(model, false);
edit.changes = changes;

edit.notify = function() {
   
  edit.source.fireEvent(new