How to use the @antv/g6.registerEdge function in @antv/g6

// lineDash 的差值，可以在后面提供 util 方法自动计算
const dashArray = [
  [ 0, 1 ],
  [ 0, 2 ],
  [ 1, 2 ],
  [ 0, 1, 1, 2 ],
  [ 0, 2, 1, 2 ],
  [ 1, 2, 1, 2 ],
  [ 2, 2, 1, 2 ],
  [ 3, 2, 1, 2 ],
  [ 4, 2, 1, 2 ]
];
const lineDash = [ 4, 2, 1, 2 ];
const interval = 9;

G6.registerEdge('can-running', {
  setState(name, value, item) {
    const shape = item.get('keyShape');
    if (name === 'running') {
      if (value) {
        const length = shape.getTotalLength(); // 后续 G 增加 totalLength 的接口
        let totalArray = [];
        for (let i = 0; i < length; i += interval) {
          totalArray = totalArray.concat(lineDash);
        }
        let index = 0;
        shape.animate({
          onFrame() {
            const cfg = {
              lineDash: dashArray[index].concat(totalArray)
            };
            index = (index + 1) % interval;

if (isBending(p, p1, p2)) {
        const [ ps, pt ] = getBorderRadiusPoints(p, p1, p2, borderRadius);
        pathSegments.push([ 'L', ps.x, ps.y ]);
        pathSegments.push([ 'Q', p1.x, p1.y, pt.x, pt.y ]);
        pathSegments.push([ 'L', pt.x, pt.y ]);
      } else {
        pathSegments.push([ 'L', p1.x, p1.y ]);
      }
    } else if (p1) {
      pathSegments.push([ 'L', p1.x, p1.y ]);
    }
  });
  return pathSegments;
}

G6.registerEdge('polyline', {
  offset: 10,
  getPath(item) {
    const points = item.getPoints();
    const source = item.getSource();
    const target = item.getTarget();
    return this.getPathByPoints(points, source, target);
  },
  getPathByPoints(points, source, target) {
    const polylinePoints = getPolylinePoints(points[0], points[points.length - 1], source, target, this.offset);
    // FIXME default
    return Util.pointsToPolygon(polylinePoints);
  }
});

G6.registerEdge('polyline-round', {
  borderRadius: 9,

**/
function getCubicBezierCurve(points, source, target) {
  const start = points[0];
  const end = points[points.length - 1];
  const M = ['M', start.x, start.y];
  // automatically get the rest two control points
  const controlPoints = getCubicControlPoints(start, end, source, target);
  const sub = ['C'];
  const path = [M];

  controlPoints.forEach(point => sub.push(point.x, point.y));
  sub.push(end.x, end.y);
  path.push(sub);
  return path;
}
G6.registerEdge('flowSmooth', {
  draw(item, group) {
    const path = this.getPath(item);
    // 绘制线条
    const keyShape = group.addShape('path', {
      attrs: { path, ...edgeStyle },
    });
    // 绘上箭头
    keyShape.endArrow = drawArrow(item, group, keyShape, path);
    drawLabel(item, group, keyShape);
    return keyShape;
  },
  getPath(item) {
    const points = [item.startPoint, item.endPoint];
    const source = item.sourceNode;
    const target = item.targetNode;
    return getCubicBezierCurve(points, source, target);

left: true,
      right: true,
      fill: '#fff',
      stroke: '#1890FF',
      size: 3
    }
  },
  defaultEdge: {
    shape: 'line-arrow',
    style: {
      stroke: '#F6BD16'
    }
  }
});

G6.registerEdge('line-arrow', {
  getPath(points) {
    const startPoint = points[0];
    const endPoint = points[1];
    return [
      [ 'M', startPoint.x, startPoint.y ],
      [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y ],
      [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y ],
      [ 'L', endPoint.x, endPoint.y ]];
  },
  getShapeStyle(cfg) {
    const startPoint = cfg.startPoint;
    const endPoint = cfg.endPoint;
    const controlPoints = this.getControlPoints(cfg);
    let points = [ startPoint ]; // 添加起始点
    // 添加控制点
    if (controlPoints) {

shape.attr({
        stroke: '#5AAAFF',
        shadowColor: '#5AAAFF',
        shadowBlur: 5,
      });
    } else {
      shape.attr({
        stroke: '#d8d8d8',
        shadowBlur: 0,
      });
    }
  },
};

G6.registerEdge('biz-cubic', options, 'cubic-horizontal');

import G6 from '@antv/g6';

/**
 * 该案例演示如何通过复写复写draw方法自定义折线。
 * by siogo 提供的 issue（https://github.com/antvis/g6/issues/814）
 *
 * 如果要适应所有拖动情况，则需要根据拖动的位置来动态改变锚点
 */
G6.registerEdge('line-arrow', {
  options: {
    style: {
      stroke: '#ccc'
    }
  },
  draw: function draw(cfg, group) {
    const startPoint = cfg.startPoint;
    const endPoint = cfg.endPoint;

    const stroke = cfg.style && cfg.style.stroke || this.options.style.stroke;

    const keyShape = group.addShape('path', {
      attrs: {
        path: [[ 'M', startPoint.x, startPoint.y ], [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y ], [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y ], [ 'L', endPoint.x, endPoint.y ]],
        stroke,
        lineWidth: 1,

y: cfg.y + 4,
        text: cfg.name,
        fill: '#666',
        fontSize: 16,
        textAlign: 'left'
      }
    });
    const bbox = shape.getBBox();
    keyShape.attr({
      width: bbox.width + 20,
      height: bbox.height + 4
    });
    return keyShape;
  }
});
G6.registerEdge('step-line', {
  getControlPoints: function getControlPoints(cfg) {
    const startPoint = cfg.startPoint;
    const endPoint = cfg.endPoint;
    return [{
      x: startPoint.x,
      y: endPoint.y
    }];
  }
}, 'polyline');

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.TreeGraph({
  container: 'container',
  width,
  height,

const drawRegistry = () => {
    G6.registerNode('treeNode', {
        anchor: [[0, 0.5], [1, 0.5]],
        /**
         enterAnimate: function enterAnimate(item) {
            const group = item.getGraphicGroup();
            const model = item.getModel();
            const x = model.x;
            const y = model.y;
            group.transform([['t', -x, -y], ['s', 0.01, 0.01], ['t', x, y]]);
            !group.get('destroyed') && group.animate({
                transform: [['t', -x, -y], ['s', 100, 100], ['t', x, y]]
            }, 450, 'easeBackOut');
        },**/
    });
    G6.registerEdge('smooth', {
        getPath: function getPath(item) {
            const points = item.getPoints();
            const start = points[0];
            const end = points[points.length - 1];
            const hgap = Math.abs(end.x - start.x);
            if (end.x > start.x) {
                return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]];
            }
            return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]];
        }
    });
};
export default {

constructor(props: RegisterProps, type: string) {
    super(props);

    const { name, config, extend } = props;

    switch (type) {
      case 'node':
        G6.registerNode(name, config, extend);
        break;

      case 'edge':
        G6.registerEdge(name, config, extend);
        break;

      case 'command':
        commandManager.register(name, config as Command);
        break;

      case 'behavior':
        behaviorManager.register(name, config as Behavior);
        break;

      default:
        break;
    }
  }

const node = children[0];
    const circleLeft = children[1];
    const circleRight = children[2];

    const stroke = cfg.style.stroke;


    if (stroke) {
      node.attr('stroke', stroke);
      circleLeft.attr('fill', stroke);
      circleRight.attr('fill', stroke);
    }
  }
}, 'single-shape');

G6.registerEdge('polyline', {
  itemType: 'edge',
  draw: function draw(cfg, group) {
    const startPoint = cfg.startPoint;
    const endPoint = cfg.endPoint;

    const Ydiff = endPoint.y - startPoint.y;

    const slope = Ydiff !== 0 ? 500 / Math.abs(Ydiff) : 0;

    const cpOffset = 16;
    const offset = Ydiff < 0 ? cpOffset : -cpOffset;

    const line1EndPoint = {
      x: startPoint.x + slope,
      y: endPoint.y + offset
    };