UI: Add map widget - disable edit or remove control button; added to hint create entity tooltip - entity name

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

@@ -89,6 +89,7 @@ export default abstract class LeafletMap {
     saveLocation: (e: FormattedData, values: {[key: string]: any}) => Observable<any>;
     saveMarkerLocation: (e: FormattedData, lat?: number, lng?: number) => Observable<any>;
     savePolygonLocation: (e: FormattedData, coordinates?: Array<any>) => Observable<any>;
+    translateService: TranslateService;
 
     protected constructor(public ctx: WidgetContext,
                           public $container: HTMLElement,
@@ -96,6 +97,7 @@ export default abstract class LeafletMap {
         this.options = options;
         this.editPolygons = options.showPolygon && options.editablePolygon;
         L.Icon.Default.imagePath = '/';
+        this.translateService = this.ctx.$injector.get(TranslateService);
     }
 
     public initSettings(options: MapSettings) {
@@ -171,6 +173,38 @@ export default abstract class LeafletMap {
         if (data !== null) {
           this.selectedEntity = data;
           this.toggleDrawMode(type);
+          let tooltipText;
+          let customTranslation;
+          switch (type) {
+            case 'tbMarker':
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.entityName});
+              // @ts-ignore
+              this.map.pm.Draw.tbMarker._hintMarker.setTooltipContent(tooltipText);
+              break;
+            case 'tbRectangle':
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityName});
+              // @ts-ignore
+              this.map.pm.Draw.tbRectangle._hintMarker.setTooltipContent(tooltipText);
+              customTranslation = {
+                tooltips: {
+                  finishRect: this.translateService.instant('widgets.maps.tooltips.finishRect', {entityName: data.entityName})
+                }
+              };
+              this.map.pm.setLang('en', customTranslation, 'en');
+              break;
+            case 'tbPolygon':
+              tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityName});
+              // @ts-ignore
+              this.map.pm.Draw.tbPolygon._hintMarker.setTooltipContent(tooltipText);
+              customTranslation = {
+                tooltips: {
+                  continueLine: this.translateService.instant('widgets.maps.tooltips.continueLine', {entityName: data.entityName}),
+                  finishPoly: this.translateService.instant('widgets.maps.tooltips.finishPoly', {entityName: data.entityName})
+                }
+              };
+              this.map.pm.setLang('en', customTranslation);
+              break;
+          }
         } else {
           // @ts-ignore
           this.map.pm.Toolbar.toggleButton(type, false);
@@ -231,8 +265,7 @@ export default abstract class LeafletMap {
         });
       }
 
-      const translateService = this.ctx.$injector.get(TranslateService);
+      this.map.pm.setLang('en', this.translateService.instant('widgets.maps'), 'en');
-      this.map.pm.setLang('en', translateService.instant('widgets.maps'), 'en');
       if (!this.options.hideAllControlButton) {
         this.map.pm.addControls({
           position: 'topleft',
@@ -494,16 +527,72 @@ export default abstract class LeafletMap {
         }
         this.updateMarkers(formattedData, false);
         this.updateBoundsInternal();
-        if (this.options.draggableMarker && !this.options.hideDrawControlButton) {
+        if (this.options.draggableMarker || this.editPolygons) {
-          const foundEntityWithoutLocation = formattedData.some(mData => !this.convertPosition(mData));
+          let foundEntityWithoutLocation = false;
-          this.map.pm.Toolbar.setButtonDisabled('tbMarker', !foundEntityWithoutLocation);
+          let foundEntityWithLocation = false;
-          this.datasources = formattedData;
+          let foundEntityWithoutPolygon = false;
-        }
+          let foundEntityWithPolygon = false;
-        if (this.editPolygons && !this.options.hideDrawControlButton) {
+
-          const foundEntityWithoutPolygon = formattedData.some(pData => !this.isValidPolygonPosition(pData));
+          if (this.options.draggableMarker && !this.options.hideDrawControlButton && !this.options.hideAllControlButton) {
-          this.map.pm.Toolbar.setButtonDisabled('tbPolygon', !foundEntityWithoutPolygon);
+            for (const mData of formattedData) {
-          this.map.pm.Toolbar.setButtonDisabled('tbRectangle', !foundEntityWithoutPolygon);
+              const position = this.convertPosition(mData);
-          this.datasources = formattedData;
+              if (!position) {
+                foundEntityWithoutLocation = true;
+              } else if (!!position) {
+                foundEntityWithLocation = true;
+              }
+              if (foundEntityWithoutLocation && foundEntityWithLocation) {
+                break;
+              }
+            }
+            this.map.pm.Toolbar.setButtonDisabled('tbMarker', !foundEntityWithoutLocation);
+            this.datasources = formattedData;
+          }
+
+          if (this.editPolygons && !this.options.hideDrawControlButton && !this.options.hideAllControlButton) {
+            for (const pData of formattedData) {
+              const isValidPolygon = this.isValidPolygonPosition(pData);
+              if (!isValidPolygon) {
+                foundEntityWithoutPolygon = true;
+              } else if (isValidPolygon) {
+                foundEntityWithPolygon = true;
+              }
+              if (foundEntityWithoutPolygon && foundEntityWithPolygon) {
+                break;
+              }
+            }
+            this.map.pm.Toolbar.setButtonDisabled('tbPolygon', !foundEntityWithoutPolygon);
+            this.map.pm.Toolbar.setButtonDisabled('tbRectangle', !foundEntityWithoutPolygon);
+            this.datasources = formattedData;
+          }
+          if (!this.options.hideRemoveControlButton && !this.options.hideAllControlButton) {
+            const disabledButton = !foundEntityWithLocation && !foundEntityWithPolygon;
+            if (disabledButton && this.map.pm.globalRemovalModeEnabled()) {
+              this.map.pm.toggleGlobalRemovalMode();
+            }
+            this.map.pm.Toolbar.setButtonDisabled('removalMode', disabledButton);
+          }
+          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
+              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);
+            }
+          }
         }
       } else {
         this.updatePending = true;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3322,12 +3322,12 @@
             "select-entity": "Select entity",
             "select-entity-hint": "Hint: after selection click at the map to set position",
             "tooltips": {
-                "placeMarker": "Click to place marker",
+                "placeMarker": "Click to place '{{entityName}}' entity",
-                "firstVertex": "Click to place first point",
+                "firstVertex": "Polygon for '{{entityName}}': click to place first point",
-                "continueLine": "Click to continue drawing",
+                "continueLine": "Polygon for '{{entityName}}': click to continue drawing",
                 "finishLine": "Click any existing marker to finish",
-                "finishPoly": "Click first marker to finish and save",
+                "finishPoly": "Polygon for '{{entityName}}': click first marker to finish and save",
-                "finishRect": "Click to finish and save",
+                "finishRect": "Polygon for '{{entityName}}': click to finish and save",
                 "startCircle": "Click to place circle center",
                 "finishCircle": "Click to finish circle",
                 "placeCircleMarker": "Click to place circle marker"
@@ -3338,10 +3338,10 @@
                 "removeLastVertex": "Remove last point"
             },
             "buttonTitles": {
-                "drawMarkerButton": "Create marker",
+                "drawMarkerButton": "Place entity",
                 "drawPolyButton": "Create polygon",
-                "drawLineButton": "Create Polyline",
+                "drawLineButton": "Create polyline",
-                "drawCircleButton": "Create Circle",
+                "drawCircleButton": "Create circle",
                 "drawRectButton": "Create rectangle",
                 "editButton": "Edit mode",
                 "dragButton": "Drag-drop mode",