umap-project 3.0.4__py3-none-any.whl → 3.0.6__py3-none-any.whl

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

@@ -5,6 +5,7 @@ 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'
 
 export default class Browser {
   constructor(umap, leafletMap) {
@@ -21,35 +22,24 @@ export default class Browser {
   addFeature(feature, parent) {
     if (feature.isFiltered()) return
     if (this.options.inBbox && !feature.isOnScreen(this.bounds)) return
-    const row = DomUtil.create('li', `${feature.getClassName()} feature`)
-    const zoom_to = DomUtil.createButtonIcon(
-      row,
-      'icon-zoom',
-      translate('Bring feature to center')
-    )
-    const edit = DomUtil.createButtonIcon(
-      row,
-      'show-on-edit icon-edit',
-      translate('Edit this feature')
-    )
-    const del = DomUtil.createButtonIcon(
-      row,
-      'show-on-edit icon-delete',
-      translate('Delete this feature')
-    )
-    const colorBox = DomUtil.create(
-      'i',
-      `icon icon-16 icon-${feature.getClassName()} feature-color`,
-      row
-    )
-    const title = DomUtil.create('span', 'feature-title', row)
+    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>
+    `
+    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
-    title.textContent = title.title = feature.getDisplayName() || '—'
     const bgcolor = feature.getPreviewColor()
     colorBox.style.backgroundColor = bgcolor
-    if (symbol && symbol !== U.SCHEMA.iconUrl.default) {
+    if (symbol && symbol !== SCHEMA.iconUrl.default) {
       const icon = Icon.makeElement(symbol, colorBox)
       Icon.setContrast(icon, colorBox, symbol, bgcolor)
     } else if (DomUtil.contrastedColor(colorBox, bgcolor)) {
@@ -58,10 +48,10 @@ export default class Browser {
     const viewFeature = (e) => {
       feature.zoomTo({ ...e, callback: () => feature.view() })
     }
-    DomEvent.on(zoom_to, 'click', viewFeature)
-    DomEvent.on(title, 'click', viewFeature)
-    DomEvent.on(edit, 'click', feature.edit, feature)
-    DomEvent.on(del, 'click', feature.del, feature)
+    zoom.addEventListener('click', viewFeature)
+    label.addEventListener('click', viewFeature)
+    edit.addEventListener('click', () => feature.edit())
+    remove.addEventListener('click', () => feature.del())
     // HOTFIX. Remove when this is released:
     // https://github.com/Leaflet/Leaflet/pull/9052
     DomEvent.disableClickPropagation(row)
@@ -73,51 +63,51 @@ export default class Browser {
   }
 
   addDataLayer(datalayer, parent) {
-    let className = `datalayer ${datalayer.getHidableClass()}`
-    if (this.mode !== 'layers') className += ' show-list'
-    const container = DomUtil.create('div', className, parent)
-    const headline = DomUtil.create('h5', '', container)
-    container.id = this.datalayerId(datalayer)
-    const ul = DomUtil.create('ul', '', container)
+    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>
+          <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)
   }
 
   updateDatalayer(datalayer) {
     // Compute once, but use it for each feature later.
     this.bounds = this._leafletMap.getBounds()
-    const parent = DomUtil.get(this.datalayerId(datalayer))
+    const id = this.datalayerId(datalayer)
+    const parent = document.getElementById(id)
     // Panel is not open
     if (!parent) return
     parent.classList.toggle('off', !datalayer.isVisible())
+    const label = parent.querySelector('.datalayer-name')
     const container = parent.querySelector('ul')
-    const headline = parent.querySelector('h5')
-    const toggleList = () => parent.classList.toggle('show-list')
-    headline.innerHTML = ''
-    const toggle = DomUtil.create('i', 'icon icon-16 datalayer-toggle-list', headline)
-    DomEvent.on(toggle, 'click', toggleList)
-    datalayer.renderToolbox(headline)
-    const name = DomUtil.create('span', 'datalayer-name', headline)
-    name.textContent = name.title = datalayer.options.name
-    DomEvent.on(name, 'click', toggleList)
     container.innerHTML = ''
     datalayer.eachFeature((feature) => this.addFeature(feature, 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 counter = DomUtil.create('span', 'datalayer-counter', headline)
+    const counter = parent.querySelector('.datalayer-counter')
     counter.textContent = `(${count})`
     counter.title = translate(`Features in this layer: ${count}`)
   }
 
   toggleBadge() {
-    U.Utils.toggleBadge(this.filtersTitle, this.hasFilters())
-    U.Utils.toggleBadge('.umap-control-browse', this.hasFilters())
+    Utils.toggleBadge(this.filtersTitle, this.hasFilters())
+    Utils.toggleBadge('.umap-control-browse', this.hasFilters())
   }
 
   onFormChange() {
-    this._umap.eachBrowsableDataLayer((datalayer) => {
+    this._umap.datalayers.browsable().map((datalayer) => {
       datalayer.resetLayer(true)
       this.updateDatalayer(datalayer)
       if (this._umap.fullPanel?.isOpen()) datalayer.tableEdit()
@@ -140,7 +130,7 @@ export default class Browser {
   onMoveEnd() {
     if (!this.isOpen()) return
     const isListDynamic = this.options.inBbox
-    this._umap.eachBrowsableDataLayer((datalayer) => {
+    this._umap.datalayers.browsable().map((datalayer) => {
       if (!isListDynamic && !datalayer.hasDynamicData()) return
       this.updateDatalayer(datalayer)
     })
@@ -149,7 +139,7 @@ export default class Browser {
   update() {
     if (!this.isOpen()) return
     this.dataContainer.innerHTML = ''
-    this._umap.eachBrowsableDataLayer((datalayer) => {
+    this._umap.datalayers.browsable().map((datalayer) => {
       this.addDataLayer(datalayer, this.dataContainer)
     })
   }
@@ -157,21 +147,51 @@ export default class Browser {
   open(mode) {
     // Force only if mode is known, otherwise keep current mode.
     if (mode) this.mode = mode
-    const container = DomUtil.create('div')
+    const template = `
+      <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>
+          <fieldset>
+            <div data-ref=formContainer>
+            </div>
+            <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">
+          <i class="icon icon-16 icon-eye" title="${translate('show/hide all layers')}" data-ref="toggle"></i>
+          <i class="icon icon-16 icon-zoom" title="${translate('zoom to data extent')}" data-ref="fitBounds"></i>
+          <i class="icon icon-16 icon-download" title="${translate('download visible data')}" data-ref="download"></i>
+        </div>
+        <div data-ref=dataContainer></div>
+      </div>
+    `
+    const [
+      container,
+      {
+        details,
+        filtersTitle,
+        toggle,
+        fitBounds,
+        download,
+        dataContainer,
+        formContainer,
+        reset,
+      },
+    ] = Utils.loadTemplateWithRefs(template)
     // HOTFIX. Remove when this is released:
     // https://github.com/Leaflet/Leaflet/pull/9052
     DomEvent.disableClickPropagation(container)
+    details.open = this.mode === 'filters'
+    toggle.addEventListener('click', () => this.toggleLayers())
+    fitBounds.addEventListener('click', () => this._umap.fitDataBounds())
+    download.addEventListener('click', () => this.downloadVisible(download))
+    download.hidden = this._umap.getProperty('embedControl') === false
 
-    DomUtil.createTitle(container, translate('Data browser'), 'icon-layers')
-    this.formContainer = DomUtil.createFieldset(container, L._('Filters'), {
-      on: this.mode === 'filters',
-      className: 'filters',
-      icon: 'icon-filters',
-    })
-    this.filtersTitle = container.querySelector('summary')
+    this.filtersTitle = filtersTitle
+    this.dataContainer = dataContainer
+    this.formContainer = formContainer
     this.toggleBadge()
-    this.addMainToolbox(container)
-    this.dataContainer = DomUtil.create('div', '', container)
 
     let fields = [
       [
@@ -184,27 +204,19 @@ export default class Browser {
     builder.on('set', () => this.onFormChange())
     let filtersBuilder
     this.formContainer.appendChild(builder.build())
-    DomEvent.on(builder.form, 'reset', () => {
+    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())
-      DomEvent.on(filtersBuilder.form, 'reset', () => {
+      filtersBuilder.form.addEventListener('reset', () => {
         window.setTimeout(filtersBuilder.syncAll.bind(filtersBuilder))
       })
       this.formContainer.appendChild(filtersBuilder.build())
     }
-    const reset = DomUtil.createButton('flat', this.formContainer, '', () =>
-      this.resetFilters()
-    )
-    DomUtil.createIcon(reset, 'icon-restore')
-    DomUtil.element({
-      tagName: 'span',
-      parent: reset,
-      textContent: translate('Reset all'),
-    })
+    reset.addEventListener('click', () => this.resetFilters())
 
     this._umap.panel.open({
       content: container,
@@ -220,21 +232,6 @@ export default class Browser {
     }
   }
 
-  addMainToolbox(container) {
-    const [toolbox, { toggle, fitBounds, download }] = Utils.loadTemplateWithRefs(`
-      <div class="main-toolbox">
-        <i class="icon icon-16 icon-eye" title="${translate('show/hide all layers')}" data-ref="toggle"></i>
-        <i class="icon icon-16 icon-zoom" title="${translate('zoom to data extent')}" data-ref="fitBounds"></i>
-        <i class="icon icon-16 icon-download" title="${translate('download visible data')}" data-ref="download"></i>
-      </div>
-    `)
-    container.appendChild(toolbox)
-    toggle.addEventListener('click', () => this.toggleLayers())
-    fitBounds.addEventListener('click', () => this._umap.fitDataBounds())
-    download.addEventListener('click', () => this.downloadVisible(download))
-    download.hidden = this._umap.getProperty('embedControl') === false
-  }
-
   downloadVisible(element) {
     const menu = new ContextMenu({ fixed: true })
     const items = []
@@ -251,10 +248,10 @@ export default class Browser {
     // If at least one layer is shown, hide it
     // otherwise show all
     let allHidden = true
-    this._umap.eachBrowsableDataLayer((datalayer) => {
+    this._umap.datalayers.browsable().map((datalayer) => {
       if (datalayer.isVisible()) allHidden = false
     })
-    this._umap.eachBrowsableDataLayer((datalayer) => {
+    this._umap.datalayers.browsable().map((datalayer) => {
       datalayer._forcedVisibility = true
       if (allHidden) {
         datalayer.show()
@@ -265,15 +262,13 @@ export default class Browser {
   }
 
   static backButton(umap) {
-    const button = DomUtil.createButtonIcon(
-      DomUtil.create('li', '', undefined),
-      'icon-back',
-      translate('Back to browser')
+    const button = Utils.loadTemplate(
+      `<button class="icon icon-16 icon-back" title="${translate('Back to browser')}"></button>`
     )
     // Fixme: remove me when this is merged and released
     // https://github.com/Leaflet/Leaflet/pull/9052
     DomEvent.disableClickPropagation(button)
-    DomEvent.on(button, 'click', () => umap.openBrowser())
+    button.addEventListener('click', () => umap.openBrowser())
     return button
   }
 }

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

@@ -68,9 +68,11 @@ export default class Caption extends Utils.WithTemplate {
       this.elements.description.hidden = true
     }
     this.elements.datalayersContainer.innerHTML = ''
-    this._umap.eachDataLayerReverse((datalayer) =>
-      this.addDataLayer(datalayer, this.elements.datalayersContainer)
-    )
+    this._umap.datalayers
+      .reverse()
+      .map((datalayer) =>
+        this.addDataLayer(datalayer, this.elements.datalayersContainer)
+      )
     this.addCredits()
     if (this._umap.properties.created_at) {
       const created_at = translate('created at {date}', {
@@ -85,7 +87,7 @@ export default class Caption extends Utils.WithTemplate {
     }
     this._umap.panel.open({ content: this.element }).then(() => {
       // Create the legend when the panel is actually on the DOM
-      this._umap.eachDataLayerReverse((datalayer) => datalayer.renderLegend())
+      this._umap.datalayers.reverse().map((datalayer) => datalayer.renderLegend())
       this._umap.propagate()
     })
   }

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

@@ -22,7 +22,6 @@ class Feature {
   constructor(umap, datalayer, geojson = {}, id = null) {
     this._umap = umap
     this.sync = umap.syncEngine.proxy(this)
-    this._isDirty = false
     this._ui = null
 
     // DataLayer the feature belongs to
@@ -54,17 +53,6 @@ class Feature {
     }
   }
 
-  set isDirty(status) {
-    this._isDirty = status
-    if (this.datalayer) {
-      this.datalayer.isDirty = status
-    }
-  }
-
-  get isDirty() {
-    return this._isDirty
-  }
-
   get ui() {
     if (!this._ui) this.makeUI()
     return this._ui
@@ -367,7 +355,6 @@ class Feature {
   }
 
   del(sync) {
-    this.isDirty = true
     this._umap._leafletMap.closePopup()
     if (this.datalayer) {
       this.datalayer.removeFeature(this, sync)
@@ -412,13 +399,11 @@ class Feature {
 
   changeDataLayer(datalayer) {
     if (this.datalayer) {
-      this.datalayer.isDirty = true
       this.datalayer.removeFeature(this)
     }
 
     datalayer.addFeature(this)
     this.sync.upsert(this.toGeoJSON())
-    datalayer.isDirty = true
     this.redraw()
   }
 
@@ -485,7 +470,6 @@ class Feature {
 
   deleteProperty(property) {
     delete this.properties[property]
-    this.isDirty = true
   }
 
   renameProperty(from, to) {
@@ -578,7 +562,6 @@ class Feature {
     delete geojson.id
     delete geojson.properties.id
     const feature = this.datalayer.makeFeature(geojson)
-    feature.isDirty = true
     feature.edit()
     return feature
   }
@@ -614,7 +597,7 @@ class Feature {
         this.datalayer.hideFeature(this)
         this.makeUI()
         this.datalayer.showFeature(this)
-      } else {
+      } else if (this.datalayer?.isBrowsable()) {
         this.ui._redraw()
       }
     }
@@ -1053,7 +1036,6 @@ export class LineString extends Path {
     this.pullGeometry()
     if (!this.ui.editEnabled()) this.edit()
     this.ui.editor.reset()
-    this.isDirty = true
   }
 
   isMulti() {