From f1be847bfb9d8cac2efd2758f35ee8fc28866c81 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 24 May 2023 13:52:57 +0300 Subject: [PATCH] UI: Leaflet Map - add latitude/longitude validation. Improve code style. --- .../components/widget/lib/maps/leaflet-map.ts | 26 ++++++++++++------- .../components/widget/lib/maps/maps-utils.ts | 15 ++++++++++- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 7b63176203..64ef1a6303 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -36,7 +36,13 @@ import { Observable, of } from 'rxjs'; import { Polyline } from './polyline'; import { Polygon } from './polygon'; import { Circle } from './circle'; -import { createTooltip, entitiesParseName, isCutPolygon, isJSON } from '@home/components/widget/lib/maps/maps-utils'; +import { + createTooltip, + entitiesParseName, + isCutPolygon, + isJSON, + isValidLatLng +} from '@home/components/widget/lib/maps/maps-utils'; import { checkLngLat, createLoadingDiv } from '@home/components/widget/lib/maps/common-maps-utils'; import { WidgetContext } from '@home/models/widget-component.models'; import { @@ -148,7 +154,8 @@ export default abstract class LeafletMap { if (isDefinedAndNotNull(markerColor) && tinycolor(markerColor).isValid()) { const parsedColor = tinycolor(markerColor); return L.divIcon({ - html: `
` + + html: `
` + `
` + childCount + '
', iconSize: new L.Point(40, 40), className: 'tb-cluster-marker-container' @@ -378,7 +385,8 @@ export default abstract class LeafletMap { }); }, }); - this.map.pm.Toolbar.changeControlOrder(['tbMarker', 'tbRectangle', 'tbPolygon', 'tbCircle', 'editMode', 'dragMode', 'tbCut', 'removalMode', 'rotateMode']); + this.map.pm.Toolbar.changeControlOrder(['tbMarker', 'tbRectangle', 'tbPolygon', 'tbCircle', + 'editMode', 'dragMode', 'tbCut', 'removalMode', 'rotateMode']); } this.map.pm.setLang('en', this.translateService.instant('widgets.maps'), 'en'); @@ -643,19 +651,19 @@ export default abstract class LeafletMap { } } - extractPosition(data: FormattedData): {x: number, y: number} { + extractPosition(data: FormattedData): {x: number; y: number} { if (!data) { return null; } const lat = data[this.options.latKeyName]; const lng = data[this.options.lngKeyName]; - if (!isDefinedAndNotNull(lat) || isString(lat) || isNaN(lat) || !isDefinedAndNotNull(lng) || isString(lng) || isNaN(lng)) { + if (!isValidLatLng(lat, lng)) { return null; } return {x: lat, y: lng}; } - positionToLatLng(position: {x: number, y: number}): L.LatLng { + positionToLatLng(position: {x: number; y: number}): L.LatLng { return L.latLng(position.x, position.y) as L.LatLng; } @@ -936,7 +944,7 @@ export default abstract class LeafletMap { return; } this.saveLocation(data, this.convertToCustomFormat(e.target._latlng)).subscribe(); - } + }; private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: Partial, updateBounds = true, callback?, snappable = false): Marker { @@ -1141,7 +1149,7 @@ export default abstract class LeafletMap { } } this.saveLocation(data, this.convertPolygonToCustomFormat(coordinates)).subscribe(() => {}); - } + }; createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: Partial, updateBounds = true, snappable = false) { @@ -1218,7 +1226,7 @@ export default abstract class LeafletMap { const center = e.layer.getLatLng(); const radius = e.layer.getRadius(); this.saveLocation(data, this.convertCircleToCustomFormat(center, radius)).subscribe(() => {}); - } + }; updateCircle(circlesData: FormattedData[], updateBounds = true) { const toDelete = new Set(Array.from(this.circles.keys())); 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 4aad829eac..81005dee07 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 @@ -20,7 +20,7 @@ import { ShowTooltipAction, WidgetToolipSettings } from './map-models'; import { Datasource, FormattedData } from '@app/shared/models/widget.models'; -import { fillDataPattern, processDataPattern, safeExecute } from '@core/utils'; +import { fillDataPattern, isDefinedAndNotNull, isString, processDataPattern, safeExecute } from '@core/utils'; import { parseWithTranslation } from '@home/components/widget/lib/maps/common-maps-utils'; export function createTooltip(target: L.Layer, @@ -110,3 +110,16 @@ export function entitiesParseName(entities: FormattedData[], labelSettings: labe } return entities; } + +export const isValidLatitude = (latitude: any): boolean => + isDefinedAndNotNull(latitude) && + !isString(latitude) && + !isNaN(latitude) && isFinite(latitude) && Math.abs(latitude) <= 90; + +export const isValidLongitude = (longitude: any): boolean => + isDefinedAndNotNull(longitude) && + !isString(longitude) && + !isNaN(longitude) && isFinite(longitude) && Math.abs(longitude) <= 180; + +export const isValidLatLng = (latitude: any, longitude: any): boolean => + isValidLatitude(latitude) && isValidLongitude(longitude);