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

umap/static/umap/js/modules/data/layer.js

@@ -9,7 +9,7 @@ import {
   uMapAlert as Alert,
   uMapAlertConflict as AlertConflict,
 } from '../../components/alerts/alert.js'
-import { MutatingForm } from '../form/builder.js'
+import { MutatingForm, Form } from '../form/builder.js'
 import { translate } from '../i18n.js'
 import { DataLayerPermissions } from '../permissions.js'
 import { Default as DefaultLayer } from '../rendering/layers/base.js'
@@ -21,8 +21,9 @@ import TableEditor from '../tableeditor.js'
 import * as Utils from '../utils.js'
 import { LineString, Point, Polygon } from './features.js'
 import Rules from '../rules.js'
-import Orderable from '../orderable.js'
 import { FeatureManager } from '../managers.js'
+import { Filters } from '../filters.js'
+import { Fields, getDefaultFields } from './fields.js'
 
 export const LAYER_TYPES = [
   DefaultLayer,
@@ -83,18 +84,18 @@ export class DataLayer {
     }
     this.connectToMap()
     this.permissions = new DataLayerPermissions(this._umap, this)
-    this.rules = new Rules(umap, this)
 
     this._needsFetch = this.createdOnServer || this.isRemoteLayer()
+    if (!this._needsFetch && !this._umap.fields.size) {
+      this.properties.fields = getDefaultFields()
+    }
+    this.fields = new Fields(this, this._umap.dialog)
+    this.filters = new Filters(this, this._umap)
+    this.rules = new Rules(umap, this)
+
     if (!this.createdOnServer) {
       if (this.showAtLoad()) this.show()
     }
-    if (!this._needsFetch && !this._umap.fields.length) {
-      this.properties.fields = [
-        { key: U.DEFAULT_LABEL_KEY, type: 'String' },
-        { key: 'description', type: 'Text' },
-      ]
-    }
 
     // Only layers that are displayed on load must be hidden/shown
     // Automatically, others will be shown manually, and thus will
@@ -129,7 +130,7 @@ export class DataLayer {
   }
 
   get cssId() {
-    return `datalayer-${stamp(this)}`
+    return `datalayer-${this.id}`
   }
 
   get rank() {
@@ -146,19 +147,6 @@ export class DataLayer {
     this.properties.rank = value
   }
 
-  get fields() {
-    if (!this.properties.fields) this.properties.fields = []
-    return this.properties.fields
-  }
-
-  set fields(fields) {
-    this.properties.fields = fields
-  }
-
-  get fieldKeys() {
-    return this.fields.map((field) => field.key)
-  }
-
   get sortKey() {
     return this.getProperty('sortKey') || U.DEFAULT_LABEL_KEY
   }
@@ -174,6 +162,18 @@ export class DataLayer {
     // Propagate will remove the fields it has already
     // processed
     fields = this.propagate(fields)
+    if (fields.includes('properties.fields')) {
+      this.fields?.pull()
+      if (this._umap.browser.isOpen()) {
+        this._umap.browser.buildFilters()
+      }
+    }
+    if (fields.includes('properties.filters')) {
+      this.filters.load()
+      if (this._umap.browser.isOpen()) {
+        this._umap.browser.buildFilters()
+      }
+    }
 
     const impacts = Utils.getImpactsFromSchema(fields)
 
@@ -202,7 +202,7 @@ export class DataLayer {
   }
 
   // This method does a targeted update of the UI,
-  // it whould be merged with `render`` method and the
+  // it would be merged with `render`` method and the
   // SCHEMA at some point
   propagate(fields = []) {
     const impacts = {
@@ -225,27 +225,28 @@ export class DataLayer {
   }
 
   showAtLoad() {
-    return this.autoLoaded && this.showAtZoom()
+    return this.autoVisibility && this.showAtZoom()
   }
 
-  get autoLoaded() {
-    if (this._autoLoaded === undefined) {
+  get autoVisibility() {
+    if (this._autoVisibility === undefined) {
       if (this._umap.datalayersFromQueryString) {
         const datalayerIds = this._umap.datalayersFromQueryString
-        this._autoLoaded = datalayerIds.includes(this.id.toString())
+        this._autoVisibility = datalayerIds.includes(this.id.toString())
         if (this.properties.old_id) {
-          this._autoLoaded =
-            this._autoLoaded || datalayerIds.includes(this.properties.old_id.toString())
+          this._autoVisibility =
+            this._autoVisibility ||
+            datalayerIds.includes(this.properties.old_id.toString())
         }
       } else {
-        this._autoLoaded = this.properties.displayOnLoad
+        this._autoVisibility = this.properties.displayOnLoad
       }
     }
-    return this._autoLoaded
+    return this._autoVisibility
   }
 
-  set autoLoaded(value) {
-    this._autoLoaded = value
+  set autoVisibility(value) {
+    this._autoVisibility = value
   }
 
   insertBefore(other) {
@@ -448,7 +449,8 @@ export class DataLayer {
     this.inferFields(feature)
     try {
       this.showFeature(feature)
-    } catch {
+    } catch (error) {
+      console.error(error)
       if (this._umap.editEnabled) {
         Alert.error(translate('Skipping invalid geometry'))
       }
@@ -482,96 +484,49 @@ export class DataLayer {
   }
 
   inferFields(feature) {
-    if (!this.properties.fields) this.properties.fields = []
-    const keys = this.fieldKeys
     for (const key in feature.properties) {
-      if (typeof feature.properties[key] !== 'object') {
+      if (key && typeof feature.properties[key] !== 'object') {
         if (key.indexOf('_') === 0) continue
-        if (keys.includes(key)) continue
-        this.properties.fields.push({ key, type: 'String' })
+        if (this.fields.has(key)) continue
+        if (this._umap.fields.has(key)) continue
+        let type = 'String'
+        if (key === 'description') type = 'Text'
+        this.fields.add({ key, type })
       }
     }
+    this.fields.push()
   }
 
-  async confirmDeleteProperty(property) {
-    return this._umap.dialog
-      .confirm(
-        translate('Are you sure you want to delete this field on all the features?')
-      )
-      .then(() => {
-        this.deleteProperty(property)
-      })
+  renameField(oldName, newName) {
+    this.renameFeaturesField(oldName, newName)
   }
 
-  async askForRenameProperty(property) {
-    return this._umap.dialog
-      .prompt(translate('Please enter the new name of this field'))
-      .then(({ prompt }) => {
-        if (!prompt || !this.validateName(prompt)) return
-        this.renameProperty(property, prompt)
-      })
-  }
-
-  renameProperty(oldName, newName) {
-    this.sync.startBatch()
-    const oldFields = Utils.CopyJSON(this.fields)
-    for (const field of this.fields) {
-      if (field.key === oldName) {
-        field.key = newName
-        break
-      }
-    }
-    this.sync.update('properties.fields', this.fields, oldFields)
+  renameFeaturesField(oldName, newName) {
     this.features.forEach((feature) => {
-      feature.renameProperty(oldName, newName)
+      feature.renameField(oldName, newName)
     })
-    this.sync.commitBatch()
   }
 
-  deleteProperty(property) {
-    this.sync.startBatch()
-    const oldFields = Utils.CopyJSON(this.fields)
-    this.fields = this.fields.filter((field) => field.key !== property)
-    this.sync.update('properties.fields', this.fields, oldFields)
-    this.features.forEach((feature) => {
-      feature.deleteProperty(property)
-    })
-    this.sync.commitBatch()
+  deleteField(name) {
+    this.deleteFeaturesField(name)
   }
 
-  addProperty() {
-    let resolve = undefined
-    const promise = new Promise((r) => {
-      resolve = r
-    })
-    this._umap.dialog
-      .prompt(translate('Please enter the name of the property'))
-      .then(({ prompt }) => {
-        if (!prompt || !this.validateName(prompt)) return
-        this.properties.fields.push({ key: prompt, type: 'String' })
-        resolve()
+  deleteFeaturesField(name) {
+    if (!this._umap.fields.has(name) && !this.fields.has(name)) {
+      this.features.forEach((feature) => {
+        feature.deleteField(name)
       })
-    return promise
+    }
   }
 
-  validateName(name) {
-    if (name.includes('.')) {
-      Alert.error(translate('Name “{name}” should not contain a dot.', { name }))
-      return false
-    }
-    if (this.fieldKeys.includes(name)) {
-      Alert.error(translate('This name already exists: “{name}”', { name }))
-      return false
-    }
-    return true
+  eachFeature(callback) {
+    this.features.forEach((feature) => callback(feature))
   }
 
-  sortedValues(property) {
-    return this.features
-      .all()
-      .map((feature) => feature.properties[property])
-      .filter((val, idx, arr) => arr.indexOf(val) === idx)
-      .sort(Utils.naturalSort)
+  sortedValues(key) {
+    const field = this.fields.get(key) || this._umap.fields.get(key)
+    if (!field) return []
+    return field.values(this.features.all()).sort(Utils.naturalSort)
   }
 
   addData(geojson, sync) {
@@ -834,7 +789,7 @@ export class DataLayer {
       const builder = new MutatingForm(this, layerFields)
       const template = `
         <details id="layer-properties">
-          <summary>${this.layer.getName()}: ${translate('settings')}</summary>
+          <summary><h4>${this.layer.getName()}: ${translate('settings')}</h4></summary>
           <fieldset data-ref=fieldset></fieldset>
         </details>
       `
@@ -928,64 +883,6 @@ export class DataLayer {
     fieldset.appendChild(builder.build())
   }
 
-  _editFields(container) {
-    const template = `
-      <details id="fields">
-        <summary>${translate('Manage Fields')}</summary>
-        <fieldset>
-          <ul data-ref=ul></ul>
-          <button type="button" data-ref=add><i class="icon icon-16 icon-add"></i>${translate('Add a new field')}</button>
-        </fieldset>
-      </details>
-    `
-    const [fieldset, { ul, add }] = Utils.loadTemplateWithRefs(template)
-    add.addEventListener('click', () => {
-      this.addProperty().then(() => {
-        this.edit().then((panel) => {
-          panel.scrollTo('details#fields')
-        })
-      })
-    })
-    container.appendChild(fieldset)
-    for (const field of this.fields) {
-      const [row, { rename, del }] = Utils.loadTemplateWithRefs(
-        `<li class="orderable" data-key="${field.key}">
-          <button class="icon icon-16 icon-edit" title="${translate('Rename this field')}" data-ref=rename></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>
-          ${field.key}
-        </li>`
-      )
-      ul.appendChild(row)
-      rename.addEventListener('click', () => {
-        this.askForRenameProperty(field.key).then(() => {
-          this.edit().then((panel) => {
-            panel.scrollTo('details#fields')
-          })
-        })
-      })
-      del.addEventListener('click', () => {
-        this.confirmDeleteProperty(field.key).then(() => {
-          this.edit().then((panel) => {
-            panel.scrollTo('details#fields')
-          })
-        })
-      })
-    }
-    const onReorder = (src, dst, initialIndex, finalIndex) => {
-      const orderedKeys = Array.from(ul.querySelectorAll('li')).map(
-        (el) => el.dataset.key
-      )
-      const oldFields = Utils.CopyJSON(this.properties.fields)
-      this.properties.fields.sort(
-        (fieldA, fieldB) =>
-          orderedKeys.indexOf(fieldA.key) > orderedKeys.indexOf(fieldB.key)
-      )
-      this.sync.update('properties.fields', this.properties.fields, oldFields)
-    }
-    const orderable = new Orderable(ul, onReorder)
-  }
-
   _editRemoteDataProperties(container) {
     // XXX I'm not sure **why** this is needed (as it's set during `this.initialize`)
     // but apparently it's needed.
@@ -1096,9 +993,7 @@ export class DataLayer {
     this._editInteractionProperties(container)
     this._editTextPathProperties(container)
     this._editRemoteDataProperties(container)
-    if (!this.isRemoteLayer()) {
-      this._editFields(container)
-    }
+    this.fields.edit(container)
     this.rules.edit(container)
 
     if (this._umap.properties.urls.datalayer_versions) {
@@ -1223,7 +1118,7 @@ export class DataLayer {
     // From now on, do not try to how/hide
     // automatically this layer, as user
     // has taken control on this.
-    this.autoLoaded = false
+    this.autoVisibility = false
     let display = force
     if (force === undefined) {
       if (!this.isVisible()) display = true
@@ -1294,7 +1189,8 @@ export class DataLayer {
   }
 
   umapGeoJSON() {
-    const geojson = this._umap.formatter.toFeatureCollection(this.features.all())
+    const features = this.isRemoteLayer() ? [] : this.features.all()
+    const geojson = this._umap.formatter.toFeatureCollection(features)
     geojson._umap_options = this.properties
     return geojson
   }
@@ -1331,12 +1227,12 @@ export class DataLayer {
   async save() {
     if (this.isDeleted) return await this.saveDelete()
     if (!this.isRemoteLayer() && !this.isLoaded()) return
-    const geojson = this.umapGeoJSON()
     const formData = new FormData()
     formData.append('name', this.properties.name)
     formData.append('display_on_load', !!this.properties.displayOnLoad)
     formData.append('rank', this.rank)
     formData.append('settings', this.prepareProperties())
+    const geojson = this.umapGeoJSON()
     // Filename support is shaky, don't do it for now.
     const blob = new Blob([JSON.stringify(geojson)], { type: 'application/json' })
     formData.append('geojson', blob)
@@ -1438,13 +1334,15 @@ export class DataLayer {
     )) {
       container.innerHTML = ''
       if (this.layer.renderLegend) return this.layer.renderLegend(container)
-      const keys = new Set(this.fieldKeys)
       const rules = new Map()
       for (const rule of this.rules) {
         rules.set(rule.condition, rule)
       }
       for (const rule of this._umap.rules) {
-        if (!rules.has(rule.condition) && keys.has(rule.key)) {
+        if (
+          !rules.has(rule.condition) &&
+          (this.fields.has(rule.field.key) || this._umap.fields.has(rule.field.key))
+        ) {
           rules.set(rule.condition, rule)
         }
       }
@@ -1468,6 +1366,11 @@ export class DataLayer {
       'icon-eye',
       translate('Show/hide layer')
     )
+    const table = DomUtil.createButtonIcon(
+      container,
+      'icon-table show-on-edit',
+      translate('Edit properties in a table')
+    )
     const zoomTo = DomUtil.createButtonIcon(
       container,
       'icon-zoom',
@@ -1478,11 +1381,6 @@ export class DataLayer {
       'icon-edit show-on-edit',
       translate('Edit')
     )
-    const table = DomUtil.createButtonIcon(
-      container,
-      'icon-table show-on-edit',
-      translate('Edit properties in a table')
-    )
     const remove = DomUtil.createButtonIcon(
       container,
       'icon-delete show-on-edit',
@@ -1500,16 +1398,12 @@ export class DataLayer {
     }
     DomEvent.on(toggle, 'click', () => this.toggle())
     DomEvent.on(zoomTo, 'click', this.zoomTo, this)
-    container.classList.add(this.getHidableClass())
+    container.classList.add(this.cssId)
     container.classList.toggle('off', !this.isVisible())
   }
 
   getHidableElements() {
-    return document.querySelectorAll(`.${this.getHidableClass()}`)
-  }
-
-  getHidableClass() {
-    return `show_with_datalayer_${stamp(this)}`
+    return document.querySelectorAll(`.${this.cssId}`)
   }
 
   propagateDelete() {

umap/static/umap/js/modules/domutils.js

@@ -0,0 +1,109 @@
+// Utils that needs the DOM
+import * as Utils from './utils.js'
+import { translate } from './i18n.js'
+import Tooltip from './ui/tooltip.js'
+
+export const copyToClipboard = (textToCopy) => {
+  const tooltip = new Tooltip()
+  // https://stackoverflow.com/a/65996386
+  // Navigator clipboard api needs a secure context (https)
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(textToCopy)
+  } else {
+    // Use the 'out of viewport hidden text area' trick
+    const textArea = document.createElement('textarea')
+    textArea.value = textToCopy
+
+    // Move textarea out of the viewport so it's not visible
+    textArea.style.position = 'absolute'
+    textArea.style.left = '-999999px'
+
+    document.body.prepend(textArea)
+    textArea.select()
+
+    try {
+      document.execCommand('copy')
+    } catch (error) {
+      console.error(error)
+    } finally {
+      textArea.remove()
+    }
+  }
+  tooltip.open({ content: translate('✅ Copied!'), duration: 5000 })
+}
+
+export const copiableInput = (parent, label, value) => {
+  const [container, { input, button }] = Utils.loadTemplateWithRefs(`
+    <div class="copiable-input">
+      <label>${label}<input type="text" readOnly value="${value}" data-ref=input /></label>
+      <button type="button" class="icon icon-24 icon-copy" title="${translate('copy')}" data-ref=button></button>
+    </div>
+  `)
+  button.addEventListener('click', () => copyToClipboard(input.value))
+  parent.appendChild(container)
+  return input
+}
+
+// From https://gist.github.com/Accudio/b9cb16e0e3df858cef0d31e38f1fe46f
+// convert colour in range 0-255 to the modifier used within luminance calculation
+const colourMod = (colour) => {
+  const sRGB = colour / 255
+  let mod = ((sRGB + 0.055) / 1.055) ** 2.4
+  if (sRGB < 0.03928) mod = sRGB / 12.92
+  return mod
+}
+const RGBRegex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/
+
+export const textColorFromBackgroundColor = (el, bgcolor) => {
+  return contrastedColor(el, bgcolor) ? '#ffffff' : '#000000'
+}
+
+const contrastWCAG21 = (rgb) => {
+  const [r, g, b] = rgb
+  // luminance of inputted colour
+  const lum = 0.2126 * colourMod(r) + 0.7152 * colourMod(g) + 0.0722 * colourMod(b)
+  // white has a luminance of 1
+  const whiteLum = 1
+  const contrast = (whiteLum + 0.05) / (lum + 0.05)
+  return contrast > 3 ? 1 : 0
+}
+const colorNameToHex = (str) => {
+  const ctx = document.createElement('canvas').getContext('2d')
+  ctx.fillStyle = str
+  return ctx.fillStyle
+}
+export const hexToRGB = (hex) => {
+  return hex
+    .replace(
+      /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+      (m, r, g, b) => `#${r}${r}${g}${g}${b}${b}`
+    )
+    .substring(1)
+    .match(/.{2}/g)
+    .map((x) => Number.parseInt(x, 16))
+}
+
+const CACHE_CONTRAST = {}
+export const contrastedColor = (el, bgcolor) => {
+  // Return 0 for black and 1 for white
+  // bgcolor is a human color, it can be a any keyword (purple…)
+  if (typeof CACHE_CONTRAST[bgcolor] !== 'undefined') return CACHE_CONTRAST[bgcolor]
+  let rgb = window.getComputedStyle(el).getPropertyValue('background-color')
+  rgb = RGBRegex.exec(rgb)
+  if (rgb && rgb.length === 4) {
+    rgb = [
+      Number.parseInt(rgb[1], 10),
+      Number.parseInt(rgb[2], 10),
+      Number.parseInt(rgb[3], 10),
+    ]
+  } else {
+    // The element may not yet be added to the DOM, so let's try
+    // another way
+    const hex = colorNameToHex(bgcolor)
+    rgb = hexToRGB(hex)
+  }
+  if (!rgb) return 1
+  const out = contrastWCAG21(rgb)
+  if (bgcolor) CACHE_CONTRAST[bgcolor] = out
+  return out
+}