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

Fix zoom handling on Map.TouchZoom #4340

Merged
merged 1 commit into from
Mar 22, 2016
+386 −9
Merged

Fix zoom handling on Map.TouchZoom #4340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
223 changes: 223 additions & 0 deletions debug/tests/touch-shake.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />


<script>
// Trick Leaflet into believing we have a touchscreen (for Chrome)
if (window.Touch) { window.ontouchstart = function(){} };
</script>


<link rel="stylesheet" href="../../dist/leaflet.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>

<script src="../../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script>
<meta charset="utf-8">
<title>Leaflet test for pinch-zoom-without-bounce</title>
<style>
#map {
position:absolute;
top: 50px;
bottom: 0;
left:0;
right:0;
}
body {margin:0; padding: 0}

.label-right, .label-left, .label-bottom, .label-top {
line-height: 20px;
color: black;
}

.label-right {
text-align: left;
}

.label-left {
text-align: right;
}

.label-bottom, .label-top{
text-align: center;
}

</style>
</head>
<body>

This is a semi-automated test for checking touch-zoom shaking.

<div>
<button onclick='resetMap()'>reset</button>
<button onclick='pinchAndPanL()' >⌐¬</button>
<button onclick='pinchAndPanV()' >∧</button>
<button onclick='pinchAndPanII()'>||</button>
</div>

<div id='map'></div>


<script>

var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: -3,
bounceAtZoomLimits: false,
maxZoom: 1
});

var bounds = [[0,0],[1000,1000]];

// Map bounds
L.rectangle(bounds,{
fill: false,
stroke: 3,
color: 'black'
}).addTo(map);

// Reticule
for (var i=100; i<=900; i+=100) {
// Vertical line
L.polyline([[0, i],[1000, i]], {
fill: false,
weight: 1,
color: 'black'
}).addTo(map);

// Horizontal line
L.polyline([[i, 0],[i, 1000]], {
fill: false,
weight: 1,
color: 'black'
}).addTo(map);

}

for (var i=0; i<=1000; i+=100) {
// Right label
L.marker([i, 1000], { icon: L.divIcon({
iconSize: [40, 20],
iconAnchor: [-2, 10],
html: i,
className: 'label-right'
}) }).addTo(map);

// Left label
L.marker([i, 0], { icon: L.divIcon({
iconSize: [40, 20],
iconAnchor: [42, 10],
html: i,
className: 'label-left'
}) }).addTo(map);

// Top label
L.marker([1000, i], { icon: L.divIcon({
iconSize: [40, 20],
iconAnchor: [20, 22],
html: i,
className: 'label-top'
}) }).addTo(map);

// Bottom label
L.marker([0, i], { icon: L.divIcon({
iconSize: [40, 20],
iconAnchor: [20, -2],
html: i,
className: 'label-bottom'
}) }).addTo(map);
}

map.fitBounds(bounds);


var marker = L.marker([500, 500]).addTo(map);

var marker2 = L.marker([900, 400]).addTo(map);

var hand = new Hand({timing: 'frame'});
var f1 = hand.growFinger('touch');
var f2 = hand.growFinger('touch');

function resetMap() {
map.setView(myCenter, 15);
}

function pinchAndPanL() {

var start = map.getSize().divideBy(2);
start.y += 50;

hand.sync(1000);
f1.wait(200).moveTo(start.x - 50, start.y, 0)
.down()
.moveBy( -50, 0, 1500)
// .moveBy( -1, 0, 1500)
.moveBy( -50, 0, 1500)
.moveBy(0, 100, 1500)
.wait(1500)
.up();
f2.wait(200).moveTo(start.x + 50, start.y, 0)
.down()
.moveBy( 50, 0, 1500)
// .moveBy( 1, 0, 1500)
.moveBy( 50, 0, 1500)
.moveBy(0, 100, 1500)
.wait(1500)
.up();
};

function pinchAndPanV() {
hand.sync(1000);

var start = map.latLngToContainerPoint([900, 300]);
start.y += 50;

f1.wait(200).moveTo(start.x - 25, start.y, 0)
.down()
.moveBy(-100, 300, 5000)
.wait(1500)
.up();
f2.wait(200).moveTo(start.x + 25, start.y, 0)
.down()
.moveBy( 100, 300, 5000)
.wait(1500)
.up();
};

function pinchAndPanII() {
hand.sync(5);
f1.wait(200).moveTo(175, 100, 0)
.down()
.moveBy(0, 300, 5000)
.wait(1500)
.up();
f2.wait(200).moveTo(225, 100, 0)
.down()
.moveBy(0, 300, 5000)
.wait(1500)
.up();
};




map.on('mousedown mouseup zoomend', function(ev){
// console.log('L: ', performance.now(), JSON.stringify(ev.originalEvent));
console.log('L: ', performance.now(), ev.type);
});

// L.DomEvent.on(map._container, 'touchstart touchend touchmove', function(ev){
// console.log('T: ', performance.now(), ev.type, ev.touches.length, ev.changedTouches.length, ev);
// });


// pinchAndPanL();
pinchAndPanV();
// pinchAndPanII();

</script>
</body>
</html>
155 changes: 155 additions & 0 deletions debug/tests/touch-zoom-bounce.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />


<script>
// Trick Leaflet into believing we have a touchscreen (for Chrome)
if (window.Touch) { window.ontouchstart = function(){} };
</script>


<link rel="stylesheet" href="../../dist/leaflet.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>

<script src="../../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script>
<meta charset="utf-8">
<title>Leaflet test for pinch-zoom-without-bounce</title>
<style>
#map {
position:absolute;
top: 50px;
bottom: 0;
left:0;
right:0;
}
body {margin:0; padding: 0}
</style>
</head>
<body>

This is an automated test for <a href='https://github.com/Leaflet/Leaflet/issues/3530'>#3530</a>.

<div>
<button onclick='resetMap()'>reset</button>
<button onclick='pinchAndPanL()' >⌐¬</button>
<button onclick='pinchAndPanV()' >∧</button>
<button onclick='pinchAndPanII()'>||</button>
</div>

<div id='map'></div>


<script>

var myCenter = new L.LatLng(63.41, 10.41);
var map = new L.Map('map', {
center: myCenter,
zoom: 15,
minZoom: 1,
// maxZoom: 16,
bounceAtZoomLimits: false
});

//In any map, set minZoom and/or maxZoom, plus bounceAtZoomLimits to false.

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);

var marker = L.marker(myCenter);
map.addLayer(marker);

var marker2 = L.marker( map.containerPointToLatLng([200, 50]) ).addTo(map);


console.log('marker 2 is at: ', map.containerPointToLatLng([200, 50]) );

// map.on('move', function(ev){
// console.log('map move event A ', map._lastCenter, map._zoom, map._pixelOrigin);
// console.log('map move event B ', map.getCenter());
// });


var hand = new Hand({timing: 'minimal'});
var f1 = hand.growFinger('touch');
var f2 = hand.growFinger('touch');

function resetMap() {
map.setView(myCenter, 15);
}


function pinchAndPanL() {
hand.sync(1000);
f1.wait(200).moveTo(150, 300, 0)
.down()
.moveBy( -50, 0, 1500)
// .moveBy( -1, 0, 1500)
.moveBy( -50, 0, 1500)
.moveBy(0, 100, 1500)
.wait(1500)
.up();
f2.wait(200).moveTo(250, 300, 0)
.down()
.moveBy( 50, 0, 1500)
// .moveBy( 1, 0, 1500)
.moveBy( 50, 0, 1500)
.moveBy(0, 100, 1500)
.wait(1500)
.up();
};

function pinchAndPanV() {
hand.sync(1000);

var center =

f1.wait(200).moveTo(175, 100, 0)
.down()
.moveBy(-100, 300, 500)
.wait(2500)
.up();
f2.wait(200).moveTo(225, 100, 0)
.down()
.moveBy( 100, 300, 500)
.wait(2500)
.up();
};

function pinchAndPanII() {
hand.sync(5);
f1.wait(200).moveTo(175, 100, 0)
.down()
.moveBy(0, 300, 5000)
.wait(1500)
.up();
f2.wait(200).moveTo(225, 100, 0)
.down()
.moveBy(0, 300, 5000)
.wait(1500)
.up();
};




map.on('mousedown mouseup zoomend', function(ev){
// console.log('L: ', performance.now(), JSON.stringify(ev.originalEvent));
console.log('L: ', performance.now(), ev.type);
});

// L.DomEvent.on(map._container, 'touchstart touchend touchmove', function(ev){
// console.log('T: ', performance.now(), ev.type, ev.touches.length, ev.changedTouches.length, ev);
// });


// pinchAndPanL();
pinchAndPanV();
// pinchAndPanII();

</script>
</body>
</html>
3 changes: 1 addition & 2 deletions src/map/Map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,14 +559,13 @@ L.Map = L.Evented.extend({
if (zoom === undefined) {
zoom = this._zoom;
}

var zoomChanged = this._zoom !== zoom;

this._zoom = zoom;
this._lastCenter = center;
this._pixelOrigin = this._getNewPixelOrigin(center);

if (zoomChanged) {
if (zoomChanged || (data && data.pinch)) { // Always fire 'zoom' if pinching because #3530
this.fire('zoom', data);
}
return this.fire('move', data);
Expand Down
Loading