UI: Improvement map control button tooltip; fix incorrect updated marker/polygon when editing

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

@@ -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
-              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
+            if (this.map.pm.Toolbar.getButtons().dragMode.disable !== disabledButton) {
+              this.map.pm.Toolbar.setButtonDisabled('dragMode', disabledButton);
               // @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);
+              }
             }
           }
         }

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

@@ -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();
+        });
+      }
     }
 }
 

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

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

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

@@ -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);
       }

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

@@ -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];