diff --git a/ui-ngx/src/app/core/api/alarm-data-subscription.ts b/ui-ngx/src/app/core/api/alarm-data-subscription.ts index 3e2570896d..4d3524324e 100644 --- a/ui-ngx/src/app/core/api/alarm-data-subscription.ts +++ b/ui-ngx/src/app/core/api/alarm-data-subscription.ts @@ -31,7 +31,6 @@ import { } from '@shared/models/query/query.models'; import { SubscriptionTimewindow } from '@shared/models/time/time.models'; import { AlarmDataListener } from '@core/api/alarm-data.service'; -import { UtilsService } from '@core/services/utils.service'; import { PageData } from '@shared/models/page/page-data'; import { deepClone, isDefined, isDefinedAndNotNull, isObject } from '@core/utils'; import { simulatedAlarm } from '@shared/models/alarm.models'; @@ -68,8 +67,7 @@ export class AlarmDataSubscription { constructor(public alarmDataSubscriptionOptions: AlarmDataSubscriptionOptions, private listener: AlarmDataListener, - private telemetryService: TelemetryService, - private utils: UtilsService) { + private telemetryService: TelemetryService) { } public unsubscribe() { @@ -166,7 +164,7 @@ export class AlarmDataSubscription { private onPageData(pageData: PageData, allowedEntities: number, totalEntities: number) { this.pageData = pageData; this.resetData(); - this.listener.alarmsLoaded(pageData, this.alarmDataSubscriptionOptions.pageLink, allowedEntities, totalEntities); + this.listener.alarmsLoaded(pageData, allowedEntities, totalEntities); } private onDataUpdate(update: Array) { diff --git a/ui-ngx/src/app/core/api/alarm-data.service.ts b/ui-ngx/src/app/core/api/alarm-data.service.ts index 87d3ee02ca..cdd9874098 100644 --- a/ui-ngx/src/app/core/api/alarm-data.service.ts +++ b/ui-ngx/src/app/core/api/alarm-data.service.ts @@ -31,7 +31,7 @@ import { deepClone } from '@core/utils'; export interface AlarmDataListener { subscriptionTimewindow?: SubscriptionTimewindow; alarmSource: Datasource; - alarmsLoaded: (pageData: PageData, pageLink: AlarmDataPageLink, allowedEntities: number, totalEntities: number) => void; + alarmsLoaded: (pageData: PageData, allowedEntities: number, totalEntities: number) => void; alarmsUpdated: (update: Array, pageData: PageData) => void; subscription?: AlarmDataSubscription; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 49fdd19677..bdd3f8875d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -15,7 +15,7 @@ /// import L, { - FeatureGroup, + FeatureGroup, Icon, LatLngBounds, LatLngTuple, markerClusterGroup, @@ -59,6 +59,7 @@ export default abstract class LeafletMap { points: FeatureGroup; markersData: FormattedData[] = []; polygonsData: FormattedData[] = []; + defaultMarkerIconInfo: { size: number[], icon: Icon }; protected constructor(public ctx: WidgetContext, public $container: HTMLElement, @@ -308,7 +309,11 @@ export default abstract class LeafletMap { updateMarkers(markersData: FormattedData[], updateBounds = true, callback?) { const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata)); this.ready$.subscribe(() => { - const keys: string[] = []; + const toDelete = new Set(Array.from(this.markers.keys())); + const createdMarkers: Marker[] = []; + const updatedMarkers: Marker[] = []; + const deletedMarkers: Marker[] = []; + let m: Marker; rawMarkers.forEach(data => { if (data.rotationAngle || data.rotationAngle === 0) { const currentImage = this.options.useMarkerImageFunction ? @@ -325,22 +330,36 @@ export default abstract class LeafletMap { this.options.icon = null; } if (this.markers.get(data.entityName)) { - this.updateMarker(data.entityName, data, markersData, this.options) + m = this.updateMarker(data.entityName, data, markersData, this.options); + if (m) { + updatedMarkers.push(m); + } } else { - this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, updateBounds, callback); - } - keys.push(data.entityName); - }); - const toDelete: string[] = []; - this.markers.forEach((v, mKey) => { - if (!keys.includes(mKey)) { - toDelete.push(mKey); + m = this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, updateBounds, callback); + if (m) { + createdMarkers.push(m); + } } + toDelete.delete(data.entityName); }); toDelete.forEach((key) => { - this.deleteMarker(key); + m = this.deleteMarker(key); + if (m) { + deletedMarkers.push(m); + } }); this.markersData = markersData; + if ((this.options as MarkerSettings).useClusterMarkers) { + if (createdMarkers.length) { + this.markersCluster.addLayers(createdMarkers.map(marker => marker.leafletMarker)); + } + if (updatedMarkers.length) { + this.markersCluster.refreshClusters(updatedMarkers.map(marker => marker.leafletMarker)) + } + if (deletedMarkers.length) { + this.markersCluster.removeLayers(deletedMarkers.map(marker => marker.leafletMarker)); + } + } }); } @@ -350,22 +369,20 @@ export default abstract class LeafletMap { } private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, - updateBounds = true, callback?) { - const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker); + updateBounds = true, callback?): Marker { + const newMarker = new Marker(this, this.convertPosition(data), settings, data, dataSources, this.dragMarker); if (callback) newMarker.leafletMarker.on('click', () => { callback(data, true) }); if (this.bounds && updateBounds) this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); this.markers.set(key, newMarker); - if (this.options.useClusterMarkers) { - this.markersCluster.addLayer(newMarker.leafletMarker); - } - else { - this.map.addLayer(newMarker.leafletMarker); + if (!this.options.useClusterMarkers) { + this.map.addLayer(newMarker.leafletMarker); } + return newMarker; } - private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) { + private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings): Marker { const marker: Marker = this.markers.get(key); const location = this.convertPosition(data) if (!location.equals(marker.location)) { @@ -374,24 +391,21 @@ export default abstract class LeafletMap { if (settings.showTooltip) { marker.updateMarkerTooltip(data); } - if (settings.useClusterMarkers) { - this.markersCluster.refreshClusters() - } marker.setDataSources(data, dataSources); marker.updateMarkerIcon(settings); + return marker; } - deleteMarker(key: string) { - let marker = this.markers.get(key)?.leafletMarker; - if (marker) { - if (this.options.useClusterMarkers) { - this.markersCluster.removeLayer(marker); - } else { - this.map.removeLayer(marker); - } - this.markers.delete(key); - marker = null; - } + deleteMarker(key: string): Marker { + const marker = this.markers.get(key); + const leafletMarker = marker?.leafletMarker; + if (leafletMarker) { + if (!this.options.useClusterMarkers) { + this.map.removeLayer(leafletMarker); + } + this.markers.delete(key); + } + return marker; } updatePoints(pointsData: FormattedData[], getTooltip: (point: FormattedData, setTooltip?: boolean) => string) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts index b67925038c..0bb6c05aac 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts @@ -210,8 +210,9 @@ function parseTemplate(template: string, data: { $datasource?: Datasource, [key: match = buttonActionRegex.exec(template); } - const compiled = _.template(template); - res = compiled(data); + // const compiled = _.template(template); + // res = compiled(data); + res = template; } catch (ex) { console.log(ex, template) } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts index eec2e257ea..4bbfb22dd8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts @@ -19,6 +19,7 @@ import { FormattedData, MarkerSettings } from './map-models'; import { aspectCache, bindPopupActions, createTooltip, parseWithTranslation, safeExecute } from './maps-utils'; import tinycolor from 'tinycolor2'; import { isDefined } from '@core/utils'; +import LeafletMap from './leaflet-map'; export class Marker { leafletMarker: L.Marker; @@ -29,7 +30,7 @@ export class Marker { data: FormattedData; dataSources: FormattedData[]; - constructor(location: L.LatLngExpression, public settings: MarkerSettings, + constructor(private map: LeafletMap, location: L.LatLngExpression, public settings: MarkerSettings, data?: FormattedData, dataSources?, onDragendListener?) { this.setDataSources(data, dataSources); this.leafletMarker = L.marker(location, { @@ -158,24 +159,24 @@ export class Marker { } createDefaultMarkerIcon(color, onMarkerIconReady) { + if (!this.map.defaultMarkerIconInfo) { const icon = L.icon({ - iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color, - iconSize: [21, 34], - iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]], - popupAnchor: [0, -34], - shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', - shadowSize: [40, 37], - shadowAnchor: [12, 35] + iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color, + iconSize: [21, 34], + iconAnchor: [21 * this.markerOffset[0], 34 * this.markerOffset[1]], + popupAnchor: [0, -34], + shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', + shadowSize: [40, 37], + shadowAnchor: [12, 35] }); - const iconInfo = { - size: [21, 34], - icon + this.map.defaultMarkerIconInfo = { + size: [21, 34], + icon }; - onMarkerIconReady(iconInfo); + } + onMarkerIconReady(this.map.defaultMarkerIconInfo); } - - removeMarker() { /* this.map$.subscribe(map => this.leafletMarker.addTo(map))*/