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

UI: Map - add show marker option for trips.

Browse Source
This commit is contained in:
Igor Kulikov 2025-03-06 19:08:39 +02:00
parent 14de7726c2
commit ac03bf27a3
5 changed files with 217 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts
View File

@ -149,37 +149,41 @@ class TbTripDataItem extends TbDataLayerItem<TripsDataLayerSettings, TbTripsData
} }
private createMarker() { private createMarker() {
const dsData = this.dataLayer.getMap().getData(); if (this.settings.showMarker) {
const location = this.dataLayer.dataProcessor.extractLocation(this.pointData, dsData); const dsData = this.dataLayer.getMap().getData();
this.marker = L.marker(location, { const location = this.dataLayer.dataProcessor.extractLocation(this.pointData, dsData);
tbMarkerData: this.pointData, this.marker = L.marker(location, {
snapIgnore: true tbMarkerData: this.pointData,
}); snapIgnore: true
this.marker.addTo(this.layer);
this.updateMarkerIcon(this.pointData, dsData);
if (this.settings.tooltip?.show) {
this.markerTooltip = createTooltip(this.dataLayer.getMap(),
this.marker, this.settings.tooltip, this.pointData, () => true);
updateTooltip(this.dataLayer.getMap(), this.markerTooltip,
this.settings.tooltip, this.dataLayer.dataLayerTooltipProcessor, this.pointData, dsData);
}
const clickAction = this.settings.click;
if (clickAction && clickAction.type !== WidgetActionType.doNothing) {
this.marker.on('click', (event) => {
this.dataLayer.getMap().dataItemClick(event.originalEvent, clickAction, this.pointData);
}); });
this.marker.addTo(this.layer);
this.updateMarkerIcon(this.pointData, dsData);
if (this.settings.tooltip?.show) {
this.markerTooltip = createTooltip(this.dataLayer.getMap(),
this.marker, this.settings.tooltip, this.pointData, () => true);
updateTooltip(this.dataLayer.getMap(), this.markerTooltip,
this.settings.tooltip, this.dataLayer.dataLayerTooltipProcessor, this.pointData, dsData);
}
const clickAction = this.settings.click;
if (clickAction && clickAction.type !== WidgetActionType.doNothing) {
this.marker.on('click', (event) => {
this.dataLayer.getMap().dataItemClick(event.originalEvent, clickAction, this.pointData);
});
}
} }
} }
private updateMarker() { private updateMarker() {
const dsData = this.dataLayer.getMap().getData(); if (this.settings.showMarker) {
this.marker.options.tbMarkerData = this.pointData; const dsData = this.dataLayer.getMap().getData();
this.updateMarkerLocation(this.pointData, dsData); this.marker.options.tbMarkerData = this.pointData;
if (this.settings.tooltip.show) { this.updateMarkerLocation(this.pointData, dsData);
updateTooltip(this.dataLayer.getMap(), this.markerTooltip, if (this.settings.tooltip.show) {
this.settings.tooltip, this.dataLayer.dataLayerTooltipProcessor, this.pointData, dsData); updateTooltip(this.dataLayer.getMap(), this.markerTooltip,
this.settings.tooltip, this.dataLayer.dataLayerTooltipProcessor, this.pointData, dsData);
}
this.updateMarkerIcon(this.pointData, dsData);
} }
this.updateMarkerIcon(this.pointData, dsData);
} }
private createPath() { private createPath() {
@ -262,19 +266,21 @@ class TbTripDataItem extends TbDataLayerItem<TripsDataLayerSettings, TbTripsData
} }
private updateMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) { private updateMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) {
this.dataLayer.dataProcessor.createMarkerIcon(data, dsData, data.rotationAngle).subscribe( if (this.settings.showMarker) {
(iconInfo) => { this.dataLayer.dataProcessor.createMarkerIcon(data, dsData, data.rotationAngle).subscribe(
const options = deepClone(iconInfo.icon.options); (iconInfo) => {
this.marker.setIcon(iconInfo.icon); const options = deepClone(iconInfo.icon.options);
const anchor = options.iconAnchor; this.marker.setIcon(iconInfo.icon);
if (anchor && Array.isArray(anchor)) { const anchor = options.iconAnchor;
this.labelOffset = [iconInfo.size[0] / 2 - anchor[0], 10 - anchor[1]]; if (anchor && Array.isArray(anchor)) {
} else { this.labelOffset = [iconInfo.size[0] / 2 - anchor[0], 10 - anchor[1]];
this.labelOffset = [0, -iconInfo.size[1] * this.dataLayer.markerOffset[1] + 10]; } else {
this.labelOffset = [0, -iconInfo.size[1] * this.dataLayer.markerOffset[1] + 10];
}
this.updateMarkerLabel(data, dsData);
} }
this.updateMarkerLabel(data, dsData); );
} }
);
} }
private updateMarkerLabel(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) { private updateMarkerLabel(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) {
@ -384,6 +390,10 @@ export class TbTripsDataLayer extends TbMapDataLayer<TripsDataLayerSettings, TbT
return 'trips'; return 'trips';
} }
public showMarker(): boolean {
return this.settings.showMarker;
}
public prepareTripsData(tripsData: FormattedData<TbMapDatasource>[][], tripsLatestData: FormattedData<TbMapDatasource>[]): {minTime: number; maxTime: number} { public prepareTripsData(tripsData: FormattedData<TbMapDatasource>[][], tripsLatestData: FormattedData<TbMapDatasource>[]): {minTime: number; maxTime: number} {
let minTime = Infinity; let minTime = Infinity;
let maxTime = -Infinity; let maxTime = -Infinity;

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

@ -148,23 +148,6 @@ export abstract class TbMap<S extends BaseMapSettings> {
this.mapLayoutElement = mapLayoutElement[0]; this.mapLayoutElement = mapLayoutElement[0];
$(containerElement).append(mapLayoutElement); $(containerElement).append(mapLayoutElement);
if (this.settings.tripTimeline?.showTimelineControl) {
this.timeline = true;
this.timeStep = this.settings.tripTimeline.timeStep;
this.timeLineComponentRef = this.ctx.widgetContentContainer.createComponent(MapTimelinePanelComponent);
this.timeLineComponent = this.timeLineComponentRef.instance;
this.timeLineComponent.settings = this.settings.tripTimeline;
this.timeLineComponent.timeChanged.subscribe((time) => {
this.currentTime = time;
this.updateTripsTime();
});
const parentElement = this.timeLineComponentRef.instance.element.nativeElement;
const content = parentElement.firstChild;
parentElement.removeChild(content);
parentElement.style.display = 'none';
containerElement.append(content);
}
const mapElement = $('<div class="tb-map"></div>'); const mapElement = $('<div class="tb-map"></div>');
mapLayoutElement.append(mapElement); mapLayoutElement.append(mapElement);
@ -380,6 +363,27 @@ export abstract class TbMap<S extends BaseMapSettings> {
} }
private setupEditMode() { private setupEditMode() {
const tripsWithMarkers = this.tripDataLayers.filter(dl => dl.showMarker());
const showTimeline = this.settings.tripTimeline?.showTimelineControl && tripsWithMarkers.length;
if (showTimeline) {
this.timeline = true;
this.timeStep = this.settings.tripTimeline.timeStep;
this.timeLineComponentRef = this.ctx.widgetContentContainer.createComponent(MapTimelinePanelComponent);
this.timeLineComponent = this.timeLineComponentRef.instance;
this.timeLineComponent.settings = this.settings.tripTimeline;
this.timeLineComponent.timeChanged.subscribe((time) => {
this.currentTime = time;
this.updateTripsTime();
});
const parentElement = this.timeLineComponentRef.instance.element.nativeElement;
const content = parentElement.firstChild;
parentElement.removeChild(content);
parentElement.style.display = 'none';
this.containerElement.append(content);
}
this.editToolbar = L.TB.bottomToolbar({ this.editToolbar = L.TB.bottomToolbar({
mapElement: $(this.mapElement), mapElement: $(this.mapElement),
closeTitle: this.ctx.translate.instant('action.cancel'), closeTitle: this.ctx.translate.instant('action.cancel'),

119
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
View File

@ -176,58 +176,73 @@
<div class="tb-form-panel"> <div class="tb-form-panel">
<div class="tb-form-panel-title">{{ 'widget-config.appearance' | translate }}</div> <div class="tb-form-panel-title">{{ 'widget-config.appearance' | translate }}</div>
<ng-container *ngIf="['trips', 'markers'].includes(dataLayerType)"> <ng-container *ngIf="['trips', 'markers'].includes(dataLayerType)">
<div class="tb-form-panel stroked"> <div class="tb-form-panel tb-slide-toggle stroked">
<div class="flex flex-row items-center justify-between"> <mat-expansion-panel #markerExpansionPanel class="tb-settings" [expanded]="dataLayerType === 'markers' || dataLayerFormGroup.get('showMarker').value"
<div class="tb-form-panel-title">{{ 'widgets.maps.data-layer.marker.marker' | translate }}</div> [disabled]="dataLayerType === 'trips' && !dataLayerFormGroup.get('showMarker').value">
<tb-toggle-select formControlName="markerType"> <mat-expansion-panel-header class="flex flex-row flex-wrap">
<tb-toggle-option [value]="MarkerType.shape">{{ 'widgets.maps.data-layer.marker.marker-type-shape' | translate }}</tb-toggle-option> <mat-panel-title>
<tb-toggle-option [value]="MarkerType.icon">{{ 'widgets.maps.data-layer.marker.marker-type-icon' | translate }}</tb-toggle-option> <div class="flex flex-1 flex-row items-center justify-between">
<tb-toggle-option [value]="MarkerType.image">{{ 'widgets.maps.data-layer.marker.marker-type-image' | translate }}</tb-toggle-option> @if (dataLayerType === 'markers') {
</tb-toggle-select> <div class="tb-form-panel-title">{{ 'widgets.maps.data-layer.marker.marker' | translate }}</div>
</div> } @else {
<div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.shape" class="tb-form-row space-between"> <mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showMarker" (click)="$event.stopPropagation()">
<div translate>widgets.maps.data-layer.marker.shape</div> <div class="tb-form-panel-title">{{ 'widgets.maps.data-layer.marker.marker' | translate }}</div>
<tb-marker-shape-settings formControlName="markerShape" [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.shape"></tb-marker-shape-settings> </mat-slide-toggle>
</div> }
<div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.icon" class="tb-form-row space-between"> <tb-toggle-select [class.!hidden]="!markerExpansionPanel.expanded" formControlName="markerType" (click)="$event.stopPropagation()">
<div translate>widgets.maps.data-layer.marker.icon</div> <tb-toggle-option [value]="MarkerType.shape">{{ 'widgets.maps.data-layer.marker.marker-type-shape' | translate }}</tb-toggle-option>
<tb-marker-shape-settings formControlName="markerIcon" [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.icon"></tb-marker-shape-settings> <tb-toggle-option [value]="MarkerType.icon">{{ 'widgets.maps.data-layer.marker.marker-type-icon' | translate }}</tb-toggle-option>
</div> <tb-toggle-option [value]="MarkerType.image">{{ 'widgets.maps.data-layer.marker.marker-type-image' | translate }}</tb-toggle-option>
<div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.image" class="tb-form-row space-between"> </tb-toggle-select>
<div translate>widgets.maps.data-layer.marker.image</div> </div>
<tb-marker-image-settings formControlName="markerImage"></tb-marker-image-settings> </mat-panel-title>
</div> </mat-expansion-panel-header>
<div class="tb-form-row space-between column-xs"> <ng-template matExpansionPanelContent>
<div translate>widgets.maps.data-layer.marker.marker-offset</div> <div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.shape" class="tb-form-row space-between">
<div class="flex flex-row items-center justify-start gap-2"> <div translate>widgets.maps.data-layer.marker.shape</div>
<div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-horizontal</div> <tb-marker-shape-settings formControlName="markerShape" [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.shape"></tb-marker-shape-settings>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> </div>
<input matInput formControlName="markerOffsetX" <div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.icon" class="tb-form-row space-between">
type="number" placeholder="{{ 'widget-config.set' | translate }}"> <div translate>widgets.maps.data-layer.marker.icon</div>
</mat-form-field> <tb-marker-shape-settings formControlName="markerIcon" [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.icon"></tb-marker-shape-settings>
<div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-vertical</div> </div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> <div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.image" class="tb-form-row space-between">
<input matInput formControlName="markerOffsetY" <div translate>widgets.maps.data-layer.marker.image</div>
type="number" placeholder="{{ 'widget-config.set' | translate }}"> <tb-marker-image-settings formControlName="markerImage"></tb-marker-image-settings>
</mat-form-field> </div>
</div> <div class="tb-form-row space-between column-xs">
</div> <div translate>widgets.maps.data-layer.marker.marker-offset</div>
<div *ngIf="dataLayerType === 'trips'" class="tb-form-row space-between"> <div class="flex flex-row items-center justify-start gap-2">
<mat-slide-toggle class="mat-slide" formControlName="rotateMarker"> <div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-horizontal</div>
{{ 'widgets.maps.data-layer.marker.rotate-marker' | translate }} <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
</mat-slide-toggle> <input matInput formControlName="markerOffsetX"
<div class="flex flex-row items-center justify-start gap-2"> type="number" placeholder="{{ 'widget-config.set' | translate }}">
<div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-angle</div> </mat-form-field>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> <div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-vertical</div>
<input matInput formControlName="offsetAngle" type="number" min="0" max="360" step="1" placeholder="{{ 'widget-config.set' | translate }}"> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<div matSuffix>deg</div> <input matInput formControlName="markerOffsetY"
</mat-form-field> type="number" placeholder="{{ 'widget-config.set' | translate }}">
</div> </mat-form-field>
</div> </div>
@if (dataLayerType === 'trips') { </div>
<ng-container *ngTemplateOutlet="dataLayerLabelAndTooltip"></ng-container> <div *ngIf="dataLayerType === 'trips'" class="tb-form-row space-between">
<ng-container *ngTemplateOutlet="behavior; context: {stroked: true}"></ng-container> <mat-slide-toggle class="mat-slide" formControlName="rotateMarker">
} {{ 'widgets.maps.data-layer.marker.rotate-marker' | translate }}
</mat-slide-toggle>
<div class="flex flex-row items-center justify-start gap-2">
<div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-angle</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="offsetAngle" type="number" min="0" max="360" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<div matSuffix>deg</div>
</mat-form-field>
</div>
</div>
@if (dataLayerType === 'trips') {
<ng-container *ngTemplateOutlet="dataLayerLabelAndTooltip"></ng-container>
<ng-container *ngTemplateOutlet="behavior; context: {stroked: true}"></ng-container>
}
</ng-template>
</mat-expansion-panel>
</div> </div>
<div *ngIf="mapType === MapType.image" class="tb-form-panel stroked"> <div *ngIf="mapType === MapType.image" class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>widgets.maps.data-layer.marker.position-conversion</div> <div class="tb-form-panel-title" translate>widgets.maps.data-layer.marker.position-conversion</div>

131
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts
View File

@ -168,6 +168,7 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
const tripsDataLayer = this.settings as TripsDataLayerSettings; const tripsDataLayer = this.settings as TripsDataLayerSettings;
this.dataLayerFormGroup.addControl('xKey', this.fb.control(tripsDataLayer.xKey, Validators.required)); this.dataLayerFormGroup.addControl('xKey', this.fb.control(tripsDataLayer.xKey, Validators.required));
this.dataLayerFormGroup.addControl('yKey', this.fb.control(tripsDataLayer.yKey, Validators.required)); this.dataLayerFormGroup.addControl('yKey', this.fb.control(tripsDataLayer.yKey, Validators.required));
this.dataLayerFormGroup.addControl('showMarker', this.fb.control(tripsDataLayer.showMarker));
this.dataLayerFormGroup.addControl('markerType', this.fb.control(tripsDataLayer.markerType, Validators.required)); this.dataLayerFormGroup.addControl('markerType', this.fb.control(tripsDataLayer.markerType, Validators.required));
this.dataLayerFormGroup.addControl('markerShape', this.fb.control(tripsDataLayer.markerShape, Validators.required)); this.dataLayerFormGroup.addControl('markerShape', this.fb.control(tripsDataLayer.markerShape, Validators.required));
this.dataLayerFormGroup.addControl('markerIcon', this.fb.control(tripsDataLayer.markerIcon, Validators.required)); this.dataLayerFormGroup.addControl('markerIcon', this.fb.control(tripsDataLayer.markerIcon, Validators.required));
@ -193,7 +194,8 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
this.dataLayerFormGroup.addControl('pointSize', this.fb.control(tripsDataLayer.pointSize, [Validators.required, Validators.min(0)])); this.dataLayerFormGroup.addControl('pointSize', this.fb.control(tripsDataLayer.pointSize, [Validators.required, Validators.min(0)]));
this.dataLayerFormGroup.addControl('pointColor', this.fb.control(tripsDataLayer.pointColor, Validators.required)); this.dataLayerFormGroup.addControl('pointColor', this.fb.control(tripsDataLayer.pointColor, Validators.required));
this.dataLayerFormGroup.addControl('pointTooltip', this.fb.control(tripsDataLayer.pointTooltip)); this.dataLayerFormGroup.addControl('pointTooltip', this.fb.control(tripsDataLayer.pointTooltip));
merge(this.dataLayerFormGroup.get('markerType').valueChanges, merge(this.dataLayerFormGroup.get('showMarker').valueChanges,
this.dataLayerFormGroup.get('markerType').valueChanges,
this.dataLayerFormGroup.get('rotateMarker').valueChanges, this.dataLayerFormGroup.get('rotateMarker').valueChanges,
this.dataLayerFormGroup.get('showPath').valueChanges, this.dataLayerFormGroup.get('showPath').valueChanges,
this.dataLayerFormGroup.get('usePathDecorator').valueChanges, this.dataLayerFormGroup.get('usePathDecorator').valueChanges,
@ -323,54 +325,54 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
this.dataLayerFormGroup.get('dsDeviceId').disable({emitEvent: false}); this.dataLayerFormGroup.get('dsDeviceId').disable({emitEvent: false});
this.dataLayerFormGroup.get('dsEntityAliasId').enable({emitEvent: false}); this.dataLayerFormGroup.get('dsEntityAliasId').enable({emitEvent: false});
} }
if (['trips', 'markers'].includes(this.dataLayerType)) { if (this.dataLayerType === 'markers') {
const markerType: MarkerType = this.dataLayerFormGroup.get('markerType').value; this.updateMarkerTypeValidators();
if (markerType === MarkerType.shape) { }
this.dataLayerFormGroup.get('markerShape').enable({emitEvent: false}); if (this.dataLayerType === 'trips') {
this.dataLayerFormGroup.get('markerIcon').disable({emitEvent: false}); const showMarker: boolean = this.dataLayerFormGroup.get('showMarker').value;
this.dataLayerFormGroup.get('markerImage').disable({emitEvent: false}); if (showMarker) {
} else if (markerType === MarkerType.icon) { this.dataLayerFormGroup.get('markerType').enable({emitEvent: false});
this.dataLayerFormGroup.get('markerShape').disable({emitEvent: false}); this.updateMarkerTypeValidators();
this.dataLayerFormGroup.get('markerIcon').enable({emitEvent: false}); this.dataLayerFormGroup.get('markerOffsetX').enable({emitEvent: false});
this.dataLayerFormGroup.get('markerImage').disable({emitEvent: false}); this.dataLayerFormGroup.get('markerOffsetY').enable({emitEvent: false});
} else { this.dataLayerFormGroup.get('rotateMarker').enable({emitEvent: false});
this.dataLayerFormGroup.get('markerShape').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerIcon').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerImage').enable({emitEvent: false});
}
if (this.dataLayerType === 'trips') {
const rotateMarker: boolean = this.dataLayerFormGroup.get('rotateMarker').value; const rotateMarker: boolean = this.dataLayerFormGroup.get('rotateMarker').value;
const showPath: boolean = this.dataLayerFormGroup.get('showPath').value;
const usePathDecorator: boolean = this.dataLayerFormGroup.get('usePathDecorator').value;
const showPoints: boolean = this.dataLayerFormGroup.get('showPoints').value;
if (rotateMarker) { if (rotateMarker) {
this.dataLayerFormGroup.get('offsetAngle').enable({emitEvent: false}); this.dataLayerFormGroup.get('offsetAngle').enable({emitEvent: false});
} else { } else {
this.dataLayerFormGroup.get('offsetAngle').disable({emitEvent: false}); this.dataLayerFormGroup.get('offsetAngle').disable({emitEvent: false});
} }
if (showPath) { this.dataLayerFormGroup.get('label').enable({emitEvent: false});
this.dataLayerFormGroup.get('pathStrokeWeight').enable({emitEvent: false}); this.dataLayerFormGroup.get('tooltip').enable({emitEvent: false});
this.dataLayerFormGroup.get('pathStrokeColor').enable({emitEvent: false}); this.dataLayerFormGroup.get('click').enable({emitEvent: false});
this.dataLayerFormGroup.get('usePathDecorator').enable({emitEvent: false}); } else {
if (usePathDecorator) { this.dataLayerFormGroup.get('markerType').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbol').enable({emitEvent: false}); this.dataLayerFormGroup.get('markerShape').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolSize').enable({emitEvent: false}); this.dataLayerFormGroup.get('markerIcon').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolColor').enable({emitEvent: false}); this.dataLayerFormGroup.get('markerImage').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorOffset').enable({emitEvent: false}); this.dataLayerFormGroup.get('markerOffsetX').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathEndDecoratorOffset').enable({emitEvent: false}); this.dataLayerFormGroup.get('markerOffsetY').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorRepeat').enable({emitEvent: false}); this.dataLayerFormGroup.get('rotateMarker').disable({emitEvent: false});
} else { this.dataLayerFormGroup.get('offsetAngle').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbol').disable({emitEvent: false}); this.dataLayerFormGroup.get('label').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolSize').disable({emitEvent: false}); this.dataLayerFormGroup.get('tooltip').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolColor').disable({emitEvent: false}); this.dataLayerFormGroup.get('click').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorOffset').disable({emitEvent: false}); }
this.dataLayerFormGroup.get('pathEndDecoratorOffset').disable({emitEvent: false}); const showPath: boolean = this.dataLayerFormGroup.get('showPath').value;
this.dataLayerFormGroup.get('pathDecoratorRepeat').disable({emitEvent: false}); const usePathDecorator: boolean = this.dataLayerFormGroup.get('usePathDecorator').value;
} const showPoints: boolean = this.dataLayerFormGroup.get('showPoints').value;
if (showPath) {
this.dataLayerFormGroup.get('pathStrokeWeight').enable({emitEvent: false});
this.dataLayerFormGroup.get('pathStrokeColor').enable({emitEvent: false});
this.dataLayerFormGroup.get('usePathDecorator').enable({emitEvent: false});
if (usePathDecorator) {
this.dataLayerFormGroup.get('pathDecoratorSymbol').enable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolSize').enable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolColor').enable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorOffset').enable({emitEvent: false});
this.dataLayerFormGroup.get('pathEndDecoratorOffset').enable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorRepeat').enable({emitEvent: false});
} else { } else {
this.dataLayerFormGroup.get('pathStrokeWeight').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathStrokeColor').disable({emitEvent: false});
this.dataLayerFormGroup.get('usePathDecorator').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbol').disable({emitEvent: false}); this.dataLayerFormGroup.get('pathDecoratorSymbol').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolSize').disable({emitEvent: false}); this.dataLayerFormGroup.get('pathDecoratorSymbolSize').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolColor').disable({emitEvent: false}); this.dataLayerFormGroup.get('pathDecoratorSymbolColor').disable({emitEvent: false});
@ -378,16 +380,43 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
this.dataLayerFormGroup.get('pathEndDecoratorOffset').disable({emitEvent: false}); this.dataLayerFormGroup.get('pathEndDecoratorOffset').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorRepeat').disable({emitEvent: false}); this.dataLayerFormGroup.get('pathDecoratorRepeat').disable({emitEvent: false});
} }
if (showPoints) { } else {
this.dataLayerFormGroup.get('pointSize').enable({emitEvent: false}); this.dataLayerFormGroup.get('pathStrokeWeight').disable({emitEvent: false});
this.dataLayerFormGroup.get('pointColor').enable({emitEvent: false}); this.dataLayerFormGroup.get('pathStrokeColor').disable({emitEvent: false});
this.dataLayerFormGroup.get('pointTooltip').enable({emitEvent: false}); this.dataLayerFormGroup.get('usePathDecorator').disable({emitEvent: false});
} else { this.dataLayerFormGroup.get('pathDecoratorSymbol').disable({emitEvent: false});
this.dataLayerFormGroup.get('pointSize').disable({emitEvent: false}); this.dataLayerFormGroup.get('pathDecoratorSymbolSize').disable({emitEvent: false});
this.dataLayerFormGroup.get('pointColor').disable({emitEvent: false}); this.dataLayerFormGroup.get('pathDecoratorSymbolColor').disable({emitEvent: false});
this.dataLayerFormGroup.get('pointTooltip').disable({emitEvent: false}); this.dataLayerFormGroup.get('pathDecoratorOffset').disable({emitEvent: false});
} this.dataLayerFormGroup.get('pathEndDecoratorOffset').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorRepeat').disable({emitEvent: false});
} }
if (showPoints) {
this.dataLayerFormGroup.get('pointSize').enable({emitEvent: false});
this.dataLayerFormGroup.get('pointColor').enable({emitEvent: false});
this.dataLayerFormGroup.get('pointTooltip').enable({emitEvent: false});
} else {
this.dataLayerFormGroup.get('pointSize').disable({emitEvent: false});
this.dataLayerFormGroup.get('pointColor').disable({emitEvent: false});
this.dataLayerFormGroup.get('pointTooltip').disable({emitEvent: false});
}
}
}
private updateMarkerTypeValidators(): void {
const markerType: MarkerType = this.dataLayerFormGroup.get('markerType').value;
if (markerType === MarkerType.shape) {
this.dataLayerFormGroup.get('markerShape').enable({emitEvent: false});
this.dataLayerFormGroup.get('markerIcon').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerImage').disable({emitEvent: false});
} else if (markerType === MarkerType.icon) {
this.dataLayerFormGroup.get('markerShape').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerIcon').enable({emitEvent: false});
this.dataLayerFormGroup.get('markerImage').disable({emitEvent: false});
} else {
this.dataLayerFormGroup.get('markerShape').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerIcon').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerImage').enable({emitEvent: false});
} }
} }

2
ui-ngx/src/app/shared/models/widget/maps/map.models.ts
View File

@ -400,6 +400,7 @@ export const pathDecoratorSymbolTranslationMap = new Map<PathDecoratorSymbol, st
); );
export interface TripsDataLayerSettings extends MarkersDataLayerSettings { export interface TripsDataLayerSettings extends MarkersDataLayerSettings {
showMarker: boolean;
rotateMarker: boolean; rotateMarker: boolean;
offsetAngle: number; offsetAngle: number;
showPath: boolean; showPath: boolean;
@ -425,6 +426,7 @@ export const defaultTripsDataLayerSettings = (mapType: MapType, functionsOnly =
export const defaultBaseTripsDataLayerSettings = (mapType: MapType): Partial<TripsDataLayerSettings> => mergeDeep( export const defaultBaseTripsDataLayerSettings = (mapType: MapType): Partial<TripsDataLayerSettings> => mergeDeep(
defaultBaseMarkersDataLayerSettings(mapType), defaultBaseMarkersDataLayerSettings(mapType),
{ {
showMarker: true,
tooltip: { tooltip: {
offsetY: -0.5, offsetY: -0.5,
pattern: mapType === MapType.geoMap ? pattern: mapType === MapType.geoMap ?