umap-project 2.9.0b0__py3-none-any.whl → 2.9.2__py3-none-any.whl

umap/static/umap/js/modules/sync/websocket.js

@@ -3,53 +3,57 @@ const PING_INTERVAL = 30000
 const FIRST_CONNECTION_TIMEOUT = 2000
 
 export class WebSocketTransport {
-  constructor(webSocketURI, authToken, messagesReceiver, peerId, username) {
+  constructor(messagesReceiver) {
     this.receiver = messagesReceiver
+  }
 
-    this.websocket = new WebSocket(webSocketURI)
+  async connect(webSocketURI, authToken, peerId, username) {
+    return new Promise((resolve, reject) => {
+      this.websocket = new WebSocket(webSocketURI)
 
-    this.websocket.onopen = () => {
-      this.send('JoinRequest', { token: authToken, peer: peerId, username })
-      this.receiver.onConnection()
-    }
-    this.websocket.addEventListener('message', this.onMessage.bind(this))
-    this.websocket.onclose = () => {
-      console.log('websocket closed')
-      if (!this.receiver.closeRequested) {
-        console.log('Not requested, reconnecting...')
-        this.receiver.reconnect()
+      this.websocket.onopen = () => {
+        this.send('JoinRequest', { token: authToken, peer: peerId, username })
+        resolve(this.websocket)
       }
-    }
-
-    this.websocket.onerror = (error) => {
-      console.log('WS ERROR', error)
-    }
-
-    this.ensureOpen = setInterval(() => {
-      if (this.websocket.readyState !== WebSocket.OPEN) {
-        this.websocket.close()
-        clearInterval(this.ensureOpen)
+      this.websocket.addEventListener('message', this.onMessage.bind(this))
+      this.websocket.onclose = () => {
+        console.log('websocket closed')
+        if (!this.receiver.closeRequested) {
+          console.log('Not requested, reconnecting...')
+          this.receiver.reconnect()
+        }
       }
-    }, FIRST_CONNECTION_TIMEOUT)
 
-    // To ensure the connection is still alive, we send ping and expect pong back.
-    // Websocket provides a `ping` method to keep the connection alive, but it's
-    // unfortunately not possible to access it from the WebSocket object.
-    // See https://making.close.com/posts/reliable-websockets/ for more details.
-    this.pingInterval = setInterval(() => {
-      if (this.websocket.readyState === WebSocket.OPEN) {
-        console.log('sending ping')
-        this.websocket.send('ping')
-        this.pongReceived = false
-        setTimeout(() => {
-          if (!this.pongReceived) {
-            console.warn('No pong received, reconnecting...')
-            this.websocket.close()
-            clearInterval(this.pingInterval)
-          }
-        }, PONG_TIMEOUT)
+      this.websocket.onerror = (error) => {
+        console.log('WS ERROR', error)
       }
-    }, PING_INTERVAL)
+
+      this.ensureOpen = setInterval(() => {
+        if (this.websocket.readyState !== WebSocket.OPEN) {
+          this.websocket.close()
+          clearInterval(this.ensureOpen)
+        }
+      }, FIRST_CONNECTION_TIMEOUT)
+
+      // To ensure the connection is still alive, we send ping and expect pong back.
+      // Websocket provides a `ping` method to keep the connection alive, but it's
+      // unfortunately not possible to access it from the WebSocket object.
+      // See https://making.close.com/posts/reliable-websockets/ for more details.
+      this.pingInterval = setInterval(() => {
+        if (this.websocket.readyState === WebSocket.OPEN) {
+          console.log('sending ping')
+          this.websocket.send('ping')
+          this.pongReceived = false
+          setTimeout(() => {
+            if (!this.pongReceived) {
+              console.warn('No pong received, reconnecting...')
+              this.websocket.close()
+              clearInterval(this.pingInterval)
+            }
+          }, PONG_TIMEOUT)
+        }
+      }, PING_INTERVAL)
+    })
   }
 
   onMessage(wsMessage) {
@@ -72,4 +76,8 @@ export class WebSocketTransport {
     this.receiver.closeRequested = true
     this.websocket.close()
   }
+
+  get isOpen() {
+    return this.websocket?.readyState === WebSocket.OPEN
+  }
 }

umap/static/umap/js/modules/ui/bar.js

@@ -3,6 +3,7 @@ import { translate } from '../i18n.js'
 import { WithTemplate } from '../utils.js'
 import ContextMenu from './contextmenu.js'
 import * as Utils from '../utils.js'
+import { Point, LineString, Polygon } from '../data/features.js'
 
 const TOP_BAR_TEMPLATE = `
 <div class="umap-main-edit-toolbox with-transition dark">
@@ -202,3 +203,86 @@ export class BottomBar extends WithTemplate {
     this.elements.filter.hidden = !showMenus || !this._umap.properties.facetKey
   }
 }
+
+const EDIT_BAR_TEMPLATE = `
+  <ul class="umap-edit-bar dark with-transition">
+    <li data-ref="marker"><button type="button" data-getstarted><i class="icon icon-24 icon-marker"></i></button></li>
+    <li data-ref="polyline"><button type="button" data-getstarted><i class="icon icon-24 icon-polyline"></i></button></li>
+    <li data-ref="multiline" hidden>
+      <button type="button" title="${translate('Add a line to the current multi')}"><i class="icon icon-24 icon-multiline"></i></button>
+    </li>
+    <li data-ref="polygon"><button type="button" data-getstarted><i class="icon icon-24 icon-polygon"></i></button></li>
+    <li data-ref="multipolygon" hidden>
+      <button type="button" title="${translate('Add a polygon to the current multi')}"><i class="icon icon-24 icon-multipolygon"></i></button>
+    </li>
+    <hr>
+    <li data-ref="caption" hidden><button data-getstarted type="button" title="${translate('Edit map name and caption')}"><i class="icon icon-24 icon-caption"></i></button></li>
+    <li data-ref="import" hidden><button type="button"><i class="icon icon-24 icon-upload"></i></button></li>
+    <li data-ref="layers" hidden><button type="button" title="${translate('Manage layers')}"><i class="icon icon-24 icon-layers"></i></button></li>
+    <li data-ref="tilelayers" hidden><button type="button" title="${translate('Change tilelayers')}"><i class="icon icon-24 icon-tilelayer"></i></button></li>
+    <li data-ref="center" hidden><button type="button"><i class="icon icon-24 icon-center"></i></button></li>
+    <li data-ref="permissions" hidden><button type="button" title="${translate('Update permissions and editors')}"><i class="icon icon-24 icon-key"></i></button></li>
+    <li data-ref="settings" hidden><button data-getstarted type="button" title="${translate('Map advanced properties')}"><i class="icon icon-24 icon-settings"></i></button></li>
+  </ul>
+`
+
+export class EditBar extends WithTemplate {
+  constructor(umap, leafletMap, parent) {
+    super()
+    this._umap = umap
+    this._leafletMap = leafletMap
+    this.loadTemplate(EDIT_BAR_TEMPLATE)
+    this.parent = parent
+  }
+
+  setup() {
+    this.parent.appendChild(this.element)
+    DomEvent.disableClickPropagation(this.element)
+    this._onClick('marker', () => this._leafletMap.editTools.startMarker())
+    this._onClick('polyline', () => this._leafletMap.editTools.startPolyline())
+    this._onClick('multiline', () => {
+      console.log('click click')
+      this._umap.editedFeature.ui.editor.newShape()
+    })
+    this._onClick('polygon', () => this._leafletMap.editTools.startPolygon())
+    this._onClick('multipolygon', () => this._umap.editedFeature.ui.editor.newShape())
+    this._onClick('caption', () => this._umap.editCaption())
+    this._onClick('import', () => this._umap.importer.open())
+    this._onClick('layers', () => this._umap.editDatalayers())
+    this._onClick('tilelayers', () => this._leafletMap.editTileLayers())
+    this._onClick('center', () => this._umap.editCenter())
+    this._onClick('permissions', () => this._umap.permissions.edit())
+    this._onClick('settings', () => this._umap.edit())
+    this._addTitle('import', 'IMPORT_PANEL')
+    this._addTitle('marker', 'DRAW_MARKER')
+    this._addTitle('polyline', 'DRAW_LINE')
+    this._addTitle('polygon', 'DRAW_POLYGON')
+    this._leafletMap.on('seteditedfeature', () => this.redraw())
+  }
+
+  redraw() {
+    const editedFeature = this._umap.editedFeature
+    this.elements.multiline.hidden = !(editedFeature instanceof LineString)
+    this.elements.multipolygon.hidden = !(editedFeature instanceof Polygon)
+    this.elements.caption.hidden = this._umap.properties.editMode !== 'advanced'
+    this.elements.import.hidden = this._umap.properties.editMode !== 'advanced'
+    this.elements.layers.hidden = this._umap.properties.editMode !== 'advanced'
+    this.elements.tilelayers.hidden = this._umap.properties.editMode !== 'advanced'
+    this.elements.center.hidden = this._umap.properties.editMode !== 'advanced'
+    this.elements.permissions.hidden = this._umap.properties.editMode !== 'advanced'
+    this.elements.settings.hidden = this._umap.properties.editMode !== 'advanced'
+  }
+
+  _addTitle(ref, label) {
+    this.elements[ref].querySelector('button').title = this._umap.help.displayLabel(
+      label,
+      false
+    )
+  }
+
+  _onClick(ref, action) {
+    // Put the click on the button, not on the li, but keep the data-ref on the li
+    // so to hide/show it when needed.
+    this.elements[ref].querySelector('button').addEventListener('click', action)
+  }
+}

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

@@ -4,6 +4,8 @@ export class Positioned {
       this.anchorTop(anchor)
     } else if (anchor && position === 'bottom') {
       this.anchorBottom(anchor)
+    } else {
+      this.anchorAbsolute()
     }
   }
 
@@ -31,6 +33,15 @@ export class Positioned {
     })
   }
 
+  anchorAbsolute() {
+    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 })
+  }
+
   getPosition(el) {
     return el.getBoundingClientRect()
   }

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

@@ -10,6 +10,9 @@ export default class ContextMenu extends Positioned {
     if (options.className) {
       this.container.classList.add(options.className)
     }
+    if (options.orientation === 'rows') {
+      this.container.classList.add('umap-contextmenu-rows')
+    }
     this.container.addEventListener('focusout', (event) => {
       if (!this.container.contains(event.relatedTarget)) this.close()
     })
@@ -37,10 +40,14 @@ export default class ContextMenu extends Positioned {
         )
         this.container.appendChild(li)
       } else {
+        let content = item.label || ''
+        if (item.icon) {
+          content = `<i class="icon icon-16 ${item.icon}"></i>${content}`
+        }
         const li = loadTemplate(
-          `<li class="${item.className || ''}"><button tabindex="0" class="flat">${item.label}</button></li>`
+          `<li class="${item.className || ''}"><button tabindex="0" class="flat" title="${item.title || ''}">${content}</button></li>`
         )
-        li.addEventListener('click', () => {
+        li.firstChild.addEventListener('click', () => {
           this.close()
           item.action()
         })

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

@@ -25,13 +25,16 @@ export class Panel {
     return this.container.classList.contains('on')
   }
 
-  open({ content, className, actions = [] } = {}) {
+  open({ content, className, highlight, actions = [] } = {}) {
     if (this.isOpen()) {
       this.onClose()
     }
     this.container.className = `with-transition panel window ${this.className} ${
       this.mode || ''
     }`
+    if (highlight) {
+      this.container.dataset.highlight = highlight
+    }
     document.body.classList.add(`panel-${this.className.split(' ')[0]}-on`)
     this.container.innerHTML = ''
     const actionsContainer = DomUtil.create('ul', 'buttons', this.container)
@@ -75,6 +78,7 @@ export class Panel {
 
   close() {
     document.body.classList.remove(`panel-${this.className.split(' ')[0]}-on`)
+    this.container.dataset.highlight = null
     this.onClose()
   }
 

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'
@@ -92,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
@@ -112,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)
@@ -131,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')
@@ -677,6 +685,7 @@ export default class Umap extends ServerStored {
         Alert.success(translate('Map has been saved!'))
       })
     }
+    this.sync.saved()
     this.fire('saved')
   }
 
@@ -737,7 +746,7 @@ 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')
@@ -758,7 +767,42 @@ export default class Umap extends ServerStored {
     ]
     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) {
@@ -772,7 +816,6 @@ export default class Umap extends ServerStored {
       'properties.miniMap',
       'properties.scaleControl',
       'properties.onLoadPanel',
-      'properties.defaultView',
       'properties.displayPopupFooter',
       'properties.captionBar',
       'properties.captionMenus',
@@ -1053,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() {
@@ -1116,7 +1153,11 @@ export default class Umap extends ServerStored {
     }
     this._advancedActions(container)
 
-    this.editPanel.open({ content: container, className: 'dark' })
+    this.editPanel.open({
+      content: container,
+      className: 'dark',
+      highlight: 'settings',
+    })
   }
 
   reset() {
@@ -1236,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()
@@ -1253,7 +1295,6 @@ export default class Umap extends ServerStored {
     this.editPanel.close()
     this.fullPanel.close()
     this.sync.stop()
-    this._leafletMap.closeInplaceToolbar()
   }
 
   fire(name) {
@@ -1504,7 +1545,7 @@ export default class Umap extends ServerStored {
       this
     )
 
-    this.editPanel.open({ content: container })
+    this.editPanel.open({ content: container, highlight: 'layers' })
   }
 
   getDataLayerByUmapId(id) {