Merge pull request #255 from antvis/ios_12_event

fix: ios touchstart && double touch
This commit is contained in:
@thinkinggis 2020-03-15 22:20:46 +08:00 committed by GitHub
commit bc4d5a0154
1 changed files with 33 additions and 23 deletions

View File

@ -3,7 +3,7 @@ import Hammer from 'hammerjs';
import { inject, injectable } from 'inversify'; import { inject, injectable } from 'inversify';
import { TYPES } from '../../types'; import { TYPES } from '../../types';
import { ILogService } from '../log/ILogService'; import { ILogService } from '../log/ILogService';
import { IMapService } from '../map/IMapService'; import { ILngLat, IMapService } from '../map/IMapService';
import { IInteractionService, InteractionEvent } from './IInteractionService'; import { IInteractionService, InteractionEvent } from './IInteractionService';
/** /**
* L7 canvas WebGL Context * L7 canvas WebGL Context
@ -79,6 +79,7 @@ export default class InteractionService extends EventEmitter
const $containter = this.mapService.getMapContainer(); const $containter = this.mapService.getMapContainer();
if ($containter) { if ($containter) {
$containter.removeEventListener('mousemove', this.onHover); $containter.removeEventListener('mousemove', this.onHover);
$containter.removeEventListener('touchstart', this.onTouch);
$containter.removeEventListener('click', this.onHover); $containter.removeEventListener('click', this.onHover);
$containter.removeEventListener('mousedown', this.onHover); $containter.removeEventListener('mousedown', this.onHover);
$containter.removeEventListener('mouseup', this.onHover); $containter.removeEventListener('mouseup', this.onHover);
@ -106,33 +107,42 @@ export default class InteractionService extends EventEmitter
const lngLat = this.mapService.containerToLngLat([x, y]); const lngLat = this.mapService.containerToLngLat([x, y]);
if (type === 'click') { if (type === 'click') {
const nowTime = new Date().getTime(); if ('ontouchstart' in document.documentElement === true) {
if ( return;
nowTime - this.lastClickTime < 500 &&
Math.abs(this.lastClickXY[0] - x) < 10 &&
Math.abs(this.lastClickXY[1] - y) < 10
) {
this.lastClickTime = 0;
this.lastClickXY = [-1, -1];
if (this.clickTimer) {
clearTimeout(this.clickTimer);
}
type = 'dblclick';
this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
} else {
this.lastClickTime = nowTime;
this.lastClickXY = [x, y];
// @ts-ignore
this.clickTimer = setTimeout(() => {
type = 'click';
this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
}, 500);
} }
this.isDoubleTap(x, y, lngLat);
return; return;
} }
if (type === 'touch') { if (type === 'touch') {
type = 'click'; this.isDoubleTap(x, y, lngLat);
return;
} }
this.emit(InteractionEvent.Hover, { x, y, lngLat, type }); this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
}; };
private isDoubleTap(x: number, y: number, lngLat: ILngLat) {
const nowTime = new Date().getTime();
let type = 'click';
if (
nowTime - this.lastClickTime < 500 &&
Math.abs(this.lastClickXY[0] - x) < 10 &&
Math.abs(this.lastClickXY[1] - y) < 10
) {
this.lastClickTime = 0;
this.lastClickXY = [-1, -1];
if (this.clickTimer) {
clearTimeout(this.clickTimer);
}
type = 'dblclick';
this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
} else {
this.lastClickTime = nowTime;
this.lastClickXY = [x, y];
// @ts-ignore
this.clickTimer = setTimeout(() => {
type = 'click';
this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
}, 500);
}
}
} }