Merge branch 'map/3.0' of https://github.com/ArtemHalushko/thingsboard

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

@@ -27,11 +27,12 @@ import {
 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
 export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
 export type GetTooltip = (point: FormattedData, setTooltip?: boolean) => string;
+export type PosFuncton = (origXPos, origYPos) => { x, y };
 
 export type MapSettings = {
     draggableMarker: boolean;
     initCallback?: () => any;
-    posFunction: (origXPos, origYPos) => { x, y };
+    posFunction: PosFuncton;
     defaultZoomLevel?: number;
     disableScrollZooming?: boolean;
     minZoomLevel?: number;
@@ -177,8 +178,8 @@ export type TripAnimationSettings = {
     rotationAngle: number;
     label: string;
     tooltipPattern: string;
-    useTooltipFunction :boolean;
+    useTooltipFunction: boolean;
-    useLabelFunction:boolean;
+    useLabelFunction: boolean;
     pointAsAnchorFunction: GenericFunction;
     tooltipFunction: GenericFunction;
     labelFunction: GenericFunction;

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

@@ -58,14 +58,14 @@ export function getRatio(firsMoment: number, secondMoment: number, intermediateM
 
 export function interpolateOnLineSegment(
   pointA: FormattedData,
-  oointB: FormattedData,
+  pointB: FormattedData,
   latKeyName: string,
   lngKeyName: string,
   ratio: number
 ): { [key: string]: number } {
    return {
-    [latKeyName]: (pointA[latKeyName] + (oointB[latKeyName] - pointA[latKeyName]) * ratio),
+    [latKeyName]: (pointA[latKeyName] + (pointB[latKeyName] - pointA[latKeyName]) * ratio),
-    [lngKeyName]: (pointA[lngKeyName] + (oointB[lngKeyName] - pointA[lngKeyName]) * ratio)
+    [lngKeyName]: (pointA[lngKeyName] + (pointB[lngKeyName] - pointA[lngKeyName]) * ratio)
   };
 }
 

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

@@ -16,7 +16,7 @@
 
 import L, { LatLngLiteral, LatLngBounds, LatLngTuple } from 'leaflet';
 import LeafletMap from '../leaflet-map';
-import { UnitedMapSettings } from '../map-models';
+import { UnitedMapSettings, PosFuncton } from '../map-models';
 import { Observable } from 'rxjs';
 import { map, filter, switchMap } from 'rxjs/operators';
 import { aspectCache, calculateNewPointCoordinate, parseFunction } from '@home/components/widget/lib/maps/maps-utils';
@@ -25,16 +25,16 @@ const maxZoom = 4;// ?
 
 export class ImageMap extends LeafletMap {
 
-    imageOverlay;
+    imageOverlay: L.ImageOverlay;
     aspect = 0;
     width = 0;
     height = 0;
-    imageUrl;
+    imageUrl: string;
-    posFunction;
+    posFunction: PosFuncton;
 
     constructor($container: HTMLElement, options: UnitedMapSettings) {
         super($container, options);
-        this.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((origXPos, origYPos) => { x, y });
+        this.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as PosFuncton;
         this.imageUrl = options.mapUrl;
         aspectCache(this.imageUrl).subscribe(aspect => {
             this.aspect = aspect;
@@ -50,11 +50,12 @@ export class ImageMap extends LeafletMap {
             return aspectCache(res);
         })).subscribe(aspect => {
             this.aspect = aspect;
+            console.log("ImageMap -> setImageAlias -> aspect", aspect)
             this.onResize(true);
         });
     }
 
-    updateBounds(updateImage?, lastCenterPos?) {
+    updateBounds(updateImage?: boolean, lastCenterPos?) {
         const w = this.width;
         const h = this.height;
         let southWest = this.pointToLatLng(0, h);
@@ -86,7 +87,7 @@ export class ImageMap extends LeafletMap {
         }
     }
 
-    onResize(updateImage?) {
+    onResize(updateImage?: boolean) {
         let width = this.$container.clientWidth;
         if (width > 0 && this.aspect) {
             let height = width / this.aspect;
@@ -117,7 +118,7 @@ export class ImageMap extends LeafletMap {
 
     fitBounds(bounds: LatLngBounds, padding?: LatLngTuple) { }
 
-    initMap(updateImage?) {
+    initMap(updateImage?: boolean) {
         if (!this.map && this.aspect > 0) {
             const center = this.pointToLatLng(this.width / 2, this.height / 2);
             this.map = L.map(this.$container, {

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

@@ -644,7 +644,10 @@ export const markerClusteringSettingsSchema =
         required: []
     },
     form: [
-        'useClusterMarkers',
+        {
+            key: 'useClusterMarkers',
+            condition: 'model.provider !== "image-map"'
+        },
     ]
 };
 
@@ -844,7 +847,7 @@ export const pathSchema =
 };
 
 export const pointSchema =
-  {
+{
     schema: {
         title: 'Trip Animation Path Configuration',
         type: 'object',
@@ -894,7 +897,7 @@ export const pointSchema =
         },
         'pointTooltipOnRightPanel',
     ]
-  };
+};
 
 export const mapProviderSchema =
 {

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

@@ -61,7 +61,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   mainTooltip = '';
   visibleTooltip = false;
   activeTrip: FormattedData;
-  label;
+  label: string;
   minTime: number;
   maxTime: number;
   anchors: number[] = [];
@@ -173,7 +173,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
     }
   }
 
-  calcTooltip = (point?: FormattedData) => {
+  calcTooltip = (point?: FormattedData): string => {
     const data = point ? point : this.activeTrip;
     const tooltipPattern: string = this.settings.useTooltipFunction ?
       safeExecute(this.settings.tooltipFunction, [data, this.historicalData, point.dsIndex]) : this.settings.tooltipPattern;