Merge pull request #12807 from vvlladd28/fix/map-widget/place-map-item
Fix process header widget action - place map item
This commit is contained in:
Igor Kulikov
GitHub
commit
02008a95a1
@ -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 {
|
||||
|
||||
@ -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,23 +549,28 @@ 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;
|
||||
|
||||
if (mapActionButtons.length) {
|
||||
const customTranslate = this.ctx.$injector.get(CustomTranslatePipe);
|
||||
|
||||
if (mapActionButtons.some(actionButton => actionButton.action.mapItemType === MapItemType.marker)) {
|
||||
this.setPlaceMarkerStyle();
|
||||
}
|
||||
|
||||
mapActionButtons.forEach(actionButton => {
|
||||
const actionButtonConfig = {
|
||||
icon: actionButton.icon,
|
||||
@ -574,66 +578,66 @@ export abstract class TbMap<S extends BaseMapSettings> {
|
||||
title: customTranslate.transform(actionButton.label)
|
||||
};
|
||||
const toolbarButton = this.customActionsToolbar.toolbarButton(actionButtonConfig);
|
||||
if (actionButton.action.type !== WidgetActionType.placeMapItem) {
|
||||
toolbarButton.onClick((e) => this.ctx.actionsApi.handleWidgetAction(e, actionButton.action));
|
||||
} else {
|
||||
switch (actionButton.action.mapItemType) {
|
||||
toolbarButton.onClick((e, button) => this.ctx.actionsApi.handleWidgetAction(e, actionButton.action, null, null, {button}));
|
||||
});
|
||||
}
|
||||
|
||||
public placeMapItem(actionData: PlaceMapItemActionData): void {
|
||||
switch (actionData.action.mapItemType) {
|
||||
case MapItemType.marker:
|
||||
toolbarButton.onClick((e, button) => this.createMarker(e, {button, action: actionButton.action}));
|
||||
this.createMarker(actionData);
|
||||
break;
|
||||
case MapItemType.polygon:
|
||||
toolbarButton.onClick((e, button) => this.createPolygon(e, {button, action: actionButton.action}));
|
||||
this.createPolygon(actionData);
|
||||
break;
|
||||
case MapItemType.rectangle:
|
||||
toolbarButton.onClick((e, button) => this.createRectangle(e, {button, action: actionButton.action}));
|
||||
this.createRectangle(actionData);
|
||||
break;
|
||||
case MapItemType.circle:
|
||||
toolbarButton.onClick((e, button) => this.createCircle(e, {button, action: actionButton.action}));
|
||||
this.createCircle(actionData);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private createMarker(e: MouseEvent, actionData: CustomActionData) {
|
||||
this.createItem(e, actionData, () => this.prepareDrawMode('Marker', {
|
||||
private createMarker(actionData: PlaceMapItemActionData) {
|
||||
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 {
|
||||
this.createItem(e, actionData, () => this.prepareDrawMode('Rectangle', {
|
||||
private createRectangle(actionData: PlaceMapItemActionData): void {
|
||||
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 {
|
||||
this.createItem(e, actionData, () => this.prepareDrawMode('Polygon', {
|
||||
private createPolygon(actionData: PlaceMapItemActionData): void {
|
||||
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 {
|
||||
this.createItem(e, actionData, () => this.prepareDrawMode('Circle', {
|
||||
private createCircle(actionData: PlaceMapItemActionData): void {
|
||||
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() {
|
||||
if (this.currentAddButton) {
|
||||
private updateAddButtonsStates(disabled = false) {
|
||||
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,
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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$;
|
||||
}
|
||||
|
||||
@ -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:
|
||||
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);
|
||||
}
|
||||
this.widgetContext.actionsApi.placeMapItem({
|
||||
action: descriptor,
|
||||
afterPlaceItemCallback: this.executeCustomPrettyAction.bind(this),
|
||||
additionalParams: additionalParams
|
||||
});
|
||||
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>[] = [];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user