mxGraph学习一—— helloworld例子解读

mxGraph从helloworld开始学习

helloword文件在源码的路径：
mxgraph-master\javascript\examples\helloworld.html

mxGraph中的Hello World，是一个简单的客户端的例子，显示了两个相连的“Hello”和“世界”的顶点标签。 这个例子演示了以下几件事：

1. 创建一个嵌入了mxGraph客户端JavaScript的HTML页面；
2. 创建了一个容器（即一个div节点）来装载mxGraph；
3. 在图形mxGraph中加入所需的元素-顶点和边。

总结主要的方法、关键API方法：

mxGraphModel.beginUpdate() - 启动一个事务或子事务处理。
mxGraphModel.endUpdate() - 完成一个事务或子事务处理。
mxGraph.addVertex() - 添加一个新顶点到指定的父单元。
mxGraph.addEdge() - 添加一个边缘到指定的父单元。

其他全局方法还有：
（以下全局设置copy自作者：iteye_4238 来源：CSDN
原文：https://blog.csdn.net/iteye_4238/article/details/82510944
版权声明：本文为博主原创文章，转载请附上博文链接！）
// 无效 graph.setEnabled(false);

// 连接 graph.setConnectable(true);

// 提示信息 graph.setTooltips(true);

// 右键移动容器坐标轴 graph.setPanning(true);

// 容器大小自适应 graph.setResizeContainer(true);

// 鼠标框选 new mxRubberband(graph);

// 动态改变样式 graph.getView().updateStyle = true;

// 重复连接 graph.setMultigraph(false);

// Label 将显示 Html 格式的 Value graph.setHtmlLabels(true);

// 禁用浏览器默认的右键菜单栏 mxEvent.disableContextMenu(container);

// 允许移动 Vertex 的 Label graph.setVertexLabelsMovable(true);

// 禁止改变元素大小 graph.setCellsResizable(false);

// 允许连线的目标和源是同一元素 graph.setAllowLoops(true);

根据helloworld中遇到的知识点串联出mxGraph的主要概念：

1. mxBasePath 开发库的路径

mxBasePath用来定义css、图片、资源和js的使用目录。
其应用在mxClient.js文件最下面一个方法可以看到

2. mxClient.js

mxClient.js有两个版本，生产版本和开发/调试版本。大小约有130KB和600KB左右。

3. graph 图 mxGraphModel mxGraph模型

mxGraphModel描述了图形结构的核心的模型。
许多的主要API通过mxGraph类来调用，请注意，mxGraphModel是基本的对象， 它存储着图形的数据结构。
mxCell是顶点和边的单元对象。
vertice是顶点，edge是边

4. 事务模型

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
{
	// Updates the display
	graph.getModel().endUpdate();
}

教程中分析：
beginUpdate并endUpdate 用于创建事务。本endUpdate应该经常去到最后块，以确保如果它总是执行beginUpdate 被执行死刑。但是，它beginUpdate不应该是try-block的一部分，以确保endUpdate在beginUpdate 失败时永远不会执行。这是模型保持一致状态所必需的，也就是说，对于每次调用，beginUpdate应始终只有一次调用 endUpdate。

try块中的部件为图形创建顶点和边。默认父级是从图形中获取的，通常是模型中根单元格的第一个子级，在使用不带参数的图形模型c’tor时会自动创建。

关于事务模型及beginUpdate和endUpdate：
事务可以被嵌套。也就是说，在模型中有这样一个计数器， 每次调用beginUpdate计数递增，每次调用endUpdate计数递减。 在计数器增加超过1后，当该计数再次达到0时，模型的事务被认为是完成，模型的事件通知 被触发。

5. cell 单元 vertex 顶点 edge边 连线

下面是一个方法列表，包括的改变图形模型，并应被直接或间接地放置在一个更新的范围的：

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的方法，像往常一样，这些方法是对的mxGraph类，在适当情况下， 他们执行的是被封装的更新。

在HelloWorld应用程序中，创建的三个图形单元包括两个顶点和一个边。
使用的方法为公共API中添加单元格的核心方法： mxGraph.insertVertex()和mxGraph.insertEdge()。

核心API方法：

mxGraph.insertVertex(parent, id, value, x, y, width, height, style) – 在调用开始/结束更新中，创建并插入一个新的顶点到模型中。
mxGraph.insertEdge(parent, id, value, source, target, style) – 在调用开始/结束更新中，创建并插入一个新的边到模型中。

其中mxGraph.insertVertex() 会创建一个mxCell对象并返回。方法的参数为：

parent – 组结构中此单元的直接父单元。我们会很快谈论到组结构，
但现在我们直接使用graph.getDefaultParent();作为默认的父单元，就像在 HelloWorld这个例子一样。 id –
描述此单元的全局唯一身份号码，总是一个字符串。主要用于
外部对这单元的引用。如果您不想自己维护这些号码，只需要传入一个空参数并确保mxGraphModel.isCreateIds()
返回真即可。这样，模型就会管理这些号码，并保证它们的唯一性。 value – 此单元的用户对象。用户对象只是一些对象，可以让您把
应用程序的商务逻辑与mxGraph的可视化呈现相关联。在手册的后面有详细地描述，这里我们就只用字符 串就好，并把它们显示成顶点和边的标签。
x, y, width, height – 就像名字提到的，这是顶点的左上角的 x和y的位置以及它的宽度和高度。
style – 将被应用到顶点的样式描述。

6. styleSheet样式表

7. style 样式

8. List item