feat(events): 暴露 brush 交互的生命周期，便于在 G2Plot 层可以监听 (#3485)

* feat(events): 暴露 brush 交互的生命周期，便于在 G2Plot 层可以监听

- [x] 单测

* fix: cr 建议,抽取整理类型定义

src/chart/event.ts

@@ -9,7 +9,7 @@ import View from './view';
 export default class Event {
   /** 当前 target 归属的 view 实例 */
   public view: View;
-  /** 被包装的原声 G 事件 */
+  /** 被包装的原生 G 事件 */
   public gEvent: GEvent;
   /** 原始数据 */
   public data?: Datum;

src/chart/view.ts

@@ -41,6 +41,7 @@ import {
   ViewCfg,
   ViewPadding,
   ViewAppendPadding,
+  EventPayload,
 } from '../interface';
 import { GROUP_Z_INDEX, LAYER, PLOT_EVENTS, VIEW_LIFE_CIRCLE } from '../constant';
 import Base from '../base';
@@ -224,13 +225,14 @@ export class View extends Base {
    * 生命周期：渲染流程，渲染过程需要处理数据更新的情况。
    * render 函数仅仅会处理 view 和子 view。
    * @param isUpdate 是否触发更新流程。
+   * @param params render 事件参数
    */
-  public render(isUpdate: boolean = false) {
-    this.emit(VIEW_LIFE_CIRCLE.BEFORE_RENDER);
+  public render(isUpdate: boolean = false, payload?: EventPayload) {
+    this.emit(VIEW_LIFE_CIRCLE.BEFORE_RENDER, Event.fromData(this, VIEW_LIFE_CIRCLE.BEFORE_RENDER, payload));
     // 递归渲染
     this.paint(isUpdate);
 
-    this.emit(VIEW_LIFE_CIRCLE.AFTER_RENDER);
+    this.emit(VIEW_LIFE_CIRCLE.AFTER_RENDER, Event.fromData(this, VIEW_LIFE_CIRCLE.AFTER_RENDER, payload));
 
     if (this.visible === false) {
       // 用户在初始化的时候声明 visible: false

src/index.ts

@@ -207,7 +207,7 @@ import SmoothPathMask from './interaction/action/mask/smooth-path';
 
 import CursorAction from './interaction/action/cursor';
 import DataFilter from './interaction/action/data/filter';
-import DataRangeFilter from './interaction/action/data/range-filter';
+import DataRangeFilter, { BRUSH_FILTER_EVENTS } from './interaction/action/data/range-filter';
 import SiblingFilter from './interaction/action/data/sibling-filter';
 
 import ElementFilter from './interaction/action/element/filter';
@@ -691,5 +691,7 @@ declare module './chart/view' {
 
 // 暴露一些常量
 export { VIEW_LIFE_CIRCLE } from './constant';
+/** brush 范围筛选的一些事件常量 */
+export { BRUSH_FILTER_EVENTS };
 
 export * from './core';

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

@@ -1,9 +1,8 @@
 import { Point, Scale } from '../../../dependents';
-import { FilterCondition } from '../../../interface';
-
+import { FilterCondition, EventPayload } from '../../../interface';
 import { View } from '../../../chart';
 import Action from '../base';
-import { distance, isMask } from '../util';
+import { isMask } from '../util';
 
 // 获取对应的 scale
 function getFilter(scale: Scale, dim: string, point1: Point, point2: Point): FilterCondition {
@@ -37,6 +36,11 @@ function getFilter(scale: Scale, dim: string, point1: Point, point2: Point): Fil
   }
 }
 
+export enum BRUSH_FILTER_EVENTS {
+  FILTER = 'brush-filter-processing',
+  RESET = 'brush-filter-reset',
+}
+
 /**
  * 范围过滤的 Action
  * @ignore
@@ -106,7 +110,7 @@ class RangeFilter extends Action {
       const filter = getFilter(yScale, 'y', normalCurrent, normalStart);
       this.filterView(view, yScale.field, filter);
     }
-    this.reRender(view);
+    this.reRender(view, { source: BRUSH_FILTER_EVENTS.FILTER });
   }
 
   /**
@@ -131,7 +135,7 @@ class RangeFilter extends Action {
       const yScale = view.getYScales()[0];
       this.filterView(view, yScale.field, null); // 取消过滤
     }
-    this.reRender(view);
+    this.reRender(view, { source: BRUSH_FILTER_EVENTS.RESET });
   }
 
   /**
@@ -145,8 +149,8 @@ class RangeFilter extends Action {
    * 重新渲染
    * @param view
    */
-  protected reRender(view: View) {
-    view.render(true);
+  protected reRender(view: View, payload?: EventPayload) {
+    view.render(true, payload);
   }
 }
 

src/interface.ts

@@ -1487,6 +1487,14 @@ export interface SliderCfg {
   formatter?: (val: any, datum: Datum, idx: number) => any;
 }
 
+/**
+ * 事件 payload
+ */
+export type EventPayload = LooseObject & {
+  /** 触发事件的来源 */
+  source?: string;
+}
+
 export type EventCallback = (event: LooseObject) => void;
 /**
  * todo: 事件名可穷举，后续需要补充

tests/unit/interaction/action/range-filter-spec.ts

@@ -1,5 +1,5 @@
-import { Chart } from '../../../../src/index';
-import RangeFilter from '../../../../src/interaction/action/data/range-filter';
+import { Chart, VIEW_LIFE_CIRCLE } from '../../../../src/index';
+import RangeFilter, { BRUSH_FILTER_EVENTS } from '../../../../src/interaction/action/data/range-filter';
 import Context from '../../../../src/interaction/context';
 import { createDiv } from '../../../util/dom';
 
@@ -45,6 +45,20 @@ describe('active test', () => {
   });
 
   it('test x filter', () => {
+    let count = 0;
+
+    chart.on(VIEW_LIFE_CIRCLE.BEFORE_RENDER, (evt) => {
+      if (evt.data?.source === BRUSH_FILTER_EVENTS.RESET) {
+        expect(count).toBe(2);
+      }
+    });
+
+    chart.on(VIEW_LIFE_CIRCLE.AFTER_RENDER, (evt) => {
+      if (evt.data?.source === BRUSH_FILTER_EVENTS.FILTER) {
+        count = 2;
+      }
+    });
+
     // @ts-ignore
     action.dims = ['x'];
     context.event = {