fix: store the "active" status of a feature (#2378)

Otherwise, when the marker is redrawn by Leaflet itself, it will lose
the status (the class we added manually will not be added by Leaflet).

Eg. if we click on a marker on the map border, this will move the map to
make the marker popup fit the screen, and thus this will redraw the
marker icon, which will then lose the "active" flag class.

umap/static/umap/js/modules/data/features.js

@@ -658,6 +658,18 @@ class Feature {
     )
     return items
   }
+
+  isActive() {
+    return this._umap.activeFeature === this
+  }
+
+  activate() {
+    this._umap.activeFeature = this
+  }
+
+  deactivate() {
+    if (this._umap.activeFeature === this) this._umap.activeFeature = undefined
+  }
 }
 
 export class Point extends Feature {

umap/static/umap/js/modules/rendering/icon.js

@@ -22,7 +22,7 @@ export function getClass(name) {
 
 export const RECENT = []
 
-const BaseIcon = L.DivIcon.extend({
+const BaseIcon = DivIcon.extend({
   initialize: function (options) {
     const default_options = {
       iconSize: null, // Made in css
@@ -86,6 +86,7 @@ const DefaultIcon = BaseIcon.extend({
   },
 
   _setIconStyles: function (img, name) {
+    if (this.feature.isActive()) this.options.className += ' umap-icon-active'
     BaseIcon.prototype._setIconStyles.call(this, img, name)
     const color = this._getColor()
     const opacity = this._getOpacity()

umap/static/umap/js/modules/rendering/ui.js

@@ -238,12 +238,14 @@ export const LeafletMarker = Marker.extend({
   },
 
   highlight: function () {
-    DomUtil.addClass(this.options.icon.elements.main, 'umap-icon-active')
+    this.feature.activate()
+    this._redraw()
     this._bringToFront()
   },
 
   resetHighlight: function () {
-    DomUtil.removeClass(this.options.icon.elements.main, 'umap-icon-active')
+    this.feature.deactivate()
+    this._redraw()
     this._resetZIndex()
   },
 

umap/static/umap/js/modules/umap.js

@@ -218,6 +218,14 @@ export default class Umap extends ServerStored {
     this.fire('seteditedfeature')
   }
 
+  get activeFeature() {
+    return this._activeFeature
+  }
+
+  set activeFeature(feature) {
+    this._activeFeature = feature
+  }
+
   setPropertiesFromQueryString() {
     const asBoolean = (key) => {
       const value = this.searchParams.get(key)