mxgraph淺入

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