From 832aaa7853bb67c26420879cf24fcb56944aa67d Mon Sep 17 00:00:00 2001 From: hustcc Date: Mon, 28 Oct 2019 11:31:25 +0800 Subject: [PATCH 1/4] feat: use event-emitter for unified code specification --- packages/g-base/package.json | 1 + packages/g-base/src/abstract/base.ts | 47 +++------------------------- packages/g-base/src/interfaces.ts | 43 ++----------------------- 3 files changed, 8 insertions(+), 83 deletions(-) diff --git a/packages/g-base/package.json b/packages/g-base/package.json index 5444557fd..38fe735f6 100644 --- a/packages/g-base/package.json +++ b/packages/g-base/package.json @@ -49,6 +49,7 @@ }, "homepage": "https://github.com/antvis/util#readme", "dependencies": { + "@antv/event-emitter": "^0.1.1", "@antv/util": "~2.0.0", "@types/d3-timer": "^1.0.9", "d3-ease": "^1.0.5", diff --git a/packages/g-base/src/abstract/base.ts b/packages/g-base/src/abstract/base.ts index 38feb3581..8014457f6 100644 --- a/packages/g-base/src/abstract/base.ts +++ b/packages/g-base/src/abstract/base.ts @@ -1,6 +1,7 @@ -import { IBase, IObservable } from '../interfaces'; +import EE from '@antv/event-emitter'; +import { IBase } from '../interfaces'; import { removeFromArray, mix, isFunction } from '../util/util'; -abstract class Base implements IBase { +abstract class Base extends EE implements IBase { /** * @private * 内部属性，用于 get,set @@ -30,6 +31,7 @@ abstract class Base implements IBase { } constructor(cfg) { + super(); const defaultCfg = this.getDefaultCfg(); this.cfg = mix(defaultCfg, cfg); } @@ -52,47 +54,8 @@ abstract class Base implements IBase { this.destroyed = true; } - // 实现 IObservable - on(eventName: string, callback: Function) { - if (!isFunction(callback)) { - throw new Error('listener should be a function'); - } - if (!this.events) { - this.events = {}; - } - if (!this.events[eventName]) { - this.events[eventName] = []; - } - this.events[eventName].push(callback); - } - - off(eventName?: string, callback?: Function) { - if (!eventName) { - // evt 为空全部清除 - this.events = {}; - } else { - if (!callback) { - // evt 存在，callback 为空，清除事件所有方法 - delete this.events[eventName]; - } else { - // evt 存在，callback 存在，清除匹配的 - const events = this.events[eventName] || []; - removeFromArray(events, callback); - } - } - } - - emit(eventName: string, eventObject: object) { - this.trigger(eventName, eventObject); - } - trigger(eventName: string, eventObject: object) { - const events = this.events[eventName] || []; - const length = events.length; - for (let i = 0; i < length; i++) { - const callback = events[i]; - callback.call(this, eventObject); - } + this.emit(eventName, eventObject); } } diff --git a/packages/g-base/src/interfaces.ts b/packages/g-base/src/interfaces.ts index 111fac21d..cf5953bb7 100644 --- a/packages/g-base/src/interfaces.ts +++ b/packages/g-base/src/interfaces.ts @@ -10,56 +10,17 @@ import { ShapeBase, BBox, } from './types'; +import EE from '@antv/event-emitter'; export interface ICtor { new (cfg: any): T; } -/** - * @interface IObserable - * 可以绑定事件的接口 - */ -export interface IObservable { - /** - * 绑定事件 - * @param {string} eventName 事件名 - * @param {Function} callback 回调函数 - */ - on(eventName: string, callback: Function); - /** - * 移除事件 - */ - off(); - /** - * 移除事件 - * @param {string} eventName 事件名 - */ - off(eventName: string); - /** - * 移除事件 - * @param {string} eventName 事件名 - * @param {Function} callback 回调函数 - */ - off(eventName: string, callback: Function); - /** - * 触发事件, trigger 的别名函数 - * @param {string} eventName 事件名称 - * @param {object} args 参数 - */ - emit(eventName: string, eventObject: object); - /** - * 触发事件 - * @param {string} eventName 事件名称 - * @param {object} args 参数 - */ - trigger(eventName: string, eventObject: object); -} - /** * @interface IBase * 所有图形类公共的接口，提供 get,set 方法 */ -export interface IBase extends IObservable { +export interface IBase extends EE { /** * 获取属性值 * @param {string} name 属性名 From 7d6778993fe8d42821869ae37a2d417cc9dde908 Mon Sep 17 00:00:00 2001 From: hustcc Date: Mon, 28 Oct 2019 13:06:43 +0800 Subject: [PATCH 2/4] feat(ee): replace build-in ee with antv/event-emitter --- packages/g-base/README.md | 6 ++--- packages/g-base/src/abstract/base.ts | 4 --- packages/g-base/src/event/event-contoller.ts | 2 +- packages/g-base/tests/unit/base-spec.js | 28 ++++++++++---------- 4 files changed, 18 insertions(+), 22 deletions(-) diff --git a/packages/g-base/README.md b/packages/g-base/README.md index 14912fddd..6fb9e8b2d 100644 --- a/packages/g-base/README.md +++ b/packages/g-base/README.md @@ -24,7 +24,7 @@ G-Base 中定义了绘图引擎的接口、抽象类和工具方法 #### IBase 事件接口定义 -```js +```ts /** * 绑定事件 * @param {string} eventName 事件名 @@ -57,11 +57,11 @@ G-Base 中定义了绘图引擎的接口、抽象类和工具方法 * @param {string} eventName 事件名称 * @param {object} args 参数 */ - trigger(eventName: string, eventObject: object); + emit(eventName: string, eventObject: object); ``` 属性接口定义 -```js +```ts /** * 获取属性值 * @param {string} name 属性名 diff --git a/packages/g-base/src/abstract/base.ts b/packages/g-base/src/abstract/base.ts index 8014457f6..26736a5ba 100644 --- a/packages/g-base/src/abstract/base.ts +++ b/packages/g-base/src/abstract/base.ts @@ -53,10 +53,6 @@ abstract class Base extends EE implements IBase { this.off(); this.destroyed = true; } - - trigger(eventName: string, eventObject: object) { - this.emit(eventName, eventObject); - } } export default Base; diff --git a/packages/g-base/src/event/event-contoller.ts b/packages/g-base/src/event/event-contoller.ts index 25f973cc5..e3eafcb85 100644 --- a/packages/g-base/src/event/event-contoller.ts +++ b/packages/g-base/src/event/event-contoller.ts @@ -84,7 +84,7 @@ function hasDelegation(events, type) { // 触发委托事件 function emitDelegation(container, type, eventObj) { const paths = eventObj.propagationPath; - const events = container.events; + const events = container.getEvents(); // 至少有一个对象 for (let i = 0; i < paths.length; i++) { const element = paths[i]; diff --git a/packages/g-base/tests/unit/base-spec.js b/packages/g-base/tests/unit/base-spec.js index c34b6e70a..b860c6f69 100644 --- a/packages/g-base/tests/unit/base-spec.js +++ b/packages/g-base/tests/unit/base-spec.js @@ -42,7 +42,7 @@ describe('base test', () => { base.destroy(); expect(base.cfg).eqls({ destroyed: true }); expect(base.destroyed).equal(true); - expect(base.events.click).equal(undefined); + expect(base.getEvents().click).equal(undefined); }); it('on', () => { @@ -53,8 +53,8 @@ describe('base test', () => { function callback() {} base.on('click', callback); - expect(base.events.click.length).equal(1); - expect(base.events.click[0]).equal(callback); + expect(base.getEvents().click.length).equal(1); + expect(base.getEvents().click[0].callback).equal(callback); }); it('trigger, emit', () => { @@ -66,17 +66,17 @@ describe('base test', () => { } base.on('click', callback); - base.trigger('click'); + base.emit('click'); expect(called).equal(1); base.emit('click'); expect(called).equal(2); base.on('click', () => { called = called + 2; }); - base.trigger('click'); + base.emit('click'); expect(called).equal(5); - expect(base.events.click.length).equal(2); - base.trigger('test'); + expect(base.getEvents().click.length).equal(2); + base.emit('test'); expect(called).equal(5); }); @@ -90,7 +90,7 @@ describe('base test', () => { } base.on('click', callback); - base.trigger('click', { p1: 1, p2: 2 }); + base.emit('click', { p1: 1, p2: 2 }); expect(p1).equal(1); expect(p2).equal(2); }); @@ -102,17 +102,17 @@ describe('base test', () => { base.on('click', () => {}); base.on('test', () => {}); - expect(base.events.click.length).equal(2); + expect(base.getEvents().click.length).equal(2); base.off('click', callback); - expect(base.events.click.length).equal(1); - expect(base.events.test.length).equal(1); + expect(base.getEvents().click.length).equal(1); + expect(base.getEvents().test.length).equal(1); // 移除不存在的事件 base.off('test', callback); - expect(base.events.test.length).equal(1); + expect(base.getEvents().test.length).equal(1); base.off('test'); - expect(base.events.test).equal(undefined); + expect(base.getEvents().test).equal(undefined); base.off(); - expect(base.events.click).equal(undefined); + expect(base.getEvents().click).equal(undefined); }); }); From 43c818516c522ac6810b80d7e57ae70ee1eb59dc Mon Sep 17 00:00:00 2001 From: hustcc Date: Mon, 28 Oct 2019 15:37:08 +0800 Subject: [PATCH 3/4] fix: revert IObservable --- packages/g-base/src/interfaces.ts | 38 ++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/packages/g-base/src/interfaces.ts b/packages/g-base/src/interfaces.ts index cf5953bb7..4edff7bb9 100644 --- a/packages/g-base/src/interfaces.ts +++ b/packages/g-base/src/interfaces.ts @@ -16,11 +16,47 @@ export interface ICtor { new (cfg: any): T; } +/** + * @interface IObservable + * 可以绑定事件的接口 + */ +export interface IObservable { + /** + * 绑定事件 + * @param eventName 事件名 + * @param callback 回调函数 + */ + on(eventName: string, callback: Function); + /** + * 移除事件 + */ + off(); + /** + * 移除事件 + * @param eventName 事件名 + */ + off(eventName: string); + /** + * 移除事件 + * @param eventName 事件名 + * @param callback 回调函数 + */ + off(eventName: string, callback: Function); + /** + * 触发事件, trigger 的别名函数 + * @param eventName 事件名称 + * @param eventObject 参数 + */ + emit(eventName: string, eventObject: object); + + getEvents(): any; +} + /** * @interface IBase * 所有图形类公共的接口，提供 get,set 方法 */ -export interface IBase extends EE { +export interface IBase extends IObservable { /** * 获取属性值 * @param {string} name 属性名 From e3c75b7ccf9b8369f9178d6d63d86b5814a86e8b Mon Sep 17 00:00:00 2001 From: hustcc Date: Mon, 28 Oct 2019 15:55:01 +0800 Subject: [PATCH 4/4] fix: remove used import ee --- packages/g-base/src/interfaces.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/g-base/src/interfaces.ts b/packages/g-base/src/interfaces.ts index 4edff7bb9..7f5538573 100644 --- a/packages/g-base/src/interfaces.ts +++ b/packages/g-base/src/interfaces.ts @@ -10,7 +10,6 @@ import { ShapeBase, BBox, } from './types'; -import EE from '@antv/event-emitter'; export interface ICtor { new (cfg: any): T;