chore: refactore LeafletMap.setup/update

umap/static/umap/js/modules/rendering/map.js

@@ -306,8 +306,12 @@ const ControlsMixin = {
     })
   },
 
-  initCaptionBar: function () {
+  renderCaptionBar: function () {
-    const container = DomUtil.create('div', 'umap-caption-bar', this._controlContainer)
+    if (this.options.noControl) return
+    const container =
+      this._controlContainer.querySelector('.umap-caption-bar') ||
+      DomUtil.create('div', 'umap-caption-bar', this._controlContainer)
+    container.innerHTML = ''
     const name = DomUtil.create('h3', 'map-name', container)
     DomEvent.disableClickPropagation(container)
     this.umap.addAuthorLink(container)
@@ -316,8 +320,7 @@ const ControlsMixin = {
         'umap-about-link flat',
         container,
         translate('Open caption'),
-        this.umap.openCaption,
+        () => this.umap.openCaption()
-        this
       )
       DomUtil.createButton(
         'umap-open-browser-link flat',
@@ -334,8 +337,8 @@ const ControlsMixin = {
         )
       }
     }
-    this.umap.onceDatalayersLoaded(function () {
+    this.umap.onceDatalayersLoaded(() => {
-      this.slideshow.renderToolbox(container)
+      this.umap.slideshow.renderToolbox(container)
     })
   },
 }
@@ -481,11 +484,18 @@ export const LeafletMap = BaseMap.extend({
     })
   },
 
-  attachToDom: function () {
+  setup: function () {
     this.initControls()
     // Needs locate control and hash to exist
     this.initCenter()
+    this.update()
+  },
+
+  update: function () {
+    this.setOptions(this.umap.properties)
     this.initTileLayers()
+    this.renderCaptionBar()
+    this.renderEditToolbar()
     // Needs tilelayer to exist for minimap
     this.renderControls()
     this.handleLimitBounds()

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

@@ -85,11 +85,16 @@ export default class Umap extends ServerStored {
     if (center) {
       this._leafletMap.options.center = this._leafletMap.latLng(center)
     }
-    this._leafletMap.attachToDom()
+
+    // Needed to render controls
+    this.permissions = new MapPermissions(this)
+    this.urls = new URLs(this.properties.urls)
+    this.slideshow = new Slideshow(this, this.properties.slideshow)
+
+    this._leafletMap.setup()
 
     if (geojson.properties.schema) this.overrideSchema(geojson.properties.schema)
 
-    this.urls = new URLs(this.properties.urls)
 
     this.panel = new Panel(this)
     this.dialog = new Dialog({ className: 'dark' })
@@ -171,15 +176,12 @@ export default class Umap extends ServerStored {
       await this.loadDataFromQueryString()
     }
 
-    this.slideshow = new Slideshow(this, this.properties.slideshow)
-    this.permissions = new MapPermissions(this)
     if (this.hasEditMode()) {
       this._leafletMap.initEditTools()
     }
 
     if (!this.properties.noControl) {
       this.initShortcuts()
-      this._leafletMap.initCaptionBar()
       this._leafletMap.on('contextmenu', this.onContextMenu)
       this.onceDataLoaded(this.setViewFromQueryString)
       this.propagate()
@@ -1253,10 +1255,7 @@ export default class Umap extends ServerStored {
     for (const impact of impacts) {
       switch (impact) {
         case 'ui':
-          this._leafletMap.setOptions(this.properties)
+          this._leafletMap.update()
-          this._leafletMap.initCaptionBar()
-          this._leafletMap.renderEditToolbar()
-          this._leafletMap.renderControls()
           this.browser.redraw()
           this.propagate()
           break
@@ -1499,11 +1498,7 @@ export default class Umap extends ServerStored {
       dataLayer.fromUmapGeoJSON(geojson)
     }
 
-    // TODO: refactor with leafletMap init / render
+    this._leafletMap.update()
-    this._leafletMap.setOptions(this.properties)
-    this._leafletMap.initTileLayers()
-    this._leafletMap.renderControls()
-    this._leafletMap.handleLimitBounds()
     this.eachDataLayer((datalayer) => {
       if (mustReindex) datalayer.reindex()
       datalayer.redraw()

umap/tests/integration/test_websocket_sync.py

@@ -193,7 +193,7 @@ def test_websocket_connection_can_sync_map_properties(
 
 @pytest.mark.xdist_group(name="websockets")
 def test_websocket_connection_can_sync_datalayer_properties(
-    context, live_server, websocket_server, tilelayer
+    new_page, live_server, websocket_server, tilelayer
 ):
     map = MapFactory(name="sync", edit_status=Map.ANONYMOUS)
     map.settings["properties"]["syncEnabled"] = True
@@ -201,9 +201,9 @@ def test_websocket_connection_can_sync_datalayer_properties(
     DataLayerFactory(map=map, data={})
 
     # Create two tabs
-    peerA = context.new_page()
+    peerA = new_page()
     peerA.goto(f"{live_server.url}{map.get_absolute_url()}?edit")
-    peerB = context.new_page()
+    peerB = new_page()
     peerB.goto(f"{live_server.url}{map.get_absolute_url()}?edit")
 
     # Layer addition, name and type are synced
@@ -215,7 +215,7 @@ def test_websocket_connection_can_sync_datalayer_properties(
     peerA.locator("body").press("Escape")
 
     peerB.get_by_role("link", name="Manage layers").click()
-    peerB.get_by_role("button", name="Edit").first.click()
+    peerB.locator(".panel.right").get_by_role("button", name="Edit").first.click()
     expect(peerB.locator('input[name="name"]')).to_have_value("synced layer!")
     expect(peerB.get_by_role("combobox")).to_have_value("Choropleth")