@antv/g6自定义节点dom类型shape无法触发事件原因分析

G6.registerNode('my-dom-node', {
  draw(cfg, group) {
    const keyShape = group.addShape('dom', {
      attrs: {
        html:'<h1>hello</h1>'
      },
      name: 'dom-shape',
      draggable: true,
    });
    return keyShape;
  }
});

// 覆盖 Container 中通过遍历的方式获取 shape 对象的逻辑，直接走 SVG 的 dom 拾取即可
getShape(x: number, y: number, ev: Event): IShape {
  let target = <Element>ev.target || <Element>ev.srcElement;
  // 
  if (!SHAPE_TO_TAGS[target.tagName]) {
    let parent = <Element>target.parentNode;
    while (parent && !SHAPE_TO_TAGS[parent.tagName]) {
      parent = <Element>parent.parentNode;
    }
    target = parent;
  }
  return this.find((child) => child.get('el') === target) as IShape;
}

circle: "circle"
dom: "foreignObject"
ellipse: "ellipse"
image: "image"
line: "line"
marker: "path"
path: "path"
polygon: "polygon"
polyline: "polyline"
rect: "path"
text: "text"

 // 触发事件
  _triggerEvent(type, ev) {
    const pointInfo = this._getPointInfo(ev);
    // 每次都获取图形有一定成本，后期可以考虑进行缓存策略
    const shape = this._getShape(pointInfo, ev);
    const method = this[`_on${type}`];
    let leaveCanvas = false;
    if (method) {
      method.call(this, pointInfo, shape, ev);
    } else {
      const preShape = this.currentShape;
      // 如果进入、移出画布时存在图形，则要分别触发事件
      if (type === 'mouseenter' || type === 'dragenter' || type === 'mouseover') {
        this._emitEvent(type, ev, pointInfo, null, null, shape); // 先进入画布
        if (shape) {
          this._emitEvent(type, ev, pointInfo, shape, null, shape); // 再触发图形的事件
        }
        if (type === 'mouseenter' && this.draggingShape) {
          // 如果正在拖拽图形, 则触发 dragleave
          this._emitEvent('dragenter', ev, pointInfo, null);
        }
      } else if (type === 'mouseleave' || type === 'dragleave' || type === 'mouseout') {
        leaveCanvas = true;
        if (preShape) {
          this._emitEvent(type, ev, pointInfo, preShape, preShape, null); // 先触发图形的事件
        }
        this._emitEvent(type, ev, pointInfo, null, preShape, null); // 再触发离开画布事件
        if (type === 'mouseleave' && this.draggingShape) {
          this._emitEvent('dragleave', ev, pointInfo, null);
        }
      } else {
        this._emitEvent(type, ev, pointInfo, shape, null, null); // 一般事件中不需要考虑 from, to
      }
    }
    if (!leaveCanvas) {
      this.currentShape = shape;
    }
    // 当鼠标从画布移动到 shape 或者从 preShape 移动到 shape 时，应用 shape 上的鼠标样式
    if (shape && !shape.get('destroyed')) {
      const canvas = this.canvas;
      const el = canvas.get('el');
      el.style.cursor = shape.attr('cursor') || canvas.get('cursor');
    }
  }

 /**
   * 绘制节点/边，包含文本
   * @override
   * @param  {Object} cfg 节点的配置项
   * @param  {G.Group} group 节点的容器
   * @return {IShape} 绘制的图形
   */
  draw: function draw(cfg, group) {
    group['shapeMap'] = {};
    this.mergeStyle = this.getOptions(cfg);
    // 获取要绘制的图形
    var shape = this.drawShape(cfg, group);
    // 设置样式
    shape.set('className', this.itemType + CLS_SHAPE_SUFFIX);
    // 添加映射关系
    group['shapeMap'][this.itemType + CLS_SHAPE_SUFFIX] = shape;
    if (cfg.label) {
      var label = this.drawLabel(cfg, group);
      label.set('className', this.itemType + CLS_LABEL_SUFFIX);
      group['shapeMap'][this.itemType + CLS_LABEL_SUFFIX] = label;
    }
    return shape;
  },
  drawShape: function drawShape(cfg, group) {
    // 默认没有绘制图形
    return null; 
  },