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

@@ -1,13 +1,37 @@
-import { uMapAlert as Alert } from '../components/alerts/alert.js'
+import {
-import { AjaxAutocomplete, AjaxAutocompleteMultiple } from './autocomplete.js'
+  uMapAlert as Alert,
+  uMapAlertCreation as AlertCreation,
+} from '../components/alerts/alert.js'
+import {
+  AjaxAutocomplete,
+  AjaxAutocompleteMultiple,
+  AutocompleteDatalist,
+} from './autocomplete.js'
+import Browser from './browser.js'
+import Caption from './caption.js'
+import ContextMenu from './ui/contextmenu.js'
+import Facets from './facets.js'
+import { Formatter } from './formatter.js'
 import Help from './help.js'
-import { ServerRequest } from './request.js'
+import Importer from './importer.js'
+import Orderable from './orderable.js'
+import { HTTPError, NOKError, Request, RequestError, ServerRequest } from './request.js'
+import Rules from './rules.js'
 import { SCHEMA } from './schema.js'
+import Share from './share.js'
+import Slideshow from './slideshow.js'
+import { SyncEngine } from './sync/engine.js'
+import Dialog from './ui/dialog.js'
+import { EditPanel, FullPanel, Panel } from './ui/panel.js'
+import Tooltip from './ui/tooltip.js'
+import URLs from './urls.js'
 import * as Utils from './utils.js'
 import * as Icon from './rendering/icon.js'
-import { LAYER_TYPES } from './data/layer.js'
+import { DataLayer, LAYER_TYPES } from './data/layer.js'
+import { DataLayerPermissions, MapPermissions } from './permissions.js'
 import { Point, LineString, Polygon } from './data/features.js'
 import { LeafletMarker, LeafletPolyline, LeafletPolygon } from './rendering/ui.js'
+import * as SAVEMANAGER from './saving.js'
 
 // Import modules and export them to the global scope.
 // For the not yet module-compatible JS out there.
@@ -15,18 +39,45 @@ import { LeafletMarker, LeafletPolyline, LeafletPolygon } from './rendering/ui.j
 // By alphabetic order
 window.U = {
   Alert,
+  AlertCreation,
   AjaxAutocomplete,
   AjaxAutocompleteMultiple,
+  AutocompleteDatalist,
+  Browser,
+  Caption,
+  ContextMenu,
+  DataLayer,
+  DataLayerPermissions,
+  Dialog,
+  EditPanel,
+  Facets,
+  Formatter,
+  FullPanel,
   Help,
+  HTTPError,
   Icon,
+  Importer,
   LAYER_TYPES,
   LeafletMarker,
   LeafletPolygon,
   LeafletPolyline,
   LineString,
+  MapPermissions,
+  NOKError,
+  Orderable,
+  Panel,
   Point,
   Polygon,
+  Request,
+  RequestError,
+  Rules,
+  SAVEMANAGER,
   SCHEMA,
   ServerRequest,
+  Share,
+  Slideshow,
+  SyncEngine,
+  Tooltip,
+  URLs,
   Utils,
 }

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

@@ -1,7 +1,6 @@
 import { DomEvent, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from './i18n.js'
 import * as Utils from './utils.js'
-import Dialog from './ui/dialog.js'
 
 const SHORTCUTS = {
   DRAW_MARKER: {
@@ -167,7 +166,7 @@ const ENTRIES = {
 export default class Help {
   constructor(umap) {
     this.umap = umap
-    this.dialog = new Dialog({ className: 'dark', accept: false, cancel: false })
+    this.dialog = new U.Dialog({ className: 'dark', accept: false, cancel: false })
     this.isMacOS = /mac/i.test(
       // eslint-disable-next-line compat/compat -- Fallback available.
       navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform

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

@@ -251,6 +251,7 @@ export default class Importer {
   }
 
   full() {
+    this.umap._leafletMap.once('postsync', this.umap._leafletMap._setDefaultCenter)
     try {
       if (this.files.length) {
         for (const file of this.files) {

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

@@ -193,6 +193,7 @@ export class MapPermissions extends ServerStored {
     )
     if (!error) {
       this.commit()
+      this.umap._leafletMap.fire('postsync')
       return true
     }
   }

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

@@ -12,7 +12,6 @@ import { translate } from '../i18n.js'
 import { uMapAlert as Alert } from '../../components/alerts/alert.js'
 import * as Utils from '../utils.js'
 import * as Icon from './icon.js'
-import ContextMenu from '../ui/contextmenu.js'
 
 // Those options are not saved on the server, so they can live here
 // instead of in umap.properties
@@ -204,7 +203,7 @@ const ControlsMixin = {
         </button>
         `)
       rightContainer.appendChild(button)
-      const menu = new ContextMenu({ className: 'dark', fixed: true })
+      const menu = new U.ContextMenu({ className: 'dark', fixed: true })
       const actions = [
         {
           label: translate('New map'),
@@ -253,7 +252,7 @@ const ControlsMixin = {
       })
 
       const updateConnectedPeersCount = () => {
-        connectedPeersCount.innerHTML = this.umap.sync.getNumberOfConnectedPeers()
+        connectedPeersCount.innerHTML = this.sync.getNumberOfConnectedPeers()
       }
       updateConnectedPeersCount()
     }
@@ -307,12 +306,8 @@ const ControlsMixin = {
     })
   },
 
-  renderCaptionBar: function () {
+  initCaptionBar: function () {
-    if (this.options.noControl) return
+    const container = DomUtil.create('div', 'umap-caption-bar', this._controlContainer)
-    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)
@@ -321,7 +316,8 @@ const ControlsMixin = {
         'umap-about-link flat',
         container,
         translate('Open caption'),
-        () => this.umap.openCaption()
+        this.umap.openCaption,
+        this
       )
       DomUtil.createButton(
         'umap-open-browser-link flat',
@@ -338,8 +334,8 @@ const ControlsMixin = {
         )
       }
     }
-    this.umap.onceDatalayersLoaded(() => {
+    this.umap.onceDatalayersLoaded(function () {
-      this.umap.slideshow.renderToolbox(container)
+      this.slideshow.renderToolbox(container)
     })
   },
 }
@@ -485,18 +481,11 @@ export const LeafletMap = BaseMap.extend({
     })
   },
 
-  setup: function () {
+  attachToDom: 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/rules.js

@@ -2,7 +2,6 @@ import { DomEvent, DomUtil, stamp } from '../../vendors/leaflet/leaflet-src.esm.
 import { translate } from './i18n.js'
 import * as Utils from './utils.js'
 import { AutocompleteDatalist } from './autocomplete.js'
-import Orderable from './orderable.js'
 
 const EMPTY_VALUES = ['', undefined, null]
 
@@ -237,7 +236,7 @@ export default class Rules {
         rule.renderToolbox(DomUtil.create('li', 'orderable', ul))
       }
 
-      const orderable = new Orderable(ul, this.onReorder.bind(this))
+      const orderable = new U.Orderable(ul, this.onReorder.bind(this))
     }
 
     DomUtil.createButton('umap-add', body, translate('Add rule'), this.addRule, this)

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

@@ -83,7 +83,7 @@ export default class Slideshow extends WithTemplate {
 
   play() {
     if (this._id) return
-    if (this.umap.editEnabled || !this.umap.properties.slideshow.active) return
+    if (this.umap.editEnabled || !this.umap.options.slideshow.active) return
     L.DomUtil.addClass(document.body, this.CLASSNAME)
     this._id = window.setInterval(L.bind(this.loop, this), this.options.delay)
     this.startSpinner()

umap/static/umap/js/modules/sync/updaters.js

@@ -6,8 +6,8 @@ import { fieldInSchema } from '../utils.js'
  */
 
 class BaseUpdater {
-  constructor(umap) {
+  constructor(map) {
-    this.umap = umap
+    this.map = map
   }
 
   updateObjectValue(obj, key, value) {
@@ -32,8 +32,8 @@ class BaseUpdater {
   }
 
   getDataLayerFromID(layerId) {
-    if (layerId) return this.umap.getDataLayerByUmapId(layerId)
+    if (layerId) return this.map.getDataLayerByUmapId(layerId)
-    return this.umap.defaultEditDataLayer()
+    return this.map.defaultEditDataLayer()
   }
 
   applyMessage(payload) {
@@ -45,18 +45,18 @@ class BaseUpdater {
 export class MapUpdater extends BaseUpdater {
   update({ key, value }) {
     if (fieldInSchema(key)) {
-      this.updateObjectValue(this.umap, key, value)
+      this.updateObjectValue(this.map, key, value)
     }
 
-    this.umap.render([key])
+    this.map.render([key])
   }
 }
 
 export class DataLayerUpdater extends BaseUpdater {
   upsert({ value }) {
     // Inserts does not happen (we use multiple updates instead).
-    this.umap.createDataLayer(value, false)
+    this.map.createDataLayer(value, false)
-    this.umap.render([])
+    this.map.render([])
   }
 
   update({ key, metadata, value }) {

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

@@ -32,7 +32,6 @@ import {
   uMapAlertCreation as AlertCreation,
   uMapAlert as Alert,
 } from '../components/alerts/alert.js'
-import Orderable from './orderable.js'
 
 export default class Umap extends ServerStored {
   constructor(element, geojson) {
@@ -86,16 +85,11 @@ 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' })
@@ -177,12 +171,15 @@ 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()
@@ -1248,7 +1245,7 @@ export default class Umap extends ServerStored {
 
   render(fields) {
     if (fields.includes('numberOfConnectedPeers')) {
-      this._leafletMap.renderEditToolbar()
+      this.renderEditToolbar()
       this.propagate()
     }
 
@@ -1256,7 +1253,10 @@ export default class Umap extends ServerStored {
     for (const impact of impacts) {
       switch (impact) {
         case 'ui':
-          this._leafletMap.update()
+          this._leafletMap.setOptions(this.properties)
+          this._leafletMap.initCaptionBar()
+          this._leafletMap.renderEditToolbar()
+          this._leafletMap.renderControls()
           this.browser.redraw()
           this.propagate()
           break
@@ -1383,7 +1383,7 @@ export default class Umap extends ServerStored {
       })
       this.indexDatalayers()
     }
-    const orderable = new Orderable(ul, onReorder)
+    const orderable = new U.Orderable(ul, onReorder)
 
     const bar = DomUtil.create('div', 'button-bar', container)
     DomUtil.createButton(
@@ -1499,13 +1499,17 @@ export default class Umap extends ServerStored {
       dataLayer.fromUmapGeoJSON(geojson)
     }
 
-    this._leafletMap.update()
+    // TODO: refactor with leafletMap init / render
+    this._leafletMap.setOptions(this.properties)
+    this._leafletMap.initTileLayers()
+    this._leafletMap.renderControls()
+    this._leafletMap.handleLimitBounds()
     this.eachDataLayer((datalayer) => {
       if (mustReindex) datalayer.reindex()
       datalayer.redraw()
     })
     this.propagate()
-    this._leafletMap._setDefaultCenter()
+    this._leafletMap.fire('postsync')
     this.isDirty = true
   }
 

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

@@ -66,10 +66,7 @@ export function getImpactsFromSchema(fields, schema) {
 export function fieldInSchema(field, schema) {
   const current_schema = schema || U.SCHEMA
   if (typeof field !== 'string') return false
-  const field_name = field
+  const field_name = field.replace('options.', '').split('.')[0]
-    .replace('options.', '')
-    .replace('properties.', '')
-    .split('.')[0]
   return current_schema[field_name] !== undefined
 }
 

umap/static/umap/js/umap.js

@@ -0,0 +1,215 @@
+L.Map.mergeOptions({
+  overlay: {},
+  datalayers: [],
+  maxZoomLimit: 24,
+  attributionControl: false,
+  editMode: 'advanced',
+  noControl: false, // Do not render any control.
+  name: '',
+  description: '',
+  // When a TileLayer is in TMS mode, it needs -y instead of y.
+  // This is usually handled by the TileLayer instance itself, but
+  // we cannot rely on this because of the y is overriden by Leaflet
+  // See https://github.com/Leaflet/Leaflet/pull/9201
+  // And let's remove this -y when this PR is merged and released.
+  demoTileInfos: { s: 'a', z: 9, x: 265, y: 181, '-y': 181, r: '' },
+  licences: [],
+  licence: '',
+  slideshow: {},
+  clickable: true,
+  permissions: {},
+  featuresHaveOwner: false,
+})
+
+U.Map = L.Map.extend({
+  includes: [ControlsMixin],
+
+  initialize: async function (el, geojson) {
+    this.sync_engine = new U.SyncEngine(this)
+    this.sync = this.sync_engine.proxy(this)
+    // Locale name (pt_PT, en_US…)
+    // To be used for Django localization
+    if (geojson.properties.locale) L.setLocale(geojson.properties.locale)
+
+    // Language code (pt-pt, en-us…)
+    // To be used in javascript APIs
+    if (geojson.properties.lang) L.lang = geojson.properties.lang
+
+    this.setOptionsFromQueryString(geojson.properties)
+    // Prevent default creation of controls
+    const zoomControl = geojson.properties.zoomControl
+    const fullscreenControl = geojson.properties.fullscreenControl
+    geojson.properties.zoomControl = false
+    geojson.properties.fullscreenControl = false
+
+    L.Map.prototype.initialize.call(this, el, geojson.properties)
+
+    if (geojson.properties.schema) this.overrideSchema(geojson.properties.schema)
+
+    // After calling parent initialize, as we are doing initCenter our-selves
+    if (geojson.geometry) this.options.center = this.latLng(geojson.geometry)
+    this.urls = new U.URLs(this.options.urls)
+
+    this.panel = new U.Panel(this)
+    this.dialog = new U.Dialog({ className: 'dark' })
+    this.tooltip = new U.Tooltip(this._controlContainer)
+    this.contextmenu = new U.ContextMenu()
+    if (this.hasEditMode()) {
+      this.editPanel = new U.EditPanel(this)
+      this.fullPanel = new U.FullPanel(this)
+    }
+    if (!this.options.noControl) {
+      L.DomEvent.on(document.body, 'dataloading', (e) => this.fire('dataloading', e))
+      L.DomEvent.on(document.body, 'dataload', (e) => this.fire('dataload', e))
+    }
+    this.server = new U.ServerRequest()
+    this.request = new U.Request()
+
+    this.initLoader()
+    this.name = this.options.name
+    this.description = this.options.description
+    this.demoTileInfos = this.options.demoTileInfos
+    this.options.zoomControl = zoomControl !== undefined ? zoomControl : true
+    this.options.fullscreenControl =
+      fullscreenControl !== undefined ? fullscreenControl : true
+
+    this.datalayersFromQueryString = L.Util.queryString('datalayers')
+    if (this.datalayersFromQueryString) {
+      this.datalayersFromQueryString = this.datalayersFromQueryString
+        .toString()
+        .split(',')
+    }
+
+    let editedFeature = null
+    try {
+      Object.defineProperty(this, 'editedFeature', {
+        get: () => editedFeature,
+        set: (feature) => {
+          if (editedFeature && editedFeature !== feature) {
+            editedFeature.endEdit()
+          }
+          editedFeature = feature
+          this.fire('seteditedfeature')
+        },
+      })
+    } catch (e) {
+      // Certainly IE8, which has a limited version of defineProperty
+    }
+
+    // Retrocompat
+    if (this.options.slideshow?.delay && this.options.slideshow.active === undefined) {
+      this.options.slideshow.active = true
+    }
+    if (this.options.advancedFilterKey) {
+      this.options.facetKey = this.options.advancedFilterKey
+      delete this.options.advancedFilterKey
+    }
+
+    // Global storage for retrieving datalayers and features.
+    this.datalayers = {} // All datalayers, including deleted.
+    this.datalayers_index = [] // Datalayers actually on the map and ordered.
+    this.features_index = {}
+
+    // Needed for actions labels
+    this.help = new U.Help(this)
+
+    this.formatter = new U.Formatter(this)
+
+    this.initControls()
+    // Needs locate control and hash to exist
+    this.initCenter()
+    this.initTileLayers()
+    // Needs tilelayer to exist for minimap
+    this.renderControls()
+    this.handleLimitBounds()
+    this.initDataLayers()
+
+    if (this.options.displayCaptionOnLoad) {
+      // Retrocompat
+      if (!this.options.onLoadPanel) {
+        this.options.onLoadPanel = 'caption'
+      }
+      delete this.options.displayCaptionOnLoad
+    }
+    if (this.options.displayDataBrowserOnLoad) {
+      // Retrocompat
+      if (!this.options.onLoadPanel) {
+        this.options.onLoadPanel = 'databrowser'
+      }
+      delete this.options.displayDataBrowserOnLoad
+    }
+    if (this.options.datalayersControl === 'expanded') {
+      if (!this.options.onLoadPanel) {
+        this.options.onLoadPanel = 'datalayers'
+      }
+      delete this.options.datalayersControl
+    }
+    if (this.options.onLoadPanel === 'facet') {
+      this.options.onLoadPanel = 'datafilters'
+    }
+
+    // TODO: remove me when moved to modules
+    // and inheriting from ServerStored
+    try {
+      Object.defineProperty(this, 'isDirty', {
+        get: () => U.SAVEMANAGER.has(this),
+        set: (status) => {
+          if (status) {
+            U.SAVEMANAGER.add(this)
+          } else {
+            U.SAVEMANAGER.remove(this)
+          }
+        },
+      })
+    } catch (e) {
+      // Certainly IE8, which has a limited version of defineProperty
+    }
+    this.on(
+      'baselayerchange',
+      function (e) {
+        if (this._controls.miniMap) this._controls.miniMap.onMainMapBaseLayerChange(e)
+      },
+      this
+    )
+
+    // Creation mode
+    if (!this.options.umap_id) {
+      if (!this.options.preview) {
+        this.isDirty = true
+        this.enableEdit()
+      }
+      this._default_extent = true
+      this.options.name = L._('Untitled map')
+      await this.loadDataFromQueryString()
+    }
+
+    this.slideshow = new U.Slideshow(this, this.options.slideshow)
+    this.permissions = new U.MapPermissions(this)
+    if (this.hasEditMode()) {
+      this.editTools = new U.Editable(this)
+      this.renderEditToolbar()
+    }
+
+    if (!this.options.noControl) {
+      this.initShortcuts()
+      this.initCaptionBar()
+      this.on('contextmenu', this.onContextMenu)
+      this.onceDataLoaded(this.setViewFromQueryString)
+      this.on('click', this.closeInplaceToolbar)
+      this.propagate()
+    }
+
+    window.onbeforeunload = () => (this.editEnabled && U.SAVEMANAGER.isDirty) || null
+    this.backup()
+  },
+
+
+  getFeatureById: function (id) {
+    let feature
+    for (const datalayer of this.datalayers_index) {
+      feature = datalayer.getFeatureById(id)
+      if (feature) return feature
+    }
+  },
+
+})

umap/tests/integration/test_websocket_sync.py

@@ -161,7 +161,7 @@ def test_websocket_connection_can_sync_polygons(
 
 @pytest.mark.xdist_group(name="websockets")
 def test_websocket_connection_can_sync_map_properties(
-    new_page, live_server, websocket_server, tilelayer
+    context, live_server, websocket_server, tilelayer
 ):
     map = MapFactory(name="sync", edit_status=Map.ANONYMOUS)
     map.settings["properties"]["syncEnabled"] = True
@@ -169,9 +169,9 @@ def test_websocket_connection_can_sync_map_properties(
     DataLayerFactory(map=map, data={})
 
     # Create two tabs
-    peerA = new_page()
+    peerA = context.new_page()
     peerA.goto(f"{live_server.url}{map.get_absolute_url()}?edit")
-    peerB = new_page()
+    peerB = context.new_page()
     peerB.goto(f"{live_server.url}{map.get_absolute_url()}?edit")
 
     # Name change is synced
@@ -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(
-    new_page, live_server, websocket_server, tilelayer
+    context, 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 = new_page()
+    peerA = context.new_page()
     peerA.goto(f"{live_server.url}{map.get_absolute_url()}?edit")
-    peerB = new_page()
+    peerB = context.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.locator(".panel.right").get_by_role("button", name="Edit").first.click()
+    peerB.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")