Merge pull request antvis#480 from antvis/delegate_name

feat(delegate): name support array
openwayne · Apr 15, 2020 · e3f567d · e3f567d
2 parents 13eeadc + 6cc66bb
commit e3f567d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/packages/g-base/src/abstract/element.ts b/packages/g-base/src/abstract/element.ts
@@ -624,21 +624,32 @@ abstract class Element extends Base implements IElement {
         ) {
           break;
         }
-        // 事件委托的形式 name:type
-        const eventName = name + DELEGATION_SPLIT + type;
-        if (events[eventName] || events[WILDCARD]) {
-          // 对于通配符 *，事件名称 = 委托事件名称
-          eventObj.name = eventName;
-          eventObj.currentTarget = element;
-          eventObj.delegateTarget = this;
-          // 将委托事件的监听对象 delegateObject 挂载到事件对象上
-          eventObj.delegateObject = element.get('delegateObject');
-          this.emit(eventName, eventObj);
+        if (isArray(name)) {
+          each(name, (subName) => {
+            this.emitDelegateEvent(element, subName, eventObj);
+          });
+        } else {
+          this.emitDelegateEvent(element, name, eventObj);
         }
       }
     }
   }
 
+  private emitDelegateEvent(element, name: string, eventObj: GraphEvent) {
+    const events = this.getEvents();
+    // 事件委托的形式 name:type
+    const eventName = name + DELEGATION_SPLIT + eventObj.type;
+    if (events[eventName] || events[WILDCARD]) {
+      // 对于通配符 *，事件名称 = 委托事件名称
+      eventObj.name = eventName;
+      eventObj.currentTarget = element;
+      eventObj.delegateTarget = this;
+      // 将委托事件的监听对象 delegateObject 挂载到事件对象上
+      eventObj.delegateObject = element.get('delegateObject');
+      this.emit(eventName, eventObj);
+    }
+  }
+
   /**
    * 移动元素
    * @param {number} translateX 水平移动距离

diff --git a/packages/g-base/tests/unit/event-spec.js b/packages/g-base/tests/unit/event-spec.js
@@ -1256,10 +1256,17 @@ describe('test graphic events', () => {
 
     let enterCalled1 = 0;
     let leaveCalled1 = 0;
-    group1.set('name', 'g1');
+
+    let enterCalledTest = 0;
+    group1.set('name', ['g1', 'gtest']);
     canvas.on('g1:mouseenter', () => {
       enterCalled1++;
     });
+
+    canvas.on('gtest:mouseenter', () => {
+      enterCalledTest++;
+    });
+
     canvas.on('g1:mouseleave', () => {
       leaveCalled1++;
     });
@@ -1285,6 +1292,7 @@ describe('test graphic events', () => {
     });
     expect(enterCalled).eql(1);
     expect(enterCalled1).eql(1);
+    expect(enterCalledTest).eql(1);
     // 移动到 g11 的第二个图形
     simulateMouseEvent(element, 'mousemove', {
       clientX: clientX + 11,
@@ -1303,6 +1311,7 @@ describe('test graphic events', () => {
     expect(leaveCalled).eql(1);
     expect(leaveCalled1).eql(0);
   });
+
   it('destroy', () => {
     controller.destroy();
     expect(controller.canvas).eql(null);