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

Merge pull request #6016 from vvlladd28/improvement/map/tooltip-disable

Browse Source 
[3.3.4] UI: Improvement map control button tooltip; fix incorrect updated marker/polygon when editing
This commit is contained in:
Igor Kulikov 2022-02-07 10:29:02 +02:00 committed by GitHub
commit 158f233daf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 91 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui-ngx/patches/@geoman-io+leaflet-geoman-free+2.11.4.patch Normal file
View File

File diff suppressed because one or more lines are too long

70
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View File

@ -400,6 +400,40 @@ export default abstract class LeafletMap {
this.updatePending = false;
this.updateData(this.drawRoutes, this.showPolygon);
}
this.createdControlButtonTooltip();
}
private createdControlButtonTooltip() {
import('tooltipster').then(() => {
$(this.ctx.$container)
.find('a[role="button"]:not(.leaflet-pm-action)')
.each((index, element) => {
let title;
if (element.children.length) {
title = (element.children[0] as HTMLElement).title;
$(element).children().removeAttr('title');
} else {
title = element.title;
$(element).removeAttr('title');
}
$(element).tooltipster(
{
content: title,
theme: 'tooltipster-shadow',
delay: 10,
triggerClose: {
click: true,
tap: true,
scroll: true,
mouseleave: true
},
side: 'right',
distance: 2,
trackOrigin: true
}
);
});
});
}
createLatLng(lat: number, lng: number): L.LatLng {
@ -545,7 +579,10 @@ export default abstract class LeafletMap {
break;
}
}
this.map.pm.Toolbar.setButtonDisabled('tbMarker', !foundEntityWithoutLocation);
// @ts-ignore
if (this.map.pm.Toolbar.getButtons().tbMarker.disable !== foundEntityWithoutLocation) {
this.map.pm.Toolbar.setButtonDisabled('tbMarker', !foundEntityWithoutLocation);
}
this.datasources = formattedData;
}
@ -561,8 +598,11 @@ export default abstract class LeafletMap {
break;
}
}
this.map.pm.Toolbar.setButtonDisabled('tbPolygon', !foundEntityWithoutPolygon);
this.map.pm.Toolbar.setButtonDisabled('tbRectangle', !foundEntityWithoutPolygon);
// @ts-ignore
if (this.map.pm.Toolbar.getButtons().tbPolygon.disable !== foundEntityWithoutPolygon) {
this.map.pm.Toolbar.setButtonDisabled('tbPolygon', !foundEntityWithoutPolygon);
this.map.pm.Toolbar.setButtonDisabled('tbRectangle', !foundEntityWithoutPolygon);
}
this.datasources = formattedData;
}
if (!this.options.hideRemoveControlButton && !this.options.hideAllControlButton) {
@ -574,23 +614,15 @@ export default abstract class LeafletMap {
}
if (!this.options.hideEditControlButton && !this.options.hideAllControlButton) {
const disabledButton = !foundEntityWithLocation && !foundEntityWithPolygon;
if (disabledButton) {
// @ts-ignore
if (this.map.pm.Toolbar.getButtons().dragMode.disable !== disabledButton) {
this.map.pm.Toolbar.setButtonDisabled('dragMode', disabledButton);
// @ts-ignore
this.map.pm.Toolbar.toggleButton('dragMode', false);
}
if (this.editPolygons && !foundEntityWithPolygon) {
// @ts-ignore
this.map.pm.Toolbar.toggleButton('editMode', false);
// @ts-ignore
this.map.pm.Toolbar.toggleButton('cutPolygon', false);
// @ts-ignore
this.map.pm.Toolbar.toggleButton('rotateMode', false);
}
this.map.pm.Toolbar.setButtonDisabled('dragMode', disabledButton);
if (this.editPolygons) {
this.map.pm.Toolbar.setButtonDisabled('editMode', !foundEntityWithPolygon);
this.map.pm.Toolbar.setButtonDisabled('cutPolygon', !foundEntityWithPolygon);
this.map.pm.Toolbar.setButtonDisabled('rotateMode', !foundEntityWithPolygon);
if (this.editPolygons && this.map.pm.Toolbar.getButtons().editMode.disable !== foundEntityWithPolygon) {
this.map.pm.Toolbar.setButtonDisabled('editMode', !foundEntityWithPolygon);
this.map.pm.Toolbar.setButtonDisabled('cutPolygon', !foundEntityWithPolygon);
this.map.pm.Toolbar.setButtonDisabled('rotateMode', !foundEntityWithPolygon);
}
}
}
}

6
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
View File

@ -309,6 +309,12 @@ export class MapWidgetController implements MapWidgetInterface {
if (this.map) {
this.map.remove();
}
if ($.tooltipster) {
const instances = $.tooltipster.instances();
instances.forEach((instance) => {
instance.destroy();
});
}
}
}

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

@ -41,7 +41,3 @@
.leaflet-container {
background-color: white;
}
.leaflet-buttons-control-button.pm-disabled {
pointer-events: none;
}

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

@ -30,6 +30,9 @@ import { isDefined, isDefinedAndNotNull } from '@core/utils';
import LeafletMap from './leaflet-map';
export class Marker {
private editing = false;
leafletMarker: L.Marker;
labelOffset: L.LatLngTuple;
tooltipOffset: L.LatLngTuple;
@ -77,11 +80,13 @@ export class Marker {
this.leafletMarker.on('pm:dragstart', (e) => {
(this.leafletMarker.dragging as any)._draggable = { _moved: true };
(this.leafletMarker.dragging as any)._enabled = true;
this.editing = true;
});
this.leafletMarker.on('pm:dragend', (e) => {
onDragendListener(e, this.data);
delete (this.leafletMarker.dragging as any)._draggable;
delete (this.leafletMarker.dragging as any)._enabled;
this.editing = false;
});
}
}
@ -105,7 +110,7 @@ export class Marker {
}
updateMarkerPosition(position: L.LatLng) {
if (!this.leafletMarker.getLatLng().equals(position)) {
if (!this.leafletMarker.getLatLng().equals(position) && !this.editing) {
this.location = position;
this.leafletMarker.setLatLng(position);
}

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

@ -27,6 +27,8 @@ import { FormattedData, PolygonSettings, UnitedMapSettings } from './map-models'
export class Polygon {
private editing = false;
leafletPoly: L.Polygon;
tooltip: L.Popup;
data: FormattedData;
@ -62,6 +64,8 @@ export class Polygon {
private createEventListeners() {
if (this.settings.editablePolygon && this.onDragendListener) {
this.leafletPoly.on('pm:markerdragstart', () => this.editing = true);
this.leafletPoly.on('pm:markerdragend', () => this.editing = false);
this.leafletPoly.on('pm:edit', (e) => this.onDragendListener(e, this.data));
}
@ -100,6 +104,9 @@ export class Polygon {
}
updatePolygon(data: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
if (this.editing) {
return;
}
this.data = data;
this.dataSources = dataSources;
const polyData = data[this.settings.polygonKeyName];