fix: always unset editedFeature on editPanel close (#2237)

And only this panel.

This was creating a weird bug, steps to reproduce:

- create a marker
- shift-click on the marker to edit the layer (so without explicitly
closing the panel)
- try to type the layer name: the panel would close

This is also because currently the schema and render() are too dump, and
when any `name` is changed then the `data` reflow is called, while it
should not when editing the datalayer name.

We want to:
- have more targeted schema
- have more specific reflow in render

But that's for other PRs!

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

@@ -32,8 +32,10 @@ const FeatureMixin = {
     if (map.editedFeature === this.feature) {
       this.feature._marked_for_deletion = true
       this.feature.endEdit()
+      if (map.editedFeature === this.feature) {
         map.editPanel.close()
       }
+    }
   },
 
   _removeIcon: function () {

umap/static/umap/js/modules/ui/panel.js

@@ -25,6 +25,9 @@ export class Panel {
   }
 
   open({ content, className, actions = [] } = {}) {
+    if (this.isOpen()) {
+      this.onClose()
+    }
     this.container.className = `with-transition panel window ${this.className} ${
       this.mode || ''
     }`
@@ -71,10 +74,13 @@ export class Panel {
 
   close() {
     document.body.classList.remove(`panel-${this.className.split(' ')[0]}-on`)
+    this.onClose()
+  }
+
+  onClose() {
     if (DomUtil.hasClass(this.container, 'on')) {
       DomUtil.removeClass(this.container, 'on')
       this.map.invalidateSize({ pan: false })
-      this.map.editedFeature = null
     }
   }
 }
@@ -84,6 +90,11 @@ export class EditPanel extends Panel {
     super(map)
     this.className = 'right dark'
   }
+
+  onClose() {
+    super.onClose()
+    this.map.editedFeature = null
+  }
 }
 
 export class FullPanel extends Panel {

umap/static/umap/js/umap.controls.js

@@ -666,7 +666,7 @@ const ControlsMixin = {
       const connectedPeersCount = L.DomUtil.createButton(
         'leaflet-control-connected-peers',
         rightContainer,
-        '',
+        ''
       )
       L.DomEvent.on(connectedPeersCount, 'mouseover', () => {
         this.tooltip.open({
@@ -1182,17 +1182,6 @@ U.Editable = L.Editable.extend({
   initialize: function (map, options) {
     L.Editable.prototype.initialize.call(this, map, options)
     this.on('editable:drawing:click editable:drawing:move', this.drawingTooltip)
-    this.on('editable:drawing:end', (event) => {
-      this.map.tooltip.close()
-      // Leaflet.Editable will delete the drawn shape if invalid
-      // (eg. line has only one drawn point)
-      // So let's check if the layer has no more shape
-      if (!event.layer.feature.hasGeom()) {
-        event.layer.feature.del()
-      } else {
-        event.layer.feature.edit()
-      }
-    })
     // Layer for items added by users
     this.on('editable:drawing:cancel', (event) => {
       if (event.layer instanceof U.LeafletMarker) event.layer.feature.del()
@@ -1322,4 +1311,19 @@ U.Editable = L.Editable.extend({
     L.DomEvent.stop(e)
     e.cancel()
   },
+
+  onEscape: function () {
+    this.once('editable:drawing:end', (event) => {
+      this.map.tooltip.close()
+      // Leaflet.Editable will delete the drawn shape if invalid
+      // (eg. line has only one drawn point)
+      // So let's check if the layer has no more shape
+      if (!event.layer.feature.hasGeom()) {
+        event.layer.feature.del()
+      } else {
+        event.layer.feature.edit()
+      }
+    })
+    this.stopDrawing()
+  },
 })

umap/static/umap/js/umap.js

@@ -563,7 +563,7 @@ U.Map = L.Map.extend({
         if (this.importer.dialog.visible) {
           this.importer.dialog.close()
         } else if (this.editEnabled && this.editTools.drawing()) {
-          this.editTools.stopDrawing()
+          this.editTools.onEscape()
         } else if (this.measureTools.enabled()) {
           this.measureTools.stopDrawing()
         } else if (this.fullPanel?.isOpen()) {