Fix cluster text color on Chrome and Co

fix #547

We need to call getComputedStyle only when element is
already added to the DOM.
This commit is contained in:
Yohan Boniface 2018-06-28 08:08:56 +02:00
parent 048c2afcc1
commit 73b8b60068
2 changed files with 23 additions and 5 deletions

View file

@ -155,23 +155,27 @@ L.U.Icon.Cluster = L.DivIcon.extend({
var container = L.DomUtil.create('div', 'leaflet-marker-icon marker-cluster'), var container = L.DomUtil.create('div', 'leaflet-marker-icon marker-cluster'),
div = L.DomUtil.create('div', '', container), div = L.DomUtil.create('div', '', container),
span = L.DomUtil.create('span', '', div), span = L.DomUtil.create('span', '', div),
backgroundColor = this.datalayer.getColor(), backgroundColor = this.datalayer.getColor();
color;
span.innerHTML = this.cluster.getChildCount(); span.innerHTML = this.cluster.getChildCount();
div.style.backgroundColor = backgroundColor; div.style.backgroundColor = backgroundColor;
return container;
},
computeTextColor: function (el) {
var color,
backgroundColor = this.datalayer.getColor();
if (this.datalayer.options.cluster && this.datalayer.options.cluster.textColor) { if (this.datalayer.options.cluster && this.datalayer.options.cluster.textColor) {
color = this.datalayer.options.cluster.textColor; color = this.datalayer.options.cluster.textColor;
} }
if (!color) { if (!color) {
if (typeof _CACHE_COLOR[backgroundColor] === 'undefined') { if (typeof _CACHE_COLOR[backgroundColor] === 'undefined') {
color = L.DomUtil.TextColorFromBackgroundColor(div); color = L.DomUtil.TextColorFromBackgroundColor(el);
_CACHE_COLOR[backgroundColor] = color; _CACHE_COLOR[backgroundColor] = color;
} else { } else {
color = _CACHE_COLOR[backgroundColor]; color = _CACHE_COLOR[backgroundColor];
} }
} }
div.style.color = color; return color;
return container;
} }
}); });

View file

@ -23,6 +23,19 @@ L.U.Layer.Default = L.FeatureGroup.extend({
}); });
L.U.MarkerCluster = L.MarkerCluster.extend({
// Custom class so we can call computeTextColor
// when element is already on the DOM.
_initIcon: function () {
L.MarkerCluster.prototype._initIcon.call(this);
var div = this._icon.querySelector('div');
// Compute text color only when icon is added to the DOM.
div.style.color = this._iconObj.computeTextColor(div);
}
});
L.U.Layer.Cluster = L.MarkerClusterGroup.extend({ L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
_type: 'Cluster', _type: 'Cluster',
includes: [L.U.Layer], includes: [L.U.Layer],
@ -41,6 +54,7 @@ L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
options.maxClusterRadius = this.datalayer.options.cluster.radius; options.maxClusterRadius = this.datalayer.options.cluster.radius;
} }
L.MarkerClusterGroup.prototype.initialize.call(this, options); L.MarkerClusterGroup.prototype.initialize.call(this, options);
this._markerCluster = L.U.MarkerCluster;
}, },
getEditableOptions: function () { getEditableOptions: function () {