Commit 0ce514b58cc242b923f0a8a55c8b7d84d05ac16c

Authored by Artem Halushko
1 parent 4f8942b1

wip on image-map fixes

... ... @@ -224,7 +224,7 @@ function scrollParents(node: Node): Node[] {
224 224 function hashCode(str) {
225 225 let hash = 0;
226 226 let i, char;
227   - if (str.length == 0) return hash;
  227 + if (str.length === 0) return hash;
228 228 for (i = 0; i < str.length; i++) {
229 229 char = str.charCodeAt(i);
230 230 hash = ((hash << 5) - hash) + char;
... ...
... ... @@ -294,6 +294,9 @@ export default abstract class LeafletMap {
294 294 }
295 295 }
296 296
  297 + setImageAlias(alias:Observable<any>){
  298 + }
  299 +
297 300 // Polyline
298 301
299 302 updatePolylines(polyData: FormattedData[][]) {
... ... @@ -323,7 +326,7 @@ export default abstract class LeafletMap {
323 326
324 327 updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) {
325 328 this.ready$.subscribe(() => {
326   - this.polylines.get(key).updatePolyline(settings, data, dataSources);
  329 + this.polylines.get(key).updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources);
327 330 });
328 331 }
329 332
... ...
... ... @@ -23,6 +23,7 @@ export type MapSettings = {
23 23 polygonKeyName: any;
24 24 draggableMarker: boolean;
25 25 initCallback?: () => any;
  26 + posFunction: (rigXPos, origYPos) => { x, y };
26 27 defaultZoomLevel?: number;
27 28 disableScrollZooming?: boolean;
28 29 minZoomLevel?: number;
... ... @@ -31,6 +32,8 @@ export type MapSettings = {
31 32 lngKeyName?: string;
32 33 xPosKeyName?: string;
33 34 yPosKeyName?: string;
  35 + imageEntityAlias: string;
  36 + imageUrlAttribute: string;
34 37 mapProvider: MapProviders;
35 38 mapProviderHere: string;
36 39 mapUrl?: string;
... ...
... ... @@ -33,12 +33,12 @@ import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.inter
33 33 import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
34 34 import { parseFunction, parseArray, parseData, safeExecute, parseWithTranslation } from '@core/utils';
35 35 import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils';
36   -import { forkJoin } from 'rxjs';
  36 +import { forkJoin, of, Observable } from 'rxjs';
37 37 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
38 38 import { getDefCenterPosition } from './maps-utils';
39   -import { JsonSettingsSchema, WidgetActionDescriptor } from '@shared/models/widget.models';
  39 +import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType } from '@shared/models/widget.models';
40 40 import { EntityId } from '@shared/models/id/entity-id';
41   -import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
  41 +import { AttributeScope, DataKeyType } from '@shared/models/telemetry/telemetry.models';
42 42 import { AttributeService } from '@core/http/attribute.service';
43 43 import { Type } from '@angular/core';
44 44 import { TranslateService } from '@ngx-translate/core';
... ... @@ -48,7 +48,7 @@ import { UtilsService } from '@core/services/utils.service';
48 48 export class MapWidgetController implements MapWidgetInterface {
49 49
50 50 constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) {
51   - console.log("MapWidgetController -> constructor -> ctx", ctx)
  51 + console.log('MapWidgetController -> constructor -> ctx', ctx)
52 52 if (this.map) {
53 53 this.map.map.remove();
54 54 delete this.map;
... ... @@ -70,6 +70,7 @@ export class MapWidgetController implements MapWidgetInterface {
70 70 }
71 71 parseWithTranslation.setTranslate(this.translate);
72 72 this.map = new MapClass($element, this.settings);
  73 + this.map.setImageAlias(this.subscribeForImageAttribute());
73 74 this.map.saveMarkerLocation = this.setMarkerLocation;
74 75 }
75 76
... ... @@ -84,7 +85,7 @@ export class MapWidgetController implements MapWidgetInterface {
84 85 }
85 86
86 87 public static getProvidersSchema(mapProvider: MapProviders) {
87   - console.log("MapWidgetController -> getProvidersSchema -> mapProvider", mapProvider)
  88 + console.log('MapWidgetController -> getProvidersSchema -> mapProvider', mapProvider)
88 89 mapProviderSchema.schema.properties.provider.default = mapProvider;
89 90 return mergeSchemes([mapProviderSchema,
90 91 ...Object.keys(providerSets)?.map(
... ... @@ -227,6 +228,44 @@ export class MapWidgetController implements MapWidgetInterface {
227 228 this.map.onResize();
228 229 }
229 230
  231 + subscribeForImageAttribute() {
  232 + const imageEntityAlias = this.settings.imageEntityAlias;
  233 + const imageUrlAttribute = this.settings.imageUrlAttribute;
  234 + if (!imageEntityAlias || !imageUrlAttribute) {
  235 + return of(false);
  236 + }
  237 + const entityAliasId = this.ctx.aliasController.getEntityAliasId(imageEntityAlias);
  238 + if (!entityAliasId) {
  239 + return of(false);
  240 + }
  241 + const datasources = [
  242 + {
  243 + type: DatasourceType.entity,
  244 + name: imageEntityAlias,
  245 + aliasName: imageEntityAlias,
  246 + entityAliasId,
  247 + dataKeys: [
  248 + {
  249 + type: DataKeyType.attribute,
  250 + name: imageUrlAttribute,
  251 + label: imageUrlAttribute,
  252 + settings: {},
  253 + _hash: Math.random()
  254 + }
  255 + ]
  256 + }
  257 + ];
  258 + const imageUrlSubscriptionOptions = {
  259 + datasources,
  260 + useDashboardTimewindow: false,
  261 + type: widgetType.latest,
  262 + callbacks: {
  263 + onDataUpdated: (subscription, apply) => { }
  264 + }
  265 + };
  266 + return this.ctx.subscriptionApi.createSubscription(imageUrlSubscriptionOptions, true);
  267 + }
  268 +
230 269 onDestroy() {
231 270 }
232 271 }
... ...
... ... @@ -17,7 +17,9 @@
17 17 import L, { LatLngLiteral } from 'leaflet';
18 18 import LeafletMap from '../leaflet-map';
19 19 import { MapSettings, UnitedMapSettings } from '../map-models';
20   -import { aspectCache } from '@app/core/utils';
  20 +import { aspectCache, parseFunction } from '@app/core/utils';
  21 +import { Observable } from 'rxjs';
  22 +import { skipLast, map, filter, switchMap } from 'rxjs/operators';
21 23
22 24 const maxZoom = 4;// ?
23 25
... ... @@ -30,6 +32,7 @@ export class ImageMap extends LeafletMap {
30 32
31 33 constructor($container: HTMLElement, options: UnitedMapSettings) {
32 34 super($container, options);
  35 + options.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((rigXPos, origYPos) => { x, y });
33 36 aspectCache(options.mapUrl).subscribe(aspect => {
34 37 this.aspect = aspect;
35 38 this.onResize();
... ... @@ -38,6 +41,14 @@ export class ImageMap extends LeafletMap {
38 41 });
39 42 }
40 43
  44 + setImageAlias(alias: Observable<any>) {
  45 + alias.pipe(filter(result => result),
  46 + map(subscription => subscription.data[1])).subscribe(res => {
  47 + console.log("ImageMap -> setImageAlias -> res", res)
  48 +
  49 + })
  50 + }
  51 +
41 52 updateBounds(updateImage?, lastCenterPos?) {
42 53 const w = this.width;
43 54 const h = this.height;
... ... @@ -116,6 +127,7 @@ export class ImageMap extends LeafletMap {
116 127 }
117 128
118 129 convertPosition(expression): L.LatLng {
  130 + console.log("ImageMap -> expression", expression)
119 131 return this.pointToLatLng(
120 132 expression[this.options.xPosKeyName] * this.width,
121 133 expression[this.options.yPosKeyName] * this.height);
... ... @@ -129,10 +141,10 @@ export class ImageMap extends LeafletMap {
129 141 return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1);
130 142 }
131 143
132   - /* convertToCustomFormat(position: L.LatLng): object {
  144 + convertToCustomFormat(position: L.LatLng): object {
133 145 return {
134 146 [this.options.xPosKeyName]: (position.lng + 180) / 360,
135 147 [this.options.yPosKeyName]: (position.lat + 180) / 360
136 148 }
137   - }*/
  149 + }
138 150 }
\ No newline at end of file
... ...