mxgraph淺入
參考文獻：https://www.cnblogs.com/xuxg/articles/3246206.html
1.了解
（1）如何判斷需要引入mxgraph產品：過程圖、工作流和BPM的可視化圖表、流程圖、交通或水流量、 數據庫和WWW的可視化、網絡和電信顯示、映射應用和地理信息系統、UML圖、電子線路、金融、 超大規模集成電路和社會網絡、數據挖掘、生化、生態循環、實體和因果關系和組織圖表。
（2）如何選取自己需要mxgraph產品的哪一個庫：mxGraph分為在客戶端的JavaScript庫和在服務器端兩種支持的語言之一的.NET或Java庫
（3）選取產品的javasript庫，底層使用哪種技術實現：mxGraph使用在瀏覽器上的客戶端的JavaScript功能。而在JavaScript代碼層面上，在瀏覽器中使用了基本的矢量圖形語言來顯示圖形， （對於大多數符合標准的瀏覽器使用SVG技術，而在IE中使用了的VML技術）
2.安裝
（1）mxgraph以zip包的形式發布；解壓之后可以看到不同的開發庫；
donet：服務端.net代碼；
java：Java服務器端類；
JavaScript：客戶端功能。
（2）也可以通過使用npm進行安裝
npm install mxGraph -- save
3.使用
目錄如下
代碼解析如下
（1）導入
源碼中部分實現代碼
mxBasePath指定mxgraph的根路徑，防止庫路徑改變引起的引入路徑錯誤問題；該指定需在引入mxClient之前
（2）判斷對瀏覽器的支持性
（3）mxutils底下封裝的消息彈窗示例
mxUtils.alert();mxUtils.popup();mxUtils.prompt();mxUtils.confirm();mxUtils.error();
（4）創建容器，平鋪整個畫布，方便我們驗證
（5）mxclient底下封裝了mxDivResizer對樣式重置，處理IE怪異模式底下的樣式問題
------大概看了一下源碼，是對頁面寬高的重新計算，沒有深究是處理怎么樣的怪異模式顯示問題
（6）mxEvent底下封裝了阻止出發容器里面的默認事件，源碼核心preventDefault，禁止瀏覽器默認的右鍵菜單啦
（7）開始繪圖，示例一個mxGraph進行繪制，源碼中有隊svg和vml支持性的判斷，核心有createGraphView，createHtml類等
（8）mxgraph的模型-mxGraphModel （/model/mxgraphModel.js）
是mxgraph的核心類，對於圖形的添加，修改，清除，在該類中實現。對於模型的每一個變化，請調用beginUpdate()， 作出適當的調用更改模型，然后調用endUpate()方法來完成的變化，通知發送變化的事件出去。
model常用的api
add(parent, child, index)
remove(cell)
setCollapsed(cell, collapsed)
setGeometry(cell, geometry)
setRoot(root)
setStyle(cell, style)
setTerminal(cell, terminal, isSource)
setTerminals(edge,source,target)
setValue(cell, value)
setVisible(cell, visible)
也就是說使用上述api時，需要使用調用beginUpdate()和endUpdate()
mxGraphModel.beginUpdate() - 啟動一個事務或子事務處理。
mxGraphModel.endUpdate() - 完成一個事務或子事務處理。
mxGraph.addVertex() - 添加一個新頂點到指定的父單元(對於cell的操作)。
mxGraph.addEdge() - 添加一個邊緣到指定的父單元（對於cell的操作）。
（9）單元對象-mxCell
插入單元：var v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30, 'defaultVertex;fillColor=blue');
mxGraph.setCellStyle(style, cells) – 封裝在開始/結束的更新中， 指定一組單元的格式。
mxGraph.getCellStyle(cell)
mxGraph.setCellStyle(style, cells) – 封裝在開始/結束的更新中， 指定一組單元的格式。
mxGraph.getCellStyle(cell)
（10）組結構
mxGraph.groupCells(group, border, cells) – 在開始/結束更新之間，把指定的單元加入到指定的組
mxGraph.ungroupCells(cells) – 把特定的單元從它的父單元中移除， 並把它們加入到它們父單元的父單元。操作之后的空組會被刪除。這些操作都是在開始/結束更新之間發生。
（11）初始化的API
畫布大小
wnd.setMaximizable(true);
wnd.setResizable(true);
wnd.setVisible(true);
wnd.setScrollable(true);
圖像大小
graph.zoomIn();
graph.zoomOut();
// 禁用瀏覽器默認的右鍵菜單欄
mxEvent.disableContextMenu(container);
// 在已有容器內構造一個graph
var graph = new mxGraph(container);
// 鼠標框選
new mxRubberband(graph);
// 在圖形中創建默認組件
var parent = graph.getDefaultParent();
// 只可預覽不可選中拖動連接
graph.setEnabled(false);
// 容器大小自適應
graph.setResizeContainer(true);
// 動態改變樣式
graph.getView().updateStyle = true;
// 可否重復連接
graph.setMultigraph(false);
// 禁止改變元素大小
graph.setCellsResizable(false);
// 允許連線的目標和源是同一元素
graph.setAllowLoops(true);
4.源碼框架解析
1.mxgraph的javascript庫分為8個類;頂級引入的是mxClient類,包括其他的類
mxClient.include(mxClient.basePath+'/js/util/...
mxClient.include(mxClient.basePath+'/js/shape/...
mxClient.include(mxClient.basePath+'/js/layout/...
mxClient.include(mxClient.basePath+'/js/model/...
mxClient.include(mxClient.basePath+'/js/view/...
mxClient.include(mxClient.basePath+'/js/handler/...
mxClient.include(mxClient.basePath+'/js/editor/...
mxClient.include(mxClient.basePath+'/js/io/...
父類引入子類得方法如下：
（1）圖編輯器包：editor(主要類是mxEditor)；
（2）事件監聽：handler（用於框架選擇：mxRubberband；工具提示：mxTooltipHandler；單元修改：mxGraphHandler）；
（3）布局處理：layout（實現樹形布局算法：mxCompactTreeLayout；）
mxShape的子類mxPolyline如下繼承：
（4）各種形狀包：shape（shape包提供各種形狀，這些形狀是mxShape的子類）
（5,6）圖像的處理：view,model(核心類：mxGraph）
/*********************************************引用start************************************************/
mxGraph指的是包含了mxCells並緩存mxGraphView中單元格的狀態的mxGraphModel。根據mxStylesheet中定義的外觀，使用mxCellRenderer繪制單元格。撤消歷史記錄在mxUndoManager中實現。要在圖表上顯示圖標，可以使用mxCellOverlay。驗證規則使用mxMultiplicity定義
/*********************************************引用end************************************************/
(7) 其他類需要用到的實用方法：util（復制粘貼的mxClipboard；跨瀏覽器事件處理：mxEvent；通用功能：mxUtils；國際化：mxResource；）
（8）將JavaScript對象轉換為XML：io