antv G6 开发踩坑记录

1、通过键盘 + 鼠标拖拽创建边

根据官方实例，在画布上创建边基本都是点击端点构建边，或者固定端点后拖拽创建边，但是倘若有个这样的需求：“键盘按住ctrl后，鼠标从一个端点拖拽出边到另一个端点来创建边” 改如何应对呢？，本着文档没有看源码的操作，最终还是被我找到了；

• 文档方法

• 源码方案
  

根据源码提供代码可知官方是提供了对应方法的，只是文档未写，所以我们可以这样修改：
1、G6 配置项

  modes: {
    default: ['drag-node', 'drag-canvas', 'zoom-canvas', {
      type: 'create-edge',
      key: 'control', // 配置创建边按键操作, options: 'shift', 'control', 'ctrl', 'meta', 'alt'
      trigger: 'drag', // 修改创建边模式 
    }],
  },

2、监听节点上鼠标事件

  // 监听节点鼠标按下时是否按住 ctrl 键来控制节点拖拽锁定
  graph.on('node:mousedown', (evt: IG6GraphEvent) => {
    const mouseEvent = evt.originalEvent as MouseEvent;
    if (mouseEvent.ctrlKey) {
      evt.item?.lock();
    }
  });

  // 监听节点鼠标抬起时是否按住 ctrl 键来控制节点拖拽锁定
  graph.on('node:mouseup', (evt: IG6GraphEvent) => {
    const mouseEvent = evt.originalEvent as MouseEvent;
    if (mouseEvent.ctrlKey) {
      evt.item?.unlock();
    }
  });

3、可监听边创建完成后的事件回调

 // 监听创建边完成
  graph.on('aftercreateedge', (e: IG6GraphEvent) => {
	// do   
})

2、自定义边箭头样式

  style: {
      lineWidth: 2,
      lineAppendWidth: 5,
      stroke: '#BDBEBF',
      endArrow: {
        path: G6.Arrow.triangle(5, 5, 5), // 依次为箭头宽度（默认 10）、长度（默认 15）、偏移量（默认为 0，与 d 对应）
        d: 5,
        fill: '#BDBEBF',
      },
    },

3、手动创建了平行边（两个点直接多条边）

	// 预处理边数据平行边、自旋边
	const offsetDiff = 20;
	const multiEdgeType = 'quadratic'; // 平行
	const singleEdgeType = 'line'; // 默认
	const loopEdgeType = 'loop'; // 自旋
	
	// 使用G6 自带工具函数处理
    G6.Util.processParallelEdges(edges, offsetDiff, multiEdgeType, singleEdgeType, loopEdgeType);
    
    graph.getEdges().forEach((edge, i) => {
      if ($relationIds.includes(edge.getModel().id)) {
        graph.updateItem(edge, {
          curveOffset: edges[i].curveOffset,
          curvePosition: edges[i].curvePosition,
        });
      }
    });