umap-project 2.3.1__py3-none-any.whl → 2.4.0b0__py3-none-any.whl

umap/static/umap/js/umap.js

@@ -20,9 +20,6 @@ L.Map.mergeOptions({
   enablePolygonDraw: true,
   enablePolylineDraw: true,
   limitBounds: {},
-  importPresets: [
-    // {url: 'http://localhost:8019/en/datalayer/1502/', label: 'Simplified World Countries', format: 'geojson'}
-  ],
   slideshow: {},
   clickable: true,
   permissions: {},
@@ -33,6 +30,8 @@ U.Map = L.Map.extend({
   includes: [ControlsMixin],
 
   initialize: 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)
@@ -57,15 +56,16 @@ U.Map = L.Map.extend({
     this.urls = new U.URLs(this.options.urls)
 
     this.panel = new U.Panel(this)
+    this.tooltip = new U.Tooltip(this._controlContainer)
+    this.dialog = new U.Dialog(this._controlContainer)
     if (this.hasEditMode()) {
       this.editPanel = new U.EditPanel(this)
       this.fullPanel = new U.FullPanel(this)
     }
-    this.ui = new U.UI(this._container)
-    this.ui.on('dataloading', (e) => this.fire('dataloading', e))
-    this.ui.on('dataload', (e) => this.fire('dataload', e))
-    this.server = new U.ServerRequest(this.ui)
-    this.request = new U.Request(this.ui)
+    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
@@ -205,6 +205,13 @@ U.Map = L.Map.extend({
       this.editTools = new U.Editable(this)
       this.renderEditToolbar()
     }
+    if (!U.Utils.isObject(this.options.overlay)) {
+      this.options.overlay = {}
+    }
+    if (!U.Utils.isObject(this.options.tilelayer)) {
+      this.options.tilelayer = {}
+    }
+
     this.initShortcuts()
     this.onceDataLoaded(function () {
       const slug = L.Util.queryString('feature')
@@ -248,6 +255,25 @@ U.Map = L.Map.extend({
     this.on('click contextmenu.show', this.closeInplaceToolbar)
   },
 
+  initSyncEngine: async function () {
+    if (this.options.websocketEnabled == false) return
+    if (this.options.syncEnabled != true) {
+      this.sync.stop()
+    } else {
+      const ws_token_uri = this.urls.get('map_websocket_auth_token', {
+        map_id: this.options.umap_id,
+      })
+      await this.sync.authenticate(ws_token_uri, this.options.websocketURI, this.server)
+    }
+  },
+
+  getSyncMetadata: function () {
+    return {
+      engine: this.sync,
+      subject: 'map',
+    }
+  },
+
   render: function (fields) {
     let impacts = U.Utils.getImpactsFromSchema(fields)
 
@@ -271,6 +297,8 @@ U.Map = L.Map.extend({
         case 'bounds':
           this.handleLimitBounds()
           break
+        case 'sync':
+          this.initSyncEngine()
       }
     }
   },
@@ -359,7 +387,7 @@ U.Map = L.Map.extend({
       icon: 'umap-fake-class',
       iconLoading: 'umap-fake-class',
       flyTo: this.options.easing,
-      onLocationError: (err) => this.ui.alert({ content: err.message }),
+      onLocationError: (err) => U.Alert.error(err.message),
     })
     this._controls.fullscreen = new L.Control.Fullscreen({
       title: { false: L._('View Fullscreen'), true: L._('Exit Fullscreen') },
@@ -388,11 +416,14 @@ U.Map = L.Map.extend({
     this.importer = new U.Importer(this)
     this.drop = new U.DropControl(this)
     this.share = new U.Share(this)
+    this.rules = new U.Rules(this)
     this._controls.tilelayers = new U.TileLayerControl(this)
   },
 
   renderControls: function () {
-    const hasSlideshow = Boolean(this.options.slideshow && this.options.slideshow.active)
+    const hasSlideshow = Boolean(
+      this.options.slideshow && this.options.slideshow.active
+    )
     const barEnabled = this.options.captionBar || hasSlideshow
     document.body.classList.toggle('umap-caption-bar-enabled', barEnabled)
     document.body.classList.toggle('umap-slideshow-enabled', hasSlideshow)
@@ -514,73 +545,80 @@ U.Map = L.Map.extend({
 
   initShortcuts: function () {
     const globalShortcuts = function (e) {
-      const key = e.keyCode
-      const hasModifier = (e.ctrlKey || e.metaKey) && !e.shiftKey
-
-      /* Generic shortcuts */
-      if (key === U.Keys.F && hasModifier) {
-        L.DomEvent.stop(e)
-        this.search()
-      } else if (e.keyCode === U.Keys.ESC) {
-        if (this.help.visible()) {
-          this.help.hide()
-        } else {
-          this.panel.close()
+      if (e.key === 'Escape') {
+        if (this.dialog.visible) {
+          this.dialog.close()
+        } else if (this.importer.dialog.visible) {
+          this.importer.dialog.close()
+        } else if (this.editEnabled && this.editTools.drawing()) {
+          this.editTools.stopDrawing()
+        } else if (this.measureTools.enabled()) {
+          this.measureTools.stopDrawing()
+        } else if (this.editPanel?.isOpen()) {
           this.editPanel?.close()
+        } else if (this.fullPanel?.isOpen()) {
           this.fullPanel?.close()
+        } else if (this.panel.isOpen()) {
+          this.panel.close()
         }
       }
 
-      if (!this.hasEditMode()) return
+      // From now on, only ctrl/meta shortcut
+      if (!(e.ctrlKey || e.metaKey) || e.shiftKey) return
 
-      /* Edit mode only shortcuts */
-      if (key === U.Keys.E && hasModifier && !this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.enableEdit()
-      } else if (key === U.Keys.E && hasModifier && this.editEnabled && !this.isDirty) {
+      if (e.key === 'f') {
         L.DomEvent.stop(e)
-        this.disableEdit()
+        this.search()
       }
-      if (key === U.Keys.S && hasModifier) {
-        L.DomEvent.stop(e)
-        if (this.isDirty) {
-          this.save()
+
+      /* Edit mode only shortcuts */
+      if (!this.hasEditMode()) return
+
+      // Edit mode Off
+      if (!this.editEnabled) {
+        switch (e.key) {
+          case 'e':
+            L.DomEvent.stop(e)
+            this.enableEdit()
+            break
         }
+        return
       }
-      if (key === U.Keys.Z && hasModifier && this.isDirty) {
-        L.DomEvent.stop(e)
-        this.askForReset()
-      }
-      if (key === U.Keys.M && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.editTools.startMarker()
-      }
-      if (key === U.Keys.P && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.editTools.startPolygon()
-      }
-      if (key === U.Keys.L && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.editTools.startPolyline()
-      }
-      if (key === U.Keys.I && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.importer.open()
-      }
-      if (key === U.Keys.O && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.importer.openFiles()
-      }
-      if (key === U.Keys.H && hasModifier && this.editEnabled) {
-        L.DomEvent.stop(e)
-        this.help.show('edit')
-      }
-      if (e.keyCode === U.Keys.ESC) {
-        if (this.editEnabled && this.editTools.drawing()) {
-          this.editTools.stopDrawing()
-        }
-        if (this.measureTools.enabled()) this.measureTools.stopDrawing()
+
+      // Edit mode on
+      let used = true
+      switch (e.key) {
+        case 'e':
+          if (!this.isDirty) this.disableEdit()
+          break
+        case 's':
+          if (this.isDirty) this.save()
+          break
+        case 'z':
+          if (this.isDirty) this.askForReset()
+          break
+        case 'm':
+          this.editTools.startMarker()
+          break
+        case 'p':
+          this.editTools.startPolygon()
+          break
+        case 'l':
+          this.editTools.startPolyline()
+          break
+        case 'i':
+          this.importer.open()
+          break
+        case 'o':
+          this.importer.openFiles()
+          break
+        case 'h':
+          this.help.show('edit')
+          break
+        default:
+          used = false
       }
+      if (used) L.DomEvent.stop(e)
     }
     L.DomEvent.addListener(document, 'keydown', globalShortcuts, this)
   },
@@ -641,10 +679,7 @@ U.Map = L.Map.extend({
     } catch (e) {
       console.error(e)
       this.removeLayer(tilelayer)
-      this.ui.alert({
-        content: `${L._('Error in the tilelayer URL')}: ${tilelayer._url}`,
-        level: 'error',
-      })
+      U.Alert.error(`${L._('Error in the tilelayer URL')}: ${tilelayer._url}`)
       // Users can put tilelayer URLs by hand, and if they add wrong {variable},
       // Leaflet throw an error, and then the map is no more editable
     }
@@ -676,10 +711,7 @@ U.Map = L.Map.extend({
     } catch (e) {
       this.removeLayer(overlay)
       console.error(e)
-      this.ui.alert({
-        content: `${L._('Error in the overlay URL')}: ${overlay._url}`,
-        level: 'error',
-      })
+      U.Alert.error(`${L._('Error in the overlay URL')}: ${overlay._url}`)
     }
   },
 
@@ -770,11 +802,14 @@ U.Map = L.Map.extend({
     return L.Map.prototype.setMaxBounds.call(this, bounds)
   },
 
-  createDataLayer: function (datalayer) {
-    datalayer = datalayer || {
-      name: `${L._('Layer')} ${this.datalayers_index.length + 1}`,
+  createDataLayer: function (options = {}, sync) {
+    options.name = options.name || `${L._('Layer')} ${this.datalayers_index.length + 1}`
+    const datalayer = new U.DataLayer(this, options, sync)
+
+    if (sync !== false) {
+      datalayer.sync.upsert(datalayer.options)
     }
-    return new U.DataLayer(this, datalayer)
+    return datalayer
   },
 
   newDataLayer: function () {
@@ -786,24 +821,25 @@ U.Map = L.Map.extend({
     return U.SCHEMA[option] && U.SCHEMA[option].default
   },
 
-  getOption: function (option) {
+  getOption: function (option, feature) {
+    if (feature) {
+      const value = this.rules.getOption(option, feature)
+      if (value !== undefined) return value
+    }
     if (U.Utils.usableOption(this.options, option)) return this.options[option]
     return this.getDefaultOption(option)
   },
 
-  updateExtent: function () {
+  setCenterAndZoom: function () {
+    this._setCenterAndZoom()
+    U.Alert.success(L._('The zoom and center have been modified.'))
+  },
+
+  _setCenterAndZoom: function () {
     this.options.center = this.getCenter()
     this.options.zoom = this.getZoom()
     this.isDirty = true
     this._default_extent = false
-    if (this.options.umap_id) {
-      // We do not want an extra message during the map creation
-      // to avoid the double notification/alert.
-      this.ui.alert({
-        content: L._('The zoom and center have been modified.'),
-        level: 'info',
-      })
-    }
   },
 
   updateTileLayers: function () {
@@ -842,12 +878,11 @@ U.Map = L.Map.extend({
   processFileToImport: function (file, layer, type) {
     type = type || U.Utils.detectFileType(file)
     if (!type) {
-      this.ui.alert({
-        content: L._('Unable to detect format of file {filename}', {
+      U.Alert.error(
+        L._('Unable to detect format of file {filename}', {
           filename: file.name,
-        }),
-        level: 'error',
-      })
+        })
+      )
       return
     }
     if (type === 'umap') {
@@ -858,6 +893,13 @@ U.Map = L.Map.extend({
     }
   },
 
+  importFromUrl: async function (uri) {
+    const response = await this.request.get(uri)
+    if (response && response.ok) {
+      this.importRaw(await response.text())
+    }
+  },
+
   importRaw: function (rawData) {
     const importedData = JSON.parse(rawData)
 
@@ -873,7 +915,11 @@ U.Map = L.Map.extend({
     if (importedData.geometry) this.options.center = this.latLng(importedData.geometry)
     const self = this
     importedData.layers.forEach((geojson) => {
-      delete geojson._umap_options['id'] // Never trust an id at this stage
+      if (!geojson._umap_options && geojson._storage) {
+        geojson._umap_options = geojson._storage
+        delete geojson._storage
+      }
+      delete geojson._umap_options?.id // Never trust an id at this stage
       const dataLayer = self.createDataLayer(geojson._umap_options)
       dataLayer.fromUmapGeoJSON(geojson)
     })
@@ -899,10 +945,7 @@ U.Map = L.Map.extend({
         self.importRaw(rawData)
       } catch (e) {
         console.error('Error importing data', e)
-        self.ui.alert({
-          content: L._('Invalid umap data in {filename}', { filename: file.name }),
-          level: 'error',
-        })
+        U.Alert.error(L._('Invalid umap data in {filename}', { filename: file.name }))
       }
     }
   },
@@ -997,6 +1040,7 @@ U.Map = L.Map.extend({
   },
 
   saveSelf: async function () {
+    this.rules.commit()
     const geojson = {
       type: 'Feature',
       geometry: this.geometry(),
@@ -1007,65 +1051,56 @@ U.Map = L.Map.extend({
     formData.append('center', JSON.stringify(this.geometry()))
     formData.append('settings', JSON.stringify(geojson))
     const uri = this.urls.get('map_save', { map_id: this.options.umap_id })
-    const [data, response, error] = await this.server.post(uri, {}, formData)
+    const [data, _, error] = await this.server.post(uri, {}, formData)
     // FIXME: login_required response will not be an error, so it will not
     // stop code while it should
-    if (!error) {
-      let duration = 3000,
-        alert = { content: L._('Map has been saved!'), level: 'info' }
-      if (!this.options.umap_id) {
-        alert.content = L._('Congratulations, your map has been created!')
-        this.options.umap_id = data.id
-        this.permissions.setOptions(data.permissions)
-        this.permissions.commit()
-        if (data.permissions && data.permissions.anonymous_edit_url) {
-          alert.duration = Infinity
-          alert.content =
-            L._(
-              'Your map has been created! As you are not logged in, here is your secret link to edit the map, please keep it safe:'
-            ) + `<br>${data.permissions.anonymous_edit_url}`
-
-          alert.actions = [
-            {
-              label: L._('Copy link'),
-              callback: () => {
-                L.Util.copyToClipboard(data.permissions.anonymous_edit_url)
-                this.ui.alert({
-                  content: L._('Secret edit link copied to clipboard!'),
-                  level: 'info',
-                })
-              },
-              callbackContext: this,
-            },
-          ]
-          if (this.options.urls.map_send_edit_link) {
-            alert.actions.push({
-              label: L._('Send me the link'),
-              input: L._('Email'),
-              callback: this.sendEditLink,
-              callbackContext: this,
-            })
-          }
-        }
-      } else if (!this.permissions.isDirty) {
+    if (error) {
+      return
+    }
+
+    if (!this.options.umap_id) {
+      this.options.umap_id = data.id
+      this.permissions.setOptions(data.permissions)
+      this.permissions.commit()
+      if (data?.permissions?.anonymous_edit_url) {
+        this.once('saved', () => {
+          U.AlertCreation.info(
+            L._('Your map has been created with an anonymous account!'),
+            Number.Infinity,
+            data.permissions.anonymous_edit_url,
+            this.options.urls.map_send_edit_link
+              ? this.sendEditLinkEmail.bind(this)
+              : null
+          )
+        })
+      } else {
+        this.once('saved', () => {
+          U.Alert.success(L._('Congratulations, your map has been created!'))
+        })
+      }
+    } else {
+      if (!this.permissions.isDirty) {
         // Do not override local changes to permissions,
         // but update in case some other editors changed them in the meantime.
         this.permissions.setOptions(data.permissions)
         this.permissions.commit()
       }
-      // Update URL in case the name has changed.
-      if (history && history.pushState)
-        history.pushState({}, this.options.name, data.url)
-      else window.location = data.url
-      alert.content = data.info || alert.content
-      this.once('saved', () => this.ui.alert(alert))
-      this.permissions.save()
+      this.once('saved', () => {
+        U.Alert.success(data.info || L._('Map has been saved!'))
+      })
+    }
+    // Update URL in case the name has changed.
+    if (history?.pushState) {
+      history.pushState({}, this.options.name, data.url)
+    } else {
+      window.location = data.url
     }
+    this.permissions.save()
   },
 
   save: function () {
     if (!this.isDirty) return
-    if (this._default_extent) this.updateExtent()
+    if (this._default_extent) this._setCenterAndZoom()
     this.backup()
     this.once('saved', () => {
       this.isDirty = false
@@ -1078,33 +1113,20 @@ U.Map = L.Map.extend({
     }
   },
 
-  sendEditLink: async function () {
-    const input = this.ui._alert.querySelector('input')
-    const email = input.value
-
-    const formData = new FormData()
-    formData.append('email', email)
-
-    const url = this.urls.get('map_send_edit_link', { map_id: this.options.umap_id })
-    await this.server.post(url, {}, formData)
-  },
-
   star: async function () {
-    if (!this.options.umap_id)
-      return this.ui.alert({
-        content: L._('Please save the map first'),
-        level: 'error',
-      })
+    if (!this.options.umap_id) {
+      return U.Alert.error(L._('Please save the map first'))
+    }
     const url = this.urls.get('map_star', { map_id: this.options.umap_id })
     const [data, response, error] = await this.server.post(url)
-    if (!error) {
-      this.options.starred = data.starred
-      let msg = data.starred
-        ? L._('Map has been starred')
-        : L._('Map has been unstarred')
-      this.ui.alert({ content: msg, level: 'info' })
-      this.renderControls()
+    if (error) {
+      return
     }
+    this.options.starred = data.starred
+    U.Alert.success(
+      data.starred ? L._('Map has been starred') : L._('Map has been unstarred')
+    )
+    this.renderControls()
   },
 
   geometry: function () {
@@ -1274,9 +1296,6 @@ U.Map = L.Map.extend({
   },
 
   _editTilelayer: function (container) {
-    if (!U.Utils.isObject(this.options.tilelayer)) {
-      this.options.tilelayer = {}
-    }
     const tilelayerFields = [
       [
         'options.tilelayer.name',
@@ -1324,9 +1343,6 @@ U.Map = L.Map.extend({
   },
 
   _editOverlay: function (container) {
-    if (!U.Utils.isObject(this.options.overlay)) {
-      this.options.overlay = {}
-    }
     const overlayFields = [
       [
         'options.overlay.url_template',
@@ -1408,6 +1424,8 @@ U.Map = L.Map.extend({
         this.options.limitBounds.north = L.Util.formatNum(bounds.getNorth())
         this.options.limitBounds.east = L.Util.formatNum(bounds.getEast())
         boundsBuilder.fetchAll()
+
+        this.sync.update(this, 'options.limitBounds', this.options.limitBounds)
         this.isDirty = true
         this.handleLimitBounds()
       },
@@ -1463,6 +1481,12 @@ U.Map = L.Map.extend({
     slideshow.appendChild(slideshowBuilder.build())
   },
 
+  _editSync: function (container) {
+    const sync = L.DomUtil.createFieldset(container, L._('Real-time collaboration'))
+    const builder = new U.FormBuilder(this, ['options.syncEnabled'])
+    sync.appendChild(builder.build())
+  },
+
   _advancedActions: function (container) {
     const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
     const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
@@ -1508,9 +1532,10 @@ U.Map = L.Map.extend({
   editCaption: function () {
     if (!this.editEnabled) return
     if (this.options.editMode !== 'advanced') return
-    const container = L.DomUtil.create('div', 'umap-edit-container'),
-      metadataFields = ['options.name', 'options.description'],
-      title = L.DomUtil.create('h3', '', container)
+    const container = L.DomUtil.create('div', 'umap-edit-container')
+    const metadataFields = ['options.name', 'options.description']
+
+    const title = L.DomUtil.create('h3', '', container)
     title.textContent = L._('Edit map details')
     const builder = new U.FormBuilder(this, metadataFields, {
       className: 'map-metadata',
@@ -1540,10 +1565,14 @@ U.Map = L.Map.extend({
     this._editShapeProperties(container)
     this._editDefaultProperties(container)
     this._editInteractionsProperties(container)
+    this.rules.edit(container)
     this._editTilelayer(container)
     this._editOverlay(container)
     this._editBounds(container)
     this._editSlideshow(container)
+    if (this.options.websocketEnabled) {
+      this._editSync(container)
+    }
     this._advancedActions(container)
 
     this.editPanel.open({ content: container, className: 'dark' })
@@ -1554,6 +1583,7 @@ U.Map = L.Map.extend({
     this.editEnabled = true
     this.drop.enable()
     this.fire('edit:enabled')
+    this.initSyncEngine()
   },
 
   disableEdit: function () {
@@ -1565,6 +1595,7 @@ U.Map = L.Map.extend({
     this.fire('edit:disabled')
     this.editPanel.close()
     this.fullPanel.close()
+    this.sync.stop()
   },
 
   hasEditMode: function () {
@@ -1588,7 +1619,7 @@ U.Map = L.Map.extend({
       L.DomUtil.createButton(
         'umap-about-link flat',
         container,
-        L._('About'),
+        L._('Open caption'),
         this.openCaption,
         this
       )
@@ -1739,7 +1770,7 @@ U.Map = L.Map.extend({
     items.push(
       '-',
       {
-        text: L._('See layers'),
+        text: L._('Open browser'),
         callback: () => this.openBrowser('layers'),
       },
       {
@@ -1755,7 +1786,7 @@ U.Map = L.Map.extend({
     }
     items.push(
       {
-        text: L._('About'),
+        text: L._('Open caption'),
         callback: this.openCaption,
       },
       {
@@ -1853,4 +1884,13 @@ U.Map = L.Map.extend({
     })
     return bounds
   },
+
+  sendEditLinkEmail: async function (formData) {
+    const sendLink =
+      this.options.urls.map_send_edit_link &&
+      this.urls.get('map_send_edit_link', {
+        map_id: this.options.umap_id,
+      })
+    await this.server.post(sendLink, {}, formData)
+  },
 })