umap-project 2.4.2__py3-none-any.whl → 2.5.1__py3-none-any.whl

umap/static/umap/js/modules/tableeditor.js

@@ -0,0 +1,329 @@
+import { DomEvent, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
+import { translate } from './i18n.js'
+import ContextMenu from './ui/contextmenu.js'
+import { WithTemplate, loadTemplate } from './utils.js'
+
+const TEMPLATE = `
+  <table>
+    <thead>
+      <tr data-ref="header"></tr>
+    </thead>
+    <tbody data-ref="body">
+    </tbody>
+  </table>
+`
+
+export default class TableEditor extends WithTemplate {
+  constructor(datalayer) {
+    super()
+    this.datalayer = datalayer
+    this.map = this.datalayer.map
+    this.contextmenu = new ContextMenu({ className: 'dark' })
+    this.table = this.loadTemplate(TEMPLATE)
+    if (!this.datalayer.isRemoteLayer()) {
+      this.elements.body.addEventListener('dblclick', (event) => {
+        if (event.target.closest('[data-property]')) this.editCell(event.target)
+      })
+    }
+    this.elements.body.addEventListener('click', (event) => this.setFocus(event.target))
+    this.elements.body.addEventListener('keydown', (event) => this.onKeyDown(event))
+    this.elements.header.addEventListener('click', (event) => {
+      const property = event.target.dataset.property
+      if (property) this.openHeaderMenu(property)
+    })
+  }
+
+  openHeaderMenu(property) {
+    const actions = []
+    let filterItem
+    if (this.map.facets.has(property)) {
+      filterItem = {
+        label: translate('Remove filter for this column'),
+        action: () => {
+          this.map.facets.remove(property)
+          this.map.browser.open('filters')
+        },
+      }
+    } else {
+      filterItem = {
+        label: translate('Add filter for this column'),
+        action: () => {
+          this.map.facets.add(property)
+          this.map.browser.open('filters')
+        },
+      }
+    }
+    actions.push(filterItem)
+    if (!this.datalayer.isRemoteLayer()) {
+      actions.push({
+        label: translate('Rename this column'),
+        action: () => this.renameProperty(property),
+      })
+      actions.push({
+        label: translate('Delete this column'),
+        action: () => this.deleteProperty(property),
+      })
+    }
+    this.contextmenu.open([event.clientX, event.clientY], actions)
+  }
+
+  renderHeaders() {
+    this.elements.header.innerHTML = ''
+    const th = loadTemplate('<th><input type="checkbox" /></th>')
+    const checkbox = th.firstChild
+    this.elements.header.appendChild(th)
+    for (const property of this.properties) {
+      this.elements.header.appendChild(
+        loadTemplate(
+          `<th>${property}<button data-property="${property}" class="flat" aria-label="${translate('Advanced actions')}">…</button></th>`
+        )
+      )
+    }
+    checkbox.addEventListener('change', (event) => {
+      if (checkbox.checked) this.checkAll()
+      else this.checkAll(false)
+    })
+  }
+
+  renderBody() {
+    const bounds = this.map.getBounds()
+    const inBbox = this.map.browser.options.inBbox
+    let html = ''
+    for (const feature of Object.values(this.datalayer._layers)) {
+      if (feature.isFiltered()) continue
+      if (inBbox && !feature.isOnScreen(bounds)) continue
+      const tds = this.properties.map(
+        (prop) =>
+          `<td tabindex="0" data-property="${prop}">${feature.properties[prop] || ''}</td>`
+      )
+      html += `<tr data-feature="${feature.id}"><th><input type="checkbox" /></th>${tds.join('')}</tr>`
+    }
+    this.elements.body.innerHTML = html
+  }
+
+  resetProperties() {
+    this.properties = this.datalayer._propertiesIndex
+    if (this.properties.length === 0) {
+      this.properties = ['name', 'description']
+    }
+  }
+
+  validateName(name) {
+    if (name.includes('.')) {
+      U.Alert.error(translate('Name “{name}” should not contain a dot.', { name }))
+      return false
+    }
+    if (this.properties.includes(name)) {
+      U.Alert.error(translate('This name already exists: “{name}”', { name }))
+      return false
+    }
+    return true
+  }
+
+  renameProperty(property) {
+    this.map.dialog
+      .prompt(translate('Please enter the new name of this property'))
+      .then(({ prompt }) => {
+        if (!prompt || !this.validateName(prompt)) return
+        this.datalayer.eachLayer((feature) => {
+          feature.renameProperty(property, prompt)
+        })
+        this.datalayer.deindexProperty(property)
+        this.datalayer.indexProperty(prompt)
+        this.open()
+      })
+  }
+
+  deleteProperty(property) {
+    this.map.dialog
+      .confirm(
+        translate('Are you sure you want to delete this property on all the features?')
+      )
+      .then(() => {
+        this.datalayer.eachLayer((feature) => {
+          feature.deleteProperty(property)
+        })
+        this.datalayer.deindexProperty(property)
+        this.resetProperties()
+        this.open()
+      })
+  }
+
+  addProperty() {
+    this.map.dialog
+      .prompt(translate('Please enter the name of the property'))
+      .then(({ prompt }) => {
+        if (!prompt || !this.validateName(prompt)) return
+        this.datalayer.indexProperty(prompt)
+        this.open()
+      })
+  }
+
+  open() {
+    const id = 'tableeditor:edit'
+    this.resetProperties()
+    this.renderHeaders()
+    this.elements.body.innerHTML = ''
+    this.renderBody()
+
+    const actions = []
+    if (!this.datalayer.isRemoteLayer()) {
+      const addButton = loadTemplate(`
+        <button class="flat" type="button" data-ref="add">
+          <i class="icon icon-16 icon-add"></i>${translate('Add a new property')}
+        </button>`)
+      addButton.addEventListener('click', () => this.addProperty())
+      actions.push(addButton)
+
+      const deleteButton = loadTemplate(`
+        <button class="flat" type="button" data-ref="delete">
+          <i class="icon icon-16 icon-delete"></i>${translate('Delete selected rows')}
+        </button>`)
+      deleteButton.addEventListener('click', () => this.deleteRows())
+      actions.push(deleteButton)
+    }
+
+    const filterButton = loadTemplate(`
+      <button class="flat" type="button" data-ref="filters">
+        <i class="icon icon-16 icon-filters"></i>${translate('Filter data')}
+      </button>`)
+    filterButton.addEventListener('click', () => this.map.browser.open('filters'))
+    actions.push(filterButton)
+
+    this.map.fullPanel.open({
+      content: this.table,
+      className: 'umap-table-editor',
+      actions: actions,
+    })
+  }
+
+  editCell(cell) {
+    if (this.datalayer.isRemoteLayer()) return
+    const property = cell.dataset.property
+    const field = `properties.${property}`
+    const tr = event.target.closest('tr')
+    const feature = this.datalayer.getFeatureById(tr.dataset.feature)
+    const handler = property === 'description' ? 'Textarea' : 'Input'
+    const builder = new U.FormBuilder(feature, [[field, { handler }]], {
+      id: `umap-feature-properties_${L.stamp(feature)}`,
+    })
+    cell.innerHTML = ''
+    cell.appendChild(builder.build())
+    const input = builder.helpers[field].input
+    input.focus()
+    input.addEventListener('blur', () => {
+      cell.innerHTML = feature.properties[property] || ''
+      cell.focus()
+    })
+    input.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        builder.restoreField(field)
+        cell.innerHTML = feature.properties[property] || ''
+        cell.focus()
+        event.stopPropagation()
+      }
+    })
+  }
+
+  onKeyDown(event) {
+    // Only on data <td>, not inputs or anything else
+    if (!event.target.dataset.property) return
+    const key = event.key
+    const actions = {
+      Enter: () => this.editCurrent(),
+      ArrowRight: () => this.moveRight(),
+      ArrowLeft: () => this.moveLeft(),
+      ArrowUp: () => this.moveUp(),
+      ArrowDown: () => this.moveDown(),
+    }
+    if (key in actions) {
+      actions[key]()
+      event.preventDefault()
+    }
+  }
+
+  editCurrent() {
+    const current = this.getFocus()
+    if (current) {
+      this.editCell(current)
+    }
+  }
+
+  moveRight() {
+    const cell = this.getFocus()
+    if (cell.nextSibling) cell.nextSibling.focus()
+  }
+
+  moveLeft() {
+    const cell = this.getFocus()
+    if (cell.previousSibling) cell.previousSibling.focus()
+  }
+
+  moveDown() {
+    const cell = this.getFocus()
+    const tr = cell.closest('tr')
+    const property = cell.dataset.property
+    const nextTr = tr.nextSibling
+    if (nextTr) {
+      nextTr.querySelector(`td[data-property="${property}"`).focus()
+    }
+  }
+
+  moveUp() {
+    const cell = this.getFocus()
+    const tr = cell.closest('tr')
+    const property = cell.dataset.property
+    const previousTr = tr.previousSibling
+    if (previousTr) {
+      previousTr.querySelector(`td[data-property="${property}"`).focus()
+    }
+  }
+
+  checkAll(status = true) {
+    for (const checkbox of this.elements.body.querySelectorAll(
+      'input[type=checkbox]'
+    )) {
+      checkbox.checked = status
+    }
+  }
+
+  getSelectedRows() {
+    return Array.from(
+      this.elements.body.querySelectorAll('input[type=checkbox]:checked')
+    ).map((checkbox) => checkbox.parentNode.parentNode)
+  }
+
+  getFocus() {
+    return this.elements.body.querySelector(':focus')
+  }
+
+  setFocus(cell) {
+    cell.focus({ focusVisible: true })
+  }
+
+  deleteRows() {
+    const selectedRows = this.getSelectedRows()
+    if (!selectedRows.length) return
+    this.map.dialog
+      .confirm(
+        translate('Found {count} rows. Are you sure you want to delete all?', {
+          count: selectedRows.length,
+        })
+      )
+      .then(() => {
+        this.datalayer.hide()
+        for (const row of selectedRows) {
+          const id = row.dataset.feature
+          const feature = this.datalayer.getFeatureById(id)
+          feature.del()
+        }
+        this.datalayer.show()
+        this.datalayer.fire('datachanged')
+        this.renderBody()
+        if (this.map.browser.isOpen()) {
+          this.map.browser.resetFilters()
+          this.map.browser.open('filters')
+        }
+      })
+  }
+}

umap/static/umap/js/modules/ui/base.js

@@ -0,0 +1,93 @@
+export class Positioned {
+  openAt({ anchor, position }) {
+    if (anchor && position === 'top') {
+      this.anchorTop(anchor)
+    } else if (anchor && position === 'left') {
+      this.anchorLeft(anchor)
+    } else if (anchor && position === 'bottom') {
+      this.anchorBottom(anchor)
+    } else {
+      this.anchorAbsolute()
+    }
+  }
+
+  anchorAbsolute() {
+    this.container.className = ''
+    const left =
+      this.parent.offsetLeft +
+      this.parent.clientWidth / 2 -
+      this.container.clientWidth / 2
+    const top = this.parent.offsetTop + 75
+    this.setPosition({ top: top, left: left })
+  }
+
+  anchorTop(el) {
+    this.container.className = 'tooltip-top'
+    const coords = this.getPosition(el)
+    this.setPosition({
+      left: coords.left - 10,
+      bottom: this.getDocHeight() - coords.top + 11,
+    })
+  }
+
+  anchorBottom(el) {
+    this.container.className = 'tooltip-bottom'
+    const coords = this.getPosition(el)
+    this.setPosition({
+      left: coords.left,
+      top: coords.bottom + 11,
+    })
+  }
+
+  anchorLeft(el) {
+    this.container.className = 'tooltip-left'
+    const coords = this.getPosition(el)
+    this.setPosition({
+      top: coords.top,
+      right: document.documentElement.offsetWidth - coords.left + 11,
+    })
+  }
+
+  getPosition(el) {
+    return el.getBoundingClientRect()
+  }
+
+  setPosition(coords) {
+    if (coords.left) this.container.style.left = `${coords.left}px`
+    else this.container.style.left = 'initial'
+    if (coords.right) this.container.style.right = `${coords.right}px`
+    else this.container.style.right = 'initial'
+    if (coords.top) this.container.style.top = `${coords.top}px`
+    else this.container.style.top = 'initial'
+    if (coords.bottom) this.container.style.bottom = `${coords.bottom}px`
+    else this.container.style.bottom = 'initial'
+  }
+
+  computePosition([x, y]) {
+    let left
+    let top
+    if (x < window.innerWidth / 2) {
+      left = x
+    } else {
+      left = x - this.container.offsetWidth
+    }
+    if (y < window.innerHeight / 2) {
+      top = y
+    } else {
+      top = y - this.container.offsetHeight
+    }
+    this.setPosition({ left, top })
+  }
+
+  getDocHeight() {
+    const D = document
+    return Math.max(
+      D.body.scrollHeight,
+      D.documentElement.scrollHeight,
+      D.body.offsetHeight,
+      D.documentElement.offsetHeight,
+      D.body.clientHeight,
+      D.documentElement.clientHeight
+    )
+  }
+}

umap/static/umap/js/modules/ui/contextmenu.js

@@ -0,0 +1,50 @@
+import { loadTemplate } from '../utils.js'
+import { Positioned } from './base.js'
+
+export default class ContextMenu extends Positioned {
+  constructor(options = {}) {
+    super()
+    this.options = options
+    this.container = document.createElement('ul')
+    this.container.className = 'umap-contextmenu'
+    if (options.className) {
+      this.container.classList.add(options.className)
+    }
+    this.container.addEventListener('focusout', (event) => {
+      if (!this.container.contains(event.relatedTarget)) this.close()
+    })
+  }
+
+  open([x, y], items) {
+    this.container.innerHTML = ''
+    for (const item of items) {
+      const li = loadTemplate(
+        `<li class="${item.className || ''}"><button tabindex="0" class="flat">${item.label}</button></li>`
+      )
+      li.addEventListener('click', () => {
+        this.close()
+        item.action()
+      })
+      this.container.appendChild(li)
+    }
+    document.body.appendChild(this.container)
+    this.computePosition([x, y])
+    this.container.querySelector('button').focus()
+    this.container.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        event.stopPropagation()
+        this.close()
+      }
+    })
+  }
+
+  close() {
+    try {
+      this.container.remove()
+    } catch {
+      // Race condition in Chrome: the focusout close has "half" removed the node
+      // So it's still visible in the DOM, but we calling .remove on it (or parentNode.removeChild)
+      // will crash.
+    }
+  }
+}

umap/static/umap/js/modules/ui/dialog.js

@@ -1,23 +1,98 @@
-import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
+import { WithTemplate } from '../utils.js'
 
-export default class Dialog {
-  constructor(parent) {
-    this.parent = parent
-    this.className = 'umap-dialog window'
-    this.container = DomUtil.create('dialog', this.className, this.parent)
-    DomEvent.disableClickPropagation(this.container)
-    DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
-    DomEvent.on(this.container, 'wheel', DomEvent.stopPropagation)
-    DomEvent.on(this.container, 'MozMousePixelScroll', DomEvent.stopPropagation)
+const TEMPLATE = `
+  <dialog data-ref="dialog">
+    <form method="dialog" data-ref="form">
+      <ul class="buttons">
+        <li><i class="icon icon-16 icon-close" data-close></i></li>
+      </ul>
+      <h3 data-ref="message" id="${Math.round(Date.now()).toString(36)}"></h3>
+      <fieldset data-ref="fieldset" role="document">
+        <div data-ref="template"></div>
+      </fieldset>
+      <menu>
+        <button type="button" data-ref="cancel" data-close value="cancel"></button>
+        <button type="submit" class="button" data-ref="accept" value="accept"></button>
+      </menu>
+    </form>
+  </dialog>
+`
+
+// From https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/
+export default class Dialog extends WithTemplate {
+  constructor(settings = {}) {
+    super()
+    this.settings = Object.assign(
+      {
+        accept: translate('OK'),
+        cancel: translate('Cancel'),
+        className: '',
+        message: '',
+        template: '',
+      },
+      settings
+    )
+    this.init()
   }
 
-  get visible() {
-    return this.container.open
+  collectFormData(formData) {
+    const object = {}
+    formData.forEach((value, key) => {
+      if (!Reflect.has(object, key)) {
+        object[key] = value
+        return
+      }
+      if (!Array.isArray(object[key])) {
+        object[key] = [object[key]]
+      }
+      object[key].push(value)
+    })
+    return object
   }
 
-  close() {
-    this.container.close()
+  getFocusable() {
+    return [
+      ...this.dialog.querySelectorAll(
+        'button,[href],select,textarea,input:not([type="hidden"]),[tabindex]:not([tabindex="-1"])'
+      ),
+    ]
+  }
+
+  init() {
+    this.dialogSupported = typeof HTMLDialogElement === 'function'
+    this.dialog = this.loadTemplate(TEMPLATE)
+    this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog'
+    document.body.appendChild(this.dialog)
+
+    this.focusable = []
+
+    this.dialog.setAttribute('aria-labelledby', this.elements.message.id)
+    this.dialog.addEventListener('click', (event) => {
+      if (event.target.closest('[data-close]')) {
+        this.close()
+      }
+    })
+    if (!this.dialogSupported) {
+      this.elements.form.addEventListener('submit', (event) => {
+        event.preventDefault()
+        this.dialog.returnValue = 'accept'
+        this.close()
+        this.dialog.returnValue = undefined
+      })
+    }
+    this.dialog.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        if (!this.dialogSupported) {
+          e.preventDefault()
+          this.elements.form.requestSubmit()
+        }
+      }
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        this.close()
+      }
+    })
   }
 
   currentZIndex() {
@@ -28,25 +103,88 @@ export default class Dialog {
     )
   }
 
-  open({ className, content, modal } = {}) {
-    this.container.innerHTML = ''
+  open(settings = {}) {
+    const dialog = Object.assign({}, this.settings, settings)
+    this.dialog.className = 'umap-dialog window'
+    if (dialog.className) {
+      this.dialog.classList.add(...dialog.className.split(' '))
+    }
+    this.elements.accept.textContent = dialog.accept
+    this.elements.accept.hidden = !dialog.accept
+    this.elements.cancel.textContent = dialog.cancel
+    this.elements.cancel.hidden = !dialog.cancel
+    this.elements.message.textContent = dialog.message
+    this.elements.message.hidden = !dialog.message
+    this.elements.target = dialog.target || ''
+    this.elements.template.innerHTML = ''
+    if (dialog.template?.nodeType === 1) {
+      this.elements.template.appendChild(dialog.template)
+    } else {
+      this.elements.template.innerHTML = dialog.template || ''
+    }
+
+    this.focusable = this.getFocusable()
+    this.hasFormData = this.elements.fieldset.elements.length > 0
+
     const currentZIndex = this.currentZIndex()
-    if (currentZIndex) this.container.style.zIndex = currentZIndex + 1
-    if (modal) this.container.showModal()
-    else this.container.show()
-    if (className) {
-      // Reset
-      this.container.className = this.className
-      this.container.classList.add(...className.split(' '))
+    if (currentZIndex) this.dialog.style.zIndex = currentZIndex + 1
+
+    this.toggle(true)
+
+    if (this.hasFormData) this.focusable[0].focus()
+    else this.elements.accept.focus()
+
+    return this.waitForUser()
+  }
+
+  close() {
+    this.toggle(false)
+  }
+
+  toggle(open = false) {
+    if (this.dialogSupported) {
+      if (open) this.dialog.show()
+      else this.dialog.close()
+    } else {
+      this.dialog.hidden = !open
+      if (this.elements.target && !open) {
+        this.elements.target.focus()
+      }
+      if (!open) {
+        this.dialog.dispatchEvent(new CustomEvent('close'))
+      }
     }
-    const buttonsContainer = DomUtil.create('ul', 'buttons', this.container)
-    const closeButton = DomUtil.createButtonIcon(
-      DomUtil.create('li', '', buttonsContainer),
-      'icon-close',
-      translate('Close')
+  }
+
+  waitForUser() {
+    return new Promise((resolve) => {
+      this.dialog.addEventListener(
+        'close',
+        (event) => {
+          if (this.dialog.returnValue === 'accept') {
+            const value = this.hasFormData
+              ? this.collectFormData(new FormData(this.elements.form))
+              : true
+            resolve(value)
+          }
+        },
+        { once: true }
+      )
+    })
+  }
+
+  alert(config) {
+    return this.open(
+      Object.assign({}, config, { cancel: false, message, template: false })
     )
-    DomEvent.on(closeButton, 'click', this.close, this)
-    this.container.appendChild(buttonsContainer)
-    this.container.appendChild(content)
+  }
+
+  confirm(message, config = {}) {
+    return this.open(Object.assign({}, config, { message, template: false }))
+  }
+
+  prompt(message, fallback = '', config = {}) {
+    const template = `<input type="text" name="prompt" value="${fallback}">`
+    return this.open(Object.assign({}, config, { message, template }))
   }
 }