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

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

@@ -2,6 +2,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 * as SaveManager from '../saving.js'
 
 // Start reconnecting after 2 seconds, then double the delay each time
 // maxing out at 32 seconds.
@@ -61,25 +62,39 @@ export class SyncEngine {
     this._reconnectTimeout = null
     this._reconnectDelay = RECONNECT_DELAY
     this.websocketConnected = false
+    this.closeRequested = false
+    this.peerId = Utils.generateId()
+  }
+
+  get isOpen() {
+    return this.transport?.isOpen
   }
 
   async authenticate() {
+    if (this.isOpen) return
     const websocketTokenURI = this._umap.urls.get('map_websocket_auth_token', {
       map_id: this._umap.id,
     })
 
     const [response, _, error] = await this._umap.server.get(websocketTokenURI)
-    if (!error) {
-      this.start(response.token)
+    if (error) {
+      this.reconnect()
+      return
     }
+    await this.start(response.token)
   }
 
-  start(authToken) {
-    this.transport = new WebSocketTransport(
-      this._umap.properties.websocketURI,
+  async start(authToken) {
+    const path = this._umap.urls.get('ws_sync', { map_id: this._umap.id })
+    const protocol = window.location.protocol === 'http:' ? 'ws:' : 'wss:'
+    this.transport = new WebSocketTransport(this)
+    await this.transport.connect(
+      `${protocol}//${window.location.host}${path}`,
       authToken,
-      this
+      this.peerId,
+      this._umap.properties.user?.name
     )
+    this.onConnection()
   }
 
   stop() {
@@ -100,11 +115,11 @@ export class SyncEngine {
     this.websocketConnected = false
     this.updaters.map.update({ key: 'numberOfConnectedPeers' })
 
-    this._reconnectTimeout = setTimeout(() => {
+    this._reconnectTimeout = setTimeout(async () => {
       if (this._reconnectDelay < MAX_RECONNECT_DELAY) {
         this._reconnectDelay = this._reconnectDelay * RECONNECT_DELAY_FACTOR
       }
-      this.authenticate()
+      await this.authenticate()
     }, this._reconnectDelay)
   }
   upsert(subject, metadata, value) {
@@ -119,12 +134,22 @@ export class SyncEngine {
     this._send({ verb: 'delete', subject, metadata, key })
   }
 
+  saved() {
+    if (this.offline) return
+    if (this.transport) {
+      this.transport.send('SavedMessage', {
+        sender: this.peerId,
+        lastKnownHLC: this._operations.getLastKnownHLC(),
+      })
+    }
+  }
+
   _send(inputMessage) {
     const message = this._operations.addLocal(inputMessage)
 
     if (this.offline) return
     if (this.transport) {
-      this.transport.send('OperationMessage', message)
+      this.transport.send('OperationMessage', { sender: this.peerId, ...message })
     }
   }
 
@@ -140,9 +165,8 @@ export class SyncEngine {
     updater.applyMessage(operation)
   }
 
-  getNumberOfConnectedPeers() {
-    if (this.peers) return this.peers.length
-    return 0
+  getPeers() {
+    return this.peers || {}
   }
 
   /**
@@ -163,6 +187,8 @@ export class SyncEngine {
       } else if (payload.message.verb === 'ListOperationsResponse') {
         this.onListOperationsResponse(payload)
       }
+    } else if (kind === 'SavedMessage') {
+      this.onSavedMessage(payload)
     } else {
       throw new Error(`Received unknown message from the websocket server: ${kind}`)
     }
@@ -176,6 +202,8 @@ export class SyncEngine {
    * @param {Object} payload
    */
   onOperationMessage(payload) {
+    if (payload.sender === this.peerId) return
+    debug('received operation', payload)
     this._operations.storeRemoteOperations([payload])
     this._applyOperation(payload)
   }
@@ -187,9 +215,8 @@ export class SyncEngine {
    * @param {string} payload.uuid The server-assigned uuid for this peer
    * @param {string[]} payload.peers The list of peers uuids
    */
-  onJoinResponse({ uuid, peers }) {
-    debug('received join response', { uuid, peers })
-    this.uuid = uuid
+  onJoinResponse({ peer, peers }) {
+    debug('received join response', { peer, peers })
     this.onListPeersResponse({ peers })
 
     // Get one peer at random
@@ -210,7 +237,7 @@ export class SyncEngine {
    * @param {string[]} payload.peers The list of peers uuids
    */
   onListPeersResponse({ peers }) {
-    debug('received peerinfo', { peers })
+    debug('received peerinfo', peers)
     this.peers = peers
     this.updaters.map.update({ key: 'numberOfConnectedPeers' })
   }
@@ -240,7 +267,7 @@ export class SyncEngine {
    * @param {*} operations The list of (encoded operations)
    */
   onListOperationsResponse({ sender, message }) {
-    debug(`received operations from peer ${sender}`, message.operations)
+    debug(`received operations list from peer ${sender}`, message.operations)
 
     if (message.operations.length === 0) return
 
@@ -275,6 +302,13 @@ export class SyncEngine {
     // Else: apply
   }
 
+  onSavedMessage({ sender, lastKnownHLC }) {
+    debug(`received saved message from peer ${sender}`, lastKnownHLC)
+    if (lastKnownHLC === this._operations.getLastKnownHLC() && SaveManager.isDirty) {
+      SaveManager.clear()
+    }
+  }
+
   /**
    * Send a message to another peer (via the transport layer)
    *
@@ -285,7 +319,7 @@ export class SyncEngine {
   sendToPeer(recipient, verb, payload) {
     payload.verb = verb
     this.transport.send('PeerMessage', {
-      sender: this.uuid,
+      sender: this.peerId,
       recipient: recipient,
       message: payload,
     })
@@ -297,7 +331,7 @@ export class SyncEngine {
    * @returns {string|bool} the selected peer uuid, or False if none was found.
    */
   _getRandomPeer() {
-    const otherPeers = this.peers.filter((p) => p !== this.uuid)
+    const otherPeers = Object.keys(this.peers).filter((p) => p !== this.peerId)
     if (otherPeers.length > 0) {
       const random = Math.floor(Math.random() * otherPeers.length)
       return otherPeers[random]
@@ -345,7 +379,7 @@ export class Operations {
   }
 
   /**
-   * Tick the clock and add store the passed message in the operations list.
+   * Tick the clock and store the passed message in the operations list.
    *
    * @param {*} inputMessage
    * @returns {*} clock-aware message
@@ -474,16 +508,12 @@ export class Operations {
    * @return {bool} true if the two operations share the same context.
    */
   static haveSameContext(local, remote) {
-    const shouldCheckKey =
-      local.hasOwnProperty('key') &&
-      remote.hasOwnProperty('key') &&
-      typeof local.key !== 'undefined' &&
-      typeof remote.key !== 'undefined'
+    const shouldCheckKey = local.key !== undefined && remote.key !== undefined
 
     return (
       Utils.deepEqual(local.subject, remote.subject) &&
       Utils.deepEqual(local.metadata, remote.metadata) &&
-      (!shouldCheckKey || (shouldCheckKey && local.key == remote.key))
+      (!shouldCheckKey || (shouldCheckKey && local.key === remote.key))
     )
   }
 }

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

@@ -54,10 +54,11 @@ export class MapUpdater extends BaseUpdater {
 export class DataLayerUpdater extends BaseUpdater {
   upsert({ value }) {
     // Upsert only happens when a new datalayer is created.
-    const datalayer = this._umap.createDataLayer(value, false)
-    // Prevent the layer to get data from the server, as it will get it
-    // from the sync.
-    datalayer._loaded = true
+    try {
+      this.getDataLayerFromID(value.id)
+    } catch {
+      this._umap.createDataLayer(value, false)
+    }
   }
 
   update({ key, metadata, value }) {
@@ -72,6 +73,14 @@ export class DataLayerUpdater extends BaseUpdater {
     }
     datalayer.render([key])
   }
+
+  delete({ metadata }) {
+    const datalayer = this.getDataLayerFromID(metadata.id)
+    if (datalayer) {
+      datalayer.del(false)
+      datalayer.commitDelete()
+    }
+  }
 }
 
 export class FeatureUpdater extends BaseUpdater {
@@ -84,7 +93,7 @@ export class FeatureUpdater extends BaseUpdater {
   upsert({ metadata, value }) {
     const { id, layerId } = metadata
     const datalayer = this.getDataLayerFromID(layerId)
-    const feature = this.getFeatureFromMetadata(metadata, value)
+    const feature = this.getFeatureFromMetadata(metadata)
 
     if (feature) {
       feature.geometry = value.geometry
@@ -101,7 +110,7 @@ export class FeatureUpdater extends BaseUpdater {
       return
     }
     if (key === 'geometry') {
-      const feature = this.getFeatureFromMetadata(metadata, value)
+      const feature = this.getFeatureFromMetadata(metadata)
       feature.geometry = value
     } else {
       this.updateObjectValue(feature, key, value)

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

@@ -3,49 +3,57 @@ const PING_INTERVAL = 30000
 const FIRST_CONNECTION_TIMEOUT = 2000
 
 export class WebSocketTransport {
-  constructor(webSocketURI, authToken, messagesReceiver) {
+  constructor(messagesReceiver) {
     this.receiver = messagesReceiver
-    this.closeRequested = false
+  }
 
-    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 })
-      this.receiver.onConnection()
-    }
-    this.websocket.addEventListener('message', this.onMessage.bind(this))
-    this.websocket.onclose = () => {
-      console.log('websocket closed')
-      if (!this.closeRequested) {
-        console.log('Not requested, reconnecting...')
-        this.receiver.reconnect()
+      this.websocket.onopen = () => {
+        this.send('JoinRequest', { token: authToken, peer: peerId, username })
+        resolve(this.websocket)
       }
-    }
-
-    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) {
-        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) {
@@ -64,7 +72,12 @@ export class WebSocketTransport {
   }
 
   close() {
-    this.closeRequested = true
+    console.log('Closing')
+    this.receiver.closeRequested = true
     this.websocket.close()
   }
+
+  get isOpen() {
+    return this.websocket?.readyState === WebSocket.OPEN
+  }
 }

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

@@ -2,6 +2,7 @@ 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'
+import { MutatingForm } from './form/builder.js'
 
 const TEMPLATE = `
   <table>
@@ -103,7 +104,7 @@ export default class TableEditor extends WithTemplate {
   }
 
   resetProperties() {
-    this.properties = this.datalayer._propertiesIndex
+    this.properties = this.datalayer.allProperties()
     if (this.properties.length === 0) {
       this.properties = [U.DEFAULT_LABEL_KEY, 'description']
     }
@@ -205,7 +206,7 @@ export default class TableEditor extends WithTemplate {
     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 }]], {
+    const builder = new MutatingForm(feature, [[field, { handler }]], {
       id: `umap-feature-properties_${L.stamp(feature)}`,
     })
     cell.innerHTML = ''

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

@@ -2,13 +2,15 @@ import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 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">
     <div class="umap-left-edit-toolbox" data-ref="left">
         <div class="logo"><a class="" href="/" title="${translate('Go to the homepage')}">uMap</a></div>
-        <button class="map-name" type="button" data-ref="name"></button>
-        <button class="share-status" type="button" data-ref="share"></button>
+        <button class="map-name flat" type="button" data-ref="name"></button>
+        <button class="share-status flat" type="button" data-ref="share"></button>
     </div>
     <div class="umap-right-edit-toolbox" data-ref="right">
         <button class="connected-peers round" type="button" data-ref="peers">
@@ -19,7 +21,7 @@ const TOP_BAR_TEMPLATE = `
           <i class="icon icon-16 icon-profile"></i>
           <span class="username" data-ref="username"></span>
         </button>
-        <button class="umap-help-link" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
+        <button class="umap-help-link flat" type="button" title="${translate('Help')}" data-ref="help">${translate('Help')}</button>
         <button class="edit-cancel round" type="button" data-ref="cancel">
             <i class="icon icon-16 icon-restore"></i>
             <span class="">${translate('Cancel edits')}</span>
@@ -96,17 +98,22 @@ export class TopBar extends WithTemplate {
       }
     })
 
-    const connectedPeers = this._umap.sync.getNumberOfConnectedPeers()
     this.elements.peers.addEventListener('mouseover', () => {
-      if (!connectedPeers) return
+      const connectedPeers = this._umap.sync.getPeers()
+      if (!Object.keys(connectedPeers).length) return
+      const ul = Utils.loadTemplate(
+        `<ul>${Object.entries(connectedPeers)
+          .sort((el) => el !== this._umap.user?.name)
+          .map(([id, name]) => `<li>${name || translate('Anonymous')}</li>`)
+          .join('')}</ul>`
+      )
       this._umap.tooltip.open({
-        content: translate('{connectedPeers} peer(s) currently connected to this map', {
-          connectedPeers: connectedPeers,
-        }),
+        content: ul,
         anchor: this.elements.peers,
         position: 'bottom',
         delay: 500,
         duration: 5000,
+        accent: true,
       })
     })
 
@@ -145,7 +152,9 @@ export class TopBar extends WithTemplate {
   }
 
   redraw() {
-    this.elements.peers.hidden = !this._umap.getProperty('syncEnabled')
+    const syncEnabled = this._umap.getProperty('syncEnabled')
+    this.elements.peers.hidden = !syncEnabled
+    this.elements.cancel.hidden = syncEnabled
     this.elements.saveLabel.hidden = this._umap.permissions.isDraft()
     this.elements.saveDraftLabel.hidden = !this._umap.permissions.isDraft()
   }
@@ -194,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

@@ -2,27 +2,18 @@ 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 })
+  toggleClassPosition(position) {
+    this.container.classList.toggle('tooltip-bottom', position === 'bottom')
+    this.container.classList.toggle('tooltip-top', position === 'top')
   }
 
   anchorTop(el) {
-    this.container.className = 'tooltip-top'
+    this.toggleClassPosition('top')
     const coords = this.getPosition(el)
     this.setPosition({
       left: coords.left - 10,
@@ -31,23 +22,15 @@ export class Positioned {
   }
 
   anchorBottom(el) {
-    this.container.className = 'tooltip-bottom'
+    this.toggleClassPosition('bottom')
     const coords = this.getPosition(el)
+    const selfCoords = this.getPosition(this.container)
     this.setPosition({
-      left: coords.left,
+      left: coords.left + coords.width / 2 - selfCoords.width / 2,
       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()
   }

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()
   }