From 2bee0bf3d250ed7b34603c3ed8974f3db23d7214 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Tue, 17 Dec 2024 18:37:42 +0100
Subject: [PATCH] fix: store the "active" status of a feature

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  | 12 ++++++++++++
 umap/static/umap/js/modules/rendering/icon.js |  3 ++-
 umap/static/umap/js/modules/rendering/ui.js   |  6 ++++--
 umap/static/umap/js/modules/umap.js           |  8 ++++++++
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/umap/static/umap/js/modules/data/features.js b/umap/static/umap/js/modules/data/features.js
index a9171a72..f9455afc 100644
--- a/umap/static/umap/js/modules/data/features.js
+++ b/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 {
diff --git a/umap/static/umap/js/modules/rendering/icon.js b/umap/static/umap/js/modules/rendering/icon.js
index 6a90d480..83a0aeed 100644
--- a/umap/static/umap/js/modules/rendering/icon.js
+++ b/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()
diff --git a/umap/static/umap/js/modules/rendering/ui.js b/umap/static/umap/js/modules/rendering/ui.js
index 67add220..92486c4f 100644
--- a/umap/static/umap/js/modules/rendering/ui.js
+++ b/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()
   },
 
diff --git a/umap/static/umap/js/modules/umap.js b/umap/static/umap/js/modules/umap.js
index 279ac6ed..80ffe46b 100644
--- a/umap/static/umap/js/modules/umap.js
+++ b/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)