Merge pull request #2787 from vvlladd28/improvement/3.0/polyline

Refactoring ui polilyne

ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts

@@ -343,12 +343,12 @@ export default abstract class LeafletMap {
 
     // Polyline
 
-    updatePolylines(polyData: FormattedData[][]) {
-        polyData.forEach((data: FormattedData[]) => {
-            if (data.length) {
-                const dataSource = polyData.map(arr => arr[0]);
-                if (this.polylines.get(data[0].entityName)) {
-                    this.updatePolyline(data[0].entityName, data, dataSource, this.options);
+    updatePolylines(polyData: FormattedData[][], data?: FormattedData) {
+        polyData.forEach((dataSource) => {
+            data = data || dataSource[0];
+            if (dataSource.length) {
+                if (this.polylines.get(data.$datasource.entityName)) {
+                    this.updatePolyline(data, dataSource, this.options);
                 }
                 else {
                     this.createPolyline(data, dataSource, this.options);
@@ -357,22 +357,20 @@ export default abstract class LeafletMap {
         })
     }
 
-    createPolyline(data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) {
-        if (data.length)
-            this.ready$.subscribe(() => {
-                const poly = new Polyline(this.map,
-                    data.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
-                const bounds = poly.leafletPoly.getBounds();
-                this.fitBounds(bounds);
-                this.polylines.set(data[0].entityName, poly);
-            });
+    createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
+        this.ready$.subscribe(() => {
+            const poly = new Polyline(this.map,
+              dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
+            const bounds = poly.leafletPoly.getBounds();
+            this.fitBounds(bounds);
+            this.polylines.set(data.$datasource.entityName, poly);
+        });
     }
 
-    updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) {
+    updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
         this.ready$.subscribe(() => {
-            const poly = this.polylines.get(key);
-            poly.updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources);
-            const bounds = poly.leafletPoly.getBounds();
+            const poly = this.polylines.get(data.$datasource.entityName);
+            poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
         });
     }
 

ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts

@@ -20,7 +20,7 @@ import { Datasource } from '@app/shared/models/widget.models';
 import _ from 'lodash';
 import { Observable, Observer, of } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { createLabelFromDatasource, hashCode, isNumber, padValue } from '@core/utils';
+import { createLabelFromDatasource, hashCode, isNumber, isUndefined, padValue } from '@core/utils';
 
 export function createTooltip(target: L.Layer,
     settings: MarkerSettings | PolylineSettings | PolygonSettings,
@@ -70,6 +70,9 @@ export function interpolateOnLineSegment(
 }
 
 export function findAngle(startPoint: FormattedData, endPoint: FormattedData, latKeyName: string, lngKeyName: string): number {
+  if(isUndefined(startPoint) || isUndefined(endPoint)){
+    return 0;
+  }
   let angle = -Math.atan2(endPoint[latKeyName] - startPoint[latKeyName], endPoint[lngKeyName] - startPoint[lngKeyName]);
   angle = angle * 180 / Math.PI;
   return parseInt(angle.toFixed(2), 10);

ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts

@@ -21,11 +21,11 @@ import { FormattedData, PolygonSettings } from './map-models';
 export class Polygon {
 
     leafletPoly: L.Polygon;
-    tooltip;
-    data;
-    dataSources;
+    tooltip: L.Popup;
+    data: FormattedData;
+    dataSources: FormattedData[];
 
-    constructor(public map, polyData: FormattedData, dataSources, private settings: PolygonSettings) {
+    constructor(public map, polyData: FormattedData, dataSources: FormattedData[], private settings: PolygonSettings) {
         this.dataSources = dataSources;
         this.data = polyData;
         const polygonColor = this.getPolygonColor(settings);

ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts

@@ -17,82 +17,83 @@
 import L, { PolylineDecoratorOptions } from 'leaflet';
 import 'leaflet-polylinedecorator';
 
-import { PolylineSettings } from './map-models';
+import { FormattedData, PolylineSettings } from './map-models';
 import { safeExecute } from '@home/components/widget/lib/maps/maps-utils';
 
 export class Polyline {
 
-    leafletPoly: L.Polyline;
-    polylineDecorator: L.PolylineDecorator;
-    dataSources;
-    data;
+  leafletPoly: L.Polyline;
+  polylineDecorator: L.PolylineDecorator;
+  dataSources: FormattedData[];
+  data: FormattedData;
 
-    constructor(private map: L.Map, locations, data, dataSources, settings: PolylineSettings) {
-        this.dataSources = dataSources;
-        this.data = data;
+  constructor(private map: L.Map, locations: L.LatLng[], data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
+    this.dataSources = dataSources;
+    this.data = data;
 
-        this.leafletPoly = L.polyline(locations,
-            this.getPolyStyle(settings)
-        ).addTo(this.map);
+    this.leafletPoly = L.polyline(locations,
+      this.getPolyStyle(settings)
+    ).addTo(this.map);
 
-        if (settings.usePolylineDecorator) {
-            this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);
-        }
+    if (settings.usePolylineDecorator) {
+      this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);
     }
+  }
 
-    getDecoratorSettings(settings: PolylineSettings): PolylineDecoratorOptions {
-        return {
-            patterns: [
-                {
-                    offset: settings.decoratorOffset,
-                    endOffset: settings.endDecoratorOffset,
-                    repeat: settings.decoratorRepeat,
-                    symbol: L.Symbol[settings.decoratorSymbol]({
-                        pixelSize: settings.decoratorSymbolSize,
-                        polygon: false,
-                        pathOptions: {
-                            color: settings.useDecoratorCustomColor ? settings.decoratorCustomColor : this.getPolyStyle(settings).color,
-                            stroke: true
-                        }
-                    })
-                }
-            ],
-            interactive: false,
-        } as PolylineDecoratorOptions
+  getDecoratorSettings(settings: PolylineSettings): PolylineDecoratorOptions {
+    return {
+      patterns: [
+        {
+          offset: settings.decoratorOffset,
+          endOffset: settings.endDecoratorOffset,
+          repeat: settings.decoratorRepeat,
+          symbol: L.Symbol[settings.decoratorSymbol]({
+            pixelSize: settings.decoratorSymbolSize,
+            polygon: false,
+            pathOptions: {
+              color: settings.useDecoratorCustomColor ? settings.decoratorCustomColor : this.getPolyStyle(settings).color,
+              stroke: true
+            }
+          })
+        }
+      ]
     }
+  }
 
-    updatePolyline(settings, data, dataSources) {
-        this.data = data;
-        this.dataSources = dataSources;
-        this.leafletPoly.setStyle(this.getPolyStyle(settings));
-        //  this.setPolylineLatLngs(data);
-        if (this.polylineDecorator)
-            this.polylineDecorator.setPaths(this.leafletPoly);
-    }
+  updatePolyline(locations: L.LatLng[], data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
+    this.data = data;
+    this.dataSources = dataSources;
+    this.leafletPoly.setLatLngs(locations);
+    this.leafletPoly.setStyle(this.getPolyStyle(settings));
+    //  this.setPolylineLatLngs(data);
+    if (this.polylineDecorator)
+      this.polylineDecorator.setPaths(this.leafletPoly);
+  }
 
-    getPolyStyle(settings: PolylineSettings): L.PolylineOptions {
-        return {
-            color: settings.useColorFunction ?
-                safeExecute(settings.colorFunction,
-                    [this.data, this.dataSources, this.dataSources[0]?.dsIndex]) : settings.color,
-            opacity: settings.useStrokeOpacityFunction ?
-                safeExecute(settings.strokeOpacityFunction,
-                    [this.data, this.dataSources, this.dataSources[0]?.dsIndex]) : settings.strokeOpacity,
-            weight: settings.useStrokeWeightFunction ?
-                safeExecute(settings.strokeWeightFunction,
-                    [this.data, this.dataSources, this.dataSources[0]?.dsIndex]) : settings.strokeWeight,
-        }
+  getPolyStyle(settings: PolylineSettings): L.PolylineOptions {
+    return {
+      interactive: false,
+      color: settings.useColorFunction ?
+        safeExecute(settings.colorFunction,
+          [this.data, this.dataSources, this.data.dsIndex]) : settings.color,
+      opacity: settings.useStrokeOpacityFunction ?
+        safeExecute(settings.strokeOpacityFunction,
+          [this.data, this.dataSources, this.data.dsIndex]) : settings.strokeOpacity,
+      weight: settings.useStrokeWeightFunction ?
+        safeExecute(settings.strokeWeightFunction,
+          [this.data, this.dataSources, this.data.dsIndex]) : settings.strokeWeight,
     }
+  }
 
-    removePolyline() {
-        this.map.removeLayer(this.leafletPoly);
-    }
+  removePolyline() {
+    this.map.removeLayer(this.leafletPoly);
+  }
 
-    getPolylineLatLngs() {
-        return this.leafletPoly.getLatLngs();
-    }
+  getPolylineLatLngs() {
+    return this.leafletPoly.getLatLngs();
+  }
 
-    setPolylineLatLngs(latLngs) {
-        this.leafletPoly.setLatLngs(latLngs);
-    }
+  setPolylineLatLngs(latLngs) {
+    this.leafletPoly.setLatLngs(latLngs);
+  }
 }

ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts

@@ -136,7 +136,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
     this.calcLabel();
     this.calcTooltip();
     if (this.mapWidget) {
-      this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds)));
+      this.mapWidget.map.updatePolylines(this.interpolatedTimeData.map(ds => _.values(ds)), this.activeTrip);
       if (this.settings.showPolygon) {
         this.mapWidget.map.updatePolygons(this.interpolatedTimeData);
       }
@@ -211,7 +211,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
       } else {
         result[normalizeTime] = {
           ...originData[i],
-          rotationAngle: findAngle(originData[i - 1], originData[i], latKeyName, lngKeyName) + this.settings.rotationAngle
+          rotationAngle: this.settings.rotationAngle + findAngle(originData[i - 1], originData[i], latKeyName, lngKeyName)
         };
       }
     }