Igor Kulikov
2 years ago
36 changed files with 1536 additions and 1013 deletions
@ -0,0 +1,120 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
CirclesDataLayerSettings, |
|||
defaultBaseCirclesDataLayerSettings, isJSON, TbCircleData, |
|||
TbMapDatasource |
|||
} from '@home/components/widget/lib/maps/models/map.models'; |
|||
import L from 'leaflet'; |
|||
import { FormattedData } from '@shared/models/widget.models'; |
|||
import { TbShapesDataLayer } from '@home/components/widget/lib/maps/data-layer/shapes-data-layer'; |
|||
import { TbMap } from '@home/components/widget/lib/maps/map'; |
|||
import { Observable } from 'rxjs'; |
|||
import { isNotEmptyStr } from '@core/utils'; |
|||
import { MapDataLayerType, TbDataLayerItem } from '@home/components/widget/lib/maps/data-layer/map-data-layer'; |
|||
|
|||
class TbCircleDataLayerItem extends TbDataLayerItem<CirclesDataLayerSettings, TbCirclesDataLayer> { |
|||
|
|||
private circle: L.Circle; |
|||
|
|||
constructor(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[], |
|||
protected settings: CirclesDataLayerSettings, |
|||
protected dataLayer: TbCirclesDataLayer) { |
|||
super(data, dsData, settings, dataLayer); |
|||
} |
|||
|
|||
protected create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.Layer { |
|||
const circleData = this.dataLayer.extractCircleCoordinates(data); |
|||
const center = new L.LatLng(circleData.latitude, circleData.longitude); |
|||
const style = this.dataLayer.getShapeStyle(data, dsData); |
|||
this.circle = L.circle(center, { |
|||
radius: circleData.radius, |
|||
...style |
|||
}); |
|||
this.updateLabel(data, dsData); |
|||
return this.circle; |
|||
} |
|||
|
|||
protected createEventListeners(data: FormattedData<TbMapDatasource>, _dsData: FormattedData<TbMapDatasource>[]): void { |
|||
this.dataLayer.getMap().circleClick(this.circle, data.$datasource); |
|||
} |
|||
|
|||
protected unbindLabel() { |
|||
this.circle.unbindTooltip(); |
|||
} |
|||
|
|||
protected bindLabel(content: L.Content): void { |
|||
this.circle.bindTooltip(content, { className: 'tb-polygon-label', permanent: true, direction: 'center'}) |
|||
.openTooltip(this.circle.getLatLng()); |
|||
} |
|||
|
|||
public update(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void { |
|||
const circleData = this.dataLayer.extractCircleCoordinates(data); |
|||
const center = new L.LatLng(circleData.latitude, circleData.longitude); |
|||
if (!this.circle.getLatLng().equals(center)) { |
|||
this.circle.setLatLng(center); |
|||
} |
|||
if (this.circle.getRadius() !== circleData.radius) { |
|||
this.circle.setRadius(circleData.radius); |
|||
} |
|||
this.updateTooltip(data, dsData); |
|||
this.updateLabel(data, dsData); |
|||
const style = this.dataLayer.getShapeStyle(data, dsData); |
|||
this.circle.setStyle(style); |
|||
} |
|||
} |
|||
|
|||
export class TbCirclesDataLayer extends TbShapesDataLayer<CirclesDataLayerSettings, TbCirclesDataLayer> { |
|||
|
|||
constructor(protected map: TbMap<any>, |
|||
inputSettings: CirclesDataLayerSettings) { |
|||
super(map, inputSettings); |
|||
} |
|||
|
|||
public dataLayerType(): MapDataLayerType { |
|||
return MapDataLayerType.circle; |
|||
} |
|||
|
|||
protected setupDatasource(datasource: TbMapDatasource): TbMapDatasource { |
|||
datasource.dataKeys.push(this.settings.circleKey); |
|||
return datasource; |
|||
} |
|||
|
|||
protected defaultBaseSettings(): Partial<CirclesDataLayerSettings> { |
|||
return defaultBaseCirclesDataLayerSettings; |
|||
} |
|||
|
|||
protected doSetup(): Observable<void> { |
|||
return super.doSetup(); |
|||
} |
|||
|
|||
protected isValidLayerData(layerData: FormattedData<TbMapDatasource>): boolean { |
|||
return layerData && isNotEmptyStr(layerData[this.settings.circleKey.label]) && isJSON(layerData[this.settings.circleKey.label]); |
|||
} |
|||
|
|||
protected createLayerItem(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): TbDataLayerItem<CirclesDataLayerSettings, TbCirclesDataLayer> { |
|||
throw new TbCircleDataLayerItem(data, dsData, this.settings, this); |
|||
} |
|||
|
|||
public extractCircleCoordinates(data: FormattedData<TbMapDatasource>) { |
|||
const circleData: TbCircleData = JSON.parse(data[this.settings.circleKey.label]); |
|||
return this.map.convertCircleData(circleData); |
|||
} |
|||
|
|||
|
|||
} |
|||
@ -0,0 +1,361 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
DataLayerColorSettings, |
|||
DataLayerColorType, |
|||
DataLayerPatternSettings, |
|||
DataLayerPatternType, |
|||
DataLayerTooltipTrigger, |
|||
MapDataLayerSettings, |
|||
mapDataSourceSettingsToDatasource, |
|||
MapStringFunction, |
|||
MapType, |
|||
processTooltipTemplate, |
|||
TbMapDatasource |
|||
} from '@home/components/widget/lib/maps/models/map.models'; |
|||
import { TbMap } from '@home/components/widget/lib/maps/map'; |
|||
import { FormattedData } from '@shared/models/widget.models'; |
|||
import { forkJoin, Observable, of } from 'rxjs'; |
|||
import { |
|||
createLabelFromPattern, |
|||
guid, |
|||
isDefined, |
|||
mergeDeepIgnoreArray, |
|||
parseTbFunction, |
|||
safeExecuteTbFunction |
|||
} from '@core/utils'; |
|||
import L, { LatLngBounds } from 'leaflet'; |
|||
import { CompiledTbFunction } from '@shared/models/js-function.models'; |
|||
import { map } from 'rxjs/operators'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; |
|||
|
|||
export abstract class TbDataLayerItem<S extends MapDataLayerSettings, D extends TbMapDataLayer<S,D>, L extends L.Layer = L.Layer> { |
|||
|
|||
protected layer: L; |
|||
protected tooltip: L.Popup; |
|||
|
|||
protected constructor(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[], |
|||
protected settings: S, |
|||
protected dataLayer: D) { |
|||
this.layer = this.create(data, dsData); |
|||
if (this.settings.tooltip?.show) { |
|||
this.createTooltip(data.$datasource); |
|||
this.updateTooltip(data, dsData); |
|||
} |
|||
this.createEventListeners(data, dsData); |
|||
try { |
|||
this.dataLayer.getDataLayerContainer().addLayer(this.layer); |
|||
} catch (e) { |
|||
console.warn(e); |
|||
} |
|||
} |
|||
|
|||
protected abstract create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L; |
|||
|
|||
protected abstract unbindLabel(): void; |
|||
|
|||
protected abstract bindLabel(content: L.Content): void; |
|||
|
|||
protected abstract createEventListeners(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void; |
|||
|
|||
public abstract update(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void; |
|||
|
|||
public remove() { |
|||
this.layer.off(); |
|||
this.dataLayer.getDataLayerContainer().removeLayer(this.layer); |
|||
} |
|||
|
|||
public getLayer(): L { |
|||
return this.layer; |
|||
} |
|||
|
|||
protected updateTooltip(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) { |
|||
if (this.settings.tooltip.show) { |
|||
let tooltipTemplate = this.dataLayer.dataLayerTooltipProcessor.processPattern(data, dsData); |
|||
tooltipTemplate = processTooltipTemplate(tooltipTemplate); |
|||
this.tooltip.setContent(tooltipTemplate); |
|||
if (this.tooltip.isOpen() && this.tooltip.getElement()) { |
|||
this.bindTooltipActions(data.$datasource); |
|||
} |
|||
} |
|||
} |
|||
|
|||
protected updateLabel(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) { |
|||
if (this.settings.label.show) { |
|||
this.unbindLabel(); |
|||
const label = this.dataLayer.dataLayerLabelProcessor.processPattern(data, dsData); |
|||
const labelColor = this.dataLayer.getCtx().widgetConfig.color; |
|||
const content: L.Content = `<div style="color: ${labelColor};"><b>${label}</b></div>`; |
|||
this.bindLabel(content); |
|||
} |
|||
} |
|||
|
|||
private createTooltip(datasource: TbMapDatasource) { |
|||
this.tooltip = L.popup(); |
|||
this.layer.bindPopup(this.tooltip, {autoClose: this.settings.tooltip.autoclose, closeOnClick: false}); |
|||
if (this.settings.tooltip.trigger === DataLayerTooltipTrigger.hover) { |
|||
this.layer.off('click'); |
|||
this.layer.on('mouseover', () => { |
|||
this.layer.openPopup(); |
|||
}); |
|||
this.layer.on('mousemove', (e) => { |
|||
this.tooltip.setLatLng(e.latlng); |
|||
}); |
|||
this.layer.on('mouseout', () => { |
|||
this.layer.closePopup(); |
|||
}); |
|||
} |
|||
this.layer.on('popupopen', () => { |
|||
this.bindTooltipActions(datasource); |
|||
(this.layer as any)._popup._closeButton.addEventListener('click', (event: Event) => { |
|||
event.preventDefault(); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
private bindTooltipActions(datasource: TbMapDatasource) { |
|||
const actions = this.tooltip.getElement().getElementsByClassName('tb-custom-action'); |
|||
Array.from(actions).forEach( |
|||
(element: HTMLElement) => { |
|||
const actionName = element.getAttribute('data-action-name'); |
|||
this.dataLayer.getMap().tooltipElementClick(element, actionName, datasource); |
|||
}); |
|||
} |
|||
|
|||
} |
|||
|
|||
export enum MapDataLayerType { |
|||
marker = 'marker', |
|||
polygon = 'polygon', |
|||
circle = 'circle' |
|||
} |
|||
|
|||
class DataLayerPatternProcessor { |
|||
|
|||
private patternFunction: CompiledTbFunction<MapStringFunction>; |
|||
private pattern: string; |
|||
|
|||
constructor(private dataLayer: TbMapDataLayer<any, any>, |
|||
private settings: DataLayerPatternSettings) {} |
|||
|
|||
public setup(): Observable<void> { |
|||
if (this.settings.type === DataLayerPatternType.function) { |
|||
return parseTbFunction<MapStringFunction>(this.dataLayer.getCtx().http, this.settings.patternFunction, ['data', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.patternFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
this.pattern = this.settings.pattern; |
|||
return of(null) |
|||
} |
|||
} |
|||
|
|||
public processPattern(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): string { |
|||
let pattern: string; |
|||
if (this.settings.type === DataLayerPatternType.function) { |
|||
pattern = safeExecuteTbFunction(this.patternFunction, [data, dsData]); |
|||
} else { |
|||
pattern = this.pattern; |
|||
} |
|||
const text = createLabelFromPattern(pattern, data); |
|||
const customTranslate = this.dataLayer.getCtx().$injector.get(CustomTranslatePipe); |
|||
return customTranslate.transform(text); |
|||
} |
|||
|
|||
} |
|||
|
|||
export class DataLayerColorProcessor { |
|||
|
|||
private colorFunction: CompiledTbFunction<MapStringFunction>; |
|||
private color: string; |
|||
|
|||
constructor(private dataLayer: TbMapDataLayer<any, any>, |
|||
private settings: DataLayerColorSettings) {} |
|||
|
|||
public setup(): Observable<void> { |
|||
if (this.settings.type === DataLayerColorType.function) { |
|||
return parseTbFunction<MapStringFunction>(this.dataLayer.getCtx().http, this.settings.colorFunction, ['data', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.colorFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
this.color = this.settings.color; |
|||
return of(null) |
|||
} |
|||
} |
|||
|
|||
public processColor(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): string { |
|||
let color: string; |
|||
if (this.settings.type === DataLayerColorType.function) { |
|||
color = safeExecuteTbFunction(this.colorFunction, [data, dsData]); |
|||
} else { |
|||
color = this.color; |
|||
} |
|||
return color; |
|||
} |
|||
|
|||
} |
|||
|
|||
export abstract class TbMapDataLayer<S extends MapDataLayerSettings, D extends TbMapDataLayer<S,D>, L extends L.Layer = L.Layer> implements L.TB.DataLayer { |
|||
|
|||
protected settings: S; |
|||
|
|||
protected datasource: TbMapDatasource; |
|||
|
|||
protected mapDataId = guid(); |
|||
|
|||
protected dataLayerContainer: L.FeatureGroup; |
|||
|
|||
protected layerItems = new Map<string, TbDataLayerItem<S,D,L>>(); |
|||
|
|||
protected groupsState: {[group: string]: boolean} = {}; |
|||
|
|||
protected enabled = true; |
|||
|
|||
public dataLayerLabelProcessor: DataLayerPatternProcessor; |
|||
public dataLayerTooltipProcessor: DataLayerPatternProcessor; |
|||
|
|||
protected constructor(protected map: TbMap<any>, |
|||
inputSettings: S) { |
|||
this.settings = mergeDeepIgnoreArray({} as S, this.defaultBaseSettings() as S, inputSettings); |
|||
if (this.settings.groups?.length) { |
|||
this.settings.groups.forEach((group) => { |
|||
this.groupsState[group] = true; |
|||
}); |
|||
} |
|||
this.dataLayerContainer = this.createDataLayerContainer(); |
|||
this.dataLayerLabelProcessor = this.settings.label.show ? new DataLayerPatternProcessor(this, this.settings.label) : null; |
|||
this.dataLayerTooltipProcessor = this.settings.tooltip.show ? new DataLayerPatternProcessor(this, this.settings.tooltip): null; |
|||
this.map.getMap().addLayer(this.dataLayerContainer); |
|||
} |
|||
|
|||
public setup(): Observable<any> { |
|||
this.datasource = mapDataSourceSettingsToDatasource(this.settings); |
|||
this.datasource.dataKeys = this.settings.additionalDataKeys ? [...this.settings.additionalDataKeys] : []; |
|||
this.mapDataId = this.datasource.mapDataIds[0]; |
|||
this.datasource = this.setupDatasource(this.datasource); |
|||
return forkJoin( |
|||
[ |
|||
this.dataLayerLabelProcessor ? this.dataLayerLabelProcessor.setup() : of(null), |
|||
this.dataLayerTooltipProcessor ? this.dataLayerTooltipProcessor.setup() : of(null), |
|||
this.doSetup() |
|||
]); |
|||
} |
|||
|
|||
public getDatasource(): TbMapDatasource { |
|||
return this.datasource; |
|||
} |
|||
|
|||
public getDataLayerContainer(): L.FeatureGroup { |
|||
return this.dataLayerContainer; |
|||
} |
|||
|
|||
public getBounds(): LatLngBounds { |
|||
return this.dataLayerContainer.getBounds(); |
|||
} |
|||
|
|||
public isEnabled(): boolean { |
|||
return this.enabled; |
|||
} |
|||
|
|||
public getGroups(): string[] { |
|||
return this.settings.groups || []; |
|||
} |
|||
|
|||
public toggleGroup(group: string): boolean { |
|||
if (isDefined(this.groupsState[group])) { |
|||
this.groupsState[group] = !this.groupsState[group]; |
|||
const enabled = Object.values(this.groupsState).some(v => v); |
|||
if (this.enabled !== enabled) { |
|||
this.enabled = enabled; |
|||
if (this.enabled) { |
|||
this.map.getMap().addLayer(this.dataLayerContainer); |
|||
} else { |
|||
this.map.getMap().removeLayer(this.dataLayerContainer); |
|||
} |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
public updateData(dsData: FormattedData<TbMapDatasource>[]) { |
|||
const layerData = dsData.filter(d => d.$datasource.mapDataIds.includes(this.mapDataId)); |
|||
const rawItems = layerData.filter(d => this.isValidLayerData(d)); |
|||
const toDelete = new Set(Array.from(this.layerItems.keys())); |
|||
const updatedItems: TbDataLayerItem<S,D,L>[] = []; |
|||
rawItems.forEach((data) => { |
|||
let layerItem = this.layerItems.get(data.entityId); |
|||
if (layerItem) { |
|||
layerItem.update(data, dsData); |
|||
updatedItems.push(layerItem); |
|||
} else { |
|||
layerItem = this.createLayerItem(data, dsData); |
|||
this.layerItems.set(data.entityId, layerItem); |
|||
} |
|||
toDelete.delete(data.entityId); |
|||
}); |
|||
toDelete.forEach((key) => { |
|||
const item = this.layerItems.get(key); |
|||
item.remove(); |
|||
this.layerItems.delete(key); |
|||
}); |
|||
if (updatedItems.length) { |
|||
this.layerItemsUpdated(updatedItems); |
|||
} |
|||
} |
|||
|
|||
public getCtx(): WidgetContext { |
|||
return this.map.getCtx(); |
|||
} |
|||
public getMap(): TbMap<any> { |
|||
return this.map; |
|||
} |
|||
|
|||
protected createDataLayerContainer(): L.FeatureGroup { |
|||
return L.featureGroup(); |
|||
} |
|||
|
|||
protected setupDatasource(datasource: TbMapDatasource): TbMapDatasource { |
|||
return datasource; |
|||
} |
|||
|
|||
protected layerItemsUpdated(_updatedItems: TbDataLayerItem<S,D,L>[]): void { |
|||
} |
|||
|
|||
protected mapType(): MapType { |
|||
return this.map.type(); |
|||
} |
|||
|
|||
public abstract dataLayerType(): MapDataLayerType; |
|||
|
|||
protected abstract defaultBaseSettings(): Partial<S>; |
|||
|
|||
protected abstract doSetup(): Observable<any>; |
|||
|
|||
protected abstract isValidLayerData(layerData: FormattedData<TbMapDatasource>): boolean; |
|||
|
|||
protected abstract createLayerItem(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): TbDataLayerItem<S,D,L>; |
|||
|
|||
} |
|||
|
|||
@ -0,0 +1,506 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
BaseMarkerShapeSettings, |
|||
ClusterMarkerColorFunction, |
|||
DataLayerColorType, |
|||
defaultBaseMarkersDataLayerSettings, isValidLatLng, |
|||
loadImageWithAspect, |
|||
MapStringFunction, MapType, |
|||
MarkerIconInfo, |
|||
MarkerIconSettings, |
|||
MarkerImageFunction, |
|||
MarkerImageInfo, |
|||
MarkerImageSettings, |
|||
MarkerImageType, |
|||
MarkersDataLayerSettings, |
|||
MarkerShapeSettings, |
|||
MarkerType, |
|||
TbMapDatasource |
|||
} from '@home/components/widget/lib/maps/models/map.models'; |
|||
import L, { FeatureGroup } from 'leaflet'; |
|||
import { FormattedData } from '@shared/models/widget.models'; |
|||
import { forkJoin, Observable, of } from 'rxjs'; |
|||
import { CompiledTbFunction } from '@shared/models/js-function.models'; |
|||
import { isDefined, isDefinedAndNotNull, isEmptyStr, parseTbFunction, safeExecuteTbFunction } from '@core/utils'; |
|||
import { catchError, map, switchMap } from 'rxjs/operators'; |
|||
import tinycolor from 'tinycolor2'; |
|||
import { ImagePipe } from '@shared/pipe/image.pipe'; |
|||
import { TbMap } from '@home/components/widget/lib/maps/map'; |
|||
import { |
|||
createColorMarkerIconElement, |
|||
createColorMarkerShapeURI, |
|||
MarkerShape |
|||
} from '@home/components/widget/lib/maps/models/marker-shape.models'; |
|||
import { MatIconRegistry } from '@angular/material/icon'; |
|||
import { DomSanitizer } from '@angular/platform-browser'; |
|||
import { MapDataLayerType, TbDataLayerItem, TbMapDataLayer } from '@home/components/widget/lib/maps/data-layer/map-data-layer'; |
|||
|
|||
class TbMarkerDataLayerItem extends TbDataLayerItem<MarkersDataLayerSettings, TbMarkersDataLayer, L.Marker> { |
|||
|
|||
private location: L.LatLng; |
|||
private marker: L.Marker; |
|||
private labelOffset: L.PointTuple; |
|||
|
|||
constructor(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[], |
|||
protected settings: MarkersDataLayerSettings, |
|||
protected dataLayer: TbMarkersDataLayer) { |
|||
super(data, dsData, settings, dataLayer); |
|||
} |
|||
|
|||
protected create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.Marker { |
|||
this.location = this.dataLayer.extractLocation(data); |
|||
this.marker = L.marker(this.location, { |
|||
tbMarkerData: data |
|||
}); |
|||
|
|||
this.updateMarkerIcon(data, dsData); |
|||
|
|||
return this.marker; |
|||
} |
|||
|
|||
protected createEventListeners(data: FormattedData<TbMapDatasource>, _dsData: FormattedData<TbMapDatasource>[]): void { |
|||
this.dataLayer.getMap().markerClick(this.marker, data.$datasource); |
|||
} |
|||
|
|||
protected unbindLabel() { |
|||
this.marker.unbindTooltip(); |
|||
} |
|||
|
|||
protected bindLabel(content: L.Content): void { |
|||
this.marker.bindTooltip(content, { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.labelOffset }); |
|||
} |
|||
|
|||
public update(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void { |
|||
const position = this.dataLayer.extractLocation(data); |
|||
if (!this.marker.getLatLng().equals(position)) { |
|||
this.location = position; |
|||
this.marker.setLatLng(position); |
|||
} |
|||
this.marker.options.tbMarkerData = data; |
|||
this.updateTooltip(data, dsData); |
|||
this.updateMarkerIcon(data, dsData); |
|||
} |
|||
|
|||
private updateMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) { |
|||
this.dataLayer.markerIconProcessor.createMarkerIcon(data, dsData).subscribe( |
|||
(iconInfo) => { |
|||
this.marker.setIcon(iconInfo.icon); |
|||
const anchor = iconInfo.icon.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.updateLabel(data, dsData); |
|||
} |
|||
); |
|||
} |
|||
} |
|||
|
|||
abstract class MarkerIconProcessor<S> { |
|||
|
|||
static fromSettings(dataLayer: TbMarkersDataLayer, |
|||
settings: MarkersDataLayerSettings): MarkerIconProcessor<any> { |
|||
switch (settings.markerType) { |
|||
case MarkerType.shape: |
|||
return new ShapeMarkerIconProcessor(dataLayer, settings.markerShape); |
|||
case MarkerType.icon: |
|||
return new IconMarkerIconProcessor(dataLayer, settings.markerIcon); |
|||
case MarkerType.image: |
|||
return new ImageMarkerIconProcessor(dataLayer, settings.markerImage); |
|||
} |
|||
} |
|||
|
|||
protected constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: S) {} |
|||
|
|||
public abstract setup(): Observable<void>; |
|||
|
|||
public abstract createMarkerIcon(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[]): Observable<MarkerIconInfo>; |
|||
|
|||
} |
|||
|
|||
abstract class BaseColorMarkerShapeProcessor<S extends BaseMarkerShapeSettings> extends MarkerIconProcessor<S> { |
|||
|
|||
private markerColorFunction: CompiledTbFunction<MapStringFunction>; |
|||
|
|||
private defaultMarkerIconInfo: MarkerIconInfo; |
|||
|
|||
protected constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: S) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
public setup(): Observable<void> { |
|||
const colorSettings = this.settings.color; |
|||
if (colorSettings.type === DataLayerColorType.function) { |
|||
return parseTbFunction<MapStringFunction>(this.dataLayer.getCtx().http, colorSettings.colorFunction, ['data', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.markerColorFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
const color = tinycolor(colorSettings.color); |
|||
return this.createMarkerShape(color, this.settings.size).pipe( |
|||
map((info) => { |
|||
this.defaultMarkerIconInfo = info; |
|||
return null; |
|||
} |
|||
)); |
|||
} |
|||
} |
|||
|
|||
public createMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): Observable<MarkerIconInfo> { |
|||
const colorSettings = this.settings.color; |
|||
if (colorSettings.type === DataLayerColorType.function) { |
|||
const functionColor = safeExecuteTbFunction(this.markerColorFunction, [data, dsData]); |
|||
let color: tinycolor.Instance; |
|||
if (isDefinedAndNotNull(functionColor)) { |
|||
color = tinycolor(functionColor); |
|||
} else { |
|||
color = tinycolor(colorSettings.color); |
|||
} |
|||
return this.createMarkerShape(color, this.settings.size); |
|||
} else { |
|||
return of(this.defaultMarkerIconInfo); |
|||
} |
|||
} |
|||
|
|||
protected abstract createMarkerShape(color: tinycolor.Instance, size: number): Observable<MarkerIconInfo>; |
|||
} |
|||
|
|||
class ShapeMarkerIconProcessor extends BaseColorMarkerShapeProcessor<MarkerShapeSettings> { |
|||
|
|||
constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: MarkerShapeSettings) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
protected createMarkerShape(color: tinycolor.Instance, size: number): Observable<MarkerIconInfo> { |
|||
return this.dataLayer.createColoredMarkerShape(this.settings.shape, color, size); |
|||
} |
|||
|
|||
} |
|||
|
|||
class IconMarkerIconProcessor extends BaseColorMarkerShapeProcessor<MarkerIconSettings> { |
|||
|
|||
constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: MarkerIconSettings) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
protected createMarkerShape(color: tinycolor.Instance, size: number): Observable<MarkerIconInfo> { |
|||
return this.dataLayer.createColoredMarkerIcon(this.settings.icon, color, size); |
|||
} |
|||
|
|||
} |
|||
|
|||
class ImageMarkerIconProcessor extends MarkerIconProcessor<MarkerImageSettings> { |
|||
|
|||
private markerImageFunction: CompiledTbFunction<MarkerImageFunction>; |
|||
|
|||
private defaultMarkerIconInfo: MarkerIconInfo; |
|||
|
|||
constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: MarkerImageSettings) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
public setup(): Observable<void> { |
|||
if (this.settings.type === MarkerImageType.function) { |
|||
return parseTbFunction<MarkerImageFunction>(this.dataLayer.getCtx().http, this.settings.imageFunction, ['data', 'images', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.markerImageFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
const currentImage: MarkerImageInfo = { |
|||
url: this.settings.image, |
|||
size: this.settings.imageSize || 34 |
|||
}; |
|||
return this.loadMarkerIconInfo(currentImage).pipe( |
|||
map((iconInfo) => { |
|||
this.defaultMarkerIconInfo = iconInfo; |
|||
return null; |
|||
} |
|||
)); |
|||
} |
|||
} |
|||
|
|||
public createMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): Observable<MarkerIconInfo> { |
|||
if (this.settings.type === MarkerImageType.function) { |
|||
const currentImage: MarkerImageInfo = safeExecuteTbFunction(this.markerImageFunction, [data, this.settings.images, dsData]); |
|||
return this.loadMarkerIconInfo(currentImage); |
|||
} else { |
|||
return of(this.defaultMarkerIconInfo); |
|||
} |
|||
} |
|||
|
|||
private loadMarkerIconInfo(image: MarkerImageInfo): Observable<MarkerIconInfo> { |
|||
if (image && image.url) { |
|||
return loadImageWithAspect(this.dataLayer.getCtx().$injector.get(ImagePipe), image.url).pipe( |
|||
switchMap((aspectImage) => { |
|||
if (aspectImage?.aspect) { |
|||
let width: number; |
|||
let height: number; |
|||
if (aspectImage.aspect > 1) { |
|||
width = image.size; |
|||
height = image.size / aspectImage.aspect; |
|||
} else { |
|||
width = image.size * aspectImage.aspect; |
|||
height = image.size; |
|||
} |
|||
let iconAnchor = image.markerOffset; |
|||
let popupAnchor = image.tooltipOffset; |
|||
if (!iconAnchor) { |
|||
iconAnchor = [width * this.dataLayer.markerOffset[0], height * this.dataLayer.markerOffset[1]]; |
|||
} |
|||
if (!popupAnchor) { |
|||
popupAnchor = [width * this.dataLayer.tooltipOffset[0], height * this.dataLayer.tooltipOffset[1]]; |
|||
} |
|||
const icon = L.icon({ |
|||
iconUrl: aspectImage.url, |
|||
iconSize: [width, height], |
|||
iconAnchor, |
|||
popupAnchor |
|||
}); |
|||
const iconInfo: MarkerIconInfo = { |
|||
size: [width, height], |
|||
icon |
|||
}; |
|||
return of(iconInfo); |
|||
} else { |
|||
return this.dataLayer.createDefaultMarkerIcon(); |
|||
} |
|||
}), |
|||
catchError(() => this.dataLayer.createDefaultMarkerIcon()) |
|||
); |
|||
} else { |
|||
return this.dataLayer.createDefaultMarkerIcon(); |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
export class TbMarkersDataLayer extends TbMapDataLayer<MarkersDataLayerSettings, TbMarkersDataLayer> { |
|||
|
|||
public markerIconProcessor: MarkerIconProcessor<any>; |
|||
|
|||
public markerOffset: L.LatLngTuple; |
|||
public tooltipOffset: L.LatLngTuple; |
|||
|
|||
private markersClusterContainer: L.MarkerClusterGroup; |
|||
private clusterMarkerColorFunction: CompiledTbFunction<ClusterMarkerColorFunction>; |
|||
|
|||
constructor(protected map: TbMap<any>, |
|||
inputSettings: MarkersDataLayerSettings) { |
|||
super(map, inputSettings); |
|||
} |
|||
|
|||
public dataLayerType(): MapDataLayerType { |
|||
return MapDataLayerType.marker; |
|||
} |
|||
|
|||
protected createDataLayerContainer(): FeatureGroup { |
|||
if (this.settings.markerClustering?.enable) { |
|||
return this.createMarkersClusterContainer(); |
|||
} else { |
|||
return super.createDataLayerContainer(); |
|||
} |
|||
} |
|||
|
|||
protected setupDatasource(datasource: TbMapDatasource): TbMapDatasource { |
|||
datasource.dataKeys.push(this.settings.xKey, this.settings.yKey); |
|||
return datasource; |
|||
} |
|||
|
|||
protected defaultBaseSettings(): Partial<MarkersDataLayerSettings> { |
|||
return defaultBaseMarkersDataLayerSettings; |
|||
} |
|||
|
|||
protected doSetup(): Observable<void> { |
|||
this.markerOffset = [ |
|||
isDefined(this.settings.markerOffsetX) ? this.settings.markerOffsetX : 0.5, |
|||
isDefined(this.settings.markerOffsetY) ? this.settings.markerOffsetY : 1, |
|||
]; |
|||
this.tooltipOffset = [ |
|||
isDefined(this.settings.tooltip?.offsetX) ? this.settings.tooltip?.offsetX : 0, |
|||
isDefined(this.settings.tooltip?.offsetY) ? this.settings.tooltip?.offsetY : -1, |
|||
]; |
|||
this.markerIconProcessor = MarkerIconProcessor.fromSettings(this, this.settings); |
|||
const setup$: Observable<void>[] = []; |
|||
if (this.settings.markerClustering?.enable && this.settings.markerClustering.useClusterMarkerColorFunction) { |
|||
setup$.push( |
|||
parseTbFunction<ClusterMarkerColorFunction>(this.getCtx().http, this.settings.markerClustering.clusterMarkerColorFunction, ['data', 'childCount']).pipe( |
|||
map((parsed) => { |
|||
this.clusterMarkerColorFunction = parsed; |
|||
return null; |
|||
}) |
|||
) |
|||
); |
|||
} |
|||
setup$.push(this.markerIconProcessor.setup()); |
|||
return forkJoin(setup$).pipe(map(() => null)); |
|||
} |
|||
|
|||
protected isValidLayerData(layerData: FormattedData<TbMapDatasource>): boolean { |
|||
return !!this.extractPosition(layerData); |
|||
} |
|||
|
|||
protected createLayerItem(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): TbMarkerDataLayerItem { |
|||
return new TbMarkerDataLayerItem(data, dsData, this.settings, this); |
|||
} |
|||
|
|||
protected layerItemsUpdated(updatedItems: TbDataLayerItem<MarkersDataLayerSettings, TbMarkersDataLayer, L.Marker>[]) { |
|||
if (this.settings.markerClustering?.enable) { |
|||
this.markersClusterContainer.refreshClusters(updatedItems.map(item => item.getLayer())); |
|||
} |
|||
super.layerItemsUpdated(updatedItems); |
|||
} |
|||
|
|||
private createMarkersClusterContainer(): L.FeatureGroup { |
|||
const markerClusterOptions: L.MarkerClusterGroupOptions = { |
|||
spiderfyOnMaxZoom: this.settings.markerClustering?.spiderfyOnMaxZoom, |
|||
zoomToBoundsOnClick: this.settings.markerClustering?.zoomOnClick, |
|||
showCoverageOnHover: this.settings.markerClustering?.showCoverageOnHover, |
|||
removeOutsideVisibleBounds: this.settings.markerClustering?.lazyLoad, |
|||
animate: this.settings.markerClustering?.zoomAnimation, |
|||
chunkedLoading: this.settings.markerClustering?.chunkedLoad, |
|||
pmIgnore: true, |
|||
spiderLegPolylineOptions: { |
|||
pmIgnore: true |
|||
}, |
|||
polygonOptions: { |
|||
pmIgnore: true |
|||
} |
|||
}; |
|||
if (this.settings.markerClustering?.useClusterMarkerColorFunction) { |
|||
markerClusterOptions.iconCreateFunction = (cluster) => { |
|||
const childCount = cluster.getChildCount(); |
|||
const data = cluster.getAllChildMarkers().map(clusterMarker => clusterMarker.options.tbMarkerData); |
|||
const markerColor: string = this.clusterMarkerColorFunction ? |
|||
safeExecuteTbFunction(this.clusterMarkerColorFunction, [data, childCount]) : null; |
|||
if (isDefinedAndNotNull(markerColor) && tinycolor(markerColor).isValid()) { |
|||
const parsedColor = tinycolor(markerColor); |
|||
return L.divIcon({ |
|||
html: `<div style="background-color: ${parsedColor.setAlpha(0.4).toRgbString()};" ` + |
|||
`class="marker-cluster tb-cluster-marker-element">` + |
|||
`<div style="background-color: ${parsedColor.setAlpha(0.9).toRgbString()};"><span>` + childCount + '</span></div></div>', |
|||
iconSize: new L.Point(40, 40), |
|||
className: 'tb-cluster-marker-container' |
|||
}); |
|||
} else { |
|||
let c = ' marker-cluster-'; |
|||
if (childCount < 10) { |
|||
c += 'small'; |
|||
} else if (childCount < 100) { |
|||
c += 'medium'; |
|||
} else { |
|||
c += 'large'; |
|||
} |
|||
return new L.DivIcon({ |
|||
html: '<div><span>' + childCount + '</span></div>', |
|||
className: 'marker-cluster' + c, |
|||
iconSize: new L.Point(40, 40) |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
if (this.settings.markerClustering?.maxClusterRadius && this.settings.markerClustering.maxClusterRadius > 0) { |
|||
markerClusterOptions.maxClusterRadius = Math.floor(this.settings.markerClustering.maxClusterRadius); |
|||
} |
|||
if (this.settings.markerClustering?.maxZoom && this.settings.markerClustering.maxZoom >= 0 && this.settings.markerClustering.maxZoom < 19) { |
|||
markerClusterOptions.disableClusteringAtZoom = Math.floor(this.settings.markerClustering.maxZoom); |
|||
} |
|||
this.markersClusterContainer = new L.MarkerClusterGroup(markerClusterOptions); |
|||
return this.markersClusterContainer; |
|||
} |
|||
|
|||
private extractPosition(data: FormattedData<TbMapDatasource>): {x: number; y: number} { |
|||
if (data) { |
|||
const xKeyVal = data[this.settings.xKey.label]; |
|||
const yKeyVal = data[this.settings.yKey.label]; |
|||
switch (this.mapType()) { |
|||
case MapType.geoMap: |
|||
if (!isValidLatLng(xKeyVal, yKeyVal)) { |
|||
return null; |
|||
} |
|||
break; |
|||
case MapType.image: |
|||
if (!isDefinedAndNotNull(xKeyVal) || isEmptyStr(xKeyVal) || isNaN(xKeyVal) || !isDefinedAndNotNull(yKeyVal) || isEmptyStr(yKeyVal) || isNaN(yKeyVal)) { |
|||
return null; |
|||
} |
|||
break; |
|||
} |
|||
return {x: xKeyVal, y: yKeyVal}; |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
public createDefaultMarkerIcon(): Observable<MarkerIconInfo> { |
|||
const color = this.settings.markerShape?.color?.color || '#307FE5'; |
|||
return this.createColoredMarkerShape(MarkerShape.markerShape1, tinycolor(color)); |
|||
} |
|||
|
|||
public createColoredMarkerShape(shape: MarkerShape, color: tinycolor.Instance, size = 34): Observable<MarkerIconInfo> { |
|||
return createColorMarkerShapeURI(this.getCtx().$injector.get(MatIconRegistry), this.getCtx().$injector.get(DomSanitizer), shape, color).pipe( |
|||
map((iconUrl) => { |
|||
return { |
|||
size: [size, size], |
|||
icon: L.icon({ |
|||
iconUrl, |
|||
iconSize: [size, size], |
|||
iconAnchor: [size * this.markerOffset[0], size * this.markerOffset[1]], |
|||
popupAnchor: [size * this.tooltipOffset[0], size * this.tooltipOffset[1]] |
|||
}) |
|||
}; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public createColoredMarkerIcon(icon: string, color: tinycolor.Instance, size = 34): Observable<MarkerIconInfo> { |
|||
return createColorMarkerIconElement(this.getCtx().$injector.get(MatIconRegistry), this.getCtx().$injector.get(DomSanitizer), icon, color).pipe( |
|||
map((element) => { |
|||
return { |
|||
size: [size, size], |
|||
icon: L.divIcon({ |
|||
html: element.outerHTML, |
|||
className: 'tb-marker-div-icon', |
|||
iconSize: [size, size], |
|||
iconAnchor: [size * this.markerOffset[0], size * this.markerOffset[1]], |
|||
popupAnchor: [size * this.tooltipOffset[0], size * this.tooltipOffset[1]] |
|||
}) |
|||
}; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public extractLocation(data: FormattedData<TbMapDatasource>): L.LatLng { |
|||
const position = this.extractPosition(data); |
|||
if (position) { |
|||
return this.map.positionToLatLng(position); |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
defaultBasePolygonsDataLayerSettings, |
|||
isCutPolygon, isJSON, |
|||
PolygonsDataLayerSettings, |
|||
TbMapDatasource |
|||
} from '@home/components/widget/lib/maps/models/map.models'; |
|||
import L from 'leaflet'; |
|||
import { FormattedData } from '@shared/models/widget.models'; |
|||
import { TbShapesDataLayer } from '@home/components/widget/lib/maps/data-layer/shapes-data-layer'; |
|||
import { TbMap } from '@home/components/widget/lib/maps/map'; |
|||
import { Observable } from 'rxjs'; |
|||
import { isNotEmptyStr, isString } from '@core/utils'; |
|||
import { MapDataLayerType, TbDataLayerItem } from '@home/components/widget/lib/maps/data-layer/map-data-layer'; |
|||
|
|||
class TbPolygonDataLayerItem extends TbDataLayerItem<PolygonsDataLayerSettings, TbPolygonsDataLayer> { |
|||
|
|||
private polygonContainer: L.FeatureGroup; |
|||
private polygon: L.Polygon; |
|||
|
|||
constructor(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[], |
|||
protected settings: PolygonsDataLayerSettings, |
|||
protected dataLayer: TbPolygonsDataLayer) { |
|||
super(data, dsData, settings, dataLayer); |
|||
} |
|||
|
|||
protected create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.Layer { |
|||
const polyData = this.dataLayer.extractPolygonCoordinates(data); |
|||
const polyConstructor = isCutPolygon(polyData) || polyData.length !== 2 ? L.polygon : L.rectangle; |
|||
const style = this.dataLayer.getShapeStyle(data, dsData); |
|||
this.polygon = polyConstructor(polyData, { |
|||
...style |
|||
}); |
|||
|
|||
this.polygonContainer = L.featureGroup(); |
|||
this.polygon.addTo(this.polygonContainer); |
|||
|
|||
this.updateLabel(data, dsData); |
|||
return this.polygonContainer; |
|||
} |
|||
|
|||
protected createEventListeners(data: FormattedData<TbMapDatasource>, _dsData: FormattedData<TbMapDatasource>[]): void { |
|||
this.dataLayer.getMap().polygonClick(this.polygonContainer, data.$datasource); |
|||
} |
|||
|
|||
protected unbindLabel() { |
|||
this.polygonContainer.unbindTooltip(); |
|||
} |
|||
|
|||
protected bindLabel(content: L.Content): void { |
|||
this.polygonContainer.bindTooltip(content, {className: 'tb-polygon-label', permanent: true, direction: 'center'}) |
|||
.openTooltip(this.polygonContainer.getBounds().getCenter()); |
|||
} |
|||
|
|||
public update(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void { |
|||
const polyData = this.dataLayer.extractPolygonCoordinates(data); |
|||
const style = this.dataLayer.getShapeStyle(data, dsData); |
|||
if (isCutPolygon(polyData) || polyData.length !== 2) { |
|||
if (this.polygon instanceof L.Rectangle) { |
|||
this.polygonContainer.removeLayer(this.polygon); |
|||
this.polygon = L.polygon(polyData, { |
|||
...style |
|||
}); |
|||
this.polygon.addTo(this.polygonContainer); |
|||
} else { |
|||
this.polygon.setLatLngs(polyData); |
|||
} |
|||
} else if (polyData.length === 2) { |
|||
const bounds = new L.LatLngBounds(polyData); |
|||
// @ts-ignore
|
|||
this.leafletPoly.setBounds(bounds); |
|||
} |
|||
this.updateTooltip(data, dsData); |
|||
this.updateLabel(data, dsData); |
|||
this.polygon.setStyle(style); |
|||
} |
|||
} |
|||
|
|||
export class TbPolygonsDataLayer extends TbShapesDataLayer<PolygonsDataLayerSettings, TbPolygonsDataLayer> { |
|||
|
|||
constructor(protected map: TbMap<any>, |
|||
inputSettings: PolygonsDataLayerSettings) { |
|||
super(map, inputSettings); |
|||
} |
|||
|
|||
public dataLayerType(): MapDataLayerType { |
|||
return MapDataLayerType.polygon; |
|||
} |
|||
|
|||
protected setupDatasource(datasource: TbMapDatasource): TbMapDatasource { |
|||
datasource.dataKeys.push(this.settings.polygonKey); |
|||
return datasource; |
|||
} |
|||
|
|||
protected defaultBaseSettings(): Partial<PolygonsDataLayerSettings> { |
|||
return defaultBasePolygonsDataLayerSettings; |
|||
} |
|||
|
|||
protected doSetup(): Observable<any> { |
|||
return super.doSetup(); |
|||
} |
|||
|
|||
protected isValidLayerData(layerData: FormattedData<TbMapDatasource>): boolean { |
|||
return layerData && ((isNotEmptyStr(layerData[this.settings.polygonKey.label]) && !isJSON(layerData[this.settings.polygonKey.label]) |
|||
|| Array.isArray(layerData[this.settings.polygonKey.label]))); |
|||
} |
|||
|
|||
protected createLayerItem(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): TbPolygonDataLayerItem { |
|||
return new TbPolygonDataLayerItem(data, dsData, this.settings, this); |
|||
} |
|||
|
|||
public extractPolygonCoordinates(data: FormattedData<TbMapDatasource>) { |
|||
let rawPolyData = data[this.settings.polygonKey.label]; |
|||
if (isString(rawPolyData)) { |
|||
rawPolyData = JSON.parse(rawPolyData); |
|||
} |
|||
return this.map.toPolygonCoordinates(rawPolyData); |
|||
} |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { ShapeDataLayerSettings, TbMapDatasource } from '@home/components/widget/lib/maps/models/map.models'; |
|||
import L from 'leaflet'; |
|||
import { TbMap } from '@home/components/widget/lib/maps/map'; |
|||
import { forkJoin, Observable } from 'rxjs'; |
|||
import { FormattedData } from '@shared/models/widget.models'; |
|||
import { DataLayerColorProcessor, TbMapDataLayer } from '@home/components/widget/lib/maps/data-layer/map-data-layer'; |
|||
|
|||
export abstract class TbShapesDataLayer<S extends ShapeDataLayerSettings, L extends TbMapDataLayer<S,L>> extends TbMapDataLayer<S, L> { |
|||
|
|||
public fillColorProcessor: DataLayerColorProcessor; |
|||
public strokeColorProcessor: DataLayerColorProcessor; |
|||
|
|||
protected constructor(protected map: TbMap<any>, |
|||
inputSettings: S) { |
|||
super(map, inputSettings); |
|||
} |
|||
|
|||
protected doSetup(): Observable<any> { |
|||
this.fillColorProcessor = new DataLayerColorProcessor(this, this.settings.fillColor); |
|||
this.strokeColorProcessor = new DataLayerColorProcessor(this, this.settings.strokeColor); |
|||
return forkJoin([this.fillColorProcessor.setup(), this.strokeColorProcessor.setup()]); |
|||
} |
|||
|
|||
public getShapeStyle(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.PathOptions { |
|||
const fill = this.fillColorProcessor.processColor(data, dsData); |
|||
const stroke = this.strokeColorProcessor.processColor(data, dsData); |
|||
return { |
|||
fill: true, |
|||
fillColor: fill, |
|||
color: stroke, |
|||
weight: this.settings.strokeWeight, |
|||
fillOpacity: 1, |
|||
opacity: 1 |
|||
}; |
|||
} |
|||
} |
|||
@ -1,968 +0,0 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
BaseMarkerShapeSettings, |
|||
CirclesDataLayerSettings, |
|||
DataLayerColorSettings, |
|||
DataLayerColorType, |
|||
DataLayerPatternSettings, |
|||
DataLayerPatternType, |
|||
DataLayerTooltipTrigger, |
|||
defaultBaseCirclesDataLayerSettings, |
|||
defaultBaseMarkersDataLayerSettings, |
|||
defaultBasePolygonsDataLayerSettings, |
|||
isCutPolygon, |
|||
isJSON, |
|||
isValidLatLng, |
|||
loadImageWithAspect, |
|||
MapDataLayerSettings, |
|||
mapDataSourceSettingsToDatasource, |
|||
MapStringFunction, |
|||
MapType, |
|||
MarkerIconInfo, |
|||
MarkerIconSettings, |
|||
MarkerImageFunction, |
|||
MarkerImageInfo, |
|||
MarkerImageSettings, |
|||
MarkerImageType, |
|||
MarkersDataLayerSettings, |
|||
MarkerShapeSettings, |
|||
MarkerType, |
|||
PolygonsDataLayerSettings, |
|||
processTooltipTemplate, |
|||
ShapeDataLayerSettings, |
|||
TbCircleData, |
|||
TbMapDatasource |
|||
} from '@home/components/widget/lib/maps/map.models'; |
|||
import { TbMap } from '@home/components/widget/lib/maps/map'; |
|||
import { FormattedData } from '@shared/models/widget.models'; |
|||
import { forkJoin, Observable, of } from 'rxjs'; |
|||
import { |
|||
createLabelFromPattern, |
|||
guid, |
|||
isDefined, |
|||
isDefinedAndNotNull, |
|||
isEmptyStr, |
|||
isNotEmptyStr, |
|||
isString, |
|||
mergeDeepIgnoreArray, |
|||
parseTbFunction, |
|||
safeExecuteTbFunction |
|||
} from '@core/utils'; |
|||
import L, { divIcon, LatLngBounds } from 'leaflet'; |
|||
import { CompiledTbFunction } from '@shared/models/js-function.models'; |
|||
import { catchError, map, switchMap } from 'rxjs/operators'; |
|||
import tinycolor from 'tinycolor2'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { ImagePipe } from '@shared/pipe/image.pipe'; |
|||
import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; |
|||
import { |
|||
createColorMarkerIconElement, |
|||
createColorMarkerShapeURI, |
|||
MarkerShape |
|||
} from '@home/components/widget/lib/maps/marker-shape.models'; |
|||
import { MatIconRegistry } from '@angular/material/icon'; |
|||
import { DomSanitizer } from '@angular/platform-browser'; |
|||
|
|||
abstract class TbDataLayerItem<S extends MapDataLayerSettings, L extends TbMapDataLayer<S,L>> { |
|||
|
|||
protected layer: L.Layer; |
|||
protected tooltip: L.Popup; |
|||
|
|||
protected constructor(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[], |
|||
protected settings: S, |
|||
protected dataLayer: L) { |
|||
this.layer = this.create(data, dsData); |
|||
if (this.settings.tooltip?.show) { |
|||
this.createTooltip(data.$datasource); |
|||
this.updateTooltip(data, dsData); |
|||
} |
|||
this.createEventListeners(data, dsData); |
|||
this.dataLayer.getFeatureGroup().addLayer(this.layer); |
|||
} |
|||
|
|||
protected abstract create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.Layer; |
|||
|
|||
protected abstract unbindLabel(): void; |
|||
|
|||
protected abstract bindLabel(content: L.Content): void; |
|||
|
|||
protected abstract createEventListeners(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void; |
|||
|
|||
public abstract update(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void; |
|||
|
|||
public remove() { |
|||
this.layer.off(); |
|||
this.dataLayer.getFeatureGroup().removeLayer(this.layer); |
|||
} |
|||
|
|||
protected updateTooltip(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) { |
|||
if (this.settings.tooltip.show) { |
|||
let tooltipTemplate = this.dataLayer.dataLayerTooltipProcessor.processPattern(data, dsData); |
|||
tooltipTemplate = processTooltipTemplate(tooltipTemplate); |
|||
this.tooltip.setContent(tooltipTemplate); |
|||
if (this.tooltip.isOpen() && this.tooltip.getElement()) { |
|||
this.bindTooltipActions(data.$datasource); |
|||
} |
|||
} |
|||
} |
|||
|
|||
protected updateLabel(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) { |
|||
if (this.settings.label.show) { |
|||
this.unbindLabel(); |
|||
const label = this.dataLayer.dataLayerLabelProcessor.processPattern(data, dsData); |
|||
const labelColor = this.dataLayer.getCtx().widgetConfig.color; |
|||
const content: L.Content = `<div style="color: ${labelColor};"><b>${label}</b></div>`; |
|||
this.bindLabel(content); |
|||
} |
|||
} |
|||
|
|||
private createTooltip(datasource: TbMapDatasource) { |
|||
this.tooltip = L.popup(); |
|||
this.layer.bindPopup(this.tooltip, {autoClose: this.settings.tooltip.autoclose, closeOnClick: false}); |
|||
if (this.settings.tooltip.trigger === DataLayerTooltipTrigger.hover) { |
|||
this.layer.off('click'); |
|||
this.layer.on('mouseover', () => { |
|||
this.layer.openPopup(); |
|||
}); |
|||
this.layer.on('mousemove', (e) => { |
|||
this.tooltip.setLatLng(e.latlng); |
|||
}); |
|||
this.layer.on('mouseout', () => { |
|||
this.layer.closePopup(); |
|||
}); |
|||
} |
|||
this.layer.on('popupopen', () => { |
|||
this.bindTooltipActions(datasource); |
|||
(this.layer as any)._popup._closeButton.addEventListener('click', (event: Event) => { |
|||
event.preventDefault(); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
private bindTooltipActions(datasource: TbMapDatasource) { |
|||
const actions = this.tooltip.getElement().getElementsByClassName('tb-custom-action'); |
|||
Array.from(actions).forEach( |
|||
(element: HTMLElement) => { |
|||
const actionName = element.getAttribute('data-action-name'); |
|||
this.dataLayer.getMap().tooltipElementClick(element, actionName, datasource); |
|||
}); |
|||
} |
|||
|
|||
} |
|||
|
|||
export enum MapDataLayerType { |
|||
marker = 'marker', |
|||
polygon = 'polygon', |
|||
circle = 'circle' |
|||
} |
|||
|
|||
class DataLayerPatternProcessor { |
|||
|
|||
private patternFunction: CompiledTbFunction<MapStringFunction>; |
|||
private pattern: string; |
|||
|
|||
constructor(private dataLayer: TbMapDataLayer<any, any>, |
|||
private settings: DataLayerPatternSettings) {} |
|||
|
|||
public setup(): Observable<void> { |
|||
if (this.settings.type === DataLayerPatternType.function) { |
|||
return parseTbFunction<MapStringFunction>(this.dataLayer.getCtx().http, this.settings.patternFunction, ['data', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.patternFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
this.pattern = this.settings.pattern; |
|||
return of(null) |
|||
} |
|||
} |
|||
|
|||
public processPattern(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): string { |
|||
let pattern: string; |
|||
if (this.settings.type === DataLayerPatternType.function) { |
|||
pattern = safeExecuteTbFunction(this.patternFunction, [data, dsData]); |
|||
} else { |
|||
pattern = this.pattern; |
|||
} |
|||
const text = createLabelFromPattern(pattern, data); |
|||
const customTranslate = this.dataLayer.getCtx().$injector.get(CustomTranslatePipe); |
|||
return customTranslate.transform(text); |
|||
} |
|||
|
|||
} |
|||
|
|||
class DataLayerColorProcessor { |
|||
|
|||
private colorFunction: CompiledTbFunction<MapStringFunction>; |
|||
private color: string; |
|||
|
|||
constructor(private dataLayer: TbMapDataLayer<any, any>, |
|||
private settings: DataLayerColorSettings) {} |
|||
|
|||
public setup(): Observable<void> { |
|||
if (this.settings.type === DataLayerColorType.function) { |
|||
return parseTbFunction<MapStringFunction>(this.dataLayer.getCtx().http, this.settings.colorFunction, ['data', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.colorFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
this.color = this.settings.color; |
|||
return of(null) |
|||
} |
|||
} |
|||
|
|||
public processColor(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): string { |
|||
let color: string; |
|||
if (this.settings.type === DataLayerColorType.function) { |
|||
color = safeExecuteTbFunction(this.colorFunction, [data, dsData]); |
|||
} else { |
|||
color = this.color; |
|||
} |
|||
return color; |
|||
} |
|||
|
|||
} |
|||
|
|||
export abstract class TbMapDataLayer<S extends MapDataLayerSettings, L extends TbMapDataLayer<S,L>> implements L.TB.DataLayer { |
|||
|
|||
protected settings: S; |
|||
|
|||
protected datasource: TbMapDatasource; |
|||
|
|||
protected mapDataId = guid(); |
|||
|
|||
protected featureGroup = L.featureGroup(); |
|||
|
|||
protected layerItems = new Map<string, TbDataLayerItem<S,L>>(); |
|||
|
|||
protected groupsState: {[group: string]: boolean} = {}; |
|||
|
|||
protected enabled = true; |
|||
|
|||
public dataLayerLabelProcessor: DataLayerPatternProcessor; |
|||
public dataLayerTooltipProcessor: DataLayerPatternProcessor; |
|||
|
|||
protected constructor(protected map: TbMap<any>, |
|||
inputSettings: S) { |
|||
this.settings = mergeDeepIgnoreArray({} as S, this.defaultBaseSettings() as S, inputSettings); |
|||
if (this.settings.groups?.length) { |
|||
this.settings.groups.forEach((group) => { |
|||
this.groupsState[group] = true; |
|||
}); |
|||
} |
|||
this.dataLayerLabelProcessor = this.settings.label.show ? new DataLayerPatternProcessor(this, this.settings.label) : null; |
|||
this.dataLayerTooltipProcessor = this.settings.tooltip.show ? new DataLayerPatternProcessor(this, this.settings.tooltip): null; |
|||
this.map.getMap().addLayer(this.featureGroup); |
|||
} |
|||
|
|||
public setup(): Observable<any> { |
|||
this.datasource = mapDataSourceSettingsToDatasource(this.settings); |
|||
this.datasource.dataKeys = this.settings.additionalDataKeys ? [...this.settings.additionalDataKeys] : []; |
|||
this.mapDataId = this.datasource.mapDataIds[0]; |
|||
this.datasource = this.setupDatasource(this.datasource); |
|||
return forkJoin( |
|||
[ |
|||
this.dataLayerLabelProcessor ? this.dataLayerLabelProcessor.setup() : of(null), |
|||
this.dataLayerTooltipProcessor ? this.dataLayerTooltipProcessor.setup() : of(null), |
|||
this.doSetup() |
|||
]); |
|||
} |
|||
|
|||
public getDatasource(): TbMapDatasource { |
|||
return this.datasource; |
|||
} |
|||
|
|||
public getFeatureGroup(): L.FeatureGroup { |
|||
return this.featureGroup; |
|||
} |
|||
|
|||
public getBounds(): LatLngBounds { |
|||
return this.featureGroup.getBounds(); |
|||
} |
|||
|
|||
public isEnabled(): boolean { |
|||
return this.enabled; |
|||
} |
|||
|
|||
public getGroups(): string[] { |
|||
return this.settings.groups || []; |
|||
} |
|||
|
|||
public toggleGroup(group: string): boolean { |
|||
if (isDefined(this.groupsState[group])) { |
|||
this.groupsState[group] = !this.groupsState[group]; |
|||
const enabled = Object.values(this.groupsState).some(v => v); |
|||
if (this.enabled !== enabled) { |
|||
this.enabled = enabled; |
|||
if (this.enabled) { |
|||
this.map.getMap().addLayer(this.featureGroup); |
|||
} else { |
|||
this.map.getMap().removeLayer(this.featureGroup); |
|||
} |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
public updateData(dsData: FormattedData<TbMapDatasource>[]) { |
|||
const layerData = dsData.filter(d => d.$datasource.mapDataIds.includes(this.mapDataId)); |
|||
const rawItems = layerData.filter(d => this.isValidLayerData(d)); |
|||
const toDelete = new Set(Array.from(this.layerItems.keys())); |
|||
rawItems.forEach((data) => { |
|||
let layerItem = this.layerItems.get(data.entityId); |
|||
if (layerItem) { |
|||
layerItem.update(data, dsData); |
|||
} else { |
|||
layerItem = this.createLayerItem(data, dsData); |
|||
this.layerItems.set(data.entityId, layerItem); |
|||
} |
|||
toDelete.delete(data.entityId); |
|||
}); |
|||
toDelete.forEach((key) => { |
|||
const item = this.layerItems.get(key); |
|||
item.remove(); |
|||
this.layerItems.delete(key); |
|||
}); |
|||
} |
|||
|
|||
public getCtx(): WidgetContext { |
|||
return this.map.getCtx(); |
|||
} |
|||
public getMap(): TbMap<any> { |
|||
return this.map; |
|||
} |
|||
|
|||
protected setupDatasource(datasource: TbMapDatasource): TbMapDatasource { |
|||
return datasource; |
|||
} |
|||
|
|||
protected mapType(): MapType { |
|||
return this.map.type(); |
|||
} |
|||
|
|||
public abstract dataLayerType(): MapDataLayerType; |
|||
|
|||
protected abstract defaultBaseSettings(): Partial<S>; |
|||
|
|||
protected abstract doSetup(): Observable<any>; |
|||
|
|||
protected abstract isValidLayerData(layerData: FormattedData<TbMapDatasource>): boolean; |
|||
|
|||
protected abstract createLayerItem(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): TbDataLayerItem<S,L>; |
|||
|
|||
} |
|||
|
|||
class TbMarkerDataLayerItem extends TbDataLayerItem<MarkersDataLayerSettings, TbMarkersDataLayer> { |
|||
|
|||
private location: L.LatLng; |
|||
private marker: L.Marker; |
|||
private labelOffset: L.PointTuple; |
|||
|
|||
constructor(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[], |
|||
protected settings: MarkersDataLayerSettings, |
|||
protected dataLayer: TbMarkersDataLayer) { |
|||
super(data, dsData, settings, dataLayer); |
|||
} |
|||
|
|||
protected create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.Layer { |
|||
this.location = this.dataLayer.extractLocation(data); |
|||
this.marker = L.marker(this.location, { |
|||
tbMarkerData: data |
|||
}); |
|||
|
|||
this.updateMarkerIcon(data, dsData); |
|||
|
|||
return this.marker; |
|||
} |
|||
|
|||
protected createEventListeners(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void { |
|||
this.dataLayer.getMap().markerClick(this.marker, data.$datasource); |
|||
} |
|||
|
|||
protected unbindLabel() { |
|||
this.marker.unbindTooltip(); |
|||
} |
|||
|
|||
protected bindLabel(content: L.Content): void { |
|||
this.marker.bindTooltip(content, { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.labelOffset }); |
|||
} |
|||
|
|||
public update(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void { |
|||
const position = this.dataLayer.extractLocation(data); |
|||
if (!this.marker.getLatLng().equals(position)) { |
|||
this.location = position; |
|||
this.marker.setLatLng(position); |
|||
} |
|||
this.updateTooltip(data, dsData); |
|||
this.updateMarkerIcon(data, dsData); |
|||
} |
|||
|
|||
private updateMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]) { |
|||
this.dataLayer.markerIconProcessor.createMarkerIcon(data, dsData).subscribe( |
|||
(iconInfo) => { |
|||
this.marker.setIcon(iconInfo.icon); |
|||
const anchor = iconInfo.icon.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.updateLabel(data, dsData); |
|||
} |
|||
); |
|||
} |
|||
} |
|||
|
|||
abstract class MarkerIconProcessor<S> { |
|||
|
|||
static fromSettings(dataLayer: TbMarkersDataLayer, |
|||
settings: MarkersDataLayerSettings): MarkerIconProcessor<any> { |
|||
switch (settings.markerType) { |
|||
case MarkerType.shape: |
|||
return new ShapeMarkerIconProcessor(dataLayer, settings.markerShape); |
|||
case MarkerType.icon: |
|||
return new IconMarkerIconProcessor(dataLayer, settings.markerIcon); |
|||
case MarkerType.image: |
|||
return new ImageMarkerIconProcessor(dataLayer, settings.markerImage); |
|||
} |
|||
} |
|||
|
|||
protected constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: S) {} |
|||
|
|||
public abstract setup(): Observable<void>; |
|||
|
|||
public abstract createMarkerIcon(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[]): Observable<MarkerIconInfo>; |
|||
|
|||
} |
|||
|
|||
abstract class BaseColorMarkerShapeProcessor<S extends BaseMarkerShapeSettings> extends MarkerIconProcessor<S> { |
|||
|
|||
private markerColorFunction: CompiledTbFunction<MapStringFunction>; |
|||
|
|||
private defaultMarkerIconInfo: MarkerIconInfo; |
|||
|
|||
protected constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: S) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
public setup(): Observable<void> { |
|||
const colorSettings = this.settings.color; |
|||
if (colorSettings.type === DataLayerColorType.function) { |
|||
return parseTbFunction<MapStringFunction>(this.dataLayer.getCtx().http, colorSettings.colorFunction, ['data', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.markerColorFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
const color = tinycolor(colorSettings.color); |
|||
return this.createMarkerShape(color, this.settings.size).pipe( |
|||
map((info) => { |
|||
this.defaultMarkerIconInfo = info; |
|||
return null; |
|||
} |
|||
)); |
|||
} |
|||
} |
|||
|
|||
public createMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): Observable<MarkerIconInfo> { |
|||
const colorSettings = this.settings.color; |
|||
if (colorSettings.type === DataLayerColorType.function) { |
|||
const functionColor = safeExecuteTbFunction(this.markerColorFunction, [data, dsData]); |
|||
let color: tinycolor.Instance; |
|||
if (isDefinedAndNotNull(functionColor)) { |
|||
color = tinycolor(functionColor); |
|||
} else { |
|||
color = tinycolor(colorSettings.color); |
|||
} |
|||
return this.createMarkerShape(color, this.settings.size); |
|||
} else { |
|||
return of(this.defaultMarkerIconInfo); |
|||
} |
|||
} |
|||
|
|||
protected abstract createMarkerShape(color: tinycolor.Instance, size: number): Observable<MarkerIconInfo>; |
|||
} |
|||
|
|||
class ShapeMarkerIconProcessor extends BaseColorMarkerShapeProcessor<MarkerShapeSettings> { |
|||
|
|||
constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: MarkerShapeSettings) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
protected createMarkerShape(color: tinycolor.Instance, size: number): Observable<MarkerIconInfo> { |
|||
return this.dataLayer.createColoredMarkerShape(this.settings.shape, color, size); |
|||
} |
|||
|
|||
} |
|||
|
|||
class IconMarkerIconProcessor extends BaseColorMarkerShapeProcessor<MarkerIconSettings> { |
|||
|
|||
constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: MarkerIconSettings) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
protected createMarkerShape(color: tinycolor.Instance, size: number): Observable<MarkerIconInfo> { |
|||
return this.dataLayer.createColoredMarkerIcon(this.settings.icon, color, size); |
|||
} |
|||
|
|||
} |
|||
|
|||
class ImageMarkerIconProcessor extends MarkerIconProcessor<MarkerImageSettings> { |
|||
|
|||
private markerImageFunction: CompiledTbFunction<MarkerImageFunction>; |
|||
|
|||
private defaultMarkerIconInfo: MarkerIconInfo; |
|||
|
|||
constructor(protected dataLayer: TbMarkersDataLayer, |
|||
protected settings: MarkerImageSettings) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
public setup(): Observable<void> { |
|||
if (this.settings.type === MarkerImageType.function) { |
|||
return parseTbFunction<MarkerImageFunction>(this.dataLayer.getCtx().http, this.settings.imageFunction, ['data', 'images', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.markerImageFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
const currentImage: MarkerImageInfo = { |
|||
url: this.settings.image, |
|||
size: this.settings.imageSize || 34 |
|||
}; |
|||
return this.loadMarkerIconInfo(currentImage).pipe( |
|||
map((iconInfo) => { |
|||
this.defaultMarkerIconInfo = iconInfo; |
|||
return null; |
|||
} |
|||
)); |
|||
} |
|||
} |
|||
|
|||
public createMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): Observable<MarkerIconInfo> { |
|||
if (this.settings.type === MarkerImageType.function) { |
|||
const currentImage: MarkerImageInfo = safeExecuteTbFunction(this.markerImageFunction, [data, this.settings.images, dsData]); |
|||
return this.loadMarkerIconInfo(currentImage); |
|||
} else { |
|||
return of(this.defaultMarkerIconInfo); |
|||
} |
|||
} |
|||
|
|||
private loadMarkerIconInfo(image: MarkerImageInfo): Observable<MarkerIconInfo> { |
|||
if (image && image.url) { |
|||
return loadImageWithAspect(this.dataLayer.getCtx().$injector.get(ImagePipe), image.url).pipe( |
|||
switchMap((aspectImage) => { |
|||
if (aspectImage?.aspect) { |
|||
let width: number; |
|||
let height: number; |
|||
if (aspectImage.aspect > 1) { |
|||
width = image.size; |
|||
height = image.size / aspectImage.aspect; |
|||
} else { |
|||
width = image.size * aspectImage.aspect; |
|||
height = image.size; |
|||
} |
|||
let iconAnchor = image.markerOffset; |
|||
let popupAnchor = image.tooltipOffset; |
|||
if (!iconAnchor) { |
|||
iconAnchor = [width * this.dataLayer.markerOffset[0], height * this.dataLayer.markerOffset[1]]; |
|||
} |
|||
if (!popupAnchor) { |
|||
popupAnchor = [width * this.dataLayer.tooltipOffset[0], height * this.dataLayer.tooltipOffset[1]]; |
|||
} |
|||
const icon = L.icon({ |
|||
iconUrl: aspectImage.url, |
|||
iconSize: [width, height], |
|||
iconAnchor, |
|||
popupAnchor |
|||
}); |
|||
const iconInfo: MarkerIconInfo = { |
|||
size: [width, height], |
|||
icon |
|||
}; |
|||
return of(iconInfo); |
|||
} else { |
|||
return this.dataLayer.createDefaultMarkerIcon(); |
|||
} |
|||
}), |
|||
catchError(() => this.dataLayer.createDefaultMarkerIcon()) |
|||
); |
|||
} else { |
|||
return this.dataLayer.createDefaultMarkerIcon(); |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
export class TbMarkersDataLayer extends TbMapDataLayer<MarkersDataLayerSettings, TbMarkersDataLayer> { |
|||
|
|||
public markerIconProcessor: MarkerIconProcessor<any>; |
|||
|
|||
public markerOffset: L.LatLngTuple; |
|||
public tooltipOffset: L.LatLngTuple; |
|||
|
|||
constructor(protected map: TbMap<any>, |
|||
inputSettings: MarkersDataLayerSettings) { |
|||
super(map, inputSettings); |
|||
} |
|||
|
|||
public dataLayerType(): MapDataLayerType { |
|||
return MapDataLayerType.marker; |
|||
} |
|||
|
|||
protected setupDatasource(datasource: TbMapDatasource): TbMapDatasource { |
|||
datasource.dataKeys.push(this.settings.xKey, this.settings.yKey); |
|||
return datasource; |
|||
} |
|||
|
|||
protected defaultBaseSettings(): Partial<MarkersDataLayerSettings> { |
|||
return defaultBaseMarkersDataLayerSettings; |
|||
} |
|||
|
|||
protected doSetup(): Observable<void> { |
|||
this.markerOffset = [ |
|||
isDefined(this.settings.markerOffsetX) ? this.settings.markerOffsetX : 0.5, |
|||
isDefined(this.settings.markerOffsetY) ? this.settings.markerOffsetY : 1, |
|||
]; |
|||
this.tooltipOffset = [ |
|||
isDefined(this.settings.tooltip?.offsetX) ? this.settings.tooltip?.offsetX : 0, |
|||
isDefined(this.settings.tooltip?.offsetY) ? this.settings.tooltip?.offsetY : -1, |
|||
]; |
|||
|
|||
this.markerIconProcessor = MarkerIconProcessor.fromSettings(this, this.settings); |
|||
return this.markerIconProcessor.setup(); |
|||
} |
|||
|
|||
protected isValidLayerData(layerData: FormattedData<TbMapDatasource>): boolean { |
|||
return !!this.extractPosition(layerData); |
|||
} |
|||
|
|||
protected createLayerItem(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): TbMarkerDataLayerItem { |
|||
return new TbMarkerDataLayerItem(data, dsData, this.settings, this); |
|||
} |
|||
|
|||
private extractPosition(data: FormattedData<TbMapDatasource>): {x: number; y: number} { |
|||
if (data) { |
|||
const xKeyVal = data[this.settings.xKey.label]; |
|||
const yKeyVal = data[this.settings.yKey.label]; |
|||
switch (this.mapType()) { |
|||
case MapType.geoMap: |
|||
if (!isValidLatLng(xKeyVal, yKeyVal)) { |
|||
return null; |
|||
} |
|||
break; |
|||
case MapType.image: |
|||
if (!isDefinedAndNotNull(xKeyVal) || isEmptyStr(xKeyVal) || isNaN(xKeyVal) || !isDefinedAndNotNull(yKeyVal) || isEmptyStr(yKeyVal) || isNaN(yKeyVal)) { |
|||
return null; |
|||
} |
|||
break; |
|||
} |
|||
return {x: xKeyVal, y: yKeyVal}; |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
public createDefaultMarkerIcon(): Observable<MarkerIconInfo> { |
|||
const color = this.settings.markerShape?.color?.color || '#307FE5'; |
|||
return this.createColoredMarkerShape(MarkerShape.markerShape1, tinycolor(color)); |
|||
} |
|||
|
|||
public createColoredMarkerShape(shape: MarkerShape, color: tinycolor.Instance, size = 34): Observable<MarkerIconInfo> { |
|||
return createColorMarkerShapeURI(this.getCtx().$injector.get(MatIconRegistry), this.getCtx().$injector.get(DomSanitizer), shape, color).pipe( |
|||
map((iconUrl) => { |
|||
return { |
|||
size: [size, size], |
|||
icon: L.icon({ |
|||
iconUrl, |
|||
iconSize: [size, size], |
|||
iconAnchor: [size * this.markerOffset[0], size * this.markerOffset[1]], |
|||
popupAnchor: [size * this.tooltipOffset[0], size * this.tooltipOffset[1]] |
|||
}) |
|||
}; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public createColoredMarkerIcon(icon: string, color: tinycolor.Instance, size = 34): Observable<MarkerIconInfo> { |
|||
return createColorMarkerIconElement(this.getCtx().$injector.get(MatIconRegistry), this.getCtx().$injector.get(DomSanitizer), icon, color).pipe( |
|||
map((element) => { |
|||
return { |
|||
size: [size, size], |
|||
icon: L.divIcon({ |
|||
html: element.outerHTML, |
|||
className: 'tb-marker-div-icon', |
|||
iconSize: [size, size], |
|||
iconAnchor: [size * this.markerOffset[0], size * this.markerOffset[1]], |
|||
popupAnchor: [size * this.tooltipOffset[0], size * this.tooltipOffset[1]] |
|||
}) |
|||
}; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public extractLocation(data: FormattedData<TbMapDatasource>): L.LatLng { |
|||
const position = this.extractPosition(data); |
|||
if (position) { |
|||
return this.map.positionToLatLng(position); |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
} |
|||
|
|||
class TbPolygonDataLayerItem extends TbDataLayerItem<PolygonsDataLayerSettings, TbPolygonsDataLayer> { |
|||
|
|||
private polygonContainer: L.FeatureGroup; |
|||
private polygon: L.Polygon; |
|||
|
|||
constructor(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[], |
|||
protected settings: PolygonsDataLayerSettings, |
|||
protected dataLayer: TbPolygonsDataLayer) { |
|||
super(data, dsData, settings, dataLayer); |
|||
} |
|||
|
|||
protected create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.Layer { |
|||
const polyData = this.dataLayer.extractPolygonCoordinates(data); |
|||
const polyConstructor = isCutPolygon(polyData) || polyData.length !== 2 ? L.polygon : L.rectangle; |
|||
const style = this.dataLayer.getShapeStyle(data, dsData); |
|||
this.polygon = polyConstructor(polyData, { |
|||
...style |
|||
}); |
|||
|
|||
this.polygonContainer = L.featureGroup(); |
|||
this.polygon.addTo(this.polygonContainer); |
|||
|
|||
this.updateLabel(data, dsData); |
|||
return this.polygonContainer; |
|||
} |
|||
|
|||
protected createEventListeners(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void { |
|||
this.dataLayer.getMap().polygonClick(this.polygonContainer, data.$datasource); |
|||
} |
|||
|
|||
protected unbindLabel() { |
|||
this.polygonContainer.unbindTooltip(); |
|||
} |
|||
|
|||
protected bindLabel(content: L.Content): void { |
|||
this.polygonContainer.bindTooltip(content, {className: 'tb-polygon-label', permanent: true, direction: 'center'}) |
|||
.openTooltip(this.polygonContainer.getBounds().getCenter()); |
|||
} |
|||
|
|||
public update(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void { |
|||
const polyData = this.dataLayer.extractPolygonCoordinates(data); |
|||
const style = this.dataLayer.getShapeStyle(data, dsData); |
|||
if (isCutPolygon(polyData) || polyData.length !== 2) { |
|||
if (this.polygon instanceof L.Rectangle) { |
|||
this.polygonContainer.removeLayer(this.polygon); |
|||
this.polygon = L.polygon(polyData, { |
|||
...style |
|||
}); |
|||
this.polygon.addTo(this.polygonContainer); |
|||
} else { |
|||
this.polygon.setLatLngs(polyData); |
|||
} |
|||
} else if (polyData.length === 2) { |
|||
const bounds = new L.LatLngBounds(polyData); |
|||
// @ts-ignore
|
|||
this.leafletPoly.setBounds(bounds); |
|||
} |
|||
this.updateTooltip(data, dsData); |
|||
this.updateLabel(data, dsData); |
|||
this.polygon.setStyle(style); |
|||
} |
|||
} |
|||
|
|||
abstract class TbShapesDataLayer<S extends ShapeDataLayerSettings, L extends TbMapDataLayer<S,L>> extends TbMapDataLayer<S, L> { |
|||
|
|||
public fillColorProcessor: DataLayerColorProcessor; |
|||
public strokeColorProcessor: DataLayerColorProcessor; |
|||
|
|||
protected constructor(protected map: TbMap<any>, |
|||
inputSettings: S) { |
|||
super(map, inputSettings); |
|||
} |
|||
|
|||
protected doSetup(): Observable<any> { |
|||
this.fillColorProcessor = new DataLayerColorProcessor(this, this.settings.fillColor); |
|||
this.strokeColorProcessor = new DataLayerColorProcessor(this, this.settings.strokeColor); |
|||
return forkJoin([this.fillColorProcessor.setup(), this.strokeColorProcessor.setup()]); |
|||
} |
|||
|
|||
public getShapeStyle(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.PathOptions { |
|||
const fill = this.fillColorProcessor.processColor(data, dsData); |
|||
const stroke = this.strokeColorProcessor.processColor(data, dsData); |
|||
return { |
|||
fill: true, |
|||
fillColor: fill, |
|||
color: stroke, |
|||
weight: this.settings.strokeWeight, |
|||
fillOpacity: 1, |
|||
opacity: 1 |
|||
}; |
|||
} |
|||
} |
|||
|
|||
export class TbPolygonsDataLayer extends TbShapesDataLayer<PolygonsDataLayerSettings, TbPolygonsDataLayer> { |
|||
|
|||
constructor(protected map: TbMap<any>, |
|||
inputSettings: PolygonsDataLayerSettings) { |
|||
super(map, inputSettings); |
|||
} |
|||
|
|||
public dataLayerType(): MapDataLayerType { |
|||
return MapDataLayerType.polygon; |
|||
} |
|||
|
|||
protected setupDatasource(datasource: TbMapDatasource): TbMapDatasource { |
|||
datasource.dataKeys.push(this.settings.polygonKey); |
|||
return datasource; |
|||
} |
|||
|
|||
protected defaultBaseSettings(): Partial<PolygonsDataLayerSettings> { |
|||
return defaultBasePolygonsDataLayerSettings; |
|||
} |
|||
|
|||
protected doSetup(): Observable<any> { |
|||
return super.doSetup(); |
|||
} |
|||
|
|||
protected isValidLayerData(layerData: FormattedData<TbMapDatasource>): boolean { |
|||
return layerData && ((isNotEmptyStr(layerData[this.settings.polygonKey.label]) && !isJSON(layerData[this.settings.polygonKey.label]) |
|||
|| Array.isArray(layerData[this.settings.polygonKey.label]))); |
|||
} |
|||
|
|||
protected createLayerItem(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): TbPolygonDataLayerItem { |
|||
return new TbPolygonDataLayerItem(data, dsData, this.settings, this); |
|||
} |
|||
|
|||
public extractPolygonCoordinates(data: FormattedData<TbMapDatasource>) { |
|||
let rawPolyData = data[this.settings.polygonKey.label]; |
|||
if (isString(rawPolyData)) { |
|||
rawPolyData = JSON.parse(rawPolyData); |
|||
} |
|||
return this.map.toPolygonCoordinates(rawPolyData); |
|||
} |
|||
} |
|||
|
|||
class TbCircleDataLayerItem extends TbDataLayerItem<CirclesDataLayerSettings, TbCirclesDataLayer> { |
|||
|
|||
private circle: L.Circle; |
|||
|
|||
constructor(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[], |
|||
protected settings: CirclesDataLayerSettings, |
|||
protected dataLayer: TbCirclesDataLayer) { |
|||
super(data, dsData, settings, dataLayer); |
|||
} |
|||
|
|||
protected create(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): L.Layer { |
|||
const circleData = this.dataLayer.extractCircleCoordinates(data); |
|||
const center = new L.LatLng(circleData.latitude, circleData.longitude); |
|||
const style = this.dataLayer.getShapeStyle(data, dsData); |
|||
this.circle = L.circle(center, { |
|||
radius: circleData.radius, |
|||
...style |
|||
}); |
|||
this.updateLabel(data, dsData); |
|||
return this.circle; |
|||
} |
|||
|
|||
protected createEventListeners(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void { |
|||
this.dataLayer.getMap().circleClick(this.circle, data.$datasource); |
|||
} |
|||
|
|||
protected unbindLabel() { |
|||
this.circle.unbindTooltip(); |
|||
} |
|||
|
|||
protected bindLabel(content: L.Content): void { |
|||
this.circle.bindTooltip(content, { className: 'tb-polygon-label', permanent: true, direction: 'center'}) |
|||
.openTooltip(this.circle.getLatLng()); |
|||
} |
|||
|
|||
public update(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): void { |
|||
const circleData = this.dataLayer.extractCircleCoordinates(data); |
|||
const center = new L.LatLng(circleData.latitude, circleData.longitude); |
|||
if (!this.circle.getLatLng().equals(center)) { |
|||
this.circle.setLatLng(center); |
|||
} |
|||
if (this.circle.getRadius() !== circleData.radius) { |
|||
this.circle.setRadius(circleData.radius); |
|||
} |
|||
this.updateTooltip(data, dsData); |
|||
this.updateLabel(data, dsData); |
|||
const style = this.dataLayer.getShapeStyle(data, dsData); |
|||
this.circle.setStyle(style); |
|||
} |
|||
} |
|||
|
|||
export class TbCirclesDataLayer extends TbShapesDataLayer<CirclesDataLayerSettings, TbCirclesDataLayer> { |
|||
|
|||
constructor(protected map: TbMap<any>, |
|||
inputSettings: CirclesDataLayerSettings) { |
|||
super(map, inputSettings); |
|||
} |
|||
|
|||
public dataLayerType(): MapDataLayerType { |
|||
return MapDataLayerType.circle; |
|||
} |
|||
|
|||
protected setupDatasource(datasource: TbMapDatasource): TbMapDatasource { |
|||
datasource.dataKeys.push(this.settings.circleKey); |
|||
return datasource; |
|||
} |
|||
|
|||
protected defaultBaseSettings(): Partial<CirclesDataLayerSettings> { |
|||
return defaultBaseCirclesDataLayerSettings; |
|||
} |
|||
|
|||
protected doSetup(): Observable<void> { |
|||
return super.doSetup(); |
|||
} |
|||
|
|||
protected isValidLayerData(layerData: FormattedData<TbMapDatasource>): boolean { |
|||
return layerData && isNotEmptyStr(layerData[this.settings.circleKey.label]) && isJSON(layerData[this.settings.circleKey.label]); |
|||
} |
|||
|
|||
protected createLayerItem(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): TbDataLayerItem<CirclesDataLayerSettings, TbCirclesDataLayer> { |
|||
throw new TbCircleDataLayerItem(data, dsData, this.settings, this); |
|||
} |
|||
|
|||
public extractCircleCoordinates(data: FormattedData<TbMapDatasource>) { |
|||
const circleData: TbCircleData = JSON.parse(data[this.settings.circleKey.label]); |
|||
return this.map.convertCircleData(circleData); |
|||
} |
|||
|
|||
|
|||
} |
|||
@ -0,0 +1,98 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-form-panel tb-slide-toggle" [formGroup]="clusteringSettingsFormGroup"> |
|||
<mat-expansion-panel class="tb-settings" [expanded]="settingsExpanded" |
|||
[disabled]="!clusteringSettingsFormGroup.get('enable').value"> |
|||
<mat-expansion-panel-header class="flex flex-row flex-wrap"> |
|||
<mat-panel-title> |
|||
<mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="enable" (click)="$event.stopPropagation()"> |
|||
{{ 'widgets.maps.data-layer.marker.clustering.use-map-markers-clustering' | translate }} |
|||
</mat-slide-toggle> |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="zoomOnClick"> |
|||
{{ 'widgets.maps.data-layer.marker.clustering.zoom-on-cluster-click' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div translate>widgets.maps.data-layer.marker.clustering.max-zoom</div> |
|||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" max="18" step="1" formControlName="maxZoom" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div translate>widgets.maps.data-layer.marker.clustering.max-radius</div> |
|||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" formControlName="maxClusterRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<span matSuffix>px</span> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="zoomAnimation"> |
|||
{{ 'widgets.maps.data-layer.marker.clustering.zoom-animation' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="showCoverageOnHover"> |
|||
{{ 'widgets.maps.data-layer.marker.clustering.bounds-on-cluster-mouse-over' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="spiderfyOnMaxZoom"> |
|||
{{ 'widgets.maps.data-layer.marker.clustering.spiderfy-max-zoom-level' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-panel stroked"> |
|||
<div class="tb-form-panel-title" translate>widgets.maps.data-layer.marker.clustering.load-optimization</div> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="chunkedLoad"> |
|||
{{ 'widgets.maps.data-layer.marker.clustering.chunked-load' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="lazyLoad"> |
|||
{{ 'widgets.maps.data-layer.marker.clustering.lazy-load' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel stroked tb-slide-toggle"> |
|||
<mat-expansion-panel class="tb-settings" [expanded]="clusteringSettingsFormGroup.get('useClusterMarkerColorFunction').value" |
|||
[disabled]="!clusteringSettingsFormGroup.get('useClusterMarkerColorFunction').value"> |
|||
<mat-expansion-panel-header class="flex flex-row flex-wrap"> |
|||
<mat-panel-title> |
|||
<mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="useClusterMarkerColorFunction" (click)="$event.stopPropagation()"> |
|||
{{ 'widgets.maps.data-layer.marker.clustering.use-cluster-marker-color-function' | translate }} |
|||
</mat-slide-toggle> |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<tb-js-func formControlName="clusterMarkerColorFunction" |
|||
withModules |
|||
[globalVariables]="functionScopeVariables" |
|||
[functionArgs]="['data', 'childCount']" |
|||
functionTitle="{{ 'widgets.maps.data-layer.marker.clustering.marker-color-function' | translate }}" |
|||
helpId="widget/lib/map/clustering_color_fn"> |
|||
</tb-js-func> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</div> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</div> |
|||
@ -0,0 +1,156 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, DestroyRef, forwardRef, Input, OnInit } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
UntypedFormBuilder, |
|||
UntypedFormControl, |
|||
UntypedFormGroup, |
|||
Validator, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { WidgetService } from '@core/http/widget.service'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { MarkerClusteringSettings } from '@home/components/widget/lib/maps/models/map.models'; |
|||
import { merge } from 'rxjs'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-marker-clustering-settings', |
|||
templateUrl: './marker-clustering-settings.component.html', |
|||
styleUrls: ['./../../widget-settings.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => MarkerClusteringSettingsComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => MarkerClusteringSettingsComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class MarkerClusteringSettingsComponent implements OnInit, ControlValueAccessor, Validator { |
|||
|
|||
settingsExpanded = false; |
|||
|
|||
functionScopeVariables = this.widgetService.getWidgetScopeVariables(); |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
private modelValue: MarkerClusteringSettings; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
public clusteringSettingsFormGroup: UntypedFormGroup; |
|||
|
|||
constructor(private fb: UntypedFormBuilder, |
|||
private widgetService: WidgetService, |
|||
private destroyRef: DestroyRef) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
|
|||
this.clusteringSettingsFormGroup = this.fb.group({ |
|||
enable: [null, []], |
|||
zoomOnClick: [null, []], |
|||
maxZoom: [null, [Validators.min(0), Validators.max(18)]], |
|||
maxClusterRadius: [null, [Validators.min(0)]], |
|||
zoomAnimation: [null, []], |
|||
showCoverageOnHover: [null, []], |
|||
spiderfyOnMaxZoom: [null, []], |
|||
chunkedLoad: [null, []], |
|||
lazyLoad: [null, []], |
|||
useClusterMarkerColorFunction: [null, []], |
|||
clusterMarkerColorFunction: [null, []] |
|||
}); |
|||
this.clusteringSettingsFormGroup.valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe(() => { |
|||
this.updateModel(); |
|||
}); |
|||
merge(this.clusteringSettingsFormGroup.get('enable').valueChanges, |
|||
this.clusteringSettingsFormGroup.get('useClusterMarkerColorFunction').valueChanges).pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe(() => { |
|||
this.updateValidators(); |
|||
}); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(_fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (isDisabled) { |
|||
this.clusteringSettingsFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.clusteringSettingsFormGroup.enable({emitEvent: false}); |
|||
this.updateValidators(); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: MarkerClusteringSettings): void { |
|||
this.modelValue = value; |
|||
this.clusteringSettingsFormGroup.patchValue( |
|||
value, {emitEvent: false} |
|||
); |
|||
this.settingsExpanded = this.clusteringSettingsFormGroup.get('enable').value; |
|||
this.updateValidators(); |
|||
this.clusteringSettingsFormGroup.get('enable').valueChanges.pipe( |
|||
takeUntilDestroyed(this.destroyRef) |
|||
).subscribe((enable) => { |
|||
this.settingsExpanded = enable; |
|||
}); |
|||
} |
|||
|
|||
public validate(c: UntypedFormControl) { |
|||
const valid = this.clusteringSettingsFormGroup.valid; |
|||
return valid ? null : { |
|||
markerClustering: { |
|||
valid: false, |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
private updateValidators() { |
|||
const enable: boolean = this.clusteringSettingsFormGroup.get('enable').value; |
|||
const useClusterMarkerColorFunction: boolean = this.clusteringSettingsFormGroup.get('useClusterMarkerColorFunction').value; |
|||
if (enable) { |
|||
this.clusteringSettingsFormGroup.enable({emitEvent: false}); |
|||
if (!useClusterMarkerColorFunction) { |
|||
this.clusteringSettingsFormGroup.get('clusterMarkerColorFunction').disable({emitEvent: false}); |
|||
} |
|||
} else { |
|||
this.clusteringSettingsFormGroup.disable({emitEvent: false}); |
|||
this.clusteringSettingsFormGroup.get('enable').enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
private updateModel() { |
|||
this.modelValue = this.clusteringSettingsFormGroup.getRawValue(); |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue