「AntV」使用AntV X6实现流程编排设计器

通过对BPMN的深入学习，以及对业界成熟的流程编排设计器的调研，了解到要研发一个流程编排设计器，需要实现如下几个主要的功能：

1. 支持创建各种流程图元素，包括任务（活动）、网关、事件等。
2. 支持绘制各种连接线，包括普通连接线、条件连接线、消息连接线等。
3. 支持流程图的编辑，包括元素的选择、移动、删除、复制、粘贴等。
4. 支持流程图的保存，包括保存流程图数据、导入/导出流程图数据等。
5. 具备良好的可扩展性，可以通过插件等方式进行功能扩展和定制化。
6. 具备良好的用户体验，包括界面美观、交互友好等。

除了设计器本身的能力，还需要物料区域，工具栏操作区域，属性设置区域等额外的功能。

技术方案

基于阿里低代码引擎（Low-Code Engine）强大的定制扩展能力，自定义开发了缩放、组件面板、AntV X6画布面板、设置器面板等功能，构建出遵循BPMN规范的流程编排设计器。

• 组件面板基于标准的物料协议完成物料元素渲染；
• 画布面板基于 AntV X6 实现，借助自身Addon拖拽能力完成物料到画布的编排功能；
• 设置器面板基于 Formily 表单协议完成各类配置表单渲染；
• 协议转换基于fast-xml-parser，完成Graph JSON 和 XML 之间的协议转换。

实现步骤

以下内容将重点介绍一下基于AntV X6实现流程编排画布的过程，以及介绍在开发过程中重点用到的配置项和使用方法。当然设计器的内容除了画布，还有物料区、设置区、协议转换等内容，在这里不做过多阐述。

初始化画布

在页面中创建一个画布容器x6-container，用于绘制BPMN流程图。期间需要构造画布配置参数GraphOptions，初始化画布对象。

import React from "react";

export default props => {
  const containerRef = useRef(null);

  useLayoutEffect(() => {
    // 初始化图形
    registerShape();

    // 初始化画布
    let options = getDefaultGraphOptions(containerRef.current);
    const _graph = new Graph(options);

    // 初始化撤销重做、快捷键、图形变换等插件
    initPlugins(_graph);

    // 初始化删除，双击等事件
    initEvents(_graph);
  }, []);
  
  return (
    <div className="lc-designer lowcode-plugin-designer">
      <div className="lc-project">
        <div className="lc-simulator-canvas lc-simulator-device-default">
          <div id="x6-container" ref={containerRef} />
        </div>
      </div>
    </div>
  );
};

连线（connecting)

通过配置 connecting 可以实现丰富的连线交互。

router

采用了曼哈顿算法，注意需要使用excludeShapes排除对于Group节点的计算

{
  router: {
    name: "manhattan",
      args: {
        excludeShapes: [ElementType.Group],
        padding: 25
    }
  },
}

createEdge

自定义新建边的样式，在动态拖拽生成线条时使用。

{
  createEdge() {
    return new Shape.Edge({
      shape: ElementType.SequenceFlow,
      router: {
        name: "manhattan",
        args: {
          excludeShapes: [ElementType.Group],
          padding: 25
        }
      },
    });
  },
}

组合（embedding）<