fix pinching while touching markers (#9683)

* fix multi-finger gestures touching markers

Previously we were using e.targetTouches as the list of touches relevant
to the map. It contains only the touches that first touched the same
target. Touches that hit a marker have a different target.

This fixes uses e.touches and filters out touches who's target is not a
child of the map.

fix #9675

* update tests and add regression test

src/ui/handler/handler_util.js

@@ -2,7 +2,7 @@
 
 import assert from 'assert';
 
-export function indexTouches(touches: TouchList, points: Array<Point>) {
+export function indexTouches(touches: Array<Touch>, points: Array<Point>) {
     assert(touches.length === points.length);
     const obj = {};
     for (let i = 0; i < touches.length; i++) {

src/ui/handler/tap_drag_zoom.js

@@ -30,27 +30,27 @@ export default class TapDragZoomHandler {
         this._tap.reset();
     }
 
-    touchstart(e: TouchEvent, points: Array<Point>) {
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
         if (this._swipePoint) return;
 
         if (this._tapTime && e.timeStamp - this._tapTime > MAX_TAP_INTERVAL) {
             this.reset();
         }
 
         if (!this._tapTime) {
-            this._tap.touchstart(e, points);
-        } else if (e.targetTouches.length > 0) {
+            this._tap.touchstart(e, points, mapTouches);
+        } else if (mapTouches.length > 0) {
             this._swipePoint = points[0];
-            this._swipeTouch = e.targetTouches[0].identifier;
+            this._swipeTouch = mapTouches[0].identifier;
         }
 
     }
 
-    touchmove(e: TouchEvent, points: Array<Point>) {
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
         if (!this._tapTime) {
-            this._tap.touchmove(e, points);
+            this._tap.touchmove(e, points, mapTouches);
         } else if (this._swipePoint) {
-            if (e.targetTouches[0].identifier !== this._swipeTouch) {
+            if (mapTouches[0].identifier !== this._swipeTouch) {
                 return;
             }
 
@@ -67,14 +67,14 @@ export default class TapDragZoomHandler {
         }
     }
 
-    touchend(e: TouchEvent) {
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
         if (!this._tapTime) {
-            const point = this._tap.touchend(e);
+            const point = this._tap.touchend(e, points, mapTouches);
             if (point) {
                 this._tapTime = e.timeStamp;
             }
         } else if (this._swipePoint) {
-            if (e.targetTouches.length === 0) {
+            if (mapTouches.length === 0) {
                 this.reset();
             }
         }

src/ui/handler/tap_recognizer.js

@@ -35,9 +35,9 @@ export class SingleTapRecognizer {
         this.aborted = false;
     }
 
-    touchstart(e: TouchEvent, points: Array<Point>) {
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
 
-        if (this.centroid || e.targetTouches.length > this.numTouches) {
+        if (this.centroid || mapTouches.length > this.numTouches) {
             this.aborted = true;
         }
         if (this.aborted) {
@@ -48,16 +48,16 @@ export class SingleTapRecognizer {
             this.startTime = e.timeStamp;
         }
 
-        if (e.targetTouches.length === this.numTouches) {
+        if (mapTouches.length === this.numTouches) {
             this.centroid = getCentroid(points);
-            this.touches = indexTouches(e.targetTouches, points);
+            this.touches = indexTouches(mapTouches, points);
         }
     }
 
-    touchmove(e: TouchEvent, points: Array<Point>) {
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
         if (this.aborted || !this.centroid) return;
 
-        const newTouches = indexTouches(e.targetTouches, points);
+        const newTouches = indexTouches(mapTouches, points);
         for (const id in this.touches) {
             const prevPos = this.touches[id];
             const pos = newTouches[id];
@@ -67,12 +67,12 @@ export class SingleTapRecognizer {
         }
     }
 
-    touchend(e: TouchEvent) {
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
         if (!this.centroid || e.timeStamp - this.startTime > MAX_TOUCH_TIME) {
             this.aborted = true;
         }
 
-        if (e.targetTouches.length === 0) {
+        if (mapTouches.length === 0) {
             const centroid = !this.aborted && this.centroid;
             this.reset();
             if (centroid) return centroid;
@@ -102,16 +102,16 @@ export class TapRecognizer {
         this.singleTap.reset();
     }
 
-    touchstart(e: TouchEvent, points: Array<Point>) {
-        this.singleTap.touchstart(e, points);
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this.singleTap.touchstart(e, points, mapTouches);
     }
 
-    touchmove(e: TouchEvent, points: Array<Point>) {
-        this.singleTap.touchmove(e, points);
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this.singleTap.touchmove(e, points, mapTouches);
     }
 
-    touchend(e: TouchEvent) {
-        const tap = this.singleTap.touchend(e);
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        const tap = this.singleTap.touchend(e, points, mapTouches);
         if (tap) {
             const soonEnough = e.timeStamp - this.lastTime < MAX_TAP_INTERVAL;
             const closeEnough = !this.lastTap || this.lastTap.dist(tap) < MAX_DIST;

src/ui/handler/tap_zoom.js

@@ -31,19 +31,19 @@ export default class TapZoomHandler {
         this._zoomOut.reset();
     }
 
-    touchstart(e: TouchEvent, points: Array<Point>) {
-        this._zoomIn.touchstart(e, points);
-        this._zoomOut.touchstart(e, points);
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this._zoomIn.touchstart(e, points, mapTouches);
+        this._zoomOut.touchstart(e, points, mapTouches);
     }
 
-    touchmove(e: TouchEvent, points: Array<Point>) {
-        this._zoomIn.touchmove(e, points);
-        this._zoomOut.touchmove(e, points);
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this._zoomIn.touchmove(e, points, mapTouches);
+        this._zoomOut.touchmove(e, points, mapTouches);
     }
 
-    touchend(e: TouchEvent) {
-        const zoomInPoint = this._zoomIn.touchend(e);
-        const zoomOutPoint = this._zoomOut.touchend(e);
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        const zoomInPoint = this._zoomIn.touchend(e, points, mapTouches);
+        const zoomOutPoint = this._zoomOut.touchend(e, points, mapTouches);
 
         if (zoomInPoint) {
             this._active = true;

src/ui/handler/touch_pan.js

@@ -24,20 +24,20 @@ export default class TouchPanHandler {
         this._sum = new Point(0, 0);
     }
 
-    touchstart(e: TouchEvent, points: Array<Point>) {
-        return this._calculateTransform(e, points);
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        return this._calculateTransform(e, points, mapTouches);
     }
 
-    touchmove(e: TouchEvent, points: Array<Point>) {
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
         if (!this._active) return;
         e.preventDefault();
-        return this._calculateTransform(e, points);
+        return this._calculateTransform(e, points, mapTouches);
     }
 
-    touchend(e: TouchEvent, points: Array<Point>) {
-        this._calculateTransform(e, points);
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        this._calculateTransform(e, points, mapTouches);
 
-        if (this._active && e.targetTouches.length < this._minTouches) {
+        if (this._active && mapTouches.length < this._minTouches) {
             this.reset();
         }
     }
@@ -46,10 +46,10 @@ export default class TouchPanHandler {
         this.reset();
     }
 
-    _calculateTransform(e: TouchEvent, points: Array<Point>) {
-        if (e.targetTouches.length > 0) this._active = true;
+    _calculateTransform(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        if (mapTouches.length > 0) this._active = true;
 
-        const touches = indexTouches(e.targetTouches, points);
+        const touches = indexTouches(mapTouches, points);
 
         const touchPointSum = new Point(0, 0);
         const touchDeltaSum = new Point(0, 0);

src/ui/handler/touch_zoom_rotate.js

@@ -24,26 +24,28 @@ class TwoTouchHandler {
     _start(points: [Point, Point]) {} //eslint-disable-line
     _move(points: [Point, Point], pinchAround: Point, e: TouchEvent) { return {}; } //eslint-disable-line
 
-    touchstart(e: TouchEvent, points: Array<Point>) {
-        if (this._firstTwoTouches || e.targetTouches.length < 2) return;
+    touchstart(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
+        //console.log(e.target, e.targetTouches.length ? e.targetTouches[0].target : null);
+        //log('touchstart', points, e.target.innerHTML, e.targetTouches.length ? e.targetTouches[0].target.innerHTML: undefined);
+        if (this._firstTwoTouches || mapTouches.length < 2) return;
 
         this._firstTwoTouches = [
-            e.targetTouches[0].identifier,
-            e.targetTouches[1].identifier
+            mapTouches[0].identifier,
+            mapTouches[1].identifier
         ];
 
         // implemented by child classes
         this._start([points[0], points[1]]);
     }
 
-    touchmove(e: TouchEvent, points: Array<Point>) {
+    touchmove(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
         if (!this._firstTwoTouches) return;
 
         e.preventDefault();
 
         const [idA, idB] = this._firstTwoTouches;
-        const a = getTouchById(e, points, idA);
-        const b = getTouchById(e, points, idB);
+        const a = getTouchById(mapTouches, points, idA);
+        const b = getTouchById(mapTouches, points, idB);
         if (!a || !b) return;
         const pinchAround = this._aroundCenter ? null : a.add(b).div(2);
 
@@ -52,12 +54,12 @@ class TwoTouchHandler {
 
     }
 
-    touchend(e: TouchEvent, points: Array<Point>) {
+    touchend(e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) {
         if (!this._firstTwoTouches) return;
 
         const [idA, idB] = this._firstTwoTouches;
-        const a = getTouchById(e, points, idA);
-        const b = getTouchById(e, points, idB);
+        const a = getTouchById(mapTouches, points, idA);
+        const b = getTouchById(mapTouches, points, idB);
         if (a && b) return;
 
         if (this._active) DOM.suppressClick();
@@ -88,9 +90,9 @@ class TwoTouchHandler {
     }
 }
 
-function getTouchById(e: TouchEvent, points: Array<Point>, identifier: number) {
-    for (let i = 0; i < e.targetTouches.length; i++) {
-        if (e.targetTouches[i].identifier === identifier) return points[i];
+function getTouchById(mapTouches: Array<Touch>, points: Array<Point>, identifier: number) {
+    for (let i = 0; i < mapTouches.length; i++) {
+        if (mapTouches[i].identifier === identifier) return points[i];
     }
 }
 

src/ui/handler_manager.js

@@ -49,10 +49,10 @@ export interface Handler {
 
     // Handlers can optionally implement these methods.
     // They are called with dom events whenever those dom evens are received.
-    +touchstart?: (e: TouchEvent, points: Array<Point>) => HandlerResult | void;
-    +touchmove?: (e: TouchEvent, points: Array<Point>) => HandlerResult | void;
-    +touchend?: (e: TouchEvent, points: Array<Point>) => HandlerResult | void;
-    +touchcancel?: (e: TouchEvent, points: Array<Point>) => HandlerResult | void;
+    +touchstart?: (e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) => HandlerResult | void;
+    +touchmove?: (e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) => HandlerResult | void;
+    +touchend?: (e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) => HandlerResult | void;
+    +touchcancel?: (e: TouchEvent, points: Array<Point>, mapTouches: Array<Touch>) => HandlerResult | void;
     +mousedown?: (e: MouseEvent, point: Point) => HandlerResult | void;
     +mousemove?: (e: MouseEvent, point: Point) => HandlerResult | void;
     +mouseup?: (e: MouseEvent, point: Point) => HandlerResult | void;
@@ -277,6 +277,17 @@ class HandlerManager {
         this.handleEvent(e, `${e.type}Window`);
     }
 
+    _getMapTouches(touches: TouchList) {
+        const mapTouches = [];
+        for (const t of touches) {
+            const target = ((t.target: any): Node);
+            if (this._el.contains(target)) {
+                mapTouches.push(t);
+            }
+        }
+        return ((mapTouches: any): TouchList);
+    }
+
     handleEvent(e: InputEvent | RenderFrameEvent, eventName?: string) {
 
         if (e.type === 'blur') {
@@ -298,9 +309,8 @@ class HandlerManager {
         const eventsInProgress = {};
         const activeHandlers = {};
 
-        const points = e ? (e.targetTouches ?
-            DOM.touchPos(this._el, ((e: any): TouchEvent).targetTouches) :
-            DOM.mousePos(this._el, ((e: any): MouseEvent))) : null;
+        const mapTouches = e.touches ? this._getMapTouches(((e: any): TouchEvent).touches) : undefined;
+        const points = mapTouches ? DOM.touchPos(this._el, mapTouches) : DOM.mousePos(this._el, ((e: any): MouseEvent));
 
         for (const {handlerName, handler, allowed} of this._handlers) {
             if (!handler.isEnabled()) continue;
@@ -311,7 +321,7 @@ class HandlerManager {
 
             } else {
                 if ((handler: any)[eventName || e.type]) {
-                    data = (handler: any)[eventName || e.type](e, points);
+                    data = (handler: any)[eventName || e.type](e, points, mapTouches);
                     this.mergeHandlerResult(mergedHandlerResult, eventsInProgress, data, handlerName, inputEvent);
                     if (data && data.needsRenderFrame) {
                         this._triggerRenderFrame();

test/unit/ui/handler/dblclick_zoom.test.js

@@ -12,10 +12,10 @@ function createMap(t) {
 function simulateDoubleTap(map, delay = 100) {
     const canvas = map.getCanvas();
     return new Promise(resolve => {
-        simulate.touchstart(canvas, {targetTouches: [{clientX: 0, clientY: 0}]});
+        simulate.touchstart(canvas, {touches: [{target: canvas, clientX: 0, clientY: 0}]});
         simulate.touchend(canvas);
         setTimeout(() => {
-            simulate.touchstart(canvas, {targetTouches: [{clientX: 0, clientY: 0}]});
+            simulate.touchstart(canvas, {touches: [{target: canvas, clientX: 0, clientY: 0}]});
             simulate.touchend(canvas);
             map._renderTaskQueue.run();
             resolve();
@@ -122,7 +122,7 @@ test('DoubleClickZoomHandler zooms on the second touchend event of a double tap'
     map.on('zoomstart', zoom);
 
     const canvas = map.getCanvas();
-    const touchOptions = {targetTouches: [{clientX: 0.5, clientY: 0.5}]};
+    const touchOptions = {touches: [{target: canvas, clientX: 0.5, clientY: 0.5}]};
 
     simulate.touchstart(canvas, touchOptions);
     simulate.touchend(canvas);