Dynamically add edges and set the type, and the edge event cannot be triggered #6384

Describe the bug / 问题描述

在afterrender函数中动态添加边，并设置边的类型type，不能触发边事件

import G6 from '@antv/g6';
import insertCss from 'insert-css';

const data = {
  nodes: [
    {
      id: '1',
      dataType: 'alps',
      name: '1',
      layer:1,
      label:'1'
    },
    {
      id: '134',
      dataType: 'alps',
      name: '134',
      layer:0,
      label:'134'
    },
    {
      id: '2',
      dataType: 'alps',
      name: '2',
      layer:1
    },
    {
      id: '3',
      dataType: 'alps',
      name: '3',
      layer:2
    },
     {
      id: '6',
      dataType: 'sql2',
      name: '6',
      layer:3,
      comboId:'F001',
    },
     {
      id: '7',
      dataType: 'sql2',
      name: '7',
      layer:3,
      comboId:'F000',
    },

  ],
  edges: [
    {
      source: '2',
      target: '3',
    },
    {
      source: '1',
      target: '3',
    },
    {
      source: '134',
      target: '1',
    },
    {
      source: '134',
      target: '2',
    },
    {
      source: '3',
      target: '6',
    },
    {
      source: '3',
      target: '7',
    },

  ],
  combos:[{
    id:'F000',
    label:'F000',
    size:[50],
    parentId: 'layer_2'
  },{
id:'F001',
label:'F001',
size:[50],
parentId: 'layer_2'
  }]
};
const comboName = ['运营商','WAN','核心层','汇聚层','有线接入层','无线接入层']
// 根据节点的层级信息计算并添加 combos
const layerColors = ['#FFF', '#F2F3F5']; // 轮流的背景颜色
data.nodes.forEach(node => {
  if (!data.combos.some(combo => combo.id === `layer_${node.layer}`)) {
    data.combos.push({
      id: `layer_${node.layer}`,
      label: comboName[node.layer],
      style: {
        fill: layerColors[node.layer % layerColors.length], // 轮流设置背景颜色
        lineWidth: 1,
      }
    });
  }
  node.comboId = node.comboId?node.comboId:`layer_${node.layer}`; // 指定节点属于哪个 combo
});

data.combos.push({
  id: 'side-hanging-layer',
  label:'旁挂层',
  size:[50],
});
console.log(data)
G6.registerNode(
  'sql',
  {
    drawShape(cfg, group) {
      const rect = group.addShape('rect', {
        attrs: {
          x: -75,
          y: -25,
          width: 48,
          height: 48,
          radius: 20,
          label:cfg.label,
          stroke: '#5B8FF9',
          fill: '#C6E5FF',
          lineWidth: 1,
        },
        name: 'rect-shape',
      });
      return rect;
    },
  },
  'single-node',
);

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  layout: {
    type: 'dagre',
    ranksep: 18,
    controlPoints: true, 
  },
  defaultNode: {
    type: 'sql',
    size: [48, 48],
     anchorPoints: [
          [0.5, 0], // 顶部中心锚点
          [0.5, 1], // 底部中心锚点
        ],
  },
  modes: {
        // default: [


        //   'drag-combo',

        // ],
      },
  defaultEdge: {
    type: 'cubic-vertical',
    sourceAnchor: 1,
    style: {
      lineWidth: 1,
      stroke: '#C9CDD4',
      shadowBlur: 10,
    },
  },
  nodeStateStyles: {
    selected: {
      stroke: '#d9d9d9',
      fill: '#5394ef',
    },
  },
  defaultCombo: {
    type: 'rect',
    size:[1232,14]
  },
  fitView: true,
});
graph.data(data);
graph.render();
graph.on('afterrender',()=>{
  const targerNode = graph.findById('3');
  const realModel = targerNode.getModel();
  graph.addItem("node", {
      id: 'shadowNode',
      x: realModel.x,
      y: realModel.y,
      comboId:realModel.comboId,
      label: '影子节点',
      anchorPoints: [[0, 0.5], [1, 0.5]],
    });
  graph.findById('shadowNode').hide();
  graph.addItem("node", {
      id: 'add1',
      x: realModel.x + 200 + 20 * 3,
      y: realModel.y,
      anchorPoints: [[0.5, 0], [0.5, 0]],
      comboId : 'side-hanging-layer'
    });
     graph.addItem("edge", {
      source: 'shadowNode',
      target: 'add1',
      type: 'arc',
    });
     graph.addItem("edge", {
      source: 'add1',
      target: '7',
      type: 'arc',
    });
     graph.addItem("node", {
      id: 'add11',
      x: realModel.x + 400 + 20 * 3,
      y: realModel.y,
      anchorPoints: [[0.5, 0], [0.5, 0]],
      comboId : 'side-hanging-layer'
    });
    graph.addItem("edge", {
      source: 'shadowNode',
      target: 'add11',
      type: 'arc',
    });
})
graph.on('edge:mouseover',(e)=>{
  console.log(e)
})
if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

1.在afterrender函数中添加边 2.指定边的type 3.边的事件无法触发

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明