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

umap/static/umap/js/modules/data/layer.js

@@ -41,7 +41,7 @@ export class DataLayer extends ServerStored {
   constructor(umap, leafletMap, data = {}) {
     super()
     this._umap = umap
-    this.sync = umap.sync_engine.proxy(this)
+    this.sync = umap.syncEngine.proxy(this)
     this._index = Array()
     this._features = {}
     this._geojson = null
@@ -88,7 +88,6 @@ export class DataLayer extends ServerStored {
 
     if (!this.createdOnServer) {
       if (this.showAtLoad()) this.show()
-      this.isDirty = true
     }
 
     // Only layers that are displayed on load must be hidden/shown
@@ -151,7 +150,6 @@ export class DataLayer extends ServerStored {
           for (const field of fields) {
             this.layer.onEdit(field, builder)
           }
-          this.redraw()
           this.show()
           break
         case 'remote-data':
@@ -526,15 +524,13 @@ export class DataLayer extends ServerStored {
   }
 
   async importFromFiles(files, type) {
-    let all = []
+    const toLoad = []
     for (const file of files) {
-      const features = await this.importFromFile(file, type)
-      if (features) {
-        all = all.concat(features)
-      }
+      toLoad.push(this.importFromFile(file, type))
     }
+    const features = await Promise.all(toLoad)
     return new Promise((resolve) => {
-      resolve(all)
+      resolve([].concat(...features))
     })
   }
 
@@ -594,7 +590,7 @@ export class DataLayer extends ServerStored {
     options.name = translate('Clone of {name}', { name: this.options.name })
     delete options.id
     const geojson = Utils.CopyJSON(this._geojson)
-    const datalayer = this._umap.createDataLayer(options)
+    const datalayer = this._umap.createDirtyDataLayer(options)
     datalayer.fromGeoJSON(geojson)
     return datalayer
   }
@@ -613,7 +609,10 @@ export class DataLayer extends ServerStored {
   }
 
   reset() {
-    if (!this.createdOnServer) this.erase()
+    if (!this.createdOnServer) {
+      this.erase()
+      return
+    }
 
     this.resetOptions()
     this.parentPane.appendChild(this.pane)
@@ -951,9 +950,13 @@ export class DataLayer extends ServerStored {
     else this.hide()
   }
 
-  zoomTo(bounds) {
+  zoomTo() {
     if (!this.isVisible()) return
-    bounds = bounds || this.layer.getBounds()
+    const bounds = this.layer.getBounds()
+    this.zoomToBounds(bounds)
+  }
+
+  zoomToBounds(bounds) {
     if (bounds.isValid()) {
       const options = { maxZoom: this.getOption('zoomTo') }
       this._leafletMap.fitBounds(bounds, options)
@@ -1065,7 +1068,7 @@ export class DataLayer extends ServerStored {
 
   setReferenceVersion({ response, sync }) {
     this._referenceVersion = response.headers.get('X-Datalayer-Version')
-    this.sync.update('_referenceVersion', this._referenceVersion)
+    if (sync) this.sync.update('_referenceVersion', this._referenceVersion)
   }
 
   async save() {

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

@@ -0,0 +1,55 @@
+export default class DropControl {
+  constructor(umap, leafletMap, dropzone) {
+    this._umap = umap
+    this._leafletMap = leafletMap
+    this.dropzone = dropzone
+  }
+
+  enable() {
+    this.controller = new AbortController()
+    this.dropzone.addEventListener('dragenter', (e) => this.dragenter(e), {
+      signal: this.controller.signal,
+    })
+    this.dropzone.addEventListener('dragover', (e) => this.dragover(e), {
+      signal: this.controller.signal,
+    })
+    this.dropzone.addEventListener('drop', (e) => this.drop(e), {
+      signal: this.controller.signal,
+    })
+    this.dropzone.addEventListener('dragleave', (e) => this.dragleave(e), {
+      signal: this.controller.signal,
+    })
+  }
+
+  disable() {
+    this.controller.abort()
+  }
+
+  dragenter(event) {
+    event.stopPropagation()
+    event.preventDefault()
+    this._leafletMap.scrollWheelZoom.disable()
+    this.dropzone.classList.add('umap-dragover')
+  }
+
+  dragover(event) {
+    event.stopPropagation()
+    event.preventDefault()
+  }
+
+  drop(event) {
+    this._leafletMap.scrollWheelZoom.enable()
+    this.dropzone.classList.remove('umap-dragover')
+    event.stopPropagation()
+    event.preventDefault()
+    const importer = this._umap.importer
+    importer.build()
+    importer.files = event.dataTransfer.files
+    importer.submit()
+  }
+
+  dragleave() {
+    this._leafletMap.scrollWheelZoom.enable()
+    this.dropzone.classList.remove('umap-dragover')
+  }
+}

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

@@ -64,7 +64,10 @@ export default class Importer extends Utils.WithTemplate {
     this.TYPES = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
     this.IMPORTERS = []
     this.loadImporters()
-    this.dialog = new Dialog({ className: 'importers dark' })
+    this.dialog = new Dialog({
+      className: 'importers dark',
+      back: () => this.showImporters(),
+    })
   }
 
   loadImporters() {
@@ -121,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
   }
@@ -158,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 })
     )
   }
 
@@ -172,7 +180,7 @@ export default class Importer extends Utils.WithTemplate {
       button.addEventListener('click', () => plugin.open(this))
       grid.appendChild(button)
     }
-    this.dialog.open({ template: element, cancel: false, accept: false })
+    this.dialog.open({ template: element, cancel: false, accept: false, back: false })
   }
 
   build() {
@@ -210,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 = ''
@@ -355,9 +363,11 @@ export default class Importer extends Utils.WithTemplate {
 
   onSuccess(count) {
     if (count) {
-      Alert.success(translate('Successfully imported {count} feature(s)'), {
-        count: count,
-      })
+      Alert.success(
+        translate('Successfully imported {count} feature(s)', {
+          count: count,
+        })
+      )
     } else {
       Alert.success(translate('Data successfully imported!'))
     }
@@ -377,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/icon.js

@@ -22,7 +22,7 @@ export function getClass(name) {
 
 export const RECENT = []
 
-const BaseIcon = L.DivIcon.extend({
+const BaseIcon = DivIcon.extend({
   initialize: function (options) {
     const default_options = {
       iconSize: null, // Made in css
@@ -86,6 +86,7 @@ const DefaultIcon = BaseIcon.extend({
   },
 
   _setIconStyles: function (img, name) {
+    if (this.feature.isActive()) this.options.className += ' umap-icon-active'
     BaseIcon.prototype._setIconStyles.call(this, img, name)
     const color = this._getColor()
     const opacity = this._getOpacity()

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)
   },
 
@@ -233,12 +234,8 @@ const ManageTilelayerMixin = {
   },
 
   updateTileLayers: function () {
-    const callback = (tilelayer) => {
-      this.options.tilelayer = tilelayer.toJSON()
-      this._umap.isDirty = true
-    }
     if (this._controls.tilelayersChooser) {
-      this._controls.tilelayersChooser.openSwitcher({ callback, edit: true })
+      this._controls.tilelayersChooser.openSwitcher({ edit: true })
     }
   },
 }
@@ -263,8 +260,12 @@ export const LeafletMap = BaseMap.extend({
     this.loader.onAdd(this)
 
     if (!this.options.noControl) {
-      DomEvent.on(document.body, 'dataloading', (e) => this.fire('dataloading', e))
-      DomEvent.on(document.body, 'dataload', (e) => this.fire('dataload', e))
+      DomEvent.on(document.body, 'dataloading', (event) =>
+        this.fire('dataloading', event.detail)
+      )
+      DomEvent.on(document.body, 'dataload', (event) =>
+        this.fire('dataload', event.detail)
+      )
       this.on('click', this.closeInplaceToolbar)
     }
 

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/rendering/ui.js

@@ -238,11 +238,15 @@ export const LeafletMarker = Marker.extend({
   },
 
   highlight: function () {
-    DomUtil.addClass(this.options.icon.elements.main, 'umap-icon-active')
+    this.feature.activate()
+    this._redraw()
+    this._bringToFront()
   },
 
   resetHighlight: function () {
-    DomUtil.removeClass(this.options.icon.elements.main, 'umap-icon-active')
+    this.feature.deactivate()
+    this._redraw()
+    this._resetZIndex()
   },
 
   getPopupToolbarAnchor: function () {

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

@@ -47,8 +47,8 @@ class BaseRequest {
 // In case of error, an alert is sent, but non 20X status are not handled
 // The consumer must check the response status by hand
 export class Request extends BaseRequest {
-  fire(name, params) {
-    document.body.dispatchEvent(new CustomEvent(name, params))
+  fire(name, detail) {
+    document.body.dispatchEvent(new CustomEvent(name, { detail }))
   }
 
   async _fetch(method, uri, headers, data) {

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()
   }
 }