UI: Image map: improve background image fetch from alias. Maps: Ignore click events on drag marker.

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

@@ -41,22 +41,6 @@ export function createTooltip(target: L.Layer,
     return popup;
 }
 
-export function disablePopup(target: L.Layer) {
-  if (target.isPopupOpen()) {
-    target.closePopup();
-  }
-  target.unbindPopup();
-  target.off('popupopen');
-}
-
-export function enablePopup(target: L.Layer, popup: L.Popup,
-                            settings: MarkerSettings | PolylineSettings | PolygonSettings, datasource: Datasource) {
-  target.bindPopup(popup);
-  target.on('popupopen', () => {
-    bindPopupActions(popup, settings, datasource);
-  });
-}
-
 export function bindPopupActions(popup: L.Popup, settings: MarkerSettings | PolylineSettings | PolygonSettings,
                                  datasource: Datasource) {
   const actions = popup.getElement().getElementsByClassName('tb-custom-action');

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

@@ -23,7 +23,7 @@ import {
   MarkerSettings,
   UnitedMapSettings
 } from './map-models';
-import { bindPopupActions, createTooltip, disablePopup, enablePopup, } from './maps-utils';
+import { bindPopupActions, createTooltip } from './maps-utils';
 import { aspectCache, fillPattern, parseWithTranslation, processPattern, safeExecute } from './common-maps-utils';
 import tinycolor from 'tinycolor2';
 import { isDefined, isDefinedAndNotNull } from '@core/utils';
@@ -37,7 +37,6 @@ export class Marker {
     tooltip: L.Popup;
     data: FormattedData;
     dataSources: FormattedData[];
-    isDragging = false;
 
   constructor(private map: LeafletMap, private location: L.LatLng, public settings: UnitedMapSettings,
               data?: FormattedData, dataSources?, onDragendListener?) {
@@ -65,30 +64,24 @@ export class Marker {
         }
 
         if (this.settings.markerClick) {
-            if (!this.isDragging) {
+            this.leafletMarker.on('click', (event: LeafletMouseEvent) => {
-                this.leafletMarker.on('click', (event: LeafletMouseEvent) => {
+              for (const action in this.settings.markerClick) {
-                  for (const action in this.settings.markerClick) {
+                if (typeof (this.settings.markerClick[action]) === 'function') {
-                    if (typeof (this.settings.markerClick[action]) === 'function') {
+                  this.settings.markerClick[action](event.originalEvent, this.data.$datasource);
-                      this.settings.markerClick[action](event.originalEvent, this.data.$datasource);
+                }
-                    }
+              }
-                  }
+            });
-                });
-            }
         }
 
         if (settings.draggableMarker && onDragendListener) {
+          this.leafletMarker.on('pm:dragstart', (e) => {
+            (this.leafletMarker.dragging as any)._draggable = { _moved: true };
+            (this.leafletMarker.dragging as any)._enabled = true;
+          });
           this.leafletMarker.on('pm:dragend', (e) => {
             onDragendListener(e, this.data);
-            this.isDragging = false;
+            delete (this.leafletMarker.dragging as any)._draggable;
-            if (settings.showTooltip && settings.showTooltipAction === 'click') {
+            delete (this.leafletMarker.dragging as any)._enabled;
-              enablePopup(this.leafletMarker, this.tooltip, settings, this.data.$datasource);
-            }
-          });
-          this.leafletMarker.on('pm:dragstart', (e) => {
-            this.isDragging = true;
-            if (settings.showTooltip && settings.showTooltipAction === 'click') {
-              disablePopup(this.leafletMarker);
-            }
           });
         }
     }

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

@@ -29,6 +29,7 @@ import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.model
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { WidgetSubscriptionOptions } from '@core/api/widget-api.models';
 import { isDefinedAndNotNull, isEmptyStr } from '@core/utils';
+import { EntityDataPageLink } from '@shared/models/query/query.models';
 
 const maxZoom = 4; // ?
 
@@ -88,6 +89,7 @@ export class ImageMap extends LeafletMap {
       let isUpdate = false;
       const imageUrlSubscriptionOptions: WidgetSubscriptionOptions = {
         datasources,
+        hasDataPageLink: true,
         useDashboardTimewindow: false,
         type: widgetType.latest,
         callbacks: {
@@ -97,7 +99,15 @@ export class ImageMap extends LeafletMap {
           }
         }
       };
-      this.ctx.subscriptionApi.createSubscription(imageUrlSubscriptionOptions, true).subscribe(() => { });
+      this.ctx.subscriptionApi.createSubscription(imageUrlSubscriptionOptions, true).subscribe((subscription) => {
+        const pageLink: EntityDataPageLink = {
+          page: 0,
+          pageSize: 1,
+          textSearch: null,
+          dynamic: true
+        };
+        subscription.subscribeAllForPaginatedData(pageLink, null);
+      });
       return this.imageFromAlias(result);
     }