umap-project 2.8.2__py3-none-any.whl → 2.9.0__py3-none-any.whl

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

@@ -1,5 +1,3 @@
-// Uses U.FormBuilder not available as ESM
-
 // FIXME: this module should not depend on Leaflet
 import {
   DomUtil,
@@ -22,6 +20,7 @@ import { Point, LineString, Polygon } from './features.js'
 import TableEditor from '../tableeditor.js'
 import { ServerStored } from '../saving.js'
 import * as Schema from '../schema.js'
+import { MutatingForm } from '../form/builder.js'
 
 export const LAYER_TYPES = [
   DefaultLayer,
@@ -46,8 +45,6 @@ export class DataLayer extends ServerStored {
     this._features = {}
     this._geojson = null
     this._propertiesIndex = []
-    this._loaded = false // Are layer metadata loaded
-    this._dataloaded = false // Are layer data loaded
 
     this._leafletMap = leafletMap
     this.parentPane = this._leafletMap.getPane('overlayPane')
@@ -86,6 +83,7 @@ export class DataLayer extends ServerStored {
     this.connectToMap()
     this.permissions = new DataLayerPermissions(this._umap, this)
 
+    this._needsFetch = this.createdOnServer
     if (!this.createdOnServer) {
       if (this.showAtLoad()) this.show()
     }
@@ -244,21 +242,22 @@ export class DataLayer extends ServerStored {
   }
 
   dataChanged() {
-    if (!this.hasDataLoaded()) return
+    if (!this.isLoaded()) return
     this._umap.onDataLayersChanged()
     this.layer.dataChanged()
   }
 
   fromGeoJSON(geojson, sync = true) {
+    if (!geojson) return []
     const features = this.addData(geojson, sync)
     this._geojson = geojson
+    this._needsFetch = false
     this.onDataLoaded()
     this.dataChanged()
     return features
   }
 
   onDataLoaded() {
-    this._dataloaded = true
     this.renderLegend()
   }
 
@@ -268,7 +267,6 @@ export class DataLayer extends ServerStored {
     if (geojson._umap_options) this.setOptions(geojson._umap_options)
     if (this.isRemoteLayer()) await this.fetchRemoteData()
     else this.fromGeoJSON(geojson, false)
-    this._loaded = true
   }
 
   clear() {
@@ -283,7 +281,9 @@ export class DataLayer extends ServerStored {
   }
 
   backupData() {
-    this._geojson_bk = Utils.CopyJSON(this._geojson)
+    if (this._geojson) {
+      this._geojson_bk = Utils.CopyJSON(this._geojson)
+    }
   }
 
   reindex() {
@@ -303,29 +303,47 @@ export class DataLayer extends ServerStored {
     return this.isRemoteLayer() && Boolean(this.options.remoteData?.dynamic)
   }
 
+  async getUrl(url, initialUrl) {
+    const response = await this._umap.request.get(url)
+    return new Promise((resolve) => {
+      if (response?.ok) return resolve(response.text())
+      Alert.error(
+        translate('Cannot load remote data for layer "{layer}" with url "{url}"', {
+          layer: this.getName(),
+          url: initialUrl || url,
+        })
+      )
+    })
+  }
+
   async fetchRemoteData(force) {
     if (!this.isRemoteLayer()) return
-    if (!this.hasDynamicData() && this.hasDataLoaded() && !force) return
+    if (!this.hasDynamicData() && this.isLoaded() && !force) return
     if (!this.isVisible()) return
-    let url = this._umap.renderUrl(this.options.remoteData.url)
+    // Keep non proxied url for later use in Alert.
+    const remoteUrl = this._umap.renderUrl(this.options.remoteData.url)
+    let url = remoteUrl
     if (this.options.remoteData.proxy) {
       url = this._umap.proxyUrl(url, this.options.remoteData.ttl)
     }
-    const response = await this._umap.request.get(url)
-    if (response?.ok) {
+    return await this.getUrl(url, remoteUrl).then((raw) => {
       this.clear()
       return this._umap.formatter
-        .parse(await response.text(), this.options.remoteData.format)
+        .parse(raw, this.options.remoteData.format)
         .then((geojson) => this.fromGeoJSON(geojson))
-    }
+        .catch((error) => {
+          Alert.error(
+            translate('Cannot parse remote data for layer "{layer}" with url "{url}"', {
+              layer: this.getName(),
+              url: remoteUrl,
+            })
+          )
+        })
+    })
   }
 
   isLoaded() {
-    return !this.createdOnServer || this._loaded
-  }
-
-  hasDataLoaded() {
-    return this._dataloaded
+    return !this._needsFetch
   }
 
   backupOptions() {
@@ -444,14 +462,14 @@ export class DataLayer extends ServerStored {
       // otherwise the layer becomes uneditable.
       return this.makeFeatures(geojson, sync)
     } catch (err) {
-      console.log('Error with DataLayer', this.id)
+      console.debug('Error with DataLayer', this.id)
       console.error(err)
       return []
     }
   }
 
   sortFeatures(collection) {
-    const sortKeys = this._umap.getProperty('sortKey') || U.DEFAULT_LABEL_KEY
+    const sortKeys = this.getOption('sortKey') || U.DEFAULT_LABEL_KEY
     return Utils.sortFeatures(collection, sortKeys, U.lang)
   }
 
@@ -491,14 +509,14 @@ export class DataLayer extends ServerStored {
         feature = new Polygon(this._umap, this, geojson, id)
         break
       default:
-        console.log(geojson)
+        console.debug(geojson)
         Alert.error(
           translate('Skipping unknown geometry.type: {type}', {
             type: geometry.type || 'undefined',
           })
         )
     }
-    if (feature) {
+    if (feature && !feature.isEmpty()) {
       this.addFeature(feature)
       if (sync) feature.onCommit()
       return feature
@@ -513,6 +531,9 @@ export class DataLayer extends ServerStored {
         if (data?.length) this.isDirty = true
         return data
       })
+      .catch((error) => {
+        Alert.error(translate('Import failed: invalid data'))
+      })
   }
 
   readFile(f) {
@@ -542,10 +563,9 @@ export class DataLayer extends ServerStored {
 
   async importFromUrl(uri, type) {
     uri = this._umap.renderUrl(uri)
-    const response = await this._umap.request.get(uri)
-    if (response?.ok) {
-      return this.importRaw(await response.text(), type)
-    }
+    return await this.getUrl(uri).then((raw) => {
+      return this.importRaw(raw, type)
+    })
   }
 
   getColor() {
@@ -574,9 +594,12 @@ export class DataLayer extends ServerStored {
     })
   }
 
-  _delete() {
-    this.isDeleted = true
+  del(sync = true) {
     this.erase()
+    if (sync) {
+      this.isDeleted = true
+      this.sync.delete()
+    }
   }
 
   empty() {
@@ -604,8 +627,6 @@ export class DataLayer extends ServerStored {
     this.propagateDelete()
     this._leaflet_events_bk = this._leaflet_events
     this.clear()
-    delete this._loaded
-    delete this._dataloaded
   }
 
   reset() {
@@ -623,7 +644,6 @@ export class DataLayer extends ServerStored {
     this.hide()
     if (this.isRemoteLayer()) this.fetchRemoteData()
     else if (this._geojson_bk) this.fromGeoJSON(this._geojson_bk)
-    this._loaded = true
     this.show()
     this.isDirty = false
   }
@@ -656,7 +676,7 @@ export class DataLayer extends ServerStored {
         {
           label: translate('Data is browsable'),
           handler: 'Switch',
-          helpEntries: 'browsable',
+          helpEntries: ['browsable'],
         },
       ],
       [
@@ -668,20 +688,19 @@ export class DataLayer extends ServerStored {
       ],
     ]
     DomUtil.createTitle(container, translate('Layer properties'), 'icon-layers')
-    let builder = new U.FormBuilder(this, metadataFields, {
-      callback(e) {
-        this._umap.onDataLayersChanged()
-        if (e.helper.field === 'options.type') {
-          this.edit()
-        }
-      },
+    let builder = new MutatingForm(this, metadataFields)
+    builder.on('set', ({ detail }) => {
+      this._umap.onDataLayersChanged()
+      if (detail.helper.field === 'options.type') {
+        this.edit()
+      }
     })
     container.appendChild(builder.build())
 
     const layerOptions = this.layer.getEditableOptions()
 
     if (layerOptions.length) {
-      builder = new U.FormBuilder(this, layerOptions, {
+      builder = new MutatingForm(this, layerOptions, {
         id: 'datalayer-layer-properties',
       })
       const layerProperties = DomUtil.createFieldset(
@@ -704,7 +723,7 @@ export class DataLayer extends ServerStored {
       'options.fillOpacity',
     ]
 
-    builder = new U.FormBuilder(this, shapeOptions, {
+    builder = new MutatingForm(this, shapeOptions, {
       id: 'datalayer-advanced-properties',
     })
     const shapeProperties = DomUtil.createFieldset(
@@ -719,11 +738,17 @@ export class DataLayer extends ServerStored {
       'options.zoomTo',
       'options.fromZoom',
       'options.toZoom',
+      'options.sortKey',
     ]
 
-    builder = new U.FormBuilder(this, optionsFields, {
+    builder = new MutatingForm(this, optionsFields, {
       id: 'datalayer-advanced-properties',
     })
+    builder.on('set', ({ detail }) => {
+      if (detail.helper.field === 'options.sortKey') {
+        this.reindex()
+      }
+    })
     const advancedProperties = DomUtil.createFieldset(
       container,
       translate('Advanced properties')
@@ -740,7 +765,7 @@ export class DataLayer extends ServerStored {
       'options.outlinkTarget',
       'options.interactive',
     ]
-    builder = new U.FormBuilder(this, popupFields)
+    builder = new MutatingForm(this, popupFields)
     const popupFieldset = DomUtil.createFieldset(
       container,
       translate('Interaction options')
@@ -796,7 +821,7 @@ export class DataLayer extends ServerStored {
       container,
       translate('Remote data')
     )
-    builder = new U.FormBuilder(this, remoteDataFields)
+    builder = new MutatingForm(this, remoteDataFields)
     remoteDataContainer.appendChild(builder.build())
     DomUtil.createButton(
       'button umap-verify',
@@ -813,44 +838,36 @@ export class DataLayer extends ServerStored {
       container,
       translate('Advanced actions')
     )
-    const advancedButtons = DomUtil.create('div', 'button-bar half', advancedActions)
-    const deleteButton = Utils.loadTemplate(`
-      <button class="button" type="button">
+    const filename = `${Utils.slugify(this.options.name)}.geojson`
+    const tpl = `
+    <div class="button-bar half">
+      <button class="button" type="button" data-ref=del>
         <i class="icon icon-24 icon-delete"></i>${translate('Delete')}
-      </button>`)
-    deleteButton.addEventListener('click', () => {
-      this._delete()
+      </button>
+      <button class="button" type="button" data-ref=empty hidden>
+        <i class="icon icon-24 icon-empty"></i>${translate('Empty')}
+      </button>
+      <button class="button" type="button" data-ref=clone>
+        <i class="icon icon-24 icon-clone"></i>${translate('Clone')}
+      </button>
+      <a class="button" href="${this._dataUrl()}" download="${filename}" data-ref=download hidden>
+        <i class="icon icon-24 icon-download"></i>${translate('Download')}
+      </a>
+    </div>
+    `
+    const [bar, { del, empty, clone, download }] = Utils.loadTemplateWithRefs(tpl)
+    advancedActions.appendChild(bar)
+    del.addEventListener('click', () => {
+      this.del()
       this._umap.editPanel.close()
     })
-    advancedButtons.appendChild(deleteButton)
 
     if (!this.isRemoteLayer()) {
-      const emptyLink = DomUtil.createButton(
-        'button umap-empty',
-        advancedButtons,
-        translate('Empty'),
-        this.empty,
-        this
-      )
-    }
-    const cloneLink = DomUtil.createButton(
-      'button umap-clone',
-      advancedButtons,
-      translate('Clone'),
-      function () {
-        const datalayer = this.clone()
-        datalayer.edit()
-      },
-      this
-    )
-    if (this.createdOnServer) {
-      const filename = `${Utils.slugify(this.options.name)}.geojson`
-      const download = Utils.loadTemplate(`
-        <a class="button" href="${this._dataUrl()}" download="${filename}">
-          <i class="icon icon-24 icon-download"></i>${translate('Download')}
-        </a>`)
-      advancedButtons.appendChild(download)
+      empty.hidden = false
+      empty.addEventListener('click', () => this.empty())
     }
+    clone.addEventListener('click', () => this.clone().edit())
+    if (this.createdOnServer) download.hidden = false
     const backButton = DomUtil.createButtonIcon(
       undefined,
       'icon-back',
@@ -863,6 +880,7 @@ export class DataLayer extends ServerStored {
 
     this._umap.editPanel.open({
       content: container,
+      highlight: 'layers',
       actions: [backButton],
     })
   }
@@ -1073,9 +1091,7 @@ export class DataLayer extends ServerStored {
 
   async save() {
     if (this.isDeleted) return await this.saveDelete()
-    if (!this.isLoaded()) {
-      return
-    }
+    if (!this.isLoaded()) return
     const geojson = this.umapGeoJSON()
     const formData = new FormData()
     formData.append('name', this.options.name)
@@ -1137,7 +1153,6 @@ export class DataLayer extends ServerStored {
       this.backupOptions()
       this.backupData()
       this.connectToMap()
-      this._loaded = true
       this.redraw() // Needed for reordering features
       return true
     }
@@ -1147,14 +1162,24 @@ export class DataLayer extends ServerStored {
     if (this.createdOnServer) {
       await this._umap.server.post(this.getDeleteUrl())
     }
-    delete this._umap.datalayers[stamp(this)]
+    this.commitDelete()
     return true
   }
 
+  commitDelete() {
+    delete this._umap.datalayers[stamp(this)]
+  }
+
   getName() {
     return this.options.name || translate('Untitled layer')
   }
 
+  getPermalink() {
+    return `${Utils.getBaseUrl()}?${Utils.buildQueryString({ datalayers: this.id })}${
+      window.location.hash
+    }`
+  }
+
   tableEdit() {
     if (!this.isVisible()) return
     const editor = new TableEditor(this._umap, this, this._leafletMap)
@@ -1221,7 +1246,7 @@ export class DataLayer extends ServerStored {
           this._umap.dialog
             .confirm(translate('Are you sure you want to delete this layer?'))
             .then(() => {
-              this._delete()
+              this.del()
             })
         },
         this

umap/static/umap/js/modules/form/builder.js

@@ -0,0 +1,242 @@
+import getClass from './fields.js'
+import * as Utils from '../utils.js'
+import { SCHEMA } from '../schema.js'
+import { translate } from '../i18n.js'
+
+export class Form extends Utils.WithEvents {
+  constructor(obj, fields, properties) {
+    super()
+    this.setProperties(properties)
+    this.defaultProperties = {}
+    this.obj = obj
+    this.form = Utils.loadTemplate('<form></form>')
+    this.setFields(fields)
+    if (this.properties.id) {
+      this.form.id = this.properties.id
+    }
+    if (this.properties.className) {
+      this.form.classList.add(...this.properties.className.split(' '))
+    }
+  }
+
+  setProperties(properties) {
+    this.properties = Object.assign({}, this.properties, properties)
+  }
+
+  setFields(fields) {
+    this.fields = fields || []
+    this.helpers = {}
+  }
+
+  build() {
+    this.form.innerHTML = ''
+    for (const definition of this.fields) {
+      this.buildField(this.makeField(definition))
+    }
+    return this.form
+  }
+
+  buildField(field) {
+    field.buildTemplate()
+    field.build()
+  }
+
+  makeField(field) {
+    // field can be either a string like "option.name" or a full definition array,
+    // like ['properties.tilelayer.tms', {handler: 'CheckBox', helpText: 'TMS format'}]
+    let properties
+    if (Array.isArray(field)) {
+      properties = field[1] || {}
+      field = field[0]
+    } else {
+      properties = this.defaultProperties[this.getName(field)] || {}
+    }
+    const class_ = getClass(properties.handler || 'Input')
+    this.helpers[field] = new class_(this, field, properties)
+    return this.helpers[field]
+  }
+
+  getter(field) {
+    const path = field.split('.')
+    let value = this.obj
+    for (const sub of path) {
+      try {
+        value = value[sub]
+      } catch {
+        console.debug(field)
+      }
+    }
+    return value
+  }
+
+  setter(field, value) {
+    const path = field.split('.')
+    let obj = this.obj
+    let what
+    for (let i = 0, l = path.length; i < l; i++) {
+      what = path[i]
+      if (what === path[l - 1]) {
+        if (typeof value === 'undefined') {
+          delete obj[what]
+        } else {
+          obj[what] = value
+        }
+      } else {
+        obj = obj[what]
+      }
+    }
+  }
+
+  restoreField(field) {
+    const initial = this.helpers[field].initial
+    this.setter(field, initial)
+  }
+
+  getName(field) {
+    const fieldEls = field.split('.')
+    return fieldEls[fieldEls.length - 1]
+  }
+
+  fetchAll() {
+    for (const helper of Object.values(this.helpers)) {
+      helper.fetch()
+    }
+  }
+
+  syncAll() {
+    for (const helper of Object.values(this.helpers)) {
+      helper.sync()
+    }
+  }
+
+  onPostSync(helper) {
+    if (this.properties.callback) {
+      this.properties.callback(helper)
+    }
+  }
+
+  finish() {}
+
+  getTemplate(helper) {
+    return `
+      <div class="formbox" data-ref=container>
+        ${helper.getTemplate()}
+        <small class="help-text" data-ref=helpText></small>
+      </div>`
+  }
+}
+
+export class MutatingForm extends Form {
+  constructor(obj, fields, properties) {
+    super(obj, fields, properties)
+    this._umap = obj._umap || properties.umap
+    this.computeDefaultProperties()
+    // this.on('finish', this.finish)
+  }
+
+  computeDefaultProperties() {
+    const customHandlers = {
+      sortKey: 'PropertyInput',
+      easing: 'Switch',
+      facetKey: 'PropertyInput',
+      slugKey: 'PropertyInput',
+      labelKey: 'PropertyInput',
+    }
+    for (const [key, defaults] of Object.entries(SCHEMA)) {
+      const properties = Object.assign({}, defaults)
+      if (properties.type === Boolean) {
+        if (properties.nullable) properties.handler = 'NullableChoices'
+        else properties.handler = 'Switch'
+      } else if (properties.type === 'Text') {
+        properties.handler = 'Textarea'
+      } else if (properties.type === Number) {
+        if (properties.step) properties.handler = 'Range'
+        else properties.handler = 'IntInput'
+      } else if (properties.choices) {
+        const text_length = properties.choices.reduce(
+          (acc, [_, label]) => acc + label.length,
+          0
+        )
+        // Try to be smart and use MultiChoice only
+        // for choices where labels are shorts…
+        if (text_length < 40) {
+          properties.handler = 'MultiChoice'
+        } else {
+          properties.handler = 'Select'
+          properties.selectOptions = properties.choices
+        }
+      } else {
+        switch (key) {
+          case 'color':
+          case 'fillColor':
+            properties.handler = 'ColorPicker'
+            break
+          case 'iconUrl':
+            properties.handler = 'IconUrl'
+            break
+          case 'licence':
+            properties.handler = 'LicenceChooser'
+            break
+        }
+      }
+
+      if (customHandlers[key]) {
+        properties.handler = customHandlers[key]
+      }
+      // Input uses this key for its type attribute
+      delete properties.type
+      this.defaultProperties[key] = properties
+    }
+  }
+
+  setter(field, value) {
+    super.setter(field, value)
+    this.obj.isDirty = true
+    if ('render' in this.obj) {
+      this.obj.render([field], this)
+    }
+    if ('sync' in this.obj) {
+      this.obj.sync.update(field, value)
+    }
+  }
+
+  getTemplate(helper) {
+    let template
+    if (helper.properties.inheritable) {
+      const extraClassName = this.getter(helper.field) === undefined ? ' undefined' : ''
+      template = `
+        <div class="umap-field-${helper.name} formbox inheritable${extraClassName}">
+          <div class="header" data-ref=header>
+            ${helper.getLabelTemplate()}
+            <span class="actions show-on-defined" data-ref=actions></span>
+            <span class="buttons" data-ref=buttons>
+              <button type="button" class="button undefine" data-ref=undefine>${translate('clear')}</button>
+              <button type="button" class="button define" data-ref=define>${translate('define')}</button>
+            </span>
+          </div>
+          <div class="show-on-defined" data-ref=container>
+            ${helper.getTemplate()}
+            <small class="help-text" data-ref=helpText></small>
+          </div>
+        </div>`
+    } else {
+      template = `
+      <div class="formbox umap-field-${helper.name}" data-ref=container>
+        ${helper.getLabelTemplate()}
+        ${helper.getTemplate()}
+        <small class="help-text" data-ref=helpText></small>
+      </div>`
+    }
+    return template
+  }
+
+  build() {
+    super.build()
+    this._umap.help.parse(this.form)
+    return this.form
+  }
+
+  finish(helper) {
+    helper.input?.blur()
+  }
+}