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

Do not rely on options.draggable to compute draggableMoved (#4638)

Browse Source 
One can enable dragging of a marker after it has been initialized
with draggable=false.
This commit is contained in:
Yohan Boniface 2016-07-08 11:22:54 +02:00 committed by Per Liedman
parent 5dfc3364d1
commit bd2616f901
3 changed files with 125 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
debug/map/markers.html
View File

@ -32,12 +32,12 @@
var markerDraggable = new L.Marker([0, 10], {
draggable: true,
title: 'Draggable'
});
map.addLayer(markerDraggable);
markerDraggable.bindPopup("Draggable");
markerDraggable.dragging.enable();
var poly = new L.Polygon([[0, 10], [0, 15.5], [0, 50], [20, 20.5]]);
map.addLayer(poly);

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

@ -38,15 +38,21 @@ describe("Map.Drag", function () {
describe("mouse events", function () {
it("change the center of the map", function (done) {
var container = document.createElement('div');
var container;
beforeEach(function () {
container = document.createElement('div');
container.style.width = container.style.height = '600px';
container.style.top = container.style.left = 0;
container.style.position = 'absolute';
// container.style.background = '#808080';
document.body.appendChild(container);
});
afterEach(function () {
document.body.removeChild(container);
});
it("change the center of the map", function (done) {
var map = new L.Map(container, {
dragging: true,
inertia: false
@ -58,7 +64,6 @@ describe("Map.Drag", function () {
onStop: function () {
var center = map.getCenter();
var zoom = map.getZoom();
document.body.removeChild(container);
expect(center.lat).to.be.within(21.9430, 21.9431);
expect(center.lng).to.be(-180);
expect(zoom).to.be(1);
@ -75,13 +80,6 @@ describe("Map.Drag", function () {
});
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
@ -98,7 +96,6 @@ describe("Map.Drag", function () {
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);
@ -114,6 +111,117 @@ describe("Map.Drag", function () {
.down().moveBy(1, 0, 20).moveBy(1, 0, 200).up();
});
it("does not trigger preclick nor click", function (done) {
var map = new L.Map(container, {
dragging: true,
inertia: false
});
map.setView([0, 0], 1);
var clickSpy = sinon.spy();
var preclickSpy = sinon.spy();
var dragSpy = sinon.spy();
map.on('click', clickSpy);
map.on('preclick', preclickSpy);
map.on('drag', dragSpy);
var hand = new Hand({
timing: 'fastframe',
onStop: function () {
// A real user scenario would trigger a click on mouseup.
// We want to be sure we are cancelling it after a drag.
happen.click(container);
expect(dragSpy.called).to.be(true);
expect(clickSpy.called).to.be(false);
expect(preclickSpy.called).to.be(false);
done();
}
});
var mouse = hand.growFinger('mouse');
// We move 5 pixels first to overcome the 3-pixel threshold of
// L.Draggable.
mouse.wait(100).moveTo(200, 200, 0)
.down().moveBy(5, 0, 20).moveBy(256, 32, 200).up();
});
it("does not trigger preclick nor click when dragging on top of a static marker", function (done) {
var map = new L.Map(container, {
dragging: true,
inertia: false
});
map.setView([0, 0], 1);
var marker = L.marker(map.getCenter()).addTo(map);
var clickSpy = sinon.spy();
var preclickSpy = sinon.spy();
var markerDragSpy = sinon.spy();
var mapDragSpy = sinon.spy();
map.on('click', clickSpy);
map.on('preclick', preclickSpy);
map.on('drag', mapDragSpy);
marker.on('click', clickSpy);
marker.on('preclick', preclickSpy);
marker.on('drag', markerDragSpy);
var hand = new Hand({
timing: 'fastframe',
onStop: function () {
// A real user scenario would trigger a click on mouseup.
// We want to be sure we are cancelling it after a drag.
happen.click(container);
expect(mapDragSpy.called).to.be(true);
expect(markerDragSpy.called).to.be(false);
expect(clickSpy.called).to.be(false);
expect(preclickSpy.called).to.be(false);
done();
}
});
var mouse = hand.growFinger('mouse');
// We move 5 pixels first to overcome the 3-pixel threshold of
// L.Draggable.
mouse.moveTo(300, 280, 0)
.down().moveBy(5, 0, 20).moveBy(20, 20, 100).up();
});
it("does not trigger preclick nor click when dragging a marker", function (done) {
var map = new L.Map(container, {
dragging: true,
inertia: false
});
map.setView([0, 0], 1);
var marker = L.marker(map.getCenter(), {draggable: true}).addTo(map);
var clickSpy = sinon.spy();
var preclickSpy = sinon.spy();
var markerDragSpy = sinon.spy();
var mapDragSpy = sinon.spy();
map.on('click', clickSpy);
map.on('preclick', preclickSpy);
map.on('drag', mapDragSpy);
marker.on('click', clickSpy);
marker.on('preclick', preclickSpy);
marker.on('drag', markerDragSpy);
var hand = new Hand({
timing: 'fastframe',
onStop: function () {
// A real user scenario would trigger a click on mouseup.
// We want to be sure we are cancelling it after a drag.
happen.click(marker._icon);
expect(markerDragSpy.called).to.be(true);
expect(mapDragSpy.called).to.be(false);
expect(clickSpy.called).to.be(false);
expect(preclickSpy.called).to.be(false);
done();
}
});
var mouse = hand.growFinger('mouse');
// We move 5 pixels first to overcome the 3-pixel threshold of
// L.Draggable.
mouse.moveTo(300, 280, 0)
.down().moveBy(5, 0, 20).moveBy(50, 50, 100).up();
});
it("does not change the center of the map when drag is disabled on click", function (done) {
var container = document.createElement('div');
container.style.width = container.style.height = '600px';
@ -155,6 +263,7 @@ describe("Map.Drag", function () {
mouse.wait(100).moveTo(200, 200, 0)
.down().moveBy(5, 0, 20).moveBy(256, 32, 200).up();
});
});
describe("touch events", function () {
@ -291,6 +400,7 @@ describe("Map.Drag", function () {
.down().moveBy(210, 0, 1000).up(200);
});
});
});

2
src/map/Map.js
View File

@ -1043,7 +1043,7 @@ L.Map = L.Evented.extend({
},
_draggableMoved: function (obj) {
obj = obj.options.draggable ? obj : this;
obj = obj.dragging && obj.dragging.enabled() ? obj : this;
return (obj.dragging && obj.dragging.moved()) || (this.boxZoom && this.boxZoom.moved());
},