Merge pull request #1160 from umap-project/smart-color

Allow to use properties as color value
This commit is contained in:
Yohan Boniface 2023-06-23 15:26:50 +02:00 committed by GitHub
commit bea0f441c3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 5 deletions

View file

@ -109,7 +109,7 @@ L.U.FeatureMixin = {
properties.unshift('properties.name')
builder = new L.U.FormBuilder(this, properties, {
id: 'umap-feature-properties',
callback: this.resetTooltip,
callback: this._redraw, // In case we have dynamic options…
})
container.appendChild(builder.build())
this.appendEditFieldsets(container)
@ -273,6 +273,18 @@ L.U.FeatureMixin = {
return value
},
getDynamicOption: function (option, fallback) {
let value = this.getOption(option, fallback)
// There is a variable inside.
if (typeof value === 'string' && value.indexOf('{') != -1) {
value = L.Util.greedyTemplate(value, this.properties)
// We've not been able to replace the variable, let's reset
// so we can set a decent default at next step.
if (value.indexOf('{') != -1) value = undefined
}
return value
},
zoomTo: function (e) {
e = e || {}
const easing = e.easing !== undefined ? e.easing : this.map.options.easing
@ -709,7 +721,7 @@ L.U.PathMixin = {
let option
for (const idx in this.styleOptions) {
option = this.styleOptions[idx]
options[option] = this.getOption(option)
options[option] = this.getDynamicOption(option)
}
if (options.interactive) this.options.pointerEvents = 'visiblePainted'
else this.options.pointerEvents = 'stroke'

View file

@ -24,7 +24,7 @@ L.U.Icon = L.DivIcon.extend({
_getColor: function () {
let color
if (this.feature) color = this.feature.getOption('color')
if (this.feature) color = this.feature.getDynamicOption('color')
else if (this.options.color) color = this.options.color
else color = this.map.getDefaultOption('color')
return color

View file

@ -373,6 +373,36 @@ describe('L.U.DataLayer', function () {
assert.ok(qs('div.icon_container'))
})
})
describe('#smart-options()', function () {
let poly, marker
before(function () {
this.datalayer.eachLayer(function (layer) {
if (!poly && layer instanceof L.Polygon) {
poly = layer
}
if (!marker && layer instanceof L.Marker) {
marker = layer
}
})
})
it('should parse color variable', function () {
let icon = qs('div.umap-div-icon .icon_container')
poly.properties.mycolor = 'DarkGoldenRod'
marker.properties.mycolor = 'DarkRed'
marker.properties._umap_options.color = undefined
assert.notOk(qs('path[fill="DarkGoldenRod"]'))
assert.equal(icon.style.backgroundColor, 'olivedrab')
this.datalayer.options.color = '{mycolor}'
this.datalayer.options.fillColor = '{mycolor}'
this.datalayer.indexProperties(poly)
this.datalayer.indexProperties(marker)
this.datalayer.redraw()
icon = qs('div.umap-div-icon .icon_container')
assert.equal(icon.style.backgroundColor, 'darkred')
assert.ok(qs('path[fill="DarkGoldenRod"]'))
})
})
describe('#advanced-filters()', function () {
before(function () {
this.server.respondWith(
@ -399,7 +429,5 @@ describe('L.U.DataLayer', function () {
// so it should not be affected by the filter
assert.ok(qs('path[fill="SteelBlue"]'))
})
})
})