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

UI: New Maps - fix marker drag in clustering mode.

Browse Source
This commit is contained in:
Igor Kulikov 2025-04-08 11:19:17 +03:00
parent 099e3b6951
commit 6aff579f03
1 changed files with 25 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -396,6 +396,8 @@ class TbMarkerDataLayerItem extends TbLatestDataLayerItem<MarkersDataLayerSettin
private labelOffset: L.PointTuple;
private iconClassList: string[];
private moving = false;
private dragStart: () => void;
private dragEnd: () => void;
constructor(data: FormattedData<TbMapDatasource>,
dsData: FormattedData<TbMapDatasource>[],
@ -415,6 +417,8 @@ class TbMarkerDataLayerItem extends TbLatestDataLayerItem<MarkersDataLayerSettin
protected create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.Marker {
this.iconClassList = [];
const location = this.dataLayer.dataProcessor.extractLocation(data, dsData);
this.dragStart = this._dragStart.bind(this);
this.dragEnd = this._dragEnd.bind(this);
this.marker = L.marker(location, {
tbMarkerData: data,
snapIgnore: !this.dataLayer.isSnappable(),
@ -465,44 +469,28 @@ class TbMarkerDataLayerItem extends TbLatestDataLayerItem<MarkersDataLayerSettin
}
protected enableDrag(): void {
if (this.settings.markerClustering?.enable) {
this.marker.options.draggable = true;
this.marker.on('dragstart', () => {
this.moving = true;
});
this.marker.on('dragend', () => {
this.saveMarkerLocation();
this.moving = false;
});
} else {
this.marker.options.draggable = true;
this.marker.dragging?.enable();
if (!this.settings.markerClustering?.enable) {
this.marker.pm.setOptions({
snappable: this.dataLayer.isSnappable()
});
this.marker.pm.enableLayerDrag();
this.marker.on('pm:dragstart', () => {
(this.marker.dragging as any)._draggable = { _moved: true, off: (_args: any) => { return { disable: () => {}} } };
(this.marker.dragging as any)._enabled = true;
this.moving = true;
});
this.marker.on('pm:dragend', () => {
this.saveMarkerLocation();
delete (this.marker.dragging as any)._draggable;
delete (this.marker.dragging as any)._enabled;
this.moving = false;
});
}
const evtPrefix = this.settings.markerClustering?.enable ? '' : 'pm:';
this.marker.on(evtPrefix + 'dragstart', this.dragStart);
this.marker.on(evtPrefix + 'dragend', this.dragEnd);
}
protected disableDrag(): void {
if (this.settings.markerClustering?.enable) {
this.marker.options.draggable = false;
this.marker.off('dragstart');
this.marker.off('dragend');
} else {
this.marker.options.draggable = false;
this.marker.dragging?.disable();
if (!this.settings.markerClustering?.enable) {
this.marker.pm.disableLayerDrag();
this.marker.off('pm:dragstart');
this.marker.off('pm:dragend');
}
const evtPrefix = this.settings.markerClustering?.enable ? '' : 'pm:';
this.marker.off(evtPrefix + 'dragstart', this.dragStart);
this.marker.off(evtPrefix + 'dragend', this.dragEnd);
}
protected removeDataItemTitle(): string {
@ -513,6 +501,15 @@ class TbMarkerDataLayerItem extends TbLatestDataLayerItem<MarkersDataLayerSettin
return this.dataLayer.saveMarkerLocation(this.data, null);
}
private _dragStart() {
this.moving = true;
}
private _dragEnd() {
this.saveMarkerLocation();
this.moving = false;
}
private saveMarkerLocation() {
const location = this.marker.getLatLng();
this.dataLayer.saveMarkerLocation(this.data, location).subscribe();