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

UI: Map widgets - improve markers dragging - prevent click actions and popup open while dragging marker.

Browse Source
This commit is contained in:
Igor Kulikov 2022-01-25 10:52:13 +02:00
parent d416103e74
commit 362ca32407
2 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,6 +41,22 @@ export function createTooltip(target: L.Layer,
return popup; return popup;
} }
export function disablePopup(target: L.Layer) {
if (target.isPopupOpen()) {
target.closePopup();
}
target.unbindPopup();
target.off('popupopen');
}
export function enablePopup(target: L.Layer, popup: L.Popup,
settings: MarkerSettings | PolylineSettings | PolygonSettings, datasource: Datasource) {
target.bindPopup(popup);
target.on('popupopen', () => {
bindPopupActions(popup, settings, datasource);
});
}
export function bindPopupActions(popup: L.Popup, settings: MarkerSettings | PolylineSettings | PolygonSettings, export function bindPopupActions(popup: L.Popup, settings: MarkerSettings | PolylineSettings | PolygonSettings,
datasource: Datasource) { datasource: Datasource) {
const actions = popup.getElement().getElementsByClassName('tb-custom-action'); const actions = popup.getElement().getElementsByClassName('tb-custom-action');

29
ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts
View File

@ -23,7 +23,7 @@ import {
MarkerSettings, MarkerSettings,
UnitedMapSettings UnitedMapSettings
} from './map-models'; } from './map-models';
import { bindPopupActions, createTooltip, } from './maps-utils'; import { bindPopupActions, createTooltip, disablePopup, enablePopup, } from './maps-utils';
import { aspectCache, fillPattern, parseWithTranslation, processPattern, safeExecute } from './common-maps-utils'; import { aspectCache, fillPattern, parseWithTranslation, processPattern, safeExecute } from './common-maps-utils';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import { isDefined, isDefinedAndNotNull } from '@core/utils'; import { isDefined, isDefinedAndNotNull } from '@core/utils';
@ -37,6 +37,7 @@ export class Marker {
tooltip: L.Popup; tooltip: L.Popup;
data: FormattedData; data: FormattedData;
dataSources: FormattedData[]; dataSources: FormattedData[];
isDragging = false;
constructor(private map: LeafletMap, private location: L.LatLng, public settings: UnitedMapSettings, constructor(private map: LeafletMap, private location: L.LatLng, public settings: UnitedMapSettings,
data?: FormattedData, dataSources?, onDragendListener?) { data?: FormattedData, dataSources?, onDragendListener?) {
@ -64,17 +65,31 @@ export class Marker {
} }
if (this.settings.markerClick) { if (this.settings.markerClick) {
this.leafletMarker.on('click', (event: LeafletMouseEvent) => { if (!this.isDragging) {
for (const action in this.settings.markerClick) { this.leafletMarker.on('click', (event: LeafletMouseEvent) => {
for (const action in this.settings.markerClick) {
if (typeof (this.settings.markerClick[action]) === 'function') { if (typeof (this.settings.markerClick[action]) === 'function') {
this.settings.markerClick[action](event.originalEvent, this.data.$datasource); this.settings.markerClick[action](event.originalEvent, this.data.$datasource);
} }
} }
}); });
}
} }
if (settings.draggableMarker && onDragendListener) { if (settings.draggableMarker && onDragendListener) {
this.leafletMarker.on('pm:dragend', (e) => onDragendListener(e, this.data)); this.leafletMarker.on('pm:dragend', (e) => {
onDragendListener(e, this.data);
this.isDragging = false;
if (settings.showTooltip && settings.showTooltipAction === 'click') {
enablePopup(this.leafletMarker, this.tooltip, settings, this.data.$datasource);
}
});
this.leafletMarker.on('pm:dragstart', (e) => {
this.isDragging = true;
if (settings.showTooltip && settings.showTooltipAction === 'click') {
disablePopup(this.leafletMarker);
}
});
} }
} }