流程编辑器-柳杉前端

1.使用

通过使用antd-pro封装好的流程编辑器修改，如图：

2.自定义节点和边

2.1自定义边

注意：这里需要graph属性注册边形状，不然无法自定义，如下面代码，属性参考文档

        <Col span={16} className={styles.editorContent}>
          <Flow className={styles.flow} graph={{
            edgeDefaultShape: 'custom-edge',
          }}/>
          <CustomEdge/> 
          <CustomNode/>
        </Col>

import React from "react";
import { RegisterEdge} from "gg-editor";

class CustomEdge extends React.Component {
  render() {
    const config = {
      getStyle(item) {
        const model = item.getModel();
        const { color, size } = model;

        return {
          stroke: color || "#A3B1BF",
          lineWidth: size
        };
      },
      getAnchorStyle() {

        return {
          stroke: '#ff0'
        }
      }
    };

    return (
      <RegisterEdge name="custom-edge" config={config} extend={"flow-smooth"} />
    );
  }
}

export default CustomEdge;

2.2自定义边的箭头

    const config = {
      getStyle(item) {
        const model = item.getModel();
        const {color, size} = model;

        return {
          startArrow: false,
          endArrow: true, // 结束箭头是否显示
        };
      },
      endArrow: {
        // 箭头路径
        path(item) {
          const keyShape = item.getKeyShape();
          let lineWidth = keyShape.attr('lineWidth');
          lineWidth = lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE;
          const width = lineWidth * 10 / 3;
          const halfHeight = lineWidth * 4 / 3;
          const radius = lineWidth * 4;
          return [
            [ 'M', -width, halfHeight ],
            [ 'L', 0, 0 ],
            [ 'L', -width, -halfHeight ],
            [ 'A', radius, radius, 0, 0, 1, -width, halfHeight ],
            [ 'Z' ]
          ];
        },
        shorten(item) {
          const keyShape = item.getKeyShape();
          const lineWidth = keyShape.attr('lineWidth');
          return (lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE) * 3.1;
        },
        style(item) {
          const keyShape = item.getKeyShape();
          const { strokeOpacity, stroke } = keyShape.attr();
          return {
            fillOpacity: strokeOpacity,
            fill: '#0099CC'  // 箭头颜色
          };
        }
      }
    };

2.3自定义节点

import React from "react";
import { RegisterNode } from "gg-editor";

class CustomNode extends React.Component {
  render() {
    const config = {
      draw(item) {
        const keyShape = this.drawKeyShape(item);
        // 绘制图标
        const group = item.getGraphicGroup();

        group.addShape("text", {
          attrs: {
            x: -15,
            y: -25,
            width: 30,
            height: 30,
          }
        });

        // 绘制标签
        this.drawLabel(item);

        return keyShape;
      },
      anchor: [
        // [0.5,1],
        // [0, 0.5],
        // [0.5, 0],
        // [1,0.5],
        // 上边中点
      ]
    };

    return (
      <RegisterNode name="dispatch-node" config={config} extend={"flow-capsule"}  />
    );
  }
}

export default CustomNode;