Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add pitchstart and pitchend events #4473

Merged
merged 4 commits into from
Mar 29, 2017
Merged

add pitchstart and pitchend events #4473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
63fef7d
add pitchstart and pitchend events
Mar 22, 2017
814c084
docs docs docs :memo:
Mar 22, 2017
0b61f4b
testing :radioactive:
Mar 22, 2017
fbd6e5a
ensure pitch events fire with interaction handlers
Mar 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 46 additions & 7 deletions src/ui/camera.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,7 @@ class Camera extends Evented {
* @memberof Map#
* @param {number} pitch The pitch to set, measured in degrees away from the plane of the screen (0-60).
* @param {Object} [eventData] Additional properties to be added to event objects of events triggered by this method.
* @fires pitchstart
* @fires movestart
* @fires moveend
* @returns {Map} `this`
Expand Down Expand Up @@ -405,12 +406,14 @@ class Camera extends Evented {
* @param {Object} [eventData] Additional properties to be added to event objects of events triggered by this method.
* @fires movestart
* @fires zoomstart
* @fires pitchstart
* @fires rotate
* @fires move
* @fires zoom
* @fires rotate
* @fires pitch
* @fires zoomend
* @fires moveend
* @fires zoomend
* @fires pitchend
* @returns {Map} `this`
*/
jumpTo(options, eventData) {
Expand Down Expand Up @@ -454,7 +457,9 @@ class Camera extends Evented {
}

if (pitchChanged) {
this.fire('pitch', eventData);
this.fire('pitchstart', eventData)
.fire('pitch', eventData)
.fire('pitchend', eventData);
}

return this.fire('moveend', eventData);
Expand All @@ -471,12 +476,14 @@ class Camera extends Evented {
* @param {Object} [eventData] Additional properties to be added to event objects of events triggered by this method.
* @fires movestart
* @fires zoomstart
* @fires pitchstart
* @fires rotate
* @fires move
* @fires zoom
* @fires rotate
* @fires pitch
* @fires zoomend
* @fires moveend
* @fires zoomend
* @fires pitchend
* @returns {Map} `this`
* @see [Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/)
*/
Expand Down Expand Up @@ -532,6 +539,9 @@ class Camera extends Evented {
if (this.zooming) {
this.fire('zoomstart', eventData);
}
if (this.pitching) {
this.fire('pitchstart', eventData);
}

clearTimeout(this._onEaseEnd);

Expand Down Expand Up @@ -573,6 +583,7 @@ class Camera extends Evented {

_easeToEnd(eventData) {
const wasZooming = this.zooming;
const wasPitching = this.pitching;
this.moving = false;
this.zooming = false;
this.rotating = false;
Expand All @@ -581,6 +592,9 @@ class Camera extends Evented {
if (wasZooming) {
this.fire('zoomend', eventData);
}
if (wasPitching) {
this.fire('pitchend', eventData);
}
this.fire('moveend', eventData);

}
Expand Down Expand Up @@ -612,12 +626,14 @@ class Camera extends Evented {
* @param {Object} [eventData] Additional properties to be added to event objects of events triggered by this method.
* @fires movestart
* @fires zoomstart
* @fires pitchstart
* @fires move
* @fires zoom
* @fires rotate
* @fires pitch
* @fires zoomend
* @fires moveend
* @fires zoomend
* @fires pitchend
* @returns {Map} `this`
* @example
* // fly with default options to null island
Expand Down Expand Up @@ -760,6 +776,7 @@ class Camera extends Evented {

this.fire('movestart', eventData);
this.fire('zoomstart', eventData);
if (this.pitching) this.fire('pitchstart', eventData);

this._ease(function (k) {
// s: The distance traveled along the flight path, measured in ρ-screenfuls.
Expand All @@ -786,11 +803,13 @@ class Camera extends Evented {
this.fire('pitch', eventData);
}
}, function() {
const wasPitching = this.pitching;
this.moving = false;
this.zooming = false;
this.rotating = false;
this.pitching = false;

if (wasPitching) this.fire('pitchend', eventData);
this.fire('zoomend', eventData);
this.fire('moveend', eventData);
}, options);
Expand Down Expand Up @@ -881,12 +900,32 @@ class Camera extends Evented {
}

/**
* Fired whenever the map's pitch (tilt) changes.
* Fired whenever the map's pitch (tilt) begins a change as
* the result of either user interaction or methods such as [Map#flyTo](#Map#flyTo).
*
* @event pitchstart
* @memberof Map
* @instance
* @property {MapEventData} data
*/

/**
* Fired whenever the map's pitch (tilt) changes as.
* the result of either user interaction or methods such as [Map#flyTo](#Map#flyTo).
*
* @event pitch
* @memberof Map
* @instance
* @property {MapEventData} data
*/

/**
* Fired immediately after the map's pitch (tilt) finishes changing as
* the result of either user interaction or methods such as [Map#flyTo](#Map#flyTo).
*
* @event pitchend
* @memberof Map
* @instance
* @property {MapEventData} data
*/
module.exports = Camera;
9 changes: 8 additions & 1 deletion src/ui/handler/drag_rotate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,9 @@ class DragRotateHandler {
this._map.moving = true;
this._fireEvent('rotatestart', e);
this._fireEvent('movestart', e);
if (this._pitchWithRotate) {
this._fireEvent('pitchstart', e);
}
}

const map = this._map;
Expand All @@ -119,7 +122,10 @@ class DragRotateHandler {
inertia.push([Date.now(), map._normalizeBearing(bearing, last[1])]);

map.transform.bearing = bearing;
if (this._pitchWithRotate) map.transform.pitch = pitch;
if (this._pitchWithRotate) {
this._fireEvent('pitch', e);
map.transform.pitch = pitch;
}

this._fireEvent('rotate', e);
this._fireEvent('move', e);
Expand Down Expand Up @@ -150,6 +156,7 @@ class DragRotateHandler {
this._map.moving = false;
this._fireEvent('moveend', e);
}
if (this._pitchWithRotate) this._fireEvent('pitchend', e);
};

if (inertia.length < 2) {
Expand Down
22 changes: 21 additions & 1 deletion test/unit/ui/camera.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,22 @@ test('camera', (t) => {
t.end();
});

t.test('emits pitch events, preserving eventData', (t)=>{
let started, pitched, ended;
const eventData = { data: 'ok'};

camera
.on('pitchstart', (d) => { started = d.data; })
.on('pitch', (d) => { pitched = d.data; })
.on('pitchend', (d) => { ended = d.data; });

camera.jumpTo({pitch: 10}, eventData);
t.equal(started, 'ok');
t.equal(pitched, 'ok');
t.equal(ended, 'ok');
t.end();
});

t.test('cancels in-progress easing', (t) => {
camera.panTo([3, 4]);
t.ok(camera.isEasing());
Expand Down Expand Up @@ -861,14 +877,16 @@ test('camera', (t) => {
//As such; it deserves a separate test case. This test case flies the map from A to A.
const fromTo = { center: [100, 0] };
const camera = createCamera(fromTo);
let movestarted, moved, rotated, pitched, zoomstarted, zoomed, zoomended;
let movestarted, moved, rotated, pitched, pitchstarted, pitchended, zoomstarted, zoomed, zoomended;
const eventData = { data: 'ok' };

camera
.on('movestart', (d) => { movestarted = d.data; })
.on('move', (d) => { moved = d.data; })
.on('rotate', (d) => { rotated = d.data; })
.on('pitch', (d) => { pitched = d.data; })
.on('pitchstart', (d) => { pitchstarted = d.data; })
.on('pitchend', (d) => { pitchended = d.data; })
.on('zoomstart', (d) => { zoomstarted = d.data; })
.on('zoom', (d) => { zoomed = d.data; })
.on('zoomend', (d) => { zoomended = d.data; })
Expand All @@ -884,6 +902,8 @@ test('camera', (t) => {
t.equal(zoomended, undefined);
t.equal(rotated, undefined);
t.equal(pitched, undefined);
t.equal(pitchstarted, undefined);
t.equal(pitchended, undefined);
t.equal(d.data, 'ok');
t.end();
});
Expand Down