tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Map - add show marker option for trips.

pull/12866/head
Igor Kulikov 2 years ago
parent
14de7726c2
commit
ac03bf27a3
5 changed files with 217 additions and 157 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/trips-data-layer.ts
  2. 38
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
  3. 119
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html
  4. 131
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts
  5. 2
      ui-ngx/src/app/shared/models/widget/maps/map.models.ts

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() {
const dsData = this.dataLayer.getMap().getData();
const location = this.dataLayer.dataProcessor.extractLocation(this.pointData, dsData);
this.marker = L.marker(location, {
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);
if (this.settings.showMarker) {
const dsData = this.dataLayer.getMap().getData();
const location = this.dataLayer.dataProcessor.extractLocation(this.pointData, dsData);
this.marker = L.marker(location, {
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);
});
}
}
}
private updateMarker() {
const dsData = this.dataLayer.getMap().getData();
this.marker.options.tbMarkerData = this.pointData;
this.updateMarkerLocation(this.pointData, dsData);
if (this.settings.tooltip.show) {
updateTooltip(this.dataLayer.getMap(), this.markerTooltip,
this.settings.tooltip, this.dataLayer.dataLayerTooltipProcessor, this.pointData, dsData);
if (this.settings.showMarker) {
const dsData = this.dataLayer.getMap().getData();
this.marker.options.tbMarkerData = this.pointData;
this.updateMarkerLocation(this.pointData, dsData);
if (this.settings.tooltip.show) {
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() {
@ -262,19 +266,21 @@ class TbTripDataItem extends TbDataLayerItem<TripsDataLayerSettings, TbTripsData
}
private updateMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) {
this.dataLayer.dataProcessor.createMarkerIcon(data, dsData, data.rotationAngle).subscribe(
(iconInfo) => {
const options = deepClone(iconInfo.icon.options);
this.marker.setIcon(iconInfo.icon);
const anchor = options.iconAnchor;
if (anchor && Array.isArray(anchor)) {
this.labelOffset = [iconInfo.size[0] / 2 - anchor[0], 10 - anchor[1]];
} else {
this.labelOffset = [0, -iconInfo.size[1] * this.dataLayer.markerOffset[1] + 10];
if (this.settings.showMarker) {
this.dataLayer.dataProcessor.createMarkerIcon(data, dsData, data.rotationAngle).subscribe(
(iconInfo) => {
const options = deepClone(iconInfo.icon.options);
this.marker.setIcon(iconInfo.icon);
const anchor = options.iconAnchor;
if (anchor && Array.isArray(anchor)) {
this.labelOffset = [iconInfo.size[0] / 2 - anchor[0], 10 - anchor[1]];
} 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>[]) {
@ -384,6 +390,10 @@ export class TbTripsDataLayer extends TbMapDataLayer<TripsDataLayerSettings, TbT
return 'trips';
}
public showMarker(): boolean {
return this.settings.showMarker;
}
public prepareTripsData(tripsData: FormattedData<TbMapDatasource>[][], tripsLatestData: FormattedData<TbMapDatasource>[]): {minTime: number; maxTime: number} {
let minTime = 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];
$(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>');
mapLayoutElement.append(mapElement);
@ -380,6 +363,27 @@ export abstract class TbMap<S extends BaseMapSettings> {
}
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({
mapElement: $(this.mapElement),
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-title">{{ 'widget-config.appearance' | translate }}</div>
<ng-container *ngIf="['trips', 'markers'].includes(dataLayerType)">
<div class="tb-form-panel stroked">
<div class="flex flex-row items-center justify-between">
<div class="tb-form-panel-title">{{ 'widgets.maps.data-layer.marker.marker' | translate }}</div>
<tb-toggle-select formControlName="markerType">
<tb-toggle-option [value]="MarkerType.shape">{{ 'widgets.maps.data-layer.marker.marker-type-shape' | translate }}</tb-toggle-option>
<tb-toggle-option [value]="MarkerType.icon">{{ 'widgets.maps.data-layer.marker.marker-type-icon' | translate }}</tb-toggle-option>
<tb-toggle-option [value]="MarkerType.image">{{ 'widgets.maps.data-layer.marker.marker-type-image' | translate }}</tb-toggle-option>
</tb-toggle-select>
</div>
<div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.shape" class="tb-form-row space-between">
<div translate>widgets.maps.data-layer.marker.shape</div>
<tb-marker-shape-settings formControlName="markerShape" [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.shape"></tb-marker-shape-settings>
</div>
<div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.icon" class="tb-form-row space-between">
<div translate>widgets.maps.data-layer.marker.icon</div>
<tb-marker-shape-settings formControlName="markerIcon" [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.icon"></tb-marker-shape-settings>
</div>
<div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.image" class="tb-form-row space-between">
<div translate>widgets.maps.data-layer.marker.image</div>
<tb-marker-image-settings formControlName="markerImage"></tb-marker-image-settings>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.maps.data-layer.marker.marker-offset</div>
<div class="flex flex-row items-center justify-start gap-2">
<div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-horizontal</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="markerOffsetX"
type="number" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-vertical</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="markerOffsetY"
type="number" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
</div>
<div *ngIf="dataLayerType === 'trips'" class="tb-form-row space-between">
<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>
}
<div class="tb-form-panel tb-slide-toggle stroked">
<mat-expansion-panel #markerExpansionPanel class="tb-settings" [expanded]="dataLayerType === 'markers' || dataLayerFormGroup.get('showMarker').value"
[disabled]="dataLayerType === 'trips' && !dataLayerFormGroup.get('showMarker').value">
<mat-expansion-panel-header class="flex flex-row flex-wrap">
<mat-panel-title>
<div class="flex flex-1 flex-row items-center justify-between">
@if (dataLayerType === 'markers') {
<div class="tb-form-panel-title">{{ 'widgets.maps.data-layer.marker.marker' | translate }}</div>
} @else {
<mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="showMarker" (click)="$event.stopPropagation()">
<div class="tb-form-panel-title">{{ 'widgets.maps.data-layer.marker.marker' | translate }}</div>
</mat-slide-toggle>
}
<tb-toggle-select [class.!hidden]="!markerExpansionPanel.expanded" formControlName="markerType" (click)="$event.stopPropagation()">
<tb-toggle-option [value]="MarkerType.shape">{{ 'widgets.maps.data-layer.marker.marker-type-shape' | translate }}</tb-toggle-option>
<tb-toggle-option [value]="MarkerType.icon">{{ 'widgets.maps.data-layer.marker.marker-type-icon' | translate }}</tb-toggle-option>
<tb-toggle-option [value]="MarkerType.image">{{ 'widgets.maps.data-layer.marker.marker-type-image' | translate }}</tb-toggle-option>
</tb-toggle-select>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.shape" class="tb-form-row space-between">
<div translate>widgets.maps.data-layer.marker.shape</div>
<tb-marker-shape-settings formControlName="markerShape" [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.shape"></tb-marker-shape-settings>
</div>
<div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.icon" class="tb-form-row space-between">
<div translate>widgets.maps.data-layer.marker.icon</div>
<tb-marker-shape-settings formControlName="markerIcon" [trip]="dataLayerType === 'trips'" [markerType]="MarkerType.icon"></tb-marker-shape-settings>
</div>
<div *ngIf="dataLayerFormGroup.get('markerType').value === MarkerType.image" class="tb-form-row space-between">
<div translate>widgets.maps.data-layer.marker.image</div>
<tb-marker-image-settings formControlName="markerImage"></tb-marker-image-settings>
</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.maps.data-layer.marker.marker-offset</div>
<div class="flex flex-row items-center justify-start gap-2">
<div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-horizontal</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="markerOffsetX"
type="number" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<div class="tb-small-label" translate>widgets.maps.data-layer.marker.offset-vertical</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="markerOffsetY"
type="number" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
</div>
<div *ngIf="dataLayerType === 'trips'" class="tb-form-row space-between">
<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 *ngIf="mapType === MapType.image" class="tb-form-panel stroked">
<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;
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('showMarker', this.fb.control(tripsDataLayer.showMarker));
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('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('pointColor', this.fb.control(tripsDataLayer.pointColor, Validators.required));
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('showPath').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('dsEntityAliasId').enable({emitEvent: false});
}
if (['trips', 'markers'].includes(this.dataLayerType)) {
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});
}
if (this.dataLayerType === 'trips') {
if (this.dataLayerType === 'markers') {
this.updateMarkerTypeValidators();
}
if (this.dataLayerType === 'trips') {
const showMarker: boolean = this.dataLayerFormGroup.get('showMarker').value;
if (showMarker) {
this.dataLayerFormGroup.get('markerType').enable({emitEvent: false});
this.updateMarkerTypeValidators();
this.dataLayerFormGroup.get('markerOffsetX').enable({emitEvent: false});
this.dataLayerFormGroup.get('markerOffsetY').enable({emitEvent: false});
this.dataLayerFormGroup.get('rotateMarker').enable({emitEvent: false});
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) {
this.dataLayerFormGroup.get('offsetAngle').enable({emitEvent: false});
} else {
this.dataLayerFormGroup.get('offsetAngle').disable({emitEvent: false});
}
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 {
this.dataLayerFormGroup.get('pathDecoratorSymbol').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolSize').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolColor').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorOffset').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathEndDecoratorOffset').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorRepeat').disable({emitEvent: false});
}
this.dataLayerFormGroup.get('label').enable({emitEvent: false});
this.dataLayerFormGroup.get('tooltip').enable({emitEvent: false});
this.dataLayerFormGroup.get('click').enable({emitEvent: false});
} else {
this.dataLayerFormGroup.get('markerType').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerShape').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerIcon').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerImage').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerOffsetX').disable({emitEvent: false});
this.dataLayerFormGroup.get('markerOffsetY').disable({emitEvent: false});
this.dataLayerFormGroup.get('rotateMarker').disable({emitEvent: false});
this.dataLayerFormGroup.get('offsetAngle').disable({emitEvent: false});
this.dataLayerFormGroup.get('label').disable({emitEvent: false});
this.dataLayerFormGroup.get('tooltip').disable({emitEvent: false});
this.dataLayerFormGroup.get('click').disable({emitEvent: false});
}
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 (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 {
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('pathDecoratorSymbolSize').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('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});
}
} 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('pathDecoratorSymbolSize').disable({emitEvent: false});
this.dataLayerFormGroup.get('pathDecoratorSymbolColor').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 {
showMarker: boolean;
rotateMarker: boolean;
offsetAngle: number;
showPath: boolean;
@ -425,6 +426,7 @@ export const defaultTripsDataLayerSettings = (mapType: MapType, functionsOnly =
export const defaultBaseTripsDataLayerSettings = (mapType: MapType): Partial<TripsDataLayerSettings> => mergeDeep(
defaultBaseMarkersDataLayerSettings(mapType),
{
showMarker: true,
tooltip: {
offsetY: -0.5,
pattern: mapType === MapType.geoMap ?

Write Preview
Loading…
Cancel
Save