feat(range-highlight): 为区间高亮增加 events 事件

src/index.ts

@@ -177,17 +177,17 @@ import SiblingTooltip from './interaction/action/component/tooltip/sibling';
 import TooltipAction from './interaction/action/component/tooltip/geometry';
 import EllipsisTextAction from './interaction/action/component/tooltip/ellipsis-text';
 
-import ElmentActive from './interaction/action/element/active';
+import ElementActive from './interaction/action/element/active';
 import ElementLinkByColor from './interaction/action/element/link-by-color';
-import ElmentRangeActive from './interaction/action/element/range-active';
-import ElmentSingleActive from './interaction/action/element/single-active';
+import ElementRangeActive from './interaction/action/element/range-active';
+import ElementSingleActive from './interaction/action/element/single-active';
 
-import ElmentHighlight from './interaction/action/element/highlight';
-import ElmentHighlightByColor from './interaction/action/element/highlight-by-color';
-import ElmentHighlightByX from './interaction/action/element/highlight-by-x';
+import ElementHighlight from './interaction/action/element/highlight';
+import ElementHighlightByColor from './interaction/action/element/highlight-by-color';
+import ElementHighlightByX from './interaction/action/element/highlight-by-x';
 
-import ElmentRangeHighlight from './interaction/action/element/range-highlight';
-import ElmentSingleHighlight from './interaction/action/element/single-highlight';
+import ElementRangeHighlight, { ELEMENT_RANGE_HIGHLIGHT_EVENTS } from './interaction/action/element/range-highlight';
+import ElementSingleHighlight from './interaction/action/element/single-highlight';
 
 import ElementRangeSelected from './interaction/action/element/range-selected';
 import ElementSelected from './interaction/action/element/selected';
@@ -221,17 +221,17 @@ import ScaleZoom from './interaction/action/view/scale-zoom';
 registerAction('tooltip', TooltipAction);
 registerAction('sibling-tooltip', SiblingTooltip);
 registerAction('ellipsis-text', EllipsisTextAction);
-registerAction('element-active', ElmentActive);
-registerAction('element-single-active', ElmentSingleActive);
-registerAction('element-range-active', ElmentRangeActive);
+registerAction('element-active', ElementActive);
+registerAction('element-single-active', ElementSingleActive);
+registerAction('element-range-active', ElementRangeActive);
 
-registerAction('element-highlight', ElmentHighlight);
-registerAction('element-highlight-by-x', ElmentHighlightByX);
-registerAction('element-highlight-by-color', ElmentHighlightByColor);
+registerAction('element-highlight', ElementHighlight);
+registerAction('element-highlight-by-x', ElementHighlightByX);
+registerAction('element-highlight-by-color', ElementHighlightByColor);
 
-registerAction('element-single-highlight', ElmentSingleHighlight);
-registerAction('element-range-highlight', ElmentRangeHighlight);
-registerAction('element-sibling-highlight', ElmentRangeHighlight, {
+registerAction('element-single-highlight', ElementSingleHighlight);
+registerAction('element-range-highlight', ElementRangeHighlight);
+registerAction('element-sibling-highlight', ElementRangeHighlight, {
   effectSiblings: true,
   effectByRecord: true,
 });
@@ -692,6 +692,6 @@ declare module './chart/view' {
 // 暴露一些常量
 export { VIEW_LIFE_CIRCLE } from './constant';
 /** brush 范围筛选的一些事件常量 */
-export { BRUSH_FILTER_EVENTS };
+export { BRUSH_FILTER_EVENTS, ELEMENT_RANGE_HIGHLIGHT_EVENTS };
 
 export * from './core';

src/interaction/action/data/range-filter.ts

@@ -36,11 +36,13 @@ function getFilter(scale: Scale, dim: string, point1: Point, point2: Point): Fil
   }
 }
 
-export enum BRUSH_FILTER_EVENTS {
+enum EVENTS {
   FILTER = 'brush-filter-processing',
   RESET = 'brush-filter-reset',
 }
 
+export { EVENTS as BRUSH_FILTER_EVENTS };
+
 /**
  * 范围过滤的 Action
  * @ignore
@@ -110,7 +112,7 @@ class RangeFilter extends Action {
       const filter = getFilter(yScale, 'y', normalCurrent, normalStart);
       this.filterView(view, yScale.field, filter);
     }
-    this.reRender(view, { source: BRUSH_FILTER_EVENTS.FILTER });
+    this.reRender(view, { source: EVENTS.FILTER });
   }
 
   /**
@@ -135,7 +137,7 @@ class RangeFilter extends Action {
       const yScale = view.getYScales()[0];
       this.filterView(view, yScale.field, null); // 取消过滤
     }
-    this.reRender(view, { source: BRUSH_FILTER_EVENTS.RESET });
+    this.reRender(view, { source: EVENTS.RESET });
   }
 
   /**

src/interaction/action/element/range-highlight.ts

@@ -1,7 +1,17 @@
-import Element from '../../../geometry/element/';
+import Element from '../../../geometry/element';
+import Event from '../../../chart/event';
 import { clearHighlight, setHighlightBy } from './highlight-util';
 import ElementRangeState from './range-state';
 
+enum EVENTS {
+  BEFORE_HIGHLIGHT = 'element-range-highlight:beforehighlight',
+  AFTER_HIGHLIGHT = 'element-range-highlight:afterhighlight',
+  BEFORE_CLEAR = 'element-range-highlight:beforeclear',
+  AFTER_CLEAR = 'element-range-highlight:afterclear',
+}
+
+export { EVENTS as ELEMENT_RANGE_HIGHLIGHT_EVENTS };
+
 /**
  * @ignore
  * 区域 highlight 的 Action
@@ -18,7 +28,22 @@ class ElementRangeHighlight extends ElementRangeState {
    * 设置 highlight
    */
   public highlight() {
+    const { view, event } = this.context;
+    const elements = this.getIntersectElements();
+    const payload = { view, event, highlightElements: elements };
+    view.emit(EVENTS.BEFORE_HIGHLIGHT, Event.fromData(view, EVENTS.BEFORE_HIGHLIGHT, payload));
     this.setState();
+    view.emit(EVENTS.AFTER_HIGHLIGHT, Event.fromData(view, EVENTS.AFTER_HIGHLIGHT, payload));
+  }
+
+  /**
+   * @overrider 添加事件
+   */
+  public clear() {
+    const view = this.context.view;
+    view.emit(EVENTS.BEFORE_CLEAR, Event.fromData(view, EVENTS.BEFORE_CLEAR, {}));
+    super.clear();
+    view.emit(EVENTS.AFTER_CLEAR, Event.fromData(view, EVENTS.AFTER_CLEAR, {}));
   }
 
   protected setElementsState(elements: Element[], enable: boolean, allElements: Element[]) {

src/interaction/action/element/range-state.ts

@@ -45,7 +45,7 @@ class ElementRangeState extends StateBase {
     this.isStarted = true;
   }
 
-  private getIntersectElements() {
+  protected getIntersectElements() {
     let elements = null;
     if (isMask(this.context)) {
       elements = getMaskedElements(this.context, 10);