前言
项目中用到拖拽生成流程图的基础库，了解到的有：
jointjs：商业收费库。
drawio： 现 diagrams.net，遵循 Apache v2 协议。mxGraph 是 diagrams 的开发基础，本篇是 mxGraph 的初步研究笔记。
mxGraph 介绍
Github上的介绍是： mxGraph is a fully client side JavaScript diagramming library。
mxGraph 是一个完整的客户端 JavaScript 绘图库。纯 JS，没有第三方插件。
mxGraph 部分代码结构
注：本文研究的版本为 Version 4.0.4 – 20. August 2019
Github上下载代码启动后从主页可以看到项目中内容丰富，有文档和各语言的示例。
本文研究的是 JavaScript 版本示例 Graph Editor，即mxGraph 在线示例的源码。
示例代码路径：javascript/examples/grapheditor/www
├─js
│ Actions.js //顶部菜单栏，按钮功能逻辑
│ Dialogs.js //弹出对话框的相关逻辑，如点击右侧 Arrange 面板 Edit Data 弹出的
│ Editor.js
│ EditorUi.js //画布上对元素的编辑。cellinserted 等事件监听
│ Format.js //右侧配置面板，如右侧增加 Property 面板
│ Graph.js
│ Init.js
│ Menus.js //定义顶部菜单栏中的菜单项
│ Shapes.js
│ Sidebar.js //左侧边栏相关代码
│ Toolbar.js
├─index.html //首页
Actions.js
Actions.prototype.init()中可对顶部菜单栏的功能菜单进行配置
Dialogs.js
EditDataDialog中定义弹出对话框
var graph = this.editorUi.editor.graph;
graph.getModel().getValue(cell); // 获取选中的cell的dom元素
graph.view.getState(cell); // 获取选中cell的mxCellState对象
Sidebar.js
示例中左侧可拖拽的图形配置文件
fns 中的调用createVertexTemplateEntry()生成一个图形，参数分别对应图形的 style, width, height, value, title, showLabel, showTitle, tags。
Format.js
选中左侧的某一图形后，用户对该图形的配置如 Style、Text 以及高级配置等面板在 Format.js 文件中定义。
Format.prototype.refresh = function(){...}中可对面板的配置项进行修改
以 Text 面板为例
// 省略一些每个panel都相同的label基础配置
// 3个panel，每个宽度为33.3%
label.style.width = containsLabel ? "50%" : "33.3%";
// 新增panel，复制label的配置
var label2 = label.cloneNode(false);
// 背景颜色等配置
label2.style.backgroundColor = this.inactiveTabBackgroundColor;
// 省略...
// 增加Text 面板
mxUtils.write(label2, mxResources.get("text")); // 多语言
div.appendChild(label2);
var textPanel = div.cloneNode(false);
textPanel.style.display = "none";
this.panels.push(new TextFormatPanel(this, ui, textPanel));
this.container.appendChild(textPanel);
addClickHandler(label2, textPanel, idx++);
Toolbar.js
Toolbar.prototype.init = function(){...}中定义了要显示的工具栏的菜单项。
如果需要在菜单栏增加元素可以使用addItems()或addMenuFunction()
addItems()
使用该方法增加的菜单项需是在 Action.js 中已经定义好的，回调逻辑不需要再开发。
addMenuFunction()
使用该方法增加的菜单项，对应的功能可自由发挥。
汉化
javascript/examples/grapheditor/www/resources 该路径下增加语言资源文件。
