nicolas/librenms
1
0
Fork 0
mirror of https://github.com/stylersnico/librenms.git synced 2026-07-25 16:08:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

Getting animated animationZoomOut working. Still breaks on a multizoom

Browse Source
This commit is contained in:
danzel
2012-07-19 10:32:25 +12:00
parent 92abbfd3b2
commit 1fcec54dcf
2 changed files with 88 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/MarkerCluster.js
+71
View File
@@ -6,6 +6,8 @@ L.MarkerCluster = L.Marker.extend({
this._childClusters = [];
this._childCount = 0;
this._haveGeneratedChildClusters = false;
this._bounds = new L.LatLngBounds();
this._addChild(a);
@@ -119,6 +121,33 @@ L.MarkerCluster = L.Marker.extend({
return false;
},
_recursivelyRemoveChildrenAndAddNowVisibleMarkers: function (bounds, depthToStartAt, depthToAnimateIn) {
//TODO: Care more about bounds?
var childClusters = this._childClusters,
markers = this._markers,
i;
if (depthToStartAt == 0) {
this._recursivelyRemoveChildrenFromMap(depthToAnimateIn);
} else {
for (i = childClusters.length - 1; i >= 0; i--) {
if (bounds.intersects(childClusters[i]._bounds)) {
childClusters[i]._recursivelyRemoveChildrenAndAddNowVisibleMarkers(bounds, depthToStartAt - 1, depthToAnimateIn);
}
}
if (depthToStartAt == 1) {
for (i = markers.length - 1; i >= 0; i--) {
var m = markers[i];
if (bounds.contains(m._latlng)) {
L.FeatureGroup.prototype.addLayer.call(this._group, m);
}
}
}
}
},
_recursivelyAnimateChildrenIn: function (center, depth) {
var markers = this._markers,
markersLength = markers.length,
@@ -150,6 +179,48 @@ L.MarkerCluster = L.Marker.extend({
}
},
_recursivelyAnimateChildrenInAndAddSelfToMap: function (bounds, depthToStartAt, depthToAnimateIn) {
//TODO: Care more about bounds?
var childClusters = this._childClusters,
i;
if (depthToStartAt == 0) {
this._recursivelyAnimateChildrenIn(this._group._map.latLngToLayerPoint(this.getLatLng()).round(), depthToAnimateIn);
//Add Self
if (bounds.contains(this._latlng)) { //Add the new cluster but have it be hidden (so it gets animated, display=none stops transition)
//TODO: depthToAnimateIn affects _isSingleParent, if there is a multizoom we may/may not be.
if (this._isSingleParent() && depthToAnimateIn == 1) { //If we are the same as our parent, don't do an animation, just immediately appear
this.setOpacity(1);
this._recursivelyRemoveChildrenFromMap(depthToAnimateIn); //Immediately
} else {
this.setOpacity(0);
}
this._addToMap();
}
} else {
for (i = childClusters.length - 1; i >= 0; i--) {
if (bounds.intersects(childClusters[i]._bounds)) {
childClusters[i]._recursivelyAnimateChildrenInAndAddSelfToMap(bounds, depthToStartAt - 1, depthToAnimateIn);
}
}
}
},
_recursivelyBecomeVisible: function (bounds, depth) {
if (depth == 0) {
this.setOpacity(1);
} else {
for (var i = this._childClusters.length - 1; i >= 0; i--) {
if (bounds.intersects(this._childClusters[i]._bounds)) {
this._childClusters[i]._recursivelyBecomeVisible(bounds, depth - 1);
}
}
}
},
_recursivelyAddChildrenToMap: function (startPos, depth, bounds) {
if (depth === 0) {
src/MarkerClusterGroup.js
+17 -14
View File
@@ -336,21 +336,17 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
}
});
L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST DO THE NON ANIMATED ONES FOR EASYNESS
L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
//Non Animated versions of everything
_animationStart: function () {
//Do nothing...
},
_animationZoomIn: function (previousZoomLevel, newZoomLevel) {
console.log('in ' + previousZoomLevel + ' ' + newZoomLevel + ' @ ' + this._topClusterLevel._zoom);
this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel - this._topClusterLevel._zoom + 1);
this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel - this._topClusterLevel._zoom + 1, this._getExpandedVisibleBounds());
},
//newLevelDepth: How deep down from _topClusterLevel the level we want to show is
//zoomOutDepth: How deep from ^^that level^^ to the currently shown level (that needs hiding)
_animationZoomOut: function (previousZoomLevel, newZoomLevel) {
console.log('out ' + previousZoomLevel + ' ' + newZoomLevel + ' @ ' + this._topClusterLevel._zoom);
this._topClusterLevel._recursivelyRemoveChildrenFromMap(this._currentShownBounds, previousZoomLevel - this._topClusterLevel._zoom + 1);
this._topClusterLevel._recursivelyAddChildrenToMap(null, newZoomLevel - this._topClusterLevel._zoom + 1, this._getExpandedVisibleBounds());
}
@@ -360,7 +356,7 @@ L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST D
_animationStart: function () {
this._map._mapPane.className += ' leaflet-cluster-anim';
},
_animationZoomIn: function (startingClusters, startingUnclustered, depth) {
_animationZoomIn: function (previousZoomLevel, newZoomLevel) {
var me = this,
map = this._map,
bounds = this._getExpandedVisibleBounds(),
@@ -418,13 +414,18 @@ L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST D
}, 250);
}, 0);
},
_animationZoomOut: function (newClusters, newUnclustered, depth) {
_animationZoomOut: function (previousZoomLevel, newZoomLevel) {
var map = this._map,
bounds = this._getExpandedVisibleBounds(),
i;
i,
depthToStartAt = previousZoomLevel - this._topClusterLevel._zoom,
depthToAnimateIn = previousZoomLevel - newZoomLevel;
console.log('animationZoomOut ' + depthToStartAt + ' ' + depthToAnimateIn);
//Animate all of the markers in the clusters to move to their cluster center point
for ( i = 0; i < newClusters.length; i++) {
//bounds, depthToStartAt, depthToAnimateIn
this._topClusterLevel._recursivelyAnimateChildrenInAndAddSelfToMap(bounds, depthToStartAt, depthToAnimateIn);
/*for ( i = 0; i < newClusters.length; i++) {
var c = newClusters[i];
c._recursivelyAnimateChildrenIn(this._map.latLngToLayerPoint(c.getLatLng()).round(), depth);
@@ -439,27 +440,29 @@ L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST D
}
c._addToMap();
}
}
}*/
this._inZoomAnimation++;
var me = this;
//Immediately fire an event to update the opacity (If we immediately set it they won't animate)
setTimeout(function () {
for (i = 0; i < newClusters.length; i++) {
me._topClusterLevel._recursivelyBecomeVisible(bounds, depthToStartAt);
/*for (i = 0; i < newClusters.length; i++) {
var n = newClusters[i];
if (n._icon) {
n.setOpacity(1);
}
}
}*/
}, 0);
//TODO: Maybe use the transition timing stuff to make this more reliable
setTimeout(function () {
map._mapPane.className = map._mapPane.className.replace(' leaflet-cluster-anim', '');
for (i = 0; i < newClusters.length; i++) {
me._topClusterLevel._recursivelyRemoveChildrenAndAddNowVisibleMarkers(bounds, depthToStartAt, depthToAnimateIn);
/*for (i = 0; i < newClusters.length; i++) {
var cl = newClusters[i];
cl._recursivelyRemoveChildrenFromMap(depth);
}
@@ -468,7 +471,7 @@ L.MarkerClusterGroup.include(true /*!L.DomUtil.TRANSITION*/ ? { //HACK TO JUST D
if (bounds.contains(m._latlng)) {
L.FeatureGroup.prototype.addLayer.call(me, m);
}
}
}*/
me._inZoomAnimation--;
}, 250);
}