umap-project 3.3.2__py3-none-any.whl → 3.4.0__py3-none-any.whl

umap/static/umap/js/modules/ui/dialog.js

@@ -78,8 +78,7 @@ export default class Dialog extends WithTemplate {
     if (!this.dialogSupported) {
       this.elements.form.addEventListener('submit', (event) => {
         event.preventDefault()
-        this.dialog.returnValue = 'accept'
-        this.close()
+        this.accept()
       })
     }
     this.dialog.addEventListener('keydown', (e) => {
@@ -118,7 +117,6 @@ export default class Dialog extends WithTemplate {
     this.elements.cancel.hidden = !dialog.cancel
     this.elements.message.textContent = dialog.message
     this.elements.message.hidden = !dialog.message
-    this.elements.target = dialog.target || ''
     this.elements.template.innerHTML = ''
     if (dialog.template?.nodeType === 1) {
       this.elements.template.appendChild(dialog.template)
@@ -137,12 +135,13 @@ export default class Dialog extends WithTemplate {
     if (currentZIndex) {
       this.dialog.style.zIndex = currentZIndex + 1
     }
-
-    this.toggle(true)
-
+    if (this.dialogSupported) {
+      this.dialog.show()
+    } else {
+      this.dialog.hidden = false
+    }
     if (this.hasFormData) this.focusable[0].focus()
     else this.elements.accept.focus()
-
     return this.waitForUser()
   }
 
@@ -151,37 +150,49 @@ export default class Dialog extends WithTemplate {
   }
 
   close() {
-    this.toggle(false)
-    this.dialog.returnValue = undefined
-  }
-
-  toggle(open = false) {
+    this._closing = true
     if (this.dialogSupported) {
-      if (open) this.dialog.show()
-      else this.dialog.close()
+      this.dialog.close()
     } else {
-      this.dialog.hidden = !open
-      if (this.elements.target && !open) {
-        this.elements.target.focus()
-      }
-      if (!open) {
-        this.dialog.dispatchEvent(new CustomEvent('close'))
-      }
+      this.dialog.hidden = true
+      this.dialog.dispatchEvent(new CustomEvent('close'))
     }
   }
 
-  waitForUser() {
+  accept() {
+    this.dialog.returnValue = 'accept'
     return new Promise((resolve) => {
       this.dialog.addEventListener(
         'close',
-        (event) => {
-          if (this.dialog.returnValue === 'accept') {
-            const value = this.hasFormData ? this.collectFormData() : true
-            resolve(value)
-          }
+        () => {
+          resolve()
         },
         { once: true }
       )
+      this.close()
+    })
+  }
+
+  waitForUser() {
+    return new Promise((resolve) => {
+      const onClose = () => {
+        this._closing = false
+        if (this.dialog.returnValue === 'accept') {
+          const value = this.hasFormData ? this.collectFormData() : true
+          resolve(value)
+        }
+      }
+      const waitForClose = () => {
+        this.dialog.returnValue = undefined
+        this.dialog.addEventListener('close', () => onClose(), { once: true })
+      }
+      if (this._closing) {
+        // We are opening a new dialog while another is not fully closed,
+        // so let's first wait for that one to be fully closed
+        this.dialog.addEventListener('close', () => waitForClose(), { once: true })
+      } else {
+        waitForClose()
+      }
     })
   }
 

umap/static/umap/js/modules/ui/panel.js

@@ -7,7 +7,7 @@ export class Panel {
     this._umap = umap
     this._leafletMap = leafletMap
     this.container = DomUtil.create('div', '', this.parent)
-    // This will be set once according to the panel configurated at load
+    // This will be set once according to the panel configured at load
     // or by using panels as popups
     this.mode = null
     this.className = 'left'
@@ -26,12 +26,12 @@ export class Panel {
   }
 
   open({ content, className, highlight, actions = [] } = {}) {
+    let isOpen = false
     if (this.isOpen()) {
+      isOpen = true
       this.onClose()
     }
-    this.container.className = `with-transition panel window ${this.className} ${
-      this.mode || ''
-    }`
+    this.container.className = `with-transition panel window ${this.className} ${this.mode || ''} ${isOpen ? 'on' : ''}`
     if (highlight) {
       this.container.dataset.highlight = highlight
     }
@@ -56,8 +56,22 @@ export class Panel {
     }
     if (className) DomUtil.addClass(body, className)
     const promise = new Promise((resolve, reject) => {
-      DomUtil.addClass(this.container, 'on')
-      resolve(this)
+      if (isOpen) {
+        resolve(this)
+      } else {
+        this.container.classList.add('on')
+        Promise.all(
+          this.container.getAnimations?.().map((animation) => animation.finished)
+        )
+          .then(() => {
+            resolve(this)
+          })
+          .catch(() => {
+            // Panel has been removed, so the DOM has changed, so the animations
+            // were cancelled, we want the new panel callback to be called anyway.
+            resolve(this)
+          })
+      }
     })
     DomEvent.on(closeButton, 'click', this.close, this)
     DomEvent.on(resizeButton, 'click', this.resize, this)
@@ -83,11 +97,12 @@ export class Panel {
   }
 
   onClose() {
-    if (DomUtil.hasClass(this.container, 'on')) {
-      DomUtil.removeClass(this.container, 'on')
+    if (this.container.classList.contains('on')) {
+      this.container.classList.remove('on')
       this._leafletMap.invalidateSize({ pan: false })
     }
   }
+
   scrollTo(selector) {
     const fieldset = this.container.querySelector(selector)
     if (!fieldset) return

umap/static/umap/js/modules/ui/tooltip.js

@@ -4,11 +4,10 @@ import * as Utils from '../utils.js'
 import { Positioned } from './base.js'
 
 export default class Tooltip extends Positioned {
-  constructor(parent) {
+  constructor() {
     super()
-    this.parent = parent
+    this.parent = document.body
     this.container = Utils.loadTemplate('<div class="umap-tooltip-container"></div>')
-    this.parent.appendChild(this.container)
     DomEvent.disableClickPropagation(this.container)
     this.container.addEventListener('contextmenu', (event) => event.stopPropagation()) // Do not activate our custom context menu.
     this.container.addEventListener('wheel', (event) => event.stopPropagation())
@@ -25,7 +24,7 @@ export default class Tooltip extends Positioned {
       } else {
         this.container.innerHTML = Utils.escapeHTML(opts.content)
       }
-      this.parent.classList.add('umap-tooltip')
+      this.parent.appendChild(this.container)
       this.openAt(opts)
     }
     this.TOOLTIP_ID = window.setTimeout(L.bind(showIt, this), opts.delay || 0)
@@ -49,6 +48,8 @@ export default class Tooltip extends Positioned {
     this.toggleClassPosition()
     this.container.innerHTML = ''
     this.setPosition({})
-    this.parent.classList.remove('umap-tooltip')
+    if (this.parent.contains(this.container)) {
+      this.parent.removeChild(this.container)
+    }
   }
 }

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

@@ -10,7 +10,8 @@ import {
 import Browser from './browser.js'
 import Caption from './caption.js'
 import { DataLayer } from './data/layer.js'
-import Facets from './facets.js'
+import { Fields } from './data/fields.js'
+import { Filters, migrateLegacyFilters } from './filters.js'
 import { MutatingForm } from './form/builder.js'
 import { Formatter } from './formatter.js'
 import Help from './help.js'
@@ -32,6 +33,7 @@ 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 DOMUtils from './domutils.js'
 import { DataLayerManager } from './managers.js'
 import { Importer as OpenRouteService } from './importers/openrouteservice.js'
 
@@ -48,6 +50,7 @@ export default class Umap {
   }
 
   async init(element, geojson) {
+    this.migrateLegacyProperties(geojson.properties)
     this.properties = Object.assign(
       {
         enableMarkerDraw: true,
@@ -131,7 +134,8 @@ export default class Umap {
     this.contextmenu = new ContextMenu()
     this.server = new ServerRequest()
     this.request = new Request()
-    this.facets = new Facets(this)
+    this.fields = new Fields(this, this.dialog)
+    this.filters = new Filters(this, this)
     this.browser = new Browser(this, this._leafletMap)
     this.caption = new Caption(this, this._leafletMap)
     this.importer = new Importer(this)
@@ -160,10 +164,6 @@ export default class Umap {
     ) {
       this.properties.slideshow.active = true
     }
-    if (this.properties.advancedFilterKey) {
-      this.properties.facetKey = this.properties.advancedFilterKey
-      delete this.properties.advancedFilterKey
-    }
 
     // Global storage for retrieving datalayers and features.
     this.datalayers = new DataLayerManager()
@@ -261,17 +261,6 @@ export default class Umap {
     return window.self !== window.top
   }
 
-  get fields() {
-    if (!this.properties.fields) this.properties.fields = []
-    return this.properties.fields
-  }
-
-  get fieldKeys() {
-    return this.fields
-      .map((field) => field.key)
-      .concat(...this.datalayers.active().map((dl) => dl.fieldKeys))
-  }
-
   setPropertiesFromQueryString() {
     const asBoolean = (key) => {
       const value = this.searchParams.get(key)
@@ -391,6 +380,17 @@ export default class Umap {
     }
   }
 
+  hasFilters() {
+    return this.filters.size || this.datalayers.active().some((d) => d.filters.size)
+  }
+
+  hasActiveFilters() {
+    return (
+      this.filters.isActive() ||
+      this.datalayers.active().some((d) => d.filters.isActive())
+    )
+  }
+
   getOwnContextMenu(event) {
     const items = []
     if (this.editEnabled) {
@@ -424,7 +424,7 @@ export default class Umap {
         action: () => this.openBrowser('data'),
       }
     )
-    if (this.properties.facetKey) {
+    if (this.hasFilters()) {
       items.push({
         label: translate('Filter data'),
         action: () => this.openBrowser('filters'),
@@ -444,7 +444,13 @@ export default class Umap {
   }
 
   getSharedContextMenu(event) {
-    const items = []
+    const latlng = `${event.latlng.lat.toFixed(6)},${event.latlng.lng.toFixed(6)}`
+    const items = [
+      {
+        label: latlng,
+        action: () => DOMUtils.copyToClipboard(latlng),
+      },
+    ]
     if (this.properties.urls.routing) {
       items.push({
         label: translate('Directions from here'),
@@ -481,7 +487,7 @@ export default class Umap {
   }
 
   search() {
-    if (this._leafletMap._controls.search) this._leafletMap._controls.search.open()
+    if (this._leafletMap._controls.search) this._leafletMap._controls.search.onClick()
   }
 
   hasEditMode() {
@@ -666,7 +672,7 @@ export default class Umap {
     const parent = this._leafletMap.getPane('overlayPane')
     const datalayers = Object.values(this.datalayers)
       .filter((datalayer) => !datalayer._isDeleted)
-      .sort((datalayer1, datalayer2) => datalayer1.rank > datalayer2.rank)
+      .sort((datalayer1, datalayer2) => datalayer1.rank - datalayer2.rank)
     for (const datalayer of datalayers) {
       const child = parent.querySelector(`[data-id="${datalayer.id}"]`)
       parent.appendChild(child)
@@ -720,7 +726,14 @@ export default class Umap {
     return this.properties.name || translate('Untitled map')
   }
 
+  migrateLegacyProperties(properties) {
+    if (migrateLegacyFilters(properties)) {
+      this._migrated = true
+    }
+  }
+
   setProperties(newProperties) {
+    this.migrateLegacyProperties(newProperties)
     for (const key of Object.keys(SCHEMA)) {
       if (newProperties[key] !== undefined) {
         this.properties[key] = newProperties[key]
@@ -758,7 +771,7 @@ export default class Umap {
       'properties.is_template',
     ]
 
-    DomUtil.createTitle(container, translate('Edit map details'), 'icon-caption')
+    DomUtil.createTitle(container, translate('Edit map details'), 'icon-info')
     const builder = new MutatingForm(this, metadataFields, {
       className: 'map-metadata',
       umap: this,
@@ -868,23 +881,22 @@ export default class Umap {
     defaultShapeProperties.appendChild(builder.build())
   }
 
-  _editDefaultProperties(container) {
-    const optionsFields = [
+  _editDefaultKeys(container) {
+    const shapeOptions = [
       'properties.zoomTo',
       'properties.easing',
       'properties.labelKey',
       'properties.sortKey',
       'properties.filterKey',
-      'properties.facetKey',
       'properties.slugKey',
     ]
 
-    const builder = new MutatingForm(this, optionsFields, { umap: this })
-    const defaultProperties = DomUtil.createFieldset(
+    const builder = new MutatingForm(this, shapeOptions, { umap: this })
+    const defaultShapeProperties = DomUtil.createFieldset(
       container,
       translate('Default properties')
     )
-    defaultProperties.appendChild(builder.build())
+    defaultShapeProperties.appendChild(builder.build())
   }
 
   _editInteractionsProperties(container) {
@@ -1159,7 +1171,8 @@ export default class Umap {
     )
     this._editControls(container)
     this._editShapeProperties(container)
-    this._editDefaultProperties(container)
+    this._editDefaultKeys(container)
+    this.fields.edit(container)
     this._editInteractionsProperties(container)
     this.rules.edit(container)
     this._editTilelayer(container)
@@ -1178,6 +1191,16 @@ export default class Umap {
     })
   }
 
+  onAnonymousSave(editUrl) {
+    AlertCreation.info(
+      this,
+      translate('Hey, you created a map without an account!'),
+      Number.Infinity,
+      editUrl,
+      this.properties.urls.map_send_edit_link ? this.sendEditLinkEmail.bind(this) : null
+    )
+  }
+
   async save() {
     const geojson = {
       type: 'Feature',
@@ -1197,11 +1220,10 @@ export default class Umap {
     if (error) {
       return
     }
-    // TOOD: map.save may not always be the first call during save process
+    // TODO: map.save may not always be the first call during save process
     // since SAVEMANAGER refactor
     if (data.login_required) {
-      window.onLogin = () => this.saveAll()
-      window.open(data.login_required)
+      this.askForLogin().then(() => this.saveAll())
       return
     }
     this.properties.user = data.user
@@ -1209,17 +1231,9 @@ export default class Umap {
       this.properties.id = data.id
       this.permissions.setProperties(data.permissions)
       this.permissions.commit()
-      if (data.permissions?.anonymous_edit_url) {
-        this._leafletMap.once('saved', () => {
-          AlertCreation.info(
-            translate('Your map has been created with an anonymous account!'),
-            Number.Infinity,
-            data.permissions.anonymous_edit_url,
-            this.properties.urls.map_send_edit_link
-              ? this.sendEditLinkEmail.bind(this)
-              : null
-          )
-        })
+      const anonymousEditUrl = data.permissions?.anonymous_edit_url
+      if (anonymousEditUrl) {
+        this._leafletMap.once('saved', () => this.onAnonymousSave(anonymousEditUrl))
       } else {
         this._leafletMap.once('saved', () => {
           Alert.success(translate('Congratulations, your map has been created!'))
@@ -1241,6 +1255,29 @@ export default class Umap {
     return true
   }
 
+  askForLogin() {
+    const promise = new Promise((resolve) => {
+      const bc = new BroadcastChannel('auth')
+      bc.onmessage = (event) => {
+        if (event.data === 'auth:ok') {
+          bc.postMessage('auth:close')
+          const url = this.urls.get('whoami', { map_id: this.id })
+          this.server.get(url).then(([data]) => {
+            this.properties.user = data.user
+            if (!this.id) {
+              this.properties.permissions.owner = { ...data.user }
+            }
+            this.permissions.pull()
+            this.render(['user', 'properties.permissions'])
+            resolve()
+          })
+        }
+      }
+    })
+    window.open(this.urls.get('login'))
+    return promise
+  }
+
   exportProperties() {
     const properties = {}
     for (const key of Object.keys(SCHEMA)) {
@@ -1251,6 +1288,18 @@ export default class Umap {
     return properties
   }
 
+  renameField(oldName, newName) {
+    for (const datalayer of this.datalayers.active()) {
+      datalayer.renameFeaturesField(oldName, newName)
+    }
+  }
+
+  deleteField(name) {
+    for (const datalayer of this.datalayers.active()) {
+      datalayer.deleteFeaturesField(name)
+    }
+  }
+
   geometry() {
     /* Return a GeoJSON geometry Object */
     const latlng = this._leafletMap.latLng(
@@ -1269,6 +1318,51 @@ export default class Umap {
     this.drop.enable()
     this.fire('edit:enabled')
     this.initSyncEngine()
+    this.checkForLegacy()
+    this.checkForAnonymous()
+  }
+
+  checkForAnonymous() {
+    if (
+      this.permissions.isAnonymousMap() &&
+      this.permissions.isOwner() &&
+      this.permissions.userIsAuth()
+    ) {
+      this.dialog
+        .confirm(
+          translate('This map is anonymous, do you want to attach it to your account?')
+        )
+        .then(() => {
+          this.permissions.attach()
+        })
+    }
+  }
+
+  checkForLegacy() {
+    let needSaveAlert = false
+    if (this._migrated) {
+      needSaveAlert = true
+      delete this._migrated
+      // Force user to save
+      this.sync.update('properties.name', this.properties.name, this.properties.name)
+    }
+    for (const datalayer of this.datalayers.active()) {
+      if (!datalayer.isReadOnly() && datalayer._migrated) {
+        datalayer._migrated = false
+        // Force user to resave those datalayers
+        datalayer.sync.update(
+          'properties.name',
+          datalayer.properties.name,
+          datalayer.properties.name
+        )
+        needSaveAlert = true
+      }
+    }
+    if (needSaveAlert) {
+      Alert.warning(
+        translate('The map has been upgraded to latest version, please save it.')
+      )
+    }
   }
 
   disableEdit() {
@@ -1312,6 +1406,12 @@ export default class Umap {
     // Propagate will remove the fields it has already
     // processed
     fields = this.propagate(fields)
+    if (fields.includes('properties.filters')) {
+      this.filters.load()
+      if (this.browser.isOpen()) {
+        this.browser.buildFilters()
+      }
+    }
 
     const impacts = Utils.getImpactsFromSchema(fields)
     for (const impact of impacts) {
@@ -1353,7 +1453,7 @@ export default class Umap {
   }
 
   // This method does a targeted update of the UI,
-  // it whould be merged with `render`` method and the
+  // it would be merged with `render`` method and the
   // SCHEMA at some point
   propagate(fields = []) {
     const impacts = {
@@ -1364,7 +1464,7 @@ export default class Umap {
       },
       user: () => {
         Utils.eachElement('.umap-user .username', (el) => {
-          if (this.properties.user?.id) {
+          if (this.permissions.userIsAuth()) {
             el.textContent = this.properties.user.name
           }
         })
@@ -1471,17 +1571,22 @@ export default class Umap {
     `
     const [container, { ul }] = Utils.loadTemplateWithRefs(template)
     this.datalayers.reverse().map((datalayer) => {
-      const row = Utils.loadTemplate(
-        `<li class="orderable"><i class="icon icon-16 icon-drag" title="${translate('Drag to reorder')}"></i></li>`
-      )
-      datalayer.renderToolbox(row)
+      const [row, { toolbox, formbox }] = Utils.loadTemplateWithRefs(`
+        <li class="orderable with-toolbox ${datalayer.cssId}">
+          <span data-ref=formbox class="datalayer-editable-title truncate"></span>
+          <span data-ref=toolbox>
+            <i class="icon icon-16 icon-drag" title="${translate('Drag to reorder')}"></i>
+          </span>
+        </li>
+      `)
+      datalayer.renderToolbox(toolbox)
       const builder = new MutatingForm(
         datalayer,
         [['properties.name', { handler: 'EditableText' }]],
         { className: 'umap-form-inline' }
       )
       const form = builder.build()
-      row.appendChild(form)
+      formbox.appendChild(form)
       row.classList.toggle('off', !datalayer.isVisible())
       row.dataset.id = datalayer.id
       ul.appendChild(row)
@@ -1624,6 +1729,8 @@ export default class Umap {
     const fields = Object.keys(importedData.properties).map(
       (field) => `properties.${field}`
     )
+    this.fields.pull()
+    this.filters.load()
     this.render(fields)
     this._leafletMap._setDefaultCenter()
   }
@@ -1637,7 +1744,7 @@ export default class Umap {
         this.importRaw(rawData)
       } catch (e) {
         console.error('Error importing data', e)
-        U.Alert.error(
+        Alert.error(
           translate('Invalid umap data in {filename}', { filename: file.name })
         )
       }

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

@@ -40,7 +40,7 @@ function _getPropertyName(field) {
  * Return an array of unique impacts.
  *
  * @param {fields}  list[fields]
- * @param object schema object. If ommited, global U.SCHEMA will be used.
+ * @param object schema object. If omitted, global U.SCHEMA will be used.
  * @returns Array[string]
  */
 export function getImpactsFromSchema(fields, schema) {
@@ -400,8 +400,30 @@ export function template(str, data) {
   })
 }
 
+const DATE_REGEX = [
+  // Format 1: "YYYY-MM-DD"
+  /^(?<year>\d{4})[\-\/](?<month>\d{2})[\-\/](?<day>\d{2})$/,
+  // Format2 : "DD-MM-YYYY"
+  /^(?<day>0[1-9]|[12][0-9]|3[01])[\-\/](?<month>0[1-9]|1[0-2])[\-\/](?<year>\d{4})/,
+]
+
 export function parseNaiveDate(value) {
-  const naive = new Date(value)
+  let naive
+  if (!value) return undefined
+  value = String(value)
+  for (const regex of DATE_REGEX) {
+    const parsed = value.match(regex)
+    if (parsed) {
+      const { year, month, day } = parsed.groups
+      naive = new Date(year, Number.parseInt(month, 10) - 1, Number.parseInt(day, 10))
+      break
+    }
+  }
+  if (!naive) {
+    naive = new Date(value)
+  }
+  // Number.isNaN will always return false for invalid date
+  if (isNaN(naive)) return undefined
   // Let's pretend naive date are UTC, and remove time…
   return new Date(Date.UTC(naive.getFullYear(), naive.getMonth(), naive.getDate()))
 }