cleanup and prettify animation code, more comments
This commit is contained in:
parent
9c2e7cfbd4
commit
a2890d6c4b
@ -691,12 +691,14 @@ L.Map = L.Class.extend({
|
||||
return this.project(latlng, newZoom)._subtract(topLeft);
|
||||
},
|
||||
|
||||
// layer point of the current center
|
||||
_getCenterLayerPoint: function () {
|
||||
return this.containerPointToLayerPoint(this.getSize()._divideBy(2));
|
||||
},
|
||||
|
||||
_getCenterOffset: function (center) {
|
||||
return this.latLngToLayerPoint(center).subtract(this._getCenterLayerPoint());
|
||||
// offset of the specified place to the current center in pixels
|
||||
_getCenterOffset: function (latlng) {
|
||||
return this.latLngToLayerPoint(latlng).subtract(this._getCenterLayerPoint());
|
||||
},
|
||||
|
||||
_limitZoom: function (zoom) {
|
||||
|
@ -5,38 +5,43 @@
|
||||
L.Map.include({
|
||||
|
||||
setView: function (center, zoom, forceReset) {
|
||||
|
||||
zoom = this._limitZoom(zoom);
|
||||
center = L.latLng(center);
|
||||
|
||||
var zoomChanged = (this._zoom !== zoom);
|
||||
if (this._panAnim) {
|
||||
this._panAnim.stop();
|
||||
}
|
||||
|
||||
if (this._loaded && !forceReset && this._layers) {
|
||||
var zoomChanged = (this._zoom !== zoom),
|
||||
canBeAnimated = this._loaded && !forceReset && !!this._layers;
|
||||
|
||||
if (this._panAnim) {
|
||||
this._panAnim.stop();
|
||||
}
|
||||
if (canBeAnimated) {
|
||||
|
||||
var done = (zoomChanged ?
|
||||
this._zoomToIfClose && this._zoomToIfClose(center, zoom) :
|
||||
this._panByIfClose(center));
|
||||
// try animating pan or zoom
|
||||
var animated = zoomChanged && this.options.zoomAnimation ?
|
||||
this._animateZoomIfClose && this._animateZoomIfClose(center, zoom) :
|
||||
this._animatePanIfClose(center);
|
||||
|
||||
// exit if animated pan or zoom started
|
||||
if (done) {
|
||||
if (animated) {
|
||||
// prevent resize handler call, the view will refresh after animation anyway
|
||||
clearTimeout(this._sizeTimer);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
// reset the map view
|
||||
// animation didn't start, just reset the map view
|
||||
this._resetView(center, zoom);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
panBy: function (offset, duration, easeLinearity, moving) {
|
||||
offset = L.point(offset);
|
||||
panBy: function (offset, duration, easeLinearity, noMoveStart) {
|
||||
offset = L.point(offset).round();
|
||||
|
||||
if (!(offset.x || offset.y)) {
|
||||
// TODO add options instead of arguments to setView/panTo/panBy/etc.
|
||||
|
||||
if (!offset.x && !offset.y) {
|
||||
return this;
|
||||
}
|
||||
|
||||
@ -49,13 +54,14 @@ L.Map.include({
|
||||
}, this);
|
||||
}
|
||||
|
||||
if (moving !== true) {
|
||||
// don't fire movestart if animating inertia
|
||||
if (!noMoveStart) {
|
||||
this.fire('movestart');
|
||||
}
|
||||
|
||||
L.DomUtil.addClass(this._mapPane, 'leaflet-pan-anim');
|
||||
|
||||
var newPos = L.DomUtil.getPosition(this._mapPane).subtract(offset)._round();
|
||||
var newPos = this._getMapPanePos().subtract(offset);
|
||||
this._panAnim.run(this._mapPane, newPos, duration || 0.25, easeLinearity);
|
||||
|
||||
return this;
|
||||
@ -70,22 +76,13 @@ L.Map.include({
|
||||
this.fire('moveend');
|
||||
},
|
||||
|
||||
_panByIfClose: function (center) {
|
||||
_animatePanIfClose: function (center) {
|
||||
// difference between the new and current centers in pixels
|
||||
var offset = this._getCenterOffset(center)._floor();
|
||||
|
||||
if (this._offsetIsWithinView(offset)) {
|
||||
this.panBy(offset);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
if (!this.getSize().contains(offset)) { return false; }
|
||||
|
||||
_offsetIsWithinView: function (offset, multiplyFactor) {
|
||||
var m = multiplyFactor || 1,
|
||||
size = this.getSize();
|
||||
|
||||
return (Math.abs(offset.x) <= size.x * m) &&
|
||||
(Math.abs(offset.y) <= size.y * m);
|
||||
this.panBy(offset);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
@ -7,31 +7,39 @@ L.Map.mergeOptions({
|
||||
});
|
||||
|
||||
if (L.DomUtil.TRANSITION) {
|
||||
|
||||
L.Map.addInitHook(function () {
|
||||
// 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
|
||||
|
||||
L.DomEvent.on(this._mapPane, L.DomUtil.TRANSITION_END, this._catchTransitionEnd, this);
|
||||
});
|
||||
}
|
||||
|
||||
L.Map.include(!L.DomUtil.TRANSITION ? {} : {
|
||||
|
||||
_zoomToIfClose: function (center, zoom) {
|
||||
_catchTransitionEnd: function () {
|
||||
if (this._animatingZoom) {
|
||||
this._onZoomTransitionEnd();
|
||||
}
|
||||
},
|
||||
|
||||
_animateZoomIfClose: function (center, zoom) {
|
||||
|
||||
if (this._animatingZoom) { return true; }
|
||||
|
||||
if (!this.options.zoomAnimation) { return false; }
|
||||
|
||||
// offset is the pixel coords of the zoom origin relative to the current center
|
||||
var scale = this.getZoomScale(zoom),
|
||||
offset = this._getCenterOffset(center)._divideBy(1 - 1 / scale);
|
||||
offset = this._getCenterOffset(center)._divideBy(1 - 1 / scale),
|
||||
origin = this._getCenterLayerPoint()._add(offset);
|
||||
|
||||
// if offset does not exceed half of the view
|
||||
if (!this._offsetIsWithinView(offset, 1)) { return false; }
|
||||
// only animate if the zoom origin is within one screen from the current center
|
||||
if (!this.getSize().contains(offset)) { return false; }
|
||||
|
||||
this
|
||||
.fire('movestart')
|
||||
.fire('zoomstart');
|
||||
|
||||
var origin = this._getCenterLayerPoint().add(offset);
|
||||
|
||||
this._animateZoom(center, zoom, origin, scale);
|
||||
|
||||
return true;
|
||||
@ -39,12 +47,16 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
|
||||
|
||||
_animateZoom: function (center, zoom, origin, scale, delta, backwards) {
|
||||
|
||||
L.DomUtil.addClass(this._mapPane, 'leaflet-zoom-anim');
|
||||
|
||||
this._animateToCenter = center;
|
||||
this._animateToZoom = zoom;
|
||||
this._animatingZoom = true;
|
||||
|
||||
// put transform transition on all layers with leaflet-zoom-animated class
|
||||
L.DomUtil.addClass(this._mapPane, 'leaflet-zoom-anim');
|
||||
|
||||
// remember what center/zoom to set after animation
|
||||
this._animateToCenter = center;
|
||||
this._animateToZoom = zoom;
|
||||
|
||||
// disable any dragging during animation
|
||||
if (L.Draggable) {
|
||||
L.Draggable._disabled = true;
|
||||
}
|
||||
@ -59,17 +71,12 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
|
||||
});
|
||||
},
|
||||
|
||||
_catchTransitionEnd: function () {
|
||||
if (this._animatingZoom) {
|
||||
this._onZoomTransitionEnd();
|
||||
}
|
||||
},
|
||||
|
||||
_onZoomTransitionEnd: function () {
|
||||
|
||||
this._animatingZoom = false;
|
||||
|
||||
L.DomUtil.removeClass(this._mapPane, 'leaflet-zoom-anim');
|
||||
|
||||
this._animatingZoom = false;
|
||||
this._resetView(this._animateToCenter, this._animateToZoom, true, true);
|
||||
|
||||
if (L.Draggable) {
|
||||
|
Loading…
Reference in New Issue
Block a user