export class Bubble { private _map: Map<EventCallback, BubbleNode> = new Map(); private _levelNodes: Map<EventBubbleLevel, BubbleNode[]> = new Map();

constructor() { this._levelNodes.set(Event_Bubble_Level.vchart, []); this._levelNodes.set(Event_Bubble_Level.chart, []); this._levelNodes.set(Event_Bubble_Level.model, []); this._levelNodes.set(Event_Bubble_Level.mark, []); } ...... // 管理 Map 的增删改方法 }

##### 响应事件

当触发交互事件后，会调用`EventDispatcher`的另一个核心函数`dispatch`：    

```Typescript
  // vchart/src/event/event-dispatcher.ts
  ***dispatch***<Evt extends EventType>(eType: Evt, params: EventParamsDefinition[Evt], level?: EventBubbleLevel): this {
    // 默认事件类别为 view
    const bubble = this.***getEventBubble***((params as BaseEventParams).source || Event_Source_Type.chart).***get***(
      eType
    ) as Bubble;
    // 没有任何监听事件时，bubble 不存在
    if (!bubble) {
      return this;
    }

    // 事件冒泡逻辑：Mark -> Model -> Chart -> VChart
    let stopBubble: boolean = false;

    if (level) {
      // 如果指定了 level，则直接处理，不进行冒泡
      const handlers = bubble.***getHandlers***(level);
      stopBubble = this.***_invoke***(handlers, eType, params);
    } else {
      const levels = [
        Event_Bubble_Level.mark,
        Event_Bubble_Level.model,
        Event_Bubble_Level.chart,
        Event_Bubble_Level.vchart
      ];
      let i = 0;

      // Mark 级别的事件只包含对语法层代理的基础事件
      while (!stopBubble && i < levels.length) {
        stopBubble = this.***_invoke***(bubble.***getHandlers***(levels[i]), eType, params);
        i++;
      }
    }

    return this;
  }    

• 根据事件来源（source：view，window，canvas）获取对应的 Bubble Map，再从其中取出与事件类型对应的 Bubble。

• 若找到 Bubble，则依据冒泡层级（Mark→ Model→ Chart→ VChart）依次获取已注册的处理器（handlers），调用 _invoke方法执行。

• _invoke方法会根据事件过滤器（filter）检查是否匹配，若通过则调用回调函数；如果回调返回真值，表示阻止后续的冒泡处理。

状态切换

在挂载的回调函数中进行图元状态的切换，默认情况下，vchart挂载了hover，selected，dimensionHover/dimensionClick事件的处理函数，前两者由VGrammar语法层实现和代理，dimension有关的事件在VChart中实现。以hover为例，首先定义并注册dimensionHover事件：

// packages/vchart/src/event/events/dimension/dimension-hover.ts
export class DimensionHoverEvent extends DimensionEvent {
  private _cacheDimensionInfo: IDimensionInfo[] | null = null;
  ***register***<Evt extends EventType>(eType: Evt, handler: EventHandler<EventParamsDefinition[Evt]>) {
    this.***_callback*** = handler.***callback***;
    this._eventDispatcher.***register***<*'pointermove'*>(*'pointermove'*, {
      query: { ...handler.query, source: Event_Source_Type.chart },
      ***callback***: this.***onMouseMove***
    });
    ...
  }
  private ***onMouseMove*** = (params: BaseEventParams) => {
    if (!params) {
      return;
    }
    const x = (params.event as any).viewX;
    const y = (params.event as any).viewY;
    const targetDimensionInfo = this.***getTargetDimensionInfo***(x, y);
    if (targetDimensionInfo === null && this._cacheDimensionInfo !== null) {
      // 鼠标移出某维度
      this.***_callback***.***call***(null, {
        ...params,
        action: *'leave'*,
        dimensionInfo: this._cacheDimensionInfo.***slice***()
      });
      this._cacheDimensionInfo = targetDimensionInfo;
    } else if (
      targetDimensionInfo !== null &&
      (this._cacheDimensionInfo === null ||
        targetDimensionInfo.length !== this._cacheDimensionInfo.length ||
        targetDimensionInfo.***some***((info, i) => !***isSameDimensionInfo***(info, this._cacheDimensionInfo![i])))
    ) {
      // 鼠标移入某维度
      this.***_callback***.***call***(null, {
        ...params,
        action: *'enter'*,
        dimensionInfo: targetDimensionInfo.***slice***()
      });
      this._cacheDimensionInfo = targetDimensionInfo;
    } else if (targetDimensionInfo !== null) {
      // 鼠标在某维度上滑动
      this.***_callback***.***call***(null, {
        ...params,
        action: *'move'*,
        dimensionInfo: targetDimensionInfo.***slice***()
      });
    }
  };

  private ***onMouseOut*** = (params: BaseEventParams) => {
    ...  
  }
}    

在onMouseMove是一个回调函数，是后续改变图元状态的入口，其中的_callback如下：

  // packages/vchart/src/interaction/dimension-trigger.ts
  private ***onHover*** = (params: DimensionEventParams) => {
    switch (params.action) {
      case *'enter'*:
        // 清理之前的hover元素
        const lastHover = this.interaction.***getEventElement***(STATE_VALUE_ENUM.STATE_DIMENSION_HOVER);
        lastHover.***forEach***(e => this.interaction.***addEventElement***(STATE_VALUE_ENUM.STATE_DIMENSION_HOVER_REVERSE, e));
        this.interaction.***clearEventElement***(STATE_VALUE_ENUM.STATE_DIMENSION_HOVER, false);
        // 添加新的hover元素
        const elements = this.***getEventElement***(params);
        elements.***forEach***(el => this.interaction.***addEventElement***(STATE_VALUE_ENUM.STATE_DIMENSION_HOVER, el));
        this.interaction.***reverseEventElement***(STATE_VALUE_ENUM.STATE_DIMENSION_HOVER);
        break;
      case *'leave'*:
        // 清空所有元素
        this.interaction.***clearEventElement***(STATE_VALUE_ENUM.STATE_DIMENSION_HOVER, true);
        params = null;
        break;
      case *'click'*:
      case *'move'*:
      default:
        break;
    }
  };    

简单来说就是增删相应事件下的元素，而具体元素状态的改变是通过Interaction类来管理和实现的。例如在addEventElement中，添加了新的图元到指定状态，并将元素标记为该状态。

  ***addEventElement***(stateValue: StateValue, element: IElement) {
    if (this._disableTriggerEvent) {
      return;
    }
    if (!element.***getStates***().***includes***(stateValue)) {
      element.***addState***(stateValue); // 改变元素内部图元样式
    }
    const list = this._stateElements.***get***(stateValue) ?? [];
    list.***push***(element);
    this._stateElements.***set***(stateValue, list);
  }    

最终，元素通过addState函数，根据状态改变内部图元的样式，这一部分调用了语法层VGrammar的接口。

自定义状态和交互示例

上面提到，我们可以自定义一些图元的状态，并且VChart提供了updateState更新状态接口，我们可以基于此实现更多的需求。例如，我们想要在hover一个点时，同时以另一种样式高亮它的邻居点。

首先，在spec中的点系列中定义一种新的点的状态as_neighbor，并指定它的样式：

point: {
    ...
    state: {
        as_neighbor: {
            scaleX: 2,
            scaleY: 2,
            fill:"red",
            fillOpacity: 0.5
        }
    }
    ...
 }    

之后，注册事件，当hover某个点时，使用updateState来设置其邻居点的状态为as_neighbor：

vchart.***on***(*'pointerover'*, { id: *'point-series'* }, e => {
    // 找到邻居点
    const selectedNeighbors: number[] = findNeighbors();
    // 更新邻居点的状态 使用filter
    vchart.***updateState***({
        as_neighbor: {
            ***filter***: datum => {
                return selectedNeighbors.***includes***(datum.id);
            }
        }
    });
});    

这样，邻居点的状态被设置成as_neighbor，通过上述流程最终展现出指定的样式（放大到2倍，0.5透明度，同时变成红色）：

本文档由以下人员修正整理

玄魂