Remove remaining hacks from Map.ZoomAnimation and implement them prop…

…erly (using events) in Marker and Popup.
danzel · Jun 18, 2012 · c04020a · c04020a
1 parent 1ac3a1b
commit c04020a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 34 deletions.
diff --git a/src/layer/Popup.js b/src/layer/Popup.js
@@ -35,6 +35,9 @@ L.Popup = L.Class.extend({
 		map._panes.popupPane.appendChild(this._container);
 
 		map.on('viewreset', this._updatePosition, this);
+		if (L.Browser.webkit3d || L.Browser.gecko3d) {
+			map.on('zoomstart', this._zoomAnimation, this);
+		}
 
 		if (map.options.closePopupOnClick) {
 			map.on('preclick', this._close, this);
@@ -51,7 +54,8 @@ L.Popup = L.Class.extend({
 		L.Util.falseFn(this._container.offsetWidth);
 
 		map.off('viewreset', this._updatePosition, this)
-		   .off('preclick', this._close, this);
+		   .off('preclick', this._close, this)
+		   .off('zoomstart', this._zoomAnimation, this);
 
 		this._container.style.opacity = '0';
 
@@ -171,6 +175,12 @@ L.Popup = L.Class.extend({
 
 		L.DomUtil.setPosition(this._container, pos);
 	},
+
+	_zoomAnimation: function (opt) {
+		var pos = this._map.containerPointToLayerPoint(this._map.project(this._latlng, opt.zoom))._subtract(opt.newTopLeft)._round();
+
+		L.DomUtil.setPosition(this._container, pos);
+	},
 
 	_adjustPan: function () {
 		if (!this.options.autoPan) { return; }

diff --git a/src/layer/marker/Marker.js b/src/layer/marker/Marker.js
@@ -24,6 +24,9 @@ L.Marker = L.Class.extend({
 		this._map = map;
 
 		map.on('viewreset', this._reset, this);
+		if (L.Browser.webkit3d || L.Browser.gecko3d) {
+			map.on('zoomstart', this._zoomAnimation, this);
+		}
 
 		this._initIcon();
 		this._reset();
@@ -37,7 +40,8 @@ L.Marker = L.Class.extend({
 			this.closePopup();
 		}
 
-		map.off('viewreset', this._reset, this);
+		map.off('viewreset', this._reset, this)
+		   .off('zoomstart', this._zoomAnimation, this);
 
 		this._map = null;
 	},
@@ -130,6 +134,15 @@ L.Marker = L.Class.extend({
 		icon.style.zIndex = pos.y + this.options.zIndexOffset;
 	},
 
+	_zoomAnimation: function (opt) {
+		var pos = this._map.containerPointToLayerPoint(this._map.project(this._latlng, opt.zoom))._subtract(opt.newTopLeft)._round();
+
+		L.DomUtil.setPosition(this._icon, pos);
+		if (this._shadow) {
+			L.DomUtil.setPosition(this._shadow, pos);
+		}
+	},
+
 	_initInteraction: function () {
 		if (!this.options.clickable) {
 			return;

diff --git a/src/map/Map.js b/src/map/Map.js
@@ -454,7 +454,7 @@ L.Map = L.Class.extend({
 			this.fire('movestart');
 
 			if (zoomChanged) {
-				this.fire('zoomstart', { center: center, zoom: zoom });
+				this.fire('zoomstart', { center: center, zoom: zoom, newTopLeft: this._getNewTopLeftPoint(center, zoom) });
 			}
 		}
 
@@ -583,10 +583,10 @@ L.Map = L.Class.extend({
 		return this._initialTopLeftPoint.subtract(mapPanePos);
 	},
 
-	_getNewTopLeftPoint: function (center) {
+	_getNewTopLeftPoint: function (center, zoom) {
 		var viewHalf = this.getSize().divideBy(2);
 		// TODO round on display, not calculation to increase precision?
-		return this.project(center)._subtract(viewHalf)._round();
+		return this.project(center, zoom)._subtract(viewHalf)._round();
 	},
 
 	_limitZoom: function (zoom) {

diff --git a/src/map/anim/Map.ZoomAnimation.js b/src/map/anim/Map.ZoomAnimation.js
@@ -24,7 +24,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
 
 		this
 			.fire('movestart')
-			.fire('zoomstart', { center: center, zoom: zoom });
+			.fire('zoomstart', { center: center, zoom: zoom, newTopLeft: this._getNewTopLeftPoint(center, zoom) });
 
 		//Hack: Disable this for android due to it not supporting double translate (mentioned in _runAnimation below)
 		//if Foreground layer doesn't have many tiles but bg layer does, keep the existing bg layer
@@ -40,34 +40,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
 
 		var centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
 			origin = centerPoint.add(offset);
-
-		var zoomBackup = this._zoom;
-		this._zoom = zoom;
-
-		var tlBackup = this._initialTopLeftPoint;
-		this._initialTopLeftPoint = this._getNewTopLeftPoint(center).add(L.DomUtil.getPosition(this._mapPane)); // this._getNewTopLeftPoint(center);
-
-		for (var i in this._layers) {
-			if ((!this._layers[i]._icon && !this._layers[i]._container) || !this._layers[i]._latlng || this._layers[i]._path)
-			//if ((!this._layers[i]._icon && !this._layers[i]._container) || !this._layers[i]._latlng)
-				continue;
-
-			var box = this._layers[i]._icon || this._layers[i]._container;
-			var np = this.latLngToLayerPoint(this._layers[i]._latlng);
-
-			//L.Util.falseFn(box.offsetWidth);
-
-			box.style[L.DomUtil.TRANSFORM] = 'translate3d(' + np.x + 'px,' + np.y + 'px,0)';
-
-			box = this._layers[i]._shadow;
-			if (box) {
-				box.style[L.DomUtil.TRANSFORM] = 'translate3d(' + np.x + 'px,' + np.y + 'px,0)';
-			}
-		}
-		this._zoom = zoomBackup;
-		this._initialTopLeftPoint = tlBackup;
-
-
+
 		this._runAnimation(center, zoom, scale, origin);
 
 		return true;