feat: 自定义组件的mouseenter & mouseleave事件分发

antvis · Dec 4, 2019 · 04c6894 · 04c6894
1 parent 219ec11
commit 04c6894
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/src/base/controller/event.ts b/src/base/controller/event.ts
@@ -1,16 +1,24 @@
 import * as _ from '@antv/util';
-import { Canvas } from '@antv/g';
+import { Canvas, Shape } from '@antv/g';
 import BasePlot from '../plot';
 
 interface ControllerConfig {
   canvas: Canvas;
   plot: BasePlot;
 }
 
+function isSameShape(shape1: Shape, shape2: Shape) {
+  if (shape1 && shape2 && shape1 === shape2) {
+    return true;
+  }
+  return false;
+}
+
 export default class EventController {
   private plot: BasePlot;
   private canvas: Canvas;
   private eventHandlers: any[];
+  private lastShape: Shape;
 
   constructor(cfg: ControllerConfig) {
     this.plot = cfg.plot;
@@ -20,7 +28,7 @@ export default class EventController {
 
   public bindEvents() {
     this.addEvent(this.canvas, 'mousedown', _.wrapBehavior(this, 'onEvents'));
-    this.addEvent(this.canvas, 'mousemove', _.wrapBehavior(this, 'onEvents'));
+    this.addEvent(this.canvas, 'mousemove', _.wrapBehavior(this, 'onMove'));
     this.addEvent(this.canvas, 'mouseup', _.wrapBehavior(this, 'onEvents'));
     this.addEvent(this.canvas, 'click', _.wrapBehavior(this, 'onEvents'));
     this.addEvent(this.canvas, 'dblclick', _.wrapBehavior(this, 'onEvents'));
@@ -42,6 +50,23 @@ export default class EventController {
     this.plot.emit(`${ev.type}`, ev);
   }
 
+  private onMove(ev) {
+    const { target } = ev;
+    // shape的mouseenter, mouseleave和mousemove事件
+    if (target.isShape && !this.isShapeInView(target) && target.name) {
+      this.plot.emit(`${target.name}:${ev.type}`, ev);
+      // mouseleave & mouseenter
+      if (this.lastShape && !isSameShape(target, this.lastShape)) {
+        if (this.lastShape) {
+          this.plot.emit(`${this.lastShape.name}:mouseleave`, ev);
+        }
+        this.plot.emit(`${target.name}:mouseenter`, ev);
+      }
+      this.lastShape = target;
+    }
+    this.plot.emit('mousemove', ev);
+  }
+
   private isShapeInView(shape) {
     const groupName = ['frontgroundGroup', 'backgroundGroup', 'panelGroup'];
     let parent = shape.get('parent');

diff --git a/src/base/plot.ts b/src/base/plot.ts
@@ -223,9 +223,10 @@ export default class BasePlot<T extends PlotConfig = PlotConfig> extends EventEm
   }
 
   protected parseEvents(props) {
+    const eventsName = _.keys(CANVAS_EVENT_MAP);
     if (props.events) {
       _.each(props.events, (e, k) => {
-        if (_.contains(k, 'Plot') && _.isFunction(e)) {
+        if (_.contains(eventsName, k) && _.isFunction(e)) {
           const eventName = CANVAS_EVENT_MAP[k] || k;
           const handler = e;
           this.on(eventName, handler);

diff --git a/src/util/event.ts b/src/util/event.ts
@@ -41,6 +41,24 @@ const CANVAS_EVENT_MAP = {
   onPlotMouseenter: 'mouseenter',
   onPlotMouseleave: 'mouseleave',
   onPlotContextmenu: 'contextmenu',
+
+  onTitleClick: 'title:click',
+  onTitleDblClick: 'title:dblclick',
+  onTitleMousemove: 'title:mousemove',
+  onTitleMousedown: 'title:mousedown',
+  onTitleMouseup: 'title:mouseup',
+  onTitleMouseenter: 'title:mouseenter',
+  onTitleMouseleave: 'title:mouseleave',
+  onTitleContextmenu: 'title:contextmenu',
+
+  onDescriptionClick: 'description:click',
+  onDescriptionDblClick: 'description:dblclick',
+  onDescriptionMousemove: 'description:mousemove',
+  onDescriptionMousedown: 'description:mousedown',
+  onDescriptionMouseup: 'description:mouseup',
+  onDescriptionMouseenter: 'description:mouseenter',
+  onDescriptionMouseleave: 'description:mouseleave',
+  onDescriptionContextmenu: 'description:contextmenu',
 };
 
 type Handler = (...__: any[]) => {};