From 706859e22946a3f675e61f6e834a3384be522efd Mon Sep 17 00:00:00 2001 From: Ashley Hill Date: Tue, 29 Oct 2019 16:58:21 -0700 Subject: [PATCH 1/2] add event overlay --- .../src/markerclusterer.js | 43 +++++++++++++++---- 1 file changed, 34 insertions(+), 9 deletions(-) diff --git a/packages/markerclustererplus/src/markerclusterer.js b/packages/markerclustererplus/src/markerclusterer.js index 5cc0a1f8..1f263e1a 100644 --- a/packages/markerclustererplus/src/markerclusterer.js +++ b/packages/markerclustererplus/src/markerclusterer.js @@ -102,6 +102,7 @@ class ClusterIcon { this.styles_ = styles; this.center_ = null; this.div_ = null; + this.eventDiv_ = null; this.sums_ = null; this.visible_ = false; @@ -121,12 +122,17 @@ class ClusterIcon { this.div_ = document.createElement("div"); this.div_.className = this.className_; + this.eventDiv_ = this.div_.cloneNode(); + if (this.visible_) { this.show(); } - this.getPanes().overlayMouseTarget.appendChild(this.div_); + var panes = this.getPanes(); + panes.overlayLayer.appendChild(this.div_) + panes.overlayMouseTarget.appendChild(this.eventDiv_); + // Fix for Issue 157 this.boundsChangedListener_ = google.maps.event.addListener( this.getMap(), @@ -136,21 +142,20 @@ class ClusterIcon { } ); - google.maps.event.addDomListener(this.div_, "mousedown", function() { + google.maps.event.addDomListener(this.eventDiv_, "mousedown", function () { cMouseDownInCluster = true; cDraggingMapByCluster = false; }); // March 1, 2018: Fix for this 3.32 exp bug, https://issuetracker.google.com/issues/73571522 // But it doesn't work with earlier releases so do a version check. - if (gmVersion >= 332) { - // Ugly version-dependent code - google.maps.event.addDomListener(this.div_, "touchstart", function(e) { + if (gmVersion >= 332) { // Ugly version-dependent code + google.maps.event.addDomListener(this.eventDiv_, "touchstart", function (e) { e.stopPropagation(); }); } - google.maps.event.addDomListener(this.div_, "click", function(e) { + google.maps.event.addDomListener(this.eventDiv_, "click", function (e) { cMouseDownInCluster = false; if (!cDraggingMapByCluster) { var theBounds; @@ -190,7 +195,7 @@ class ClusterIcon { } }); - google.maps.event.addDomListener(this.div_, "mouseover", function() { + google.maps.event.addDomListener(this.eventDiv_, "mouseover", function () { var mc = cClusterIcon.cluster_.getMarkerClusterer(); /** * This event is fired when the mouse moves over a cluster marker. @@ -201,7 +206,7 @@ class ClusterIcon { google.maps.event.trigger(mc, "mouseover", cClusterIcon.cluster_); }); - google.maps.event.addDomListener(this.div_, "mouseout", function() { + google.maps.event.addDomListener(this.eventDiv_, "mouseout", function () { var mc = cClusterIcon.cluster_.getMarkerClusterer(); /** * This event is fired when the mouse moves out of a cluster marker. @@ -220,9 +225,11 @@ class ClusterIcon { if (this.div_ && this.div_.parentNode) { this.hide(); google.maps.event.removeListener(this.boundsChangedListener_); - google.maps.event.clearInstanceListeners(this.div_); + google.maps.event.clearInstanceListeners(this.eventDiv_); this.div_.parentNode.removeChild(this.div_); + this.eventDiv_.parentNode.removeChild(this.eventDiv_); this.div_ = null; + this.eventDiv_ = null; } } @@ -235,6 +242,8 @@ class ClusterIcon { this.div_.style.top = pos.y + "px"; this.div_.style.left = pos.x + "px"; this.div_.style.zIndex = google.maps.Marker.MAX_ZINDEX + 1; // Put above all unclustered markers + + this.syncDivStyle(); } } @@ -244,6 +253,7 @@ class ClusterIcon { hide() { if (this.div_) { this.div_.style.display = "none"; + this.syncDivStyle(); } this.visible_ = false; } @@ -336,10 +346,25 @@ class ClusterIcon { this.div_.title = this.sums_.title; } this.div_.style.display = ""; + + this.syncDivStyle({ + title: this.div_.title, + innerHTML: this.div_.innerHTML, + }); } this.visible_ = true; } + syncDivStyle(vars) { + if (vars) { + Object.assign(this.eventDiv_, vars); + } + if (this.eventDiv_ && this.div_) { + this.eventDiv_.style.cssText = this.div_.style.cssText; + this.eventDiv_.style.opacity = 0; + } + } + /** * Sets the icon styles to the appropriate element in the styles array. * From 1bb7600541929f31bbe5a892381fbb4f45ec9d66 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 29 Oct 2019 17:22:30 -0700 Subject: [PATCH 2/2] prettier --- .../src/markerclusterer.js | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/markerclustererplus/src/markerclusterer.js b/packages/markerclustererplus/src/markerclusterer.js index 1f263e1a..e4406ebf 100644 --- a/packages/markerclustererplus/src/markerclusterer.js +++ b/packages/markerclustererplus/src/markerclusterer.js @@ -130,9 +130,9 @@ class ClusterIcon { var panes = this.getPanes(); - panes.overlayLayer.appendChild(this.div_) + panes.overlayLayer.appendChild(this.div_); panes.overlayMouseTarget.appendChild(this.eventDiv_); - + // Fix for Issue 157 this.boundsChangedListener_ = google.maps.event.addListener( this.getMap(), @@ -142,20 +142,23 @@ class ClusterIcon { } ); - google.maps.event.addDomListener(this.eventDiv_, "mousedown", function () { + google.maps.event.addDomListener(this.eventDiv_, "mousedown", function() { cMouseDownInCluster = true; cDraggingMapByCluster = false; }); // March 1, 2018: Fix for this 3.32 exp bug, https://issuetracker.google.com/issues/73571522 // But it doesn't work with earlier releases so do a version check. - if (gmVersion >= 332) { // Ugly version-dependent code - google.maps.event.addDomListener(this.eventDiv_, "touchstart", function (e) { + if (gmVersion >= 332) { + // Ugly version-dependent code + google.maps.event.addDomListener(this.eventDiv_, "touchstart", function( + e + ) { e.stopPropagation(); }); } - google.maps.event.addDomListener(this.eventDiv_, "click", function (e) { + google.maps.event.addDomListener(this.eventDiv_, "click", function(e) { cMouseDownInCluster = false; if (!cDraggingMapByCluster) { var theBounds; @@ -195,7 +198,7 @@ class ClusterIcon { } }); - google.maps.event.addDomListener(this.eventDiv_, "mouseover", function () { + google.maps.event.addDomListener(this.eventDiv_, "mouseover", function() { var mc = cClusterIcon.cluster_.getMarkerClusterer(); /** * This event is fired when the mouse moves over a cluster marker. @@ -206,7 +209,7 @@ class ClusterIcon { google.maps.event.trigger(mc, "mouseover", cClusterIcon.cluster_); }); - google.maps.event.addDomListener(this.eventDiv_, "mouseout", function () { + google.maps.event.addDomListener(this.eventDiv_, "mouseout", function() { var mc = cClusterIcon.cluster_.getMarkerClusterer(); /** * This event is fired when the mouse moves out of a cluster marker. @@ -242,7 +245,7 @@ class ClusterIcon { this.div_.style.top = pos.y + "px"; this.div_.style.left = pos.x + "px"; this.div_.style.zIndex = google.maps.Marker.MAX_ZINDEX + 1; // Put above all unclustered markers - + this.syncDivStyle(); } } @@ -349,7 +352,7 @@ class ClusterIcon { this.syncDivStyle({ title: this.div_.title, - innerHTML: this.div_.innerHTML, + innerHTML: this.div_.innerHTML }); } this.visible_ = true;