From 6d56bbb5de98077a4fe8aa27ebd62487ebf8c7cd Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Tue, 12 Nov 2024 14:36:59 +0100 Subject: [PATCH] chore: refactore LeafletMap.setup/update --- umap/static/umap/js/modules/rendering/map.js | 24 +++++++++++++------ umap/static/umap/js/modules/umap.js | 23 +++++++----------- umap/tests/integration/test_websocket_sync.py | 8 +++---- 3 files changed, 30 insertions(+), 25 deletions(-) diff --git a/umap/static/umap/js/modules/rendering/map.js b/umap/static/umap/js/modules/rendering/map.js index 8a042f93..f4f5b573 100644 --- a/umap/static/umap/js/modules/rendering/map.js +++ b/umap/static/umap/js/modules/rendering/map.js @@ -306,8 +306,12 @@ const ControlsMixin = { }) }, - initCaptionBar: function () { - const container = DomUtil.create('div', 'umap-caption-bar', this._controlContainer) + renderCaptionBar: function () { + 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 + () => this.umap.openCaption() ) DomUtil.createButton( 'umap-open-browser-link flat', @@ -334,8 +337,8 @@ const ControlsMixin = { ) } } - this.umap.onceDatalayersLoaded(function () { - this.slideshow.renderToolbox(container) + this.umap.onceDatalayersLoaded(() => { + 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() diff --git a/umap/static/umap/js/modules/umap.js b/umap/static/umap/js/modules/umap.js index a5e93400..03c4dc2a 100644 --- a/umap/static/umap/js/modules/umap.js +++ b/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.initCaptionBar() - this._leafletMap.renderEditToolbar() - this._leafletMap.renderControls() + this._leafletMap.update() 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.setOptions(this.properties) - this._leafletMap.initTileLayers() - this._leafletMap.renderControls() - this._leafletMap.handleLimitBounds() + this._leafletMap.update() this.eachDataLayer((datalayer) => { if (mustReindex) datalayer.reindex() datalayer.redraw() diff --git a/umap/tests/integration/test_websocket_sync.py b/umap/tests/integration/test_websocket_sync.py index 87dd729e..8c99c366 100644 --- a/umap/tests/integration/test_websocket_sync.py +++ b/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")