umap-project 3.4.0b3__py3-none-any.whl → 3.4.2__py3-none-any.whl

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

@@ -1,9 +1,9 @@
 // FIXME: this module should not depend on Leaflet
 import {
   DomEvent,
-  DomUtil,
   GeoJSON,
   stamp,
+  SVG,
 } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import {
   uMapAlert as Alert,
@@ -19,6 +19,7 @@ import { Heat } from '../rendering/layers/heat.js'
 import * as Schema from '../schema.js'
 import TableEditor from '../tableeditor.js'
 import * as Utils from '../utils.js'
+import * as DOMUtils from '../domutils.js'
 import { LineString, Point, Polygon } from './features.js'
 import Rules from '../rules.js'
 import { FeatureManager } from '../managers.js'
@@ -50,7 +51,7 @@ export class DataLayer {
     this.parentPane = this._leafletMap.getPane('overlayPane')
     this.pane = this._leafletMap.createPane(`datalayer${stamp(this)}`, this.parentPane)
     // FIXME: should be on layer
-    this.renderer = L.svg({ pane: this.pane })
+    this.renderer = new SVG({ pane: this.pane })
     this.defaultProperties = {
       displayOnLoad: true,
       inCaption: true,
@@ -84,17 +85,15 @@ export class DataLayer {
     }
     this.connectToMap()
     this.permissions = new DataLayerPermissions(this._umap, this)
-    this.rules = new Rules(umap, this)
 
     this._needsFetch = this.createdOnServer || this.isRemoteLayer()
+    this.fields = new Fields(this, this._umap.dialog)
+    this.filters = new Filters(this, this._umap)
+    this.rules = new Rules(umap, this)
+
     if (!this.createdOnServer) {
       if (this.showAtLoad()) this.show()
     }
-    if (!this._needsFetch && !this._umap.fields.size) {
-      this.properties.fields = getDefaultFields()
-    }
-    this.fields = new Fields(this, this._umap.dialog)
-    this.filters = new Filters(this, this._umap)
 
     // Only layers that are displayed on load must be hidden/shown
     // Automatically, others will be shown manually, and thus will
@@ -146,12 +145,6 @@ export class DataLayer {
     this.properties.rank = value
   }
 
-  get fieldKeys() {
-    // Needed to get a similar API from layer and uMap, but
-    // uMap would return concat of all datalayers fields
-    return Array.from(this.fields.keys())
-  }
-
   get sortKey() {
     return this.getProperty('sortKey') || U.DEFAULT_LABEL_KEY
   }
@@ -230,27 +223,28 @@ export class DataLayer {
   }
 
   showAtLoad() {
-    return this.autoLoaded && this.showAtZoom()
+    return this.autoVisibility && this.showAtZoom()
   }
 
-  get autoLoaded() {
-    if (this._autoLoaded === undefined) {
+  get autoVisibility() {
+    if (this._autoVisibility === undefined) {
       if (this._umap.datalayersFromQueryString) {
         const datalayerIds = this._umap.datalayersFromQueryString
-        this._autoLoaded = datalayerIds.includes(this.id.toString())
+        this._autoVisibility = datalayerIds.includes(this.id.toString())
         if (this.properties.old_id) {
-          this._autoLoaded =
-            this._autoLoaded || datalayerIds.includes(this.properties.old_id.toString())
+          this._autoVisibility =
+            this._autoVisibility ||
+            datalayerIds.includes(this.properties.old_id.toString())
         }
       } else {
-        this._autoLoaded = this.properties.displayOnLoad
+        this._autoVisibility = this.properties.displayOnLoad
       }
     }
-    return this._autoLoaded
+    return this._autoVisibility
   }
 
-  set autoLoaded(value) {
-    this._autoLoaded = value
+  set autoVisibility(value) {
+    this._autoVisibility = value
   }
 
   insertBefore(other) {
@@ -451,6 +445,10 @@ export class DataLayer {
     this._umap.featuresIndex[feature.getSlug()] = feature
     // TODO: quid for remote data ?
     this.inferFields(feature)
+    if (!this.fields.size && !this._umap.fields.size) {
+      this.properties.fields = getDefaultFields()
+      this.fields.pull()
+    }
     try {
       this.showFeature(feature)
     } catch (error) {
@@ -527,12 +525,10 @@ export class DataLayer {
     this.features.forEach((feature) => callback(feature))
   }
 
-  sortedValues(property) {
-    return this.features
-      .all()
-      .map((feature) => feature.properties[property])
-      .filter((val, idx, arr) => arr.indexOf(val) === idx)
-      .sort(Utils.naturalSort)
+  sortedValues(key) {
+    const field = this.fields.get(key) || this._umap.fields.get(key)
+    if (!field) return []
+    return field.values(this.features.all()).sort(Utils.naturalSort)
   }
 
   addData(geojson, sync) {
@@ -777,7 +773,11 @@ export class DataLayer {
         },
       ],
     ]
-    DomUtil.createTitle(container, translate('Layer properties'), 'icon-layers')
+    container.appendChild(
+      DOMUtils.loadTemplate(`
+      <h3><i class="icon icon-16 icon-layers"></i>${translate('Layer properties')}</h3>
+    `)
+    )
     const builder = new MutatingForm(this, metadataFields)
     builder.on('set', ({ detail }) => {
       this._umap.onDataLayersChanged()
@@ -823,7 +823,7 @@ export class DataLayer {
     const builder = new MutatingForm(this, fields, {
       id: 'datalayer-advanced-properties',
     })
-    const shapeFieldset = DomUtil.createFieldset(
+    const shapeFieldset = DOMUtils.createFieldset(
       container,
       translate('Shape properties')
     )
@@ -848,7 +848,7 @@ export class DataLayer {
         this.reindex()
       }
     })
-    const advancedFieldset = DomUtil.createFieldset(
+    const advancedFieldset = DOMUtils.createFieldset(
       container,
       translate('Advanced properties')
     )
@@ -867,7 +867,7 @@ export class DataLayer {
       'properties.interactive',
     ]
     const builder = new MutatingForm(this, fields)
-    const popupFieldset = DomUtil.createFieldset(
+    const popupFieldset = DOMUtils.createFieldset(
       container,
       translate('Interaction options')
     )
@@ -885,7 +885,7 @@ export class DataLayer {
       'properties.textPathPosition',
     ]
     const builder = new MutatingForm(this, fields)
-    const fieldset = DomUtil.createFieldset(container, translate('Line decoration'))
+    const fieldset = DOMUtils.createFieldset(container, translate('Line decoration'))
     fieldset.appendChild(builder.build())
   }
 
@@ -935,23 +935,21 @@ export class DataLayer {
       fields.push('properties.remoteData.ttl')
     }
 
-    const remoteDataContainer = DomUtil.createFieldset(
+    const remoteDataContainer = DOMUtils.createFieldset(
       container,
       translate('Remote data')
     )
     const builder = new MutatingForm(this, fields)
     remoteDataContainer.appendChild(builder.build())
-    DomUtil.createButton(
-      'button umap-verify',
-      remoteDataContainer,
-      translate('Verify remote URL'),
-      () => this.fetchRemoteData(true),
-      this
-    )
+    const button = DOMUtils.loadTemplate(`
+      <button class="umap-verify" type="button">${translate('Verify remote URL')}</button>
+    `)
+    button.addEventListener('click', () => this.fetchRemoteData(true))
+    remoteDataContainer.appendChild(button)
   }
 
   _buildAdvancedActions(container) {
-    const advancedActions = DomUtil.createFieldset(
+    const advancedActions = DOMUtils.createFieldset(
       container,
       translate('Advanced actions')
     )
@@ -991,7 +989,7 @@ export class DataLayer {
     if (!this._umap.editEnabled) {
       return
     }
-    const container = DomUtil.create('div', 'umap-layer-properties-container')
+    const container = document.createElement('div')
     this._editMetadata(container)
     this._editLayerProperties(container)
     this._editShapeProperties(container)
@@ -1008,15 +1006,13 @@ export class DataLayer {
 
     this._buildAdvancedActions(container)
 
-    const backButton = DomUtil.createButtonIcon(
-      undefined,
-      'icon-back',
-      translate('Back to layers')
-    )
+    const backButton = DOMUtils.loadTemplate(`
+      <button class="icon icon-16 icon-back" type="button" title="${translate('Back to layers')}"></button>
+    `)
     // Fixme: remove me when this is merged and released
     // https://github.com/Leaflet/Leaflet/pull/9052
     DomEvent.disableClickPropagation(backButton)
-    DomEvent.on(backButton, 'click', this._umap.editDatalayers, this._umap)
+    backButton.addEventListener('click', () => this._umap.editDatalayers())
 
     return this._umap.editPanel.open({
       content: container,
@@ -1067,14 +1063,14 @@ export class DataLayer {
       button.addEventListener('click', () => this.restore(data.ref))
     }
 
-    const versionsContainer = DomUtil.createFieldset(container, translate('Versions'), {
-      async callback() {
+    const versionsContainer = DOMUtils.createFieldset(container, translate('Versions'))
+    versionsContainer.closest('details').addEventListener('toggle', async (event) => {
+      if (event.target.open) {
         const [{ versions }, response, error] = await this._umap.server.get(
           this.getVersionsUrl()
         )
         if (!error) versions.forEach(appendVersion)
-      },
-      context: this,
+      }
     })
   }
 
@@ -1124,7 +1120,7 @@ export class DataLayer {
     // From now on, do not try to how/hide
     // automatically this layer, as user
     // has taken control on this.
-    this.autoLoaded = false
+    this.autoVisibility = false
     let display = force
     if (force === undefined) {
       if (!this.isVisible()) display = true
@@ -1345,7 +1341,10 @@ export class DataLayer {
         rules.set(rule.condition, rule)
       }
       for (const rule of this._umap.rules) {
-        if (!rules.has(rule.condition) && this.fields.has(rule.key)) {
+        if (
+          !rules.has(rule.condition) &&
+          (this.fields.has(rule.field.key) || this._umap.fields.has(rule.field.key))
+        ) {
           rules.set(rule.condition, rule)
         }
       }
@@ -1364,31 +1363,17 @@ export class DataLayer {
   }
 
   renderToolbox(container) {
-    const toggle = DomUtil.createButtonIcon(
-      container,
-      'icon-eye',
-      translate('Show/hide layer')
-    )
-    const table = DomUtil.createButtonIcon(
-      container,
-      'icon-table show-on-edit',
-      translate('Edit properties in a table')
-    )
-    const zoomTo = DomUtil.createButtonIcon(
-      container,
-      'icon-zoom',
-      translate('Zoom to layer extent')
-    )
-    const edit = DomUtil.createButtonIcon(
-      container,
-      'icon-edit show-on-edit',
-      translate('Edit')
-    )
-    const remove = DomUtil.createButtonIcon(
-      container,
-      'icon-delete show-on-edit',
-      translate('Delete layer')
-    )
+    const [span, { toggle, table, zoomTo, edit, remove }] =
+      DOMUtils.loadTemplateWithRefs(`
+      <span>
+        <button class="icon icon-16 icon-eye" title="${translate('Show/hide layer')}" type="button" data-ref="toggle"></button>
+        <button class="icon icon-16 icon-table show-on-edit" title="${translate('Edit properties in a table')}" type="button" data-ref="table"></button>
+        <button class="icon icon-16 icon-zoom" title="${translate('Zoom to layer extent')}" type="button" data-ref="zoomTo"></button>
+        <button class="icon icon-16 icon-edit show-on-edit" title="${translate('Edit')}" type="button" data-ref="edit"></button>
+        <button class="icon icon-16 icon-delete show-on-edit" title="${translate('Delete layer')}" type="button" data-ref="remove"></button>
+      </span>
+    `)
+    container.appendChild(span)
     if (this.isReadOnly()) {
       container.classList.add('readonly')
     } else {
@@ -1412,7 +1397,7 @@ export class DataLayer {
   propagateDelete() {
     const els = this.getHidableElements()
     for (const el of els) {
-      DomUtil.remove(el)
+      el.remove()
     }
   }
 
@@ -1425,15 +1410,15 @@ export class DataLayer {
 
   propagateHide() {
     const els = this.getHidableElements()
-    for (let i = 0; i < els.length; i++) {
-      DomUtil.addClass(els[i], 'off')
+    for (const el of els) {
+      el.classList.add('off')
     }
   }
 
   propagateShow() {
     const els = this.getHidableElements()
-    for (let i = 0; i < els.length; i++) {
-      DomUtil.removeClass(els[i], 'off')
+    for (const el of els) {
+      el.classList.remove('off')
     }
   }
 }

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

@@ -32,7 +32,7 @@ export const copyToClipboard = (textToCopy) => {
   tooltip.open({ content: translate('✅ Copied!'), duration: 5000 })
 }
 
-export const copiableInput = (parent, label, value) => {
+export const copiableInput = (parent, label, value = '') => {
   const [container, { input, button }] = Utils.loadTemplateWithRefs(`
     <div class="copiable-input">
       <label>${label}<input type="text" readOnly value="${value}" data-ref=input /></label>
@@ -107,3 +107,23 @@ export const contrastedColor = (el, bgcolor) => {
   if (bgcolor) CACHE_CONTRAST[bgcolor] = out
   return out
 }
+
+export const createFieldset = (parent, title, options) => {
+  options = options || {}
+  const [details, { summary, fieldset }] = loadTemplateWithRefs(`
+    <details class="${options.className || ''}">
+      <summary data-ref="summary"><h4>${title}</h4></summary>
+      <fieldset data-ref="fieldset"></fieldset>
+    </details>
+  `)
+  details.open = options.on === true
+  parent.appendChild(details)
+  if (options.icon) {
+    const icon = loadTemplate(`<i class="icon icon-16 ${options.icon}"></i>`)
+    summary.insertBefore(icon, summary.firstChild)
+  }
+  return fieldset
+}
+
+export const loadTemplateWithRefs = Utils.loadTemplateWithRefs
+export const loadTemplate = Utils.loadTemplate

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

@@ -6,27 +6,6 @@ import { Fields } from './form/fields.js'
 
 const EMPTY_VALUE = translate('<empty value>')
 
-const getParser = (type) => {
-  switch (type) {
-    case 'Number':
-      return Number.parseFloat
-    case 'Datetime':
-      return (v) => new Date(v)
-    case 'Date':
-      return Utils.parseNaiveDate
-    case 'Boolean':
-      return Boolean
-    case 'Enum':
-      return (v) => {
-        if (!v) return [EMPTY_VALUE]
-        return String(v || '')
-          .split(',')
-          .map((s) => s.trim())
-      }
-    default:
-      return (v) => String(v || '')
-  }
-}
 const Widgets = {}
 
 class BaseWidget {
@@ -73,13 +52,13 @@ Widgets.MinMax = class extends BaseWidget {
     return this.userData.min !== undefined || this.userData.max !== undefined
   }
   getFormField(field) {
-    if (field.type === 'Number') {
+    if (field.TYPE === 'Number') {
       return 'FilterByNumber'
     }
-    if (field.type === 'Date') {
+    if (field.TYPE === 'Date') {
       return 'FilterByDate'
     }
-    if (field.type === 'Datetime') {
+    if (field.TYPE === 'Datetime') {
       return 'FilterByDateTime'
     }
     return super.getFormField(field)
@@ -186,16 +165,15 @@ export class Filters {
   // and max values.
   computeInitialData() {
     const initialData = Object.fromEntries(
-      this.available.keys().map((name) => [name, {}])
+      Array.from(this.available.keys()).map((name) => [name, {}])
     )
 
     for (const [name, filter] of this.available.entries()) {
       const field = this._parent.fields.get(name)
       if (!field) continue
-      const parser = getParser(field.type)
       this._parent.eachFeature((feature) => {
         let value = feature.properties[name]
-        value = parser(value)
+        value = field.parse(value)
         filter.computeInitialData(initialData[name], value)
       })
     }
@@ -228,14 +206,8 @@ export class Filters {
   }
 
   load() {
-    let filters = this._parent.properties.filters || []
-    // TMP fix for dev server to update map created before changing
-    // filters to be an array
-    if (typeof filters === 'object' && !Array.isArray(filters) && filters !== null) {
-      filters = Object.entries(filters).map(([fieldKey, props]) => {
-        return { fieldKey, ...props }
-      })
-    }
+    let filters = this._parent.properties.filters
+    if (!Array.isArray(filters)) filters = []
     for (const filter of filters) {
       this._add({ ...filter })
     }
@@ -377,9 +349,9 @@ export class Filters {
   createFilterForm(fieldKey) {
     let widget = 'Checkbox'
     const field = this._parent.fields.get(fieldKey)
-    if (['Number', 'Date', 'Datetime'].includes(field?.type)) {
+    if (['Number', 'Date', 'Datetime'].includes(field?.TYPE)) {
       widget = 'MinMax'
-    } else if (field?.type === 'Boolean') {
+    } else if (field?.TYPE === 'Boolean') {
       widget = 'Switch'
     }
     const properties = {
@@ -392,7 +364,9 @@ export class Filters {
       ? [fieldKey]
       : [
           '',
-          ...this._parent.fieldKeys.filter((fieldKey) => !this.available.has(fieldKey)),
+          ...Array.from(this._parent.fields.keys()).filter(
+            (fieldKey) => !this.available.has(fieldKey)
+          ),
         ]
     const metadata = [
       [
@@ -474,8 +448,7 @@ export class Filters {
       // This field may only exist on another layer.
       if (!field) continue
       let value = feature.properties[fieldKey]
-      const parser = getParser(field.type)
-      value = parser(value)
+      value = field.parse(value)
       if (obj.match(value)) return true
     }
     return false

umap/static/umap/js/modules/form/fields.js

@@ -746,7 +746,7 @@ Fields.PropertyInput = class extends Fields.BlurInput {
     super.build()
     const autocomplete = new AutocompleteDatalist(this.input)
     // Will be used on Umap and DataLayer
-    const properties = this.builder.obj.fieldKeys
+    const properties = Array.from(this.builder.obj.fields.keys())
     autocomplete.suggestions = properties
   }
 }
@@ -1217,7 +1217,7 @@ Fields.ManageOwner = class extends Fields.Base {
     super.build()
     const options = {
       className: 'edit-owner',
-      on_select: L.bind(this.onSelect, this),
+      on_select: (choice) => this.onSelect(choice),
       placeholder: translate("Type new owner's username"),
     }
     this.autocomplete = new AjaxAutocomplete(this.container, options)
@@ -1248,8 +1248,8 @@ Fields.ManageEditors = class extends Fields.Base {
     super.build()
     const options = {
       className: 'edit-editors',
-      on_select: L.bind(this.onSelect, this),
-      on_unselect: L.bind(this.onUnselect, this),
+      on_select: (choice) => this.onSelect(choice),
+      on_unselect: (choice) => this.onUnselect(choice),
       placeholder: translate("Type editor's username"),
     }
     this.autocomplete = new AjaxAutocompleteMultiple(this.container, options)

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

@@ -71,7 +71,15 @@ export class Formatter {
     } catch (e) {
       src = this.toDom(str)
     }
-    return osmtogeojson(src, { flatProperties: true })
+    const data = osmtogeojson(src, { flatProperties: true })
+    // FIXME: make a PR to osmtogeojson when it's more active
+    // cf https://github.com/umap-project/umap/issues/3072
+    for (const feature of data.features || []) {
+      const [osm_type, osm_id] = feature.properties.id.split('/')
+      feature.properties.osm_id = osm_id
+      feature.properties.osm_type = osm_type
+    }
+    return data
   }
 
   fromCSV(str, callback) {

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

@@ -1,7 +1,7 @@
-import { DomEvent, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from './i18n.js'
 import Dialog from './ui/dialog.js'
 import * as Utils from './utils.js'
+import * as DOMUtils from './domutils.js'
 
 const SHORTCUTS = {
   DRAW_MARKER: {
@@ -209,15 +209,15 @@ export default class Help {
   }
 
   show(entries) {
-    const container = DomUtil.add('div')
-    DomUtil.createTitle(container, translate('Help'))
+    const container = DOMUtils.loadTemplate(`
+      <div>
+        <h3><i class="icon icon-16 icon-help"></i> ${translate('Help')}</h3>
+      </div>
+    `)
     for (const name of entries) {
-      DomUtil.element({
-        tagName: 'div',
-        className: 'umap-help-entry',
-        parent: container,
-        innerHTML: ENTRIES[name],
-      })
+      container.appendChild(
+        DOMUtils.loadTemplate(`<div class="umap-help-entry">${ENTRIES[name]}</div>`)
+      )
     }
     this.dialog.open({ template: container })
   }
@@ -253,11 +253,10 @@ export default class Help {
   }
 
   button(container, entries) {
-    const button = DomUtil.createButton(
-      'umap-help-button',
-      container,
-      translate('Help')
+    const button = DOMUtils.loadTemplate(
+      `<button class="umap-help-button" type="button">${translate('Help')}</button>`
     )
+    container.appendChild(button)
     button.addEventListener('click', () => this.show(entries))
     return button
   }

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

@@ -1,13 +1,10 @@
-import {
-  DomEvent,
-  DomUtil,
-  LatLngBounds,
-} from '../../vendors/leaflet/leaflet-src.esm.js'
+import { LatLngBounds } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { uMapAlert as Alert } from '../components/alerts/alert.js'
 import { translate } from './i18n.js'
 import { SCHEMA } from './schema.js'
 import Dialog from './ui/dialog.js'
 import * as Utils from './utils.js'
+import * as DOMUtils from './domutils.js'
 
 const TEMPLATE = `
   <div class="umap-import">
@@ -203,18 +200,15 @@ export default class Importer extends Utils.WithTemplate {
       button.toggleAttribute('hidden', false)
     }
     for (const type of this.TYPES) {
-      DomUtil.element({
-        tagName: 'option',
-        parent: this.qs('[name=format]'),
-        value: type,
-        textContent: type,
-      })
+      this.qs('[name=format]').appendChild(
+        DOMUtils.loadTemplate(`<option value="${type}">${type}</option>`)
+      )
     }
     this._umap.help.parse(this.container)
     this.qs('[name=submit]').addEventListener('click', () => this.submit())
-    DomEvent.on(this.qs('[type=file]'), 'change', this.onFileChange, this)
+    this.qs('[type=file]').addEventListener('change', () => this.onFileChange())
     for (const element of this.container.querySelectorAll('[onchange]')) {
-      DomEvent.on(element, 'change', this.onChange, this)
+      element.addEventListener('change', () => this.onChange())
     }
   }
 
@@ -253,21 +247,18 @@ export default class Importer extends Utils.WithTemplate {
     layerSelect.innerHTML = ''
     this._umap.datalayers.reverse().map((datalayer) => {
       if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
-        DomUtil.element({
-          tagName: 'option',
-          parent: layerSelect,
-          textContent: datalayer.getName(),
-          value: datalayer.id,
-        })
+        layerSelect.appendChild(
+          DOMUtils.loadTemplate(
+            `<option value="${datalayer.id}">${datalayer.getName()}</option>`
+          )
+        )
       }
     })
-    DomUtil.element({
-      tagName: 'option',
-      value: '',
-      textContent: translate('Import in a new layer'),
-      parent: layerSelect,
-      selected: true,
-    })
+    layerSelect.appendChild(
+      DOMUtils.loadTemplate(
+        `<option value="" selected>${translate('Import in a new layer')}</option>`
+      )
+    )
   }
 
   open() {

umap/static/umap/js/modules/importers/banfr.js

@@ -1,4 +1,3 @@
-import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { uMapAlert as Alert } from '../../components/alerts/alert.js'
 import { BaseAjax, SingleMixin } from '../autocomplete.js'
 import { translate } from '../i18n.js'