From 8cd9b27bbd770e024948c39ff6c4cc99a183eedd Mon Sep 17 00:00:00 2001 From: rldhont Date: Wed, 31 Jul 2024 20:15:15 +0200 Subject: [PATCH] [JavaScript] Remove mainLizmap from Tooltip module --- assets/src/modules/Lizmap.js | 2 +- assets/src/modules/Tooltip.js | 38 ++++++++++++++++++++++------------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/assets/src/modules/Lizmap.js b/assets/src/modules/Lizmap.js index 3709484a29..8b1e2b6ff4 100644 --- a/assets/src/modules/Lizmap.js +++ b/assets/src/modules/Lizmap.js @@ -167,7 +167,7 @@ export default class Lizmap { this.popup = new Popup(this.initialConfig, this.state, this.map, this.digitizing); this.legend = new Legend(this.state.layerTree); this.search = new Search(this.map, this.lizmap3); - this.tooltip = new Tooltip(); + this.tooltip = new Tooltip(this.map, this.initialConfig.tooltipLayers, this.lizmap3); this.locateByLayer = new LocateByLayer( this.initialConfig.locateByLayer, this.initialConfig.vectorLayerFeatureTypeList, diff --git a/assets/src/modules/Tooltip.js b/assets/src/modules/Tooltip.js index d3e17514be..27c4e1628e 100644 --- a/assets/src/modules/Tooltip.js +++ b/assets/src/modules/Tooltip.js @@ -4,7 +4,8 @@ * @copyright 2024 3Liz * @license MPL-2.0 */ -import { mainLizmap, mainEventDispatcher } from '../modules/Globals.js'; +import { mainEventDispatcher } from '../modules/Globals.js'; +import { TooltipLayersConfig } from './config/Tooltip.js'; import GeoJSON from 'ol/format/GeoJSON.js'; import VectorLayer from 'ol/layer/Vector.js'; import VectorSource from 'ol/source/Vector.js'; @@ -16,14 +17,23 @@ import { Circle, Fill, Stroke, Style } from 'ol/style.js'; */ export default class Tooltip { - constructor() { + /** + * Create the tooltip Map + * @param {Map} map - OpenLayers map + * @param {TooltipLayersConfig} tooltipLayersConfig - The config tooltipLayers + * @param {object} lizmap3 - The old lizmap object + */ + constructor(map, tooltipLayersConfig, lizmap3) { + this._map = map; + this._tooltipLayersConfig = tooltipLayersConfig; + this._lizmap3 = lizmap3; this._activeTooltipLayer; this._tooltipLayers = new Map(); } /** * Activate tooltip for a layer order - * @param {number} layerOrder + * @param {number} layerOrder a layer order */ activate(layerOrder) { if (layerOrder === "") { @@ -32,9 +42,9 @@ export default class Tooltip { } // Remove previous layer if any - mainLizmap.map.removeLayer(this._activeTooltipLayer); + this._map.removeLayer(this._activeTooltipLayer); - const layerTooltipCfg = mainLizmap.initialConfig.tooltipLayers.layerConfigs[layerOrder]; + const layerTooltipCfg = this._tooltipLayersConfig.layerConfigs[layerOrder]; const layerName = layerTooltipCfg.name; const tooltipLayer = this._tooltipLayers.get(layerName); this._displayGeom = layerTooltipCfg.displayGeom; @@ -115,7 +125,7 @@ export default class Tooltip { }); this._activeTooltipLayer.getSource().on('featuresloaderror', () => { - lizMap.addMessage(lizDict['tooltip.loading.error'], 'danger', true); + this._lizmap3.addMessage(lizDict['tooltip.loading.error'], 'danger', true); console.warn(`Tooltip layer '${layerName}' could not be loaded.`); }); @@ -124,14 +134,14 @@ export default class Tooltip { this._tooltipLayers.set(layerName, this._activeTooltipLayer); } - mainLizmap.map.addToolLayer(this._activeTooltipLayer); + this._map.addToolLayer(this._activeTooltipLayer); const tooltip = document.getElementById('tooltip'); let currentFeature; this._onPointerMove = event => { - const pixel = mainLizmap.map.getEventPixel(event.originalEvent); + const pixel = this._map.getEventPixel(event.originalEvent); const target = event.originalEvent.target; if (currentFeature) { @@ -146,7 +156,7 @@ export default class Tooltip { const feature = target.closest('.ol-control') ? undefined - : mainLizmap.map.forEachFeatureAtPixel(pixel, feature => { + : this._map.forEachFeatureAtPixel(pixel, feature => { return feature; // returning a truthy value stop detection }, { hitTolerance: 5, @@ -173,26 +183,26 @@ export default class Tooltip { currentFeature = feature; }; - mainLizmap.map.on('pointermove', this._onPointerMove); + this._map.on('pointermove', this._onPointerMove); this._onPointerLeave = () => { currentFeature = undefined; tooltip.style.visibility = 'hidden'; }; - mainLizmap.map.getTargetElement().addEventListener('pointerleave', this._onPointerLeave); + this._map.getTargetElement().addEventListener('pointerleave', this._onPointerLeave); } /** * Deactivate tooltip */ deactivate() { - mainLizmap.map.removeLayer(this._activeTooltipLayer); + this._map.removeLayer(this._activeTooltipLayer); if (this._onPointerMove) { - mainLizmap.map.un('pointermove', this._onPointerMove); + this._map.un('pointermove', this._onPointerMove); } if (this._onPointerLeave) { - mainLizmap.map.getTargetElement().removeEventListener('pointerleave', this._onPointerLeave); + this._map.getTargetElement().removeEventListener('pointerleave', this._onPointerLeave); } } }