diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index c3f800069e..897971229d 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/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, + }); } }; diff --git a/packages/draw/README.md b/packages/draw/README.md new file mode 100644 index 0000000000..994ebcb15f --- /dev/null +++ b/packages/draw/README.md @@ -0,0 +1,11 @@ +# `draw` + +> TODO: description + +## Usage + +``` +const draw = require('draw'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/draw/__tests__/draw.test.js b/packages/draw/__tests__/draw.test.js new file mode 100644 index 0000000000..ff0eef32fd --- /dev/null +++ b/packages/draw/__tests__/draw.test.js @@ -0,0 +1,7 @@ +'use strict'; + +const draw = require('..'); + +describe('draw', () => { + it('needs tests'); +}); diff --git a/packages/draw/package.json b/packages/draw/package.json new file mode 100644 index 0000000000..55fea98718 --- /dev/null +++ b/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 ", + "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" +} diff --git a/packages/draw/tsconfig.build.json b/packages/draw/tsconfig.build.json new file mode 100644 index 0000000000..17f6c4525a --- /dev/null +++ b/packages/draw/tsconfig.build.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.build.json", + "compilerOptions": { + "declarationDir": "./es", + "rootDir": "./src", + "baseUrl": "./" + }, + "include": ["./src"] +} \ No newline at end of file diff --git a/stories/Draw/Components/DrawPolygon.tsx b/stories/Draw/Components/DrawPolygon.tsx index 9f2aee5883..10cf5f7f90 100644 --- a/stories/Draw/Components/DrawPolygon.tsx +++ b/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 (