umap-project 2.7.0b2__py3-none-any.whl → 2.7.1__py3-none-any.whl

umap/static/umap/img/source/24-white.svg

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
-<svg width="252" height="252" viewBox="0 0 66.674992 66.674992" version="1.1" id="svg2876" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" sodipodi:docname="24-white.svg" inkscape:export-filename="../24-white.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview id="namedview2878" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="2.6753614" inkscape:cx="107.64901" inkscape:cy="85.409023" inkscape:window-width="960" inkscape:window-height="1011" inkscape:window-x="20" inkscape:window-y="20" inkscape:window-maximized="0" inkscape:current-layer="layer1">
+<svg width="252" height="252" viewBox="0 0 66.674992 66.674992" version="1.1" id="svg2876" inkscape:version="1.4 (e7c3feb100, 2024-10-09)" sodipodi:docname="24-white.svg" inkscape:export-filename="../24-white.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview id="namedview2878" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="5.3566812" inkscape:cx="50.030978" inkscape:cy="170.06799" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer1">
     <inkscape:grid type="xygrid" id="grid2997" empspacing="6" originx="0" originy="0" spacingy="0.2645833" spacingx="0.2645833" units="px" visible="true" />
     <inkscape:grid id="grid1" units="px" originx="0" originy="0" spacingx="9.5249989" spacingy="9.5249989" empcolor="#3f3fff" empopacity="0.25098039" color="#3f3fff" opacity="0.1254902" empspacing="1" dotted="false" gridanglex="30" gridanglez="30" visible="true" />
   </sodipodi:namedview>
@@ -74,5 +74,6 @@
     <g id="info" transform="matrix(0.33072916,0,0,0.33072916,-11.906249,-256.10415)" style="stroke-width:0.8">
       <path id="path3762" style="fill:#f2f2f2;fill-opacity:1;stroke:#999999;stroke-width:0.2;stroke-dasharray:none;stroke-opacity:1" d="m 107.99999,838.36217 a 8,8 0 0 0 -7.999998,8 8,8 0 0 0 7.999998,8 8,8 0 0 0 8,-8 8,8 0 0 0 -8,-8 z m 0,2.5 a 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -1.5,1.5 1.5,1.5 0 0 1 -1.5,-1.5 1.5,1.5 0 0 1 1.5,-1.5 z m -1,4.5 h 2 v 6 h -2 z" />
     </g>
+    <path d="m 5.6444435,59.43432 v 1.034991 h 1.0541546 z m 1.1759257,1.612262 h -1.1759257 c -0.3247228,0 -0.5879626,-0.258453 -0.5879626,-0.577271 v -1.154545 h -2.3518514 v 5.195451 h 4.1157397 z m -4.1157397,-2.309089 h 3.0615854 l 1.6421175,1.612259 v 4.160465 c 0,0.318822 -0.2632403,0.577275 -0.5879632,0.577275 h -4.1157397 c -0.3247231,0 -0.5879631,-0.258453 -0.5879631,-0.577275 v -5.195451 c 0,-0.31882 0.26324,-0.577273 0.5879631,-0.577273 z m 1.7638882,3.92135 v -1.323625 h 0.5879632 v 1.323625 l 0.3800861,-0.373177 0.415753,0.408196 -1.0898206,1.070004 -1.0898208,-1.070004 0.4157526,-0.408196 z" fill-rule="evenodd" id="downloadfile" style="fill:#f2f2f2;fill-opacity:1;stroke-width:0.06614583;stroke:#999999;stroke-opacity:0.50980395;stroke-dasharray:none" />
   </g>
 </svg>

umap/static/umap/img/source/24.svg

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
-<svg width="252" height="252" viewBox="0 0 66.674999 66.674999" version="1.1" id="svg6237" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" sodipodi:docname="24.svg" inkscape:export-filename="../24.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview id="namedview6239" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="3.1596124" inkscape:cx="117.10297" inkscape:cy="106.50041" inkscape:window-width="960" inkscape:window-height="1011" inkscape:window-x="20" inkscape:window-y="20" inkscape:window-maximized="0" inkscape:current-layer="layer1">
+<svg width="252" height="252" viewBox="0 0 66.674999 66.674999" version="1.1" id="svg6237" inkscape:version="1.4 (e7c3feb100, 2024-10-09)" sodipodi:docname="24.svg" inkscape:export-filename="../24.svg" inkscape:export-xdpi="7.52" inkscape:export-ydpi="7.52" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview id="namedview6239" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" showgrid="true" showguides="true" inkscape:zoom="3.1596124" inkscape:cx="118.68544" inkscape:cy="166.47612" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer1">
     <inkscape:grid type="xygrid" id="grid6358" empspacing="6" originx="0" originy="0" spacingy="0.26458333" spacingx="0.26458333" units="px" visible="true" />
     <inkscape:grid id="grid1" units="px" originx="0" originy="0" spacingx="9.5249999" spacingy="9.5249999" empcolor="#3f3fff" empopacity="0.25098039" color="#ff0000" opacity="0.83529412" empspacing="0" dotted="false" gridanglex="30" gridanglez="30" visible="true" />
   </sodipodi:namedview>
@@ -98,5 +98,6 @@
     <g id="info" transform="matrix(0.33072916,0,0,0.33072916,-11.90625,-256.10415)" style="fill:#4d4d4d;fill-opacity:1;stroke-width:0.8">
       <path id="path3762" style="fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.8" d="m 108,838.36217 a 8,8 0 0 0 -8,8 8,8 0 0 0 8,8 8,8 0 0 0 8,-8 8,8 0 0 0 -8,-8 z m 0,2.5 a 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -1.5,1.5 1.5,1.5 0 0 1 -1.5,-1.5 1.5,1.5 0 0 1 1.5,-1.5 z m -1,4.5 h 2 v 6 h -2 z" />
     </g>
+    <path d="m 5.6444435,59.43432 v 1.034991 h 1.0541546 z m 1.1759257,1.612262 h -1.1759257 c -0.3247228,0 -0.5879626,-0.258453 -0.5879626,-0.577271 v -1.154545 h -2.3518514 v 5.195451 h 4.1157397 z m -4.1157397,-2.309089 h 3.0615854 l 1.6421175,1.612259 v 4.160465 c 0,0.318822 -0.2632403,0.577275 -0.5879632,0.577275 h -4.1157397 c -0.3247231,0 -0.5879631,-0.258453 -0.5879631,-0.577275 v -5.195451 c 0,-0.31882 0.26324,-0.577273 0.5879631,-0.577273 z m 1.7638882,3.92135 v -1.323625 h 0.5879632 v 1.323625 l 0.3800861,-0.373177 0.415753,0.408196 -1.0898206,1.070004 -1.0898208,-1.070004 0.4157526,-0.408196 z" fill-rule="evenodd" id="downloadfile" style="fill:#464646;fill-opacity:1;stroke-width:0.192424" />
   </g>
 </svg>

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

@@ -1,6 +1,9 @@
 import { DomEvent, DomUtil, stamp } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from './i18n.js'
 import * as Icon from './rendering/icon.js'
+import * as Utils from './utils.js'
+import { EXPORT_FORMATS } from './formatter.js'
+import ContextMenu from './ui/contextmenu.js'
 
 export default class Browser {
   constructor(map) {
@@ -98,6 +101,7 @@ export default class Browser {
     datalayer.eachFeature((feature) => this.addFeature(feature, container))
 
     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)
@@ -164,6 +168,7 @@ export default class Browser {
     })
     this.filtersTitle = container.querySelector('summary')
     this.toggleBadge()
+    this.addMainToolbox(container)
     this.dataContainer = DomUtil.create('div', '', container)
 
     let fields = [
@@ -215,6 +220,48 @@ 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.map.fitDataBounds())
+    download.addEventListener('click', () => this.downloadVisible(download))
+  }
+
+  downloadVisible(element) {
+    const menu = new ContextMenu({ fixed: true })
+    const items = []
+    for (const format of Object.keys(EXPORT_FORMATS)) {
+      items.push({
+        label: format,
+        action: () => this.map.share.download(format),
+      })
+    }
+    menu.openBelow(element, items)
+  }
+
+  toggleLayers() {
+    // If at least one layer is shown, hide it
+    // otherwise show all
+    let allHidden = true
+    this.map.eachBrowsableDataLayer((datalayer) => {
+      if (datalayer.isVisible()) allHidden = false
+    })
+    this.map.eachBrowsableDataLayer((datalayer) => {
+      if (allHidden) {
+        datalayer.show()
+      } else {
+        if (datalayer.isVisible()) datalayer.hide()
+      }
+    })
+  }
+
   static backButton(map) {
     const button = DomUtil.createButtonIcon(
       DomUtil.create('li', '', undefined),

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

@@ -40,15 +40,21 @@ export default class Caption {
     )
     const creditsContainer = DomUtil.create('div', 'credits-container', container)
     this.addCredits(creditsContainer)
-    this.map.panel.open({ content: container })
+    this.map.panel.open({ content: container }).then(() => {
+      // Create the legend when the panel is actually on the DOM
+      this.map.eachDataLayerReverse((datalayer) => datalayer.renderLegend())
+    })
   }
 
   addDataLayer(datalayer, container) {
     if (!datalayer.options.inCaption) return
-    const p = DomUtil.create('p', 'datalayer-legend', container)
-    const legend = DomUtil.create('span', '', p)
+    const p = DomUtil.create(
+      'p',
+      `caption-item ${datalayer.cssId}`,
+      container
+    )
+    const legend = DomUtil.create('span', 'datalayer-legend', p)
     const headline = DomUtil.create('strong', '', p)
-    datalayer.renderLegend(legend)
     if (datalayer.options.description) {
       DomUtil.element({
         tagName: 'span',

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

@@ -115,6 +115,10 @@ export class DataLayer {
     return this._isDeleted
   }
 
+  get cssId() {
+    return `datalayer-${stamp(this)}`
+  }
+
   getSyncMetadata() {
     return {
       subject: 'datalayer',
@@ -235,6 +239,7 @@ export class DataLayer {
   }
 
   dataChanged() {
+    if (!this.hasDataLoaded()) return
     this.map.onDataLayersChanged()
     this.layer.dataChanged()
   }
@@ -242,10 +247,15 @@ export class DataLayer {
   fromGeoJSON(geojson, sync = true) {
     this.addData(geojson, sync)
     this._geojson = geojson
-    this._dataloaded = true
+    this.onDataLoaded()
     this.dataChanged()
   }
 
+  onDataLoaded() {
+    this._dataloaded = true
+    this.renderLegend()
+  }
+
   async fromUmapGeoJSON(geojson) {
     if (geojson._storage) geojson._umap_options = geojson._storage // Retrocompat
     if (geojson._umap_options) this.setOptions(geojson._umap_options)
@@ -384,7 +394,7 @@ export class DataLayer {
     this.indexProperties(feature)
     this.map.features_index[feature.getSlug()] = feature
     this.showFeature(feature)
-    if (this.hasDataLoaded()) this.dataChanged()
+    this.dataChanged()
   }
 
   removeFeature(feature, sync) {
@@ -395,7 +405,7 @@ export class DataLayer {
     feature.disconnectFromDataLayer(this)
     this._index.splice(this._index.indexOf(id), 1)
     delete this._features[id]
-    if (this.hasDataLoaded() && this.isVisible()) this.dataChanged()
+    if (this.isVisible()) this.dataChanged()
   }
 
   indexProperties(feature) {
@@ -802,13 +812,12 @@ export class DataLayer {
       this
     )
     if (this.umap_id) {
-      const download = DomUtil.createLink(
-        'button umap-download',
-        advancedButtons,
-        translate('Download'),
-        this._dataUrl(),
-        '_blank'
-      )
+      const filename = `${Utils.slugify(this.options.name)}.geojson`
+      const download = Utils.loadTemplate(`
+        <a class="button" href="${this._dataUrl()}" download="${filename}">
+          <i class="icon icon-24 icon-download"></i>${translate('Download')}
+        </a>`)
+      advancedButtons.appendChild(download)
     }
     const backButton = DomUtil.createButtonIcon(
       undefined,
@@ -1120,10 +1129,13 @@ export class DataLayer {
     return 'displayName'
   }
 
-  renderLegend(container) {
-    if (this.layer.renderLegend) return this.layer.renderLegend(container)
-    const color = DomUtil.create('span', 'datalayer-color', container)
-    color.style.backgroundColor = this.getColor()
+  renderLegend() {
+    for (const container of document.querySelectorAll(`.${this.cssId} .datalayer-legend`)) {
+      container.innerHTML = ''
+      if (this.layer.renderLegend) return this.layer.renderLegend(container)
+      const color = DomUtil.create('span', 'datalayer-color', container)
+      color.style.backgroundColor = this.getColor()
+    }
   }
 
   renderToolbox(container) {

umap/static/umap/js/modules/importer.js

@@ -69,6 +69,9 @@ export default class Importer {
         case 'communesfr':
           import('./importers/communesfr.js').then(register)
           break
+        case 'cadastrefr':
+          import('./importers/cadastrefr.js').then(register)
+          break
         case 'overpass':
           import('./importers/overpass.js').then(register)
           break

umap/static/umap/js/modules/importers/cadastrefr.js

@@ -0,0 +1,62 @@
+import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { BaseAjax, SingleMixin } from '../autocomplete.js'
+import * as Util from '../utils.js'
+import { AutocompleteCommunes } from './communesfr.js'
+
+const TEMPLATE = `
+  <h3>Cadastre</h3>
+  <p>Importer les données cadastrales d’une commune française.</p>
+  <select name="theme">
+    <option value="batiments">Bâtiments</option>
+    <option value="communes">Communes</option>
+    <option value="feuilles">Feuilles</option>
+    <option value="lieux_dits">Lieux dits</option>
+    <option value="parcelles" selected>Parcelles</option>
+    <option value="prefixes_sections">Préfixes sections</option>
+    <option value="sections">Sections</option>
+    <option value="subdivisions_fiscales">Subdivisions fiscales</option>
+  </select>
+  <label id="boundary">
+  </label>
+`
+
+export class Importer {
+  constructor(map, options) {
+    this.name = options.name || 'Cadastre'
+    this.id = 'cadastrefr'
+  }
+
+  async open(importer) {
+    let boundary = null
+    let boundaryName = null
+    const container = DomUtil.create('div')
+    container.innerHTML = TEMPLATE
+    const select = container.querySelector('select')
+    const options = {
+      placeholder: 'Nom ou code INSEE…',
+      url: 'https://geo.api.gouv.fr/communes?nom={q}&limit=5',
+      on_select: (choice) => {
+        boundary = choice.item.value
+        boundaryName = choice.item.label
+      },
+    }
+    this.autocomplete = new AutocompleteCommunes(container, options)
+
+    const confirm = (form) => {
+      if (!boundary || !form.theme) {
+        Alert.error(translate('Please choose a theme and a boundary first.'))
+        return
+      }
+      importer.url = `https://cadastre.data.gouv.fr/bundler/cadastre-etalab/communes/${boundary}/geojson/${form.theme}`
+      importer.format = 'geojson'
+      importer.layerName = `${boundaryName} — ${select.options[select.selectedIndex].textContent}`
+    }
+
+    importer.dialog
+      .open({
+        template: container,
+        className: `${this.id} importer dark`,
+      })
+      .then(confirm)
+  }
+}

umap/static/umap/js/modules/importers/communesfr.js

@@ -2,7 +2,7 @@ import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { BaseAjax, SingleMixin } from '../autocomplete.js'
 import * as Util from '../utils.js'
 
-class Autocomplete extends SingleMixin(BaseAjax) {
+export class AutocompleteCommunes extends SingleMixin(BaseAjax) {
   createResult(item) {
     return super.createResult({
       value: item.code,
@@ -46,7 +46,7 @@ export class Importer {
         importer.dialog.close()
       },
     }
-    this.autocomplete = new Autocomplete(container, options)
+    this.autocomplete = new AutocompleteCommunes(container, options)
 
     importer.dialog.open({
       template: container,

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

@@ -3,6 +3,7 @@ import { translate } from '../../i18n.js'
 import { LayerMixin } from './base.js'
 import * as Utils from '../../utils.js'
 import { CircleMarker } from '../ui.js'
+import colorbrewer from '../../../../vendors/colorbrewer/colorbrewer.js'
 
 // Layer where each feature color is relative to the others,
 // so we need all features before behing able to set one
@@ -74,6 +75,7 @@ const ClassifiedMixin = {
   },
 
   renderLegend: function (container) {
+    if (!this.datalayer.hasDataLoaded()) return
     const parent = DomUtil.create('ul', '', container)
     const items = this.getLegendItems()
     for (const [color, label] of items) {

umap/static/umap/js/modules/rendering/ui.js

@@ -32,10 +32,18 @@ const FeatureMixin = {
     if (map.editedFeature === this.feature) {
       this.feature._marked_for_deletion = true
       this.feature.endEdit()
-      map.editPanel.close()
+      if (map.editedFeature === this.feature) {
+        map.editPanel.close()
+      }
     }
   },
 
+  _removeIcon: function () {
+    // It may not be in the DOM, and Leaflet does not deal with this
+    // situation
+    if (this._icon) Marker.prototype._removeIcon.call(this)
+  },
+
   addInteractions: function () {
     this.on('contextmenu editable:vertex:contextmenu', this.onContextMenu)
     this.on('click', this.onClick)
@@ -86,8 +94,9 @@ const FeatureMixin = {
 
   onContextMenu: function (event) {
     DomEvent.stop(event)
-    const items = this._map.getContextMenuItems(event)
-    items.push('-', ...this.feature.getContextMenuItems(event))
+    const items = this.feature
+      .getContextMenuItems(event)
+      .concat(this._map.getContextMenuItems(event))
     this._map.contextmenu.open(event.originalEvent, items)
   },
 
@@ -160,6 +169,12 @@ export const LeafletMarker = Marker.extend({
     return this.setLatLng(latlng)
   },
 
+  getEvents: function () {
+    const events = Marker.prototype.getEvents.call(this)
+    events.moveend = this.onMoveEnd
+    return events
+  },
+
   addInteractions() {
     PointMixin.addInteractions.call(this)
     this._popupHandlersAdded = true // prevent Leaflet from binding event on bindPopup
@@ -167,7 +182,19 @@ export const LeafletMarker = Marker.extend({
     this.on('popupclose', this.resetHighlight)
   },
 
+  onMoveEnd: function () {
+    this._initIcon()
+    this.update()
+  },
+
   _initIcon: function () {
+    if (!this._map.getBounds().contains(this.getCenter())) {
+      if (this._icon) this._removeIcon()
+      if (this._tooltip && this.isTooltipOpen()) {
+        this.unbindTooltip()
+      }
+      return
+    }
     this.options.icon = this.getIcon()
     Marker.prototype._initIcon.call(this)
     // Allow to run code when icon is actually part of the DOM

umap/static/umap/js/modules/share.js

@@ -142,9 +142,7 @@ export default class Share {
   async format(mode) {
     const type = EXPORT_FORMATS[mode]
     const content = await type.formatter(this.map)
-    let name = this.map.options.name || 'data'
-    name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
-    const filename = name + type.ext
+    const filename = Utils.slugify(this.map.options.name) + type.ext
     return { content, filetype: type.filetype, filename }
   }
 

umap/static/umap/js/modules/slideshow.js

@@ -1,5 +1,5 @@
-import { WithTemplate } from './utils.js'
 import { translate } from './i18n.js'
+import { WithTemplate } from './utils.js'
 
 const TOOLBOX_TEMPLATE = `
   <ul class="umap-slideshow-toolbox dark">

umap/static/umap/js/modules/sync/engine.js

@@ -1,7 +1,7 @@
+import * as Utils from '../utils.js'
+import { HybridLogicalClock } from './hlc.js'
 import { DataLayerUpdater, FeatureUpdater, MapUpdater } from './updaters.js'
 import { WebSocketTransport } from './websocket.js'
-import { HybridLogicalClock } from './hlc.js'
-import * as Utils from '../utils.js'
 
 /**
  * The syncEngine exposes an API to sync messages between peers over the network.
@@ -81,7 +81,7 @@ export class SyncEngine {
   }
 
   _send(inputMessage) {
-    let message = this._operations.addLocal(inputMessage)
+    const message = this._operations.addLocal(inputMessage)
 
     if (this.offline) return
     if (this.transport) {
@@ -101,6 +101,11 @@ export class SyncEngine {
     updater.applyMessage(operation)
   }
 
+  getNumberOfConnectedPeers() {
+    if (this.peers) return this.peers.length
+    return 0
+  }
+
   /**
    * This is called by the transport layer on new messages,
    * and dispatches the different "on*" methods.
@@ -146,10 +151,10 @@ export class SyncEngine {
   onJoinResponse({ uuid, peers }) {
     debug('received join response', { uuid, peers })
     this.uuid = uuid
-    this.peers = peers
+    this.onListPeersResponse({ peers })
 
     // Get one peer at random
-    let randomPeer = this._getRandomPeer()
+    const randomPeer = this._getRandomPeer()
 
     if (randomPeer) {
       // Retrieve the operations which happened before join.
@@ -168,6 +173,7 @@ export class SyncEngine {
   onListPeersResponse({ peers }) {
     debug('received peerinfo', { peers })
     this.peers = peers
+    this.updaters.map.update({ key: 'numberOfConnectedPeers' })
   }
 
   /**
@@ -248,7 +254,7 @@ export class SyncEngine {
    * @returns {string|bool} the selected peer uuid, or False if none was found.
    */
   _getRandomPeer() {
-    let otherPeers = this.peers.filter((p) => p !== this.uuid)
+    const otherPeers = this.peers.filter((p) => p !== this.uuid)
     if (otherPeers.length > 0) {
       const random = Math.floor(Math.random() * otherPeers.length)
       return otherPeers[random]
@@ -302,7 +308,7 @@ export class Operations {
    * @returns {*} clock-aware message
    */
   addLocal(inputMessage) {
-    let message = { ...inputMessage, hlc: this._hlc.tick() }
+    const message = { ...inputMessage, hlc: this._hlc.tick() }
     this._operations.push(message)
     return message
   }
@@ -342,7 +348,7 @@ export class Operations {
    */
   storeRemoteOperations(remoteOperations) {
     // get the highest date from the passed operations
-    let greatestHLC = remoteOperations
+    const greatestHLC = remoteOperations
       .map((op) => op.hlc)
       .reduce((max, current) => (current > max ? current : max))
 

umap/static/umap/js/modules/sync/hlc.js

@@ -30,12 +30,12 @@ export class HybridLogicalClock {
    * @returns object
    */
   parse(raw) {
-    let tokens = raw.split(':')
+    const tokens = raw.split(':')
 
     if (tokens.length !== 3) {
       throw new SyntaxError(`Unable to parse ${raw}`)
     }
-    let [walltime, rawNN, id] = tokens
+    const [walltime, rawNN, id] = tokens
 
     let nn = Number.parseInt(rawNN)
     if (Number.isNaN(nn)) {
@@ -92,7 +92,7 @@ export class HybridLogicalClock {
     if (now > local.walltime && now > remote.walltime) {
       nextValue = { ...local, walltime: now }
     } else if (local.walltime == remote.walltime) {
-      let nn = Math.max(local.nn, remote.nn) + 1
+      const nn = Math.max(local.nn, remote.nn) + 1
       nextValue = { ...local, nn: nn }
     } else if (remote.walltime > local.walltime) {
       nextValue = { ...remote, id: local.id, nn: remote.nn + 1 }

umap/static/umap/js/modules/sync/updaters.js

@@ -1,3 +1,5 @@
+import { fieldInSchema } from '../utils.js'
+
 /**
  * Updaters are classes able to convert messages
  * received from other peers (or from the server) to changes on the map.
@@ -42,7 +44,10 @@ class BaseUpdater {
 
 export class MapUpdater extends BaseUpdater {
   update({ key, value }) {
-    this.updateObjectValue(this.map, key, value)
+    if (fieldInSchema(key)) {
+      this.updateObjectValue(this.map, key, value)
+    }
+
     this.map.render([key])
   }
 }
@@ -56,7 +61,14 @@ export class DataLayerUpdater extends BaseUpdater {
 
   update({ key, metadata, value }) {
     const datalayer = this.getDataLayerFromID(metadata.id)
-    this.updateObjectValue(datalayer, key, value)
+    if (fieldInSchema(key)) {
+      this.updateObjectValue(datalayer, key, value)
+    } else {
+      console.debug(
+        'Not applying update for datalayer because key is not in the schema',
+        key
+      )
+    }
     datalayer.render([key])
   }
 }

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

@@ -21,6 +21,11 @@ export default class ContextMenu extends Positioned {
     this.openAt([left, top], items)
   }
 
+  openBelow(element, items) {
+    const coords = this.getPosition(element)
+    this.openAt([coords.left, coords.bottom], items)
+  }
+
   openAt([left, top], items) {
     this.container.innerHTML = ''
     for (const item of items) {

umap/static/umap/js/modules/ui/panel.js

@@ -25,6 +25,9 @@ export class Panel {
   }
 
   open({ content, className, actions = [] } = {}) {
+    if (this.isOpen()) {
+      this.onClose()
+    }
     this.container.className = `with-transition panel window ${this.className} ${
       this.mode || ''
     }`
@@ -71,10 +74,13 @@ export class Panel {
 
   close() {
     document.body.classList.remove(`panel-${this.className.split(' ')[0]}-on`)
+    this.onClose()
+  }
+
+  onClose() {
     if (DomUtil.hasClass(this.container, 'on')) {
       DomUtil.removeClass(this.container, 'on')
       this.map.invalidateSize({ pan: false })
-      this.map.editedFeature = null
     }
   }
 }
@@ -84,6 +90,11 @@ export class EditPanel extends Panel {
     super(map)
     this.className = 'right dark'
   }
+
+  onClose() {
+    super.onClose()
+    this.map.editedFeature = null
+  }
 }
 
 export class FullPanel extends Panel {