umap-project 3.3.2__py3-none-any.whl → 3.4.0__py3-none-any.whl

umap/static/umap/js/modules/browser.js

@@ -2,7 +2,6 @@ import { DomEvent, DomUtil, stamp } from '../../vendors/leaflet/leaflet-src.esm.
 import { Form } from './form/builder.js'
 import { EXPORT_FORMATS } from './formatter.js'
 import { translate } from './i18n.js'
-import * as Icon from './rendering/icon.js'
 import ContextMenu from './ui/contextmenu.js'
 import * as Utils from './utils.js'
 import { SCHEMA } from './schema.js'
@@ -23,28 +22,22 @@ export default class Browser {
     if (feature.isFiltered()) return
     if (this.options.inBbox && !feature.isOnScreen(this.bounds)) return
     const template = `
-      <li class="feature ${feature.getClassName()}">
-        <button class="icon icon-16 icon-zoom" title="${translate('Bring feature to center')}" data-ref=zoom></button>
-        <button class="icon icon-16 show-on-edit icon-edit" title="${translate('Edit this feature')}" data-ref=edit></button>
-        <button class="icon icon-16 show-on-edit icon-delete" title="${translate('Delete this feature')}" data-ref=remove></button>
-        <i class="icon icon-16 icon-${feature.getClassName()} feature-color" data-ref=colorBox></i>
-        <span class="feature-title" data-ref=label></span>
+      <li class="feature ${feature.getClassName()} ${feature.getUniqueClassName()} with-toolbox">
+        <span>
+          <i class="icon icon-16 icon-${feature.getClassName()} feature-color" data-ref=colorBox></i>
+          <span class="feature-title truncate" data-ref=label></span>
+        </span>
+        <span>
+          <button class="icon icon-16 icon-zoom" title="${translate('Bring feature to center')}" data-ref=zoom></button
+          ><button class="icon icon-16 show-on-edit icon-edit" title="${translate('Edit this feature')}" data-ref=edit></button
+          ><button class="icon icon-16 show-on-edit icon-delete" title="${translate('Delete this feature')}" data-ref=remove></button>
+        </span>
       </li>
     `
     const [row, { zoom, edit, remove, colorBox, label }] =
       Utils.loadTemplateWithRefs(template)
     label.textContent = label.title = feature.getDisplayName() || '—'
-    const symbol = feature._getIconUrl
-      ? Icon.formatUrl(feature._getIconUrl(), feature)
-      : null
-    const bgcolor = feature.getPreviewColor()
-    colorBox.style.backgroundColor = bgcolor
-    if (symbol && symbol !== SCHEMA.iconUrl.default) {
-      const icon = Icon.makeElement(symbol, colorBox)
-      Icon.setContrast(icon, colorBox, symbol, bgcolor)
-    } else if (DomUtil.contrastedColor(colorBox, bgcolor)) {
-      colorBox.classList.add('icon-white')
-    }
+    feature.makePreview(colorBox)
     const viewFeature = (e) => {
       feature.zoomTo({ ...e, callback: () => feature.view() })
     }
@@ -65,21 +58,23 @@ export default class Browser {
   addDataLayer(datalayer, parent) {
     const open = this.mode !== 'layers' ? ' open' : ''
     const [container, { headline, toolbox, label }] = Utils.loadTemplateWithRefs(`
-      <details class="datalayer ${datalayer.getHidableClass()}" id="${this.datalayerId(datalayer)}"${open}>
-        <summary data-ref=headline>
+      <details class="datalayer ${datalayer.cssId}" id="${this.datalayerId(datalayer)}"${open}>
+        <summary data-ref=headline class="with-toolbox">
+          <span>
+            <span class="datalayer-name truncate" data-id="${datalayer.id}" data-ref=label></span>
+            <span class="datalayer-counter"></span>
+          </span>
           <span data-ref=toolbox></span>
-          <span class="datalayer-name" data-id="${datalayer.id}" data-ref=label></span>
-          <span class="datalayer-counter"></span>
         </summary>
         <ul></ul>
       </details>
     `)
     datalayer.renderToolbox(toolbox)
     parent.appendChild(container)
-    this.updateDatalayer(datalayer)
+    this.updateFeaturesList(datalayer)
   }
 
-  updateDatalayer(datalayer) {
+  updateFeaturesList(datalayer) {
     // Compute once, but use it for each feature later.
     this.bounds = this._leafletMap.getBounds()
     const id = this.datalayerId(datalayer)
@@ -102,14 +97,14 @@ export default class Browser {
   }
 
   toggleBadge() {
-    Utils.toggleBadge(this.filtersTitle, this.hasFilters())
-    Utils.toggleBadge('.umap-control-browse', this.hasFilters())
+    Utils.toggleBadge(this.filtersTitle, this.hasActiveFilters())
+    Utils.toggleBadge('.umap-control-browse', this.hasActiveFilters())
   }
 
   onFormChange() {
     this._umap.datalayers.browsable().map((datalayer) => {
       datalayer.resetLayer(true)
-      this.updateDatalayer(datalayer)
+      this.updateFeaturesList(datalayer)
       if (this._umap.fullPanel?.isOpen()) datalayer.tableEdit()
     })
     this.toggleBadge()
@@ -123,25 +118,24 @@ export default class Browser {
     return !!document.querySelector('.on .umap-browser')
   }
 
-  hasFilters() {
-    return !!this.options.filter || this._umap.facets.isActive()
+  hasActiveFilters() {
+    return !!this.options.filter || this._umap.hasActiveFilters()
   }
 
   onMoveEnd() {
     if (!this.isOpen()) return
-    const isListDynamic = this.options.inBbox
     this._umap.datalayers.browsable().map((datalayer) => {
-      if (!isListDynamic && !datalayer.hasDynamicData()) return
-      this.updateDatalayer(datalayer)
+      if (!this.options.inBbox && !datalayer.hasDynamicData()) return
+      this.updateFeaturesList(datalayer)
     })
   }
 
   update() {
     if (!this.isOpen()) return
     this.dataContainer.innerHTML = ''
-    this._umap.datalayers.browsable().map((datalayer) => {
+    for (const datalayer of this._umap.datalayers.browsable()) {
       this.addDataLayer(datalayer, this.dataContainer)
-    })
+    }
   }
 
   open(mode) {
@@ -151,11 +145,14 @@ export default class Browser {
       <div>
         <h3><i class="icon icon-16 icon-layers"></i>${translate('Data browser')}</h3>
         <details class="filters" data-ref="details">
-          <summary data-ref=filtersTitle><i class="icon icon-16 icon-filters"></i>${translate('Filters')}</summary>
+          <summary data-ref=filtersTitle>
+            <i class="icon icon-16 icon-filters"></i>${translate('Filters')}
+          </summary>
+          <button type="button" class="show-on-edit flat" data-ref=manageFilters>${translate('Manage filters')}</button>
           <fieldset>
-            <div data-ref=formContainer>
+            <div data-ref="formContainer" class="formbox">
             </div>
-            <button class="flat" type="button" data-ref=reset><i class="icon icon-16 icon-restore" title=""></i>${translate('Reset all')}</button>
+            <button class="flat" type="button" data-ref=reset><i class="icon icon-16 icon-restore" title=""></i> ${translate('Reset all')}</button>
           </fieldset>
         </details>
         <div class="main-toolbox">
@@ -177,6 +174,7 @@ export default class Browser {
         dataContainer,
         formContainer,
         reset,
+        manageFilters,
       },
     ] = Utils.loadTemplateWithRefs(template)
     // HOTFIX. Remove when this is released:
@@ -187,43 +185,53 @@ export default class Browser {
     fitBounds.addEventListener('click', () => this._umap.fitDataBounds())
     download.addEventListener('click', () => this.downloadVisible(download))
     download.hidden = this._umap.getProperty('embedControl') === false
+    reset.addEventListener('click', () => this.resetFilters())
+    manageFilters.addEventListener('click', () => {
+      this._umap.edit().then((panel) => panel.scrollTo('details#fields-management'))
+      this._umap.filters.edit()
+    })
 
     this.filtersTitle = filtersTitle
     this.dataContainer = dataContainer
     this.formContainer = formContainer
     this.toggleBadge()
+    this.buildFilters()
+    this._umap.panel.open({
+      content: container,
+      className: 'umap-browser',
+    })
+
+    this.update()
+  }
 
-    let fields = [
+  buildFilters() {
+    this.formContainer.innerHTML = ''
+    const fields = [
       [
         'options.filter',
         { handler: 'Input', placeholder: translate('Search map features…') },
       ],
       ['options.inBbox', { handler: 'Switch', label: translate('Current map view') }],
     ]
-    const builder = new Form(this, fields)
-    builder.on('set', () => this.onFormChange())
-    let filtersBuilder
-    this.formContainer.appendChild(builder.build())
-    builder.form.addEventListener('reset', () => {
-      window.setTimeout(builder.syncAll.bind(builder))
-    })
-    if (this._umap.properties.facetKey) {
-      fields = this._umap.facets.build()
-      filtersBuilder = new Form(this._umap.facets, fields)
-      filtersBuilder.on('set', () => this.onFormChange())
-      filtersBuilder.form.addEventListener('reset', () => {
-        window.setTimeout(filtersBuilder.syncAll.bind(filtersBuilder))
+    const searchForm = new Form(this, fields, { className: 'formbox' })
+    const listenFormChanges = (form) => {
+      form.on('set', () => this.onFormChange())
+      form.form.addEventListener('reset', () => {
+        window.setTimeout(form.syncAll.bind(form))
       })
-      this.formContainer.appendChild(filtersBuilder.build())
     }
-    reset.addEventListener('click', () => this.resetFilters())
-
-    this._umap.panel.open({
-      content: container,
-      className: 'umap-browser',
-    })
-
-    this.update()
+    this.formContainer.appendChild(searchForm.build())
+    listenFormChanges(searchForm)
+    if (this._umap.filters.size) {
+      const filtersForm = this._umap.filters.buildForm(this.formContainer)
+      listenFormChanges(filtersForm)
+    }
+    for (const datalayer of this._umap.datalayers.active()) {
+      if (datalayer.filters.size) {
+        const filtersForm = datalayer.filters.buildForm(this.formContainer)
+        listenFormChanges(filtersForm)
+      }
+    }
   }
 
   resetFilters() {
@@ -252,7 +260,7 @@ export default class Browser {
       if (datalayer.isVisible()) allHidden = false
     })
     this._umap.datalayers.browsable().map((datalayer) => {
-      datalayer._forcedVisibility = true
+      datalayer.autoVisibility = false
       if (allHidden) {
         datalayer.show()
       } else {

umap/static/umap/js/modules/caption.js

@@ -5,7 +5,7 @@ import * as Utils from './utils.js'
 const TEMPLATE = `
 <div class="umap-caption">
   <div class="header">
-    <i class="icon icon-16 icon-caption icon-block"></i>
+    <i class="icon icon-16 icon-info icon-block"></i>
     <hgroup>
       <h3><span class="map-name" data-ref="name"></span></h3>
       <p data-ref="author"></p>
@@ -39,7 +39,7 @@ export default class Caption extends Utils.WithTemplate {
     this._leafletMap = leafletMap
     this.loadTemplate(TEMPLATE)
     this.elements.star.addEventListener('click', async () => {
-      if (this._umap.properties.user?.id) {
+      if (this._umap.permissions.userIsAuth()) {
         await this._umap.star()
         this.refresh()
       } else {
@@ -96,11 +96,14 @@ export default class Caption extends Utils.WithTemplate {
   addDataLayer(datalayer, parent) {
     if (!datalayer.properties.inCaption) return
     const template = `
-    <p class="caption-item ${datalayer.cssId}">
-      <span class="datalayer-legend"></span>
-      <strong data-ref="toolbox"></strong>
-      <span class="text" data-ref="description"></span>
-    </p>`
+    <div class="caption-item ${datalayer.cssId}">
+      <p>
+        <span class="datalayer-legend"></span>
+        <strong data-ref="toolbox"></strong>
+      </p>
+      <p class="text" data-ref="description"></p>
+    </div>
+    `
     const [element, { toolbox, description }] = Utils.loadTemplateWithRefs(template)
     if (datalayer.properties.description) {
       description.innerHTML = Utils.toHTML(datalayer.properties.description)

umap/static/umap/js/modules/data/features.js

@@ -22,6 +22,8 @@ import {
 } from '../rendering/ui.js'
 import { SCHEMA } from '../schema.js'
 import * as Utils from '../utils.js'
+import * as DOMUtils from '../domutils.js'
+import * as Icon from '../rendering/icon.js'
 
 class Feature {
   constructor(umap, datalayer, geojson = {}, id = null) {
@@ -91,7 +93,7 @@ class Feature {
 
   get fields() {
     // Fields are user defined properties
-    return [...this.datalayer.fields, ...this._umap.fields]
+    return [...this._umap.fields.all(), ...this.datalayer.fields.all()]
   }
 
   setter(key, value) {
@@ -136,6 +138,10 @@ class Feature {
     return this.staticOptions.className
   }
 
+  getUniqueClassName() {
+    return `feature-${this.datalayer.id}-${this.id}`
+  }
+
   getPreviewColor() {
     return this.getDynamicOption(this.staticOptions.mainColor)
   }
@@ -213,10 +219,22 @@ class Feature {
       return field.startsWith('properties.')
     })
     if (impactData) {
+      Utils.eachElement(`.${this.getUniqueClassName()} .feature-title`, (el) => {
+        el.textContent = this.getDisplayName()
+        el.title = this.getDisplayName()
+      })
       if (this._umap.currentFeature === this) {
         this.view()
       }
     }
+    const impactPreview = fields.some((field) => {
+      return field.startsWith('properties._umap_options')
+    })
+    if (impactPreview) {
+      Utils.eachElement(`.${this.getUniqueClassName()} .feature-color`, (el) => {
+        this.makePreview(el)
+      })
+    }
     this.redraw()
   }
 
@@ -233,7 +251,7 @@ class Feature {
     )
 
     let builder = new MutatingForm(this, [
-      ['datalayer', { handler: 'DataLayerSwitcher' }],
+      ['datalayer', { handler: 'EditableDataLayerSwitcher' }],
     ])
     // removeLayer step will close the edit panel, let's reopen it
     builder.on('set', () => this.edit(event))
@@ -241,11 +259,22 @@ class Feature {
 
     const properties = []
     for (const field of this.fields) {
-      let handler = 'Input'
-      if (field.key === 'description' || field.type === 'Text') {
-        handler = 'Textarea'
+      const options = { handler: 'Input', label: field.key }
+      if (field.key === 'description' || field.TYPE === 'Text') {
+        options.handler = 'Textarea'
+        options.helpEntries = ['textFormatting']
+      } else if (field.TYPE === 'Number') {
+        options.handler = 'FloatInput'
+      } else if (field.TYPE === 'Date') {
+        options.handler = 'DateInput'
+      } else if (field.TYPE === 'Datetime') {
+        options.handler = 'DateTimeInput'
+      } else if (field.TYPE === 'Boolean') {
+        options.handler = 'Switch'
+      } else if (field.TYPE === 'Enum') {
+        options.helpText = translate('Comma separated list of values')
       }
-      properties.push([`properties.${field.key}`, { label: field.key, handler }])
+      properties.push([`properties.${field.key}`, options])
     }
     builder = new MutatingForm(this, properties, {
       id: 'umap-feature-properties',
@@ -256,13 +285,13 @@ class Feature {
       `<button type="button"><i class="icon icon-16 icon-add"></i>${translate('Add a new field')}</button>`
     )
     button.addEventListener('click', () => {
-      this.datalayer.addProperty().then(() => this.edit({ force: true }))
+      this.datalayer.fields.editField().then(() => this.edit({ force: true }))
     })
     form.appendChild(button)
     this.appendEditFieldsets(container)
     const [details, { fieldset }] = Utils.loadTemplateWithRefs(`
       <details>
-        <summary>${translate('Advanced actions')}</summary>
+        <summary><h4>${translate('Advanced actions')}</h4></summary>
         <fieldset class="button-bar by2" data-ref=fieldset></fieldset>
       </details>
     `)
@@ -297,7 +326,7 @@ class Feature {
     container.appendChild(button)
   }
 
-  addExtraEditFieldset() {}
+  addExtraEditFieldset(container) {}
 
   appendEditFieldsets(container) {
     const optionsFields = this.getShapeOptions()
@@ -497,16 +526,16 @@ class Feature {
     return properties
   }
 
-  deleteProperty(property) {
-    const oldValue = this.properties[property]
-    delete this.properties[property]
-    this.sync.update(`properties.${property}`, undefined, oldValue)
+  deleteField(name) {
+    const oldValue = this.properties[name]
+    delete this.properties[name]
+    this.sync.update(`properties.${name}`, undefined, oldValue)
   }
 
-  renameProperty(from, to) {
+  renameField(from, to) {
     const oldValue = this.properties[from]
     this.properties[to] = this.properties[from]
-    this.deleteProperty(from)
+    this.deleteField(from)
     this.sync.update(`properties.${to}`, oldValue, undefined)
   }
 
@@ -522,12 +551,13 @@ class Feature {
   isFiltered() {
     const filterKeys = this.datalayer.getFilterKeys()
     const filter = this._umap.browser.options.filter
-    if (filter && !this.matchFilter(filter, filterKeys)) return true
-    if (!this.matchFacets()) return true
+    if (filter && !this.matchFullTextFilter(filter, filterKeys)) return true
+    if (this._umap.filters.matchFeature(this)) return true
+    if (this.datalayer.filters.matchFeature(this)) return true
     return false
   }
 
-  matchFilter(filter, keys) {
+  matchFullTextFilter(filter, keys) {
     filter = filter.toLowerCase()
     // When user hasn't touched settings, when a feature has no name
     // it will use the datalayer's name, so let's make the filtering
@@ -545,28 +575,6 @@ class Feature {
     return false
   }
 
-  matchFacets() {
-    const selected = this._umap.facets.selected
-    for (const [name, { type, min, max, choices }] of Object.entries(selected)) {
-      let value = this.properties[name]
-      const parser = this._umap.facets.getParser(type)
-      value = parser(value)
-      switch (type) {
-        case 'date':
-        case 'datetime':
-        case 'number':
-          if (!Number.isNaN(min) && !Number.isNaN(value) && min > value) return false
-          if (!Number.isNaN(max) && !Number.isNaN(value) && max < value) return false
-          break
-        default:
-          value = value || translate('<empty value>')
-          if (choices?.length && !choices.includes(value)) return false
-          break
-      }
-    }
-    return true
-  }
-
   isMulti() {
     return false
   }
@@ -592,6 +600,7 @@ class Feature {
     if (U.lang) properties.lang = U.lang
     properties.rank = this.getRank() + 1
     properties.layer = this.datalayer.getName()
+    properties.id = this.id
     if (this.ui._map && this.hasGeom()) {
       const center = this.center
       properties.lat = center.lat
@@ -610,7 +619,7 @@ class Feature {
   }
 
   redraw() {
-    if (this.datalayer?.isVisible()) {
+    if (this.datalayer?.isVisible() && this.ui?.isVisible()) {
       if (this.getUIClass() !== this.ui.getClass()) {
         this.datalayer.hideFeature(this)
         this.makeUI()
@@ -646,8 +655,7 @@ class Feature {
     items.push({
       label: translate('Copy as GeoJSON'),
       action: () => {
-        L.Util.copyToClipboard(JSON.stringify(this.toGeoJSON()))
-        this._umap.tooltip.open({ content: L._('✅ Copied!') })
+        DOMUtils.copyToClipboard(JSON.stringify(this.toGeoJSON()))
       },
     })
     return items
@@ -706,6 +714,19 @@ class Feature {
       this.ui.closePopup()
     }
   }
+
+  makePreview(element) {
+    element.innerHTML = ''
+    const symbol = this._getIconUrl ? Icon.formatUrl(this._getIconUrl(), this) : null
+    const bgcolor = this.getPreviewColor()
+    element.style.backgroundColor = bgcolor
+    if (symbol && symbol !== SCHEMA.iconUrl.default) {
+      const icon = Icon.makeElement(symbol, element)
+      Icon.setContrast(icon, element, symbol, bgcolor)
+    } else if (DOMUtils.contrastedColor(element, bgcolor)) {
+      element.classList.add('icon-white')
+    }
+  }
 }
 
 export class Point extends Feature {
@@ -931,6 +952,23 @@ class Path extends Feature {
     }
     return items
   }
+
+  addExtraEditFieldset(container) {
+    const options = [
+      'properties._umap_options.textPath',
+      'properties._umap_options.textPathColor',
+      'properties._umap_options.textPathRepeat',
+      'properties._umap_options.textPathRotate',
+      'properties._umap_options.textPathSize',
+      'properties._umap_options.textPathOffset',
+      'properties._umap_options.textPathPosition',
+    ]
+    const builder = new MutatingForm(this, options, {
+      id: 'umap-feature-line-decoration',
+    })
+    const fieldset = DomUtil.createFieldset(container, translate('Line decoration'))
+    fieldset.appendChild(builder.build())
+  }
 }
 
 export class LineString extends Path {
@@ -1229,26 +1267,6 @@ export class LineString extends Path {
     button.addEventListener('click', async () => this.computeRoute())
   }
 
-  addExtraEditFieldset(container) {
-    const options = [
-      'properties._umap_options.textPath',
-      'properties._umap_options.textPathColor',
-      'properties._umap_options.textPathRepeat',
-      'properties._umap_options.textPathRotate',
-      'properties._umap_options.textPathSize',
-      'properties._umap_options.textPathOffset',
-      'properties._umap_options.textPathPosition',
-    ]
-    const builder = new MutatingForm(this, options, {
-      id: 'umap-feature-line-decoration',
-    })
-    const fieldset = DomUtil.createFieldset(container, translate('Line decoration'))
-    fieldset.appendChild(builder.build())
-    if (this._umap.properties.ORSAPIKey && this.isRoute()) {
-      this._editRoute(container)
-    }
-  }
-
   async computeElevation() {
     if (!this._umap.properties.ORSAPIKey) return
     const importer = new OpenRouteService(this._umap)
@@ -1258,6 +1276,7 @@ export class LineString extends Path {
       this.geometry = geometry
       this.ui.resetTooltip()
       this.sync.update('geometry', this.geometry, oldGeometry)
+      Alert.success(translate('Elevation has been added!'))
     }
   }
 
@@ -1273,6 +1292,13 @@ export class LineString extends Path {
       }
     })
   }
+
+  addExtraEditFieldset(container) {
+    super.addExtraEditFieldset(container)
+    if (this._umap.properties.ORSAPIKey && this.isRoute()) {
+      this._editRoute(container)
+    }
+  }
 }
 
 export class Polygon extends Path {