From 1fcec54dcfd3e24b9b3da9f18619cafbec7f0a99 Mon Sep 17 00:00:00 2001 From: danzel Date: Thu, 19 Jul 2012 10:32:25 +1200 Subject: [PATCH] Getting animated animationZoomOut working. Still breaks on a multizoom --- src/MarkerCluster.js | 71 +++++++++++++++++++++++++++++++++++++++ src/MarkerClusterGroup.js | 31 +++++++++-------- 2 files changed, 88 insertions(+), 14 deletions(-) diff --git a/src/MarkerCluster.js b/src/MarkerCluster.js index 05f134a8d..ec8b97c7f 100644 --- a/src/MarkerCluster.js +++ b/src/MarkerCluster.js @@ -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) { diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js index a6f422e83..28ecbbd93 100644 --- a/src/MarkerClusterGroup.js +++ b/src/MarkerClusterGroup.js @@ -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); }