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

let startX = sourceBox.maxX + sourceOffset;
    let endX = targetBox.minX - targetOffset;
    let hgap = endX - startX;
    if (sourceBox.centerX > targetBox.centerX) {
      startX = targetBox.maxX + targetOffset;
      endX = sourceBox.minX - sourceOffset;
      hgap = endX - startX;
    }
    return [
      [ 'M', startX, y0 ],
      [ 'C', startX + hgap / 4, y0, endX - hgap / 2, y1, endX, y1 ]
    ];
  }
});

G6.registerGuide('col-names', {
  draw(item) {
    const group = item.getGraphicGroup();
    const graph = item.getGraph();
    const nodes = graph.getNodes();
    const model = item.getModel();
    const colMap = {};
    const { textStyle, fields } = model;
    let minY = Infinity;
    nodes.forEach(node => {
      const model = node.getModel();
      const { field, y, x, colIndex } = model;

      if (minY > y) {
        minY = y;
      }
      if (!colMap[field]) {

x: 0,
    y: 0
  });
  const br = graph.getPointByDom({
    x: width,
    y: height
  });
  return {
    x: tl.x,
    y: tl.y,
    width: br.x - tl.x,
    height: br.y - tl.y
  };
}

G6.registerGuide('mask', {
  draw(item) {
    const group = item.getGraphicGroup();
    const graph = item.getGraph();
    const maskRect = getMaskRect(graph);
    const model = item.getModel();
    const { style } = model;
    return group.addShape('rect', {
      attrs: {
        ...maskRect,
        ...style
      },
      capture: false
    });
  },
  showAnimation: 'fadeIn',
  hideAnimation: 'fadeOut',