Ensure drag handlers request render frames on move (mapbox#6068) (map…

…box#6073)

Closes mapbox#6063

Caused by mapbox#6005 because,
after that change, the drag handlers relied on the `move` event to
trigger a map rerender to pick up the next batch of mouse movements.

This worked fine while dragging was in progress, but after the user
paused and the render frame triggered by the last `move` event was
complete, there was nothing to re-initiate the render loop once the
mouse moved again.

src/ui/handler/drag_pan.js

@@ -130,6 +130,9 @@ class DragPanHandler {
 
             this._map._startAnimation(this._onDragFrame, this._onDragFinished);
         }
+
+        // ensure a new render frame is scheduled
+        this._map._update();
     }
 
     /**

src/ui/handler/drag_rotate.js

@@ -153,6 +153,9 @@ class DragRotateHandler {
 
             this._map._startAnimation(this._onDragFrame, this._onDragFinished);
         }
+
+        // ensure a new render frame is scheduled
+        this._map._update();
     }
 
     _onUp(e: MouseEvent | FocusEvent) {

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

@@ -0,0 +1,34 @@
+'use strict';
+
+const test = require('mapbox-gl-js-test').test;
+const util = require('../../../../src/util/util');
+const window = require('../../../../src/util/window');
+const Map = require('../../../../src/ui/map');
+const DOM = require('../../../../src/util/dom');
+const simulate = require('mapbox-gl-js-test/simulate_interaction');
+
+function createMap(options) {
+    return new Map(util.extend({
+        container: DOM.create('div', '', window.document.body),
+        style: {
+            "version": 8,
+            "sources": {},
+            "layers": []
+        }
+    }, options));
+}
+
+test('DragPanHandler requests a new render frame after each mousemove event', (t) => {
+    const map = createMap();
+    const update = t.spy(map, '_update');
+
+    simulate.mousedown(map.getCanvas(), {bubbles: true, buttons: 2});
+    simulate.mousemove(map.getCanvas(), {bubbles: true, buttons: 2});
+    t.ok(update.callCount > 0);
+
+    // https://github.com/mapbox/mapbox-gl-js/issues/6063
+    update.reset();
+    simulate.mousemove(map.getCanvas(), {bubbles: true, buttons: 2});
+    t.equal(update.callCount, 1);
+    t.end();
+});

test/unit/ui/handler/drag_rotate.test.js

@@ -18,6 +18,21 @@ function createMap(options) {
     }, options));
 }
 
+test('DragRotateHandler requests a new render frame after each mousemove event', (t) => {
+    const map = createMap();
+    const update = t.spy(map, '_update');
+
+    simulate.mousedown(map.getCanvas(), {bubbles: true, buttons: 2, button: 2});
+    simulate.mousemove(map.getCanvas(), {bubbles: true, buttons: 2});
+    t.ok(update.callCount > 0);
+
+    // https://github.com/mapbox/mapbox-gl-js/issues/6063
+    update.reset();
+    simulate.mousemove(map.getCanvas(), {bubbles: true, buttons: 2});
+    t.equal(update.callCount, 1);
+    t.end();
+});
+
 test('DragRotateHandler rotates in response to a right-click drag', (t) => {
     const map = createMap();