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

umap/static/umap/js/components/copiable.js

@@ -0,0 +1,47 @@
+import Umap from '../modules/umap.js'
+import * as DOMUtils from '../modules/domutils.js'
+import * as Utils from '../modules/utils.js'
+import { translate } from '../modules/i18n.js'
+
+class CopiableInput extends HTMLElement {
+  connectedCallback() {
+    DOMUtils.copiableInput(this, this.dataset.label, this.dataset.value || '')
+  }
+}
+
+class CopiableTextarea extends HTMLElement {
+  static get observedAttributes() {
+    return ['value']
+  }
+
+  constructor() {
+    super()
+    const id = `copiable-${Utils.generateId()}`
+    this.innerHTML = `
+    <div class="copiable-textarea">
+      <label for="${id}">${this.dataset.label}</label>
+      <div>
+        <textarea type="text" id="${id}" readOnly>${this.value}</textarea>
+        <button type="button" class="icon icon-24 icon-copy" title="${translate('copy')}" data-ref=button></button>
+      </div>
+    </div>
+  `
+    this.textarea = this.querySelector('textarea')
+    this.button = this.querySelector('button')
+    this.button.addEventListener('click', () =>
+      DOMUtils.copyToClipboard(this.textarea.textContent)
+    )
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.textarea.textContent = newValue
+  }
+}
+
+function register(Class, tagName) {
+  if ('customElements' in window && !customElements.get(tagName)) {
+    customElements.define(tagName, Class)
+  }
+}
+
+register(CopiableInput, 'copiable-input')
+register(CopiableTextarea, 'copiable-textarea')

umap/static/umap/js/modules/autocomplete.js

@@ -1,13 +1,9 @@
-import {
-  DomEvent,
-  DomUtil,
-  Util,
-  setOptions,
-} from '../../vendors/leaflet/leaflet-src.esm.js'
+import { DomEvent, Util, setOptions } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from './i18n.js'
 import { Request, ServerRequest } from './request.js'
 import { escapeHTML, generateId } from './utils.js'
 import * as Utils from './utils.js'
+import * as DOMUtils from './domutils.js'
 
 export class BaseAutocomplete {
   constructor(parent, options) {
@@ -41,26 +37,18 @@ export class BaseAutocomplete {
   }
 
   createInput() {
-    this.input = DomUtil.element({
-      tagName: 'input',
-      type: 'text',
-      parent: this.parent,
-      placeholder: this.options.placeholder,
-      autocomplete: 'off',
-      className: this.options.className,
-      name: this.options.name || 'autocomplete',
-    })
-    DomEvent.on(this.input, 'keydown', this.onKeyDown, this)
-    DomEvent.on(this.input, 'keyup', this.onKeyUp, this)
-    DomEvent.on(this.input, 'blur', this.onBlur, this)
+    this.input = DOMUtils.loadTemplate(`
+      <input type="text" placeholder="${this.options.placeholder}" autocomplete="off" class="${this.options.className}" name="${this.options.name || 'autocomplete'}">
+    `)
+    this.parent.appendChild(this.input)
+    this.input.addEventListener('keydown', (event) => this.onKeyDown(event))
+    this.input.addEventListener('keyup', (event) => this.onKeyUp(event))
+    this.input.addEventListener('blur', (event) => this.onBlur(event))
   }
 
   createContainer() {
-    this.container = DomUtil.element({
-      tagName: 'ul',
-      parent: document.body,
-      className: 'umap-autocomplete',
-    })
+    this.container = DOMUtils.loadTemplate('<ul class="umap-autocomplete"></ul>')
+    document.body.appendChild(this.container)
   }
 
   resizeContainer() {
@@ -167,20 +155,17 @@ export class BaseAutocomplete {
   }
 
   createResult(item) {
-    const el = DomUtil.element({
-      tagName: 'li',
-      parent: this.container,
-      textContent: item.label,
-    })
+    const li = DOMUtils.loadTemplate(`<li>${item.label}</li>`)
+    this.container.appendChild(li)
     const result = {
       item: item,
-      el: el,
+      el: li,
     }
-    DomEvent.on(el, 'mouseover', () => {
+    li.addEventListener('mouseover', () => {
       this.current = result
       this.highlight()
     })
-    DomEvent.on(el, 'mousedown', () => this.setChoice())
+    li.addEventListener('mousedown', () => this.setChoice())
     return result
   }
 
@@ -202,8 +187,7 @@ export class BaseAutocomplete {
 
   highlight() {
     this.results.forEach((result, index) => {
-      if (index === this.current) DomUtil.addClass(result.el, 'on')
-      else DomUtil.removeClass(result.el, 'on')
+      result.el.classList.toggle('on', index === this.current)
     })
   }
 
@@ -231,14 +215,10 @@ export class BaseAutocomplete {
 export class BaseAjax extends BaseAutocomplete {
   constructor(el, options) {
     super(el, options)
-    this.setUrl()
+    this.url = this.options.url
     this.initRequest()
   }
 
-  setUrl() {
-    this.url = this.options?.url
-  }
-
   initRequest() {
     this.request = new Request()
   }
@@ -276,10 +256,6 @@ export class BaseAjax extends BaseAutocomplete {
 }
 
 class BaseServerAjax extends BaseAjax {
-  setUrl() {
-    this.url = '/agnocomplete/AutocompleteUser/?q={q}'
-  }
-
   initRequest() {
     this.server = new ServerRequest()
   }
@@ -298,19 +274,15 @@ export const SingleMixin = (Base) =>
     }
 
     displaySelected(result) {
-      const result_el = DomUtil.element({
-        tagName: 'div',
-        parent: this.selectedContainer,
-      })
-      result_el.textContent = result.item.label
-      const close = DomUtil.element({
-        tagName: 'span',
-        parent: result_el,
-        className: 'close',
-        textContent: '×',
-      })
+      const [root, { close }] = DOMUtils.loadTemplateWithRefs(`
+        <div class="with-toolbox">
+          ${result.item.label}
+          <button type="button" class="icon icon-16 icon-close" title="${translate('Close')}" data-ref="close"></button>
+        </div>
+      `)
+      this.selectedContainer.appendChild(root)
       this.input.style.display = 'none'
-      DomEvent.on(close, 'click', () => {
+      close.addEventListener('click', () => {
         this.selectedContainer.innerHTML = ''
         this.input.style.display = 'block'
         this.options.on_unselect?.(result)
@@ -328,19 +300,12 @@ export const MultipleMixin = (Base) =>
     }
 
     displaySelected(result) {
-      const result_el = DomUtil.element({
-        tagName: 'li',
-        parent: this.selectedContainer,
-      })
-      result_el.textContent = result.item.label
-      const close = DomUtil.element({
-        tagName: 'span',
-        parent: result_el,
-        className: 'close',
-        textContent: '×',
-      })
-      DomEvent.on(close, 'click', () => {
-        this.selectedContainer.removeChild(result_el)
+      const [li, { close }] = DOMUtils.loadTemplateWithRefs(`
+        <li class="with-toolbox">${result.item.label} <button class="icon icon-16 icon-close" type="button" data-ref="close"></button></li>
+      `)
+      this.selectedContainer.appendChild(li)
+      close.addEventListener('click', () => {
+        this.selectedContainer.removeChild(li)
         this.options.on_unselect?.(result)
       })
       this.hide()

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

@@ -1,4 +1,4 @@
-import { DomEvent, DomUtil, stamp } from '../../vendors/leaflet/leaflet-src.esm.js'
+import { DomEvent, stamp } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { Form } from './form/builder.js'
 import { EXPORT_FORMATS } from './formatter.js'
 import { translate } from './i18n.js'
@@ -57,18 +57,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.cssId}" id="${this.datalayerId(datalayer)}"${open}>
-        <summary data-ref=headline class="with-toolbox">
+    const [container, { details, toolbox, label, ul }] = Utils.loadTemplateWithRefs(`
+      <details data-ref=details class="datalayer ${datalayer.cssId}" id="${datalayer.cssId}"${open}>
+        <summary 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>
         </summary>
-        <ul></ul>
+        <ul data-ref=ul></ul>
       </details>
     `)
+    details.addEventListener('toggle', () => {
+      if (details.open && !ul.innerHTML.trim()) {
+        this._appendFeaturesDOM(datalayer, ul)
+      }
+    })
     datalayer.renderToolbox(toolbox)
     parent.appendChild(container)
     this.updateFeaturesList(datalayer)
@@ -77,25 +82,31 @@ export default class Browser {
   updateFeaturesList(datalayer) {
     // Compute once, but use it for each feature later.
     this.bounds = this._leafletMap.getBounds()
-    const id = this.datalayerId(datalayer)
-    const parent = document.getElementById(id)
-    // Panel is not open
+    const parent = document.getElementById(datalayer.cssId)
+    // Browser is not open
     if (!parent) return
     parent.classList.toggle('off', !datalayer.isVisible())
     const label = parent.querySelector('.datalayer-name')
     const container = parent.querySelector('ul')
     container.innerHTML = ''
-    datalayer.features.forEach((feature) => this.addFeature(feature, container))
+    const isOpen = container.parentNode.open
+    if (isOpen || this.hasActiveFilters()) {
+      this._appendFeaturesDOM(datalayer, container)
+    }
     datalayer.propagate(['properties.name'])
     const total = datalayer.count()
     if (!total) return
     const current = container.querySelectorAll('li').length
-    const count = total === current ? total : `${current}/${total}`
+    const count = !this.hasActiveFilters() ? total : `${current}/${total}`
     const counter = parent.querySelector('.datalayer-counter')
     counter.textContent = `(${count})`
     counter.title = translate(`Features in this layer: ${count}`)
   }
 
+  _appendFeaturesDOM(datalayer, container) {
+    datalayer.features.forEach((feature) => this.addFeature(feature, container))
+  }
+
   toggleBadge() {
     Utils.toggleBadge(this.filtersTitle, this.hasActiveFilters())
     Utils.toggleBadge('.umap-control-browse', this.hasActiveFilters())
@@ -133,12 +144,13 @@ export default class Browser {
   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) {
+    // TODO add loader
     // Force only if mode is known, otherwise keep current mode.
     if (mode) this.mode = mode
     const template = `
@@ -200,11 +212,16 @@ export default class Browser {
       content: container,
       className: 'umap-browser',
     })
-
+    details.addEventListener('toggle', () => {
+      if (details.open && !formContainer.innerHTML.trim()) {
+        this.buildFilters()
+      }
+    })
     this.update()
   }
 
   buildFilters() {
+    if (!this.filtersTitle.parentNode.open) return
     this.formContainer.innerHTML = ''
     const fields = [
       [
@@ -260,7 +277,7 @@ export default class Browser {
       if (datalayer.isVisible()) allHidden = false
     })
     this._umap.datalayers.browsable().map((datalayer) => {
-      datalayer.autoLoaded = false
+      datalayer.autoVisibility = false
       if (allHidden) {
         datalayer.show()
       } else {

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

@@ -1,12 +1,7 @@
-import {
-  DomEvent,
-  DomUtil,
-  GeoJSON,
-  LineUtil,
-} from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { GeoJSON, LineUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { uMapAlert as Alert } from '../../components/alerts/alert.js'
 import { MutatingForm } from '../form/builder.js'
-import { translate } from '../i18n.js'
+import { translate, getLocale } from '../i18n.js'
 import {
   PREFERENCES as ORS_PREFERENCES,
   PROFILES as ORS_PROFILES,
@@ -243,15 +238,16 @@ class Feature {
     if (this._umap.editedFeature === this && !event?.force) return
     // If this feature is active (popup open), let's close it.
     this.deactivate()
-    const container = DomUtil.create('div', 'umap-feature-container')
-    DomUtil.createTitle(
-      container,
-      translate('Feature properties'),
-      `icon-${this.getClassName()}`
-    )
+    const container = DOMUtils.loadTemplate(`
+      <div class="umap-feature-container">
+        <h3><i class="icon icon-16 icon-${this.getClassName()}"></i> ${translate('Feature properties')}</h3>
+      </div>
+    `)
 
+    // No need to sync the datalayer key, given we already do a delete/upsert when
+    // it changes.
     let builder = new MutatingForm(this, [
-      ['datalayer', { handler: 'EditableDataLayerSwitcher' }],
+      ['datalayer', { handler: 'EditableDataLayerSwitcher', sync: false }],
     ])
     // removeLayer step will close the edit panel, let's reopen it
     builder.on('set', () => this.edit(event))
@@ -260,17 +256,19 @@ class Feature {
     const properties = []
     for (const field of this.fields) {
       const options = { handler: 'Input', label: field.key }
-      if (field.key === 'description' || field.type === 'Text') {
+      if (field.key === 'description' || field.TYPE === 'Text') {
         options.handler = 'Textarea'
         options.helpEntries = ['textFormatting']
-      } else if (field.type === 'Number') {
+      } else if (field.TYPE === 'Number') {
         options.handler = 'FloatInput'
-      } else if (field.type === 'Date') {
+      } else if (field.TYPE === 'Date') {
         options.handler = 'DateInput'
-      } else if (field.type === 'Datetime') {
+      } else if (field.TYPE === 'Datetime') {
         options.handler = 'DateTimeInput'
-      } else if (field.type === 'Boolean') {
+      } 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}`, options])
     }
@@ -331,7 +329,7 @@ class Feature {
     let builder = new MutatingForm(this, optionsFields, {
       id: 'umap-feature-shape-properties',
     })
-    const shapeProperties = DomUtil.createFieldset(
+    const shapeProperties = DOMUtils.createFieldset(
       container,
       translate('Shape properties')
     )
@@ -343,7 +341,7 @@ class Feature {
     builder = new MutatingForm(this, advancedOptions, {
       id: 'umap-feature-advanced-properties',
     })
-    const advancedProperties = DomUtil.createFieldset(
+    const advancedProperties = DOMUtils.createFieldset(
       container,
       translate('Advanced properties')
     )
@@ -351,7 +349,7 @@ class Feature {
 
     const interactionOptions = this.getInteractionOptions()
     builder = new MutatingForm(this, interactionOptions)
-    const popupFieldset = DomUtil.createFieldset(
+    const popupFieldset = DOMUtils.createFieldset(
       container,
       translate('Interaction options')
     )
@@ -442,7 +440,7 @@ class Feature {
     this.properties = Object.fromEntries(
       Object.entries(geojson.properties || {}).map(this.cleanProperty)
     )
-    this.properties._umap_options = L.extend(
+    this.properties._umap_options = Object.assign(
       {},
       this.properties._storage_options,
       this.properties._umap_options
@@ -514,8 +512,8 @@ class Feature {
   }
 
   cloneProperties() {
-    const properties = L.extend({}, this.properties)
-    properties._umap_options = L.extend({}, properties._umap_options)
+    const properties = Object.assign({}, this.properties)
+    properties._umap_options = Object.assign({}, properties._umap_options)
     if (Object.keys && Object.keys(properties._umap_options).length === 0) {
       delete properties._umap_options // It can make a difference on big data sets
     }
@@ -593,7 +591,7 @@ class Feature {
   extendedProperties() {
     // Include context properties
     const properties = this._umap.getGeoContext()
-    const locale = L.getLocale()
+    const locale = getLocale()
     if (locale) properties.locale = locale
     if (U.lang) properties.lang = U.lang
     properties.rank = this.getRank() + 1
@@ -788,7 +786,7 @@ export class Point extends Feature {
     ]
     const builder = new MutatingForm(this, coordinatesOptions)
     builder.on('set', () => {
-      if (!this.ui._latlng.isValid()) {
+      if (!Utils.LatLngIsValid(this.ui._latlng)) {
         Alert.error(translate('Invalid latitude or longitude'))
         builder.restoreField('ui._latlng.lat')
         builder.restoreField('ui._latlng.lng')
@@ -796,7 +794,7 @@ export class Point extends Feature {
       this.pullGeometry()
       this.zoomTo({ easing: false })
     })
-    const fieldset = DomUtil.createFieldset(container, translate('Coordinates'))
+    const fieldset = DOMUtils.createFieldset(container, translate('Coordinates'))
     fieldset.appendChild(builder.build())
   }
 
@@ -964,7 +962,7 @@ class Path extends Feature {
     const builder = new MutatingForm(this, options, {
       id: 'umap-feature-line-decoration',
     })
-    const fieldset = DomUtil.createFieldset(container, translate('Line decoration'))
+    const fieldset = DOMUtils.createFieldset(container, translate('Line decoration'))
     fieldset.appendChild(builder.build())
   }
 }
@@ -1077,7 +1075,7 @@ export class LineString extends Path {
   getAdvancedEditActions(container) {
     super.getAdvancedEditActions(container)
     const button = Utils.loadTemplate(`
-      <button class="button" type="button"><i class="icon icon-24 icon-polygon"></i>${translate('Transform to polygon')}</button>
+      <button type="button"><i class="icon icon-24 icon-polygon"></i>${translate('Transform to polygon')}</button>
     `)
     container.appendChild(button)
     button.addEventListener('click', () => this.toPolygon())
@@ -1383,13 +1381,13 @@ export class Polygon extends Path {
 
   getAdvancedEditActions(container) {
     super.getAdvancedEditActions(container)
-    const toLineString = DomUtil.createButton(
-      'button umap-to-polyline',
-      container,
-      translate('Transform to lines'),
-      this.toLineString,
-      this
+    const toLineString = DOMUtils.loadTemplate(
+      `<button type="button" class="umap-to-polyline">
+        <i class="icon icon-24 icon-polyline"></i>${translate('Transform to lines')}
+      </button>`
     )
+    container.appendChild(toLineString)
+    toLineString.addEventListener('click', () => this.toLineString())
   }
 
   isMulti() {