fix #9676, fire touchmove event while handlers are active (#9685)

mapbox · May 14, 2020 · 0682d5a · 0682d5a
1 parent 8f1e151
commit 0682d5a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/src/ui/handler/map_event.js b/src/ui/handler/map_event.js
@@ -68,6 +68,10 @@ export class MapEventHandler {
         return this._firePreventable(new MapTouchEvent(e.type, this._map, e));
     }
 
+    touchmove(e: TouchEvent) {
+        this._map.fire(new MapTouchEvent(e.type, this._map, e));
+    }
+
     touchend(e: TouchEvent) {
         this._map.fire(new MapTouchEvent(e.type, this._map, e));
     }
@@ -114,11 +118,6 @@ export class BlockableMapEventHandler {
         this._map.fire(new MapMouseEvent(e.type, this._map, e));
     }
 
-    touchmove(e: TouchEvent) {
-        // touchmove map events should not be fired when interaction handlers (pan, rotate, etc) are active
-        this._map.fire(new MapTouchEvent(e.type, this._map, e));
-    }
-
     mousedown() {
         this._delayContextMenu = true;
     }

diff --git a/test/unit/ui/handler/map_event.test.js b/test/unit/ui/handler/map_event.test.js
@@ -29,7 +29,6 @@ test('MapEvent handler fires touch events with correct values', (t) => {
     t.deepEqual(touchstart.getCall(0).args[0].point, {x: 0, y: 50});
     t.equal(touchmove.callCount, 0);
     t.equal(touchend.callCount, 0);
-    console.log(touchstart);
 
     simulate.touchmove(map.getCanvas(), {touches: touchesMove, targetTouches: touchesMove});
     t.equal(touchstart.callCount, 1);
@@ -46,3 +45,47 @@ test('MapEvent handler fires touch events with correct values', (t) => {
     map.remove();
     t.end();
 });
+
+test('MapEvent handler fires touchmove even while drag handler is active', (t) => {
+    const map = createMap(t);
+    const target = map.getCanvas();
+    map.dragPan.enable();
+
+    const touchstart = t.spy();
+    const touchmove = t.spy();
+    const touchend = t.spy();
+    const drag = t.spy();
+
+    map.on('touchstart', touchstart);
+    map.on('touchmove', touchmove);
+    map.on('touchend', touchend);
+    map.on('drag', drag);
+
+    const touchesStart = [{target, identifier: 1, clientX: 0, clientY: 50}];
+    const touchesMove = [{target, identifier: 1, clientX: 0, clientY: 60}];
+    const touchesEnd = [{target, identifier: 1, clientX: 0, clientY: 60}];
+
+    simulate.touchstart(map.getCanvas(), {touches: touchesStart, targetTouches: touchesStart});
+    t.equal(touchstart.callCount, 1);
+    t.deepEqual(touchstart.getCall(0).args[0].point, {x: 0, y: 50});
+    t.equal(touchmove.callCount, 0);
+    t.equal(touchend.callCount, 0);
+
+    simulate.touchmove(map.getCanvas(), {touches: touchesMove, targetTouches: touchesMove});
+    t.equal(touchstart.callCount, 1);
+    t.equal(touchmove.callCount, 1);
+    t.deepEqual(touchmove.getCall(0).args[0].point, {x: 0, y: 60});
+    t.equal(touchend.callCount, 0);
+
+    simulate.touchend(map.getCanvas(), {touches: [], targetTouches: [], changedTouches: touchesEnd});
+    t.equal(touchstart.callCount, 1);
+    t.equal(touchmove.callCount, 1);
+    t.equal(touchend.callCount, 1);
+    t.deepEqual(touchend.getCall(0).args[0].point, {x: 0, y: 60});
+
+    map._renderTaskQueue.run();
+    t.equal(drag.callCount, 1);
+
+    map.remove();
+    t.end();
+});