umap-project 2.8.0b0__py3-none-any.whl → 2.8.1__py3-none-any.whl

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

@@ -124,6 +124,11 @@ export default class Importer extends Utils.WithTemplate {
     return this.qs('[type=file]').files
   }
 
+  set files(files) {
+    this.qs('[type=file]').files = files
+    this.onFileChange()
+  }
+
   get raw() {
     return this.qs('textarea').value
   }
@@ -161,7 +166,7 @@ export default class Importer extends Utils.WithTemplate {
   get layer() {
     return (
       this._umap.datalayers[this.layerId] ||
-      this._umap.createDataLayer({ name: this.layerName })
+      this._umap.createDirtyDataLayer({ name: this.layerName })
     )
   }
 
@@ -213,11 +218,11 @@ export default class Importer extends Utils.WithTemplate {
     this.qs('[name=submit').toggleAttribute('disabled', !this.canSubmit())
   }
 
-  onFileChange(e) {
+  onFileChange() {
     let type = ''
     let newType
-    for (const file of e.target.files) {
-      newType = U.Utils.detectFileType(file)
+    for (const file of this.files) {
+      newType = Utils.detectFileType(file)
       if (!type && newType) type = newType
       if (type && newType !== type) {
         type = ''
@@ -382,7 +387,7 @@ export default class Importer extends Utils.WithTemplate {
         bounds.extend(featureBounds)
       }
       this.onSuccess(features.length)
-      layer.zoomTo(bounds)
+      layer.zoomToBounds(bounds)
     }
   }
 }

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

@@ -12,6 +12,7 @@ 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 DropControl from '../drop.js'
 
 // Those options are not saved on the server, so they can live here
 // instead of in umap.properties
@@ -96,7 +97,7 @@ const ControlsMixin = {
     this._controls.more = new U.MoreControls()
     this._controls.scale = L.control.scale()
     this._controls.permanentCredit = new U.PermanentCreditsControl(this)
-    this._umap.drop = new U.DropControl(this)
+    this._umap.drop = new DropControl(this._umap, this, this._container)
     this._controls.tilelayers = new U.TileLayerControl(this)
   },
 

umap/static/umap/js/modules/rendering/popup.js

@@ -21,23 +21,22 @@ export default function loadPopup(name) {
 const Popup = BasePopup.extend({
   initialize: function (feature) {
     this.feature = feature
-    this.container = DomUtil.create('div', 'umap-popup')
-    this.format()
-    BasePopup.prototype.initialize.call(this, {}, feature)
-    this.setContent(this.container)
+    BasePopup.prototype.initialize.call(this, {}, feature.ui)
   },
 
-  format: function () {
+  loadContent: async function () {
+    const container = DomUtil.create('div', 'umap-popup')
     const name = this.feature.getOption('popupTemplate')
-    this.content = loadTemplate(name, this.feature, this.container)
-    const elements = this.container.querySelectorAll('img,iframe')
+    this.content = await loadTemplate(name, this.feature, container)
+    const elements = container.querySelectorAll('img,iframe')
     for (const element of elements) {
       this.onElementLoaded(element)
     }
-    if (!elements.length && this.container.textContent.replace('\n', '') === '') {
-      this.container.innerHTML = ''
-      DomUtil.add('h3', '', this.container, this.feature.getDisplayName())
+    if (!elements.length && container.textContent.replace('\n', '') === '') {
+      container.innerHTML = ''
+      DomUtil.add('h3', '', container, this.feature.getDisplayName())
     }
+    this.setContent(container)
   },
 
   onElementLoaded: function (el) {

umap/static/umap/js/modules/rendering/template.js

@@ -2,8 +2,9 @@ import { DomUtil, DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate, getLocale } from '../i18n.js'
 import * as Utils from '../utils.js'
 import * as Icon from './icon.js'
+import { Request } from '../request.js'
 
-export default function loadTemplate(name, feature, container) {
+export default async function loadTemplate(name, feature, container) {
   let klass = PopupTemplate
   switch (name) {
     case 'GeoRSSLink':
@@ -18,9 +19,12 @@ export default function loadTemplate(name, feature, container) {
     case 'OSM':
       klass = OSM
       break
+    case 'Wikipedia':
+      klass = Wikipedia
+      break
   }
   const content = new klass()
-  return content.render(feature, container)
+  return await content.render(feature, container)
 }
 
 class PopupTemplate {
@@ -76,10 +80,10 @@ class PopupTemplate {
     }
   }
 
-  render(feature, container) {
+  async render(feature, container) {
     const title = this.renderTitle(feature)
     if (title) container.appendChild(title)
-    const body = this.renderBody(feature)
+    const body = await this.renderBody(feature)
     if (body) DomUtil.add('div', 'umap-popup-content', container, body)
     const footer = this.renderFooter(feature)
     if (footer) container.appendChild(footer)
@@ -111,7 +115,7 @@ class Table extends TitleMixin(PopupTemplate) {
     )
   }
 
-  renderBody(feature) {
+  async renderBody(feature) {
     const table = document.createElement('table')
 
     for (const key in feature.properties) {
@@ -125,7 +129,7 @@ class Table extends TitleMixin(PopupTemplate) {
 }
 
 class GeoRSSImage extends TitleMixin(PopupTemplate) {
-  renderBody(feature) {
+  async renderBody(feature) {
     const body = DomUtil.create('a')
     body.href = feature.properties.link
     body.target = '_blank'
@@ -142,7 +146,7 @@ class GeoRSSImage extends TitleMixin(PopupTemplate) {
 }
 
 class GeoRSSLink extends PopupTemplate {
-  renderBody(feature) {
+  async renderBody(feature) {
     if (feature.properties.link) {
       return Utils.loadTemplate(
         `<a href="${feature.properties.link}" target="_blank"><h3>${feature.getDisplayName()}</h3></a>`
@@ -151,7 +155,7 @@ class GeoRSSLink extends PopupTemplate {
   }
 }
 
-class OSM extends TitleMixin(PopupTemplate) {
+class OSM extends PopupTemplate {
   renderTitle(feature) {
     const title = DomUtil.add('h3', 'popup-title')
     const color = feature.getPreviewColor()
@@ -172,7 +176,7 @@ class OSM extends TitleMixin(PopupTemplate) {
     return props.name
   }
 
-  renderBody(feature) {
+  async renderBody(feature) {
     const props = feature.properties
     const body = document.createElement('div')
     const locale = getLocale()
@@ -238,3 +242,43 @@ class OSM extends TitleMixin(PopupTemplate) {
     return body
   }
 }
+
+const _WIKIPEDIA_CACHE = {}
+
+class Wikipedia extends PopupTemplate {
+  async callWikipedia(wikipedia) {
+    if (wikipedia && _WIKIPEDIA_CACHE[wikipedia]) return _WIKIPEDIA_CACHE[wikipedia]
+    // Wikipedia value should be in form of "{locale}:{title}", according to https://wiki.openstreetmap.org/wiki/Key:wikipedia
+    const [locale, page] = wikipedia.split(':')
+    const url = `https://${locale}.wikipedia.org/w/api.php?action=query&format=json&origin=*&pithumbsize=500&prop=extracts|pageimages&titles=${page}`
+    const request = new Request()
+    const response = await request.get(url)
+    if (response?.ok) {
+      const data = await response.json()
+      _WIKIPEDIA_CACHE[wikipedia] = data
+      return data
+    }
+  }
+
+  async renderBody(feature) {
+    const body = document.createElement('div')
+    const wikipedia = feature.properties.wikipedia
+    if (!wikipedia) return ''
+    const data = await this.callWikipedia(wikipedia)
+    if (data) {
+      const page = Object.values(data.query.pages)[0]
+      const title = page.title || feature.getDisplayName()
+      const extract = page.extract || ''
+      const thumbnail = page.thumbnail?.source
+      const [content, { image }] = Utils.loadTemplateWithRefs(
+        `<div><h3>${Utils.escapeHTML(title)}</h3><img data-ref="image" hidden src="" />${Utils.escapeHTML(extract)}</div>`
+      )
+      if (thumbnail) {
+        image.src = thumbnail
+        image.hidden = false
+      }
+      body.appendChild(content)
+    }
+    return body
+  }
+}

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

@@ -404,6 +404,7 @@ export const SCHEMA = {
       ['GeoRSSImage', translate('GeoRSS (title + image)')],
       ['GeoRSSLink', translate('GeoRSS (only link)')],
       ['OSM', translate('OpenStreetMap')],
+      ['Wikipedia', translate('Wikipedia')],
     ],
     default: 'Default',
   },

umap/static/umap/js/modules/sync/engine.js

@@ -3,6 +3,12 @@ import { HybridLogicalClock } from './hlc.js'
 import { DataLayerUpdater, FeatureUpdater, MapUpdater } from './updaters.js'
 import { WebSocketTransport } from './websocket.js'
 
+// Start reconnecting after 2 seconds, then double the delay each time
+// maxing out at 32 seconds.
+const RECONNECT_DELAY = 2000
+const RECONNECT_DELAY_FACTOR = 2
+const MAX_RECONNECT_DELAY = 32000
+
 /**
  * The syncEngine exposes an API to sync messages between peers over the network.
  *
@@ -42,32 +48,65 @@ import { WebSocketTransport } from './websocket.js'
  * ```
  */
 export class SyncEngine {
-  constructor(map) {
+  constructor(umap) {
+    this._umap = umap
     this.updaters = {
-      map: new MapUpdater(map),
-      feature: new FeatureUpdater(map),
-      datalayer: new DataLayerUpdater(map),
+      map: new MapUpdater(umap),
+      feature: new FeatureUpdater(umap),
+      datalayer: new DataLayerUpdater(umap),
     }
     this.transport = undefined
     this._operations = new Operations()
+
+    this._reconnectTimeout = null
+    this._reconnectDelay = RECONNECT_DELAY
+    this.websocketConnected = false
   }
 
-  async authenticate(tokenURI, webSocketURI, server) {
-    const [response, _, error] = await server.get(tokenURI)
+  async authenticate() {
+    const websocketTokenURI = this._umap.urls.get('map_websocket_auth_token', {
+      map_id: this._umap.id,
+    })
+
+    const [response, _, error] = await this._umap.server.get(websocketTokenURI)
     if (!error) {
-      this.start(webSocketURI, response.token)
+      this.start(response.token)
     }
   }
 
-  start(webSocketURI, authToken) {
-    this.transport = new WebSocketTransport(webSocketURI, authToken, this)
+  start(authToken) {
+    this.transport = new WebSocketTransport(
+      this._umap.properties.websocketURI,
+      authToken,
+      this
+    )
   }
 
   stop() {
-    if (this.transport) this.transport.close()
+    if (this.transport) {
+      this.transport.close()
+    }
     this.transport = undefined
   }
 
+  onConnection() {
+    this._reconnectTimeout = null
+    this._reconnectDelay = RECONNECT_DELAY
+    this.websocketConnected = true
+    this.updaters.map.update({ key: 'numberOfConnectedPeers' })
+  }
+
+  reconnect() {
+    this.websocketConnected = false
+    this.updaters.map.update({ key: 'numberOfConnectedPeers' })
+
+    this._reconnectTimeout = setTimeout(() => {
+      if (this._reconnectDelay < MAX_RECONNECT_DELAY) {
+        this._reconnectDelay = this._reconnectDelay * RECONNECT_DELAY_FACTOR
+      }
+      this.authenticate()
+    }, this._reconnectDelay)
+  }
   upsert(subject, metadata, value) {
     this._send({ verb: 'upsert', subject, metadata, value })
   }
@@ -183,9 +222,13 @@ export class SyncEngine {
    * @param {string} payload.sender the uuid of the requesting peer
    * @param {string} payload.latestKnownHLC the latest known HLC of the requesting peer
    */
-  onListOperationsRequest({ sender, lastKnownHLC }) {
+  onListOperationsRequest({ sender, message }) {
+    debug(
+      `received operations request from peer ${sender} (since ${message.lastKnownHLC})`
+    )
+
     this.sendToPeer(sender, 'ListOperationsResponse', {
-      operations: this._operations.getOperationsSince(lastKnownHLC),
+      operations: this._operations.getOperationsSince(message.lastKnownHLC),
     })
   }
 
@@ -446,5 +489,5 @@ export class Operations {
 }
 
 function debug(...args) {
-  console.debug('SYNC ⇆', ...args)
+  console.debug('SYNC ⇆', ...args.map((x) => JSON.stringify(x)))
 }

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

@@ -54,7 +54,10 @@ export class MapUpdater extends BaseUpdater {
 export class DataLayerUpdater extends BaseUpdater {
   upsert({ value }) {
     // Upsert only happens when a new datalayer is created.
-    this._umap.createDataLayer(value, false)
+    const datalayer = this._umap.createDataLayer(value, false)
+    // Prevent the layer to get data from the server, as it will get it
+    // from the sync.
+    datalayer._loaded = true
   }
 
   update({ key, metadata, value }) {

umap/static/umap/js/modules/sync/websocket.js

@@ -1,15 +1,59 @@
+const PONG_TIMEOUT = 5000
+const PING_INTERVAL = 30000
+const FIRST_CONNECTION_TIMEOUT = 2000
+
 export class WebSocketTransport {
   constructor(webSocketURI, authToken, messagesReceiver) {
+    this.receiver = messagesReceiver
+    this.closeRequested = false
+
     this.websocket = new WebSocket(webSocketURI)
+
     this.websocket.onopen = () => {
       this.send('JoinRequest', { token: authToken })
+      this.receiver.onConnection()
     }
     this.websocket.addEventListener('message', this.onMessage.bind(this))
-    this.receiver = messagesReceiver
+    this.websocket.onclose = () => {
+      console.log('websocket closed')
+      if (!this.closeRequested) {
+        console.log('Not requested, reconnecting...')
+        this.receiver.reconnect()
+      }
+    }
+
+    this.ensureOpen = setInterval(() => {
+      if (this.websocket.readyState !== WebSocket.OPEN) {
+        this.websocket.close()
+        clearInterval(this.ensureOpen)
+      }
+    }, FIRST_CONNECTION_TIMEOUT)
+
+    // To ensure the connection is still alive, we send ping and expect pong back.
+    // Websocket provides a `ping` method to keep the connection alive, but it's
+    // unfortunately not possible to access it from the WebSocket object.
+    // See https://making.close.com/posts/reliable-websockets/ for more details.
+    this.pingInterval = setInterval(() => {
+      if (this.websocket.readyState === WebSocket.OPEN) {
+        this.websocket.send('ping')
+        this.pongReceived = false
+        setTimeout(() => {
+          if (!this.pongReceived) {
+            console.warn('No pong received, reconnecting...')
+            this.websocket.close()
+            clearInterval(this.pingInterval)
+          }
+        }, PONG_TIMEOUT)
+      }
+    }, PING_INTERVAL)
   }
 
   onMessage(wsMessage) {
-    this.receiver.receive(JSON.parse(wsMessage.data))
+    if (wsMessage.data === 'pong') {
+      this.pongReceived = true
+    } else {
+      this.receiver.receive(JSON.parse(wsMessage.data))
+    }
   }
 
   send(kind, payload) {
@@ -20,6 +64,7 @@ export class WebSocketTransport {
   }
 
   close() {
+    this.closeRequested = true
     this.websocket.close()
   }
 }

umap/static/umap/js/modules/ui/bar.js

@@ -110,7 +110,7 @@ export class TopBar extends WithTemplate {
       })
     })
 
-    this.elements.help.addEventListener('click', () => this._umap.showGetStarted())
+    this.elements.help.addEventListener('click', () => this._umap.help.showGetStarted())
     this.elements.cancel.addEventListener('click', () => this._umap.askForReset())
     this.elements.cancel.addEventListener('mouseover', () => {
       this._umap.tooltip.open({

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

@@ -61,8 +61,6 @@ export default class Umap extends ServerStored {
     )
     this.searchParams = new URLSearchParams(window.location.search)
 
-    this.sync_engine = new 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) setLocale(geojson.properties.locale)
@@ -124,6 +122,9 @@ export default class Umap extends ServerStored {
     this.share = new Share(this)
     this.rules = new Rules(this)
 
+    this.syncEngine = new SyncEngine(this)
+    this.sync = this.syncEngine.proxy(this)
+
     if (this.hasEditMode()) {
       this.editPanel = new EditPanel(this, this._leafletMap)
       this.fullPanel = new FullPanel(this, this._leafletMap)
@@ -323,14 +324,14 @@ export default class Umap extends ServerStored {
         dataUrl = decodeURIComponent(dataUrl)
         dataUrl = this.renderUrl(dataUrl)
         dataUrl = this.proxyUrl(dataUrl)
-        const datalayer = this.createDataLayer()
+        const datalayer = this.createDirtyDataLayer()
         await datalayer
           .importFromUrl(dataUrl, dataFormat)
           .then(() => datalayer.zoomTo())
       }
     } else if (data) {
       data = decodeURIComponent(data)
-      const datalayer = this.createDataLayer()
+      const datalayer = this.createDirtyDataLayer()
       await datalayer.importRaw(data, dataFormat).then(() => datalayer.zoomTo())
     }
   }
@@ -580,9 +581,13 @@ export default class Umap extends ServerStored {
     this.fire('datalayersloaded')
     const toLoad = []
     for (const datalayer of this.datalayersIndex) {
-      if (datalayer.showAtLoad()) toLoad.push(datalayer.show())
+      if (datalayer.showAtLoad()) toLoad.push(() => datalayer.show())
+    }
+    while (toLoad.length) {
+      const chunk = toLoad.splice(0, 10)
+      await Promise.all(chunk.map((func) => func()))
     }
-    await Promise.all(toLoad)
+
     this.dataloaded = true
     this.fire('dataloaded')
   }
@@ -598,8 +603,14 @@ export default class Umap extends ServerStored {
     return datalayer
   }
 
+  createDirtyDataLayer(options) {
+    const datalayer = this.createDataLayer(options, true)
+    datalayer.isDirty = true
+    return datalayer
+  }
+
   newDataLayer() {
-    const datalayer = this.createDataLayer({})
+    const datalayer = this.createDirtyDataLayer({})
     datalayer.edit()
   }
 
@@ -1117,8 +1128,8 @@ export default class Umap extends ServerStored {
     }
     this.ensurePanesOrder()
     this._leafletMap.initTileLayers()
-    this.isDirty = false
     this.onDataLayersChanged()
+    this.isDirty = !this.id
   }
 
   async save() {
@@ -1257,18 +1268,13 @@ export default class Umap extends ServerStored {
   }
 
   async initSyncEngine() {
+    // this.properties.websocketEnabled is set by the server admin
     if (this.properties.websocketEnabled === false) return
+    // this.properties.syncEnabled is set by the user in the map settings
     if (this.properties.syncEnabled !== true) {
       this.sync.stop()
     } else {
-      const ws_token_uri = this.urls.get('map_websocket_auth_token', {
-        map_id: this.id,
-      })
-      await this.sync.authenticate(
-        ws_token_uri,
-        this.properties.websocketURI,
-        this.server
-      )
+      await this.sync.authenticate()
     }
   }
 
@@ -1343,7 +1349,17 @@ export default class Umap extends ServerStored {
       },
       numberOfConnectedPeers: () => {
         Utils.eachElement('.connected-peers span', (el) => {
-          el.textContent = this.sync.getNumberOfConnectedPeers()
+          if (this.sync.websocketConnected) {
+            el.textContent = this.sync.getNumberOfConnectedPeers()
+          } else {
+            el.textContent = translate('Disconnected')
+          }
+          el.parentElement.classList.toggle('off', !this.sync.websocketConnected)
+        })
+      },
+      'properties.starred': () => {
+        Utils.eachElement('.map-star', (el) => {
+          el.classList.toggle('starred', this.properties.starred)
         })
       },
     }
@@ -1383,7 +1399,7 @@ export default class Umap extends ServerStored {
       fallback.show()
       return fallback
     }
-    return this.createDataLayer()
+    return this.createDirtyDataLayer()
   }
 
   findDataLayer(method, context) {
@@ -1531,7 +1547,7 @@ export default class Umap extends ServerStored {
         ? translate('Map has been starred')
         : translate('Map has been unstarred')
     )
-    this.render(['starred'])
+    this.render(['properties.starred'])
   }
 
   processFileToImport(file, layer, type) {
@@ -1547,7 +1563,7 @@ export default class Umap extends ServerStored {
     if (type === 'umap') {
       this.importUmapFile(file, 'umap')
     } else {
-      if (!layer) layer = this.createDataLayer({ name: file.name })
+      if (!layer) layer = this.createDirtyDataLayer({ name: file.name })
       layer.importFromFile(file, type)
     }
   }
@@ -1573,7 +1589,7 @@ export default class Umap extends ServerStored {
         delete geojson._storage
       }
       delete geojson._umap_options?.id // Never trust an id at this stage
-      const dataLayer = this.createDataLayer(geojson._umap_options)
+      const dataLayer = this.createDirtyDataLayer(geojson._umap_options)
       dataLayer.fromUmapGeoJSON(geojson)
     }
 

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

@@ -115,6 +115,8 @@ export function escapeHTML(s) {
       'span',
       'dt',
       'dd',
+      'b',
+      'i',
     ],
     ADD_ATTR: [
       'target',

umap/static/umap/js/umap.controls.js

@@ -337,52 +337,6 @@ U.DrawToolbar = L.Toolbar.Control.extend({
   },
 })
 
-U.DropControl = L.Class.extend({
-  initialize: function (map) {
-    this.map = map
-    this.dropzone = map._container
-  },
-
-  enable: function () {
-    L.DomEvent.on(this.dropzone, 'dragenter', this.dragenter, this)
-    L.DomEvent.on(this.dropzone, 'dragover', this.dragover, this)
-    L.DomEvent.on(this.dropzone, 'drop', this.drop, this)
-    L.DomEvent.on(this.dropzone, 'dragleave', this.dragleave, this)
-  },
-
-  disable: function () {
-    L.DomEvent.off(this.dropzone, 'dragenter', this.dragenter, this)
-    L.DomEvent.off(this.dropzone, 'dragover', this.dragover, this)
-    L.DomEvent.off(this.dropzone, 'drop', this.drop, this)
-    L.DomEvent.off(this.dropzone, 'dragleave', this.dragleave, this)
-  },
-
-  dragenter: function (event) {
-    L.DomEvent.stop(event)
-    this.map.scrollWheelZoom.disable()
-    this.dropzone.classList.add('umap-dragover')
-  },
-
-  dragover: (event) => {
-    L.DomEvent.stop(event)
-  },
-
-  drop: function (event) {
-    this.map.scrollWheelZoom.enable()
-    this.dropzone.classList.remove('umap-dragover')
-    L.DomEvent.stop(event)
-    for (const file of event.dataTransfer.files) {
-      this.map._umap.processFileToImport(file)
-    }
-    this.map._umap.onceDataLoaded(this.map._umap.fitDataBounds)
-  },
-
-  dragleave: function () {
-    this.map.scrollWheelZoom.enable()
-    this.dropzone.classList.remove('umap-dragover')
-  },
-})
-
 U.EditControl = L.Control.extend({
   options: {
     position: 'topright',
@@ -541,11 +495,7 @@ U.StarControl = L.Control.Button.extend({
   options: {
     position: 'topleft',
     title: L._('Star this map'),
-  },
-
-  getClassName: function () {
-    const status = this._umap.properties.starred ? ' starred' : ''
-    return `leaflet-control-star umap-control${status}`
+    className: 'leaflet-control-star map-star umap-control',
   },
 
   onClick: function () {