wip on image-map fixes

ui-ngx/src/app/core/utils.ts

@@ -224,7 +224,7 @@ function scrollParents(node: Node): Node[] {
 function hashCode(str) {
   let hash = 0;
   let i, char;
-  if (str.length == 0) return hash;
+  if (str.length === 0) return hash;
   for (i = 0; i < str.length; i++) {
     char = str.charCodeAt(i);
     hash = ((hash << 5) - hash) + char;

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

@@ -294,6 +294,9 @@ export default abstract class LeafletMap {
         }
     }
 
+    setImageAlias(alias:Observable<any>){       
+    }
+
     // Polyline
 
     updatePolylines(polyData: FormattedData[][]) {
@@ -323,7 +326,7 @@ export default abstract class LeafletMap {
 
     updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) {
         this.ready$.subscribe(() => {
-            this.polylines.get(key).updatePolyline(settings, data, dataSources);
+            this.polylines.get(key).updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources);
         });
     }
 

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

@@ -23,6 +23,7 @@ export type MapSettings = {
     polygonKeyName: any;
     draggableMarker: boolean;
     initCallback?: () => any;
+    posFunction: (rigXPos, origYPos) => { x, y };
     defaultZoomLevel?: number;
     disableScrollZooming?: boolean;
     minZoomLevel?: number;
@@ -31,6 +32,8 @@ export type MapSettings = {
     lngKeyName?: string;
     xPosKeyName?: string;
     yPosKeyName?: string;
+    imageEntityAlias: string;
+    imageUrlAttribute: string;
     mapProvider: MapProviders;
     mapProviderHere: string;
     mapUrl?: string;

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

@@ -33,12 +33,12 @@ import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.inter
 import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
 import { parseFunction, parseArray, parseData, safeExecute, parseWithTranslation } from '@core/utils';
 import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils';
-import { forkJoin } from 'rxjs';
+import { forkJoin, of, Observable } from 'rxjs';
 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
 import { getDefCenterPosition } from './maps-utils';
-import { JsonSettingsSchema, WidgetActionDescriptor } from '@shared/models/widget.models';
+import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType } from '@shared/models/widget.models';
 import { EntityId } from '@shared/models/id/entity-id';
-import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
+import { AttributeScope, DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { AttributeService } from '@core/http/attribute.service';
 import { Type } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
@@ -48,7 +48,7 @@ import { UtilsService } from '@core/services/utils.service';
 export class MapWidgetController implements MapWidgetInterface {
 
     constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) {
-        console.log("MapWidgetController -> constructor -> ctx", ctx)
+        console.log('MapWidgetController -> constructor -> ctx', ctx)
         if (this.map) {
             this.map.map.remove();
             delete this.map;
@@ -70,6 +70,7 @@ export class MapWidgetController implements MapWidgetInterface {
         }
         parseWithTranslation.setTranslate(this.translate);
         this.map = new MapClass($element, this.settings);
+        this.map.setImageAlias(this.subscribeForImageAttribute());
         this.map.saveMarkerLocation = this.setMarkerLocation;
     }
 
@@ -84,7 +85,7 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     public static getProvidersSchema(mapProvider: MapProviders) {
-        console.log("MapWidgetController -> getProvidersSchema -> mapProvider", mapProvider)
+        console.log('MapWidgetController -> getProvidersSchema -> mapProvider', mapProvider)
         mapProviderSchema.schema.properties.provider.default = mapProvider;
         return mergeSchemes([mapProviderSchema,
             ...Object.keys(providerSets)?.map(
@@ -227,6 +228,44 @@ export class MapWidgetController implements MapWidgetInterface {
         this.map.onResize();
     }
 
+    subscribeForImageAttribute() {
+        const imageEntityAlias = this.settings.imageEntityAlias;
+        const imageUrlAttribute = this.settings.imageUrlAttribute;
+        if (!imageEntityAlias || !imageUrlAttribute) {
+            return of(false);
+        }
+        const entityAliasId = this.ctx.aliasController.getEntityAliasId(imageEntityAlias);
+        if (!entityAliasId) {
+            return of(false);
+        }
+        const datasources = [
+            {
+                type: DatasourceType.entity,
+                name: imageEntityAlias,
+                aliasName: imageEntityAlias,
+                entityAliasId,
+                dataKeys: [
+                    {
+                        type: DataKeyType.attribute,
+                        name: imageUrlAttribute,
+                        label: imageUrlAttribute,
+                        settings: {},
+                        _hash: Math.random()
+                    }
+                ]
+            }
+        ];
+        const imageUrlSubscriptionOptions = {
+            datasources,
+            useDashboardTimewindow: false,
+            type: widgetType.latest,
+            callbacks: {
+                onDataUpdated: (subscription, apply) => { }
+            }
+        };
+        return this.ctx.subscriptionApi.createSubscription(imageUrlSubscriptionOptions, true);
+    }
+
     onDestroy() {
     }
 }

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

@@ -17,7 +17,9 @@
 import L, { LatLngLiteral } from 'leaflet';
 import LeafletMap from '../leaflet-map';
 import { MapSettings, UnitedMapSettings } from '../map-models';
-import { aspectCache } from '@app/core/utils';
+import { aspectCache, parseFunction } from '@app/core/utils';
+import { Observable } from 'rxjs';
+import { skipLast, map, filter, switchMap } from 'rxjs/operators';
 
 const maxZoom = 4;// ?
 
@@ -30,6 +32,7 @@ export class ImageMap extends LeafletMap {
 
     constructor($container: HTMLElement, options: UnitedMapSettings) {
         super($container, options);
+        options.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((rigXPos, origYPos) => { x, y });
         aspectCache(options.mapUrl).subscribe(aspect => {
             this.aspect = aspect;
             this.onResize();
@@ -38,6 +41,14 @@ export class ImageMap extends LeafletMap {
         });
     }
 
+    setImageAlias(alias: Observable<any>) {
+        alias.pipe(filter(result => result),
+            map(subscription => subscription.data[1])).subscribe(res => {
+                console.log("ImageMap -> setImageAlias -> res", res)
+
+            })
+    }
+
     updateBounds(updateImage?, lastCenterPos?) {
         const w = this.width;
         const h = this.height;
@@ -116,6 +127,7 @@ export class ImageMap extends LeafletMap {
     }
 
     convertPosition(expression): L.LatLng {
+        console.log("ImageMap -> expression", expression)
         return this.pointToLatLng(
             expression[this.options.xPosKeyName] * this.width,
             expression[this.options.yPosKeyName] * this.height);
@@ -129,10 +141,10 @@ export class ImageMap extends LeafletMap {
         return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1);
     }
 
-   /* convertToCustomFormat(position: L.LatLng): object {
+    convertToCustomFormat(position: L.LatLng): object {
         return {
             [this.options.xPosKeyName]: (position.lng + 180) / 360,
             [this.options.yPosKeyName]: (position.lat + 180) / 360
         }
-    }*/
+    }
 }