前言

项目中用到拖拽生成流程图的基础库，了解到的有：

jointjs：商业收费库。

drawio：现 diagrams.net，遵循 Apache v2 协议。mxGraph 是 diagrams 的开发基础，本篇是 mxGraph 的初步研究笔记。

mxGraph 介绍

Github上的介绍是： mxGraph is a fully client side JavaScript diagramming library。

mxGraph 是一个完整的客户端 JavaScript 绘图库。纯 JS，没有第三方插件。

mxGraph 的在线示例和 API 文档地址。

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 该路径下增加语言资源文件。