基于mxGraph 3.9.9，记录学习收获
1. mxGraph库简介
mxGraph是一个JavaScript图表库，可以快速创建交互式图形和图表应用程序，这些应用程序可以在其供应商支持的任何主要浏览器中运行。
mxGraph在2005年创建，作为商业项目一直持续到2016年，由于前端有很多新技术出现，所以mxGraph作为封装库的优势渐渐消失，最后创建者开明的以Apache 2.0开源协议在GitHub上公布源码。
mxGraph的主要优点是：
- 不需要第三方插件。这消除了插件供应商的依赖性。
- 所涉及的技术是开放的，并且有许多开放式实施，没有一个供应商可以删除让你的应用程序在实践中不可用的产品或技术。
- 标准化技术，这意味着你的应用程序可以部署到最大数量的浏览器用户，而无需在客户端计算机上进行其他配置或安装。大型企业环境通常不喜欢允许个人安装浏览器插件，并且不喜欢更改所有计算机的标准版本。
mxGraph的组件及其联系如下图所示：
因为这一系列文章是记录学习mxGraph源码过程中的理解，所以不赘述mxGraph的其他方面，更详细的介绍可以阅读官方文档。
2. mxGraph项目结构
首先需要获取mxGraph的源码及其文档，地址如下所示：
- 官方文档：mxGraph
- GitHub库：jgraph/mxgraph
将整个mxGraph项目从GitHub中clone到本地：
git clone https://github.com/jgraph/mxgraph.git
mxGraph的主要文件和文件夹描述如下表所示：
| 文件（夹） | 描述 |
|---|---|
| /docs | 官方文档的本地版 |
| /dotnet | .NET服务器端的类 |
| /java | Java服务器端的类 |
| /php | PHP服务器端的类 |
| /javascript | JavaScript客户端的功能文件 |
| /javascript/examples | 演示mxGraph使用的HTML示例 |
| ChangeLog | 版本之间更改的详细信息 |
| index.html | 库的基本介绍的主页 |
| license.txt | 许可条款 |
我主要阅读的是javascript/src/js下面的源码，这个JavaScript库分为8个包，顶级mxClient类包括（或动态导入）其他所有内容。主要的包描述如下表所示：
| 包 | 描述 |
|---|---|
| editor | 提供了实现图编辑器所需的类，主要的类是mxEditor |
| handler, layout, shape | 分别包含事件监听器，布局算法和形状。图形事件监听器包括用于框线选择的mxRubberband，用于工具提示的mxTooltipHandler和用于基本单元修改的mxGraphHandler。mxCompactTreeLayout实现树形布局算法，shape包提供各种形状，这些形状是mxShape的子类。 |
| view, model | view和model实现了图形组件，由mxGraph表示。它指的是包含了mxCells并缓存mxGraphView中单元格的状态的mxGraphModel。根据mxStylesheet中定义的外观，使用mxCellRenderer绘制单元格。撤消历史记录在mxUndoManager中实现。要在图表上显示图标，可以使用mxCellOverlay。验证规则使用mxMultiplicity定义。 |
| util | 提供了实用程序类，包括用于复制粘贴的mxClipboard，用于键和样式表值的mxConstants，用于跨浏览器事件处理和通用功能的mxEvent和mxUtils，用于国际化的mxResource和mxLog用于控制台输出。 |
| io | 实现了一个通用的mxObjectCodec，用于将JavaScript对象转换为XML。主要类是mxCodec。mxCodecRegistry是自定义编解码器的全局注册表。 |
3. Hello World实例
mxGraph是一个纯JavaScript库，相当于是一个框架，框架的使用步骤通常是先导入再实例化，对于mxGraph来说也是如此，比如下面这个Hello World例子：
<html>
<head>
<title>Hello, World! example for mxGraph</title>
<!-- 如果不在同一目录中，则设置库的基本路径 -->
<script type="text/javascript">
mxBasePath = 'src';
</script>
<!-- 加载并初始化mxGraph库 -->
<script type="text/javascript" src="src/js/mxClient.js"></script>
<!-- Hello World实例 -->
<script type="text/javascript">
// 程序从这里开始
// 使用指定的ID在DOM节点中创建示例图
// 从文档的onLoad事件处理程序调用此函数（参见下文）
function main(container) {
// 检查浏览器是否支持
if (!mxClient.isBrowserSupported()) {
mxUtils.error('浏览器不支持', 200, false);
} else {
// 在给定的container中创建graph
var graph = new mxGraph(container);
// 允许框线选择
new mxRubberband(graph);
// 获取默认父cell用于插入新的cell
// 通常是root的第一个子cell（即 layer 0）
var parent = graph.getDefaultParent();
// 在一个事务中添加所有cell到model中
graph.getModel().beginUpdate();
try {
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
// 更新图
graph.getModel().endUpdate();
}
}
}
</script>
</head>
<!-- 将图表的容器传递给函数 -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- 使用网格背景图为图形创建容器 -->
<div id="graphContainer" style="overflow:hidden;width:321px;height:241px;background:url('images/grid.gif')">
</div>
</body>
</html>
直接在浏览器中打开该HTML文件，可以看到如下图形：
4. mxGraph架构
mxGraph中有三个主要的组件：mxGraph、mxGraphModel、mxCell。mxGraph是用户直接操作的图，图的所有状态都保存在mxGraphModel中，而图中的顶点和边都是用mxCell定义。三者层次关系如图所示：
当用户对mxGraph进行操作时，所有操作都映射到对mxGraphModel中保存的状态进行修改，而mxGraphModel中保存的状态也就是mxCell的状态。
围绕着这三个组件，mxGraph定义了很多属性，比如图的功能、mxGraphModel的持久化、mxCell的外观等等。此外mxGraph还具有非常强大的事务管理机制和事件监听器。
所有这些综合起来，我们可以看到一个前端框架应该有的骨架，可以从中学习到很多有用的知识。
5. 源码探索
从学习方式的某一角度讲，有两种方式：自顶向下和自底向上。在我的理解中，要学习一个新的知识体系，用自顶向下的方式是非常有效的，先总览整个体系，再深入探索。而自底向上的方式可以用在开发系统上，逐步地完成系统的每一个模块。两种方式不是独立的，而是相互依存的，比如开发系统时，首先需要自顶向下的制定需求分析，而学习新知识体系时，也需要自底向上的理解各个模块的交互。
按照自顶向下的方式，应该首先探索mxGraph的源码，然后是mxGraphModel，最后是mxCell，同时还需要在探索过程中了解其它边角模块。
文章列表：