wip: move back click handler to Leaflet Marker/Path

We tried to have only one listened at map level, but we get into
troubles with bindTooltip({permanent: false} and MarkerClusterGroup
stoping the event to each the map.

Let's go back to previous behaviour, and try later to clean this
event management.

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

@@ -602,7 +602,7 @@ export class Point extends Feature {
           builder.restoreField('ui._latlng.lng')
         }
         this.zoomTo({ easing: false })
-      }
+      },
     })
     const fieldset = DomUtil.createFieldset(container, translate('Coordinates'))
     fieldset.appendChild(builder.build())

umap/static/umap/js/modules/rendering/layers/cluster.js

@@ -100,9 +100,4 @@ export const Cluster = L.MarkerClusterGroup.extend({
       this.options.polygonOptions.color = this.datalayer.getColor()
     }
   },
-
-  // listens: function (type, propagate) {
-  //   L.MarkerClusterGroup.prototype.listens.call(this, type, propagate)
-  //   return Evented.prototype.listens.call(this, type, propagate)
-  // },
 })

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

@@ -32,6 +32,31 @@ const FeatureMixin = {
 
   addInteractions: function () {
     this.on('contextmenu editable:vertex:contextmenu', this._showContextMenu)
+    this.on('click', this.onClick)
+  },
+
+  onClick: function (event) {
+    if (this._map.measureTools?.enabled()) return
+    this._popupHandlersAdded = true // Prevent leaflet from managing event
+    if (!this._map.editEnabled) {
+      this.feature.view(event)
+    } else if (!this.feature.isReadOnly()) {
+      if (event.originalEvent.shiftKey) {
+        if (event.originalEvent.ctrlKey || event.originalEvent.metaKey) {
+          this.feature.datalayer.edit(event)
+        } else {
+          if (this.feature._toggleEditing) this.feature._toggleEditing(event)
+          else this.feature.edit(event)
+        }
+      } else if (!this._map.editTools?.drawing()) {
+        new L.Toolbar.Popup(event.latlng, {
+          className: 'leaflet-inplace-toolbar',
+          anchor: this.getPopupToolbarAnchor(),
+          actions: this.feature.getInplaceToolbarActions(event),
+        }).addTo(this._map, this.feature, event.latlng)
+      }
+    }
+    L.DomEvent.stop(event)
   },
 
   resetTooltip: function () {
@@ -112,6 +137,8 @@ const FeatureMixin = {
     this.geometryChanged(false)
     this.feature.onCommit()
   },
+
+  getPopupToolbarAnchor: () => [0, 0],
 }
 
 export const LeafletMarker = Marker.extend({
@@ -224,9 +251,8 @@ export const LeafletMarker = Marker.extend({
     DomUtil.removeClass(this.options.icon.elements.main, 'umap-icon-active')
   },
 
-  openPopup: function () {
+  getPopupToolbarAnchor: function () {
-    // Always open on marker position (vs click position for paths)
+    return this.options.icon.options.popupAnchor
-    this.parentClass.prototype.openPopup.apply(this, this.getCenter())
   },
 })
 

umap/static/umap/js/umap.js

@@ -193,7 +193,7 @@ U.Map = L.Map.extend({
     window.onbeforeunload = () => (this.editEnabled && this.isDirty) || null
     this.backup()
     this.initContextMenu()
-    this.on('click', this.onClick)
+    this.on('click', this.closeInplaceToolbar)
   },
 
   initSyncEngine: async function () {
@@ -1841,35 +1841,6 @@ U.Map = L.Map.extend({
     }
   },
 
-  onClick: function (event) {
-    const container = event.originalEvent.target.closest('[data-feature]')
-    if (container) {
-      const feature = this.getFeatureById(container.dataset.feature)
-      if (this.measureTools?.enabled()) return
-      this._popupHandlersAdded = true // Prevent leaflet from managing event
-      if (!this.editEnabled) {
-        feature.view(event)
-      } else if (!feature.isReadOnly()) {
-        if (event.originalEvent.shiftKey) {
-          if (event.originalEvent.ctrlKey || event.originalEvent.metaKey) {
-            feature.datalayer.edit(event)
-          } else {
-            if (feature._toggleEditing) feature._toggleEditing(event)
-            else feature.edit(event)
-          }
-        } else if (!this.editTools?.drawing()) {
-          new L.Toolbar.Popup(event.latlng, {
-            className: 'leaflet-inplace-toolbar',
-            actions: feature.getInplaceToolbarActions(event),
-          }).addTo(this, feature, event.latlng)
-        }
-      }
-      L.DomEvent.stop(event)
-    } else {
-      this.closeInplaceToolbar()
-    }
-  },
-
   closeInplaceToolbar: function () {
     const toolbar = this._toolbars[L.Toolbar.Popup._toolbar_class_id]
     if (toolbar) toolbar.remove()