Skip to content

Commit

Permalink
Fix Click on Compass on some mobile (add clickTolerance to DragRotate…
Browse files Browse the repository at this point in the history
…Handler) (mapbox#9015)
  • Loading branch information
Yanonix authored and mike-unearth committed Mar 18, 2020
1 parent 34c1d83 commit 6bc9e0d
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 3 deletions.
3 changes: 2 additions & 1 deletion src/ui/control/navigation_control.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,8 @@ class NavigationControl {
}
this._map.on('rotate', this._rotateCompassArrow);
this._rotateCompassArrow();
this._handler = new DragRotateHandler(map, {button: 'left', element: this._compass});
// Temporary fix with clickTolerance (https://github.com/mapbox/mapbox-gl-js/pull/9015)
this._handler = new DragRotateHandler(map, {button: 'left', element: this._compass, clickTolerance: map.dragRotate._clickTolerance});
DOM.addEventListener(this._compass, 'mousedown', this._handler.onMouseDown);
DOM.addEventListener(this._compass, 'touchstart', this._handler.onMouseDown, {passive: false});
this._handler.enable();
Expand Down
7 changes: 5 additions & 2 deletions src/ui/handler/drag_rotate.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ class DragRotateHandler {
_eventButton: number;
_bearingSnap: number;
_pitchWithRotate: boolean;
_clickTolerance: number;

_startPos: Point;
_prevPos: Point;
Expand All @@ -51,14 +52,16 @@ class DragRotateHandler {
button?: 'right' | 'left',
element?: HTMLElement,
bearingSnap?: number,
pitchWithRotate?: boolean
pitchWithRotate?: boolean,
clickTolerance?: number
}) {
this._map = map;
this._el = options.element || map.getCanvasContainer();
this._state = 'disabled';
this._button = options.button || 'right';
this._bearingSnap = options.bearingSnap || 0;
this._pitchWithRotate = options.pitchWithRotate !== false;
this._clickTolerance = options.clickTolerance || 1;

bindAll([
'onMouseDown',
Expand Down Expand Up @@ -173,7 +176,7 @@ class DragRotateHandler {

_onMouseMove(e: MouseEvent) {
const pos = DOM.mousePos(this._el, e);
if (this._lastPos.equals(pos)) {
if (this._lastPos.equals(pos) || ((this._state === 'pending') && (pos.dist(this._startPos) < this._clickTolerance))) {
return;
}

Expand Down
60 changes: 60 additions & 0 deletions test/unit/ui/handler/drag_rotate.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -827,3 +827,63 @@ test('DragRotateHandler does not begin rotation on spurious mousemove events', (
map.remove();
t.end();
});

test('DragRotateHandler does not begin a mouse drag if moved less than click tolerance', (t) => {
const map = createMap(t, {clickTolerance: 4});

// Prevent inertial rotation.
t.stub(browser, 'now').returns(0);

const rotatestart = t.spy();
const rotate = t.spy();
const rotateend = t.spy();
const pitchstart = t.spy();
const pitch = t.spy();
const pitchend = t.spy();

map.on('rotatestart', rotatestart);
map.on('rotate', rotate);
map.on('rotateend', rotateend);
map.on('pitchstart', pitchstart);
map.on('pitch', pitch);
map.on('pitchend', pitchend);

simulate.mousedown(map.getCanvas(), {buttons: 2, button: 2, clientX: 10, clientY: 10});
map._renderTaskQueue.run();
t.equal(rotatestart.callCount, 0);
t.equal(rotate.callCount, 0);
t.equal(rotateend.callCount, 0);
t.equal(pitchstart.callCount, 0);
t.equal(pitch.callCount, 0);
t.equal(pitchend.callCount, 0);

simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 13, clientY: 10});
map._renderTaskQueue.run();
t.equal(rotatestart.callCount, 0);
t.equal(rotate.callCount, 0);
t.equal(rotateend.callCount, 0);
t.equal(pitchstart.callCount, 0);
t.equal(pitch.callCount, 0);
t.equal(pitchend.callCount, 0);

simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 10, clientY: 13});
map._renderTaskQueue.run();
t.equal(rotatestart.callCount, 0);
t.equal(rotate.callCount, 0);
t.equal(rotateend.callCount, 0);
t.equal(pitchstart.callCount, 0);
t.equal(pitch.callCount, 0);
t.equal(pitchend.callCount, 0);

simulate.mousemove(map.getCanvas(), {buttons: 2, clientX: 14, clientY: 13 - 4});
map._renderTaskQueue.run();
t.equal(rotatestart.callCount, 1);
t.equal(rotate.callCount, 1);
t.equal(rotateend.callCount, 0);
t.equal(pitchstart.callCount, 1);
t.equal(pitch.callCount, 1);
t.equal(pitchend.callCount, 0);

map.remove();
t.end();
});

0 comments on commit 6bc9e0d

Please sign in to comment.