umap-project 2.8.2__py3-none-any.whl → 2.9.0__py3-none-any.whl

umap/static/umap/js/modules/ui/tooltip.js

@@ -1,24 +1,32 @@
-import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
 import { Positioned } from './base.js'
+import * as Utils from '../utils.js'
 
 export default class Tooltip extends Positioned {
   constructor(parent) {
     super()
     this.parent = parent
-    this.container = DomUtil.create('div', 'with-transition', this.parent)
-    this.container.id = 'umap-tooltip-container'
+    this.container = Utils.loadTemplate('<div class="umap-tooltip-container"></div>')
+    this.parent.appendChild(this.container)
     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)
+    this.container.addEventListener('contextmenu', (event) => event.stopPropagation()) // Do not activate our custom context menu.
+    this.container.addEventListener('wheel', (event) => event.stopPropagation())
+    this.container.addEventListener('MozMousePixelScroll', (event) =>
+      event.stopPropagation()
+    )
   }
 
   open(opts) {
+    this.container.classList.toggle('tooltip-accent', Boolean(opts.accent))
     const showIt = () => {
+      if (opts.content.nodeType === 1) {
+        this.container.appendChild(opts.content)
+      } else {
+        this.container.innerHTML = Utils.escapeHTML(opts.content)
+      }
+      this.parent.classList.add('umap-tooltip')
       this.openAt(opts)
-      L.DomUtil.addClass(this.parent, 'umap-tooltip')
-      this.container.innerHTML = U.Utils.escapeHTML(opts.content)
     }
     this.TOOLTIP_ID = window.setTimeout(L.bind(showIt, this), opts.delay || 0)
     const id = this.TOOLTIP_ID
@@ -26,7 +34,7 @@ export default class Tooltip extends Positioned {
       this.close(id)
     }
     if (opts.anchor) {
-      L.DomEvent.once(opts.anchor, 'mouseout', closeIt)
+      opts.anchor.addEventListener('mouseout', closeIt, { once: true })
     }
     if (opts.duration !== Number.POSITIVE_INFINITY) {
       window.setTimeout(closeIt, opts.duration || 3000)
@@ -38,9 +46,9 @@ export default class Tooltip extends Positioned {
     // in the meantime. Eg. after a mouseout from the anchor.
     window.clearTimeout(id)
     if (id && id !== this.TOOLTIP_ID) return
-    this.container.className = ''
+    this.toggleClassPosition()
     this.container.innerHTML = ''
     this.setPosition({})
-    L.DomUtil.removeClass(this.parent, 'umap-tooltip')
+    this.parent.classList.remove('umap-tooltip')
   }
 }

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

@@ -13,7 +13,7 @@ import { LeafletMap } from './rendering/map.js'
 import URLs from './urls.js'
 import { Panel, EditPanel, FullPanel } from './ui/panel.js'
 import Dialog from './ui/dialog.js'
-import { BottomBar, TopBar } from './ui/bar.js'
+import { BottomBar, TopBar, EditBar } from './ui/bar.js'
 import Tooltip from './ui/tooltip.js'
 import ContextMenu from './ui/contextmenu.js'
 import { Request, ServerRequest } from './request.js'
@@ -34,6 +34,7 @@ import {
   uMapAlert as Alert,
 } from '../components/alerts/alert.js'
 import Orderable from './orderable.js'
+import { MutatingForm } from './form/builder.js'
 
 export default class Umap extends ServerStored {
   constructor(element, geojson) {
@@ -91,7 +92,8 @@ export default class Umap extends ServerStored {
       fullscreenControl !== undefined ? fullscreenControl : true
 
     if (center) {
-      this._leafletMap.options.center = this._leafletMap.latLng(center)
+      this._leafletMap.options.center = this.properties.center =
+        this._leafletMap.latLng(center)
     }
 
     // Needed to render controls
@@ -111,8 +113,14 @@ export default class Umap extends ServerStored {
       this.slideshow,
       this._leafletMap._controlContainer
     )
+    this.editBar = new EditBar(
+      this,
+      this._leafletMap,
+      this._leafletMap._controlContainer
+    )
     this.tooltip = new Tooltip(this._leafletMap._controlContainer)
     this.contextmenu = new ContextMenu()
+    this.editContextmenu = new ContextMenu({ className: 'dark', orientation: 'rows' })
     this.server = new ServerRequest()
     this.request = new Request()
     this.facets = new Facets(this)
@@ -130,6 +138,7 @@ export default class Umap extends ServerStored {
       this.fullPanel = new FullPanel(this, this._leafletMap)
       this._leafletMap.initEditTools()
       this.topBar.setup()
+      this.editBar.setup()
     }
 
     this.datalayersFromQueryString = this.searchParams.get('datalayers')
@@ -540,7 +549,13 @@ export default class Umap extends ServerStored {
           if (SAVEMANAGER.isDirty) this.saveAll()
           break
         case 'z':
-          if (SAVEMANAGER.isDirty) this.askForReset()
+          if (Utils.isWritable(event.target)) {
+            used = false
+            break
+          }
+          if (SAVEMANAGER.isDirty) {
+            this.askForReset()
+          }
           break
         case 'm':
           this._leafletMap.editTools.startMarker()
@@ -670,6 +685,7 @@ export default class Umap extends ServerStored {
         Alert.success(translate('Map has been saved!'))
       })
     }
+    this.sync.saved()
     this.fire('saved')
   }
 
@@ -730,11 +746,11 @@ export default class Umap extends ServerStored {
   editCaption() {
     if (!this.editEnabled) return
     if (this.properties.editMode !== 'advanced') return
-    const container = DomUtil.create('div', 'umap-edit-container')
+    const container = DomUtil.create('div')
     const metadataFields = ['properties.name', 'properties.description']
 
     DomUtil.createTitle(container, translate('Edit map details'), 'icon-caption')
-    const builder = new U.FormBuilder(this, metadataFields, {
+    const builder = new MutatingForm(this, metadataFields, {
       className: 'map-metadata',
       umap: this,
     })
@@ -749,9 +765,44 @@ export default class Umap extends ServerStored {
       'properties.permanentCredit',
       'properties.permanentCreditBackground',
     ]
-    const creditsBuilder = new U.FormBuilder(this, creditsFields, { umap: this })
+    const creditsBuilder = new MutatingForm(this, creditsFields, { umap: this })
     credits.appendChild(creditsBuilder.build())
-    this.editPanel.open({ content: container })
+    this.editPanel.open({ content: container, highlight: 'caption' })
+  }
+
+  editCenter() {
+    if (!this.editEnabled) return
+    if (this.properties.editMode !== 'advanced') return
+    const container = DomUtil.create('div')
+    const metadataFields = [
+      ['properties.zoom', { handler: 'IntInput', label: translate('Default zoom') }],
+      [
+        'properties.center.lat',
+        { handler: 'FloatInput', label: translate('Default latitude') },
+      ],
+      [
+        'properties.center.lng',
+        { handler: 'FloatInput', label: translate('Default longitude') },
+      ],
+      'properties.defaultView',
+    ]
+
+    DomUtil.createTitle(container, translate('Edit map default view'), 'icon-zoom')
+    const builder = new MutatingForm(this, metadataFields, {
+      className: 'map-metadata',
+      umap: this,
+    })
+    const form = builder.build()
+    const button = Utils.loadTemplate(
+      `<button type="button">${translate('Use current center and zoom')}</button>`
+    )
+    button.addEventListener('click', () => {
+      this._setCenterAndZoom()
+      builder.fetchAll()
+    })
+    container.appendChild(form)
+    container.appendChild(button)
+    this.editPanel.open({ content: container, highlight: 'center' })
   }
 
   _editControls(container) {
@@ -765,12 +816,11 @@ export default class Umap extends ServerStored {
       'properties.miniMap',
       'properties.scaleControl',
       'properties.onLoadPanel',
-      'properties.defaultView',
       'properties.displayPopupFooter',
       'properties.captionBar',
       'properties.captionMenus',
     ])
-    const builder = new U.FormBuilder(this, UIFields, { umap: this })
+    const builder = new MutatingForm(this, UIFields, { umap: this })
     const controlsOptions = DomUtil.createFieldset(
       container,
       translate('User interface options')
@@ -793,7 +843,7 @@ export default class Umap extends ServerStored {
       'properties.dashArray',
     ]
 
-    const builder = new U.FormBuilder(this, shapeOptions, { umap: this })
+    const builder = new MutatingForm(this, shapeOptions, { umap: this })
     const defaultShapeProperties = DomUtil.createFieldset(
       container,
       translate('Default shape properties')
@@ -812,7 +862,7 @@ export default class Umap extends ServerStored {
       'properties.slugKey',
     ]
 
-    const builder = new U.FormBuilder(this, optionsFields, { umap: this })
+    const builder = new MutatingForm(this, optionsFields, { umap: this })
     const defaultProperties = DomUtil.createFieldset(
       container,
       translate('Default properties')
@@ -830,7 +880,7 @@ export default class Umap extends ServerStored {
       'properties.labelInteractive',
       'properties.outlinkTarget',
     ]
-    const builder = new U.FormBuilder(this, popupFields, { umap: this })
+    const builder = new MutatingForm(this, popupFields, { umap: this })
     const popupFieldset = DomUtil.createFieldset(
       container,
       translate('Default interaction options')
@@ -887,7 +937,7 @@ export default class Umap extends ServerStored {
       container,
       translate('Custom background')
     )
-    const builder = new U.FormBuilder(this, tilelayerFields, { umap: this })
+    const builder = new MutatingForm(this, tilelayerFields, { umap: this })
     customTilelayer.appendChild(builder.build())
   }
 
@@ -935,7 +985,7 @@ export default class Umap extends ServerStored {
       ['properties.overlay.tms', { handler: 'Switch', label: translate('TMS format') }],
     ]
     const overlay = DomUtil.createFieldset(container, translate('Custom overlay'))
-    const builder = new U.FormBuilder(this, overlayFields, { umap: this })
+    const builder = new MutatingForm(this, overlayFields, { umap: this })
     overlay.appendChild(builder.build())
   }
 
@@ -962,7 +1012,7 @@ export default class Umap extends ServerStored {
         { handler: 'BlurFloatInput', placeholder: translate('max East') },
       ],
     ]
-    const boundsBuilder = new U.FormBuilder(this, boundsFields, { umap: this })
+    const boundsBuilder = new MutatingForm(this, boundsFields, { umap: this })
     limitBounds.appendChild(boundsBuilder.build())
     const boundsButtons = DomUtil.create('div', 'button-bar half', limitBounds)
     DomUtil.createButton(
@@ -1027,14 +1077,7 @@ export default class Umap extends ServerStored {
         { handler: 'Switch', label: translate('Autostart when map is loaded') },
       ],
     ]
-    const slideshowBuilder = new U.FormBuilder(this, slideshowFields, {
-      callback: () => {
-        this.slideshow.load()
-        // FIXME when we refactor formbuilder: this callback is called in a 'postsync'
-        // event, which comes after the call of `setter` method, which will call the
-        // map.render method, which should do this redraw.
-        this.bottomBar.redraw()
-      },
+    const slideshowBuilder = new MutatingForm(this, slideshowFields, {
       umap: this,
     })
     slideshow.appendChild(slideshowBuilder.build())
@@ -1042,7 +1085,9 @@ export default class Umap extends ServerStored {
 
   _editSync(container) {
     const sync = DomUtil.createFieldset(container, translate('Real-time collaboration'))
-    const builder = new U.FormBuilder(this, ['properties.syncEnabled'], { umap: this })
+    const builder = new MutatingForm(this, ['properties.syncEnabled'], {
+      umap: this,
+    })
     sync.appendChild(builder.build())
   }
 
@@ -1051,44 +1096,38 @@ export default class Umap extends ServerStored {
       container,
       translate('Advanced actions')
     )
-    const advancedButtons = DomUtil.create('div', 'button-bar half', advancedActions)
-    if (this.permissions.isOwner()) {
-      const deleteButton = Utils.loadTemplate(`
-        <button class="button" type="button">
+    const tpl = `
+    <div class="button-bar half">
+        <button class="button" type="button" data-ref=del hidden>
           <i class="icon icon-24 icon-delete"></i>${translate('Delete')}
-        </button>`)
-      deleteButton.addEventListener('click', () => this.del())
-      advancedButtons.appendChild(deleteButton)
-
-      DomUtil.createButton(
-        'button umap-empty',
-        advancedButtons,
-        translate('Clear data'),
-        this.emptyDataLayers,
-        this
-      )
-      DomUtil.createButton(
-        'button umap-empty',
-        advancedButtons,
-        translate('Remove layers'),
-        this.removeDataLayers,
-        this
-      )
+        </button>
+        <button class="button" type="button" data-ref=clear hidden>
+          <i class="icon icon-24 icon-empty"></i>${translate('Clear data')}
+        </button>
+        <button class="button" type="button" data-ref=empty hidden>
+          <i class="icon icon-24 icon-empty"></i>${translate('Remove layers')}
+        </button>
+        <button class="button" type="button" data-ref=clone>
+          <i class="icon icon-24 icon-clone"></i>${translate('Clone this map')}
+        </button>
+        <button class="button" type="button" data-ref=download>
+          <i class="icon icon-24 icon-download"></i>${translate('Open share & download panel')}
+        </button>
+    </div>
+    `
+    const [bar, { del, clear, empty, clone, download }] =
+      Utils.loadTemplateWithRefs(tpl)
+    advancedActions.appendChild(bar)
+    if (this.permissions.isOwner()) {
+      del.hidden = false
+      del.addEventListener('click', () => this.del())
+      clear.hidden = false
+      clear.addEventListener('click', () => this.emptyDataLayers())
+      empty.hidden = false
+      empty.addEventListener('click', () => this.removeDataLayers())
     }
-    DomUtil.createButton(
-      'button umap-clone',
-      advancedButtons,
-      translate('Clone this map'),
-      this.clone,
-      this
-    )
-    DomUtil.createButton(
-      'button umap-download',
-      advancedButtons,
-      translate('Open share & download panel'),
-      this.share.open,
-      this.share
-    )
+    clone.addEventListener('click', () => this.clone())
+    download.addEventListener('click', () => this.share.open())
   }
 
   edit() {
@@ -1109,12 +1148,16 @@ export default class Umap extends ServerStored {
     this._editOverlay(container)
     this._editBounds(container)
     this._editSlideshow(container)
-    if (this.properties.websocketEnabled) {
+    if (this.properties.websocketEnabled && this.id) {
       this._editSync(container)
     }
     this._advancedActions(container)
 
-    this.editPanel.open({ content: container, className: 'dark' })
+    this.editPanel.open({
+      content: container,
+      className: 'dark',
+      highlight: 'settings',
+    })
   }
 
   reset() {
@@ -1234,6 +1277,7 @@ export default class Umap extends ServerStored {
   }
 
   enableEdit() {
+    this.editBar.redraw()
     document.body.classList.add('umap-edit-enabled')
     this.editEnabled = true
     this.drop.enable()
@@ -1251,7 +1295,6 @@ export default class Umap extends ServerStored {
     this.editPanel.close()
     this.fullPanel.close()
     this.sync.stop()
-    this._leafletMap.closeInplaceToolbar()
   }
 
   fire(name) {
@@ -1259,6 +1302,7 @@ export default class Umap extends ServerStored {
   }
 
   askForReset(e) {
+    if (this.getProperty('syncEnabled')) return
     this.dialog
       .confirm(translate('Are you sure you want to cancel your changes?'))
       .then(() => {
@@ -1347,10 +1391,14 @@ export default class Umap extends ServerStored {
         }
         this.topBar.redraw()
       },
+      'properties.slideshow.active': () => {
+        this.slideshow.load()
+        this.bottomBar.redraw()
+      },
       numberOfConnectedPeers: () => {
         Utils.eachElement('.connected-peers span', (el) => {
           if (this.sync.websocketConnected) {
-            el.textContent = this.sync.getNumberOfConnectedPeers()
+            el.textContent = Object.keys(this.sync.getPeers()).length
           } else {
             el.textContent = translate('Disconnected')
           }
@@ -1359,7 +1407,11 @@ export default class Umap extends ServerStored {
       },
       'properties.starred': () => {
         Utils.eachElement('.map-star', (el) => {
-          el.classList.toggle('starred', this.properties.starred)
+          el.classList.toggle('icon-starred', this.properties.starred)
+          el.classList.toggle('icon-star', !this.properties.starred)
+        })
+        Utils.eachElement('.map-stars', (el) => {
+          el.textContent = this.properties.stars || 0
         })
       },
     }
@@ -1439,7 +1491,7 @@ export default class Umap extends ServerStored {
 
   removeDataLayers() {
     this.eachDataLayerReverse((datalayer) => {
-      datalayer._delete()
+      datalayer.del()
     })
   }
 
@@ -1458,7 +1510,7 @@ export default class Umap extends ServerStored {
       const row = DomUtil.create('li', 'orderable', ul)
       DomUtil.createIcon(row, 'icon-drag', translate('Drag to reorder'))
       datalayer.renderToolbox(row)
-      const builder = new U.FormBuilder(
+      const builder = new MutatingForm(
         datalayer,
         [['options.name', { handler: 'EditableText' }]],
         { className: 'umap-form-inline' }
@@ -1493,7 +1545,7 @@ export default class Umap extends ServerStored {
       this
     )
 
-    this.editPanel.open({ content: container })
+    this.editPanel.open({ content: container, highlight: 'layers' })
   }
 
   getDataLayerByUmapId(id) {
@@ -1542,6 +1594,7 @@ export default class Umap extends ServerStored {
       return
     }
     this.properties.starred = data.starred
+    this.properties.stars = data.stars
     Alert.success(
       data.starred
         ? translate('Map has been starred')