fix: mouseenter & mouseleave event trigger by mask

antvis · Dec 9, 2019 · 63253c6 · 63253c6
1 parent 2950739
commit 63253c6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/src/tiny-plots/progress/event.ts b/src/tiny-plots/progress/event.ts
@@ -7,8 +7,8 @@ const SHAPE_EVENT_MAP: IEventmap = {
   onProgressMousemove: 'interval:mousemove',
   onProgressMousedown: 'interval:mousedown',
   onProgressMouseup: 'interval:mouseup',
-  onProgressMouseenter: 'interval:mouseenter',
-  onProgressMouseleave: 'interval:mouseleave',
+  onProgressMouseenter: 'progress:mouseenter',
+  onProgressMouseleave: 'progress:mouseleave',
   onProgressContextmenu: 'interval:contextmenu',
 };
 

diff --git a/src/tiny-plots/progress/layer.ts b/src/tiny-plots/progress/layer.ts
@@ -5,6 +5,7 @@ import { getGeom } from '../../geoms/factory';
 import TinyLayer, { TinyViewConfig } from '../tiny-layer';
 import Marker, { MarkerConfig } from './component/marker';
 import * as EventParser from './event';
+import { EVENT_MAP } from './event';
 
 export interface ProgressViewConfig extends TinyViewConfig {
   stackField?: number;
@@ -92,18 +93,33 @@ export default class ProgressLayer<T extends ProgressLayerConfig = ProgressLayer
       });
     }
 
-    this.view.on('interval:mouseenter', (ev) => {
+    const progressContainer = this.view.get('elements')[0].get('container');
+    const bbox = progressContainer.getBBox();
+    const rect = progressContainer.addShape('rect', {
+      attrs: {
+        width: bbox.width,
+        height: bbox.height,
+        x: bbox.minX,
+        y: bbox.minY,
+        fill: 'rgba(0,0,0,0)',
+      },
+    });
+    this.canvas.draw();
+
+    rect.on('mouseenter', (ev) => {
       this.isEntered = true;
+      this.view.emit('progress:mouseenter', ev);
     });
 
-    this.view.on('interval:mouseleave', (ev) => {
+    rect.on('mouseleave', (ev) => {
       this.isEntered = false;
+      this.view.emit('progress:mouseleave', ev);
     });
 
     const canvasDom = this.canvas.get('canvasDOM');
     canvasDom.addEventListener('mouseleave', (ev) => {
       if (this.isEntered) {
-        this.view.emit('initerval:mouseleave', ev);
+        this.view.emit('progress:mouseleave', ev);
         this.isEntered = false;
       }
     });

diff --git a/src/tiny-plots/ring-progress/event.ts b/src/tiny-plots/ring-progress/event.ts
@@ -2,14 +2,14 @@ import * as _ from '@antv/util';
 import { EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const SHAPE_EVENT_MAP: IEventmap = {
-  onProgressClick: 'interval:click',
-  onProgressDblclick: 'interval:dblclick',
-  onProgressMousemove: 'interval:mousemove',
-  onProgressMousedown: 'interval:mousedown',
-  onProgressMouseup: 'interval:mouseup',
-  onProgressMouseenter: 'interval:mouseenter',
-  onProgressMouseleave: 'interval:mouseleave',
-  onProgressContextmenu: 'interval:contextmenu',
+  onRingProgressClick: 'interval:click',
+  onRingProgressDblclick: 'interval:dblclick',
+  onRingProgressMousemove: 'interval:mousemove',
+  onRingProgressMousedown: 'interval:mousedown',
+  onRingProgressMouseup: 'interval:mouseup',
+  onRingProgressMouseenter: 'interval:mouseenter',
+  onRingProgressMouseleave: 'interval:mouseleave',
+  onRingProgressContextmenu: 'interval:contextmenu',
 };
 
 _.assign(EVENT_MAP, SHAPE_EVENT_MAP);