feat(event): add plot events bind (#1412)

* feat(event): add plot events bind * test(event): add test cases & type define * fix(core): fix by prettier
antvis · Aug 25, 2020 · 3575f73 · 3575f73
1 parent 05afca6
commit 3575f73
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 4 deletions.
diff --git a/__tests__/unit/core/index-spec.ts b/__tests__/unit/core/index-spec.ts
@@ -77,4 +77,42 @@ describe('core', () => {
 
     expect(line.chart.getTheme().colors10).toEqual(['green']);
   });
+
+  it('event', async () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      theme: {
+        colors10: ['red'],
+      },
+    });
+
+    line.render();
+
+    function click(): Promise<Event> {
+      return new Promise((resolve, reject) => {
+        line.on('element:click', (e) => {
+          resolve(e);
+        });
+
+        line.chart.emit('element:click', {
+          _data: 1,
+          type: 'element:click',
+        });
+      });
+    }
+
+    const e = await click();
+
+    // 直接接受 G2 透传的事件
+    expect(e).toEqual({
+      type: 'element:click',
+      _data: 1,
+    });
+  });
 });
diff --git a/src/core/plot.ts b/src/core/plot.ts
@@ -1,13 +1,14 @@
-import { Chart } from '@antv/g2';
+import { Chart, Event } from '@antv/g2';
 import { deepMix } from '@antv/util';
+import EE from '@antv/event-emitter';
 import { bind } from 'size-sensor';
 import { Adaptor } from './adaptor';
 import { ChartOptions, Data } from '../types';
 
 /**
  * 所有 plot 的基类
  */
-export abstract class Plot<O extends ChartOptions> {
+export abstract class Plot<O extends ChartOptions> extends EE {
   /** plot 类型名称 */
   public abstract readonly type: string = 'base';
   /** plot 的 schema 配置 */
@@ -20,11 +21,14 @@ export abstract class Plot<O extends ChartOptions> {
   private unbind: () => void;
 
   constructor(container: string | HTMLElement, options: O) {
+    super();
     this.container = typeof container === 'string' ? document.getElementById(container) : container;
-    const defaultOptions = this.getDefaultOptions();
-    this.options = deepMix({}, defaultOptions, options);
+
+    this.options = deepMix({}, this.getDefaultOptions(), options);
 
     this.createG2();
+
+    this.bindEvents();
   }
 
   /**
@@ -46,6 +50,19 @@ export abstract class Plot<O extends ChartOptions> {
     });
   }
 
+  /**
+   * 绑定代理所有 G2 的事件
+   */
+  private bindEvents() {
+    if (this.chart) {
+      this.chart.on('*', (e: Event) => {
+        if (e?.type) {
+          this.emit(e.type, e);
+        }
+      });
+    }
+  }
+
   /**
    * 获取默认的 options 配置项
    * 每个组件都可以复写
@@ -116,6 +133,8 @@ export abstract class Plot<O extends ChartOptions> {
     this.unbindSizeSensor();
     // G2 的销毁
     this.chart.destroy();
+    // 清空已经绑定的事件
+    this.off();
   }
 
   /**