mxGraph 框架是使用面向?qū)ο蟮姆绞竭M(jìn)行編寫的，該框架所有類帶 mx 前綴。在接下來的例子你會看到很多這種形式的方法重寫(Overwrite)。

const oldBar =  mxFoo.prototype.bar;
mxFoo.prototype.bar = function (...args)=> {
   // .....
    oldBar.apply(this,args);
    // .....
};

這一小節(jié)通過 05.consistuent.html 這個例子，講解節(jié)點(diǎn)組合需要注意的地方。

組合節(jié)點(diǎn)后默認(rèn)情況下，父節(jié)點(diǎn)是可折疊的，要關(guān)閉折疊功能需要將 foldingEnabled 設(shè)為 false。

graph.foldingEnabled = false;

如果希望在改變父節(jié)點(diǎn)尺寸時，子節(jié)點(diǎn)與父節(jié)點(diǎn)等比例縮放，需要開啟 recursiveResize。

graph.recursiveResize = true;

下面是這個例子最重要的兩段代碼。

/**
 * Redirects start drag to parent.
 */
const getInitialCellForEvent = mxGraphHandler.prototype.getInitialCellForEvent;
mxGraphHandler.prototype.getInitialCellForEvent = function (me) {
  let cell = getInitialCellForEvent.apply(this, arguments);
  if (this.graph.isPart(cell)) {
    cell = this.graph.getModel().getParent(cell);
  }
  return cell;
};

// Redirects selection to parent
graph.selectCellForEvent = function (cell) {
  if (this.isPart(cell)) {
    mxGraph.prototype.selectCellForEvent.call(this, this.model.getParent(cell));
    return;
  }

  mxGraph.prototype.selectCellForEvent.apply(this, arguments);
};

這兩個方法重寫(Overwrite)了原方法，思路都是判斷如果該節(jié)點(diǎn)是子節(jié)點(diǎn)則替換成父節(jié)點(diǎn)去執(zhí)行剩下的邏輯。

getInitialCellForEvent 在鼠標(biāo)按下(mousedown事件，不是click事件)時觸發(fā)，如果注釋掉這段代碼，不使用父節(jié)點(diǎn)替換，當(dāng)發(fā)生拖拽時子節(jié)點(diǎn)會被多帶帶拖拽，不會與父節(jié)點(diǎn)聯(lián)動。使用父節(jié)點(diǎn)替換后，原本子節(jié)點(diǎn)應(yīng)該被拖拽，現(xiàn)在變成了父節(jié)點(diǎn)被拖拽，實現(xiàn)聯(lián)動效果。

selectCellForEvent 其實是 getInitialCellForEvent 內(nèi)部調(diào)用的一個方法。這個方法的作用是將 cell 設(shè)置為 selectionCell，設(shè)置后可通過 mxGraph.getSelectionCell 可獲取得該節(jié)點(diǎn)。與 getInitialCellForEvent 同理，如果不使用父節(jié)點(diǎn)替換，則 mxGraph.getSelectionCell 獲取到的會是子節(jié)點(diǎn)。項目實戰(zhàn)我們會使用到 mxGraph.getSelectionCell 這個接口。

這部分我主要挑一些這個項目比較重要的點(diǎn)進(jìn)行講解。

下面以項目的這個節(jié)點(diǎn)為例，講解如何組合節(jié)點(diǎn)

const insertVertex = (dom) => {
  // ...
  const nodeRootVertex = new mxCell("鼠標(biāo)雙擊輸入", new mxGeometry(0, 0, 100, 135), `node;image=${src}`);
  nodeRootVertex.vertex = true;
  // ...
  
  const title = dom.getAttribute("alt");
  const titleVertex = graph.insertVertex(nodeRootVertex, null, title,
    0.1, 0.65, 80, 16,
    "constituent=1;whiteSpace=wrap;strokeColor=none;fillColor=none;fontColor=#e6a23c",
    true);
  titleVertex.setConnectable(false);

  const normalTypeVertex = graph.insertVertex(nodeRootVertex, null, null,
    0.05, 0.05, 19, 14,
    `normalType;constituent=1;fillColor=none;image=/static/images/normal-type/forest.png`,
    true);
  normalTypeVertex.setConnectable(false);
  // .....
};

單單 nodeRootVertex 就是長這個樣子。通過設(shè)置自定義的 node 樣式(見 Graph 類 _putVertexStyle 方法)與 image 屬性設(shè)置圖片路徑配合完成。

因為默認(rèn)情況下一個節(jié)點(diǎn)只能有一個文本區(qū)和一個圖片區(qū)，要增加額外的文本和圖片就需要組合節(jié)點(diǎn)。在 nodeRootVertex 上加上 titleVertex 文本節(jié)點(diǎn)和 normalTypeVertex 圖片節(jié)點(diǎn)，最終達(dá)到這個效果。

有時需要為不同子節(jié)點(diǎn)設(shè)置不同的鼠標(biāo)懸浮圖標(biāo)，如本項目鼠標(biāo)懸浮到 normalTypeVertex 時鼠標(biāo)變?yōu)槭中危瑓⒖?AppCanvas.vue 的 setCursor 方法，重寫 mxGraph.prototype.getCursorForCell 可以實現(xiàn)這個功能。

const setCursor = () => {
  const oldGetCursorForCell = mxGraph.prototype.getCursorForCell;
  graph.getCursorForCell = function (...args) {
    const [cell] = args;
    return cell.style.includes("normalType") ?
      "pointer" :
      oldGetCursorForCell.apply(this, args);
  };
};

下面這段代碼是編輯內(nèi)容比較常用的設(shè)置

// 編輯時按回車鍵不換行，而是完成輸入
this.setEnterStopsCellEditing(true);
// 編輯時按 escape 后完成輸入
mxCellEditor.prototype.escapeCancelsEditing = false;
// 失焦時完成輸入
mxCellEditor.prototype.blurEnabled = true;

默認(rèn)情況下輸入內(nèi)容時如果按回車鍵內(nèi)容會換行，但有些場景有禁止換行的需求，希望回車后完成輸入，通過graph.setEnterStopsCellEditing(true) 設(shè)置可以滿足需求。

重點(diǎn)說說 mxCellEditor.prototype.blurEnabled 這個屬性，默認(rèn)情況下如果用戶在輸入內(nèi)容時鼠標(biāo)點(diǎn)擊了畫布之外的不可聚焦區(qū)域(div、section、article等)，節(jié)點(diǎn)內(nèi)的編輯器是不會失焦的，這導(dǎo)致了 LABEL_CHANGED 事件不會被觸發(fā)。但在實際項目開發(fā)中一般我們會期望，如果用戶在輸入內(nèi)容時鼠標(biāo)點(diǎn)擊了畫布之外的地方就應(yīng)該算作完成一次輸入，然后通過被觸發(fā)的 LABEL_CHANGED 事件將修改后的內(nèi)容同步到服務(wù)端。通過 mxCellEditor.prototype.blurEnabled = true 這行代碼設(shè)置可以滿足我們的需求。

const titleVertex = graph.insertVertex(nodeRootVertex, null, title,
      0.1, 0.65, 80, 16,
      "constituent=1;whiteSpace=wrap;strokeColor=none;fillColor=none;fontColor=#e6a23c",
      true);

對于非輸入的文本內(nèi)容，默認(rèn)情況下即便文本超出容器寬度也是不會換行的。我們項目中寬度為 80 的 titleVertex 正是這樣一個例子。

要設(shè)置換行需要做兩件事，第一是通過這行代碼 mxGraph.setHtmlLabels(true)，使用 html 渲染文本(mxGraph 默認(rèn)使用 svg的text 標(biāo)簽渲染文本)。第二是像上面的 titleVertex 的樣式設(shè)置一樣，添加一句 whiteSpace=wrap。

現(xiàn)在介紹一下 Model 這個概念，Model 是當(dāng)前圖形的數(shù)據(jù)結(jié)構(gòu)化表示。mxGraphModel 封裝了 Model 的相關(guān)操作。

你可以啟動項目，畫一個這樣的圖，然后點(diǎn)擊輸出XML。為了保的 xml 與下面的一致，需要先拖出智爺，再拖出超級皮卡丘，最后連接邊。

控制臺應(yīng)該輸出這樣一份 xml

  
    
    
    
      
    
    ........
  

每一個 mxCell 節(jié)點(diǎn)都有 parent 屬性指向父節(jié)點(diǎn)。我們對 value="Hello" 這個 mxCell 節(jié)點(diǎn)手動格式化。

data 值是原對象經(jīng) JSON.stringify 得到的，經(jīng)轉(zhuǎn)義后就變成了上面的樣子。控制臺還打印了一個 mxGraphModel 對象，對比上面的 xml 與 下圖的節(jié)點(diǎn)對象，可以發(fā)現(xiàn)它們只是同一個 Model 的不同表現(xiàn)形式，xml 正是將 mxGraph.model 格式化而成的。

本項目監(jiān)聽事件寫在 AppCanvas.vue 的 _listenEvent 方法，可以在這個方法了解一些常用的事件。下圖來自 mxGraph 類的方法調(diào)用依賴圖，我們可以從這里看出整個框架的事件流動。

本項目的 _listenEvent 方法用到兩個事件監(jiān)聽對象。

mxGraph 繼承自 mxEventSource，使用父類的 addListener 方法可以將自身當(dāng)作一個事件中心進(jìn)行訂閱/廣播事件。

mxGraph.getSelectionModel() 返回一個 mxGraphSelectionModel 對象，這個對象也是繼承自 mxEventSource 有 mxEvent.UNDO、mxEvent.CHANGE 兩個事件，通過監(jiān)聽 mxEvent.CHANGE 事件可以獲取當(dāng)前被選中的 Cell。

mxGraph 類有很多 XXX_CELLS、CELLS_XXXED 這種形式的事件，這部分我還沒弄懂，下面僅以添加事件為例探討這兩類事件的區(qū)別。

添加 Cell 的時候會觸發(fā)兩個事件 ADD_CELLS、CELLS_ADDED， 先觸發(fā) CELLS_ADDED 后觸發(fā) ADD_CELLS。

ADD_CELLS 在 addCells 方法中觸發(fā)，而 CELLS_ADDED 在 cellsAdded 方法中觸發(fā)。而對于 addCells 與 cellsAdded 官方文檔的說明并不能體現(xiàn)出兩者的區(qū)別，再深究下去就要查閱源碼了。按經(jīng)驗而言后觸發(fā)的事件會攜帶更多的信息，所以平時開發(fā)我會監(jiān)聽 ADD_CELLS 事件。MOVE_CELLS、CELLS_MOVED、REMOVE_CELLS、CELLS_REMOVED 等事件與此類似。

從上面的方法調(diào)用依賴圖中我們可以看到，insertVertex、insertEdge 最終都被當(dāng)作 Cell 處理，在后續(xù)觸發(fā)的事件也沒有對 節(jié)點(diǎn)/邊 進(jìn)行區(qū)分，而是統(tǒng)一當(dāng)作 Cell 事件。所以對于一個 Cell 添加事件，需要自己區(qū)別是添加了節(jié)點(diǎn)還是添加了邊。

graph.addListener(mxEvent.CELLS_ADDED, (sender, evt) => {
  const cell = evt.properties.cells[0];
  if (graph.isPart(cell)) {
    return;
  }

  if (cell.vertex) {
    this.$message.info("添加了一個節(jié)點(diǎn)");
  } else if (cell.edge) {
    this.$message.info("添加了一條線");
  }
});

還有就是對于子節(jié)點(diǎn)添加到父節(jié)點(diǎn)的情況(如本項目將 titleVertex 、normalTypeVertex 添加到 nodeRootVertex)也是會觸發(fā) Cell 添加事件的。通常對于這些子節(jié)點(diǎn)不作處理，可以像 05.consistuent.html 一樣用一個 isPart 判斷過濾掉。

上面提到過 mxGraph 繼承自 mxEventSource，調(diào)用父類的 fireEvent 可觸發(fā)自定義事件。下面是一個簡單的例子

mxGraph.addListener("自定義事件A",()=>{ 
  // do something .....
});
// 觸發(fā)自定義事件
mxGraph.fireEvent(new mxEventObject("自定義事件A");

在本項目 Graph 類的 _configCustomEvent 方法我也實現(xiàn)了兩個自定義事件。當(dāng)邊開始拖動時會觸發(fā) EDGE_START_MOVE 事件，當(dāng)節(jié)點(diǎn)開始拖動時會觸發(fā) VERTEX_START_MOVE 事件。

mxGraph 導(dǎo)出圖片的思路是先在前端導(dǎo)出圖形的 xml 及計算圖形的寬高，然后將 xml、寬、高，這有三項數(shù)據(jù)發(fā)送給服務(wù)端，服務(wù)端也使用 mxGraph 提供的 API 將 xml 轉(zhuǎn)換成圖片。服務(wù)端如果是使用 Java 可以參考官方這個例子，下面主要介紹前端需要做的工作。

導(dǎo)出圖片可以使用 mxImageExport 類，該類的文檔有一段可以直接拿來使用的代碼。

// ...
var xmlCanvas = new mxXmlCanvas2D(root);
var imgExport = new mxImageExport();
imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);

var bounds = graph.getGraphBounds();
var w = Math.ceil(bounds.x + bounds.width);
var h = Math.ceil(bounds.y + bounds.height);

var xml = mxUtils.getXml(root);
// ...

但這段代碼會將整塊畫布截圖，而不是以最左上角的元素及最右下角的元素作為邊界截圖。如果你有以元素作為邊界的需求，則需要調(diào)用 xmlCanvas.translate 調(diào)整裁圖邊界。

//.....
var xmlCanvas = new mxXmlCanvas2D(root);
xmlCanvas.translate(
      Math.floor((border / scale - bounds.x) / scale),
      Math.floor((border / scale - bounds.y) / scale),
    );
//.....

完整截圖代碼可以參考本項目 Graph 類的 exportPicXML 方法。

如果節(jié)點(diǎn)像我的項目一樣使用到圖片，而導(dǎo)出來的圖片的節(jié)點(diǎn)沒有圖片。可以從兩個方向排查問題，先檢查發(fā)送的 xml 里的圖片路徑是否是可訪問的，如下面是項目“導(dǎo)出圖片”功能打印的 xml 里的一個圖片標(biāo)簽。

要保證 http://localhost:7777/static/images/ele/ele-005.png 是可訪問的。如果圖片路徑?jīng)]問題再檢查一下使用的圖片格式，本來我在公司項目中節(jié)點(diǎn)內(nèi)使用的圖片是 svg 格式，導(dǎo)出圖片失敗，可能是 mxGraph 不支持這個格式，后來換成 png 之后問題就解決了。

還有就是如果導(dǎo)出的圖片里的節(jié)點(diǎn)的某些顏色跟設(shè)置的有差異，那可能是設(shè)置樣式時寫了3位數(shù)的顏色像 #fff，顏色一定要使用完整的6位，否則導(dǎo)出圖片會有問題。

mxGraph Tutorial

mxGraph User Manual – JavaScript Client

mxGraph API Specification

mxGraph Javascript Examples