feat(event): 添加 element:statechange 事件

src/geometry/element/index.ts

@@ -6,6 +6,8 @@ import { AnimateOption, Datum, LooseObject, ShapeFactory, ShapeInfo, StateCfg }
 import { getReplaceAttrs } from '../../util/graphics';
 import Geometry from '../base';
 
+import { propagationDelegate } from '@antv/component/lib/util/event';
+
 /** Element 构造函数传入参数类型 */
 interface ElementCfg {
   /** 用于创建各种 shape 的工厂对象 */
@@ -226,6 +228,13 @@ export default class Element extends Base {
     }
 
     offscreenShape.remove(true); // 销毁，减少内存占用
+    const eventObject = {
+      states,
+      element: this,
+      target: this.container,
+    };
+    this.container.emit('statechange', eventObject);
+    propagationDelegate(this.container, 'statechange', eventObject);
   }
 
   /**

tests/unit/chart/event/multiple-view-spec.ts

@@ -1,7 +1,7 @@
 import { Chart } from '../../../../src';
 import { CITY_SALE } from '../../../util/data';
 import { createDiv } from '../../../util/dom';
-import {simulateMouseEvent, getClientPoint} from '../../../util/simulate';
+import {getClientPoint, simulateMouseEvent} from '../../../util/simulate';
 describe('multiple view test', () => {
   const div = createDiv();
 
@@ -142,4 +142,4 @@ describe('multiple view test', () => {
   afterAll(() => {
     chart.destroy();
   });
-});
+});

tests/unit/chart/event/statechange-spec.ts

@@ -0,0 +1,49 @@
+import { Chart } from '../../../../src';
+import { createDiv } from '../../../util/dom';
+
+describe('statechange', () => {
+  const data = [
+    { year: '1991', value: 3 },
+    { year: '1992', value: 4 },
+    { year: '1993', value: 3.5 },
+    { year: '1994', value: 5 },
+    { year: '1995', value: 4.9 },
+    { year: '1996', value: 6 },
+    { year: '1997', value: 7 },
+    { year: '1998', value: 9 },
+    { year: '1999', value: 13 },
+  ];
+  const chart = new Chart({
+    container: createDiv(),
+    autoFit: true,
+    height: 500,
+  });
+
+  chart.data(data);
+
+  chart.tooltip({
+    showMarkers: false,
+  });
+
+  const interval = chart.interval().position('year*value');
+  chart.render();
+
+  it('emit  element:statechange', () => {
+    const fn = jest.fn();
+    let eventObj;
+    chart.on('element:statechange', (e) => {
+      fn();
+      eventObj = e;
+    });
+
+    const element = interval.elements[0];
+    element.setState('active', true);
+    expect(fn).toBeCalled();
+    expect(eventObj.gEvent.originalEvent.states).toEqual(['active']);
+    expect(eventObj.gEvent.originalEvent.element).toEqual(element);
+  });
+
+  afterAll(() => {
+    chart.destroy();
+  });
+});