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

umap/static/umap/js/modules/data/fields.js

@@ -9,6 +9,190 @@ export const getDefaultFields = () => [
   { key: 'description', type: 'Text' },
 ]
 
+export const Registry = {}
+
+class BaseField {
+  constructor(key) {
+    this.key = key
+  }
+
+  values(features) {
+    return features
+      .map((feature) => this.parse(feature.properties[this.key]))
+      .filter((val, idx, arr) => arr.indexOf(val) === idx)
+  }
+
+  equal(expected, other) {
+    return expected === other
+  }
+
+  not_equal(expected, other) {
+    return expected !== other
+  }
+
+  gt(expected, other) {
+    return other > expected
+  }
+
+  lt(expected, other) {
+    return other < expected
+  }
+
+  render(value) {
+    return Utils.escapeHTML(value).trim()
+  }
+
+  cast(value) {
+    return this.parse(value)
+  }
+
+  dumps() {
+    return {
+      key: this.key,
+      type: this.TYPE,
+    }
+  }
+}
+
+Registry.String = class extends BaseField {
+  constructor(key) {
+    super(key)
+    // FIXME make it dynamic from class name
+    this.TYPE = 'String'
+    this.LABEL = translate('Short text')
+  }
+
+  parse(value) {
+    return String(value ?? '')
+  }
+
+  render(value) {
+    value = super.render(value)
+    // TODO, manage links (url, mailto, wikipedia...)
+    if (value.indexOf('http') === 0) {
+      value = `<a href="${value}" target="_blank">${value}</a>`
+    }
+    return value
+  }
+}
+
+Registry.Text = class extends Registry.String {
+  constructor(key) {
+    super(key)
+    // FIXME make it dynamic from class name
+    this.TYPE = 'Text'
+    this.LABEL = translate('Text')
+  }
+
+  render(value) {
+    return Utils.toHTML(value)
+  }
+}
+
+Registry.Number = class extends BaseField {
+  constructor(key) {
+    super(key)
+    // FIXME make it dynamic from class name
+    this.TYPE = 'Number'
+    this.LABEL = translate('Number')
+  }
+
+  parse(value) {
+    const parsed = Number.parseFloat(value)
+    if (Number.isNaN(parsed)) return null
+    return parsed
+  }
+}
+
+Registry.Datetime = class extends BaseField {
+  constructor(key) {
+    super(key)
+    // FIXME make it dynamic from class name
+    this.TYPE = 'Datetime'
+    this.LABEL = translate('Date and time')
+  }
+
+  parse(value) {
+    return new Date(value)
+  }
+}
+
+Registry.Date = class extends BaseField {
+  constructor(key) {
+    super(key)
+    // FIXME make it dynamic from class name
+    this.TYPE = 'Date'
+    this.LABEL = translate('Date')
+  }
+
+  parse(value) {
+    return Utils.parseNaiveDate(value)
+  }
+}
+
+Registry.Boolean = class extends BaseField {
+  constructor(key) {
+    super(key)
+    // FIXME make it dynamic from class name
+    this.TYPE = 'Boolean'
+    this.LABEL = translate('Yes / No')
+  }
+
+  parse(value) {
+    // 'yes' is used in OpenStreetMap data
+    return ['true', '1', 'yes'].includes(`${value}`.toLowerCase())
+  }
+}
+
+Registry.Enum = class extends BaseField {
+  constructor(key) {
+    super(key)
+    // FIXME make it dynamic from class name
+    this.TYPE = 'Enum'
+    this.LABEL = translate('List of values')
+  }
+
+  cast(value) {
+    return String(value || '')
+  }
+
+  parse(value) {
+    return this.cast(value)
+      .split(',')
+      .map((s) => s.trim())
+  }
+
+  values(features) {
+    return features
+      .reduce(
+        (acc, feature) => acc.concat(this.parse(feature.properties[this.key])),
+        []
+      )
+      .filter((val, idx, arr) => arr.indexOf(val) === idx)
+  }
+
+  equal(expected, other) {
+    return Boolean(new Set(other).intersection(new Set(expected)).size)
+  }
+
+  not_equal(expected, other) {
+    return !new Set(other).intersection(new Set(expected)).size
+  }
+
+  gt(expected, other) {
+    return false
+  }
+
+  lt(expected, other) {
+    return false
+  }
+}
+
+const FIELD_TYPES = Object.entries(Registry).map(([name, klass]) => [
+  name,
+  new klass().LABEL,
+])
+
 export class Fields extends Map {
   constructor(parent, dialog) {
     super()
@@ -38,7 +222,7 @@ export class Fields extends Map {
     this.parent.properties.fields = this.all().map((field) => {
       // We don't want to keep the reference, otherwise editing
       // it will also change the old value
-      return { ...field }
+      return { ...field.dumps() }
     })
   }
 
@@ -60,10 +244,8 @@ export class Fields extends Map {
       console.error('Invalid field', field)
       return
     }
-    field.type ??= 'String'
-    // Copy object, so not to affect original
-    // when edited.
-    this.set(field.key, { ...field })
+    const klass = Registry[field.type] || Registry.String
+    this.set(field.key, new klass(field.key))
     this.push()
   }
 
@@ -103,7 +285,7 @@ export class Fields extends Map {
       const [row, { edit, del, addFilter, editFilter }] = Utils.loadTemplateWithRefs(
         `<li class="orderable with-toolbox" data-key="${field.key}">
           <span>
-            <i class="icon icon-16 icon-field-${field.type}" title="${field.type}"></i>
+            <i class="icon icon-16 icon-field-${field.TYPE}" title="${field.LABEL}"></i>
             ${field.key}
           </span>
           <span>
@@ -161,16 +343,8 @@ export class Fields extends Map {
 
   async editField(name) {
     if (!name && this.parent.isRemoteLayer?.()) return
-    const FIELD_TYPES = [
-      ['String', translate('Short text')],
-      ['Text', translate('Text')],
-      ['Number', translate('Number')],
-      ['Date', translate('Date')],
-      ['Datetime', translate('Date and time')],
-      ['Enum', translate('List of values')],
-      ['Boolean', translate('Yes / No')],
-    ]
-    const field = this.get(name) || {}
+    const field = this.get(name)
+    const data = field?.dumps() || {}
     const metadatas = [
       [
         'key',
@@ -189,7 +363,7 @@ export class Fields extends Map {
         },
       ],
     ]
-    const form = new Form(field, metadatas)
+    const form = new Form(data, metadatas)
 
     const [container, { body, addFilter }] = Utils.loadTemplateWithRefs(`
       <div>
@@ -202,32 +376,34 @@ export class Fields extends Map {
     if (this.parent.filters) {
       addFilter.addEventListener('click', () => {
         this.dialog.accept().then(() => {
-          this.parent.filters.createFilterForm(field.key)
+          this.parent.filters.createFilterForm(data.key)
         })
       })
       addFilter.hidden = false
     }
 
     return this.dialog.open({ template: container }).then(() => {
-      if (!this.validateName(field.key, field.key !== name)) {
+      if (!this.validateName(data.key, data.key !== name)) {
         this.pull()
         return
       }
       this.parent.sync.startBatch()
       const oldFields = Utils.CopyJSON(this.parent.properties.fields)
       if (!name) {
-        this.add(field)
-      } else if (name !== field.key) {
+        this.add(data)
+      } else if (name !== data.key || field.TYPE !== data.type) {
         this.clear()
         // Keep order on rename
         for (const old of oldFields) {
           if (old.key === name) {
-            this.add(field)
+            this.add(data)
           } else {
             this.add(old)
           }
         }
-        this.parent.renameField(name, field.key)
+        if (name !== data.key) {
+          this.parent.renameField(name, data.key)
+        }
       } else {
         this.push()
       }

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,
@@ -69,6 +70,7 @@ export class DataLayer {
     if (this.properties.rank === undefined) {
       this.properties.rank = this._umap.datalayers.count()
     }
+    this._umap.datalayers.add(this)
 
     if (!Utils.isObject(this.properties.remoteData)) {
       this.properties.remoteData = {}
@@ -82,19 +84,17 @@ export class DataLayer {
       this.properties.toZoom = this.properties.remoteData.to
       delete this.properties.remoteData.to
     }
-    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)
+    this._umap.onDataLayersChanged()
+
     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 +146,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 +224,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) {
@@ -356,10 +351,15 @@ export class DataLayer {
 
   async getUrl(url, initialUrl) {
     const response = await this._umap.request.get(url)
-    return new Promise((resolve) => {
+    return new Promise(async (resolve) => {
       if (response?.ok) {
         this._umap.modifiedAt = response.headers.get('last-modified')
-        return resolve(response.text())
+        const id = Math.random()
+        this._umap.loader.start(id)
+        const raw = await response.text()
+        const promise = resolve(raw)
+        this._umap.loader.stop(id)
+        return promise
       }
       Alert.error(
         translate('Cannot load remote data for layer "{layer}" with url "{url}"', {
@@ -412,11 +412,6 @@ export class DataLayer {
     this.resetLayer()
   }
 
-  connectToMap() {
-    this._umap.datalayers.add(this)
-    this._umap.onDataLayersChanged()
-  }
-
   _dataUrl() {
     let url = this._umap.urls.get('datalayer_view', {
       pk: this.id,
@@ -451,6 +446,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,15 +526,15 @@ 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) {
+    const id = Math.random()
+    this._umap.loader.start(id)
     let data = []
     this._batch = true
     try {
@@ -548,6 +547,7 @@ export class DataLayer {
     }
     this._batch = false
     this.dataChanged()
+    this._umap.loader.stop(id)
     return data
   }
 
@@ -777,7 +777,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 +827,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 +852,7 @@ export class DataLayer {
         this.reindex()
       }
     })
-    const advancedFieldset = DomUtil.createFieldset(
+    const advancedFieldset = DOMUtils.createFieldset(
       container,
       translate('Advanced properties')
     )
@@ -867,7 +871,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 +889,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 +939,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 +993,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 +1010,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 +1067,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 +1124,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
@@ -1290,7 +1290,7 @@ export class DataLayer {
 
       this.setReferenceVersion({ response, sync: true })
 
-      this.connectToMap()
+      this._umap.onDataLayersChanged()
       this.redraw() // Needed for reordering features
       return true
     }
@@ -1345,7 +1345,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 +1367,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 +1401,7 @@ export class DataLayer {
   propagateDelete() {
     const els = this.getHidableElements()
     for (const el of els) {
-      DomUtil.remove(el)
+      el.remove()
     }
   }
 
@@ -1425,15 +1414,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')
     }
   }
 }