improvement: click & doubclick use hammer

packages/core/src/services/interaction/InteractionService.ts

@@ -53,20 +53,21 @@ export default class InteractionService extends EventEmitter
   private addEventListenerOnMap() {
     const $containter = this.mapService.getMapContainer();
     if ($containter) {
-      const hammertime = new Hammer($containter);
-      hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
-      hammertime.get('pinch').set({ enable: true });
-
-      // hammertime.on('panstart', this.onPanstart);
-      // hammertime.on('panmove', this.onPanmove);
-      // hammertime.on('panend', this.onPanend);
-      // hammertime.on('pinch', this.onPinch);
-      $containter.addEventListener('touchstart', this.onTouch);
+      const hammertime = new Hammer.Manager($containter);
+      hammertime.add(new Hammer.Tap({ event: 'dblclick', taps: 2 }));
+      hammertime.add(new Hammer.Tap({ event: 'click' }));
+      hammertime.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
+      hammertime.add(new Hammer.Press({}));
+      // hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
+      // hammertime.get('pinch').set({ enable: true });
+      hammertime.on('dblclick click', this.onHammer);
+      // hammertime.on('panstart panmove panend', this.onHammer);
+      // hammertime.on('press pressup', this.onHammer);
+      // $containter.addEventListener('touchstart', this.onTouch);
       $containter.addEventListener('mousemove', this.onHover);
-      $containter.addEventListener('click', this.onHover);
+      // $containter.addEventListener('click', this.onHover);
       $containter.addEventListener('mousedown', this.onHover);
       $containter.addEventListener('mouseup', this.onHover);
-      // $containter.addEventListener('dblclick', this.onHover);
       $containter.addEventListener('contextmenu', this.onHover);
 
       this.hammertime = hammertime;
@@ -79,24 +80,45 @@ export default class InteractionService extends EventEmitter
     const $containter = this.mapService.getMapContainer();
     if ($containter) {
       $containter.removeEventListener('mousemove', this.onHover);
-      $containter.removeEventListener('touchstart', this.onTouch);
-      $containter.removeEventListener('click', this.onHover);
+      this.hammertime.off('dblclick click', this.onHammer);
+      // $containter.removeEventListener('touchstart', this.onTouch);
+      // $containter.removeEventListener('click', this.onHover);
       $containter.removeEventListener('mousedown', this.onHover);
       $containter.removeEventListener('mouseup', this.onHover);
       // $containter.removeEventListener('dblclick', this.onHover);
       $containter.removeEventListener('contextmenu', this.onHover);
     }
   }
+  private onHammer = (target: HammerInput) => {
+    const { type, pointerType } = target;
+    let clientX;
+    let clientY;
+    if (pointerType === 'touch') {
+      clientY = target.pointers[0].clientY;
+      clientX = target.pointers[0].clientX;
+    } else {
+      clientY = (target.srcEvent as MouseEvent).y;
+      clientX = (target.srcEvent as MouseEvent).x;
+    }
+
+    const $containter = this.mapService.getMapContainer();
+    if ($containter) {
+      const { top, left } = $containter.getBoundingClientRect();
+      clientX -= left;
+      clientY -= top;
+    }
+    const lngLat = this.mapService.containerToLngLat([clientX, clientY]);
+    this.emit(InteractionEvent.Hover, { x: clientX, y: clientY, lngLat, type });
+  };
   private onTouch = (target: TouchEvent) => {
-    target.stopPropagation();
     if (target.targetTouches.length > 1) {
       return;
     }
     const touch = target.targetTouches[0];
     // @ts-ignore
     this.onHover({
-      x: touch.pageX,
-      y: touch.pageY,
+      x: touch.clientX,
+      y: touch.clientY,
       type: 'touch',
     });
   };
@@ -122,7 +144,12 @@ export default class InteractionService extends EventEmitter
       return;
     }
     if (type !== 'click' || type !== 'click') {
-      this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
+      this.emit(InteractionEvent.Hover, {
+        x,
+        y,
+        lngLat,
+        type,
+      });
     }
   };
 

packages/draw/README.md

@@ -0,0 +1,11 @@
+# `draw`
+
+> TODO: description
+
+## Usage
+
+```
+const draw = require('draw');
+
+// TODO: DEMONSTRATE API
+```

packages/draw/__tests__/draw.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const draw = require('..');
+
+describe('draw', () => {
+    it('needs tests');
+});

packages/draw/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@antv/l7-draw",
+  "version": "2.1.3",
+  "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
+  "keywords": [],
+  "author": "thinkinggis <lzx199065@gmail.com>",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "sideEffects": true,
+  "files": [
+    "lib",
+    "es",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antvis/L7.git"
+  },
+  "scripts": {
+    "tsc": "tsc --project tsconfig.build.json",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "lint:ts": "run-p -c lint:ts-*",
+    "test": "jest"
+  },
+  "bugs": {
+    "url": "https://github.com/antvis/L7/issues"
+  },
+  "homepage": "https://github.com/antvis/L7#readme"
+}

packages/draw/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "declarationDir": "./es",
+    "rootDir": "./src",
+    "baseUrl": "./"
+  },
+  "include": ["./src"]
+}

stories/Draw/Components/DrawPolygon.tsx

@@ -1,5 +1,5 @@
 import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7';
-import { Mapbox, GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 function convertRGB2Hex(rgb: number[]) {
@@ -83,6 +83,12 @@ export default class MultiPolygon extends React.Component {
       .style({
         opacity: 0.1,
       });
+    layer.on('click', (e) => {
+      console.log(e);
+    });
+    layer.on('dblclick', (e) => {
+      console.log(e);
+    });
     const line = new PolygonLayer()
       .source(data)
       .shape('line')
@@ -116,6 +122,7 @@ export default class MultiPolygon extends React.Component {
     scene.addLayer(this.addPoint(data2));
     scene.addLayer(this.addActivePoint());
     scene.addLayer(this.addMidPoint(data2));
+    this.scene = scene;
   }
   public render() {
     return (