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