Tooltip: refresh layer selector when activate and deactivate are called

Author: nboisteault

assets/src/components/Tooltip.js

@@ -12,9 +12,13 @@ export default class Tooltip extends HTMLElement {
 
         this._template = () => html`
             <select @change=${ event => { mainLizmap.tooltip.activate(event.target.value) }}>
-                <option value="">---</option>
+                <option value="" .selected=${mainLizmap.tooltip.activeLayerOrder === null}>---</option>
                 ${this._tooltipLayersCfgs.map(tooltipLayerCfg =>
-                    html`<option ?selected=${this._tooltipLayersCfgs.length === 1} value="${tooltipLayerCfg.order}">${mainLizmap.state.layersAndGroupsCollection.getLayerByName(tooltipLayerCfg.name).title}</option>`
+                    html`<option
+                            .selected=${tooltipLayerCfg.order === mainLizmap.tooltip.activeLayerOrder}
+                            value="${tooltipLayerCfg.order}">
+                            ${mainLizmap.state.layersAndGroupsCollection.getLayerByName(tooltipLayerCfg.name).title}
+                        </option>`
                 )}
             </select>
         `;
@@ -46,6 +50,13 @@ export default class Tooltip extends HTMLElement {
             ['tooltip.loaded']
         );
 
+        mainEventDispatcher.addListener(
+            () => {
+                render(this._template(), this);
+            },
+            ['tooltip.activated', 'tooltip.deactivated']
+        );
+
         render(this._template(), this);
     }
 

assets/src/modules/Tooltip.js

@@ -31,13 +31,15 @@ export default class Tooltip {
         this._lizmap3 = lizmap3;
         this._activeTooltipLayer;
         this._tooltipLayers = new Map();
+        this.activeLayerOrder = null;
     }
 
     /**
      * Activate tooltip for a layer order
      * @param {number} layerOrder a layer order
      */
     activate(layerOrder) {
+        // If the layer order is empty, deactivate the tooltip
         if (layerOrder === "") {
             this.deactivate();
             return;
@@ -241,6 +243,10 @@ export default class Tooltip {
         };
 
         this._map.getTargetElement().addEventListener('pointerleave', this._onPointerLeave);
+
+        // Dispatch event to notify that the tooltip is activated
+        this.activeLayerOrder = layerOrder;
+        mainEventDispatcher.dispatch('tooltip.activated', { layerOrder: layerOrder });
     }
 
     /**
@@ -254,5 +260,9 @@ export default class Tooltip {
         if (this._onPointerLeave) {
             this._map.getTargetElement().removeEventListener('pointerleave', this._onPointerLeave);
         }
+
+        // Dispatch event to notify that the tooltip is deactivated
+        this.activeLayerOrder = null;
+        mainEventDispatcher.dispatch('tooltip.deactivated');
     }
 }