用 mxGraph 画出流程图的步骤

mxGraph 是一个基于Java的 Client Side（客户端）图表绘制库，可以用于在 Web 应用程序、桌面应用程序和移动应用程序中轻松地创建交互式图表。本文将介绍如何使用 mxGraph 绘制流程图。

绘制流程图

下面是使用 mxGraph 绘制流程图的步骤：

1. 创建mxGraph实例

首先需要创建 mxGraph 实例，可以通过以下方法来实现：

var container = document.getElementById('graphContainer');
var graph = new mxGraph(container);

其中 'graphContainer' 为包含 mxGraph 的 HTML 元素 ID。

2. 创建源节点和目标节点

创建源节点和目标节点可以使用 mxGraph 提供的 addVertex 方法，如下所示：

var parent = graph.getDefaultParent();

graph.getModel().beginUpdate();
try {
    var v1 = graph.addVertex(parent, null, 'Source', x, y, w, h);
    var v2 = graph.addVertex(parent, null, 'Target', x, y, w, h);
} finally {
    // 启用更新
    graph.getModel().endUpdate();
}

其中，x 和 y 分别为节点坐标，w 和 h 分别为节点宽度和高度。

3. 创建连接边

创建连接边可以使用 mxGraph 提供的 insertEdge 方法：

graph.getModel().beginUpdate();
try {
    var e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
    // 启用更新
    graph.getModel().endUpdate();
}

其中，v1 和 v2 分别为源节点和目标节点。

这样就可以基本完成流程图的绘制了。当然，还可以对节点进行更多的属性设置，例如节点颜色、边框样式、字体大小等，具体可以参考 mxGraph 文档。

右键菜单和工具栏

mxGraph 提供了右键菜单和工具栏的实现方式。

1. 右键菜单的实现

mxGraph 的右键菜单可以通过 mxPopupMenu 实现。

以下是创建一个基本的右键菜单的代码示例：

graph.addMouseListener({
    // 判断是否为鼠标右键事件
    isCellSelectable: function (cell) {
        return true;
    },
    // 右键事件处理方法
    mouseDown: function (sender, evt) {
        if (evt.evt.button === 2 && !mxEvent.isControlDown(evt.evt)) {
            var selectedCell = graph.getSelectionCell();
            if (selectedCell) {
                var menu = new mxPopupMenu();
                // 添加菜单项及对应处理函数
                menu.addItem('Delete', null, function () {
                    graph.removeCells();
                });
                // 设置当前菜单位置
                menu.popup(evt.evt.clientX, evt.evt.clientY);
            }
        }
    }
});

以上代码实现了一个简单的右键菜单，其中 mxPopupMenu 用于创建菜单，addItem 方法用于添加菜单项并设置点击后执行的回调函数，popup 方法用于在指定位置弹出菜单。需要注意的是，这里的 mouseDown 事件监听器只是一个示例，具体事件类型和处理方法可以根据需求进行选择和实现。

2. 工具栏的实现

mxGraph 的工具栏可以通过 mxToolbar 实现。

以下是创建一个基本的工具栏的代码示例：

var tbContainer = document.createElement('div');
tbContainer.style.position = 'absolute';
tbContainer.style.top = '30px';
tbContainer.style.left = '30px';
tbContainer.style.background = '#ffffff';
document.body.appendChild(tbContainer);

var tb = new mxToolbar(tbContainer);
tb.addItem('New', 'images/new.gif', function () {
    // 创建新图形
});
tb.addItem('Open', 'images/open.gif', function () {
    // 打开已有图形
});
tb.addSeparator();
tb.addItem('Save', 'images/save.gif', function () {
    // 保存当前图形
});

以上代码实现了一个简单的工具栏，其中 mxToolbar 用于创建工具栏，addItem 方法用于添加工具项并设置点击后执行的回调函数，addSeparator 方法用于在工具栏中添加分隔符，以便对工具项进行分组。需要注意的是，这里的图标资源路径 'images/new.gif' 等需要按照实际情况进行替换。

另外，mxGraph 还提供了丰富的工具项和事件监听器接口，可以实现更加复杂的交互功能，使得图表绘制和操作更加方便和灵活。