cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added click tolerance also for non-touch devices (#4396)

Browse Source 
* Added option for click tolerance. This option is used as a threshold to determine if the user event should be considered a click or a drag.

* Updated docs for clickTolerance to state the correct default value.

* Added tests for click threshold
This commit is contained in:
David Uvenman 2016-04-15 10:18:50 +02:00 committed by Yohan Boniface
parent 978fdb5add
commit 864326610a
2 changed files with 96 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
spec/suites/map/handler/Map.DragSpec.js
View File

@ -22,7 +22,7 @@ describe("Map.Drag", function () {
expect(map.dragging.enabled()).to.be(true);
});
it("calls the map with dragging disabled and worldCopyJump enabled; " +
"enables dragging after setting center and zoom", function () {
"enables dragging after setting center and zoom", function () {
var container = document.createElement('div');
var map = new L.Map(container, {
dragging: false,
@ -43,7 +43,7 @@ describe("Map.Drag", function () {
container.style.width = container.style.height = '600px';
container.style.top = container.style.left = 0;
container.style.position = 'absolute';
// container.style.background = '#808080';
// container.style.background = '#808080';
document.body.appendChild(container);
@ -73,6 +73,46 @@ describe("Map.Drag", function () {
mouse.wait(100).moveTo(200, 200, 0)
.down().moveBy(5, 0, 20).moveBy(256, 32, 200).up();
});
it("does not change the center of the map when mouse is moved less than the drag threshold", function (done) {
var container = document.createElement('div');
container.style.width = container.style.height = '600px';
container.style.top = container.style.left = 0;
container.style.position = 'absolute';
document.body.appendChild(container);
var map = new L.Map(container, {
dragging: true,
inertia: false
});
var originalCenter = L.latLng(0, 0);
map.setView(originalCenter, 1);
var spy = sinon.spy();
map.on('drag', spy);
var hand = new Hand({
timing: 'fastframe',
onStop: function () {
var center = map.getCenter();
var zoom = map.getZoom();
document.body.removeChild(container);
expect(center).to.be(originalCenter); // Expect center point to be the same as before the click
expect(spy.callCount).to.eql(0); // No drag event should have been fired.
expect(zoom).to.be(1);
done();
}
});
var mouse = hand.growFinger('mouse');
// We move 2 pixels to stay below the default 3-pixel threshold of
// L.Draggable. This should result in a click and not a drag.
mouse.wait(100).moveTo(200, 200, 0)
.down().moveBy(1, 0, 20).moveBy(1, 0, 200).up();
});
});
describe("touch events", function () {
@ -81,7 +121,7 @@ describe("Map.Drag", function () {
container.style.width = container.style.height = '600px';
container.style.top = container.style.left = 0;
container.style.position = 'absolute';
// container.style.background = '#808080';
// container.style.background = '#808080';
document.body.appendChild(container);
@ -111,6 +151,47 @@ describe("Map.Drag", function () {
toucher.wait(100).moveTo(200, 200, 0)
.down().moveBy(5, 0, 20).moveBy(256, 32, 200).up();
});
it("does not change the center of the map when finger is moved less than the drag threshold", function (done) {
var container = document.createElement('div');
container.style.width = container.style.height = '600px';
container.style.top = container.style.left = 0;
container.style.position = 'absolute';
document.body.appendChild(container);
var map = new L.Map(container, {
dragging: true,
inertia: false
});
var originalCenter = L.latLng(0, 0);
map.setView(originalCenter, 1);
var spy = sinon.spy();
map.on('drag', spy);
var hand = new Hand({
timing: 'fastframe',
onStop: function () {
var center = map.getCenter();
var zoom = map.getZoom();
document.body.removeChild(container);
expect(center).to.be(originalCenter); // Expect center point to be the same as before the click
expect(spy.callCount).to.eql(0); // No drag event should have been fired.
expect(zoom).to.be(1);
done();
}
});
var toucher = hand.growFinger('touch');
// We move 2 pixels to stay below the default 3-pixel threshold of
// L.Draggable. This should result in a click and not a drag.
toucher.wait(100).moveTo(200, 200, 0)
.down().moveBy(1, 0, 20).moveBy(1, 0, 200).up();
});
});
});

17
src/dom/Draggable.js
View File

@ -16,6 +16,13 @@
L.Draggable = L.Evented.extend({
options: {
// @option clickTolerance: Number = 3
// The max number of pixels a user can shift the mouse pointer during a click
// for it to be considered a valid click (as opposed to a mouse drag).
clickTolerance: 3
},
statics: {
START: L.Browser.touch ? ['touchstart', 'mousedown'] : ['mousedown'],
END: {
@ -88,8 +95,8 @@ L.Draggable = L.Evented.extend({
this._startPos = this._newPos = L.DomUtil.getPosition(this._element);
L.DomEvent
.on(document, L.Draggable.MOVE[e.type], this._onMove, this)
.on(document, L.Draggable.END[e.type], this._onUp, this);
.on(document, L.Draggable.MOVE[e.type], this._onMove, this)
.on(document, L.Draggable.END[e.type], this._onUp, this);
},
_onMove: function (e) {
@ -103,7 +110,7 @@ L.Draggable = L.Evented.extend({
offset = newPoint.subtract(this._startPoint);
if (!offset.x && !offset.y) { return; }
if (L.Browser.touch && Math.abs(offset.x) + Math.abs(offset.y) < 3) { return; }
if (Math.abs(offset.x) + Math.abs(offset.y) < this.options.clickTolerance) { return; }
L.DomEvent.preventDefault(e);
@ -158,8 +165,8 @@ L.Draggable = L.Evented.extend({
for (var i in L.Draggable.MOVE) {
L.DomEvent
.off(document, L.Draggable.MOVE[i], this._onMove, this)
.off(document, L.Draggable.END[i], this._onUp, this);
.off(document, L.Draggable.MOVE[i], this._onMove, this)
.off(document, L.Draggable.END[i], this._onUp, this);
}
L.DomUtil.enableImageDrag();