From f12ecdb11be2a9a16edb8f98c9be239951400504 Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Mon, 16 Mar 2020 17:18:15 +0200 Subject: [PATCH] marker dropping support --- ui-ngx/src/app/core/utils.ts | 2 +- .../components/widget/lib/maps/leaflet-map.ts | 92 ++++++++++++++----- .../components/widget/lib/maps/map-models.ts | 1 + .../components/widget/lib/maps/map-widget2.ts | 60 +++++++++--- .../components/widget/lib/maps/markers.ts | 2 +- .../components/widget/lib/maps/polyline.ts | 1 + .../components/widget/lib/maps/schemes.ts | 6 ++ ui-ngx/src/assets/add_location.svg | 1 + 8 files changed, 127 insertions(+), 38 deletions(-) create mode 100644 ui-ngx/src/assets/add_location.svg diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index 90bdafb9a2..9f21791ecd 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -498,7 +498,7 @@ export function safeExecute(func: Function, params = []) { res = func(...params); } catch (err) { - console.error(err); + console.log(err); res = null; } } 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 a8d10751f1..ca71db706e 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 @@ -31,6 +31,7 @@ import { Polygon } from './polygon'; export default abstract class LeafletMap { markers: Map = new Map(); + dragMode = false; tooltips = []; poly: Polyline; polygon: Polygon; @@ -55,6 +56,7 @@ export default abstract class LeafletMap { mapProvider, credentials, defaultCenterPosition, + draggebleMarker, markerClusteringSetting }: MapOptions = options; if (disableScrollZooming) { this.map.scrollWheelZoom.disable(); @@ -64,6 +66,33 @@ export default abstract class LeafletMap { } } + addMarkerControl() { + if (this.options.draggebleMarker) + L.Control['AddMarker'] = L.Control.extend({ + onAdd: function (map) { + let img = L.DomUtil.create('img') as any; + img.src = `assets/add_location.svg`; + img.style.width = '32px'; + img.style.height = '32px'; + img.onclick = this.dragMarker; + return img; + }, + addHooks: function () { + L.DomEvent.on(window as any, 'onclick', this.enableDragMode, this); + }, + onRemove: function (map) { + }, + dragMarker: ($event) => { + this.dragMode = !this.dragMode; + } + }); + + L.control['addmarker'] = function (opts) { + return new L.Control['AddMarker'](opts); + } + L.control['addmarker']({ position: 'topright' }).addTo(this.map); + } + inited() { return !!this.map; } @@ -74,10 +103,21 @@ export default abstract class LeafletMap { this.map.panTo(this.options.defaultCenterPosition); this.bounds = map.getBounds(); } - else this.bounds = new L.LatLngBounds(null, null) + else this.bounds = new L.LatLngBounds(null, null); + if (this.options.draggebleMarker) { + this.addMarkerControl(); + this.map.on('click', (e: L.LeafletMouseEvent) => { + if (this.dragMode) + this.saveMarkerLocation(this.convertToCustomFormat(e.latlng)); + }) + } this.map$.next(this.map); } + public saveMarkerLocation(e) { + + } + getContainer() { return this.map; } @@ -117,6 +157,13 @@ export default abstract class LeafletMap { return L.latLng(expression[this.options.latKeyName], expression[this.options.lngKeyName]) as L.LatLng; } + convertToCustomFormat(position: L.LatLng): object { + return { + [this.options.latKeyName]: position.lat, + [this.options.lngKeyName]: position.lng + } + } + ////Markers updateMarkers(markersData) { markersData.forEach(data => { @@ -179,33 +226,34 @@ export default abstract class LeafletMap { } createPolyline(data, dataSources, settings) { - this.ready$.subscribe(() => { - this.poly = new Polyline(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings); - const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds()); - if (bounds.isValid()) { - this.map.fitBounds(bounds); - this.bounds = bounds; - } - }); + if (data.length) + this.ready$.subscribe(() => { + this.poly = new Polyline(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings); + const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds()); + if (bounds.isValid()) { + this.map.fitBounds(bounds); + this.bounds = bounds; + } + }); } updatePolyline(data, dataSources, settings) { this.ready$.subscribe(() => { - this.poly.updatePolyline(settings, data, dataSources); + this.poly.updatePolyline(settings, data, dataSources); }); - } + } - //polygon + //polygon - updatePolygon(polyData: Array>) { - polyData.forEach(data => { - if (data.length) { + updatePolygons(polyData: Array>) { + polyData.forEach((data: any) => { + if (data.data.length) { let dataSource = polyData.map(arr => arr[0]); - if (this.poly) { - this.updatePolyline(data, dataSource, this.options); + if (this.polygon) { + this.updatePolygon(data, dataSource, this.options); } else { - this.createPolyline(data, dataSource, this.options); + this.createPolygon(data, dataSource, this.options); } } }) @@ -214,7 +262,7 @@ export default abstract class LeafletMap { createPolygon(data, dataSources, settings) { this.ready$.subscribe(() => { this.polygon = new Polygon(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings); - const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds()); + const bounds = this.bounds.extend(this.polygon.leafletPoly.getBounds()); if (bounds.isValid()) { this.map.fitBounds(bounds); this.bounds = bounds; @@ -222,9 +270,9 @@ export default abstract class LeafletMap { }); } - updatePolygons(data, dataSources, settings) { + updatePolygon(data, dataSources, settings) { this.ready$.subscribe(() => { - this.poly.updatePolyline(settings, data, dataSources); + this.poly.updatePolyline(settings, data, dataSources); }); - } + } } \ No newline at end of file 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 f9f821a07b..e6a4e3e115 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 @@ -17,6 +17,7 @@ import { LatLngExpression, LatLngTuple } from 'leaflet'; export interface MapOptions { + draggebleMarker: any; initCallback?: Function, defaultZoomLevel?: number, dontFitMapBounds?: boolean, 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 290694c4ea..b5850a6eb5 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 @@ -32,6 +32,8 @@ import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.inter import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; import { parseFunction, parseArray, parseData } from '@app/core/utils'; import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@app/core/schema-utils'; +import { AttributeScope, EntityId } from '@app/shared/public-api'; +import { forkJoin } from 'rxjs'; export class MapWidgetController implements MapWidgetInterface { @@ -58,11 +60,43 @@ export class MapWidgetController implements MapWidgetInterface { return; } this.map = new MapClass($element, this.settings); + this.map.saveMarkerLocation = this.setMarkerLocation; } onInit() { } + setMarkerLocation = (e) => { + console.log("MapWidgetController -> setMarkerLocation -> e", e) + console.log(this.data); + + let attributeService = this.ctx.$scope.$injector.get(this.ctx.servicesMap.get('attributeService')); + + + let attributesLocation = []; + let timeseriesLocation = []; + let promises = []; + forkJoin( + this.data.filter(data => !!e[data.dataKey.name]) + .map(data => { + const entityId: EntityId = { + entityType: data.datasource.entityType, + id: data.datasource.entityId + }; + return attributeService.saveEntityAttributes( + entityId, + AttributeScope.SHARED_SCOPE, + [{ + key: data.dataKey.name, + value: e[data.dataKey.name] + }] + ); + })).subscribe(res => { + console.log("MapWidgetController -> setMarkerLocation -> res", res) + + }); + } + initSettings(settings: any) { const functionParams = ['data', 'dsData', 'dsIndex']; this.provider = settings.provider ? settings.provider : this.mapProvider; @@ -78,6 +112,7 @@ export class MapWidgetController implements MapWidgetInterface { tooltipPattern: settings.tooltipPattern || "${entityName}

Latitude: ${" + settings.latKeyName + ":7}
Longitude: ${" + settings.lngKeyName + ":7}", defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0, 0], + useDraggableMarker: true, currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? { url: settings.markerImage, size: settings.markerImageSize || 34 @@ -89,20 +124,16 @@ export class MapWidgetController implements MapWidgetInterface { update() { if (this.drawRoutes) this.map.updatePolylines(parseArray(this.data)); - if(this.settings.showPolygon) - { - console.log(this.data); - - let dummy = [[37.771121,-22.510761],[37.774581,-22.454885],[37.766575,-22.453683],[37.764268,-22.509945]]; - this.map.updatePolygon(dummy); + if (this.settings.showPolygon) { + //console.log(this.data, this.ctx); + + // let dummy = [[37.771121,-22.510761],[37.774581,-22.454885],[37.766575,-22.453683],[37.764268,-22.509945]]; + //this.data[0].data = dummy + //this.map.updatePolygons(this.data); } this.map.updateMarkers(parseData(this.data)); } - public updateHistoryData(dataSources) { - dataSources.map() - } - onDataUpdated() { } @@ -119,15 +150,15 @@ export class MapWidgetController implements MapWidgetInterface { return {}; } - public static getProvidersSchema(){ - return mergeSchemes([mapProviderSchema, + public static getProvidersSchema() { + return mergeSchemes([mapProviderSchema, ...Object.values(providerSets)?.map( setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]); - } + } public static settingsSchema(mapProvider, drawRoutes): Object { let schema = initSchema(); - addToSchema(schema,this.getProvidersSchema()); + addToSchema(schema, this.getProvidersSchema()); addGroupInfo(schema, "Map Provider Settings"); addToSchema(schema, commonMapSettingsSchema); addGroupInfo(schema, "Common Map Settings"); @@ -228,4 +259,5 @@ const defaultSettings = { minZoomLevel: 16, credentials: '', markerClusteringSetting: null, + draggebleMarker: true } \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts index 2e8c99b451..4f1dd78a50 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts @@ -29,7 +29,7 @@ export class Marker { data; dataSources; - constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data, dataSources, onClickListener?, onDragendListener?) { + constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data?, dataSources?, onClickListener?, onDragendListener?) { //this.map = map; this.location = location; this.setDataSources(data, dataSources); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts index 713731edc3..6bbdfe1a54 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts @@ -24,6 +24,7 @@ export class Polyline { data; constructor(private map: L.Map, locations, data, dataSources, settings) { + console.log("Polyline -> constructor -> data", data) this.dataSources = dataSources; this.data = data; this.leafletPoly = L.polyline(locations, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts index 85ecc5e11c..ecc343a10b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts @@ -371,6 +371,11 @@ export const commonMapSettingsSchema = "title": "Polygon Color function: f(data, dsData, dsIndex)", "type": "string" }, + "draggableMarker": { + "title": "Draggable Marker", + "type": "boolean", + "default": false + }, "markerImage": { "title": "Custom marker image", "type": "string" @@ -411,6 +416,7 @@ export const commonMapSettingsSchema = "showLabel", "label", "useLabelFunction", + "draggableMarker", { "key": "labelFunction", "type": "javascript" diff --git a/ui-ngx/src/assets/add_location.svg b/ui-ngx/src/assets/add_location.svg new file mode 100644 index 0000000000..e3150115b7 --- /dev/null +++ b/ui-ngx/src/assets/add_location.svg @@ -0,0 +1 @@ + \ No newline at end of file