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/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..26736a5ba 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); } @@ -51,49 +53,6 @@ abstract class Base implements IBase { this.off(); 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); - } - } } 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/src/interfaces.ts b/packages/g-base/src/interfaces.ts index 111fac21d..7f5538573 100644 --- a/packages/g-base/src/interfaces.ts +++ b/packages/g-base/src/interfaces.ts @@ -16,14 +16,14 @@ export interface ICtor { } /** - * @interface IObserable + * @interface IObservable * 可以绑定事件的接口 */ export interface IObservable { /** * 绑定事件 - * @param {string} eventName 事件名 - * @param {Function} callback 回调函数 + * @param eventName 事件名 + * @param callback 回调函数 */ on(eventName: string, callback: Function); /** @@ -32,27 +32,23 @@ export interface IObservable { off(); /** * 移除事件 - * @param {string} eventName 事件名 + * @param eventName 事件名 */ off(eventName: string); /** * 移除事件 - * @param {string} eventName 事件名 - * @param {Function} callback 回调函数 + * @param eventName 事件名 + * @param callback 回调函数 */ off(eventName: string, callback: Function); /** * 触发事件, trigger 的别名函数 - * @param {string} eventName 事件名称 - * @param {object} args 参数 + * @param eventName 事件名称 + * @param eventObject 参数 */ emit(eventName: string, eventObject: object); - /** - * 触发事件 - * @param {string} eventName 事件名称 - * @param {object} args 参数 - */ - trigger(eventName: string, eventObject: object); + + getEvents(): any; } /** 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); }); });