dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: New map widget - refactor create tooltip in order to control layer interaction (including leaflet-geoman ugly behavior: disable/enable popups on toggle global draw mode)

Browse Source
This commit is contained in:
Igor Kulikov 2025-04-01 17:43:49 +03:00
parent 621d30c012
commit a043ca68ad
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/data-layer-utils.ts
View File

@ -29,35 +29,39 @@ export const createTooltip = (map: TbMap<any>,
settings: DataLayerTooltipSettings, settings: DataLayerTooltipSettings,
data: FormattedData<TbMapDatasource>, data: FormattedData<TbMapDatasource>,
canOpen: () => boolean): L.Popup => { canOpen: () => boolean): L.Popup => {
const tooltip = L.popup(); const tooltip = L.popup({autoClose: settings.autoclose, closeOnClick: false});
layer.bindPopup(tooltip, {autoClose: settings.autoclose, closeOnClick: false}); (tooltip as any)._source = layer;
layer.off('click'); layer.on('move', (e) => {
tooltip.setLatLng((e as any).latlng);
});
layer.on('remove', () => {
tooltip.close();
});
if (settings.trigger === DataLayerTooltipTrigger.click) { if (settings.trigger === DataLayerTooltipTrigger.click) {
layer.on('click', () => { layer.on('click', (e) => {
L.DomEvent.stop(e);
if (tooltip.isOpen()) { if (tooltip.isOpen()) {
layer.closePopup(); tooltip.close();
} else if (canOpen()) { } else if (canOpen()) {
layer.openPopup(); if ((tooltip as any)._prepareOpen((layer as any)._latlng)) {
tooltip.openOn(map.getMap());
}
} }
}); });
} else if (settings.trigger === DataLayerTooltipTrigger.hover) { } else if (settings.trigger === DataLayerTooltipTrigger.hover) {
layer.on('mouseover', () => { layer.on('mouseover', () => {
if (canOpen()) { if (canOpen()) {
layer.openPopup(); if ((tooltip as any)._prepareOpen((layer as any)._latlng)) {
tooltip.openOn(map.getMap());
}
} }
}); });
layer.on('mousemove', (e) => {
tooltip.setLatLng(e.latlng);
});
layer.on('mouseout', () => { layer.on('mouseout', () => {
layer.closePopup(); tooltip.close();
}); });
} }
layer.on('popupopen', () => { layer.on('popupopen', () => {
bindTooltipActions(map, tooltip, settings, data); bindTooltipActions(map, tooltip, settings, data);
(layer as any)._popup._closeButton.addEventListener('click', (event: Event) => {
event.preventDefault();
});
}); });
return tooltip; return tooltip;
} }