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

// 鼠标拖拽平移画布交互
G6.registerBehaviour('panCanvas', panCanvas);

// 鼠标右键平移画布交互
G6.registerBehaviour('rightPanCanvas', graph => {
  panCanvas(graph, 'right');
});

// 鼠标拖拽画布空白处平移画布交互
G6.registerBehaviour('panBlank', graph => {
  panCanvas(graph, 'left', true);
});

// 鼠标右键拖拽画布空白处平移画布交互
G6.registerBehaviour('rightPanBlank', graph => {
  panCanvas(graph, 'right', true);
});

// 鼠标拖拽平移节点交互
G6.registerBehaviour('panNode', graph => {
  let node;
  let dx;
  let dy;
  graph.behaviourOn('node:mouseenter', () => {
    graph.css({
      cursor: 'move'
    });
  });
  graph.behaviourOn('node:mouseleave', () => {
    graph.css({
      cursor: 'default'

cursor: '-webkit-grab'
    });
    graph.setCapture(true);
  }
}

// 鼠标拖拽平移画布交互
G6.registerBehaviour('panCanvas', panCanvas);

// 鼠标右键平移画布交互
G6.registerBehaviour('rightPanCanvas', graph => {
  panCanvas(graph, 'right');
});

// 鼠标拖拽画布空白处平移画布交互
G6.registerBehaviour('panBlank', graph => {
  panCanvas(graph, 'left', true);
});

// 鼠标右键拖拽画布空白处平移画布交互
G6.registerBehaviour('rightPanBlank', graph => {
  panCanvas(graph, 'right', true);
});

// 鼠标拖拽平移节点交互
G6.registerBehaviour('panNode', graph => {
  let node;
  let dx;
  let dy;
  graph.behaviourOn('node:mouseenter', () => {
    graph.css({
      cursor: 'move'

resetStatus();
  });
  graph.behaviourOn('canvas:mouseleave', () => {
    resetStatus();
  });
  function resetStatus() {
    lastPoint = undefined;
    graph.css({
      cursor: '-webkit-grab'
    });
    graph.setCapture(true);
  }
}

// 鼠标拖拽平移画布交互
G6.registerBehaviour('panCanvas', panCanvas);

// 鼠标右键平移画布交互
G6.registerBehaviour('rightPanCanvas', graph => {
  panCanvas(graph, 'right');
});

// 鼠标拖拽画布空白处平移画布交互
G6.registerBehaviour('panBlank', graph => {
  panCanvas(graph, 'left', true);
});

// 鼠标右键拖拽画布空白处平移画布交互
G6.registerBehaviour('rightPanBlank', graph => {
  panCanvas(graph, 'right', true);
});

resetStatus();
  });
  function resetStatus() {
    lastPoint = undefined;
    graph.css({
      cursor: '-webkit-grab'
    });
    graph.setCapture(true);
  }
}

// 鼠标拖拽平移画布交互
G6.registerBehaviour('panCanvas', panCanvas);

// 鼠标右键平移画布交互
G6.registerBehaviour('rightPanCanvas', graph => {
  panCanvas(graph, 'right');
});

// 鼠标拖拽画布空白处平移画布交互
G6.registerBehaviour('panBlank', graph => {
  panCanvas(graph, 'left', true);
});

// 鼠标右键拖拽画布空白处平移画布交互
G6.registerBehaviour('rightPanBlank', graph => {
  panCanvas(graph, 'right', true);
});

// 鼠标拖拽平移节点交互
G6.registerBehaviour('panNode', graph => {
  let node;

graph.update(node, {
        x: ev.x + dx,
        y: ev.y + dy
      });
    });
  });
  graph.behaviourOn('node:dragend', () => {
    node = undefined;
  });
  graph.behaviourOn('canvas:mouseleave', () => {
    node = undefined;
  });
});

// wheel zoom
G6.registerBehaviour('wheelZoom', graph => {
  let timeout;
  graph.behaviourOn('wheel', ev => {
    const { domEvent } = ev;
    domEvent.preventDefault();
  });
  graph.behaviourOn('wheel', Util.throttle(update, 16));

  function update(ev) {
    const {
      domEvent
    } = ev;
    const delta = domEvent.wheelDelta;
    const times = 1.05;
    if (Math.abs(delta) > 10) { // 控制灵敏度
      const originScale = graph.getMatrix()[0];
      if (delta > 0) {

G6.registerBehaviour('rightPanCanvas', graph => {
  panCanvas(graph, 'right');
});

// 鼠标拖拽画布空白处平移画布交互
G6.registerBehaviour('panBlank', graph => {
  panCanvas(graph, 'left', true);
});

// 鼠标右键拖拽画布空白处平移画布交互
G6.registerBehaviour('rightPanBlank', graph => {
  panCanvas(graph, 'right', true);
});

// 鼠标拖拽平移节点交互
G6.registerBehaviour('panNode', graph => {
  let node;
  let dx;
  let dy;
  graph.behaviourOn('node:mouseenter', () => {
    graph.css({
      cursor: 'move'
    });
  });
  graph.behaviourOn('node:mouseleave', () => {
    graph.css({
      cursor: 'default'
    });
  });
  graph.behaviourOn('node:dragstart', ({ item, x, y }) => {
    graph.css({
      cursor: 'move'