Skip to content

Commit

Permalink
Merge pull request #4340 from Leaflet/bounce-touch
Browse files Browse the repository at this point in the history 
Fix zoom handling on Map.TouchZoom
  • Loading branch information
@mourner
mourner committed Mar 22, 2016
2 parents 6262d64 + 6829134 commit 73c8242
Show file tree
Hide file tree
Showing 4 changed files with 386 additions and 9 deletions.
223 changes: 223 additions & 0 deletions debug/tests/touch-shake.html
View file
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
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
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

0 comments on commit 73c8242

Please sign in to comment.