umap-project 2.8.2__py3-none-any.whl → 2.9.0b0__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,
@@ -250,6 +249,7 @@ export class DataLayer extends ServerStored {
   }
 
   fromGeoJSON(geojson, sync = true) {
+    if (!geojson) return []
     const features = this.addData(geojson, sync)
     this._geojson = geojson
     this.onDataLoaded()
@@ -283,7 +283,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,21 +305,43 @@ 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.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() {
@@ -444,14 +468,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,7 +515,7 @@ 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',
@@ -513,6 +537,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 +569,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 +600,12 @@ export class DataLayer extends ServerStored {
     })
   }
 
-  _delete() {
-    this.isDeleted = true
+  del(sync = true) {
     this.erase()
+    if (sync) {
+      this.isDeleted = true
+      this.sync.delete()
+    }
   }
 
   empty() {
@@ -656,7 +685,7 @@ export class DataLayer extends ServerStored {
         {
           label: translate('Data is browsable'),
           handler: 'Switch',
-          helpEntries: 'browsable',
+          helpEntries: ['browsable'],
         },
       ],
       [
@@ -668,20 +697,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 +732,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 +747,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 +774,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 +830,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',
@@ -819,7 +853,7 @@ export class DataLayer extends ServerStored {
         <i class="icon icon-24 icon-delete"></i>${translate('Delete')}
       </button>`)
     deleteButton.addEventListener('click', () => {
-      this._delete()
+      this.del()
       this._umap.editPanel.close()
     })
     advancedButtons.appendChild(deleteButton)
@@ -1147,10 +1181,14 @@ 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')
   }
@@ -1221,7 +1259,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,241 @@
+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.log(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, schema] of Object.entries(SCHEMA)) {
+      if (schema.type === Boolean) {
+        if (schema.nullable) schema.handler = 'NullableChoices'
+        else schema.handler = 'Switch'
+      } else if (schema.type === 'Text') {
+        schema.handler = 'Textarea'
+      } else if (schema.type === Number) {
+        if (schema.step) schema.handler = 'Range'
+        else schema.handler = 'IntInput'
+      } else if (schema.choices) {
+        const text_length = schema.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) {
+          schema.handler = 'MultiChoice'
+        } else {
+          schema.handler = 'Select'
+          schema.selectOptions = schema.choices
+        }
+      } else {
+        switch (key) {
+          case 'color':
+          case 'fillColor':
+            schema.handler = 'ColorPicker'
+            break
+          case 'iconUrl':
+            schema.handler = 'IconUrl'
+            break
+          case 'licence':
+            schema.handler = 'LicenceChooser'
+            break
+        }
+      }
+
+      if (customHandlers[key]) {
+        schema.handler = customHandlers[key]
+      }
+      // Input uses this key for its type attribute
+      delete schema.type
+      this.defaultProperties[key] = schema
+    }
+  }
+
+  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 = helper.get(true) === 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()
+  }
+}