dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Igor Kulikov 2022-01-25 19:13:24 +02:00
parent 1e41be45ba
commit 512a3dc6ed
3 changed files with 25 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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');

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

@ -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) => {
for (const action in this.settings.markerClick) {
if (typeof (this.settings.markerClick[action]) === 'function') {
this.settings.markerClick[action](event.originalEvent, this.data.$datasource);
}
}
});
}
this.leafletMarker.on('click', (event: LeafletMouseEvent) => {
for (const action in this.settings.markerClick) {
if (typeof (this.settings.markerClick[action]) === 'function') {
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;
if (settings.showTooltip && settings.showTooltipAction === 'click') {
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);
}
delete (this.leafletMarker.dragging as any)._draggable;
delete (this.leafletMarker.dragging as any)._enabled;
});
}
}

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

@ -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);
}