umap-project 2.1.3__py3-none-any.whl → 2.2.0b0__py3-none-any.whl

umap/static/umap/js/umap.js

@@ -56,6 +56,11 @@ U.Map = L.Map.extend({
     if (geojson.geometry) this.options.center = this.latLng(geojson.geometry)
     this.urls = new U.URLs(this.options.urls)
 
+    this.panel = new U.Panel(this)
+    if (this.hasEditMode()) {
+      this.editPanel = new U.EditPanel(this)
+      this.fullPanel = new U.FullPanel(this)
+    }
     this.ui = new U.UI(this._container)
     this.ui.on('dataloading', (e) => this.fire('dataloading', e))
     this.ui.on('dataload', (e) => this.fire('dataload', e))
@@ -69,6 +74,7 @@ U.Map = L.Map.extend({
     this.options.zoomControl = zoomControl !== undefined ? zoomControl : true
     this.options.fullscreenControl =
       fullscreenControl !== undefined ? fullscreenControl : true
+
     this.datalayersFromQueryString = L.Util.queryString('datalayers')
     if (this.datalayersFromQueryString) {
       this.datalayersFromQueryString = this.datalayersFromQueryString
@@ -100,17 +106,19 @@ U.Map = L.Map.extend({
       this.options.slideshow &&
       this.options.slideshow.delay &&
       this.options.slideshow.active === undefined
-    )
+    ) {
       this.options.slideshow.active = true
-    if (this.options.advancedFilterKey)
+    }
+    if (this.options.advancedFilterKey) {
       this.options.facetKey = this.options.advancedFilterKey
+      delete this.options.advancedFilterKey
+    }
 
     // Global storage for retrieving datalayers and features
     this.datalayers = {}
     this.datalayers_index = []
     this.dirty_datalayers = []
     this.features_index = {}
-    this.facets = {}
 
     // Needed for actions labels
     this.help = new U.Help(this)
@@ -138,14 +146,9 @@ U.Map = L.Map.extend({
       }
       delete this.options.displayDataBrowserOnLoad
     }
-
-    this.ui.on(
-      'panel:closed',
-      function () {
-        this.invalidateSize({ pan: false })
-      },
-      this
-    )
+    if (this.options.datalayersControl === 'expanded') {
+      this.options.onLoadPanel = 'datalayers'
+    }
 
     let isDirty = false // self status
     try {
@@ -195,30 +198,29 @@ U.Map = L.Map.extend({
 
     this.slideshow = new U.Slideshow(this, this.options.slideshow)
     this.permissions = new U.MapPermissions(this)
-    this.initCaptionBar()
     if (this.hasEditMode()) {
       this.editTools = new U.Editable(this)
-      this.ui.on(
-        'panel:closed panel:open',
-        function () {
-          this.editedFeature = null
-        },
-        this
-      )
       this.renderEditToolbar()
     }
     this.initShortcuts()
     this.onceDataLoaded(function () {
-      if (L.Util.queryString('share')) this.share.open()
-      else if (this.options.onLoadPanel === 'databrowser') this.openBrowser()
-      else if (this.options.onLoadPanel === 'caption') this.displayCaption()
-      else if (
-        this.options.onLoadPanel === 'facet' ||
-        this.options.onLoadPanel === 'datafilters'
-      )
-        this.openFacet()
       const slug = L.Util.queryString('feature')
       if (slug && this.features_index[slug]) this.features_index[slug].view()
+      if (this.options.noControl) return
+      this.initCaptionBar()
+      if (L.Util.queryString('share')) {
+        this.share.open()
+      } else if (this.options.onLoadPanel === 'databrowser') {
+        this.openBrowser('expanded')
+      } else if (this.options.onLoadPanel === 'datalayers') {
+        this.openBrowser('condensed')
+      } else if (this.options.onLoadPanel === 'caption') {
+        this.panel.mode = 'condensed'
+        this.displayCaption()
+      } else if (['facet', 'datafilters'].includes(this.options.onLoadPanel)) {
+        this.panel.mode = 'expanded'
+        this.openFacet()
+      }
       if (L.Util.queryString('edit')) {
         if (this.hasEditMode()) this.enableEdit()
         // Sometimes users share the ?edit link by mistake, let's remove
@@ -241,6 +243,44 @@ U.Map = L.Map.extend({
     this.on('click contextmenu.show', this.closeInplaceToolbar)
   },
 
+  render: function (fields) {
+    let impacts = U.Utils.getImpactsFromSchema(fields)
+
+    for (let impact of impacts) {
+      switch (impact) {
+        case 'ui':
+          this.initCaptionBar()
+          this.renderEditToolbar()
+          this.renderControls()
+          this.facets.redraw()
+          break
+        case 'data':
+          this.redrawVisibleDataLayers()
+          break
+        case 'datalayer-index':
+          this.reindexDataLayers()
+          break
+        case 'background':
+          this.initTileLayers()
+          break
+        case 'bounds':
+          this.handleLimitBounds()
+          break
+      }
+    }
+  },
+
+  reindexDataLayers: function () {
+    this.eachDataLayer((datalayer) => datalayer.reindex())
+    this.onDataLayersChanged()
+  },
+
+  redrawVisibleDataLayers: function () {
+    this.eachVisibleDataLayer((datalayer) => {
+      datalayer.redraw()
+    })
+  },
+
   setOptionsFromQueryString: function (options) {
     // This is not an editable option
     L.Util.setFromQueryString(options, 'editMode')
@@ -264,10 +304,12 @@ U.Map = L.Map.extend({
     // Specific case for datalayersControl
     // which accepts "expanded" value, on top of true/false/null
     if (L.Util.queryString('datalayersControl') === 'expanded') {
-      L.Util.setFromQueryString(options, 'datalayersControl')
+      options.onLoadPanel = 'datalayers'
     }
   },
 
+  // Merge the given schema with the default one
+  // Missing keys inside the schema are merged with the default ones.
   overrideSchema: function (schema) {
     for (const [key, extra] of Object.entries(schema)) {
       U.SCHEMA[key] = L.extend({}, U.SCHEMA[key], extra)
@@ -282,22 +324,25 @@ U.Map = L.Map.extend({
       new U.EditControl(this).addTo(this)
 
       new U.DrawToolbar({ map: this }).addTo(this)
-
       const editActions = [
-        U.ImportAction,
+        U.EditCaptionAction,
         U.EditPropertiesAction,
-        U.ManageDatalayersAction,
+        U.EditLayersAction,
         U.ChangeTileLayerAction,
         U.UpdateExtentAction,
         U.UpdatePermsAction,
+        U.ImportAction,
       ]
-      new U.SettingsToolbar({ actions: editActions }).addTo(this)
+      if (this.options.editMode === 'advanced') {
+        new U.SettingsToolbar({ actions: editActions }).addTo(this)
+      }
     }
     this._controls.zoom = new L.Control.Zoom({
       zoomInTitle: L._('Zoom in'),
       zoomOutTitle: L._('Zoom out'),
     })
     this._controls.datalayers = new U.DataLayersControl(this)
+    this._controls.caption = new U.CaptionControl(this)
     this._controls.locate = new U.Locate(this, {
       strings: {
         title: L._('Center map on your location'),
@@ -333,6 +378,7 @@ U.Map = L.Map.extend({
     if (this.options.scrollWheelZoom) this.scrollWheelZoom.enable()
     else this.scrollWheelZoom.disable()
     this.browser = new U.Browser(this)
+    this.facets = new U.Facets(this)
     this.importer = new U.Importer(this)
     this.drop = new U.DropControl(this)
     this.share = new U.Share(this)
@@ -420,7 +466,11 @@ U.Map = L.Map.extend({
       if (!pane.dataset || !pane.dataset.id) continue
       this.datalayers_index.push(this.datalayers[pane.dataset.id])
     }
-    this.updateDatalayersControl()
+    this.onDataLayersChanged()
+  },
+
+  onDataLayersChanged: function () {
+    if (this.browser) this.browser.update()
   },
 
   ensurePanesOrder: function () {
@@ -449,10 +499,6 @@ U.Map = L.Map.extend({
     return this
   },
 
-  updateDatalayersControl: function () {
-    if (this._controls.datalayers) this._controls.datalayers.update()
-  },
-
   backupOptions: function () {
     this._backupOptions = L.extend({}, this.options)
     this._backupOptions.tilelayer = L.extend({}, this.options.tilelayer)
@@ -476,8 +522,13 @@ U.Map = L.Map.extend({
         L.DomEvent.stop(e)
         this.search()
       } else if (e.keyCode === U.Keys.ESC) {
-        if (this.help.visible()) this.help.hide()
-        else this.ui.closePanel()
+        if (this.help.visible()) {
+          this.help.hide()
+        } else {
+          this.panel.close()
+          this.editPanel?.close()
+          this.fullPanel?.close()
+        }
       }
 
       if (!this.hasEditMode()) return
@@ -489,7 +540,6 @@ U.Map = L.Map.extend({
       } else if (key === U.Keys.E && modifierKey && this.editEnabled && !this.isDirty) {
         L.DomEvent.stop(e)
         this.disableEdit()
-        this.ui.closePanel()
       }
       if (key === U.Keys.S && modifierKey) {
         L.DomEvent.stop(e)
@@ -668,7 +718,7 @@ U.Map = L.Map.extend({
         if (datalayer) {
           const feature = datalayer.getFeatureByIndex(-1)
           if (feature) {
-            feature.zoomTo()
+            feature.zoomTo({ callback: this.options.noControl ? null : feature.view })
             return
           }
         }
@@ -727,12 +777,17 @@ U.Map = L.Map.extend({
     return new U.DataLayer(this, datalayer)
   },
 
+  newDataLayer: function () {
+    const datalayer = this.createDataLayer({})
+    datalayer.edit()
+  },
+
   getDefaultOption: function (option) {
     return U.SCHEMA[option] && U.SCHEMA[option].default
   },
 
   getOption: function (option) {
-    if (L.Util.usableOption(this.options, option)) return this.options[option]
+    if (U.Utils.usableOption(this.options, option)) return this.options[option]
     return this.getDefaultOption(option)
   },
 
@@ -764,10 +819,6 @@ U.Map = L.Map.extend({
       })
   },
 
-  manageDatalayers: function () {
-    if (this._controls.datalayers) this._controls.datalayers.openPanel()
-  },
-
   toGeoJSON: function () {
     let features = []
     this.eachDataLayer((datalayer) => {
@@ -789,7 +840,7 @@ U.Map = L.Map.extend({
   },
 
   processFileToImport: function (file, layer, type) {
-    type = type || L.Util.detectFileType(file)
+    type = type || U.Utils.detectFileType(file)
     if (!type) {
       this.ui.alert({
         content: L._('Unable to detect format of file {filename}', {
@@ -856,7 +907,8 @@ U.Map = L.Map.extend({
     }
   },
 
-  openBrowser: function () {
+  openBrowser: function (mode) {
+    if (mode) this.panel.mode = mode
     this.onceDatalayersLoaded(function () {
       this.browser.open()
     })
@@ -911,9 +963,9 @@ U.Map = L.Map.extend({
     })
     this.ensurePanesOrder()
     this.dirty_datalayers = []
-    this.updateDatalayersControl()
     this.initTileLayers()
     this.isDirty = false
+    this.onDataLayersChanged()
   },
 
   checkDirty: function () {
@@ -1014,7 +1066,7 @@ U.Map = L.Map.extend({
       else window.location = data.url
       alert.content = data.info || alert.content
       this.once('saved', () => this.ui.alert(alert))
-      this.ui.closePanel()
+      this.editPanel.close()
       this.permissions.save()
     }
   },
@@ -1127,13 +1179,7 @@ U.Map = L.Map.extend({
       'options.captionBar',
       'options.captionMenus',
     ])
-    builder = new U.FormBuilder(this, UIFields, {
-      callback: function () {
-        this.renderControls()
-        this.initCaptionBar()
-      },
-      callbackContext: this,
-    })
+    builder = new U.FormBuilder(this, UIFields)
     const controlsOptions = L.DomUtil.createFieldset(
       container,
       L._('User interface options')
@@ -1156,14 +1202,7 @@ U.Map = L.Map.extend({
       'options.dashArray',
     ]
 
-    builder = new U.FormBuilder(this, shapeOptions, {
-      callback: function (e) {
-        if (this._controls.miniMap) this.renderControls()
-        this.eachVisibleDataLayer((datalayer) => {
-          datalayer.redraw()
-        })
-      },
-    })
+    builder = new U.FormBuilder(this, shapeOptions)
     const defaultShapeProperties = L.DomUtil.createFieldset(
       container,
       L._('Default shape properties')
@@ -1199,9 +1238,9 @@ U.Map = L.Map.extend({
       [
         'options.facetKey',
         {
-          handler: 'Input',
+          handler: 'BlurInput',
           helpEntries: 'facetKey',
-          placeholder: L._('Example: key1,key2,key3'),
+          placeholder: L._('Example: key1,key2|Label 2,key3|Label 3|checkbox'),
           label: L._('Facet keys'),
         },
       ],
@@ -1216,14 +1255,7 @@ U.Map = L.Map.extend({
       ],
     ]
 
-    builder = new U.FormBuilder(this, optionsFields, {
-      callback: function (e) {
-        this.initCaptionBar()
-        if (e.helper.field === 'options.sortKey') {
-          this.eachDataLayer((datalayer) => datalayer.reindex())
-        }
-      },
-    })
+    builder = new U.FormBuilder(this, optionsFields)
     const defaultProperties = L.DomUtil.createFieldset(
       container,
       L._('Default properties')
@@ -1241,20 +1273,7 @@ U.Map = L.Map.extend({
       'options.labelInteractive',
       'options.outlinkTarget',
     ]
-    builder = new U.FormBuilder(this, popupFields, {
-      callback: function (e) {
-        if (
-          e.helper.field === 'options.popupTemplate' ||
-          e.helper.field === 'options.popupContentTemplate' ||
-          e.helper.field === 'options.popupShape' ||
-          e.helper.field === 'options.outlinkTarget'
-        )
-          return
-        this.eachVisibleDataLayer((datalayer) => {
-          datalayer.redraw()
-        })
-      },
-    })
+    builder = new U.FormBuilder(this, popupFields)
     const popupFieldset = L.DomUtil.createFieldset(
       container,
       L._('Default interaction options')
@@ -1263,7 +1282,7 @@ U.Map = L.Map.extend({
   },
 
   _editTilelayer: function (container) {
-    if (!L.Util.isObject(this.options.tilelayer)) {
+    if (!U.Utils.isObject(this.options.tilelayer)) {
       this.options.tilelayer = {}
     }
     const tilelayerFields = [
@@ -1308,15 +1327,12 @@ U.Map = L.Map.extend({
       container,
       L._('Custom background')
     )
-    builder = new U.FormBuilder(this, tilelayerFields, {
-      callback: this.initTileLayers,
-      callbackContext: this,
-    })
+    builder = new U.FormBuilder(this, tilelayerFields)
     customTilelayer.appendChild(builder.build())
   },
 
   _editOverlay: function (container) {
-    if (!L.Util.isObject(this.options.overlay)) {
+    if (!U.Utils.isObject(this.options.overlay)) {
       this.options.overlay = {}
     }
     const overlayFields = [
@@ -1359,15 +1375,12 @@ U.Map = L.Map.extend({
       ['options.overlay.tms', { handler: 'Switch', label: L._('TMS format') }],
     ]
     const overlay = L.DomUtil.createFieldset(container, L._('Custom overlay'))
-    builder = new U.FormBuilder(this, overlayFields, {
-      callback: this.initTileLayers,
-      callbackContext: this,
-    })
+    builder = new U.FormBuilder(this, overlayFields)
     overlay.appendChild(builder.build())
   },
 
   _editBounds: function (container) {
-    if (!L.Util.isObject(this.options.limitBounds)) {
+    if (!U.Utils.isObject(this.options.limitBounds)) {
       this.options.limitBounds = {}
     }
     const limitBounds = L.DomUtil.createFieldset(container, L._('Limit bounds'))
@@ -1389,10 +1402,7 @@ U.Map = L.Map.extend({
         { handler: 'BlurFloatInput', placeholder: L._('max East') },
       ],
     ]
-    const boundsBuilder = new U.FormBuilder(this, boundsFields, {
-      callback: this.handleLimitBounds,
-      callbackContext: this,
-    })
+    const boundsBuilder = new U.FormBuilder(this, boundsFields)
     limitBounds.appendChild(boundsBuilder.build())
     const boundsButtons = L.DomUtil.create('div', 'button-bar half', limitBounds)
     L.DomUtil.createButton(
@@ -1453,7 +1463,6 @@ U.Map = L.Map.extend({
     ]
     const slideshowHandler = function () {
       this.slideshow.setOptions(this.options.slideshow)
-      this.renderControls()
     }
     const slideshowBuilder = new U.FormBuilder(this, slideshowFields, {
       callback: slideshowHandler,
@@ -1462,22 +1471,6 @@ U.Map = L.Map.extend({
     slideshow.appendChild(slideshowBuilder.build())
   },
 
-  _editCredits: function (container) {
-    const credits = L.DomUtil.createFieldset(container, L._('Credits'))
-    const creditsFields = [
-      'options.licence',
-      'options.shortCredit',
-      'options.longCredit',
-      'options.permanentCredit',
-      'options.permanentCreditBackground',
-    ]
-    const creditsBuilder = new U.FormBuilder(this, creditsFields, {
-      callback: this.renderControls,
-      callbackContext: this,
-    })
-    credits.appendChild(creditsBuilder.build())
-  },
-
   _advancedActions: function (container) {
     const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
     const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
@@ -1520,18 +1513,37 @@ U.Map = L.Map.extend({
     )
   },
 
-  edit: function () {
+  editCaption: function () {
     if (!this.editEnabled) return
     if (this.options.editMode !== 'advanced') return
     const container = L.DomUtil.create('div', 'umap-edit-container'),
       metadataFields = ['options.name', 'options.description'],
       title = L.DomUtil.create('h3', '', container)
-    title.textContent = L._('Edit map properties')
+    title.textContent = L._('Edit map details')
     const builder = new U.FormBuilder(this, metadataFields, {
       className: 'map-metadata',
     })
     const form = builder.build()
     container.appendChild(form)
+
+    const credits = L.DomUtil.createFieldset(container, L._('Credits'))
+    const creditsFields = [
+      'options.licence',
+      'options.shortCredit',
+      'options.longCredit',
+      'options.permanentCredit',
+      'options.permanentCreditBackground',
+    ]
+    const creditsBuilder = new U.FormBuilder(this, creditsFields)
+    credits.appendChild(creditsBuilder.build())
+    this.editPanel.open({ content: container })
+  },
+
+  edit: function () {
+    if (!this.editEnabled) return
+    if (this.options.editMode !== 'advanced') return
+    const container = L.DomUtil.create('div')
+    L.DomUtil.createTitle(container, L._('Map advanced properties'), 'icon-settings')
     this._editControls(container)
     this._editShapeProperties(container)
     this._editDefaultProperties(container)
@@ -1540,10 +1552,9 @@ U.Map = L.Map.extend({
     this._editOverlay(container)
     this._editBounds(container)
     this._editSlideshow(container)
-    this._editCredits(container)
     this._advancedActions(container)
 
-    this.ui.openPanel({ data: { html: container }, className: 'dark' })
+    this.editPanel.open({ content: container, className: 'dark' })
   },
 
   enableEdit: function () {
@@ -1560,6 +1571,8 @@ U.Map = L.Map.extend({
     this.editedFeature = null
     this.editEnabled = false
     this.fire('edit:disabled')
+    this.editPanel.close()
+    this.fullPanel.close()
   },
 
   hasEditMode: function () {
@@ -1591,8 +1604,7 @@ U.Map = L.Map.extend({
         'umap-open-browser-link flat',
         container,
         L._('Browse data'),
-        this.openBrowser,
-        this
+        () => this.openBrowser('expanded')
       )
       if (this.options.facetKey) {
         L.DomUtil.createButton(
@@ -1617,8 +1629,7 @@ U.Map = L.Map.extend({
   askForReset: function (e) {
     if (!confirm(L._('Are you sure you want to cancel your changes?'))) return
     this.reset()
-    this.disableEdit(e)
-    this.ui.closePanel()
+    this.disableEdit()
   },
 
   startMarker: function () {
@@ -1734,10 +1745,17 @@ U.Map = L.Map.extend({
         })
       }
     }
-    items.push('-', {
-      text: L._('Browse data'),
-      callback: this.openBrowser,
-    })
+    items.push(
+      '-',
+      {
+        text: L._('See layers'),
+        callback: () => this.openBrowser('condensed'),
+      },
+      {
+        text: L._('Browse data'),
+        callback: () => this.openBrowser('expanded'),
+      }
+    )
     if (this.options.facetKey) {
       items.push({
         text: L._('Facet search'),
@@ -1760,14 +1778,29 @@ U.Map = L.Map.extend({
         callback: this.openExternalRouting,
       })
     }
+    if (this.options.urls.edit_in_osm) {
+      items.push('-', {
+        text: L._('Edit in OpenStreetMap'),
+        callback: this.editInOSM,
+      })
+    }
     this.options.contextmenuItems = items
   },
 
+  editInOSM: function (e) {
+    const url = this.urls.get('edit_in_osm', {
+      lat: e.latlng.lat,
+      lng: e.latlng.lng,
+      zoom: Math.max(this.getZoom(), 16),
+    })
+    if (url) window.open(url)
+  },
+
   openExternalRouting: function (e) {
     const url = this.urls.get('routing', {
       lat: e.latlng.lat,
       lng: e.latlng.lng,
-      locale: L.locale,
+      locale: L.getLocale(),
       zoom: this.getZoom(),
     })
     if (url) window.open(url)
@@ -1796,12 +1829,12 @@ U.Map = L.Map.extend({
   },
 
   localizeUrl: function (url) {
-    return L.Util.greedyTemplate(url, this.getGeoContext(), true)
+    return U.Utils.greedyTemplate(url, this.getGeoContext(), true)
   },
 
   proxyUrl: function (url, ttl) {
     if (this.options.urls.ajax_proxy) {
-      url = L.Util.greedyTemplate(this.options.urls.ajax_proxy, {
+      url = U.Utils.greedyTemplate(this.options.urls.ajax_proxy, {
         url: encodeURIComponent(url),
         ttl: ttl,
       })
@@ -1815,21 +1848,13 @@ U.Map = L.Map.extend({
   },
 
   search: function () {
-    if (this._controls.search) this._controls.search.openPanel(this)
+    if (this._controls.search) this._controls.search.open()
   },
 
   getFilterKeys: function () {
     return (this.options.filterKey || this.options.sortKey || 'name').split(',')
   },
 
-  getFacetKeys: function () {
-    return (this.options.facetKey || '').split(',').reduce((acc, curr) => {
-      const els = curr.split('|')
-      acc[els[0]] = els[1] || els[0]
-      return acc
-    }, {})
-  },
-
   getLayersBounds: function () {
     const bounds = new L.latLngBounds()
     this.eachBrowsableDataLayer((d) => {