vue项目中如何使用mxgraph进行可视化操作

前提

最近公司需要使用mxgraph，来进行流程图的开发，由于我是第一次接触这个库，所以踩到的坑还是挺多，最坑爹的网上关于这个库的资料实在是太少了，它的文档还是英文文档。所以开发起来还是有点痛苦的。

我们来看下以下部分需求：

这是PM要我做的流程图，这里我会拿部份的功能和大家分享。包括新建图形，删除节点图形，响应右键菜单事件…由于mxgraph的套路是很固定的，只要你GET到这几个部分再结合文档，就基本没有问题了。

一.创建项目

通过vue-cli创建项目，这里就不多说了…，这是我生成的项目目录。我进行了一个项目目录的修改，大家也可以参考一下。

vue.config.js配置

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  lintOnSave: true,
  chainWebpack: (config) => {
    config.module
      .rule('')
      .test(/mxClient\.js$/)
      .use('exports-loader')
      .loader('exports-loader?mxClient,mxToolbar,mxConnectionHandler,mxEllipse,mxConnectionConstraint,mxWindow,' +
        'mxObjectCodec,mxGraphModel,mxActor,mxPopupMenu,mxShape,mxEventObject,mxGraph,mxPopupMenuHandler,mxPrintPreview,' +
        'mxEventSource,mxRectangle,mxVertexHandler,mxMouseEvent,mxGraphView,mxCodecRegistry,mxImage,mxGeometry,' +
        'mxRubberband,mxConstraintHandler,mxKeyHandler,mxDragSource,mxGraphModel,mxEvent,mxUtils,mxEvent,mxCodec,mxCell,' +
        'mxConstants,mxPoint,mxGraphHandler,mxCylinder,mxCellRenderer,mxEvent,mxUndoManager')
      .end()
  }
}

二.数据驱动生成图形

在项目开发的过程中，我使用了mxGraph踩了很多的坑，其中的一个大坑就是图形回显的问题，一开始我是采用官方推荐的xml形式,大致上就是前台生成一堆的xml,然后后台返回。这里的问题是什么呢？就是后台的小伙伴就会很繁琐，毕竟他们要从一大堆没有规律的xml抽取字段，然后写进数据库。所以，我就把数据格式修改为json格式，我个人认为这是使用mxGraph最为重要的一个东西。

首先我们就先约定好数据格式

graphData: [
        { id: "5", value: "开始", styleOptions: { shape: "rectangle", strokeColor: "#662B2B", dashed: "0", strokeWidth: 1 }, x: 100, y: 100, width: 100, height: 100,
          to: [
            { id: "7", style: { strokeColor: "red", edgeStyle: "orthogonalEdgeStyle", rounded: 0, orthogonalLoop: 1 }, edgeOptions: { id: "25", value: "8888" } },
            { id: "9", edgeOptions: { id: "35", value: "9999" } }], options: { name: "add", type: "start" }
        },
        { id: "7", value: "结束1", styleOptions: {shape: "cylinder"}, x: 500, y: 400, width: 100, height: 100, to: [], options: { name: "add", type: "rounded" } },
        { id: "9", value: "结束2", styleOptions: {shape: "cylinder", strokeWidth: 2, fillColor: "#ffffff", strokeColor: "black", backgroundOutline: 1, size: 15, rounded: 1}, x: 600, y: 500, width: 100, height: 100, to: [], options: { name: "add", type: "ellipse" } }
      ],

让我为graphData中的数据每一项做个简单的说明:

id	每个图形唯一的标识
value	图形的label值
styleOptions	图形的基本样式
x	图形的x轴距离
y	图形的y轴距离
width	图形的宽度
height	图形的高度

每一项的to作为一个数组，关联于它下面的一个节点，说明说明

id	目标元素的id
options	线条额外的属性
styleOptions	线条的样式

使用的方式可以参考地址

三.自定义连线规则

在实际项目中我们需要判断那些图形可连可不连，那么我们需要在每个图形中做手脚，我们在在每个图形options对象中添加相对应的type属性，实际上，这个options就是专门为我们去做自定义的事情。

另外自定义的检验函数为rules,

// 自定义是否连线规则
    rules (source, target) {
      return true;
    }

函数会返回两个参数，分别是来源和目标你可以根据这两个type来判断可联可不联。

4.目前功能

目前完善的功能点如下:

1. 数据驱动生成图形
2. 删除图形
3. 前进和后退图形
4. 自定义校验函数
5. 自定义图形

未来功能点:
1.导出功能(图片)
2.放大缩小
…

五.组件链接

组件的github链接mxGraph组件

预览地址

效果图: