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;
-    useLabelFunction:boolean;
+    useTooltipFunction: 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),
-    [lngKeyName]: (pointA[lngKeyName] + (oointB[lngKeyName] - pointA[lngKeyName]) * ratio)
+    [latKeyName]: (pointA[latKeyName] + (pointB[latKeyName] - pointA[latKeyName]) * 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;
-    posFunction;
+    imageUrl: string;
+    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);
@@ -81,12 +82,12 @@ export class ImageMap extends LeafletMap {
             lastCenterPos.y *= h;
             const center = this.pointToLatLng(lastCenterPos.x, lastCenterPos.y);
             setTimeout(() => {
-              this.map.panTo(center, { animate: false });
+                this.map.panTo(center, { animate: false });
             }, 0);
         }
     }
 
-    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, {
@@ -137,8 +138,8 @@ export class ImageMap extends LeafletMap {
         if (isNaN(expression[this.options.xPosKeyName]) || isNaN(expression[this.options.yPosKeyName])) return null;
         Object.assign(expression, this.posFunction(expression[this.options.xPosKeyName], expression[this.options.yPosKeyName]));
         return this.pointToLatLng(
-          expression.x * this.width,
-          expression.y * this.height);
+            expression.x * this.width,
+            expression.y * this.height);
     }
 
     pointToLatLng(x, y): L.LatLng {

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,57 +847,57 @@ export const pathSchema =
 };
 
 export const pointSchema =
-  {
+{
     schema: {
-      title: 'Trip Animation Path Configuration',
-      type: 'object',
-      properties: {
-        showPoints: {
-          title: 'Show points',
-          type: 'boolean',
-          default: false
+        title: 'Trip Animation Path Configuration',
+        type: 'object',
+        properties: {
+            showPoints: {
+                title: 'Show points',
+                type: 'boolean',
+                default: false
+            },
+            pointColor: {
+                title: 'Point color',
+                type: 'string'
+            },
+            pointSize: {
+                title: 'Point size (px)',
+                type: 'number',
+                default: 10
+            },
+            usePointAsAnchor: {
+                title: 'Use point as anchor',
+                type: 'boolean',
+                default: false
+            },
+            pointAsAnchorFunction: {
+                title: 'Point as anchor function: f(data, dsData, dsIndex)',
+                type: 'string'
+            },
+            pointTooltipOnRightPanel: {
+                title: 'Independant point tooltip',
+                type: 'boolean',
+                default: true
+            },
         },
-        pointColor: {
-          title: 'Point color',
-          type: 'string'
-        },
-        pointSize: {
-          title: 'Point size (px)',
-          type: 'number',
-          default: 10
-        },
-        usePointAsAnchor: {
-            title: 'Use point as anchor',
-            type: 'boolean',
-            default: false
-        },
-        pointAsAnchorFunction: {
-            title: 'Point as anchor function: f(data, dsData, dsIndex)',
-            type: 'string'
-        },
-        pointTooltipOnRightPanel: {
-          title: 'Independant point tooltip',
-          type: 'boolean',
-          default: true
-        },
-      },
-      required: []
+        required: []
     },
     form: [
-      'showPoints',
-      {
-        key: 'pointColor',
-        type: 'color'
-      },
-      'pointSize',
-      'usePointAsAnchor',
-      {
-        key: 'pointAsAnchorFunction',
-        type: 'javascript'
-      },
-      'pointTooltipOnRightPanel',
+        'showPoints',
+        {
+            key: 'pointColor',
+            type: 'color'
+        },
+        'pointSize',
+        'usePointAsAnchor',
+        {
+            key: 'pointAsAnchorFunction',
+            type: 'javascript'
+        },
+        '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;