umap-project 3.1.2__py3-none-any.whl → 3.2.0__py3-none-any.whl

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

@@ -21,6 +21,8 @@ import TableEditor from '../tableeditor.js'
 import * as Utils from '../utils.js'
 import { LineString, Point, Polygon } from './features.js'
 import Rules from '../rules.js'
+import Orderable from '../orderable.js'
+import { FeatureManager } from '../managers.js'
 
 export const LAYER_TYPES = [
   DefaultLayer,
@@ -40,8 +42,7 @@ export class DataLayer {
   constructor(umap, leafletMap, data = {}) {
     this._umap = umap
     this.sync = umap.syncEngine.proxy(this)
-    this._index = Array()
-    this._features = {}
+    this.features = new FeatureManager()
     this._geojson = null
     this._propertiesIndex = []
 
@@ -89,6 +90,12 @@ export class DataLayer {
     if (!this.createdOnServer) {
       if (this.showAtLoad()) this.show()
     }
+    if (!this._needsFetch && !this._umap.fields.length) {
+      this.properties.fields = [
+        { key: U.DEFAULT_LABEL_KEY, type: 'String' },
+        { key: 'description', type: 'Text' },
+      ]
+    }
 
     // Only layers that are displayed on load must be hidden/shown
     // Automatically, others will be shown manually, and thus will
@@ -140,6 +147,23 @@ export class DataLayer {
     this.properties.rank = value
   }
 
+  get fields() {
+    if (!this.properties.fields) this.properties.fields = []
+    return this.properties.fields
+  }
+
+  set fields(fields) {
+    this.properties.fields = fields
+  }
+
+  get fieldKeys() {
+    return this.fields.map((field) => field.key)
+  }
+
+  get sortKey() {
+    return this.getProperty('sortKey') || U.DEFAULT_LABEL_KEY
+  }
+
   getSyncMetadata() {
     return {
       subject: 'datalayer',
@@ -249,19 +273,14 @@ export class DataLayer {
     const Class = LAYER_MAP[this.properties.type] || DefaultLayer
     this.layer = new Class(this)
     // Rendering layer changed, so let's force reset the feature rendering too.
-    this.eachFeature((feature) => feature.makeUI())
-    this.eachFeature(this.showFeature)
+    this.features.forEach((feature) => {
+      feature.makeUI()
+      this.showFeature(feature)
+    })
     if (visible) this.show()
     this.propagateRemote()
   }
 
-  eachFeature(method, context) {
-    for (const idx of this._index) {
-      method.call(context || this, this._features[idx])
-    }
-    return this
-  }
-
   async fetchData() {
     if (!this.createdOnServer) return
     if (this._loading) return
@@ -314,12 +333,6 @@ export class DataLayer {
     }
   }
 
-  reindex() {
-    const features = Object.values(this._features)
-    this.sortFeatures(features)
-    this._index = features.map((feature) => stamp(feature))
-  }
-
   showAtZoom() {
     const from = Number.parseInt(this.properties.fromZoom, 10)
     const to = Number.parseInt(this.properties.toZoom, 10)
@@ -423,22 +436,20 @@ export class DataLayer {
   }
 
   addFeature(feature) {
-    const id = stamp(feature)
     feature.connectToDataLayer(this)
-    this._index.push(id)
-    this._features[id] = feature
-    this.indexProperties(feature)
+    this.features.add(feature)
     this._umap.featuresIndex[feature.getSlug()] = feature
+    // TODO: quid for remote data ?
+    this.inferFields(feature)
     this.showFeature(feature)
     this.dataChanged()
   }
 
   removeFeature(feature, sync) {
-    const id = stamp(feature)
     // This feature was not yet added, may be after
     // hitting Escape while drawing a new line or
     // polygon, not yet valid (not enough points)
-    if (!this._index.includes(id)) return
+    if (!this.features.has(feature.id)) return
     if (sync !== false) {
       const oldValue = feature.toGeoJSON()
       feature.sync.delete(oldValue)
@@ -446,57 +457,66 @@ export class DataLayer {
     this.hideFeature(feature)
     delete this._umap.featuresIndex[feature.getSlug()]
     feature.disconnectFromDataLayer(this)
-    this._index.splice(this._index.indexOf(id), 1)
-    delete this._features[id]
+    this.features.del(feature)
     if (this.isVisible()) this.dataChanged()
   }
 
-  indexProperties(feature) {
-    for (const i in feature.properties)
-      if (typeof feature.properties[i] !== 'object') this.indexProperty(i)
-  }
-
-  indexProperty(name) {
-    if (!name) return
-    if (name.indexOf('_') === 0) return
-    if (!this._propertiesIndex.includes(name)) {
-      this._propertiesIndex.push(name)
-      this._propertiesIndex.sort()
+  inferFields(feature) {
+    if (!this.properties.fields) this.properties.fields = []
+    const keys = this.fieldKeys
+    for (const key in feature.properties) {
+      if (typeof feature.properties[key] !== 'object') {
+        if (key.indexOf('_') === 0) continue
+        if (keys.includes(key)) continue
+        this.properties.fields.push({ key, type: 'String' })
+      }
     }
   }
 
-  checkIndexForProperty(name) {
-    for (const feature of Object.values(this._features)) {
-      if (name in feature.properties) {
-        this.indexProperty(name)
-        return
-      }
-    }
-    this.deindexProperty(name)
+  async confirmDeleteProperty(property) {
+    return this._umap.dialog
+      .confirm(
+        translate('Are you sure you want to delete this field on all the features?')
+      )
+      .then(() => {
+        this.deleteProperty(property)
+      })
   }
 
-  deindexProperty(name) {
-    const idx = this._propertiesIndex.indexOf(name)
-    if (idx !== -1) this._propertiesIndex.splice(idx, 1)
+  async askForRenameProperty(property) {
+    return this._umap.dialog
+      .prompt(translate('Please enter the new name of this field'))
+      .then(({ prompt }) => {
+        if (!prompt || !this.validateName(prompt)) return
+        this.renameProperty(property, prompt)
+      })
   }
 
   renameProperty(oldName, newName) {
     this.sync.startBatch()
-    this.eachFeature((feature) => {
+    const oldFields = Utils.CopyJSON(this.fields)
+    for (const field of this.fields) {
+      if (field.key === oldName) {
+        field.key = newName
+        break
+      }
+    }
+    this.sync.update('properties.fields', this.fields, oldFields)
+    this.features.forEach((feature) => {
       feature.renameProperty(oldName, newName)
     })
     this.sync.commitBatch()
-    this.deindexProperty(oldName)
-    this.indexProperty(newName)
   }
 
   deleteProperty(property) {
     this.sync.startBatch()
-    this.eachFeature((feature) => {
+    const oldFields = Utils.CopyJSON(this.fields)
+    this.fields = this.fields.filter((field) => field.key !== property)
+    this.sync.update('properties.fields', this.fields, oldFields)
+    this.features.forEach((feature) => {
       feature.deleteProperty(property)
     })
     this.sync.commitBatch()
-    this.deindexProperty(property)
   }
 
   addProperty() {
@@ -508,7 +528,7 @@ export class DataLayer {
       .prompt(translate('Please enter the name of the property'))
       .then(({ prompt }) => {
         if (!prompt || !this.validateName(prompt)) return
-        this.indexProperty(prompt)
+        this.properties.fields.push({ key: prompt, type: 'String' })
         resolve()
       })
     return promise
@@ -519,19 +539,15 @@ export class DataLayer {
       Alert.error(translate('Name “{name}” should not contain a dot.', { name }))
       return false
     }
-    if (this.allProperties().includes(name)) {
+    if (this.fieldKeys.includes(name)) {
       Alert.error(translate('This name already exists: “{name}”', { name }))
       return false
     }
     return true
   }
 
-  allProperties() {
-    return this._propertiesIndex
-  }
-
   sortedValues(property) {
-    return Object.values(this._features)
+    return Array.from(this.features.values())
       .map((feature) => feature.properties[property])
       .filter((val, idx, arr) => arr.indexOf(val) === idx)
       .sort(Utils.naturalSort)
@@ -549,11 +565,6 @@ export class DataLayer {
     }
   }
 
-  sortFeatures(collection) {
-    const sortKeys = this.getProperty('sortKey') || U.DEFAULT_LABEL_KEY
-    return Utils.sortFeatures(collection, sortKeys, U.lang)
-  }
-
   makeFeatures(geojson = {}, sync = true) {
     if (geojson.type === 'Feature' || geojson.coordinates) {
       geojson = [geojson]
@@ -563,7 +574,7 @@ export class DataLayer {
       : geojson.features || geojson.geometries
     if (!collection) return
     const features = []
-    this.sortFeatures(collection)
+    Utils.sortFeatures(collection, this.sortKey, U.lang)
     for (const featureJson of collection) {
       if (featureJson.geometry?.type === 'GeometryCollection') {
         for (const geometry of featureJson.geometry.geometries) {
@@ -592,6 +603,14 @@ export class DataLayer {
         // FIXME: deal with MultiPoint
         feature = new Point(this._umap, this, geojson, id)
         break
+      case 'MultiPoint':
+        if (geometry.coordinates?.length === 1) {
+          geojson.geometry.coordinates = geojson.geometry.coordinates[0]
+          feature = new Point(this._umap, this, geojson, id)
+        } else if (this._umap.editEnabled) {
+          Alert.error(translate('Cannot process MultiPoint'))
+        }
+        break
       case 'MultiLineString':
       case 'LineString':
         feature = new LineString(this._umap, this, geojson, id)
@@ -602,11 +621,13 @@ export class DataLayer {
         break
       default:
         console.debug(geojson)
-        Alert.error(
-          translate('Skipping unknown geometry.type: {type}', {
-            type: geometry.type || 'undefined',
-          })
-        )
+        if (this._umap.editEnabled) {
+          Alert.error(
+            translate('Skipping unknown geometry.type: {type}', {
+              type: geometry.type || 'undefined',
+            })
+          )
+        }
     }
     if (feature && !feature.isEmpty()) {
       this.addFeature(feature)
@@ -713,9 +734,7 @@ export class DataLayer {
   }
 
   clear(sync = true) {
-    for (const feature of Object.values(this._features)) {
-      feature.del(sync)
-    }
+    this.features.forEach((feature) => feature.del(sync))
     this.dataChanged()
   }
 
@@ -731,14 +750,17 @@ export class DataLayer {
 
   redraw() {
     if (!this.isVisible()) return
-    this.eachFeature((feature) => feature.redraw())
+    this.features.forEach((feature) => feature.redraw())
   }
 
-  edit() {
-    if (!this._umap.editEnabled) {
-      return
+  reindex() {
+    this.features.sort(this.sortKey)
+    if (this.isBrowsable()) {
+      this.resetLayer(true)
     }
-    const container = DomUtil.create('div', 'umap-layer-properties-container')
+  }
+
+  _editMetadata(container) {
     const metadataFields = [
       'properties.name',
       'properties.description',
@@ -768,29 +790,35 @@ export class DataLayer {
       ],
     ]
     DomUtil.createTitle(container, translate('Layer properties'), 'icon-layers')
-    let builder = new MutatingForm(this, metadataFields)
+    const builder = new MutatingForm(this, metadataFields)
     builder.on('set', ({ detail }) => {
       this._umap.onDataLayersChanged()
       if (detail.helper.field === 'properties.type') {
-        this.edit()
+        this.edit().then((panel) => panel.scrollTo('details#layer-properties'))
       }
     })
     container.appendChild(builder.build())
+  }
 
+  _editLayerProperties(container) {
     const layerFields = this.layer.getEditableProperties()
 
     if (layerFields.length) {
-      builder = new MutatingForm(this, layerFields, {
-        id: 'datalayer-layer-properties',
-      })
-      const layerProperties = DomUtil.createFieldset(
-        container,
-        `${this.layer.getName()}: ${translate('settings')}`
-      )
-      layerProperties.appendChild(builder.build())
+      const builder = new MutatingForm(this, layerFields)
+      const template = `
+        <details id="layer-properties">
+          <summary>${this.layer.getName()}: ${translate('settings')}</summary>
+          <fieldset data-ref=fieldset></fieldset>
+        </details>
+      `
+      const [details, { fieldset }] = Utils.loadTemplateWithRefs(template)
+      container.appendChild(details)
+      fieldset.appendChild(builder.build())
     }
+  }
 
-    const shapeFields = [
+  _editShapeProperties(container) {
+    const fields = [
       'properties.color',
       'properties.iconClass',
       'properties.iconUrl',
@@ -803,7 +831,7 @@ export class DataLayer {
       'properties.fillOpacity',
     ]
 
-    builder = new MutatingForm(this, shapeFields, {
+    const builder = new MutatingForm(this, fields, {
       id: 'datalayer-advanced-properties',
     })
     const shapeFieldset = DomUtil.createFieldset(
@@ -811,8 +839,10 @@ export class DataLayer {
       translate('Shape properties')
     )
     shapeFieldset.appendChild(builder.build())
+  }
 
-    const advancedFields = [
+  _editAdvancedProperties(container) {
+    const fields = [
       'properties.smoothFactor',
       'properties.dashArray',
       'properties.zoomTo',
@@ -821,7 +851,7 @@ export class DataLayer {
       'properties.sortKey',
     ]
 
-    builder = new MutatingForm(this, advancedFields, {
+    const builder = new MutatingForm(this, fields, {
       id: 'datalayer-advanced-properties',
     })
     builder.on('set', ({ detail }) => {
@@ -834,8 +864,10 @@ export class DataLayer {
       translate('Advanced properties')
     )
     advancedFieldset.appendChild(builder.build())
+  }
 
-    const popupFields = [
+  _editInteractionProperties(container) {
+    const fields = [
       'properties.popupShape',
       'properties.popupTemplate',
       'properties.popupContentTemplate',
@@ -845,14 +877,16 @@ export class DataLayer {
       'properties.outlinkTarget',
       'properties.interactive',
     ]
-    builder = new MutatingForm(this, popupFields)
+    const builder = new MutatingForm(this, fields)
     const popupFieldset = DomUtil.createFieldset(
       container,
       translate('Interaction options')
     )
     popupFieldset.appendChild(builder.build())
+  }
 
-    const textPathFields = [
+  _editTextPathProperties(container) {
+    const fields = [
       'properties.textPath',
       'properties.textPathColor',
       'properties.textPathRepeat',
@@ -861,17 +895,77 @@ export class DataLayer {
       'properties.textPathOffset',
       'properties.textPathPosition',
     ]
-    builder = new MutatingForm(this, textPathFields)
+    const builder = new MutatingForm(this, fields)
     const fieldset = DomUtil.createFieldset(container, translate('Line decoration'))
     fieldset.appendChild(builder.build())
+  }
 
+  _editFields(container) {
+    const template = `
+      <details id="fields">
+        <summary>${translate('Manage Fields')}</summary>
+        <fieldset>
+          <ul data-ref=ul></ul>
+          <button type="button" data-ref=add><i class="icon icon-16 icon-add"></i>${translate('Add a new field')}</button>
+        </fieldset>
+      </details>
+    `
+    const [fieldset, { ul, add }] = Utils.loadTemplateWithRefs(template)
+    add.addEventListener('click', () => {
+      this.addProperty().then(() => {
+        this.edit().then((panel) => {
+          panel.scrollTo('details#fields')
+        })
+      })
+    })
+    container.appendChild(fieldset)
+    for (const field of this.fields) {
+      const [row, { rename, del }] = Utils.loadTemplateWithRefs(
+        `<li class="orderable" data-key="${field.key}">
+          <button class="icon icon-16 icon-edit" title="${translate('Rename this field')}" data-ref=rename></button>
+          <button class="icon icon-16 icon-delete" title="${translate('Delete this field')}" data-ref=del></button>
+          <i class="icon icon-16 icon-drag" title="${translate('Drag to reorder')}"></i>
+          ${field.key}
+        </li>`
+      )
+      ul.appendChild(row)
+      rename.addEventListener('click', () => {
+        this.askForRenameProperty(field.key).then(() => {
+          this.edit().then((panel) => {
+            panel.scrollTo('details#fields')
+          })
+        })
+      })
+      del.addEventListener('click', () => {
+        this.confirmDeleteProperty(field.key).then(() => {
+          this.edit().then((panel) => {
+            panel.scrollTo('details#fields')
+          })
+        })
+      })
+    }
+    const onReorder = (src, dst, initialIndex, finalIndex) => {
+      const orderedKeys = Array.from(ul.querySelectorAll('li')).map(
+        (el) => el.dataset.key
+      )
+      const oldFields = Utils.CopyJSON(this.properties.fields)
+      this.properties.fields.sort(
+        (fieldA, fieldB) =>
+          orderedKeys.indexOf(fieldA.key) > orderedKeys.indexOf(fieldB.key)
+      )
+      this.sync.update('properties.fields', this.properties.fields, oldFields)
+    }
+    const orderable = new Orderable(ul, onReorder)
+  }
+
+  _editRemoteDataProperties(container) {
     // XXX I'm not sure **why** this is needed (as it's set during `this.initialize`)
     // but apparently it's needed.
     if (!Utils.isObject(this.properties.remoteData)) {
       this.properties.remoteData = {}
     }
 
-    const remoteDataFields = [
+    const fields = [
       [
         'properties.remoteData.url',
         { handler: 'Url', label: translate('Url'), helpEntries: ['formatURL'] },
@@ -899,7 +993,7 @@ export class DataLayer {
       ],
     ]
     if (this._umap.properties.urls.ajax_proxy) {
-      remoteDataFields.push([
+      fields.push([
         'properties.remoteData.proxy',
         {
           handler: 'Switch',
@@ -907,14 +1001,14 @@ export class DataLayer {
           helpEntries: ['proxyRemoteData'],
         },
       ])
-      remoteDataFields.push('properties.remoteData.ttl')
+      fields.push('properties.remoteData.ttl')
     }
 
     const remoteDataContainer = DomUtil.createFieldset(
       container,
       translate('Remote data')
     )
-    builder = new MutatingForm(this, remoteDataFields)
+    const builder = new MutatingForm(this, fields)
     remoteDataContainer.appendChild(builder.build())
     DomUtil.createButton(
       'button umap-verify',
@@ -923,12 +1017,9 @@ export class DataLayer {
       () => this.fetchRemoteData(true),
       this
     )
-    this.rules.edit(container)
-
-    if (this._umap.properties.urls.datalayer_versions) {
-      this.buildVersionsFieldset(container)
-    }
+  }
 
+  _buildAdvancedActions(container) {
     const advancedActions = DomUtil.createFieldset(
       container,
       translate('Advanced actions')
@@ -963,6 +1054,31 @@ export class DataLayer {
     }
     clone.addEventListener('click', () => this.clone().edit())
     if (this.createdOnServer) download.hidden = false
+  }
+
+  edit() {
+    if (!this._umap.editEnabled) {
+      return
+    }
+    const container = DomUtil.create('div', 'umap-layer-properties-container')
+    this._editMetadata(container)
+    this._editLayerProperties(container)
+    this._editShapeProperties(container)
+    this._editAdvancedProperties(container)
+    this._editInteractionProperties(container)
+    this._editTextPathProperties(container)
+    this._editRemoteDataProperties(container)
+    if (!this.isRemoteLayer()) {
+      this._editFields(container)
+    }
+    this.rules.edit(container)
+
+    if (this._umap.properties.urls.datalayer_versions) {
+      this.buildVersionsFieldset(container)
+    }
+
+    this._buildAdvancedActions(container)
+
     const backButton = DomUtil.createButtonIcon(
       undefined,
       'icon-back',
@@ -973,7 +1089,7 @@ export class DataLayer {
     DomEvent.disableClickPropagation(backButton)
     DomEvent.on(backButton, 'click', this._umap.editDatalayers, this._umap)
 
-    this._umap.editPanel.open({
+    return this._umap.editPanel.open({
       content: container,
       highlight: 'layers',
       actions: [backButton],
@@ -1062,7 +1178,7 @@ export class DataLayer {
 
   featuresToGeoJSON() {
     const features = []
-    this.eachFeature((feature) => features.push(feature.toGeoJSON()))
+    this.features.forEach((feature) => features.push(feature.toGeoJSON()))
     return features
   }
 
@@ -1123,46 +1239,23 @@ export class DataLayer {
   }
 
   count() {
-    return this._index.length
+    return this.features.count()
   }
 
   hasData() {
-    return !!this._index.length
+    return !!this.count()
   }
 
   isVisible() {
     return Boolean(this.layer && this._leafletMap.hasLayer(this.layer))
   }
 
-  getFeatureByIndex(index) {
-    if (index === -1) index = this._index.length - 1
-    const id = this._index[index]
-    return this._features[id]
-  }
-
-  // TODO Add an index
-  // For now, iterate on all the features.
-  getFeatureById(id) {
-    return Object.values(this._features).find((feature) => feature.id === id)
-  }
-
   getNextFeature(feature) {
-    const id = this._index.indexOf(stamp(feature))
-    const nextId = this._index[id + 1]
-    return nextId
-      ? this._features[nextId]
-      : this.getNextBrowsable().getFeatureByIndex(0)
+    return this.features.next(feature) || this.getNextBrowsable().features.first()
   }
 
   getPreviousFeature(feature) {
-    if (this._index <= 1) {
-      return null
-    }
-    const id = this._index.indexOf(stamp(feature))
-    const previousId = this._index[id - 1]
-    return previousId
-      ? this._features[previousId]
-      : this.getPreviousBrowsable().getFeatureByIndex(-1)
+    return this.features.prev(feature) || this.getPreviousBrowsable().features.last()
   }
 
   getPreviousBrowsable() {
@@ -1322,8 +1415,27 @@ export class DataLayer {
     )) {
       container.innerHTML = ''
       if (this.layer.renderLegend) return this.layer.renderLegend(container)
-      const color = DomUtil.create('span', 'datalayer-color', container)
-      color.style.backgroundColor = this.getColor()
+      const keys = new Set(this.fieldKeys)
+      const rules = new Map()
+      for (const rule of this.rules) {
+        rules.set(rule.condition, rule)
+      }
+      for (const rule of this._umap.rules) {
+        if (!rules.has(rule.condition) && keys.has(rule.key)) {
+          rules.set(rule.condition, rule)
+        }
+      }
+      if (rules.size) {
+        const ul = Utils.loadTemplate('<ul class="rules-caption"></ul>')
+        container.appendChild(ul)
+        for (const [_, rule] of rules) {
+          rule.renderLegend(ul)
+        }
+      } else {
+        const color = Utils.loadTemplate('<span class="datalayer-color"></span>')
+        color.style.backgroundColor = this.getColor()
+        container.appendChild(color)
+      }
     }
   }