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