mxGraph从helloworld开始学习
helloword文件在源码的路径：
mxgraph-master\javascript\examples\helloworld.html
mxGraph中的Hello World，是一个简单的客户端的例子，显示了两个相连的“Hello”和“世界”的顶点标签。 这个例子演示了以下几件事：
- 创建一个嵌入了mxGraph客户端JavaScript的HTML页面；
- 创建了一个容器（即一个div节点）来装载mxGraph；
- 在图形mxGraph中加入所需的元素-顶点和边。
<!--
Copyright (c) 2006-2018, JGraph Ltd
Hello, World! example for mxGraph. This example demonstrates using
a DOM node to create a graph and adding vertices and edges.
该例子描述了如何使用一个节点，创建一个图片，并添加顶点和边
-->
<html>
<head>
<title>Hello, World! example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory
如果不在相同路径，需要设置basepath为开发库的路径。
maxBasepath用来定义css、图片、资源和js的使用目录。
必须加载在mxClient.js之前，而且不应该斜线 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library 加载并初始化开发库，mxGraph库的路径-->
<!--mxClient.js是一个包含所有的mxGraph源代码的JavaScript文件。
从Web服务器下载时， 获得包含所有的JavaScript的单个文件，
要比分成多个独立文件要快得多，这是由于每个文件 都具有独立的请求/确认开销。
无论服务器对于一个客户的并行接口的能力差异有多大，速度的 提升通常至少是两倍以上。-->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
//入口方法，并传入容器。容器来自下面body中代码
function main(container)
{
// Checks if the browser is supported 检查浏览器是否支持
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Disables the built-in context menu
// 禁用浏览器默认的右键菜单栏
mxEvent.disableContextMenu(container);
// Creates the graph inside the given container 在指定容器中创建graph
var graph = new mxGraph(container);
// Enables rubberband selection//激活橡皮圈选择 → 允许鼠标框选 开启拖拽选择
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
//拿到插入单元的默认父节点，通常是根节点的第一子节点
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
//开始/结束更新调用，为模型保持一致状态，对于每次调用，beginUpdate应始终只有一次调用 endUpdate。
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();
}
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program 页面加载时触发-->
<body "main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
总结主要的方法、关键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 样式
- List item
4663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
