mobile events (#921)

* feat: add mobile event list * feat: support gesture * feat: 优化事件信息 * fix: no consolelog * chore: keep g2 events names in list * feat: 统一所有图表event map生成方式 * fix: layer events * feat: add plot events test * feat: add swipe & pinch test * feat: add press & pan test * fix: lint * fix: add touch events test * feat: 完善layer事件信息 * fix: layer events types * feat: add event data test * fix: event test
antvis · Apr 20, 2020 · b4a8d47 · b4a8d47
1 parent b42d558
commit b4a8d47
Show file tree

Hide file tree

Showing 26 changed files with 759 additions and 203 deletions.
diff --git a/__tests__/unit/base/events-spec.ts b/__tests__/unit/base/events-spec.ts
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "lint-fix:examples": "prettier --write 'examples/**/*.{js,md}'",
     "lint-staged": "lint-staged",
     "test": "jest",
-    "test-live": "DEBUG_MODE=1 jest --watch ./__tests__",
+    "test-live": "DEBUG_MODE=1 jest --watch ./__tests__/unit/base/events-spec.ts",
     "coverage": "jest --coverage",
     "ci": "run-s lint build coverage",
     "compare-live": "node scripts/compare.js",

diff --git a/src/base/controller/canvas.ts b/src/base/controller/canvas.ts
@@ -44,7 +44,6 @@ export default class CanvasController {
     // got new width, height, re-render the plot
     this.width = width;
     this.height = height;
-
     this.plot.updateConfig({ width, height });
     this.plot.render();
   }, 300);

diff --git a/src/base/controller/event.ts b/src/base/controller/event.ts
@@ -19,8 +19,11 @@ interface IEventHandler {
 interface EventObj {
   x: number;
   y: number;
+  clientX: number;
+  clientY: number;
   target: any;
-  event: object;
+  data: any;
+  gEvent: object;
 }
 
 function isSameShape(shape1: IShape, shape2: IShape) {
@@ -40,14 +43,12 @@ function isPointInBBox(point: Point, bbox: BBox) {
 export default class EventController {
   private plot: BasePlot;
   private canvas: ICanvas;
-  private pixelRatio: number;
   private eventHandlers: IEventHandler[];
   private lastShape: any;
 
   constructor(cfg: ControllerConfig) {
     this.plot = cfg.plot;
     this.canvas = cfg.canvas;
-    this.pixelRatio = this.canvas.get('pixelRatio');
     this.eventHandlers = [];
   }
 
@@ -126,10 +127,15 @@ export default class EventController {
 
   private getEventObj(ev) {
     const obj = {
-      x: ev.x / this.pixelRatio,
-      y: ev.y / this.pixelRatio,
+      clientX: ev.clientX,
+      clientY: ev.clientY,
+      x: ev.x,
+      y: ev.y,
+      plot: this.plot,
+      data: ev.data ? ev.data.data : null,
+      canvas: this.canvas,
       target: ev.target,
-      event: ev.event, // g事件的event
+      gEvent: ev, // g事件的event
     };
     return obj;
   }

diff --git a/src/base/view-layer.ts b/src/base/view-layer.ts
@@ -14,7 +14,7 @@ import {
   findIndex,
   isString,
 } from '@antv/util';
-import { View, BBox, Geometry, VIEW_LIFE_CIRCLE } from '../dependents';
+import { View, BBox, Geometry, VIEW_LIFE_CIRCLE, registerComponentController, Gestrue } from '../dependents';
 import TextDescription from '../components/description';
 import BaseLabel, { LabelComponentConfig, getLabelComponent } from '../components/label/base';
 import { getComponent } from '../components/factory';
@@ -268,9 +268,6 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
     if (!this.view || this.view.destroyed) {
       return;
     }
-    if (this.options.padding !== 'auto') {
-      this.parseEvents();
-    }
   }
 
   public afterRender() {
@@ -283,7 +280,10 @@ export default abstract class ViewLayer<T extends ViewLayerConfig = ViewLayerCon
     if (options.defaultState && padding !== 'auto') {
       this.stateController.defaultStates(options.defaultState);
     }
-
+    if (this.options.padding !== 'auto') {
+      registerComponentController('gesture', Gestrue);
+      this.parseEvents();
+    }
     /** autopadding */
     if (padding === 'auto') {
       this.paddingController.processAutoPadding();

diff --git a/src/dependents.ts b/src/dependents.ts
@@ -15,8 +15,11 @@ export {
   getTheme,
   Util,
   getShapeFactory,
+  registerComponentController,
 } from '@antv/g2';
 export { VIEW_LIFE_CIRCLE, COMPONENT_TYPE, FIELD_ORIGIN } from '@antv/g2/lib/constant';
+import Gestrue from '@antv/g2/lib/chart/controller/gesture';
+export { Gestrue };
 export { MarkerSymbols } from '@antv/g2/lib/util/marker';
 export {
   Datum,

diff --git a/src/plots/area/event.ts b/src/plots/area/event.ts
@@ -1,33 +1,14 @@
 import { assign } from '@antv/util';
-import { EVENT_MAP, IEventmap, onEvent } from '../../util/event';
+import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
-const SHAPE_EVENT_MAP: IEventmap = {
-  onAreaClick: 'area:click',
-  onAreaDblclick: 'area:dblclick',
-  onAreaMousemove: 'area:mousemove',
-  onAreaMouseenter: 'area:mouseenter',
-  onAreaMouseleave: 'area:mouseleave',
-  onAreaMousedown: 'area:mousedown',
-  onAreaMouseup: 'area:mouseup',
-  onAreaContextmenu: 'area:contextmenu',
-  onLineClick: 'line:click',
-  onLineDblclick: 'line:dblclick',
-  onLineMousemove: 'line:mousemove',
-  onLineMouseenter: 'line:mouseenter',
-  onLineMouseleave: 'line:mouseleave',
-  onLineMousedown: 'line:mousedown',
-  onLineMouseup: 'line:mouseup',
-  onLineContextmenu: 'line:contextmenu',
-  onPointClick: 'point:click',
-  onPointDblclick: 'point:dblclick',
-  onPointMousemove: 'point:mousemove',
-  onPointMouseenter: 'point:mouseenter',
-  onPointMouseleave: 'point:mouseleave',
-  onPointMousedown: 'point:mousedown',
-  onPointMouseup: 'point:mouseup',
-  onPointContextmenu: 'point:contextmenu',
+const componentMap = {
+  area: 'area',
+  line: 'line',
+  point: 'point',
 };
 
+const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);
+
 assign(EVENT_MAP, SHAPE_EVENT_MAP);
 
 export { EVENT_MAP, onEvent };
diff --git a/src/plots/bar/event.ts b/src/plots/bar/event.ts
@@ -1,17 +1,12 @@
 import { assign } from '@antv/util';
-import { EVENT_MAP, IEventmap, onEvent } from '../../util/event';
+import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
-const SHAPE_EVENT_MAP: IEventmap = {
-  onBarClick: 'interval:click',
-  onBarDblclick: 'interval:dblclick',
-  onBarMousemove: 'interval:mousemove',
-  onBarMouseenter: 'interval:mouseenter',
-  onBarMouseleave: 'interval:mouseleave',
-  onBarMousedown: 'interval:mousedown',
-  onBarMouseup: 'interval:mouseup',
-  onBarContextmenu: 'interval:contextmenu',
+const componentMap = {
+  bar: 'interval',
 };
 
+const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);
+
 assign(EVENT_MAP, SHAPE_EVENT_MAP);
 
 export { EVENT_MAP, onEvent };
diff --git a/src/plots/bullet/event.ts b/src/plots/bullet/event.ts
@@ -2,8 +2,8 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Bullet: 'interval',
-  BulletTarget: 'bullet-target',
+  bullet: 'interval',
+  bulletTarget: 'bullet-target',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/calendar/event.ts b/src/plots/calendar/event.ts
@@ -2,7 +2,7 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Rect: 'polygon',
+  rect: 'polygon',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/column/event.ts b/src/plots/column/event.ts
@@ -2,7 +2,7 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Column: 'interval',
+  column: 'interval',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/density-heatmap/event.ts b/src/plots/density-heatmap/event.ts
@@ -2,9 +2,9 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Heatmap: 'heatmap',
-  LegendLabel: 'legend-label',
-  HeatmapBackground: 'heatmap-background',
+  heatmap: 'heatmap',
+  legendLabel: 'legend-label',
+  heatmapBackground: 'heatmap-background',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/donut/event.ts b/src/plots/donut/event.ts
@@ -2,7 +2,7 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Ring: 'interval',
+  ring: 'interval',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/funnel/event.ts b/src/plots/funnel/event.ts
@@ -1,17 +1,12 @@
 import { assign } from '@antv/util';
-import { EVENT_MAP, IEventmap, onEvent } from '../../util/event';
+import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
-const SHAPE_EVENT_MAP: IEventmap = {
-  onBarClick: 'interval:click',
-  onBarDblclick: 'interval:dblclick',
-  onBarMousemove: 'interval:mousemove',
-  onBarMouseenter: 'interval:mouseenter',
-  onBarMouseleave: 'interval:mouseleave',
-  onBarMousedown: 'interval:mousedown',
-  onBarMouseup: 'interval:mouseup',
-  onBarContextmenu: 'interval:contextmenu',
+const componentMap = {
+  funnel: 'interval',
 };
 
+const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);
+
 assign(EVENT_MAP, SHAPE_EVENT_MAP);
 
 export { EVENT_MAP, onEvent };
diff --git a/src/plots/gauge/event.ts b/src/plots/gauge/event.ts
@@ -2,8 +2,8 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Range: 'point',
-  Statistic: 'annotation-text',
+  range: 'point',
+  statistic: 'annotation-text',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/heatmap/event.ts b/src/plots/heatmap/event.ts
@@ -2,8 +2,8 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Rect: 'polygon',
-  LegendLabel: 'legend-label',
+  rect: 'polygon',
+  legendLabel: 'legend-label',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/line/event.ts b/src/plots/line/event.ts
@@ -2,8 +2,8 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Line: 'line',
-  Point: 'point',
+  line: 'line',
+  point: 'point',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/liquid/event.ts b/src/plots/liquid/event.ts
@@ -2,8 +2,8 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Liquid: 'intervl',
-  Statistic: 'annotation-text',
+  liquid: 'intervl',
+  statistic: 'annotation-text',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/pie/event.ts b/src/plots/pie/event.ts
@@ -2,7 +2,7 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Pie: 'interval',
+  pie: 'interval',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/radar/event.ts b/src/plots/radar/event.ts
@@ -6,9 +6,9 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Area: 'area',
-  Line: 'line',
-  Point: 'point',
+  area: 'area',
+  line: 'line',
+  point: 'point',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/rose/event.ts b/src/plots/rose/event.ts
@@ -2,7 +2,7 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Rose: 'interval',
+  rose: 'interval',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/scatter/event.ts b/src/plots/scatter/event.ts
@@ -2,12 +2,12 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Point: 'point',
-  Trendline: 'trendline',
-  Confidence: 'confidence',
-  Quadrant: 'quadrant',
-  QuadrantLabel: 'quadrant-label',
-  QuadrantLine: 'quadrant-line',
+  point: 'point',
+  trendline: 'trendline',
+  confidence: 'confidence',
+  quadrant: 'quadrant',
+  quadrantLabel: 'quadrant-label',
+  quadrantLine: 'quadrant-line',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/plots/treemap/event.ts b/src/plots/treemap/event.ts
@@ -2,8 +2,8 @@ import { assign } from '@antv/util';
 import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
 const componentMap = {
-  Rect: 'polygon',
-  Breadcrumb: 'breadcrumb',
+  rect: 'polygon',
+  breadcrumb: 'breadcrumb',
 };
 
 const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);

diff --git a/src/sparkline/progress/event.ts b/src/sparkline/progress/event.ts
@@ -1,17 +1,12 @@
 import { assign } from '@antv/util';
-import { EVENT_MAP, IEventmap, onEvent } from '../../util/event';
+import { getEventMap, 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: 'progress:mouseenter',
-  onProgressMouseleave: 'progress:mouseleave',
-  onProgressContextmenu: 'interval:contextmenu',
+const componentMap = {
+  progress: 'interval',
 };
 
+const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);
+
 assign(EVENT_MAP, SHAPE_EVENT_MAP);
 
 export { EVENT_MAP, onEvent };
diff --git a/src/sparkline/ring-progress/event.ts b/src/sparkline/ring-progress/event.ts
@@ -1,17 +1,12 @@
 import { assign } from '@antv/util';
-import { EVENT_MAP, IEventmap, onEvent } from '../../util/event';
+import { getEventMap, EVENT_MAP, IEventmap, onEvent } from '../../util/event';
 
-const SHAPE_EVENT_MAP: IEventmap = {
-  onRingProgressClick: 'interval:click',
-  onRingProgressDblclick: 'interval:dblclick',
-  onRingProgressMousemove: 'interval:mousemove',
-  onRingProgressMousedown: 'interval:mousedown',
-  onRingProgressMouseup: 'interval:mouseup',
-  onRingProgressMouseenter: 'interval:mouseenter',
-  onRingProgressMouseleave: 'interval:mouseleave',
-  onRingProgressContextmenu: 'interval:contextmenu',
+const componentMap = {
+  ringProgress: 'interval',
 };
 
+const SHAPE_EVENT_MAP: IEventmap = getEventMap(componentMap);
+
 assign(EVENT_MAP, SHAPE_EVENT_MAP);
 
 export { EVENT_MAP, onEvent };