Backport ensure drag handlers request render frames on move (#6068)

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();