Merge pull request #12807 from vvlladd28/fix/map-widget/place-map-item

Fix process header widget action - place map item

ui-ngx/src/app/core/api/widget-api.models.ts

@@ -90,6 +90,13 @@ export interface IWidgetUtils {
   getEntityDetailsPageURL: (id: string, entityType: EntityType) => string;
 }
 
+export interface PlaceMapItemActionData {
+  action: WidgetAction;
+  additionalParams?: any;
+  afterPlaceItemCallback: ($event: Event, descriptor: WidgetAction, entityId?: EntityId, entityName?: string,
+                           additionalParams?: any, entityLabel?: string) => void;
+}
+
 export interface WidgetActionsApi {
   actionDescriptorsBySourceId: {[sourceId: string]: Array<WidgetActionDescriptor>};
   getActionDescriptors: (actionSourceId: string) => Array<WidgetActionDescriptor>;
@@ -106,6 +113,7 @@ export interface WidgetActionsApi {
                                 hideDashboardToolbar?: boolean, preferredPlacement?: PopoverPlacement,
                                 hideOnClickOutside?: boolean, popoverWidth?: string,
                                 popoverHeight?: string, popoverStyle?: { [klass: string]: any }) => void;
+  placeMapItem: (action: PlaceMapItemActionData) => void;
 }
 
 export interface AliasInfo {

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

@@ -17,7 +17,6 @@
 import {
   additionalMapDataSourcesToDatasources,
   BaseMapSettings,
-  CustomActionData,
   DataKeyValuePair,
   MapBooleanFunction,
   mapDataLayerTypes,
@@ -49,7 +48,7 @@ import {
   TbLatestMapDataLayer,
   UnplacedMapDataItem,
 } from '@home/components/widget/lib/maps/data-layer/latest-map-data-layer';
-import { IWidgetSubscription, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
+import { IWidgetSubscription, PlaceMapItemActionData, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
 import { FormattedData, MapItemType, WidgetAction, WidgetActionType, widgetType } from '@shared/models/widget.models';
 import { EntityDataPageLink } from '@shared/models/query/query.models';
 import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
@@ -64,10 +63,9 @@ import {
   SelectMapEntityPanelComponent
 } from '@home/components/widget/lib/maps/panels/select-map-entity-panel.component';
 import { TbPopoverComponent } from '@shared/components/popover.component';
-import { createColorMarkerShapeURI, MarkerShape } from '@home/components/widget/lib/maps/models/marker-shape.models';
+import { createPlaceItemIcon } from '@home/components/widget/lib/maps/models/marker-shape.models';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
-import tinycolor from 'tinycolor2';
 import { MapTimelinePanelComponent } from '@home/components/widget/lib/maps/panels/map-timeline-panel.component';
 import { ComponentRef } from '@angular/core';
 import { TbTripsDataLayer } from '@home/components/widget/lib/maps/data-layer/trips-data-layer';
@@ -138,6 +136,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
   protected constructor(protected ctx: WidgetContext,
                         protected inputSettings: DeepPartial<S>,
                         protected containerElement: HTMLElement) {
+    this.ctx.actionsApi.placeMapItem = this.placeMapItem.bind(this);
     this.settings = mergeDeepIgnoreArray({} as S, this.defaultSettings(), this.inputSettings as S);
 
     $(containerElement).empty();
@@ -550,90 +549,95 @@ export abstract class TbMap<S extends BaseMapSettings> {
   }
 
   private setupCustomActions() {
-    if (!this.settings.mapActionButtons) {
+    const widgetHeaderActions = this.ctx.actionsApi.getActionDescriptors('headerButton');
+    const mapActionButtons = this.settings.mapActionButtons;
+
+    const hasMarkerAction =
+      mapActionButtons?.some(actionButton => actionButton.action.mapItemType === MapItemType.marker) ||
+      widgetHeaderActions.some(action => action.type === WidgetActionType.placeMapItem && action.mapItemType === MapItemType.marker);
+
+    if (hasMarkerAction) {
+      this.setPlaceMarkerStyle();
+    }
+
+    if (!mapActionButtons?.length) {
       return;
     }
+
     this.customActionsToolbar = L.TB.topToolbar({
       mapElement: $(this.mapElement),
       iconRegistry: this.ctx.$injector.get(MatIconRegistry)
     });
 
-    const mapActionButtons = this.settings.mapActionButtons;
+    const customTranslate = this.ctx.$injector.get(CustomTranslatePipe);
 
-    if (mapActionButtons.length) {
+    mapActionButtons.forEach(actionButton => {
-      const customTranslate = this.ctx.$injector.get(CustomTranslatePipe);
+      const actionButtonConfig = {
+        icon: actionButton.icon,
+        color: actionButton.color,
+        title: customTranslate.transform(actionButton.label)
+      };
+      const toolbarButton = this.customActionsToolbar.toolbarButton(actionButtonConfig);
+      toolbarButton.onClick((e, button) => this.ctx.actionsApi.handleWidgetAction(e, actionButton.action, null, null, {button}));
+    });
+  }
 
-      if (mapActionButtons.some(actionButton => actionButton.action.mapItemType === MapItemType.marker)) {
+  public placeMapItem(actionData: PlaceMapItemActionData): void {
-        this.setPlaceMarkerStyle();
+    switch (actionData.action.mapItemType) {
-      }
+      case MapItemType.marker:
-
+        this.createMarker(actionData);
-      mapActionButtons.forEach(actionButton => {
+        break;
-        const actionButtonConfig = {
+      case MapItemType.polygon:
-          icon: actionButton.icon,
+        this.createPolygon(actionData);
-          color: actionButton.color,
+        break;
-          title: customTranslate.transform(actionButton.label)
+      case MapItemType.rectangle:
-        };
+        this.createRectangle(actionData);
-        const toolbarButton = this.customActionsToolbar.toolbarButton(actionButtonConfig);
+        break;
-        if (actionButton.action.type !== WidgetActionType.placeMapItem) {
+      case MapItemType.circle:
-          toolbarButton.onClick((e) => this.ctx.actionsApi.handleWidgetAction(e, actionButton.action));
+        this.createCircle(actionData);
-        } else {
+        break;
-          switch (actionButton.action.mapItemType) {
-            case MapItemType.marker:
-              toolbarButton.onClick((e, button) => this.createMarker(e, {button, action: actionButton.action}));
-              break;
-            case MapItemType.polygon:
-              toolbarButton.onClick((e, button) => this.createPolygon(e, {button, action: actionButton.action}));
-              break;
-            case MapItemType.rectangle:
-              toolbarButton.onClick((e, button) => this.createRectangle(e, {button, action: actionButton.action}));
-              break;
-            case MapItemType.circle:
-              toolbarButton.onClick((e, button) => this.createCircle(e, {button, action: actionButton.action}));
-              break;
-          }
-        }
-      });
     }
   }
 
-  private createMarker(e: MouseEvent, actionData: CustomActionData) {
+  private createMarker(actionData: PlaceMapItemActionData) {
-    this.createItem(e, actionData, () => this.prepareDrawMode('Marker', {
+    this.createItem(actionData, () => this.prepareDrawMode('Marker', {
       placeMarker: this.ctx.translate.instant('widgets.maps.data-layer.marker.place-marker-hint')
     }));
   }
 
-  private createRectangle(e: MouseEvent, actionData: CustomActionData): void {
+  private createRectangle(actionData: PlaceMapItemActionData): void {
-    this.createItem(e, actionData, () => this.prepareDrawMode('Rectangle', {
+    this.createItem(actionData, () => this.prepareDrawMode('Rectangle', {
       firstVertex: this.ctx.translate.instant('widgets.maps.data-layer.polygon.rectangle-place-first-point-hint'),
       finishRect: this.ctx.translate.instant('widgets.maps.data-layer.polygon.finish-rectangle-hint')
     }));
   }
 
-  private createPolygon(e: MouseEvent, actionData: CustomActionData): void {
+  private createPolygon(actionData: PlaceMapItemActionData): void {
-    this.createItem(e, actionData, () => this.prepareDrawMode('Polygon', {
+    this.createItem(actionData, () => this.prepareDrawMode('Polygon', {
       firstVertex: this.ctx.translate.instant('widgets.maps.data-layer.polygon.polygon-place-first-point-hint'),
       continueLine: this.ctx.translate.instant('widgets.maps.data-layer.polygon.continue-polygon-hint'),
       finishPoly: this.ctx.translate.instant('widgets.maps.data-layer.polygon.finish-polygon-hint')
     }));
   }
 
-  private createCircle(e: MouseEvent, actionData: CustomActionData): void {
+  private createCircle(actionData: PlaceMapItemActionData): void {
-    this.createItem(e, actionData, () => this.prepareDrawMode('Circle', {
+    this.createItem(actionData, () => this.prepareDrawMode('Circle', {
       startCircle: this.ctx.translate.instant('widgets.maps.data-layer.circle.place-circle-center-hint'),
       finishCircle: this.ctx.translate.instant('widgets.maps.data-layer.circle.finish-circle-hint')
     }));
   }
 
-  private createItem(_e: MouseEvent, actionData: CustomActionData, prepareDrawMode: () => void) {
+  private createItem(actionData: PlaceMapItemActionData, prepareDrawMode: () => void) {
     if (this.isPlacingItem) {
       return;
     }
-    this.updatePlaceItemState(actionData.button);
+    this.updatePlaceItemState(actionData.additionalParams?.button, true);
 
     this.map.once('pm:create', (e) => {
-      this.ctx.actionsApi.handleWidgetAction(e as any, actionData.action, null, null, {
+      actionData.afterPlaceItemCallback(e as any, actionData.action, null, null, {
         coordinates: convertLayerToCoordinates(actionData.action.mapItemType, e.layer),
-        layer: e.layer
+        layer: e.layer,
+        button: actionData.additionalParams?.button
       });
 
       // @ts-ignore
@@ -702,7 +706,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
     L.DomUtil.addClass(this.map.pm.Draw[shape]._hintMarker.getTooltip()._container, 'tb-place-item-label');
   }
 
-  private updatePlaceItemState(addButton?: L.TB.ToolbarButton): void {
+  private updatePlaceItemState(addButton?: L.TB.ToolbarButton, disabled = false): void {
     if (addButton) {
       this.deselectItem(false, true);
       addButton.setActive(true);
@@ -710,7 +714,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
       this.currentAddButton.setActive(false);
     }
     this.currentAddButton = addButton;
-    this.updateAddButtonsStates();
+    this.updateAddButtonsStates(disabled);
   }
 
   private createdControlButtonTooltip(root: HTMLElement, side: TooltipPositioningSide) {
@@ -882,8 +886,8 @@ export abstract class TbMap<S extends BaseMapSettings> {
     }
   }
 
-  private updateAddButtonsStates() {
+  private updateAddButtonsStates(disabled = false) {
-    if (this.currentAddButton) {
+    if (this.currentAddButton || disabled) {
       if (this.addMarkerButton && this.addMarkerButton !== this.currentAddButton) {
         this.addMarkerButton.setDisabled(true);
       }
@@ -915,7 +919,7 @@ export abstract class TbMap<S extends BaseMapSettings> {
   }
 
   private setPlaceMarkerStyle() {
-    createColorMarkerShapeURI(this.getCtx().$injector.get(MatIconRegistry), this.getCtx().$injector.get(DomSanitizer), MarkerShape.markerShape1, tinycolor('rgba(255,255,255,0.75)')).subscribe(
+    createPlaceItemIcon(this.getCtx().$injector.get(MatIconRegistry), this.getCtx().$injector.get(DomSanitizer)).subscribe(
       ((iconUrl) => {
         const icon = L.icon({
           iconUrl,

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

@@ -1034,11 +1034,6 @@ export interface MarkerIconInfo {
   size: [number, number];
 }
 
-export interface CustomActionData {
-  button: L.TB.TopToolbarButton;
-  action: WidgetAction;
-}
-
 export type MapStringFunction = (data: FormattedData<TbMapDatasource>,
                                  dsData: FormattedData<TbMapDatasource>[]) => string;
 

ui-ngx/src/app/modules/home/components/widget/lib/maps/models/marker-shape.models.ts

@@ -17,10 +17,10 @@
 import tinycolor from 'tinycolor2';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
-import { Observable, of, switchMap } from 'rxjs';
+import { Observable, of, shareReplay, switchMap } from 'rxjs';
 import { catchError, map, take } from 'rxjs/operators';
 import { isSvgIcon, splitIconName } from '@shared/models/icon.models';
-import { Element, Text, G } from '@svgdotjs/svg.js';
+import { Element, G, Text } from '@svgdotjs/svg.js';
 
 export enum MarkerShape {
   markerShape1 = 'markerShape1',
@@ -203,3 +203,14 @@ export const createColorMarkerIconElement = (iconRegistry: MatIconRegistry, domS
   );
 }
 
+let placeItemIconURI$: Observable<string>;
+
+export const createPlaceItemIcon= (iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer): Observable<string> => {
+  if (placeItemIconURI$) {
+    return placeItemIconURI$;
+  }
+  placeItemIconURI$ = createColorMarkerShapeURI(iconRegistry, domSanitizer, MarkerShape.markerShape1, tinycolor('rgba(255,255,255,0.75)')).pipe(
+    shareReplay({refCount: true, bufferSize: 1})
+  );
+  return placeItemIconURI$;
+}

ui-ngx/src/app/modules/home/components/widget/widget.component.ts

@@ -273,7 +273,8 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
       click: this.click.bind(this),
       getActiveEntityInfo: this.getActiveEntityInfo.bind(this),
       openDashboardStateInSeparateDialog: this.openDashboardStateInSeparateDialog.bind(this),
-      openDashboardStateInPopover: this.openDashboardStateInPopover.bind(this)
+      openDashboardStateInPopover: this.openDashboardStateInPopover.bind(this),
+      placeMapItem: () => {}
     };
 
     this.widgetContext.customHeaderActions = [];
@@ -1150,45 +1151,15 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
         }
         break;
       case WidgetActionType.placeMapItem:
-      case WidgetActionType.customPretty:
+        this.widgetContext.actionsApi.placeMapItem({
-        const customPrettyFunction = descriptor.customFunction;
+          action: descriptor,
-        const customHtml = descriptor.customHtml;
+          afterPlaceItemCallback: this.executeCustomPrettyAction.bind(this),
-        const customCss = descriptor.customCss;
+          additionalParams: additionalParams
-        const customResources = descriptor.customResources;
-        const actionNamespace = `custom-action-pretty-${guid()}`;
-        let htmlTemplate = '';
-        if (isDefined(customHtml) && customHtml.length > 0) {
-          htmlTemplate = customHtml;
-        }
-        this.loadCustomActionResources(actionNamespace, customCss, customResources, descriptor).subscribe({
-          next: () => {
-            if (isNotEmptyTbFunction(customPrettyFunction)) {
-              compileTbFunction(this.http, customPrettyFunction, '$event', 'widgetContext', 'entityId',
-                'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel').subscribe(
-                {
-                  next: (compiled) => {
-                    try {
-                      if (!additionalParams) {
-                        additionalParams = {};
-                      }
-                      this.widgetContext.customDialog.setAdditionalImports(descriptor.customImports);
-                      compiled.execute($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
-                    } catch (e) {
-                      console.error(e);
-                    }
-                  },
-                  error: (err) => {
-                    console.error(err);
-                  }
-                }
-              )
-            }
-          },
-          error: (errorMessages: string[]) => {
-            this.processResourcesLoadErrors(errorMessages);
-          }
         });
         break;
+      case WidgetActionType.customPretty:
+        this.executeCustomPrettyAction($event, descriptor, entityId, entityName, additionalParams, entityLabel);
+        break;
       case WidgetActionType.mobileAction:
         const mobileAction = descriptor.mobileAction;
         this.handleMobileAction($event, mobileAction, entityId, entityName, additionalParams, entityLabel);
@@ -1559,6 +1530,45 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     this.handleWidgetAction($event, action, entityId, entityName, null, entityLabel);
   }
 
+  private executeCustomPrettyAction($event: Event, descriptor: WidgetAction, entityId?: EntityId,
+                                    entityName?: string, additionalParams?: any, entityLabel?: string) {
+    const customPrettyFunction = descriptor.customFunction;
+    const customHtml = descriptor.customHtml;
+    const customCss = descriptor.customCss;
+    const customResources = descriptor.customResources;
+    const actionNamespace = `custom-action-pretty-${guid()}`;
+    let htmlTemplate = '';
+    if (isDefined(customHtml) && customHtml.length > 0) {
+      htmlTemplate = customHtml;
+    }
+    this.loadCustomActionResources(actionNamespace, customCss, customResources, descriptor).subscribe({
+      next: () => {
+        if (isNotEmptyTbFunction(customPrettyFunction)) {
+          compileTbFunction(this.http, customPrettyFunction, '$event', 'widgetContext', 'entityId',
+            'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel').subscribe({
+            next: (compiled) => {
+              try {
+                if (!additionalParams) {
+                  additionalParams = {};
+                }
+                this.widgetContext.customDialog.setAdditionalImports(descriptor.customImports);
+                compiled.execute($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel);
+              } catch (e) {
+                console.error(e);
+              }
+            },
+            error: (err) => {
+              console.error(err);
+            }
+          });
+        }
+      },
+      error: (errorMessages: string[]) => {
+        this.processResourcesLoadErrors(errorMessages);
+      }
+    });
+  }
+
   private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array<WidgetResource>,
                                     actionDescriptor: WidgetAction): Observable<any> {
     const resourceTasks: Observable<string>[] = [];