Improve single vs. multi-touch zoom & pan interaction (#7196)

src/ui/handler/drag_pan.js

@@ -47,6 +47,7 @@ class DragPanHandler {
             '_onMove',
             '_onMouseUp',
             '_onTouchEnd',
+            '_onMultiTouchEnd',
             '_onBlur',
             '_onDragFrame'
         ], this);
@@ -125,8 +126,18 @@ class DragPanHandler {
     }
 
     onTouchStart(e: TouchEvent) {
-        if (this._state !== 'enabled') return;
-        if (e.touches.length > 1) return;
+        if (!this.isEnabled()) return;
+        if (e.touches && e.touches.length > 1) { // multi-finger touch
+            // Listen for the multi-touch end in case it's reduced to a single touch
+            DOM.addEventListener(window.document, 'touchend', this._onMultiTouchEnd);
+
+            // If we're already dragging with one finger and the user adds another finger(s),
+            // let TouchZoomRotateHandler handler take over if it's enabled by stopping the drag
+            if ((this._state === 'pending' || this._state === 'active') && this._map.touchZoomRotate.isEnabled()) {
+                this._onMultiTouchStart(e);
+            }
+            return;
+        }
 
         // Bind window-level event listeners for touchmove/end events. In the absence of
         // the pointer capture API, which is not supported by all necessary platforms,
@@ -231,7 +242,29 @@ class DragPanHandler {
         }
     }
 
-    _onBlur(e: FocusEvent) {
+    _onMultiTouchEnd(e: TouchEvent) {
+        // A multi-finger touch is ending; decide whether to activate dragging
+
+        if (e.touches && e.touches.length > 1) return; // there are still multiple fingers touching; wait
+
+        DOM.removeEventListener(window.document, 'touchend', this._onMultiTouchEnd);
+
+        if (!e.touches || e.touches.length === 0) return; // all fingers were removed at once; nothing left to do
+
+        // Back to single-touch (e.touches.length === 1); treat this like a touchstart & activate drag
+
+        // Bind window-level event listeners for touchmove/end events. In the absence of
+        // the pointer capture API, which is not supported by all necessary platforms,
+        // window-level event listeners give us the best shot at capturing events that
+        // fall outside the map canvas element. Use `{capture: true}` for the move event
+        // to prevent map move events from being fired during a drag.
+        DOM.addEventListener(window.document, 'touchmove', this._onMove, {capture: true, passive: false});
+        DOM.addEventListener(window.document, 'touchend', this._onTouchEnd);
+
+        this._start(e);
+    }
+
+    _abort(e: FocusEvent | TouchEvent) {
         switch (this._state) {
         case 'active':
             this._state = 'enabled';
@@ -250,6 +283,15 @@ class DragPanHandler {
         }
     }
 
+    _onMultiTouchStart(e: TouchEvent) {
+        // Additional fingers are now touching; treat this almost like a touchend & stop dragging,
+        this._abort(e);
+    }
+
+    _onBlur(e: FocusEvent) {
+        this._abort(e);
+    }
+
     _unbind() {
         DOM.removeEventListener(window.document, 'touchmove', this._onMove, {capture: true, passive: false});
         DOM.removeEventListener(window.document, 'touchend', this._onTouchEnd);

test/unit/ui/handler/drag_pan.test.js

@@ -4,6 +4,7 @@ import Map from '../../../../src/ui/map';
 import DOM from '../../../../src/util/dom';
 import simulate from 'mapbox-gl-js-test/simulate_interaction';
 
+
 function createMap(t, clickTolerance) {
     t.stub(Map.prototype, '_detectMissingCSS');
     return new Map({ container: DOM.create('div', '', window.document.body), clickTolerance: clickTolerance || 0 });
@@ -741,3 +742,187 @@ test('DragPanHandler does not begin a touch drag if moved less than click tolera
     map.remove();
     t.end();
 });
+
+
+test('DragPanHandler does not begin a touch drag on multi-finger touchstart event', (t) => {
+    const map = createMap(t);
+
+    const dragstart = t.spy();
+    const drag      = t.spy();
+    const dragend   = t.spy();
+
+    map.on('dragstart', dragstart);
+    map.on('drag',      drag);
+    map.on('dragend',   dragend);
+
+    simulate.touchstart(map.getCanvas(), {touches: [{clientX: 10, clientY: 10}, {clientX: 20, clientY: 20}]});
+    map._renderTaskQueue.run();
+    t.equal(dragstart.callCount, 0);
+    t.equal(drag.callCount, 0);
+    t.equal(dragend.callCount, 0);
+
+    simulate.touchmove(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}, {clientX: 30, clientY: 30}]});
+    map._renderTaskQueue.run();
+    t.equal(dragstart.callCount, 0);
+    t.equal(drag.callCount, 0);
+    t.equal(dragend.callCount, 0);
+
+    simulate.touchend(map.getCanvas());
+    map._renderTaskQueue.run();
+    t.equal(dragstart.callCount, 0);
+    t.equal(drag.callCount, 0);
+    t.equal(dragend.callCount, 0);
+
+    map.remove();
+    t.end();
+});
+
+
+test('DragPanHandler ends a touch-triggered drag if a second touch is started & touchZoomRotate is enabled', (t) => {
+    const map = createMap(t);
+    map.touchZoomRotate.enable();
+
+    const dragend = t.spy();
+    map.on('dragend', dragend);
+
+    simulate.touchstart(map.getCanvas(), {touches: [{clientX: 10, clientY: 10}]});
+    map._renderTaskQueue.run();
+
+    simulate.touchmove(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}]});
+    map._renderTaskQueue.run();
+    t.ok(map.dragPan.isActive());
+
+    simulate.touchstart(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}, {clientX: 30, clientY: 30}]});
+    map._renderTaskQueue.run();
+    t.notOk(map.dragPan.isActive());
+    t.equal(dragend.callCount, 1);
+
+    map.remove();
+    t.end();
+});
+
+test('DragPanHandler does not end a touch-triggered drag if a second touch is started but touchZoomRotate is disabled', (t) => {
+    const map = createMap(t);
+    map.touchZoomRotate.disable();
+
+    const dragend = t.spy();
+    map.on('dragend', dragend);
+
+    simulate.touchstart(map.getCanvas(), {touches: [{clientX: 10, clientY: 10}]});
+    map._renderTaskQueue.run();
+
+    simulate.touchmove(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}]});
+    map._renderTaskQueue.run();
+    t.ok(map.dragPan.isActive());
+
+    simulate.touchstart(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}, {clientX: 30, clientY: 30}]});
+    map._renderTaskQueue.run();
+    t.ok(map.dragPan.isActive());
+    t.equal(dragend.callCount, 0);
+
+    map.remove();
+    t.end();
+});
+
+test('DragPanHandler starts a touch-triggered drag if a multi-finger touch becomes a single-finger touch', (t) => {
+    const map = createMap(t);
+
+    const dragstart = t.spy();
+    map.on('dragstart', dragstart);
+
+    simulate.touchstart(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}, {clientX: 30, clientY: 30}]});
+    map._renderTaskQueue.run();
+    t.notOk(map.dragPan.isActive());
+    t.notOk(dragstart.called);
+
+    simulate.touchmove(map.getCanvas(), {touches: [{clientX: 10, clientY: 10}, {clientX: 40, clientY: 40}]});
+    map._renderTaskQueue.run();
+    t.notOk(map.dragPan.isActive());
+    t.notOk(dragstart.called);
+
+    simulate.touchend(map.getCanvas(), {touches: [{clientX: 10, clientY: 10}]});
+    map._renderTaskQueue.run();
+    t.notOk(map.dragPan.isActive());
+    t.equals(map.dragPan._state, 'pending');
+    t.notOk(dragstart.called);
+
+    simulate.touchmove(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}]});
+    map._renderTaskQueue.run();
+    t.ok(map.dragPan.isActive());
+    t.equal(dragstart.callCount, 1);
+
+    map.remove();
+    t.end();
+});
+
+
+
+
+
+test('DragPanHandler stops/starts touch-triggered drag appropriately when transitioning between single- and multi-finger touch', (t) => {
+    const map = createMap(t);
+
+    const dragstart = t.spy();
+    const drag      = t.spy();
+    const dragend   = t.spy();
+
+    map.on('dragstart', dragstart);
+    map.on('drag',      drag);
+    map.on('dragend',   dragend);
+
+    // Single-finger touch starts drag
+    simulate.touchstart(map.getCanvas(), {touches: [{clientX: 10, clientY: 10}]});
+    map._renderTaskQueue.run();
+    t.notOk(map.dragPan.isActive());
+    t.equal(dragstart.callCount, 0);
+    t.equal(drag.callCount, 0);
+    t.equal(dragend.callCount, 0);
+
+    simulate.touchmove(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}]});
+    map._renderTaskQueue.run();
+    t.ok(map.dragPan.isActive());
+    t.equal(dragstart.callCount, 1);
+    t.equal(drag.callCount, 1);
+    t.equal(dragend.callCount, 0);
+
+    // Adding a second finger stops drag (will trigger touchZoomRotate instead)
+    simulate.touchstart(map.getCanvas(), {touches: [{clientX: 10, clientY: 10}, {clientX: 20, clientY: 20}]});
+    map._renderTaskQueue.run();
+    t.notOk(map.dragPan.isActive());
+    t.equal(dragstart.callCount, 1);
+    t.equal(drag.callCount, 1);
+    t.equal(dragend.callCount, 1);
+
+    simulate.touchmove(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}, {clientX: 30, clientY: 30}]});
+    map._renderTaskQueue.run();
+    t.notOk(map.dragPan.isActive());
+    t.equal(dragstart.callCount, 1);
+    t.equal(drag.callCount, 1);
+    t.equal(dragend.callCount, 1);
+
+    // Removing all but one finger starts another drag
+    simulate.touchend(map.getCanvas(), {touches: [{clientX: 30, clientY: 30}]});
+    map._renderTaskQueue.run();
+    t.notOk(map.dragPan.isActive());
+    t.equal(dragstart.callCount, 1);
+    t.equal(drag.callCount, 1);
+    t.equal(dragend.callCount, 1);
+
+    simulate.touchmove(map.getCanvas(), {touches: [{clientX: 20, clientY: 20}]});
+    map._renderTaskQueue.run();
+    t.ok(map.dragPan.isActive());
+    t.equal(dragstart.callCount, 2);
+    t.equal(drag.callCount, 2);
+    t.equal(dragend.callCount, 1);
+
+    // Removing last finger stops drag
+    simulate.touchend(map.getCanvas());
+    map._renderTaskQueue.run();
+    t.notOk(map.dragPan.isActive());
+    t.equal(dragstart.callCount, 2);
+    t.equal(drag.callCount, 2);
+    t.equal(dragend.callCount, 2);
+
+    map.remove();
+    t.end();
+});