From 6600374c0261a6f566a180cf89b84a23e26b5329 Mon Sep 17 00:00:00 2001
From: Anand Thakker <anandthakker@users.noreply.github.com>
Date: Fri, 26 Jan 2018 21:57:14 -0500
Subject: [PATCH] Ensure drag handlers request render frames on move (#6068)

Closes #6063

Caused by https://github.com/mapbox/mapbox-gl-js/pull/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               |  3 +++
 src/ui/handler/drag_rotate.js            |  3 +++
 test/unit/ui/handler/drag_pan.test.js    | 34 ++++++++++++++++++++++++
 test/unit/ui/handler/drag_rotate.test.js | 15 +++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 test/unit/ui/handler/drag_pan.test.js

diff --git a/src/ui/handler/drag_pan.js b/src/ui/handler/drag_pan.js
index 4257b8d5fb0..197e9ddb17b 100644
--- a/src/ui/handler/drag_pan.js
+++ b/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();
     }
 
     /**
diff --git a/src/ui/handler/drag_rotate.js b/src/ui/handler/drag_rotate.js
index 1fba1e17c01..5b3f46315f5 100644
--- a/src/ui/handler/drag_rotate.js
+++ b/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) {
diff --git a/test/unit/ui/handler/drag_pan.test.js b/test/unit/ui/handler/drag_pan.test.js
new file mode 100644
index 00000000000..579b809ee35
--- /dev/null
+++ b/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();
+});
diff --git a/test/unit/ui/handler/drag_rotate.test.js b/test/unit/ui/handler/drag_rotate.test.js
index 68bb681f90f..9f84c417930 100644
--- a/test/unit/ui/handler/drag_rotate.test.js
+++ b/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();