Fire 'rotate' and 'pitch' events only when their value changed (#8872)

mapbox · Oct 15, 2019 · 4a4bc6a · 4a4bc6a
1 parent 4077c78
commit 4a4bc6a
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 5 deletions.
diff --git a/src/ui/handler/drag_rotate.js b/src/ui/handler/drag_rotate.js
@@ -213,13 +213,19 @@ class DragRotateHandler {
         this._drainInertiaBuffer();
         inertia.push([browser.now(), this._map._normalizeBearing(bearing, last[1])]);
 
+        const prevBearing = tr.bearing;
         tr.bearing = bearing;
         if (this._pitchWithRotate) {
-            this._fireEvent('pitch', e);
+            const prevPitch = tr.pitch;
             tr.pitch = pitch;
+            if (tr.pitch !== prevPitch) {
+                this._fireEvent('pitch', e);
+            }
         }
 
-        this._fireEvent('rotate', e);
+        if (tr.bearing !== prevBearing) {
+            this._fireEvent('rotate', e);
+        }
         this._fireEvent('move', e);
 
         delete this._lastMoveEvent;

diff --git a/test/unit/ui/handler/drag_rotate.test.js b/test/unit/ui/handler/drag_rotate.test.js
@@ -124,7 +124,7 @@ test('DragRotateHandler pitches in response to a right-click drag by default', (
     map.on('pitchend',   pitchend);
 
     simulate.mousedown(map.getCanvas(), {buttons: 2, button: 2});
-    simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 10, clientY: 10});
+    simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 10, clientY: -10});
     map._renderTaskQueue.run();
     t.equal(pitchstart.callCount, 1);
     t.equal(pitch.callCount, 1);
@@ -136,6 +136,33 @@ test('DragRotateHandler pitches in response to a right-click drag by default', (
     t.end();
 });
 
+test('DragRotateHandler doesn\'t fire pitch event when rotating only', (t) => {
+    const map = createMap(t);
+
+    // Prevent inertial rotation.
+    t.stub(browser, 'now').returns(0);
+
+    const pitchstart = t.spy();
+    const pitch      = t.spy();
+    const pitchend   = t.spy();
+
+    map.on('pitchstart', pitchstart);
+    map.on('pitch',      pitch);
+    map.on('pitchend',   pitchend);
+
+    simulate.mousedown(map.getCanvas(), {buttons: 2, button: 2});
+    simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 10, clientY: 10});
+    map._renderTaskQueue.run();
+    t.equal(pitchstart.callCount, 1);
+    t.equal(pitch.callCount, 0);
+
+    simulate.mouseup(map.getCanvas(),   {buttons: 0, button: 2});
+    t.equal(pitchend.callCount, 1);
+
+    map.remove();
+    t.end();
+});
+
 test('DragRotateHandler pitches in response to a control-left-click drag', (t) => {
     const map = createMap(t);
 
@@ -151,7 +178,7 @@ test('DragRotateHandler pitches in response to a control-left-click drag', (t) =
     map.on('pitchend',   pitchend);
 
     simulate.mousedown(map.getCanvas(), {buttons: 1, button: 0, ctrlKey: true});
-    simulate.mousemove(map.getCanvas(), {buttons: 1,            ctrlKey: true, clientX: 10, clientY: 10});
+    simulate.mousemove(map.getCanvas(), {buttons: 1,            ctrlKey: true, clientX: 10, clientY: -10});
     map._renderTaskQueue.run();
     t.equal(pitchstart.callCount, 1);
     t.equal(pitch.callCount, 1);
@@ -256,6 +283,37 @@ test('DragRotateHandler fires move events', (t) => {
     t.end();
 });
 
+test('DragRotateHandler doesn\'t fire rotate event when pitching only', (t) => {
+    // The bearingSnap option here ensures that the moveend event is sent synchronously.
+    const map = createMap(t, {bearingSnap: 0});
+
+    // Prevent inertial rotation.
+    t.stub(browser, 'now').returns(0);
+
+    const rotatestart = t.spy();
+    const rotate      = t.spy();
+    const pitch       = t.spy();
+    const rotateend   = t.spy();
+
+    map.on('movestart', rotatestart);
+    map.on('rotate',    rotate);
+    map.on('pitch',     pitch);
+    map.on('rotateend', rotateend);
+
+    simulate.mousedown(map.getCanvas(), {buttons: 2, button: 2});
+    simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 0, clientY: -10});
+    map._renderTaskQueue.run();
+    t.equal(rotatestart.callCount, 1);
+    t.equal(rotate.callCount, 0);
+    t.equal(pitch.callCount, 1);
+
+    simulate.mouseup(map.getCanvas(),   {buttons: 0, button: 2});
+    t.equal(rotateend.callCount, 1);
+
+    map.remove();
+    t.end();
+});
+
 test('DragRotateHandler includes originalEvent property in triggered events', (t) => {
     // The bearingSnap option here ensures that the moveend event is sent synchronously.
     const map = createMap(t, {bearingSnap: 0});
@@ -285,7 +343,7 @@ test('DragRotateHandler includes originalEvent property in triggered events', (t
     map.on('moveend',   moveend);
 
     simulate.mousedown(map.getCanvas(), {buttons: 2, button: 2});
-    simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 10, clientY: 10});
+    simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 10, clientY: -10});
     map._renderTaskQueue.run();
     simulate.mouseup(map.getCanvas(),   {buttons: 0, button: 2});