fix: better way to wait for panel transition end

Before this change, we had a corner case when closing
and reopening very fast a panel (example when a full redraw of a
feature is needed, eg. switching from route to normal line),
because the panel was considered closed, but the CSS transition
was never run as the panel was in fact already in its final
position.

Co-authored-by: David Larlet <david@larlet.fr>

Author: yohanboniface

umap/static/umap/css/form.css

@@ -549,10 +549,6 @@ i.info {
     background-image: url('../img/16-white.svg');
 }
 
-.with-transition {
-    transition: all .7s;
-}
-
 .umap-empty:before,
 .umap-to-polygon:before,
 .umap-clone:before,

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

@@ -59,13 +59,17 @@ export class Panel {
       if (isOpen) {
         resolve(this)
       } else {
-        this.container.addEventListener(
-          'transitionend',
-          () => {
-            resolve(this)
-          },
-          { once: true }
+        Promise.all(
+          this.container.getAnimations().map((animation) => animation.finished)
         )
+          .then(() => {
+            resolve(this)
+          })
+          .catch(() => {
+            // Panel has been removed, so the DOM has changed, so the animations
+            // were cancelled, we want the new panel callabck to be called anyway.
+            resolve(this)
+          })
         this.container.classList.add('on')
       }
     })

umap/static/umap/map.css

@@ -24,6 +24,13 @@ html[dir="rtl"] .leaflet-tooltip-pane>* {
     margin-inline-start: 5px;
 }
 
+/* *********** */
+/*   Generic   */
+/* *********** */
+.with-transition {
+    transition: all var(--transition);
+}
+
 /* *********** */
 /* Map details */
 /* *********** */
@@ -1069,7 +1076,7 @@ ul.photon-autocomplete {
     font-weight: bold;
 }
 
-.leaflet-overlay-pane > svg {
+.leaflet-overlay-pane>svg {
     z-index: var(--zindex-orphan-marker);
 }
 

umap/static/umap/vars.css

@@ -64,7 +64,9 @@
     --zindex-orphan-marker: 401;
 
     --block-shadow: 0 1px 7px var(--color-mediumGray);
+    --transition: 300ms;
 }
+
 .dark {
     --background-color: var(--color-darkGray);
     --text-color: #efefef;

umap/tests/integration/test_import.py

@@ -22,9 +22,8 @@ def test_layers_list_is_updated(live_server, tilelayer, page):
     page.locator("[name=layer-id]").select_option(label="Import in a new layer")
     page.get_by_role("button", name="Manage layers").click()
     page.get_by_role("button", name="Add a layer").click()
-    page.locator('input[name="name"]').click()
     page.locator('input[name="name"]').fill("foobar")
-    page.wait_for_timeout(300)  # Time for the input debounce.
+    page.wait_for_timeout(300)  # Wait for the input throttling.
     page.get_by_role("button", name=f"Import data ({modifier}+I)").click()
     # Should still work
     page.locator("[name=layer-id]").select_option(label="Import in a new layer")
@@ -108,9 +107,7 @@ def test_import_geojson_from_textarea(tilelayer, live_server, page):
     expect(markers).to_have_count(0)
     expect(paths).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.json"
     textarea.fill(path.read_text())
@@ -133,9 +130,7 @@ def test_import_invalid_data(tilelayer, live_server, page):
     expect(markers).to_have_count(0)
     expect(paths).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     textarea.fill("invalid data")
     for format in ["geojson", "csv", "gpx", "kml", "georss", "osm", "umap"]:
@@ -153,9 +148,7 @@ def test_import_kml_from_textarea(tilelayer, live_server, page):
     expect(markers).to_have_count(0)
     expect(paths).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.kml"
     textarea.fill(path.read_text())
@@ -177,9 +170,7 @@ def test_import_gpx_from_textarea(tilelayer, live_server, page, settings):
     expect(markers).to_have_count(0)
     expect(paths).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.gpx"
     textarea.fill(path.read_text())
@@ -234,9 +225,7 @@ def test_import_osm_from_textarea(tilelayer, live_server, page):
     markers = page.locator(".leaflet-marker-icon")
     expect(markers).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data_osm.json"
     textarea.fill(path.read_text())
@@ -254,9 +243,7 @@ def test_import_csv_from_textarea(tilelayer, live_server, page):
     markers = page.locator(".leaflet-marker-icon")
     expect(markers).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_data.csv"
     textarea.fill(path.read_text())
@@ -422,9 +409,7 @@ def test_import_geometry_collection(live_server, page, tilelayer):
     expect(markers).to_have_count(0)
     expect(paths).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     textarea.fill(json.dumps(data))
     page.locator('select[name="format"]').select_option("geojson")
@@ -477,9 +462,7 @@ def test_import_geometry_collection_in_feature(live_server, page, tilelayer):
     expect(markers).to_have_count(0)
     expect(paths).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     textarea.fill(json.dumps(data))
     page.locator('select[name="format"]').select_option("geojson")
@@ -513,9 +496,7 @@ def test_import_multipolygon(live_server, page, tilelayer):
     paths = page.locator("path")
     expect(paths).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     textarea.fill(json.dumps(data))
     page.locator('select[name="format"]').select_option("geojson")
@@ -545,9 +526,7 @@ def test_import_multipolyline(live_server, page, tilelayer):
     paths = page.locator("path")
     expect(paths).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     textarea.fill(json.dumps(data))
     page.locator('select[name="format"]').select_option("geojson")
@@ -577,9 +556,7 @@ def test_import_false_multipoint(live_server, page, tilelayer):
     markers = page.locator(".leaflet-marker-icon")
     expect(markers).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     textarea.fill(json.dumps(data))
     page.locator('select[name="format"]').select_option("geojson")
@@ -1056,9 +1033,7 @@ def test_import_osm_relation(tilelayer, live_server, page):
     paths = page.locator("path")
     expect(paths).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     file_path = Path(__file__).parent.parent / "fixtures/test_import_osm_relation.json"
     textarea.fill(file_path.read_text())
@@ -1076,9 +1051,7 @@ def test_import_georss_from_textarea(tilelayer, live_server, page):
     markers = page.locator(".leaflet-marker-icon")
     expect(markers).to_have_count(0)
     expect(layers).to_have_count(0)
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     textarea = page.locator(".umap-import textarea")
     path = Path(__file__).parent.parent / "fixtures/test_upload_georss.xml"
     textarea.fill(path.read_text())