【VUE3 AntV X6】 引入ANTV X6 的流程图编辑器应用（一）

ANTV X6 流程图编辑器应用

• 唠唠叨叨
• • 事发背景
  • 实现效果
  • 实现思路
  • 总结
• 参考资料

唠唠叨叨

		唉！最近感觉非常忙，要学的东西太多，要实现的方法变幻莫测，层出不穷，越学越觉得自己不会的实在太多。
	项目本来中标了，后来又不知道发生了什么，临到签合同又黄了，整的我们开发的瑟瑟发抖，产品整个大改，恐怕要……
	只能说还是抓紧时间好好学习，知识和技术是永远不会背叛自己的。
 复制

事发背景

		俺滴组长（后端大佬）要我配合开发数据平台的任务流全局调度系统，想用流程图实现作业运行配置。
	于是我在各种流程图的前端框架中选了ANTV X6来引入实现。官方文档天天在看，可这知识他就是不入脑子呀TvT。
	终于有一天腌肉某人一拍脑门醍醐灌顶实现了功能，遂记录实现过程及困难解决方法。
 复制

在官方文档中给出了场景案例，恰好就有我所需要的流程图：

实现效果

经过一系列拼拼凑凑，修修改改，还有样式设计和调整，调度作业画布页面如下图所示：

实现思路

1. 首先我们要了解系统的业务功能需求，以及业务流程的线路是怎样的；
   如图是窗口的拆解，其中①作业树使用的是element UI的el-tree组件，是用于储存画布内容和画布回显更新的，②是选中节点树中的某项流程作业进行对应的任务操作，③和④才是实际应用AntV X6的画布插件实现的可拖拽、增、删、改、配置的流程图编辑器。
   

通过vue的父子组件我们创建一个index.vue的父组件，然后将这四个部分拆分为三个子组件的.vue文件，分别为DataTree.vue、DataButton.vue、FiliationGraph.vue（包含③、④两部分）今天记录的是FiliationGraph.vue内节点配置画布的实现。
2. 安装AntV X6
通过 npm 或 yarn 命令安装 X6。

# npm
$ npm install @antv/x6 --save
 
# yarn
$ yarn add @antv/x6复制

3. 初始化画布，在html中建立节点库和画布div容器：

<-- 节点库 -->
<div class="app-stencil" ref="stencilContainer"></div>
<-- 画布 -->
<div class="app-content" id="flowContainer" ref="container"></div>
// 引入
import { Graph, Shape, Addon, FunctionExt } from "@antv/x6";
 
const { Stencil } = Addon;  //节点库
const {graph} = Graph;  //画布
 
const stencil = new Stencil({  //新建节点库
  title: "数据集成",
  target: graph,
  search: false, // 搜索
  collapsable: true,
  stencilGraphWidth: 300,  //容器宽度
  stencilGraphHeight: 600,  //容器长度
  groups: [  //分组
    {
      name: "processLibrary",
      title: "dataSource",
    },
  ],
  layoutOptions: {
    dx: 30,
    dy: 20,
    columns: 1,  //列数（行内节点数）
    columnWidth: 130, //列宽
    rowHeight: 100,  //行高
  },
});
proxy.$refs.stencilContainer.appendChild(stencil.container) //注册到div中
const graph = new Graph({ // 新建画布
  container: document.getElementById('flowContainer'),
  width: 800,
  height: 600,
  background: {
    color: "#F2F7FA",
  },
});
复制

4. 初始化节点、边：
   初始化节点、边数据：

const nodeData = {
 // 节点
  nodes: [
  ],
  // 边
  edges: [
  ],
};复制

准备节点样式内容数据，其中节点的左上角图标image是自定义的svg文件，根据产品ui或自己设计来使用哟。

const imageShapes = [
 {
    body: {
      fill: "rgba(102, 153, 204, 0.05)",
      stroke: "rgb(102, 153, 204)",
    },
    label: {
      text: state.collectLabel,
      fill: 'rgb(102, 153, 204)',
    },
    image: require('/src/assets/Scheduler/DataCollect.svg'),
  },
  {
    body: {
      fill: "rgba(185, 147, 214, 0.05)",
      stroke: "rgb(185, 147, 214)",
    },
    label: {
      text: state.flinkLabel,
      fill: 'rgb(185, 147, 214)',
      },
    image: require('/src/assets/Scheduler/DataFlink.svg'),
  },
  {
    body: {
      fill: "rgba(154, 184, 122, 0.05)",
      stroke: "rgb(154, 184, 122)",
    },
    label: {
      text: state.controlLabel,
      fill: 'rgb(154, 184, 122)',
      },
    image: require('/src/assets/Scheduler/DataQc.svg'),
  },
  {
    body: {
      fill: "rgba(247, 178, 103, 0.05)",
      stroke: "rgb(247, 178, 103)",
    },
    label: {
      text: state.monitorLabel,
      fill: 'rgb(247, 178, 103)',
      },
    image: require('/src/assets/Scheduler/DataWatch.svg'),
  },
  {
    body: {
      fill: "rgba(219, 127, 142, 0.05)",
      stroke: "rgb(219, 127, 142)",
    },
    label: {
      text: state.standerLabel,
      fill: 'rgb(219, 127, 142)',
      },
    image: require('/src/assets/Scheduler/DataStandred.svg'),
  },
]复制

5. 左侧模型栏节点样式：
   初始化链接桩

const ports = {
 groups: {
   in: {
     position: 'top',
     attrs: {
       circle: {
         r: 4,
         magnet: true,
         stroke: '#108ee9',
         strokeWidth: 2,
         fill: '#fff',
         style: {
           visibility: "hidden",
         },
       }
     }
   },
   out: {
     position: 'bottom',
     attrs: {
       circle: {
         r: 4,
         magnet: true,
         stroke: '#31d0c6',
         strokeWidth: 2,
         fill: '#fff',
         style: {
           visibility: "hidden",
         },
       }
     }
   }
 },
 items: [
   {
     id: state.currentCode+ '_in',
     group: 'in',
   },
   {
     id: state.currentCode + '_out',
     group: 'out',
   },
 ],
}复制

根据样式数据，设计画布左侧节点样式

Graph.registerNode( //注册节点
  'custom-node',
  {
    inherit: 'rect', //基础图形
    width: 140,
    height: 76,
    attrs: {  //自定义样式
      body: {  //节点主体
        strokeWidth: 1,
        rx: 30,
        ry: 30,
      },
      image: {  //图片
        width: 20,
        height: 20,
        x: 12,
        y: 3,
      },
      text: {  //主题文本
        refX: 40,
        refY: 15,
        fontSize: 15,
        'text-anchor': 'start',
      },
      label: {  //标签名
        text: 'Please nominate this node',
        id: 0,  //自定义传给接口的数据
        data: {},  //这里是我加入的标签内自定义储存的数据内容
        refX: 10,
        refY: 30,
        fontSize: 12,
        fill: 'rgba(0,0,0,0.6)',
        'text-anchor': 'start',
        textWrap: {  //如果节点命名标签过长可以使用这个属性来定义文本内容
          width: -10,      // 宽度减少 10px
          height: '70%',   // 高度为参照元素高度的一半
          ellipsis: true,  // 文本超出显示范围时，自动添加省略号
          breakWord: true, // 是否截断单词
        }
      },
    },
    markup: [ //组合
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'image',
        selector: 'image',
      },
      {
        tagName: 'text',
        selector: 'text',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
    ],
    data: {},
    relation: {},
    ports: { ...ports }, //链接桩定义
  },
  true,
)
const imageNodes = imageShapes.map((item) => //呈现画布节点数据的样式
  graph.createNode({
    shape: 'custom-node',
    attrs: {
      image: {
        'xlink:href': item.image,
      },
      body: item.body,
      text: item.label,
    },
  }),
)
stencil.load( //载入左侧节点模型库
  imageNodes,
  "processLibrary"
);复制

6.定义边的样式（节点连线）

Graph.registerConnector(
  'algo-edge',
  (source, target) => {
    const offset = 4
    const control = 80
    const v1 = { x: source.x, y: source.y + offset + control }
    const v2 = { x: target.x, y: target.y - offset - control }
 
    return `M ${source.x} ${source.y}
            L ${source.x} ${source.y + offset}
            C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${target.x} ${target.y - offset}
            L ${target.x} ${target.y}`
  },
  true,
)复制

以及可以在初始化画布graph = new graph（{}）方法中，定义连线规则

// 连线规则
connecting: {
  snap: true,  // 当 snap 设置为 true 时连线的过程中距离节点或者连接桩 50px 时会触发自动吸附
  allowBlank: false,  // 是否允许连接到画布空白位置的点，默认为 true
  allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
  allowMulti: false, // 当设置为 false 时，在起始和终止节点之间只允许创建一条边
  highlight: true,  // 拖动边时，是否高亮显示所有可用的连接桩或节点，默认值为 false。
  sourceAnchor: {  // 当连接到节点时，通过 sourceAnchor 来指定源节点的锚点。
    name: 'bottom',
    args: {
      dx: 0,
    },
  },
  targetAnchor: {  // 当连接到节点时，通过 targetAnchor 来指定目标节点的锚点。
    name: 'top',
    args: {
      dx: 0,
    },
  },
  connectionPoint: 'anchor',  // 指定连接点，默认值为 boundary。
  connector: 'algo-edge',  // 连接器将起点、路由返回的点、终点加工为 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 normal。
  createEdge() {
    return graph.createEdge({
      attrs: {
        line: {
          strokeDasharray: '5 5',
          stroke: '#808080',
          strokeWidth: 1,
          targetMarker: {
            name: 'block',
            args: {
              size: '6',
            },
          },
        },
      },
    })
  },
  validateMagnet({ magnet }) {
    return magnet.getAttribute('port-group') !== 'in'
  },
  validateConnection({
    sourceView,
    targetView,
    sourceMagnet,
    targetMagnet
  }) {
    if (sourceView === targetView) {
      return false;
    }
    if (!sourceMagnet) {
      return false;
    }
    // 只能连接到输入链接桩
    if (
      !targetMagnet ||
      targetMagnet.getAttribute("port-group") !== "in"
    ) {
      return false;
    }
    return true;
  },
  // 当停止拖动边的时候根据 validateEdge 返回值来判断边是否生效，如果返回 false, 该边会被清除。
  validateEdge({ edge }) {
    const { source, target } = edge
    return true
  }
},复制

7.方法们

graph.toJSON()  //  数据导出
graph.fromJSON()  //  数据渲染
graph.isPannable()  //  画布是否可以平移
graph.enablePanning()  //  启用画布平移
graph.centerContent();  //  中心对称复制

8.绑定事件

graph.on('node:added', ({ node, cell }) => {}) // 节点移入画布事件
graph.on("cell:dblclick", ({ node, cell }) => {});  //  节点双击事件
graph.on("node:mouseenter", ({ node }) => {  //  节点删除操作
  // 鼠标 Hover 节点时添加删除按钮
  node.addTools({
    name: "button-remove",
    args: {
      x: 0,
      y: 0,
      offset: { x: 10, y: 10 },
      markup: [  //自定义的删除按钮样式
        {
          tagName: 'circle',
          selector: 'button',
          attrs: {
            r: 8,
            stroke: '#F25C54',
            strokeWidth: 1,
            fill: 'rgba(214, 40, 40, 0.25)',
            cursor: 'pointer',
          },
        },
        {
          tagName: 'text',
          textContent: '✕',
          selector: 'icon',
          attrs: {
            fill: '#F25C54',
            fontSize: 7,
            textAnchor: 'middle',
            pointerEvents: 'none',
            y: '0.3em',
          },
        },
      ],
    },
  });
});
graph.on("node:removed", ({ node, options }) => {  //  删除节点事件
  if (!options.ui) {
    return;
  }
});
graph.on("node:mouseleave", ({ node }) => {
  // 鼠标移开节点时删除删除按钮
  node.removeTools();
});
// 线删除操作
graph.on("edge:mouseenter", ({ edge }) => {
  // 鼠标 Hover 边时添加删除按钮
  edge.addTools([
    "target-arrowhead",
    {
      name: "button-remove",
      args: {
        distance: -30,
      },
    },
  ]);
});
graph.on("edge:removed", ({ edge, options }) => {  //  移除连线事件
  if (!options.ui) {
    return;
  }
  const cellId = edge.getTargetCellId()
  const target = graph.getCellById(cellId)、
  if (target) {
    const id = target.ports.items[0].id
    target && target.setPortProp(id, 'connected', false)
  }else{
    target && target.setPortProp(cellId+'_in', 'connected', false)
  }
});
graph.on("edge:mouseleave", ({ edge }) => {
  // 鼠标移开边时删除删除按钮
  edge.removeTools();
});
graph.on('node:change:data', ({ node }) => {  //  修改节点数据的实时响应事件
  node.data = eachNodeData
})
graph.on("node:contextmenu", ({ cell, view }) => {  //  节点文本
  const oldText = cell.attr("text/textWrap/text");
  const elem = view.container.querySelector(".x6-edit-text");
  if (elem == null) {
    return;
  }
  cell.attr("text/style/display", "none");
  if (elem) {
    elem.style.display = "";
    elem.contentEditable = "true";
    elem.innerText = oldText;
    elem.focus();
  }
  const onBlur = () => {
    cell.attr("text/textWrap/text", elem.innerText);
    cell.attr("text/style/display", "");
    elem.style.display = "none";
    elem.contentEditable = "false";
  };
  elem.addEventListener("blur", () => {
    onBlur();
    elem.removeEventListener("blur", onBlur);
  });
});
const container = document.getElementById("flowContainer");
graph.on("node:mouseenter",FunctionExt.debounce(() => {  //  节点链接桩显隐
    const ports = container.querySelectorAll(".x6-port-body");
    showPorts(ports, true);
  }),
  500
);
graph.on("node:mouseleave", () => {  //  节点链接桩显隐
  const ports = container.querySelectorAll(".x6-port-body");
  showPorts(ports, false);
});
graph.bindKey("backspace", () => {  //  点按空格后跳出带有节点的画布区域
  const cells = graph.getSelectedCells();
  if (cells.length) {
    graph.removeCells(cells);
  }
});复制

其他有趣的用法

//设置指定路径上的属性值cell.attr('text/text', value)  其中label/text为自定义标题
cell.attr('label/text', state.flinkLabel)
cell.attr('label/data', j)复制

9.根据接口数据回显画布流程图

//就是通过这个方法来实现的
graph.fromJSON(nodeData)  //  数据渲染，括号内填入回显的数组数据变量
//而nodeData在前面2.提出的数据准备中初始化定义了，我们在接口返回的数据里填充数据和样式就搞定回显了复制

总结

在vue项目中，使用AntV X6实现节点和画布、连线的配置，非常灵活，一旦会用后有相当多的方法可以使用，自由度和定制度高。还有许多用法可以实现，如点击执行指令显示流程图的动画运行流：

还有自定义的布局等

剩下的其他拓展方法等我下次整理了再发，今天这篇太长了，肝不动了TvT。

参考资料

1. ANTV-X6 流程图
2. ANTV-X6 快速上手