umap-project 3.3.6__py3-none-any.whl → 3.4.0b1__py3-none-any.whl

umap/static/umap/js/modules/managers.js

@@ -1,4 +1,8 @@
 import * as Utils from './utils.js'
+import { translate } from './i18n.js'
+import Orderable from './orderable.js'
+import { uMapAlert as Alert } from '../components/alerts/alert.js'
+import { Form } from './form/builder.js'
 
 export class DataLayerManager extends Object {
   add(datalayer) {
@@ -59,7 +63,7 @@ export class FeatureManager extends Map {
     if (this.has(feature.id)) {
       console.error('Duplicate id', feature, this.get(feature.id))
       feature.id = Utils.generateId()
-      feature.datalayer._found_duplicate_id = true
+      feature.datalayer._migrated = true
     }
     this.set(feature.id, feature)
   }
@@ -112,3 +116,263 @@ export class FeatureManager extends Map {
     return this.all()[index - 1]
   }
 }
+
+export class FieldManager extends Map {
+  constructor(parent, dialog) {
+    super()
+    this.parent = parent
+    this.dialog = dialog
+    this.parent.properties.fields ??= []
+    this.pull()
+  }
+
+  pull() {
+    this.clear()
+    for (const field of this.parent.properties.fields) {
+      this.add(field)
+    }
+  }
+
+  push() {
+    this.parent.properties.fields = this.all().map((field) => {
+      // We don't want to keep the reference, otherwise editing
+      // it will also change the old value
+      return { ...field }
+    })
+  }
+
+  async commit() {
+    return new Promise((resolve) => {
+      const oldFields = Utils.CopyJSON(this.parent.properties.fields)
+      resolve()
+      this.push()
+      this.parent.sync.update(
+        'properties.fields',
+        this.parent.properties.fields,
+        oldFields
+      )
+    })
+  }
+
+  add(field) {
+    if (!field?.key) {
+      console.error('Invalid field', field)
+      return
+    }
+    field.type ??= 'String'
+    // Copy object, so not to affect original
+    // when edited.
+    this.set(field.key, { ...field })
+    this.push()
+  }
+
+  delete(key) {
+    super.delete(key)
+    this.push()
+  }
+
+  all() {
+    return Array.from(this.values())
+  }
+
+  edit(container) {
+    const [root, { ul, add, manageFilters }] = Utils.loadTemplateWithRefs(`
+      <details id="fields-management">
+        <summary><h4>${translate('Manage Fields')}</h4></summary>
+        <fieldset>
+          <ul data-ref=ul></ul>
+          <div class="button-bar half">
+            <button type="button" data-ref=add>${translate('Add a new field')}</button>
+            <button type="button" data-ref="manageFilters">${translate('Manage filters')}</button>
+          </div>
+        </fieldset>
+      </details>
+    `)
+    container.appendChild(root)
+    add.hidden = this.parent.isRemoteLayer?.()
+    add.addEventListener('click', () => {
+      this.editField().then(() => {
+        this.parent.edit().then((panel) => {
+          panel.scrollTo('details#fields-management')
+        })
+      })
+    })
+    manageFilters.addEventListener('click', () => this.parent.filters.edit())
+    for (const field of this.all()) {
+      const [row, { edit, del, addFilter, editFilter }] = Utils.loadTemplateWithRefs(
+        `<li class="orderable with-toolbox" data-key="${field.key}">
+          <span>
+            <i class="icon icon-16 icon-field-${field.type}" title="${field.type}"></i>
+            ${field.key}
+          </span>
+          <span>
+            <button class="icon icon-16 icon-edit" title="${translate('Edit this field')}" data-ref=edit></button>
+            <button class="icon icon-16 icon-filters" title="${translate('Edit filter')}" data-ref=editFilter></button>
+            <button class="icon icon-16 icon-filters-empty" title="${translate('Add a filter for this field')}" data-ref=addFilter></button>
+            <button class="icon icon-16 icon-delete" title="${translate('Delete this field')}" data-ref=del></button>
+            <i class="icon icon-16 icon-drag" title="${translate('Drag to reorder')}"></i>
+          </span>
+        </li>`
+      )
+      editFilter.hidden = !this.parent.filters.has(field.key)
+      addFilter.hidden = this.parent.filters.has(field.key)
+      del.hidden = this.parent.isRemoteLayer?.()
+      editFilter.addEventListener('click', () =>
+        this.parent.filters.createFilterForm(field.key)
+      )
+      addFilter.addEventListener('click', () =>
+        this.parent.filters.createFilterForm(field.key)
+      )
+      ul.appendChild(row)
+      edit.addEventListener('click', () => {
+        this.editField(field.key).then(() => {
+          this.parent.edit().then((panel) => {
+            panel.scrollTo('details#fields-management')
+          })
+        })
+      })
+      del.addEventListener('click', () => {
+        this.confirmDelete(field.key).then(() => {
+          this.parent.edit().then((panel) => {
+            panel.scrollTo('details#fields-management')
+          })
+        })
+      })
+    }
+    const onReorder = (src, dst, initialIndex, finalIndex) => {
+      const orderedKeys = Array.from(ul.querySelectorAll('li')).map(
+        (el) => el.dataset.key
+      )
+      const oldFields = Utils.CopyJSON(this.parent.properties.fields)
+      const copy = Object.fromEntries(this)
+      this.clear()
+      for (const key of orderedKeys) {
+        this.add(copy[key])
+      }
+      this.parent.sync.update(
+        'properties.fields',
+        this.parent.properties.fields,
+        oldFields
+      )
+    }
+    const orderable = new Orderable(ul, onReorder)
+  }
+
+  async editField(name) {
+    if (!name && this.parent.isRemoteLayer?.()) return
+    const FIELD_TYPES = [
+      'String',
+      'Text',
+      'Number',
+      'Date',
+      'Datetime',
+      'Enum',
+      'Boolean',
+    ]
+    const field = this.get(name) || {}
+    const metadatas = [
+      [
+        'key',
+        {
+          handler: 'BlurInput',
+          label: translate('Field Name'),
+          disabled: this.parent.isRemoteLayer?.(),
+        },
+      ],
+      [
+        'type',
+        {
+          handler: 'Select',
+          selectOptions: FIELD_TYPES,
+          label: translate('Field Type'),
+        },
+      ],
+    ]
+    const form = new Form(field, metadatas)
+
+    const [container, { body, addFilter }] = Utils.loadTemplateWithRefs(`
+      <div>
+        <h3>${translate('Manage field')}</h3>
+        <div data-ref=body></div>
+        <button type="button" data-ref=addFilter hidden><i class="icon icon-16 icon-filters"></i>${translate('Add filter for this field')}</button>
+      </div>
+    `)
+    body.appendChild(form.build())
+    if (this.parent.filters) {
+      addFilter.addEventListener('click', () => {
+        this.dialog.accept()
+        this.parent.filters.createFilterForm(field.key)
+      })
+      addFilter.hidden = false
+    }
+
+    return this.dialog.open({ template: container }).then(() => {
+      if (!this.validateName(field.key, field.key !== name)) {
+        this.pull()
+        return
+      }
+      this.parent.sync.startBatch()
+      const oldFields = Utils.CopyJSON(this.parent.properties.fields)
+      if (!name) {
+        this.add(field)
+      } else if (name !== field.key) {
+        this.clear()
+        // Keep order on rename
+        for (const old of oldFields) {
+          if (old.key === name) {
+            this.add(field)
+          } else {
+            this.add(old)
+          }
+        }
+        this.parent.renameField(name, field.key)
+      } else {
+        this.push()
+      }
+      this.parent.sync.update(
+        'properties.fields',
+        this.parent.properties.fields,
+        oldFields
+      )
+      this.parent.sync.commitBatch()
+      this.parent.render(['properties.fields'])
+    })
+  }
+
+  validateName(name, isNew = false) {
+    if (!name) {
+      Alert.error(translate('Name cannot be empty.'))
+      return false
+    }
+    if (name.includes('.')) {
+      Alert.error(translate('Name “{name}” should not contain a dot.', { name }))
+      return false
+    }
+    if (isNew && this.has(name)) {
+      Alert.error(translate('This name already exists: “{name}”', { name }))
+      return false
+    }
+    return true
+  }
+
+  async confirmDelete(name) {
+    return this.dialog
+      .confirm(translate('Are you sure you want to delete this field on all the data?'))
+      .then(() => {
+        this.parent.sync.startBatch()
+        const oldFields = Utils.CopyJSON(this.parent.properties.fields)
+        this.delete(name)
+        this.push()
+        if (this.parent.filters.has(name)) {
+          this.parent.filters.remove(name)
+        }
+        this.parent.deleteField(name)
+        this.parent.sync.update(
+          'properties.fields',
+          this.parent.properties.fields,
+          oldFields
+        )
+        this.parent.sync.commitBatch()
+      })
+  }
+}

umap/static/umap/js/modules/permissions.js

@@ -3,6 +3,7 @@ import { uMapAlert as Alert } from '../components/alerts/alert.js'
 import { MutatingForm } from './form/builder.js'
 import { translate } from './i18n.js'
 import * as Utils from './utils.js'
+import * as DOMUtils from './domutils.js'
 
 // Dedicated object so we can deal with a separate dirty status, and thus
 // call the endpoint only when needed, saving one call at each save.
@@ -42,12 +43,42 @@ export class MapPermissions {
   }
 
   isAnonymousMap() {
-    return !this._umap.properties.permissions.owner
+    return !this.properties.owner
+  }
+
+  isDraft() {
+    return this.properties.share_status === 0
+  }
+
+  userIsAuth() {
+    return Boolean(this._umap.properties.user?.id)
   }
 
   _editAnonymous(container) {
-    const fields = []
     if (this.isOwner()) {
+      // We have a user, and this user has come through here, so they can edit the map, so let's allow to own the map.
+      // Note: real check is made on the back office anyway.
+      const template = `
+          <div class="anonymous soft-round aplat">
+            <h4><i class="icon icon-16 icon-anonymous"></i> ${translate('Anonymous map')}</h4>
+            <div data-ref="copiableInput"></div>
+            <p data-ref="p" hidden><button type="button" data-ref="button">${translate('Attach the map to my account')}</button></p>
+          </div>
+        `
+      const [root, { button, copiableInput, p }] = Utils.loadTemplateWithRefs(template)
+      container.appendChild(root)
+      if (this.properties.anonymous_edit_url) {
+        DOMUtils.copiableInput(
+          copiableInput,
+          translate('Secret edit link:'),
+          this.properties.anonymous_edit_url
+        )
+      }
+      if (this.userIsAuth()) {
+        button.addEventListener('click', () => this.attach())
+        p.hidden = false
+      }
+      const fields = []
       fields.push([
         'properties.edit_status',
         {
@@ -67,31 +98,6 @@ export class MapPermissions {
       const builder = new MutatingForm(this, fields)
       const form = builder.build()
       container.appendChild(form)
-
-      if (this.properties.anonymous_edit_url) {
-        DomUtil.createCopiableInput(
-          container,
-          translate('Secret edit link:'),
-          this.properties.anonymous_edit_url
-        )
-      }
-
-      if (this._umap.properties.user?.id) {
-        // We have a user, and this user has come through here, so they can edit the map, so let's allow to own the map.
-        // Note: real check is made on the back office anyway.
-        const advancedActions = DomUtil.createFieldset(
-          container,
-          translate('Advanced actions')
-        )
-        const advancedButtons = DomUtil.create('div', 'button-bar', advancedActions)
-        DomUtil.createButton(
-          'button',
-          advancedButtons,
-          translate('Attach the map to my account'),
-          this.attach,
-          this
-        )
-      }
     }
   }
 
@@ -187,6 +193,8 @@ export class MapPermissions {
     const [data, response, error] = await this._umap.server.post(this.getAttachUrl())
     if (!error) {
       this.properties.owner = this._umap.properties.user
+      this._umap.properties.user.is_owner = true
+      this.render()
       Alert.success(translate('Map has been attached to your account'))
       this._umap.editPanel.close()
     }
@@ -238,6 +246,10 @@ export class MapPermissions {
     )
   }
 
+  pull() {
+    this.setProperties(this._umap.properties.permissions)
+  }
+
   getShareStatusDisplay() {
     if (this._umap.properties.share_statuses) {
       return Object.fromEntries(this._umap.properties.share_statuses)[
@@ -245,10 +257,6 @@ export class MapPermissions {
       ]
     }
   }
-
-  isDraft() {
-    return this.properties.share_status === 0
-  }
 }
 
 export class DataLayerPermissions {

umap/static/umap/js/modules/rendering/controls.js

@@ -177,7 +177,7 @@ export const CaptionControl = BaseButton.extend({
     position: 'topleft',
     className: 'umap-control-caption',
     title: translate('About'),
-    icon: 'icon-caption',
+    icon: 'icon-info',
   },
 
   onClick: function () {
@@ -242,13 +242,13 @@ export const SearchControl = BaseButton.extend({
     const [container, { input, resultsContainer }] =
       Utils.loadTemplateWithRefs(template)
     const id = Math.random()
+    this.search = new U.Search(
+      this._umap._leafletMap,
+      input,
+      this.layer,
+      this.photonOptions
+    )
     this._umap.panel.open({ content: container }).then(() => {
-      this.search = new U.Search(
-        this._umap._leafletMap,
-        input,
-        this.layer,
-        this.photonOptions
-      )
       this.search.on('ajax:send', () => {
         this._umap.fire('dataloading', { id: id })
       })

umap/static/umap/js/modules/rendering/icon.js

@@ -1,12 +1,7 @@
-import {
-  DivIcon,
-  DomEvent,
-  DomUtil,
-  Icon,
-  Point,
-} from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { DivIcon, Icon, Point } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { SCHEMA } from '../schema.js'
 import * as Utils from '../utils.js'
+import * as DOMUtils from '../domutils.js'
 
 export function getClass(name) {
   switch (name) {
@@ -299,7 +294,7 @@ export function setContrast(icon, parent, src, bgcolor) {
    */
   if (!icon) return
 
-  if (DomUtil.contrastedColor(parent, bgcolor)) {
+  if (DOMUtils.contrastedColor(parent, bgcolor)) {
     // Decide whether to switch svg to white or not, but do it
     // only for internal SVG, as invert could do weird things
     if (src.endsWith('.svg') && src !== SCHEMA.iconUrl.default) {

umap/static/umap/js/modules/rendering/layers/classified.js

@@ -2,6 +2,7 @@ import colorbrewer from '../../../../vendors/colorbrewer/colorbrewer.js'
 import { DomUtil, FeatureGroup } from '../../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../../i18n.js'
 import * as Utils from '../../utils.js'
+import * as DOMUtils from '../../domutils.js'
 import { CircleMarker } from '../ui.js'
 import { LayerMixin } from './base.js'
 
@@ -76,15 +77,21 @@ const ClassifiedMixin = {
 
   renderLegend: function (container) {
     if (!this.datalayer.isLoaded()) return
-    const parent = DomUtil.create('ul', '', container)
+    const ul = Utils.loadTemplate('<ul></ul>')
     const items = this.getLegendItems()
     for (const [color, label] of items) {
-      const li = DomUtil.create('li', '', parent)
-      const colorEl = DomUtil.create('span', 'datalayer-color', li)
-      colorEl.style.backgroundColor = color
-      const labelEl = DomUtil.create('span', '', li)
-      labelEl.textContent = label
+      const rgbColor = DOMUtils.hexToRGB(color)
+      const opacity = this.datalayer.getOption('fillOpacity')
+      const bgColor = `rgba(${rgbColor.join(',')}, ${opacity})`
+      const li = Utils.loadTemplate(`
+        <li>
+          <span class="datalayer-color" style="background-color: ${bgColor};"></span>
+          <span>${label}</span>
+        </li>
+      `)
+      ul.appendChild(li)
     }
+    container.appendChild(ul)
   },
 
   getColorSchemes: function (classes) {
@@ -198,7 +205,7 @@ export const Choropleth = FeatureGroup.extend({
         'properties.choropleth.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer.fieldKeys,
+          selectOptions: this.datalayer.fields.keys(),
           label: translate('Choropleth property value'),
         },
       ],
@@ -307,7 +314,7 @@ export const Circles = FeatureGroup.extend({
         'properties.circles.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer.fieldKeys,
+          selectOptions: this.datalayer.fields.keys(),
           label: translate('Property name to compute circles'),
         },
       ],
@@ -384,7 +391,7 @@ export const Categorized = FeatureGroup.extend({
 
   _getValue: function (feature) {
     const key =
-      this.datalayer.properties.categorized.property || this.datalayer.fieldKeys[0]
+      this.datalayer.properties.categorized.property || this.datalayer.fields.keys()[0]
     return feature.properties[key]
   },
 
@@ -437,7 +444,7 @@ export const Categorized = FeatureGroup.extend({
         'properties.categorized.property',
         {
           handler: 'Select',
-          selectOptions: this.datalayer.fieldKeys,
+          selectOptions: this.datalayer.fields.keys(),
           label: translate('Category property'),
         },
       ],

umap/static/umap/js/modules/rendering/layers/cluster.js

@@ -5,11 +5,11 @@ import {
   Marker,
   Rectangle,
   Polyline,
-  DomUtil,
   latLngBounds,
 } from '../../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../../i18n.js'
 import * as Utils from '../../utils.js'
+import * as DOMUtils from '../../domutils.js'
 import { Cluster as ClusterIcon } from '../icon.js'
 import { LayerMixin } from './base.js'
 
@@ -21,7 +21,7 @@ const MarkerCluster = Marker.extend({
     const bgColor = this.options.icon.options.color
     const textColor = this.options.icon.options.textColor
     counter.style.color =
-      textColor || DomUtil.TextColorFromBackgroundColor(counter, bgColor)
+      textColor || DOMUtils.textColorFromBackgroundColor(counter, bgColor)
   },
 
   computeCoverage() {
@@ -281,6 +281,8 @@ export const Cluster = FeatureGroup.extend({
   ],
 
   onEdit: function (field, builder) {
-    if (field === 'properties.cluster.radius') this.redraw()
+    if (field === 'properties.cluster.radius' || field === 'properties.color') {
+      this.redraw()
+    }
   },
 })

umap/static/umap/js/modules/rendering/template.js

@@ -6,6 +6,7 @@ import {
 import { getLocale, translate } from '../i18n.js'
 import { Request } from '../request.js'
 import * as Utils from '../utils.js'
+import * as DOMUtils from '../domutils.js'
 import * as Icon from './icon.js'
 
 export default async function loadTemplate(name, feature, container) {
@@ -171,7 +172,7 @@ class OSM extends PopupTemplate {
     const icon = Icon.makeElement(iconUrl, title)
     DomUtil.addClass(icon, 'icon')
     Icon.setContrast(icon, title, iconUrl, color)
-    if (DomUtil.contrastedColor(title, color)) title.style.color = 'white'
+    if (DOMUtils.contrastedColor(title, color)) title.style.color = 'white'
     DomUtil.add('span', '', title, this.getName(feature))
     return title
   }
@@ -180,7 +181,7 @@ class OSM extends PopupTemplate {
     const props = feature.properties
     const locale = getLocale()
     if (locale && props[`name:${locale}`]) return props[`name:${locale}`]
-    return props.name
+    return props.name || feature.getDisplayName()
   }
 
   async renderBody(feature) {
@@ -230,11 +231,31 @@ class OSM extends PopupTemplate {
         )
       )
     }
+    if (props.image) {
+      body.appendChild(
+        Utils.loadTemplate(`<div><img src="${props.image}" alt="" /></div>`)
+      )
+    }
+    if (props.mapillary) {
+      body.appendChild(
+        Utils.loadTemplate(
+          `<div><a href="https://www.mapillary.com/app/?focus=photo&pKey=${props.mapillary}" target="_blank">${translate('Mapillary')}<i class="icon icon-16 icon-external-link"></i></a></div>`
+        )
+      )
+    }
     const wikipedia = props[`wikipedia:${locale}`] || props.wikipedia
     if (wikipedia) {
       body.appendChild(
         Utils.loadTemplate(
-          `<div class="wikipedia-link"><a href="https://wikipedia.org/wiki/${wikipedia}" target="_blank">${translate('Wikipedia')}</a></div>`
+          `<div><a href="https://wikipedia.org/wiki/${wikipedia}" target="_blank">${translate('Wikipedia')}<i class="icon icon-16 icon-external-link"></i></a></div>`
+        )
+      )
+    }
+    const wikidata = props[`wikidata:${locale}`] || props.wikidata
+    if (wikidata) {
+      body.appendChild(
+        Utils.loadTemplate(
+          `<div><a href="https://www.wikidata.org/wiki/${wikidata}" target="_blank">${translate('Wikidata')}<i class="icon icon-16 icon-external-link"></i></a></div>`
         )
       )
     }
@@ -242,7 +263,7 @@ class OSM extends PopupTemplate {
     if (id) {
       body.appendChild(
         Utils.loadTemplate(
-          `<div class="osm-link"><a href="https://www.openstreetmap.org/${id}">${translate('See on OpenStreetMap')}</a></div>`
+          `<div class="osm-link"><a href="https://www.openstreetmap.org/${id}">${translate('See on OpenStreetMap')}<i class="icon icon-16 icon-external-link"></i></a></div>`
         )
       )
     }
@@ -257,7 +278,7 @@ class Wikipedia extends PopupTemplate {
     if (wikipedia && _WIKIPEDIA_CACHE[wikipedia]) return _WIKIPEDIA_CACHE[wikipedia]
     // Wikipedia value should be in form of "{locale}:{title}", according to https://wiki.openstreetmap.org/wiki/Key:wikipedia
     const [locale, page] = wikipedia.split(':')
-    const url = `https://${locale}.wikipedia.org/w/api.php?action=query&format=json&origin=*&pithumbsize=500&prop=extracts|pageimages&titles=${page}`
+    const url = `https://${locale}.wikipedia.org/w/api.php?action=query&format=json&origin=*&pithumbsize=500&exintro=1&prop=extracts|pageimages&titles=${page}`
     const request = new Request()
     const response = await request.get(url)
     if (response?.ok) {
@@ -277,9 +298,21 @@ class Wikipedia extends PopupTemplate {
       const title = page.title || feature.getDisplayName()
       const extract = page.extract || ''
       const thumbnail = page.thumbnail?.source
-      const [content, { image }] = Utils.loadTemplateWithRefs(
-        `<div><h3>${Utils.escapeHTML(title)}</h3><img data-ref="image" hidden src="" />${Utils.escapeHTML(extract)}</div>`
-      )
+      const [content, { image }] = Utils.loadTemplateWithRefs(`
+      <div>
+        <h3>${Utils.escapeHTML(title)}</h3>
+        <img data-ref="image" hidden src="" />
+        <p>
+          ${Utils.escapeHTML(extract)}
+        </p>
+        <p>
+          © ${translate('Wikipedia contributors')} •
+          <a href="https://wikipedia.org/wiki/${wikipedia}" target="_blank">
+            ${translate('See on Wikipedia')}
+            <i class="icon icon-16 icon-external-link"></i>
+          </a>
+        </p>
+      </div>`)
       if (thumbnail) {
         image.src = thumbnail
         image.hidden = false
@@ -349,6 +382,9 @@ class Route extends TitleMixin(PopupTemplate) {
         color: 'orange',
       }).addTo(map)
     })
+    if (feature.properties.description) {
+      root.appendChild(Utils.loadTemplate(`<p>${feature.properties.description}</p>`))
+    }
     return root
   }
 }