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