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

translate/touch zoom refactoring

Browse Source
This commit is contained in:
mourner 2010-09-20 15:08:25 +03:00
parent 2bff672a01
commit 5fc294650e
2 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/dom/DomUtil.js
View File

@ -32,12 +32,17 @@ L.DomUtil = {
TRANSLATE_OPEN: 'translate' + (L.Browser.webkit3d ? '3d(' : '('),
TRANSLATE_CLOSE: L.Browser.webkit3d ? ',0)' : ')',
getTranslateString: function(point) {
return L.DomUtil.TRANSLATE_OPEN +
point.x + 'px,' + point.y + 'px' +
L.DomUtil.TRANSLATE_CLOSE;
},
setPosition: function(el, point) {
el._leaflet_pos = point;
if (L.Browser.webkit) {
el.style.webkitTransform = L.DomUtil.TRANSLATE_OPEN +
point.x + 'px,' + point.y + 'px' + L.DomUtil.TRANSLATE_CLOSE;
el.style.webkitTransform = L.DomUtil.getTranslateString(point);
} else {
el.style.left = point.x + 'px';
el.style.top = point.y + 'px';

41
src/handler/TouchZoom.js
View File

@ -1,8 +1,19 @@
L.Handler.TouchZoom = L.Handler.extend({
enable: function() {
if (!L.Browser.mobileWebkit) { return; }
if (!L.Browser.mobileWebkit || this._enabled) { return; }
L.DomEvent.addListener(this._map._container, 'touchstart', this._onTouchStart, this);
this._enabled = true;
},
disable: function() {
if (!L.Browser.mobileWebkit || !this._enabled) { return; }
L.DomEvent.removeListener(this._map._container, 'touchstart', this._onTouchStart, this);
this._enabled = false;
},
enabled: function() {
return !!this._enabled;
},
_getClientPoint: function(e) {
@ -22,7 +33,7 @@ L.Handler.TouchZoom = L.Handler.extend({
this._startDist = p1.distanceTo(p2);
this._startTransform = this._map._mapPane.style.webkitTransform;
this._centerOffset = this._map.getSize().divideBy(2, true).subtract(mapPanePos).subtract(this._startCenter);
this._centerOffset = this._map.getSize().divideBy(2).subtract(mapPanePos).subtract(this._startCenter);
L.DomEvent.addListener(document, 'touchmove', this._onTouchMove, this);
L.DomEvent.addListener(document, 'touchend', this._onTouchEnd, this);
@ -34,29 +45,26 @@ L.Handler.TouchZoom = L.Handler.extend({
if (!e.touches || e.touches.length != 2) { return; }
var p1 = this._getClientPoint(e.touches[0]),
p2 = this._getClientPoint(e.touches[1]),
dist = p1.distanceTo(p2);
p2 = this._getClientPoint(e.touches[1]);
this._scale = p1.distanceTo(p2) / this._startDist;
this._delta = p1.add(p2).divideBy(2, true).subtract(this._clientStartCenter);
this._scale = dist / this._startDist;
/*
* Used 2 translates instead of transform-origin because of a very strange bug -
* it didn't count the origin on the first touch-zoom but worked correctly afterwards
*/
var open = L.DomUtil.TRANSLATE_OPEN,
close = L.DomUtil.TRANSLATE_CLOSE;
/*this._map._mapPane.style.webkitTransformOrigin =
this._startCenter.x + 'px ' + this._startCenter.y + 'px';*/
this._map._mapPane.style.webkitTransform = this._transform = this._startTransform +
' ' + open + this._delta.x + 'px,' + this._delta.y + 'px' + close +
' ' + open + this._startCenter.x + 'px,' + this._startCenter.y + 'px' + close +
' scale(' + this._scale + ')' +
' ' + open + '-' + this._startCenter.x + 'px,-' + this._startCenter.y + 'px' + close;
this._map._mapPane.style.webkitTransform = [
this._startTransform,
L.DomUtil.getTranslateString(this._delta),
L.DomUtil.getTranslateString(this._startCenter),
'scale(' + this._scale + ')',
L.DomUtil.getTranslateString(this._startCenter.multiplyBy(-1))
].join(" ");
L.DomEvent.preventDefault(e);
},
@ -65,8 +73,9 @@ L.Handler.TouchZoom = L.Handler.extend({
if (!e.touches || e.touches.length >= 2 || !this._scale) { return; }
var zoom = this._map.getZoom() + Math.round(Math.log(this._scale)/Math.LN2),
centerOffset = this._centerOffset.subtract(this._delta).divideBy(this._scale, true),
center = this._map.unproject(this._map.getPixelOrigin().add(this._startCenter).add(centerOffset));
centerOffset = this._centerOffset.subtract(this._delta).divideBy(this._scale),
centerPoint = this._map.getPixelOrigin().add(this._startCenter).add(centerOffset),
center = this._map.unproject(centerPoint);
map.setView(center, zoom, true);