fix(g-base): event object of event delegation and propagation is inco…

…rrect, close #249
antvis · Nov 11, 2019 · 8b01001 · 8b01001
1 parent 859da22
commit 8b01001
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 15 deletions.
diff --git a/packages/g-base/src/abstract/base.ts b/packages/g-base/src/abstract/base.ts
@@ -8,12 +8,6 @@ abstract class Base extends EE implements IBase {
    * @type {object}
    */
   cfg: object;
-  /**
-   * @private
-   * 事件集合
-   * @type {object}
-   */
-  events: object = {};
 
   /**
    * 是否被销毁

diff --git a/packages/g-base/src/event/event-contoller.ts b/packages/g-base/src/event/event-contoller.ts
@@ -90,13 +90,12 @@ function emitDelegation(container, type, eventObj) {
     const element = paths[i];
     // 暂定跟 name 绑定
     const name = element.get('name');
-    if (name) {
-      const eventName = name + DELEGATION_SPLIT + type;
-      if (events[eventName]) {
-        eventObj.delegateTarget = container;
-        eventObj.currentTarget = element;
-        container.emit(eventName, eventObj);
-      }
+    const eventName = name ? name + DELEGATION_SPLIT + type : '*';
+    if (events[eventName]) {
+      eventObj.name = eventName;
+      eventObj.delegateTarget = container;
+      eventObj.currentTarget = element;
+      container.emit(eventName, eventObj);
     }
   }
 }
@@ -123,6 +122,7 @@ function bubbleEvent(container, type, eventObj) {
       eventObj.bubbles = false;
       return;
     }
+
     // 绑定事件的对象
     eventObj.currentTarget = container;
     container.emit(type, eventObj);

diff --git a/packages/g-base/src/event/graph-event.ts b/packages/g-base/src/event/graph-event.ts
@@ -6,6 +6,11 @@ class GraphEvent {
    * @type {string}
    */
   type: string;
+  /**
+   * 事件名称
+   * @type {string}
+   */
+  name: string;
   /**
    * 画布上的位置 x
    * @type {number}
@@ -41,6 +46,11 @@ class GraphEvent {
    * @type {object}
    */
   currentTarget: object = null;
+  /**
+   * 代理对象
+   * @type {object}
+   */
+  delegateTarget: object = null;
   /**
    * 是否阻止了原生事件
    * @type {boolean}
@@ -84,6 +94,7 @@ class GraphEvent {
 
   constructor(type, event) {
     this.type = type;
+    this.name = type;
     this.domEvent = event;
     this.timeStamp = event.timeStamp;
   }

diff --git a/packages/g-base/tests/unit/event-spec.js b/packages/g-base/tests/unit/event-spec.js
@@ -85,7 +85,7 @@ describe('test event object', () => {
     expect(event.defaultPrevented).eql(true);
   });
 
-  it('stopProgation', () => {
+  it('stopPropagation', () => {
     event.stopPropagation();
     expect(event.propagationStopped).eql(true);
   });
@@ -829,7 +829,7 @@ describe('test graphic events', () => {
     group1.set('name', null);
   });
 
-  it('stopProgation', () => {
+  it('stopPropagation', () => {
     let group1Called = false;
     let group11Called = false;
     let canvasCalled = false;

diff --git a/packages/g-canvas/tests/bugs/issue-249-spec.js b/packages/g-canvas/tests/bugs/issue-249-spec.js
@@ -0,0 +1,140 @@
+const expect = require('chai').expect;
+import Canvas from '../../src/canvas';
+import { simulateMouseEvent, getClientPoint } from '../util';
+
+const dom = document.createElement('div');
+document.body.appendChild(dom);
+dom.id = 'c1';
+
+describe('#249', () => {
+  const canvas = new Canvas({
+    container: dom,
+    width: 600,
+    height: 600,
+  });
+
+  const el = canvas.get('el');
+
+  // it.only('*', () => {
+  //   const group = canvas.addGroup({
+  //     name: 'group',
+  //   });
+  //   const circle = group.addShape('circle', {
+  //     name: 'circle',
+  //     attrs: {
+  //       x: 50,
+  //       y: 50,
+  //       r: 50,
+  //       fill: 'red',
+  //     },
+  //   });
+
+  //   const { clientX, clientY } = getClientPoint(canvas, 50, 50);
+  //   let flag = false;
+  //   let ev2;
+
+  //   canvas.on('*', (e) => {
+  //     flag = true;
+  //   });
+
+  //   group.on('circle:click', (e) => {
+  //     ev2 = e;
+  //   });
+
+  //   simulateMouseEvent(el, 'mousedown', {
+  //     clientX,
+  //     clientY,
+  //   });
+
+  //   simulateMouseEvent(el, 'mouseup', {
+  //     clientX,
+  //     clientY,
+  //   });
+  //   expect(flag).eqls(true);
+  // });
+
+  it('eventObj of event delegation should be independent', () => {
+    const group = canvas.addGroup({
+      name: 'group',
+    });
+    const circle = group.addShape('circle', {
+      name: 'circle',
+      attrs: {
+        x: 50,
+        y: 50,
+        r: 50,
+        fill: 'red',
+      },
+    });
+
+    const { clientX, clientY } = getClientPoint(canvas, 50, 50);
+    let ev1;
+    let ev2;
+
+    canvas.on('group:click', (e) => {
+      ev1 = e;
+    });
+
+    group.on('circle:click', (e) => {
+      ev2 = e;
+    });
+
+    simulateMouseEvent(el, 'mousedown', {
+      clientX,
+      clientY,
+    });
+
+    simulateMouseEvent(el, 'mouseup', {
+      clientX,
+      clientY,
+    });
+    expect(ev1.target).eqls(circle);
+    expect(ev1.currentTarget).eqls(group);
+    expect(ev1.delegateTarget).eqls(canvas);
+    expect(ev2.target).eqls(circle);
+    expect(ev2.currentTarget).eqls(circle);
+    expect(ev2.delegateTarget).eqls(group);
+  });
+
+  it('eventObj of event propagation should be independent', () => {
+    const group = canvas.addGroup({
+      name: 'group',
+    });
+    const circle = group.addShape('circle', {
+      name: 'circle',
+      attrs: {
+        x: 50,
+        y: 50,
+        r: 50,
+        fill: 'red',
+      },
+    });
+
+    const { clientX, clientY } = getClientPoint(canvas, 50, 50);
+    let ev1;
+    let ev2;
+
+    canvas.on('click', (e) => {
+      ev1 = e;
+    });
+
+    group.on('click', (e) => {
+      ev2 = e;
+    });
+
+    simulateMouseEvent(el, 'mousedown', {
+      clientX,
+      clientY,
+    });
+
+    simulateMouseEvent(el, 'mouseup', {
+      clientX,
+      clientY,
+    });
+
+    expect(ev1.target).eqls(circle);
+    expect(ev1.currentTarget).eqls(canvas);
+    expect(ev2.target).eqls(circle);
+    expect(ev2.currentTarget).eqls(group);
+  });
+});