vue中使用mxgraph插件流程图（第2弹）

mxgraph项目实战中遇到的问题

mxgraph是一款比较复杂的插件，毕竟都是英文的官方文档，在所难免会遇到一些问题，下面跟大家分享一下我的问题及解决方法：

1. 新建节点必须配合try…finally方法

 insertVertexHandler(id, x, y) {
  //获取元素
  const element = getOptionsElement(this.asideOptions, id);
  //获取图片
  const src = element.icon;
  //获取标题
  const title = element.title;
  //设置样式
  const style = {
    [mxConstants.STYLE_SHAPE]: mxConstants.SHAPE_IMAGE,
    [mxConstants.STYLE_PERIMETER]: mxPerimeter.RectanglePerimeter,
    [mxConstants.STYLE_IMAGE]: this.getImageUrl(src + "2x"),
    [mxConstants.STYLE_IMAGE_WIDTH]: 45,
    [mxConstants.STYLE_IMAGE_HEIGHT]: 45,
    [mxConstants.STYLE_SPACING_TOP]: 3,
    [mxConstants.STYLE_VERTICAL_ALIGN]: mxConstants.ALIGN_TOP,
    [mxConstants.STYLE_FONTCOLOR]: "#000000",
    //标签内容显示的位置
    [mxConstants.STYLE_VERTICAL_LABEL_POSITION]: mxConstants.ALIGN_BOTTOM,
  };
  let parent = graph.getDefaultParent();
  //开始插入前更新，必须放在try外面
  graph.getModel().beginUpdate();
  graph.getStylesheet().putCellStyle("start", style);
  try {
    let nodeRootVertex = graph.insertVertex(
      parent,
      null,
      title,
      x,
      y,
      45,
      45,
      "start"
    );
    //添加节点右上角小图标的方法
    this.addOverlayHandler(nodeRootVertex);
    nodeRootVertex.vertex = true;
    // 自定义的业务数据放在 data 属性
    let data = {
      id,
      element
    }
    // nodeRootVertex.data = JSON.stringify(data);
    nodeRootVertex.data = new graph.CustomData(data)
  } finally {
    //插入结束后更新，finally 里保证每次执行
    graph.getModel().endUpdate();
  }
},

2. 整理布局算法后的线没有垂直居中（无法对齐）
如下图：

mxgraph提供了许多布局整理的算法，我用的是其中一个层次布局算法，代码如下：

 //mxHierarchicalLayout：分层布局算法的其中一种
let layout = new mxHierarchicalLayout(
  graph,
  mxConstants.DIRECTION_WEST,
  true
);
layout.disableEdgeStyle = false;
let parent = graph.getDefaultParent();
layout.execute(parent);

解决方法：改变默认连接线条样式
[mxConstants.STYLE_EDGE]: mxConstants.EDGESTYLE_ORTHOGONAL
改为
[mxConstants.STYLE_EDGE]: mxEdgeStyle.EntityRelation

const style = this.getStylesheet()
  .getDefaultEdgeStyle();
Object.assign(style, {
  [mxConstants.STYLE_ROUNDED]: true,
  [mxConstants.STYLE_STROKEWIDTH]: '1.5',
  [mxConstants.STYLE_STROKECOLOR]: '#808080',
   // 更改连接线条样式
  [mxConstants.STYLE_EDGE]: mxEdgeStyle.EntityRelation,
  [mxConstants.STYLE_FONTCOLOR]: '#333333',
  [mxConstants.STYLE_LABEL_BACKGROUNDCOLOR]: '#ffa94d',
});
// 设置拖拽线的过程出现折线，默认为直线
// this.connectionHandler.createEdgeState = () => {
//   const edge = this.createEdge();
//   return new mxCellState(this.view, edge, this.getCellStyle(edge));
// };

然后会惊奇的发现对齐了！

3. 给节点的右上角增加状态小图标

 //绘制给定单元格状态的形状
addOverlayHandler(cell) {
  //先清除上次添加的
  graph.clearCellOverlays(cell);
  var overlay = new mxCellOverlay(new mxImage('https://yqz.cdn.jkcrm.cn/crm/image/flow/SPS/state_executed.png', 24, 24), '成功');
  overlay.cursor = 'hand';
  overlay.align = 'right';
  overlay.verticalAlign = 'top';
  graph.addCellOverlay(cell, overlay);
},

效果：

4. 撤销后如何获取变动的节点信息传输给后端
撤销某一操作后，需要减少服务器的压力，所以需要获取局部改动的数据信息。

 //撤销的方法
undoManager.undo();

解决：undoManager是一个历史记录管理器，可直接打印就可以获取history历史操作记录数据

5. 修改mxgraph原生提示
该插件自带原生的提示弹窗，但可能不是我们想要的样子

解决：需要在原型链上改动一下它的“基因”

//原型重写
mxGraph.prototype.validationAlert = function(message){
    that.$message.error(message);
} 

6. 修改节点文本样式
设置单独样式，在插入节点时设置的样式名称后（如start）修改指定样式，之间以;分隔

let arr = new Array();
arr[0] = cell;
//第一个参数传样式字符串，第二个参数指定修改样式的节点数组
graph.setCellStyle('start;fontColor=#333;', arr);

7. 删除节点-只删除当前节点牵连的节点

此方法会删除与该节点所有相关联的线

 deleteSubtree(cell) {
    const cells = [];
    this.traverse(cell, true, (vertex) => {
       console.log('删除节点元素vertex',vertex);
       cells.push(vertex);
       return true;
   });
    this.removeCells(cells);
  }

有时候我们可能并不需要全部删除，只删除与当前节点牵连的线或节点

deleteSubtree(cell) {
   const cells = [cell];
   // this.traverse(cell, true, (vertex) => {
   //   console.log('删除节点元素vertex',vertex);
   //   cells.push(vertex);
   //   return true;
   // });
   this.removeCells(cells);
 }

8. 批量删除多个节点后 还原撤销导致图标一致（每次还原的都是最后一个的样式）

解决：每次插入节点之后都要添加不同样式，保证每个节点的style类名都是唯一的

graph.getStylesheet().putCellStyle('analysis', style);

//改为动态的，比如后面可以拼接唯一的id
let onlyStyle = "analysis"+id
graph.getStylesheet().putCellStyle(onlyStyle, style);

不定期更新中~~~~
谢谢观看♥~~~~