fix(event): fix event type overlap problem

src/graph/controller/event.js

@@ -1,4 +1,5 @@
 const Util = require('../../util');
+const EventObject = require('@antv/g').Event;
 
 const EVENTS = [
   'click',
@@ -31,6 +32,10 @@ function getItemRoot(shape) {
   return shape;
 }
 
+function cloneEvent(e) {
+  return new EventObject(e.type, e, true, true);
+}
+
 class Event {
   constructor(graph) {
     this.graph = graph;
@@ -61,36 +66,40 @@ class Event {
     const graph = self.graph;
     const canvas = graph.get('canvas');
     const target = e.target;
+    const eventType = e.type;
 
     if (target === canvas) {
-      if (e.type === 'mousemove') {
+      if (eventType === 'mousemove') {
         self._handleMouseMove(e, 'canvas');
       }
-      graph.emit(e.type, e);
-      graph.emit('canvas:' + e.type, e);
+      e.target = e.currentTarget = canvas;
+      graph.emit(eventType, e);
+      graph.emit('canvas:' + eventType, e);
       return;
     }
-    // g的事件会冒泡，如果target不是canvas，可能会引起同个节点触发多次，需要另外判断
-    if (e.type === 'mouseenter' || e.type === 'mouseleave' || e.type === 'dragenter' || e.type === 'dragleave') {
-      return;
-    }
-    e.targetElement = target;
     const itemShape = getItemRoot(target);
-    if (!itemShape || itemShape === canvas) {
+    if (!itemShape) {
+      graph.emit(eventType, e);
       return;
     }
     const item = itemShape.get('item');
     const type = item.getType();
-    e.target = item;
-    graph.emit(e.type, e);
-    graph.emit(type + ':' + e.type, e);
-    if (e.type === 'dragstart') {
+    // 事件target是触发事件的Shape实例，事件currentTarget是触发事件的item实例
+    e.target = target;
+    e.currentTarget = item;
+    graph.emit(eventType, e);
+    graph.emit(type + ':' + eventType, e);
+    // g的事件会冒泡，如果target不是canvas，可能会引起同个节点触发多次，需要另外判断
+    if (eventType === 'mouseenter' || eventType === 'mouseleave' || eventType === 'dragenter' || eventType === 'dragleave') {
+      return;
+    }
+    if (eventType === 'dragstart') {
       self.dragging = true;
     }
-    if (e.type === 'dragend') {
+    if (eventType === 'dragend') {
       self.dragging = false;
     }
-    if (e.type === 'mousemove') {
+    if (eventType === 'mousemove') {
       self._handleMouseMove(e, type);
     }
   }
@@ -100,11 +109,13 @@ class Event {
   _handleMouseMove(e, type) {
     const self = this;
     const canvas = this.graph.get('canvas');
-    const item = e.target === canvas ? null : e.target;
+    const item = e.target === canvas ? null : e.currentTarget;
     const preItem = this.preItem;
+    // 避免e的type与触发的事件不同
+    e = cloneEvent(e);
     // 从前一个item直接移动到当前item，触发前一个item的leave事件
     if (preItem && preItem !== item) {
-      e.target = preItem;
+      e.currentTarget = preItem;
       if (self.dragging) {
         self._emitCustomEvent(preItem.getType(), 'dragleave', e);
       } else {
@@ -113,7 +124,7 @@ class Event {
     }
     // 从一个item或canvas移动到当前item，触发当前item的enter事件
     if (item && preItem !== item) {
-      e.target = item;
+      e.currentTarget = item;
       if (self.dragging) {
         self._emitCustomEvent(type, 'dragenter', e);
       } else {

test/unit/graph/controller/event-spec.js

@@ -51,7 +51,7 @@ describe('event', () => {
     const canvas = graph.get('canvas');
     const node = graph.addItem('node', { type: 'circle', color: '#ccc', style: { x: 50, y: 50, r: 20, lineWidth: 2 } });
     const shape = node.get('group').get('children')[0];
-    graph.on('node:mousedown', e => { target = e.target; });
+    graph.on('node:mousedown', e => { target = e.currentTarget; });
     canvas.emit('mousedown', { type: 'mousedown', target: shape });
     expect(target === node).to.be.true;
     target = null;
@@ -88,11 +88,11 @@ describe('event', () => {
     let leave = 0;
     graph.on('node:mouseenter', e => {
       enter++;
-      expect(e.target === node);
+      expect(e.currentTarget === node);
     });
     graph.on('node:mouseleave', e => {
       leave++;
-      expect(e.target === node);
+      expect(e.currentTarget === node);
     });
     const canvas = graph.get('canvas');
     const label = node.get('group').get('children')[0];
@@ -114,4 +114,26 @@ describe('event', () => {
     canvas.emit('mousemove', { type: 'mousemove', taregt: canvas });
     expect(leave).to.equal(1);
   });
+  it('event object overlap', () => {
+    let count = 0;
+    let triggered = false;
+    graph.removeEvent();
+    graph.clear();
+    const canvas = graph.get('canvas');
+    const node = graph.addItem('node', { x: 100, y: 100, size: 50, label: 'test' });
+    graph.on('node:mouseleave', e => {
+      triggered = true;
+      expect(e.type).to.equal('mouseleave');
+    });
+    graph.on('mousemove', e => {
+      count += 1;
+      expect(e.type).to.equal('mousemove');
+    });
+    canvas.emit('mousemove', { type: 'mousemove', target: node.get('keyShape') });
+    expect(count).to.equal(1);
+    expect(triggered).to.be.false;
+    canvas.emit('mousemove', { type: 'mousemove', target: canvas });
+    expect(count).to.equal(2);
+    expect(triggered).to.be.true;
+  });
 });