Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce mainLizmap dependencies in Tooltip module #5035

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Reduce mainLizmap dependencies in Tooltip module #5035

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/src/modules/Lizmap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export default class Lizmap {
this.popup = new Popup();
this.legend = new Legend();
this.search = new Search();
this.tooltip = new Tooltip();
this.tooltip = new Tooltip(this.map, this.initialConfig.tooltipLayers);

// Removed unusable button
if (!this.config['printTemplates'] || this.config.printTemplates.length == 0 ) {
Expand Down
32 changes: 20 additions & 12 deletions assets/src/modules/Tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -16,7 +17,14 @@ 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
*/
constructor(map, tooltipLayersConfig) {
this._map = map;
this._tooltipLayersConfig = tooltipLayersConfig;
this._activeTooltipLayer;
this._tooltipLayers = new Map();
}
Expand All @@ -32,9 +40,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;
Expand Down Expand Up @@ -124,14 +132,14 @@ export default class Tooltip {
this._tooltipLayers.set(layerName, this._activeTooltipLayer);
}

mainLizmap.map.addLayer(this._activeTooltipLayer);
this._map.addLayer(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) {
Expand All @@ -146,7 +154,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,
Expand All @@ -173,26 +181,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);
}
}
}
Loading