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 mxEventObject(mxEvent.CHANGE,
     'edit', edit, 'changes', edit.changes));
  edit.source.fireEvent(new mxEventObject(mxEvent.NOTIFY,
     'edit', edit, 'changes', edit.changes));
}

model.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit));
model.fireEvent(new mxEventObject(mxEvent.CHANGE,
     'edit', edit, 'changes', changes));

2. 構造

mxGraphModel的建構函式如下：

/**
 * root - 表示根cell的mxCell
 */
function mxGraphModel(root) {
    this.currentEdit = this.createUndoableEdit();

    if (root != null) {
        this.setRoot(root);
    } else {
        this.clear();
    }
}

mxGraphModel與mxGraph一樣，都是採用原型鏈方式繼承自mxEventSource：

mxGraphModel.prototype = new mxEventSource();
mxGraphModel.prototype.constructor = mxGraphModel;

3. 原型屬性

下面列舉一些重要的原型屬性：

// 儲存根cell，而根cell又包含表示圖層作為子cell的cell。也就是說，圖中的實際元素應該存在於第三代cell中
mxGraphModel.prototype.root = null;

// 從id到cell的map
mxGraphModel.prototype.cells = null;

// 指定下一個被建立的id。初始值為0
mxGraphModel.prototype.nextId = 0;

// 儲存當前事務的更改。如果事務已關閉，則使用createUndoableEdit為此變數建立新物件
mxGraphModel.prototype.currentEdit = null;

// 計算巢狀事務的深度。每次呼叫beginUpdate都會增加這個數字，每次呼叫endUpdate都會減少它
// 當計數器達到0時，事務將關閉並觸發相應的事件。初始值為0
mxGraphModel.prototype.updateLevel = 0;

4. 原型方法

mxGraphModel中有許多原型方法和類，這裡選擇一些瞭解其聯絡及實現

4.1 建立根cell

建立根cell有兩種方式，第一種就是在建立mxGraphModel時指定一個cell作為根cell，如果沒有指定，則使用第二種方法，如下所示。

呼叫createRoot方法建立一個根cell，然後設定為當前model的根cell，並會觸發根cell更改的事件：

/**
 * 呼叫createRoot建立一個根cell
 */
mxGraphModel.prototype.clear = function () {
    this.setRoot(this.createRoot());
};

/**
 * 使用預設圖層（第一個cell）建立新的根cell
 */
mxGraphModel.prototype.createRoot = function () {
    var cell = new mxCell();
    cell.insert(new mxCell());
    return cell;
};

/**
 * 使用mxRootChange設定模型的root，並將更改新增到當前事務。
 * 這將重置模型中的所有資料結構，並且是清除現有模型的首選方法。返回新根。
 *
 * root - 根cell
 */
mxGraphModel.prototype.setRoot = function (root) {
    this.execute(new mxRootChange(this, root));
    return root;
};

/**
 * 如果需要，執行給定的編輯並觸發事件。編輯物件需要一個被呼叫的執行函式。編輯將新增到beginUpdate
 * 和endUpdate呼叫之間的currentEdit，以便在此執行是單個事務時觸發事件，即如果沒有呼叫
 * endUpdate之前沒有呼叫startUpdate呼叫。此實現在執行給定更改之前觸發execute事件。
 * 
 * change - 描述更改的物件。
 */
mxGraphModel.prototype.execute = function (change) {
    change.execute();
    this.beginUpdate();
    this.currentEdit.add(change);
    this.fireEvent(new mxEventObject(mxEvent.EXECUTE, 'change', change));
    // 新的全域性執行事件
    this.fireEvent(new mxEventObject(mxEvent.EXECUTED, 'change', change));
    this.endUpdate();
};

設定新的根cell時，是通過建立一個新的mxRootChange來實現的：

/**
 * 更改模型中的根的操作。
 * 通過建構函式指定模型中根的更改。
 */
function mxRootChange(model, root) {
    this.model = model;
    this.root = root;
    this.previous = root;
}

/**
 * 使用mxGraphModel.rootChanged執行根的更改
 */
mxRootChange.prototype.execute = function () {
    this.root = this.previous;
    this.previous = this.model.rootChanged(this.previous);
};

/**
 * 內部回撥以更改模型的根並更新內部資料結構，例如cells和nextId。返回先前的根。
 *
 * root - 根cell
 */
mxGraphModel.prototype.rootChanged = function (root) {
    var oldRoot = this.root;
    this.root = root;

    // 重置計數器和資料結構
    this.nextId = 0;
    this.cells = null;
    this.cellAdded(root);

    return oldRoot;
};

4.2 事務管理

mxGraphModel的事務管理簡單而強大，主要通過beginUpdate和endUpdate實現：

/**
 * 將updateLevel加1。事件通知排隊，直到updateLevel使用endUpdate減到0。
 */
mxGraphModel.prototype.beginUpdate = function () {
    this.updateLevel++;
    this.fireEvent(new mxEventObject(mxEvent.BEGIN_UPDATE));

    if (this.updateLevel === 1) {
        this.fireEvent(new mxEventObject(mxEvent.START_EDIT));
    }
};

/**
 * 將updateLevel減1，並在updateLevel減到0時觸發undo事件。此函式通過呼叫currentEdit
 * 上的notify方法間接觸發change事件，然後使用createUndoableEdit建立新的currentEdit。
 *
 * 每次編輯時只會觸發一次undo事件，而每當呼叫notify函式時，都會觸發change事件，即在編輯的
 * 撤消和重做時觸發。
 */
mxGraphModel.prototype.endUpdate = function () {
    this.updateLevel--;

    if (this.updateLevel === 0) {
        this.fireEvent(new mxEventObject(mxEvent.END_EDIT));
    }

    if (!this.endingUpdate) {
        this.endingUpdate = this.updateLevel === 0;
        this.fireEvent(new mxEventObject(mxEvent.END_UPDATE, 'edit', this.currentEdit));

        try {
            if (this.endingUpdate && !this.currentEdit.isEmpty()) {
                this.fireEvent(new mxEventObject(mxEvent.BEFORE_UNDO, 'edit', this.currentEdit));
                var tmp = this.currentEdit;
                this.currentEdit = this.createUndoableEdit();
                tmp.notify();
                this.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', tmp));
            }
        } finally {
            this.endingUpdate = false;
        }
    }
};

/**
 * 建立一個新的mxUndoableEdit，它實現notify方法以通過mxUndoableEdit的源觸發change和notify事件。
 *
 * significant - 可選布林值，指定要建立的編輯是否重要。預設為true。
 */
mxGraphModel.prototype.createUndoableEdit = function (significant) {
    var edit = new mxUndoableEdit(this, (significant != null) ? significant : true);

    edit.notify = function () {
        // LATER: Remove changes property (deprecated)
        edit.source.fireEvent(new mxEventObject(mxEvent.CHANGE,
            'edit', edit, 'changes', edit.changes));
        edit.source.fireEvent(new mxEventObject(mxEvent.NOTIFY,
            'edit', edit, 'changes', edit.changes));
    };

    return edit;
};