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

Move the proxy in to Map.ZoomAnimation as it is the only place that uses it. Use it to detect zoom animation finishing.

Browse Source
This commit is contained in:
Dave Leaver 2014-03-20 11:51:22 +13:00 committed by Vladimir Agafonkin
parent 97598d4241
commit b6c4ebdbca
2 changed files with 21 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/map/Map.js
View File

@ -48,8 +48,6 @@ L.Map = L.Evented.extend({
this.callInitHooks();
this._addLayers(this.options.layers);
this._createAnimProxy();
},
@ -497,34 +495,6 @@ L.Map = L.Evented.extend({
}
},
_createAnimProxy: function () {
var proxy = new L.Layer();
this._proxy = proxy;
proxy.onAdd = function () {
proxy._el = L.DomUtil.create('div', 'leaflet-proxy leaflet-zoom-animated');
proxy.getPane().appendChild(proxy._el);
this.update();
};
proxy._animateZoom = function (e) {
//TODO: Will probably need to do e.offset in the translate
L.DomUtil.setTransform(proxy._el, this._map.project(e.center, e.zoom), this._map.getZoomScale(e.zoom, 1));
console.log('anim', e.center);
};
proxy.update = function () {
var c = this._map.getCenter();
L.DomUtil.setTransform(proxy._el, this._map.project(c, this._map.getZoom()), this._map.getZoomScale(this._map.getZoom(), 1));
console.log('update', c);
};
proxy.getEvents = function () {
return { zoomanim: proxy._animateZoom, moveend: proxy.update };
};
this.addLayer(proxy);
},
// private methods that modify map state
_resetView: function (center, zoom, preserveMapOffset, afterZoomAnim) {

23
src/map/anim/Map.ZoomAnimation.js
View File

@ -18,13 +18,32 @@ if (zoomAnimated) {
// zoom transitions run with the same duration for all layers, so if one of transitionend events
// happens after starting zoom animation (propagating to the map pane), we know that it ended globally
if (this._zoomAnimated) {
L.DomEvent.on(this._mapPane, L.DomUtil.TRANSITION_END, this._catchTransitionEnd, this);
this._createAnimProxy();
L.DomEvent.on(this._proxy, L.DomUtil.TRANSITION_END, this._catchTransitionEnd, this);
}
});
}
L.Map.include(!zoomAnimated ? {} : {
_createAnimProxy: function () {
var proxy = this._proxy = L.DomUtil.create('div', 'leaflet-proxy leaflet-zoom-animated');
this._panes.mapPane.appendChild(proxy);
this.on('zoomanim', function (e) {
L.DomUtil.setTransform(proxy, this.project(e.center, e.zoom), this.getZoomScale(e.zoom, 1));
}, this);
this.on('load moveend', function () {
var c = this.getCenter(),
z = this.getZoom();
L.DomUtil.setTransform(proxy, this.project(c, z), this.getZoomScale(z, 1));
}, this);
},
_catchTransitionEnd: function (e) {
if (this._animatingZoom && e.propertyName.indexOf('transform') >= 0) {
this._onZoomTransitionEnd();
@ -91,7 +110,7 @@ L.Map.include(!zoomAnimated ? {} : {
//Extract zoom and translate from the matrix
var regex = /([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/,
style = window.getComputedStyle(this._proxy._el),
style = window.getComputedStyle(this._proxy),
matches = style[L.DomUtil.TRANSFORM].match(regex),
px = L.point(matches[2], matches[3]);