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

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

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

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

graph.foldingEnabled = false;

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

graph.recursiveResize = true;

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

/**
 * 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);
};

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

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

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

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

下面以項(xiàng)目的這個(gè)節(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 就是長(zhǎng)這個(gè)樣子。通過設(shè)置自定義的 node 樣式(見 Graph 類 _putVertexStyle 方法)與 image 屬性設(shè)置圖片路徑配合完成。

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

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

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è)置

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

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

重點(diǎn)說說 mxCellEditor.prototype.blurEnabled 這個(gè)屬性，默認(rèn)情況下如果用戶在輸入內(nèi)容時(shí)鼠標(biāo)點(diǎn)擊了畫布之外的不可聚焦區(qū)域(div、section、article等)，節(jié)點(diǎn)內(nèi)的編輯器是不會(huì)失焦的，這導(dǎo)致了 LABEL_CHANGED 事件不會(huì)被觸發(fā)。但在實(shí)際項(xiàng)目開發(fā)中一般我們會(huì)期望，如果用戶在輸入內(nèi)容時(shí)鼠標(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);

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

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

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

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

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

  
    
    
    
      
    
    ........
  

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

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

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

本項(xiàng)目的 _listenEvent 方法用到兩個(gè)事件監(jiān)聽對(duì)象。

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

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

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

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

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

從上面的方法調(diào)用依賴圖中我們可以看到，insertVertex、insertEdge 最終都被當(dāng)作 Cell 處理，在后續(xù)觸發(fā)的事件也沒有對(duì) 節(jié)點(diǎn)/邊 進(jìn)行區(qū)分，而是統(tǒng)一當(dāng)作 Cell 事件。所以對(duì)于一個(gè) 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("添加了一個(gè)節(jié)點(diǎn)");
  } else if (cell.edge) {
    this.$message.info("添加了一條線");
  }
});

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

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

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

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

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

導(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);
// ...

但這段代碼會(huì)將整塊畫布截圖，而不是以最左上角的元素及最右下角的元素作為邊界截圖。如果你有以元素作為邊界的需求，則需要調(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),
    );
//.....

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

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

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

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

mxGraph Tutorial

mxGraph User Manual – JavaScript Client

mxGraph API Specification

mxGraph Javascript Examples