`
});
- toDelete.forEach((key) => {
- this.deleteMarker(key);
- });
- this.markersData = markersData;
- });
+ } else {
+ this.options.icon = null;
+ }
+ if (this.markers.get(data.entityName)) {
+ m = this.updateMarker(data.entityName, data, markersData, this.options);
+ if (m) {
+ updatedMarkers.push(m);
+ }
+ } else {
+ m = this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, updateBounds, callback);
+ if (m) {
+ createdMarkers.push(m);
+ }
+ }
+ toDelete.delete(data.entityName);
+ });
+ toDelete.forEach((key) => {
+ m = this.deleteMarker(key);
+ if (m) {
+ deletedMarkers.push(m);
+ }
+ });
+ this.markersData = markersData;
+ if ((this.options as MarkerSettings).useClusterMarkers) {
+ if (createdMarkers.length) {
+ this.markersCluster.addLayers(createdMarkers.map(marker => marker.leafletMarker));
+ }
+ if (updatedMarkers.length) {
+ this.markersCluster.refreshClusters(updatedMarkers.map(marker => marker.leafletMarker));
+ }
+ if (deletedMarkers.length) {
+ this.markersCluster.removeLayers(deletedMarkers.map(marker => marker.leafletMarker));
+ }
+ }
}
dragMarker = (e, data = {} as FormattedData) => {
- if (e.type !== 'dragend') return;
+ if (e.type !== 'dragend') {
+ return;
+ }
this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) }).subscribe();
}
private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings,
- updateBounds = true, callback?) {
- const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker);
- if (callback)
- newMarker.leafletMarker.on('click', () => { callback(data, true) });
- if (this.bounds && updateBounds)
- this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
- this.markers.set(key, newMarker);
- if (this.options.useClusterMarkers) {
- this.markersCluster.addLayer(newMarker.leafletMarker);
- }
- else {
- this.map.addLayer(newMarker.leafletMarker);
- }
+ updateBounds = true, callback?): Marker {
+ const newMarker = new Marker(this, this.convertPosition(data), settings, data, dataSources, this.dragMarker);
+ if (callback) {
+ newMarker.leafletMarker.on('click', () => {
+ callback(data, true);
+ });
+ }
+ if (this.bounds && updateBounds && !(this.options as MarkerSettings).useClusterMarkers) {
+ this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
+ }
+ this.markers.set(key, newMarker);
+ if (!this.options.useClusterMarkers) {
+ this.map.addLayer(newMarker.leafletMarker);
+ }
+ return newMarker;
}
- private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) {
+ private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings): Marker {
const marker: Marker = this.markers.get(key);
- const location = this.convertPosition(data)
- if (!location.equals(marker.location)) {
- marker.updateMarkerPosition(location);
- }
+ const location = this.convertPosition(data);
+ marker.updateMarkerPosition(location);
if (settings.showTooltip) {
marker.updateMarkerTooltip(data);
}
- if (settings.useClusterMarkers) {
- this.markersCluster.refreshClusters()
- }
marker.setDataSources(data, dataSources);
marker.updateMarkerIcon(settings);
+ return marker;
}
- deleteMarker(key: string) {
- let marker = this.markers.get(key)?.leafletMarker;
- if (marker) {
- if (this.options.useClusterMarkers) {
- this.markersCluster.removeLayer(marker);
- } else {
- this.map.removeLayer(marker);
- }
- this.markers.delete(key);
- marker = null;
- }
+ deleteMarker(key: string): Marker {
+ const marker = this.markers.get(key);
+ const leafletMarker = marker?.leafletMarker;
+ if (leafletMarker) {
+ if (!this.options.useClusterMarkers) {
+ this.map.removeLayer(leafletMarker);
+ }
+ this.markers.delete(key);
+ }
+ return marker;
+ }
+
+ deletePolygon(key: string) {
+ const polygon = this.polygons.get(key)?.leafletPoly;
+ if (polygon) {
+ this.map.removeLayer(polygon);
+ this.polygons.delete(key);
+ }
+ return polygon;
}
updatePoints(pointsData: FormattedData[], getTooltip: (point: FormattedData, setTooltip?: boolean) => string) {
- this.map$.subscribe(map => {
- if (this.points) {
- map.removeLayer(this.points);
- }
- this.points = new FeatureGroup();
- pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => {
- const point = L.circleMarker(this.convertPosition(data), {
- color: this.options.pointColor,
- radius: this.options.pointSize
- });
- if (!this.options.pointTooltipOnRightPanel) {
- point.on('click', () => getTooltip(data));
- }
- else {
- createTooltip(point, this.options, data.$datasource, getTooltip(data, false));
- }
- this.points.addLayer(point);
- });
- map.addLayer(this.points);
- });
+ if (this.points) {
+ this.map.removeLayer(this.points);
+ }
+ this.points = new FeatureGroup();
+ pointsData.filter(pdata => !!this.convertPosition(pdata)).forEach(data => {
+ const point = L.circleMarker(this.convertPosition(data), {
+ color: this.options.pointColor,
+ radius: this.options.pointSize
+ });
+ if (!this.options.pointTooltipOnRightPanel) {
+ point.on('click', () => getTooltip(data));
+ }
+ else {
+ createTooltip(point, this.options, data.$datasource, getTooltip(data, false));
+ }
+ this.points.addLayer(point);
+ });
+ this.map.addLayer(this.points);
}
// Polyline
@@ -444,27 +648,23 @@ export default abstract class LeafletMap {
}
createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) {
- this.ready$.subscribe(() => {
- const poly = new Polyline(this.map,
- dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
- if (updateBounds) {
- const bounds = poly.leafletPoly.getBounds();
- this.fitBounds(bounds);
- }
- this.polylines.set(data.entityName, poly);
- });
+ const poly = new Polyline(this.map,
+ dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
+ if (updateBounds) {
+ const bounds = poly.leafletPoly.getBounds();
+ this.fitBounds(bounds);
+ }
+ this.polylines.set(data.entityName, poly);
}
updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings, updateBounds = true) {
- this.ready$.subscribe(() => {
- const poly = this.polylines.get(data.entityName);
- const oldBounds = poly.leafletPoly.getBounds();
- poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
- const newBounds = poly.leafletPoly.getBounds();
- if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
- this.fitBounds(newBounds);
- }
- });
+ const poly = this.polylines.get(data.entityName);
+ const oldBounds = poly.leafletPoly.getBounds();
+ poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
+ const newBounds = poly.leafletPoly.getBounds();
+ if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
+ this.fitBounds(newBounds);
+ }
}
removePolyline(name: string) {
@@ -484,8 +684,8 @@ export default abstract class LeafletMap {
const keys: string[] = [];
this.polygonsData = deepClone(polyData);
polyData.forEach((data: FormattedData) => {
- if (data && data.hasOwnProperty(this.options.polygonKeyName) && data[this.options.polygonKeyName] !== null) {
- if (typeof (data[this.options.polygonKeyName]) === 'string') {
+ if (data && isDefinedAndNotNull(data[this.options.polygonKeyName]) && !isEmptyStr(data[this.options.polygonKeyName])) {
+ if (isString((data[this.options.polygonKeyName]))) {
data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]);
}
data[this.options.polygonKeyName] = this.convertPositionPolygon(data[this.options.polygonKeyName]);
@@ -509,27 +709,30 @@ export default abstract class LeafletMap {
});
}
+ dragPolygonVertex = (e?, data = {} as FormattedData) => {
+ if (e === undefined || (e.type !== 'editable:vertex:dragend' && e.type !== 'editable:vertex:deleted')) {
+ return;
+ }
+ this.savePolygonLocation({ ...data, ...this.convertPolygonToCustomFormat(e.layer._latlngs) }).subscribe();
+ }
+
createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) {
- this.ready$.subscribe(() => {
- const polygon = new Polygon(this.map, polyData, dataSources, settings);
- if (updateBounds) {
- const bounds = polygon.leafletPoly.getBounds();
- this.fitBounds(bounds);
- }
- this.polygons.set(polyData.entityName, polygon);
- });
+ const polygon = new Polygon(this.map, polyData, dataSources, settings, this.dragPolygonVertex);
+ if (updateBounds) {
+ const bounds = polygon.leafletPoly.getBounds();
+ this.fitBounds(bounds);
+ }
+ this.polygons.set(polyData.entityName, polygon);
}
updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings, updateBounds = true) {
- this.ready$.subscribe(() => {
- const poly = this.polygons.get(polyData.entityName);
- const oldBounds = poly.leafletPoly.getBounds();
- poly.updatePolygon(polyData, dataSources, settings);
- const newBounds = poly.leafletPoly.getBounds();
- if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
- this.fitBounds(newBounds);
- }
- });
+ const poly = this.polygons.get(polyData.entityName);
+ const oldBounds = poly.leafletPoly.getBounds();
+ poly.updatePolygon(polyData, dataSources, settings);
+ const newBounds = poly.leafletPoly.getBounds();
+ if (updateBounds && oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
+ this.fitBounds(newBounds);
+ }
}
removePolygon(name: string) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
index 32cf92eeae..63fe097b98 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
@@ -15,26 +15,19 @@
///
import { LatLngTuple } from 'leaflet';
-import { Datasource, JsonSettingsSchema } from '@app/shared/models/widget.models';
-import { Type } from '@angular/core';
-import LeafletMap from './leaflet-map';
-import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
-import {
- openstreetMapSettingsSchema, tencentMapSettingsSchema,
- googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema
-} from './schemes';
+import { Datasource } from '@app/shared/models/widget.models';
import { EntityType } from '@shared/models/entity-type.models';
+import tinycolor from 'tinycolor2';
export const DEFAULT_MAP_PAGE_SIZE = 16384;
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;
+ editablePolygon: boolean;
posFunction: PosFuncton;
defaultZoomLevel?: number;
disableScrollZooming?: boolean;
@@ -57,7 +50,7 @@ export type MapSettings = {
markerClusteringSetting?;
useDefaultCenterPosition?: boolean;
gmDefaultMapType?: string;
- useLabelFunction: string;
+ useLabelFunction: boolean;
icon?: any;
zoomOnClick: boolean,
maxZoom: number,
@@ -69,7 +62,7 @@ export type MapSettings = {
useCustomProvider: boolean,
customProviderTileUrl: string;
mapPageSize: number;
-}
+};
export enum MapProviders {
google = 'google-map',
@@ -93,6 +86,7 @@ export type MarkerSettings = {
useTooltipFunction: boolean;
useColorFunction: boolean;
color?: string;
+ tinyColor?: tinycolor.Instance;
autocloseTooltip: boolean;
showTooltipAction: string;
useClusterMarkers: boolean;
@@ -109,7 +103,7 @@ export type MarkerSettings = {
markerImageFunction?: MarkerImageFunction;
markerOffsetX: number;
markerOffsetY: number;
-}
+};
export interface FormattedData {
$datasource: Datasource;
@@ -118,13 +112,19 @@ export interface FormattedData {
entityType: EntityType;
dsIndex: number;
deviceType: string;
- [key: string]: any
+ [key: string]: any;
+}
+
+export interface ReplaceInfo {
+ variable: string;
+ valDec?: number;
+ dataKeyName: string;
}
export type PolygonSettings = {
showPolygon: boolean;
polygonKeyName: string;
- polKeyName: string;// deprecated
+ polKeyName: string; // deprecated
polygonStrokeOpacity: number;
polygonOpacity: number;
polygonStrokeWeight: number;
@@ -140,7 +140,8 @@ export type PolygonSettings = {
usePolygonColorFunction: boolean;
polygonTooltipFunction: GenericFunction;
polygonColorFunction?: GenericFunction;
-}
+ editablePolygon: boolean;
+};
export type PolylineSettings = {
usePolylineDecorator: any;
@@ -165,7 +166,7 @@ export type PolylineSettings = {
colorFunction: GenericFunction;
strokeOpacityFunction: GenericFunction;
strokeWeightFunction: GenericFunction;
-}
+};
export interface HistorySelectSettings {
buttonColor: string;
@@ -195,46 +196,12 @@ export type TripAnimationSettings = {
pointAsAnchorFunction: GenericFunction;
tooltipFunction: GenericFunction;
labelFunction: GenericFunction;
-}
+};
export type actionsHandler = ($event: Event, datasource: Datasource) => void;
export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings & TripAnimationSettings;
-interface IProvider {
- MapClass: Type
,
- schema: JsonSettingsSchema,
- name: string
-}
-
-export const providerSets: { [key: string]: IProvider } = {
- 'openstreet-map': {
- MapClass: OpenStreetMap,
- schema: openstreetMapSettingsSchema,
- name: 'openstreet-map',
- },
- 'tencent-map': {
- MapClass: TencentMap,
- schema: tencentMapSettingsSchema,
- name: 'tencent-map'
- },
- 'google-map': {
- MapClass: GoogleMap,
- schema: googleMapSettingsSchema,
- name: 'google-map'
- },
- here: {
- MapClass: HEREMap,
- schema: hereMapSettingsSchema,
- name: 'here'
- },
- 'image-map': {
- MapClass: ImageMap,
- schema: imageMapSettingsSchema,
- name: 'image-map'
- }
-};
-
export const defaultSettings: any = {
xPosKeyName: 'xPos',
yPosKeyName: 'yPos',
@@ -268,6 +235,7 @@ export const defaultSettings: any = {
credentials: '',
markerClusteringSetting: null,
draggableMarker: false,
+ editablePolygon: false,
fitMapBounds: true,
mapPageSize: DEFAULT_MAP_PAGE_SIZE
};
@@ -276,4 +244,5 @@ export const hereProviders = [
'HERE.normalDay',
'HERE.normalNight',
'HERE.hybridDay',
- 'HERE.terrainDay']
+ 'HERE.terrainDay'
+];
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
index be618128dd..d321e04953 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.interface.ts
@@ -18,15 +18,15 @@ import { JsonSettingsSchema } from '@shared/models/widget.models';
import { MapProviders } from './map-models';
export interface MapWidgetInterface {
- resize(),
- update(),
- onInit(),
+ resize();
+ update();
+ onInit();
onDestroy();
}
export interface MapWidgetStaticInterface {
settingsSchema(mapProvider?: MapProviders, drawRoutes?: boolean): JsonSettingsSchema;
- getProvidersSchema(mapProvider?: MapProviders, ignoreImageMap?: boolean): JsonSettingsSchema
+ getProvidersSchema(mapProvider?: MapProviders, ignoreImageMap?: boolean): JsonSettingsSchema;
dataKeySettingsSchema(): object;
actionSources(): object;
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index fd06598fb3..950e73e96d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
@@ -15,12 +15,10 @@
///
import {
- DEFAULT_MAP_PAGE_SIZE,
defaultSettings,
FormattedData,
hereProviders,
MapProviders,
- providerSets,
UnitedMapSettings
} from './map-models';
import LeafletMap from './leaflet-map';
@@ -35,7 +33,7 @@ import {
import { MapWidgetInterface, MapWidgetStaticInterface } from './map-widget.interface';
import { addCondition, addGroupInfo, addToSchema, initSchema, mergeSchemes } from '@core/schema-utils';
import { WidgetContext } from '@app/modules/home/models/widget-component.models';
-import { getDefCenterPosition, parseData, parseFunction, parseWithTranslation } from './maps-utils';
+import { getDefCenterPosition, parseFunction, parseWithTranslation } from './maps-utils';
import { Datasource, DatasourceData, JsonSettingsSchema, WidgetActionDescriptor } from '@shared/models/widget.models';
import { EntityId } from '@shared/models/id/entity-id';
import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
@@ -46,6 +44,7 @@ import _ from 'lodash';
import { EntityDataPageLink } from '@shared/models/query/query.models';
import { isDefined } from '@core/utils';
import { forkJoin, Observable, of } from 'rxjs';
+import { providerSets } from '@home/components/widget/lib/maps/providers';
// @dynamic
export class MapWidgetController implements MapWidgetInterface {
@@ -79,12 +78,14 @@ export class MapWidgetController implements MapWidgetInterface {
this.map = new MapClass(this.ctx, $element, this.settings);
(this.ctx as any).mapInstance = this.map;
this.map.saveMarkerLocation = this.setMarkerLocation;
+ this.map.savePolygonLocation = this.savePolygonLocation;
this.pageLink = {
page: 0,
pageSize: this.settings.mapPageSize,
textSearch: null,
dynamic: true
};
+ this.map.setLoading(true);
this.ctx.defaultSubscription.subscribeAllForPaginatedData(this.pageLink, null);
}
@@ -101,8 +102,9 @@ export class MapWidgetController implements MapWidgetInterface {
public static getProvidersSchema(mapProvider: MapProviders, ignoreImageMap = false) {
const providerSchema = _.cloneDeep(mapProviderSchema);
- if (mapProvider)
- providerSchema.schema.properties.provider.default = mapProvider;
+ if (mapProvider) {
+ providerSchema.schema.properties.provider.default = mapProvider;
+ }
if (ignoreImageMap) {
providerSchema.form[0].items = providerSchema.form[0]?.items.filter(item => item.value !== 'image-map');
}
@@ -128,7 +130,7 @@ export class MapWidgetController implements MapWidgetInterface {
} else {
const clusteringSchema = mergeSchemes([markerClusteringSettingsSchema,
addCondition(markerClusteringSettingsSchemaLeaflet,
- `model.useClusterMarkers === true && model.provider !== "image-map"`)])
+ `model.useClusterMarkers === true && model.provider !== "image-map"`)]);
addToSchema(schema, clusteringSchema);
addGroupInfo(schema, 'Markers Clustering Settings');
}
@@ -153,10 +155,11 @@ export class MapWidgetController implements MapWidgetInterface {
}
translate = (key: string, defaultTranslation?: string): string => {
- if (key)
- return (this.ctx.$injector.get(UtilsService).customTranslation(key, defaultTranslation || key)
- || this.ctx.$injector.get(TranslateService).instant(key));
- else return '';
+ if (key) {
+ return (this.ctx.$injector.get(UtilsService).customTranslation(key, defaultTranslation || key)
+ || this.ctx.$injector.get(TranslateService).instant(key));
+ }
+ return '';
}
getDescriptors(name: string): { [name: string]: ($event: Event, datasource: Datasource) => void } {
@@ -210,10 +213,10 @@ export class MapWidgetController implements MapWidgetInterface {
}
if (value) {
if (key.type === DataKeyType.attribute) {
- attributes.push(value)
+ attributes.push(value);
}
if (key.type === DataKeyType.timeseries) {
- timeseries.push(value)
+ timeseries.push(value);
}
}
});
@@ -239,13 +242,65 @@ export class MapWidgetController implements MapWidgetInterface {
}
}
+ savePolygonLocation = (e: FormattedData, coordinates?: Array) => {
+ const attributeService = this.ctx.$injector.get(AttributeService);
+
+ const entityId: EntityId = {
+ entityType: e.$datasource.entityType,
+ id: e.$datasource.entityId
+ };
+ const attributes = [];
+ const timeseries = [];
+
+ const coordinatesProperties = this.settings.polygonKeyName;
+ e.$datasource.dataKeys.forEach(key => {
+ let value;
+ if (coordinatesProperties === key.name) {
+ value = {
+ key: key.name,
+ value: isDefined(coordinates) ? coordinates : e[key.name]
+ };
+ }
+ if (value) {
+ if (key.type === DataKeyType.attribute) {
+ attributes.push(value);
+ }
+ if (key.type === DataKeyType.timeseries) {
+ timeseries.push(value);
+ }
+ }
+ });
+ const observables: Observable[] = [];
+ if (timeseries.length) {
+ observables.push(attributeService.saveEntityTimeseries(
+ entityId,
+ LatestTelemetry.LATEST_TELEMETRY,
+ timeseries
+ ));
+ }
+ if (attributes.length) {
+ observables.push(attributeService.saveEntityAttributes(
+ entityId,
+ AttributeScope.SERVER_SCOPE,
+ attributes
+ ));
+ }
+ if (observables.length) {
+ return forkJoin(observables);
+ } else {
+ return of(null);
+ }
+ }
+
initSettings(settings: UnitedMapSettings, isEditMap?: boolean): UnitedMapSettings {
const functionParams = ['data', 'dsData', 'dsIndex'];
this.provider = settings.provider || this.mapProvider;
if (this.provider === MapProviders.here && !settings.mapProviderHere) {
- if (settings.mapProvider && hereProviders.includes(settings.mapProvider))
- settings.mapProviderHere = settings.mapProvider
- else settings.mapProviderHere = hereProviders[0];
+ if (settings.mapProvider && hereProviders.includes(settings.mapProvider)) {
+ settings.mapProviderHere = settings.mapProvider;
+ } else {
+ settings.mapProviderHere = hereProviders[0];
+ }
}
const customOptions = {
provider: this.provider,
@@ -266,19 +321,19 @@ export class MapWidgetController implements MapWidgetInterface {
url: settings.markerImage,
size: settings.markerImageSize || 34
} : null
- }
+ };
if (isEditMap && !settings.hasOwnProperty('draggableMarker')) {
settings.draggableMarker = true;
}
- return { ...defaultSettings, ...settings, ...customOptions, }
+ if (isEditMap && !settings.hasOwnProperty('editablePolygon')) {
+ settings.editablePolygon = true;
+ }
+ return { ...defaultSettings, ...settings, ...customOptions, };
}
update() {
- const formattedData = parseData(this.data);
- this.map.updateData(this.data, formattedData, this.drawRoutes, this.settings.showPolygon);
- if (this.settings.draggableMarker) {
- this.map.setDataSources(formattedData);
- }
+ this.map.updateData(this.drawRoutes, this.settings.showPolygon);
+ this.map.setLoading(false);
}
resize() {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
index 51fdef7075..e9f1f5dadd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts
@@ -15,18 +15,25 @@
///
import L from 'leaflet';
-import { FormattedData, MarkerSettings, PolygonSettings, PolylineSettings } from './map-models';
+import { FormattedData, MarkerSettings, PolygonSettings, PolylineSettings, ReplaceInfo } from './map-models';
import { Datasource, DatasourceData } from '@app/shared/models/widget.models';
import _ from 'lodash';
import { Observable, Observer, of } from 'rxjs';
import { map } from 'rxjs/operators';
-import { createLabelFromDatasource, hashCode, isNumber, isUndefined, padValue } from '@core/utils';
-import { Form } from '@angular/forms';
+import {
+ createLabelFromDatasource,
+ hashCode,
+ isDefined,
+ isDefinedAndNotNull, isFunction,
+ isNumber,
+ isUndefined,
+ padValue
+} from '@core/utils';
export function createTooltip(target: L.Layer,
- settings: MarkerSettings | PolylineSettings | PolygonSettings,
- datasource: Datasource,
- content?: string | HTMLElement
+ settings: MarkerSettings | PolylineSettings | PolygonSettings,
+ datasource: Datasource,
+ content?: string | HTMLElement
): L.Popup {
const popup = L.popup();
popup.setContent(content);
@@ -80,7 +87,7 @@ export function interpolateOnLineSegment(
}
export function findAngle(startPoint: FormattedData, endPoint: FormattedData, latKeyName: string, lngKeyName: string): number {
- if(isUndefined(startPoint) || isUndefined(endPoint)){
+ if (isUndefined(startPoint) || isUndefined(endPoint)) {
return 0;
}
let angle = -Math.atan2(endPoint[latKeyName] - startPoint[latKeyName], endPoint[lngKeyName] - startPoint[lngKeyName]);
@@ -90,11 +97,13 @@ export function findAngle(startPoint: FormattedData, endPoint: FormattedData, la
export function getDefCenterPosition(position) {
- if (typeof (position) === 'string')
- return position.split(',');
- if (typeof (position) === 'object')
- return position;
- return [0, 0];
+ if (typeof (position) === 'string') {
+ return position.split(',');
+ }
+ if (typeof (position) === 'object') {
+ return position;
+ }
+ return [0, 0];
}
@@ -116,7 +125,7 @@ function imageLoader(imageUrl: string): Observable {
document.body.removeChild(image);
observer.complete();
};
- document.body.appendChild(image)
+ document.body.appendChild(image);
image.src = imageUrl;
});
}
@@ -128,11 +137,11 @@ export function aspectCache(imageUrl: string): Observable {
if (aspect) {
return of(aspect);
}
- else return imageLoader(imageUrl).pipe(map(image => {
+ return imageLoader(imageUrl).pipe(map(image => {
aspect = image.width / image.height;
imageAspectMap[hash] = aspect;
return aspect;
- }))
+ }));
}
}
@@ -185,7 +194,7 @@ function parseTemplate(template: string, data: { $datasource?: Datasource, [key:
} else {
textValue = value;
}
- template = template.split(variable).join(textValue);
+ template = template.replace(variable, textValue);
match = /\${([^}]*)}/g.exec(template);
}
@@ -198,7 +207,7 @@ function parseTemplate(template: string, data: { $datasource?: Datasource, [key:
while (match !== null) {
[actionTags, actionName, actionText] = match;
action = createLinkElement(actionName, actionText);
- template = template.split(actionTags).join(action);
+ template = template.replace(actionTags, action);
match = linkActionRegex.exec(template);
}
@@ -206,18 +215,107 @@ function parseTemplate(template: string, data: { $datasource?: Datasource, [key:
while (match !== null) {
[actionTags, actionName, actionText] = match;
action = createButtonElement(actionName, actionText);
- template = template.split(actionTags).join(action);
+ template = template.replace(actionTags, action);
match = buttonActionRegex.exec(template);
}
- const compiled = _.template(template);
- res = compiled(data);
+ // const compiled = _.template(template);
+ // res = compiled(data);
+ res = template;
} catch (ex) {
- console.log(ex, template)
+ console.log(ex, template);
}
return res;
}
+export function processPattern(template: string, data: { $datasource?: Datasource, [key: string]: any }): Array {
+ const replaceInfo = [];
+ try {
+ const reg = /\${([^}]*)}/g;
+ let match = reg.exec(template);
+ while (match !== null) {
+ const variableInfo: ReplaceInfo = {
+ dataKeyName: '',
+ valDec: 2,
+ variable: ''
+ };
+ const variable = match[0];
+ let label = match[1];
+ let valDec = 2;
+ const splitValues = label.split(':');
+ if (splitValues.length > 1) {
+ label = splitValues[0];
+ valDec = parseFloat(splitValues[1]);
+ }
+
+ variableInfo.variable = variable;
+ variableInfo.valDec = valDec;
+
+ if (label.startsWith('#')) {
+ const keyIndexStr = label.substring(1);
+ const n = Math.floor(Number(keyIndexStr));
+ if (String(n) === keyIndexStr && n >= 0) {
+ variableInfo.dataKeyName = data.$datasource.dataKeys[n].label;
+ }
+ } else {
+ variableInfo.dataKeyName = label;
+ }
+ replaceInfo.push(variableInfo);
+
+ match = reg.exec(template);
+ }
+ } catch (ex) {
+ console.log(ex, template);
+ }
+ return replaceInfo;
+}
+
+export function fillPattern(markerLabelText: string, replaceInfoLabelMarker: Array