简柏林 / thingskit · Commits

Commit af0cd5058e38a2425ed2f252700375c6f6385fb6

Authored by Adsumus
1 parent 746e63ab

WIP on trip-animation settings

Inline Side-by-side
Showing 6 changed files with 361 additions and 351 deletions
@@ -15,13 +15,19 @@ @@ -15,13 +15,19 @@
15 /// 15 ///
16 16
17 import { LatLngTuple } from 'leaflet'; 17 import { LatLngTuple } from 'leaflet';
18 -import { Datasource } from '@app/shared/models/widget.models'; 18 +import { Datasource, JsonSettingsSchema } from '@app/shared/models/widget.models';
  19 +import { Type } from '@angular/core';
  20 +import LeafletMap from './leaflet-map';
  21 +import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
  22 +import {
  23 + openstreetMapSettingsSchema, tencentMapSettingsSchema,
  24 + googleMapSettingsSchema, hereMapSettingsSchema, imageMapSettingsSchema
  25 +} from './schemes';
19 26
20 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; 27 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
21 export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; 28 export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
22 29
23 export type MapSettings = { 30 export type MapSettings = {
24 - polygonKeyName: any;  
25 draggableMarker: boolean; 31 draggableMarker: boolean;
26 initCallback?: () => any; 32 initCallback?: () => any;
27 posFunction: (origXPos, origYPos) => { x, y }; 33 posFunction: (origXPos, origYPos) => { x, y };
@@ -106,7 +112,8 @@ export interface FormattedData { @@ -106,7 +112,8 @@ export interface FormattedData {
106 112
107 export type PolygonSettings = { 113 export type PolygonSettings = {
108 showPolygon: boolean; 114 showPolygon: boolean;
109 - showTooltip: any; 115 + polygonKeyName: string;
  116 + polKeyName: string;// deprecated
110 polygonStrokeOpacity: number; 117 polygonStrokeOpacity: number;
111 polygonOpacity: number; 118 polygonOpacity: number;
112 polygonStrokeWeight: number; 119 polygonStrokeWeight: number;
@@ -114,12 +121,12 @@ export type PolygonSettings = { @@ -114,12 +121,12 @@ export type PolygonSettings = {
114 polygonColor: string; 121 polygonColor: string;
115 showPolygonTooltip: boolean; 122 showPolygonTooltip: boolean;
116 autocloseTooltip: boolean; 123 autocloseTooltip: boolean;
117 - tooltipFunction: GenericFunction;  
118 showTooltipAction: string; 124 showTooltipAction: string;
119 tooltipAction: { [name: string]: actionsHandler }; 125 tooltipAction: { [name: string]: actionsHandler };
120 - tooltipPattern: string;  
121 - useTooltipFunction: boolean; 126 + polygonTooltipPattern: string;
  127 + usePolygonTooltipFunction: boolean;
122 polygonClick: { [name: string]: actionsHandler }; 128 polygonClick: { [name: string]: actionsHandler };
  129 + polygonTooltipFunction: GenericFunction;
123 polygonColorFunction?: GenericFunction; 130 polygonColorFunction?: GenericFunction;
124 } 131 }
125 132
@@ -155,3 +162,79 @@ export interface HistorySelectSettings { @@ -155,3 +162,79 @@ export interface HistorySelectSettings {
155 export type actionsHandler = ($event: Event, datasource: Datasource) => void; 162 export type actionsHandler = ($event: Event, datasource: Datasource) => void;
156 163
157 export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings; 164 export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings;
  165 +
  166 +interface IProvider {
  167 + MapClass: Type<LeafletMap>,
  168 + schema: JsonSettingsSchema,
  169 + name: string
  170 +}
  171 +
  172 +export const providerSets: { [key: string]: IProvider } = {
  173 + 'openstreet-map': {
  174 + MapClass: OpenStreetMap,
  175 + schema: openstreetMapSettingsSchema,
  176 + name: 'openstreet-map',
  177 + },
  178 + 'tencent-map': {
  179 + MapClass: TencentMap,
  180 + schema: tencentMapSettingsSchema,
  181 + name: 'tencent-map'
  182 + },
  183 + 'google-map': {
  184 + MapClass: GoogleMap,
  185 + schema: googleMapSettingsSchema,
  186 + name: 'google-map'
  187 + },
  188 + here: {
  189 + MapClass: HEREMap,
  190 + schema: hereMapSettingsSchema,
  191 + name: 'here'
  192 + },
  193 + 'image-map': {
  194 + MapClass: ImageMap,
  195 + schema: imageMapSettingsSchema,
  196 + name: 'image-map'
  197 + }
  198 +};
  199 +
  200 +export const defaultSettings: any = {
  201 + xPosKeyName: 'xPos',
  202 + yPosKeyName: 'yPos',
  203 + markerOffsetX: 0.5,
  204 + markerOffsetY: 1,
  205 + latKeyName: 'latitude',
  206 + lngKeyName: 'longitude',
  207 + polygonKeyName: 'coordinates',
  208 + showLabel: false,
  209 + label: '${entityName}',
  210 + showTooltip: false,
  211 + useDefaultCenterPosition: false,
  212 + showTooltipAction: 'click',
  213 + autocloseTooltip: false,
  214 + showPolygon: false,
  215 + labelColor: '#000000',
  216 + color: '#FE7569',
  217 + polygonColor: '#0000ff',
  218 + polygonStrokeColor: '#fe0001',
  219 + polygonOpacity: 0.5,
  220 + polygonStrokeOpacity: 1,
  221 + polygonStrokeWeight: 1,
  222 + useLabelFunction: false,
  223 + markerImages: [],
  224 + strokeWeight: 2,
  225 + strokeOpacity: 1.0,
  226 + initCallback: () => { },
  227 + defaultZoomLevel: 8,
  228 + disableScrollZooming: false,
  229 + minZoomLevel: 16,
  230 + credentials: '',
  231 + markerClusteringSetting: null,
  232 + draggableMarker: false,
  233 + fitMapBounds: true
  234 +};
  235 +
  236 +export const hereProviders = [
  237 + 'HERE.normalDay',
  238 + 'HERE.normalNight',
  239 + 'HERE.hybridDay',
  240 + 'HERE.terrainDay']
@@ -26,7 +26,7 @@ export interface MapWidgetInterface { @@ -26,7 +26,7 @@ export interface MapWidgetInterface {
26 26
27 export interface MapWidgetStaticInterface { 27 export interface MapWidgetStaticInterface {
28 settingsSchema(mapProvider?: MapProviders, drawRoutes?: boolean): JsonSettingsSchema; 28 settingsSchema(mapProvider?: MapProviders, drawRoutes?: boolean): JsonSettingsSchema;
29 - getProvidersSchema(mapProvider?: MapProviders): JsonSettingsSchema 29 + getProvidersSchema(mapProvider?: MapProviders, ignoreImageMap?: boolean): JsonSettingsSchema
30 dataKeySettingsSchema(): object; 30 dataKeySettingsSchema(): object;
31 actionSources(): object; 31 actionSources(): object;
32 } 32 }
@@ -14,23 +14,17 @@ @@ -14,23 +14,17 @@
14 /// limitations under the License. 14 /// limitations under the License.
15 /// 15 ///
16 16
17 -import { MapProviders, UnitedMapSettings } from './map-models'; 17 +import { MapProviders, UnitedMapSettings, providerSets, hereProviders, defaultSettings } from './map-models';
18 import LeafletMap from './leaflet-map'; 18 import LeafletMap from './leaflet-map';
19 import { 19 import {
20 - openstreetMapSettingsSchema,  
21 - googleMapSettingsSchema,  
22 - imageMapSettingsSchema,  
23 - tencentMapSettingsSchema,  
24 commonMapSettingsSchema, 20 commonMapSettingsSchema,
25 routeMapSettingsSchema, 21 routeMapSettingsSchema,
26 markerClusteringSettingsSchema, 22 markerClusteringSettingsSchema,
27 markerClusteringSettingsSchemaLeaflet, 23 markerClusteringSettingsSchemaLeaflet,
28 - hereMapSettingsSchema,  
29 mapProviderSchema, 24 mapProviderSchema,
30 mapPolygonSchema 25 mapPolygonSchema
31 } from './schemes'; 26 } from './schemes';
32 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface'; 27 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
33 -import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';  
34 import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils'; 28 import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils';
35 import { of, Subject } from 'rxjs'; 29 import { of, Subject } from 'rxjs';
36 import { WidgetContext } from '@app/modules/home/models/widget-component.models'; 30 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
@@ -39,7 +33,6 @@ import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType, @@ -39,7 +33,6 @@ import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType,
39 import { EntityId } from '@shared/models/id/entity-id'; 33 import { EntityId } from '@shared/models/id/entity-id';
40 import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; 34 import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
41 import { AttributeService } from '@core/http/attribute.service'; 35 import { AttributeService } from '@core/http/attribute.service';
42 -import { Type } from '@angular/core';  
43 import { TranslateService } from '@ngx-translate/core'; 36 import { TranslateService } from '@ngx-translate/core';
44 import { UtilsService } from '@core/services/utils.service'; 37 import { UtilsService } from '@core/services/utils.service';
45 38
@@ -85,11 +78,19 @@ export class MapWidgetController implements MapWidgetInterface { @@ -85,11 +78,19 @@ export class MapWidgetController implements MapWidgetInterface {
85 return {}; 78 return {};
86 } 79 }
87 80
88 - public static getProvidersSchema(mapProvider: MapProviders) {  
89 - mapProviderSchema.schema.properties.provider.default = mapProvider;  
90 - return mergeSchemes([mapProviderSchema, 81 + public static getProvidersSchema(mapProvider: MapProviders, ignoreImageMap = false) {
  82 + if (mapProvider)
  83 + mapProviderSchema.schema.properties.provider.default = mapProvider;
  84 + const providerSchema = mapProviderSchema;
  85 + if (ignoreImageMap) {
  86 + providerSchema.form[0].items = providerSchema.form[0]?.items.filter(item => item.value !== 'image-map');
  87 + }
  88 + return mergeSchemes([providerSchema,
91 ...Object.keys(providerSets)?.map( 89 ...Object.keys(providerSets)?.map(
92 - (key: string) => { const setting = providerSets[key]; return addCondition(setting?.schema, `model.provider === '${setting.name}'`) })]); 90 + (key: string) => {
  91 + const setting = providerSets[key];
  92 + return addCondition(setting?.schema, `model.provider === '${setting.name}'`);
  93 + })]);
93 } 94 }
94 95
95 public static settingsSchema(mapProvider: MapProviders, drawRoutes: boolean): JsonSettingsSchema { 96 public static settingsSchema(mapProvider: MapProviders, drawRoutes: boolean): JsonSettingsSchema {
@@ -218,6 +219,7 @@ export class MapWidgetController implements MapWidgetInterface { @@ -218,6 +219,7 @@ export class MapWidgetController implements MapWidgetInterface {
218 polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), 219 polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams),
219 markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), 220 markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
220 labelColor: this.ctx.widgetConfig.color, 221 labelColor: this.ctx.widgetConfig.color,
  222 + polygonKeyName: settings.polKeyName ? settings.polKeyName : settings.polygonKeyName,
221 tooltipPattern: settings.tooltipPattern || 223 tooltipPattern: settings.tooltipPattern ||
222 '<b>${entityName}</b><br/><br/><b>Latitude:</b> ${' + 224 '<b>${entityName}</b><br/><br/><b>Latitude:</b> ${' +
223 settings.latKeyName + ':7}<br/><b>Longitude:</b> ${' + settings.lngKeyName + ':7}', 225 settings.latKeyName + ':7}<br/><b>Longitude:</b> ${' + settings.lngKeyName + ':7}',
@@ -295,78 +297,4 @@ export class MapWidgetController implements MapWidgetInterface { @@ -295,78 +297,4 @@ export class MapWidgetController implements MapWidgetInterface {
295 297
296 export let TbMapWidgetV2: MapWidgetStaticInterface = MapWidgetController; 298 export let TbMapWidgetV2: MapWidgetStaticInterface = MapWidgetController;
297 299
298 -interface IProvider {  
299 - MapClass: Type<LeafletMap>,  
300 - schema: JsonSettingsSchema,  
301 - name: string  
302 -}  
303 -  
304 -export const providerSets: { [key: string]: IProvider } = {  
305 - 'openstreet-map': {  
306 - MapClass: OpenStreetMap,  
307 - schema: openstreetMapSettingsSchema,  
308 - name: 'openstreet-map',  
309 - },  
310 - 'tencent-map': {  
311 - MapClass: TencentMap,  
312 - schema: tencentMapSettingsSchema,  
313 - name: 'tencent-map'  
314 - },  
315 - 'google-map': {  
316 - MapClass: GoogleMap,  
317 - schema: googleMapSettingsSchema,  
318 - name: 'google-map'  
319 - },  
320 - here: {  
321 - MapClass: HEREMap,  
322 - schema: hereMapSettingsSchema,  
323 - name: 'here'  
324 - },  
325 - 'image-map': {  
326 - MapClass: ImageMap,  
327 - schema: imageMapSettingsSchema,  
328 - name: 'image-map'  
329 - }  
330 -};  
331 -  
332 -export const defaultSettings: any = {  
333 - xPosKeyName: 'xPos',  
334 - yPosKeyName: 'yPos',  
335 - markerOffsetX: 0.5,  
336 - markerOffsetY: 1,  
337 - latKeyName: 'latitude',  
338 - lngKeyName: 'longitude',  
339 - polygonKeyName: 'coordinates',  
340 - showLabel: false,  
341 - label: '${entityName}',  
342 - showTooltip: false,  
343 - useDefaultCenterPosition: false,  
344 - showTooltipAction: 'click',  
345 - autocloseTooltip: false,  
346 - showPolygon: false,  
347 - labelColor: '#000000',  
348 - color: '#FE7569',  
349 - polygonColor: '#0000ff',  
350 - polygonStrokeColor: '#fe0001',  
351 - polygonOpacity: 0.5,  
352 - polygonStrokeOpacity: 1,  
353 - polygonStrokeWeight: 1,  
354 - useLabelFunction: false,  
355 - markerImages: [],  
356 - strokeWeight: 2,  
357 - strokeOpacity: 1.0,  
358 - initCallback: () => { },  
359 - defaultZoomLevel: 8,  
360 - disableScrollZooming: false,  
361 - minZoomLevel: 16,  
362 - credentials: '',  
363 - markerClusteringSetting: null,  
364 - draggableMarker: false,  
365 - fitMapBounds: true  
366 -};  
367 300
368 -export const hereProviders = [  
369 - 'HERE.normalDay',  
370 - 'HERE.normalNight',  
371 - 'HERE.hybridDay',  
372 - 'HERE.terrainDay']  
@@ -53,8 +53,9 @@ export class Polygon { @@ -53,8 +53,9 @@ export class Polygon {
53 } 53 }
54 54
55 updateTooltip(data: DatasourceData) { 55 updateTooltip(data: DatasourceData) {
56 - const pattern = this.settings.useTooltipFunction ?  
57 - safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern; 56 + const pattern = this.settings.usePolygonTooltipFunction ?
  57 + safeExecute(this.settings.polygonTooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) :
  58 + this.settings.polygonTooltipPattern;
58 this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true)); 59 this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true));
59 } 60 }
60 61
@@ -72,9 +73,11 @@ export class Polygon { @@ -72,9 +73,11 @@ export class Polygon {
72 } 73 }
73 74
74 updatePolygonColor(settings) { 75 updatePolygonColor(settings) {
  76 + const color = settings.usePolygonColorFunction ?
  77 + safeExecute(settings.polygoncolorFunction, [this.data, this.dataSources, this.data.dsIndex]) : settings.polygonColor;
75 const style: L.PathOptions = { 78 const style: L.PathOptions = {
76 fill: true, 79 fill: true,
77 - fillColor: settings.polygonColor, 80 + fillColor: color,
78 color: settings.polygonStrokeColor, 81 color: settings.polygonStrokeColor,
79 weight: settings.polygonStrokeWeight, 82 weight: settings.polygonStrokeWeight,
80 fillOpacity: settings.polygonOpacity, 83 fillOpacity: settings.polygonOpacity,
@@ -482,6 +482,20 @@ export const mapPolygonSchema = @@ -482,6 +482,20 @@ export const mapPolygonSchema =
482 type: 'boolean', 482 type: 'boolean',
483 default: false 483 default: false
484 }, 484 },
  485 + polygonTooltipPattern: {
  486 + title: 'Tooltip (for ex. \'Text ${keyName} units.\' or <link-act name=\'my-action\'>Link text</link-act>\')',
  487 + type: 'string',
  488 + default: '<b>${entityName}</b><br/><br/><b>TimeStamp:</b> ${ts:7}'
  489 + },
  490 + usePolygonTooltipFunction: {
  491 + title: 'Use polygon tooltip function',
  492 + type: 'boolean',
  493 + default: false
  494 + },
  495 + polygonTooltipFunction: {
  496 + title: 'Polygon tooltip function: f(data, dsData, dsIndex)',
  497 + type: 'string'
  498 + },
485 usePolygonColorFunction: { 499 usePolygonColorFunction: {
486 title: 'Use polygon color function', 500 title: 'Use polygon color function',
487 type: 'boolean', 501 type: 'boolean',
@@ -506,7 +520,15 @@ export const mapPolygonSchema = @@ -506,7 +520,15 @@ export const mapPolygonSchema =
506 key: 'polygonStrokeColor', 520 key: 'polygonStrokeColor',
507 type: 'color' 521 type: 'color'
508 }, 522 },
509 - 'polygonStrokeOpacity', 'polygonStrokeWeight', 'usePolygonColorFunction', 'showPolygonTooltip', 523 + 'polygonStrokeOpacity', 'polygonStrokeWeight', 'showPolygonTooltip',
  524 + {
  525 + key: 'polygonTooltipPattern',
  526 + type: 'textarea'
  527 + }, 'usePolygonTooltipFunction', {
  528 + key: 'polygonTooltipFunction',
  529 + type: 'javascript'
  530 + },
  531 + 'usePolygonColorFunction',
510 { 532 {
511 key: 'polygonColorFunction', 533 key: 'polygonColorFunction',
512 type: 'javascript' 534 type: 'javascript'
@@ -833,6 +855,195 @@ export const imageMapSettingsSchema = @@ -833,6 +855,195 @@ export const imageMapSettingsSchema =
833 ] 855 ]
834 }; 856 };
835 857
  858 +export const pathSchema =
  859 +{
  860 + schema: {
  861 + title: 'Trip Animation Path Configuration',
  862 + type: 'object',
  863 + properties: {
  864 + color: {
  865 + title: 'Path color',
  866 + type: 'string'
  867 + },
  868 + strokeWeight: {
  869 + title: 'Stroke weight',
  870 + type: 'number',
  871 + default: 2
  872 + },
  873 + strokeOpacity: {
  874 + title: 'Stroke opacity',
  875 + type: 'number',
  876 + default: 1
  877 + },
  878 + useColorFunction: {
  879 + title: 'Use path color function',
  880 + type: 'boolean',
  881 + default: false
  882 + },
  883 + colorFunction: {
  884 + title: 'Path color function: f(data, dsData, dsIndex)',
  885 + type: 'string'
  886 + },
  887 + usePolylineDecorator: {
  888 + title: 'Use path decorator',
  889 + type: 'boolean',
  890 + default: false
  891 + },
  892 + decoratorSymbol: {
  893 + title: 'Decorator symbol',
  894 + type: 'string',
  895 + default: 'arrowHead'
  896 + },
  897 + decoratorSymbolSize: {
  898 + title: 'Decorator symbol size (px)',
  899 + type: 'number',
  900 + default: 10
  901 + },
  902 + useDecoratorCustomColor: {
  903 + title: 'Use path decorator custom color',
  904 + type: 'boolean',
  905 + default: false
  906 + },
  907 + decoratorCustomColor: {
  908 + title: 'Decorator custom color',
  909 + type: 'string',
  910 + default: '#000'
  911 + },
  912 + decoratorOffset: {
  913 + title: 'Decorator offset',
  914 + type: 'string',
  915 + default: '20px'
  916 + },
  917 + endDecoratorOffset: {
  918 + title: 'End decorator offset',
  919 + type: 'string',
  920 + default: '20px'
  921 + },
  922 + decoratorRepeat: {
  923 + title: 'Decorator repeat',
  924 + type: 'string',
  925 + default: '20px'
  926 + },
  927 + showPoints: {
  928 + title: 'Show points',
  929 + type: 'boolean',
  930 + default: false
  931 + },
  932 + pointColor: {
  933 + title: 'Point color',
  934 + type: 'string'
  935 + },
  936 + pointSize: {
  937 + title: 'Point size (px)',
  938 + type: 'number',
  939 + default: 10
  940 + },
  941 + usePointAsAnchor: {
  942 + title: 'Use point as anchor',
  943 + type: 'boolean',
  944 + default: false
  945 + },
  946 + pointAsAnchorFunction: {
  947 + title: 'Point as anchor function: f(data, dsData, dsIndex)',
  948 + type: 'string'
  949 + },
  950 + pointTooltipOnRightPanel: {
  951 + title: 'Independant point tooltip',
  952 + type: 'boolean',
  953 + default: true
  954 + },
  955 + },
  956 + required: []
  957 + },
  958 + form: [
  959 + {
  960 + key: 'color',
  961 + type: 'color'
  962 + }, 'useColorFunction', {
  963 + key: 'colorFunction',
  964 + type: 'javascript'
  965 + }, 'strokeWeight', 'strokeOpacity',
  966 + 'usePolylineDecorator', {
  967 + key: 'decoratorSymbol',
  968 + type: 'rc-select',
  969 + multiple: false,
  970 + items: [{
  971 + value: 'arrowHead',
  972 + label: 'Arrow'
  973 + }, {
  974 + value: 'dash',
  975 + label: 'Dash'
  976 + }]
  977 + }, 'decoratorSymbolSize', 'useDecoratorCustomColor', {
  978 + key: 'decoratorCustomColor',
  979 + type: 'color'
  980 + }, {
  981 + key: 'decoratorOffset',
  982 + type: 'textarea'
  983 + }, {
  984 + key: 'endDecoratorOffset',
  985 + type: 'textarea'
  986 + }, {
  987 + key: 'decoratorRepeat',
  988 + type: 'textarea'
  989 + }, 'showPoints', {
  990 + key: 'pointColor',
  991 + type: 'color'
  992 + }, 'pointSize', 'usePointAsAnchor', {
  993 + key: 'pointAsAnchorFunction',
  994 + type: 'javascript'
  995 + }, 'pointTooltipOnRightPanel',
  996 + ]
  997 +};
  998 +
  999 +export const pointSchema =
  1000 +{
  1001 + schema: {
  1002 + title: 'Trip Animation Path Configuration',
  1003 + type: 'object',
  1004 + properties: {
  1005 + showPoints: {
  1006 + title: 'Show points',
  1007 + type: 'boolean',
  1008 + default: false
  1009 + },
  1010 + pointColor: {
  1011 + title: 'Point color',
  1012 + type: 'string'
  1013 + },
  1014 + pointSize: {
  1015 + title: 'Point size (px)',
  1016 + type: 'number',
  1017 + default: 10
  1018 + },
  1019 + usePointAsAnchor: {
  1020 + title: 'Use point as anchor',
  1021 + type: 'boolean',
  1022 + default: false
  1023 + },
  1024 + pointAsAnchorFunction: {
  1025 + title: 'Point as anchor function: f(data, dsData, dsIndex)',
  1026 + type: 'string'
  1027 + },
  1028 + pointTooltipOnRightPanel: {
  1029 + title: 'Independant point tooltip',
  1030 + type: 'boolean',
  1031 + default: true
  1032 + },
  1033 + },
  1034 + required: []
  1035 + },
  1036 + form: [
  1037 + 'showPoints', {
  1038 + key: 'pointColor',
  1039 + type: 'color'
  1040 + }, 'pointSize', 'usePointAsAnchor', {
  1041 + key: 'pointAsAnchorFunction',
  1042 + type: 'javascript'
  1043 + }, 'pointTooltipOnRightPanel',
  1044 + ]
  1045 +};
  1046 +
836 export const mapProviderSchema = 1047 export const mapProviderSchema =
837 { 1048 {
838 schema: { 1049 schema: {
@@ -878,7 +1089,6 @@ export const mapProviderSchema = @@ -878,7 +1089,6 @@ export const mapProviderSchema =
878 ] 1089 ]
879 }; 1090 };
880 1091
881 -  
882 export const tripAnimationSchema = { 1092 export const tripAnimationSchema = {
883 schema: { 1093 schema: {
884 title: 'Openstreet Map Configuration', 1094 title: 'Openstreet Map Configuration',
@@ -899,11 +1109,6 @@ export const tripAnimationSchema = { @@ -899,11 +1109,6 @@ export const tripAnimationSchema = {
899 type: 'string', 1109 type: 'string',
900 default: 'longitude' 1110 default: 'longitude'
901 }, 1111 },
902 - polKeyName: {  
903 - title: 'Polygon key name',  
904 - type: 'string',  
905 - default: 'coordinates'  
906 - },  
907 showLabel: { 1112 showLabel: {
908 title: 'Show label', 1113 title: 'Show label',
909 type: 'boolean', 1114 type: 'boolean',
@@ -957,148 +1162,6 @@ export const tripAnimationSchema = { @@ -957,148 +1162,6 @@ export const tripAnimationSchema = {
957 title: 'Tooltip function: f(data, dsData, dsIndex)', 1162 title: 'Tooltip function: f(data, dsData, dsIndex)',
958 type: 'string' 1163 type: 'string'
959 }, 1164 },
960 - color: {  
961 - title: 'Path color',  
962 - type: 'string'  
963 - },  
964 - strokeWeight: {  
965 - title: 'Stroke weight',  
966 - type: 'number',  
967 - default: 2  
968 - },  
969 - strokeOpacity: {  
970 - title: 'Stroke opacity',  
971 - type: 'number',  
972 - default: 1  
973 - },  
974 - useColorFunction: {  
975 - title: 'Use path color function',  
976 - type: 'boolean',  
977 - default: false  
978 - },  
979 - colorFunction: {  
980 - title: 'Path color function: f(data, dsData, dsIndex)',  
981 - type: 'string'  
982 - },  
983 - usePolylineDecorator: {  
984 - title: 'Use path decorator',  
985 - type: 'boolean',  
986 - default: false  
987 - },  
988 - decoratorSymbol: {  
989 - title: 'Decorator symbol',  
990 - type: 'string',  
991 - default: 'arrowHead'  
992 - },  
993 - decoratorSymbolSize: {  
994 - title: 'Decorator symbol size (px)',  
995 - type: 'number',  
996 - default: 10  
997 - },  
998 - useDecoratorCustomColor: {  
999 - title: 'Use path decorator custom color',  
1000 - type: 'boolean',  
1001 - default: false  
1002 - },  
1003 - decoratorCustomColor: {  
1004 - title: 'Decorator custom color',  
1005 - type: 'string',  
1006 - default: '#000'  
1007 - },  
1008 - decoratorOffset: {  
1009 - title: 'Decorator offset',  
1010 - type: 'string',  
1011 - default: '20px'  
1012 - },  
1013 - endDecoratorOffset: {  
1014 - title: 'End decorator offset',  
1015 - type: 'string',  
1016 - default: '20px'  
1017 - },  
1018 - decoratorRepeat: {  
1019 - title: 'Decorator repeat',  
1020 - type: 'string',  
1021 - default: '20px'  
1022 - },  
1023 - showPolygon: {  
1024 - title: 'Show polygon',  
1025 - type: 'boolean',  
1026 - default: false  
1027 - },  
1028 - polygonTooltipPattern: {  
1029 - title: 'Tooltip (for ex. \'Text ${keyName} units.\' or <link-act name=\'my-action\'>Link text</link-act>\')',  
1030 - type: 'string',  
1031 - default: '<b>${entityName}</b><br/><br/><b>TimeStamp:</b> ${ts:7}'  
1032 - },  
1033 - usePolygonTooltipFunction: {  
1034 - title: 'Use polygon tooltip function',  
1035 - type: 'boolean',  
1036 - default: false  
1037 - },  
1038 - polygonTooltipFunction: {  
1039 - title: 'Polygon tooltip function: f(data, dsData, dsIndex)',  
1040 - type: 'string'  
1041 - },  
1042 - polygonColor: {  
1043 - title: 'Polygon color',  
1044 - type: 'string'  
1045 - },  
1046 - polygonOpacity: {  
1047 - title: 'Polygon opacity',  
1048 - type: 'number',  
1049 - default: 0.5  
1050 - },  
1051 - polygonStrokeColor: {  
1052 - title: 'Polygon border color',  
1053 - type: 'string'  
1054 - },  
1055 - polygonStrokeOpacity: {  
1056 - title: 'Polygon border opacity',  
1057 - type: 'number',  
1058 - default: 1  
1059 - },  
1060 - polygonStrokeWeight: {  
1061 - title: 'Polygon border weight',  
1062 - type: 'number',  
1063 - default: 1  
1064 - },  
1065 - usePolygonColorFunction: {  
1066 - title: 'Use polygon color function',  
1067 - type: 'boolean',  
1068 - default: false  
1069 - },  
1070 - polygonColorFunction: {  
1071 - title: 'Polygon Color function: f(data, dsData, dsIndex)',  
1072 - type: 'string'  
1073 - },  
1074 - showPoints: {  
1075 - title: 'Show points',  
1076 - type: 'boolean',  
1077 - default: false  
1078 - },  
1079 - pointColor: {  
1080 - title: 'Point color',  
1081 - type: 'string'  
1082 - },  
1083 - pointSize: {  
1084 - title: 'Point size (px)',  
1085 - type: 'number',  
1086 - default: 10  
1087 - },  
1088 - usePointAsAnchor: {  
1089 - title: 'Use point as anchor',  
1090 - type: 'boolean',  
1091 - default: false  
1092 - },  
1093 - pointAsAnchorFunction: {  
1094 - title: 'Point as anchor function: f(data, dsData, dsIndex)',  
1095 - type: 'string'  
1096 - },  
1097 - pointTooltipOnRightPanel: {  
1098 - title: 'Independant point tooltip',  
1099 - type: 'boolean',  
1100 - default: true  
1101 - },  
1102 autocloseTooltip: { 1165 autocloseTooltip: {
1103 title: 'Auto-close point popup', 1166 title: 'Auto-close point popup',
1104 type: 'boolean', 1167 type: 'boolean',
@@ -1138,111 +1201,35 @@ export const tripAnimationSchema = { @@ -1138,111 +1201,35 @@ export const tripAnimationSchema = {
1138 }, 1201 },
1139 required: [] 1202 required: []
1140 }, 1203 },
1141 - form: [{  
1142 - key: 'mapProvider',  
1143 - type: 'rc-select',  
1144 - multiple: false,  
1145 - items: [{  
1146 - value: 'OpenStreetMap.Mapnik',  
1147 - label: 'OpenStreetMap.Mapnik (Default)'  
1148 - }, {  
1149 - value: 'OpenStreetMap.BlackAndWhite',  
1150 - label: 'OpenStreetMap.BlackAndWhite'  
1151 - }, {  
1152 - value: 'OpenStreetMap.HOT',  
1153 - label: 'OpenStreetMap.HOT'  
1154 - }, {  
1155 - value: 'Esri.WorldStreetMap',  
1156 - label: 'Esri.WorldStreetMap'  
1157 - }, {  
1158 - value: 'Esri.WorldTopoMap',  
1159 - label: 'Esri.WorldTopoMap'  
1160 - }, {  
1161 - value: 'CartoDB.Positron',  
1162 - label: 'CartoDB.Positron'  
1163 - }, {  
1164 - value: 'CartoDB.DarkMatter',  
1165 - label: 'CartoDB.DarkMatter'  
1166 - }]  
1167 - }, 'normalizationStep', 'latKeyName', 'lngKeyName', 'polKeyName', 'showLabel', 'label', 'useLabelFunction', { 1204 + form: ['normalizationStep', 'latKeyName', 'lngKeyName', 'showLabel', 'label', 'useLabelFunction', {
1168 key: 'labelFunction', 1205 key: 'labelFunction',
1169 type: 'javascript' 1206 type: 'javascript'
1170 }, 'showTooltip', { 1207 }, 'showTooltip', {
1171 - key: 'tooltipColor',  
1172 - type: 'color'  
1173 - }, {  
1174 - key: 'tooltipFontColor',  
1175 - type: 'color'  
1176 - }, 'tooltipOpacity', {  
1177 - key: 'tooltipPattern',  
1178 - type: 'textarea'  
1179 - }, 'useTooltipFunction', {  
1180 - key: 'tooltipFunction',  
1181 - type: 'javascript'  
1182 - }, {  
1183 - key: 'color',  
1184 - type: 'color'  
1185 - }, 'useColorFunction', {  
1186 - key: 'colorFunction',  
1187 - type: 'javascript'  
1188 - }, 'usePolylineDecorator', {  
1189 - key: 'decoratorSymbol',  
1190 - type: 'rc-select',  
1191 - multiple: false,  
1192 - items: [{  
1193 - value: 'arrowHead',  
1194 - label: 'Arrow' 1208 + key: 'tooltipColor',
  1209 + type: 'color'
  1210 + }, {
  1211 + key: 'tooltipFontColor',
  1212 + type: 'color'
  1213 + }, 'tooltipOpacity', {
  1214 + key: 'tooltipPattern',
  1215 + type: 'textarea'
  1216 + }, 'useTooltipFunction', {
  1217 + key: 'tooltipFunction',
  1218 + type: 'javascript'
  1219 + }, 'autocloseTooltip', {
  1220 + key: 'markerImage',
  1221 + type: 'image'
  1222 + }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction',
  1223 + {
  1224 + key: 'markerImageFunction',
  1225 + type: 'javascript'
1195 }, { 1226 }, {
1196 - value: 'dash',  
1197 - label: 'Dash' 1227 + key: 'markerImages',
  1228 + items: [
  1229 + {
  1230 + key: 'markerImages[]',
  1231 + type: 'image'
  1232 + }
  1233 + ]
1198 }] 1234 }]
1199 - }, 'decoratorSymbolSize', 'useDecoratorCustomColor', {  
1200 - key: 'decoratorCustomColor',  
1201 - type: 'color'  
1202 - }, {  
1203 - key: 'decoratorOffset',  
1204 - type: 'textarea'  
1205 - }, {  
1206 - key: 'endDecoratorOffset',  
1207 - type: 'textarea'  
1208 - }, {  
1209 - key: 'decoratorRepeat',  
1210 - type: 'textarea'  
1211 - }, 'strokeWeight', 'strokeOpacity', 'showPolygon', {  
1212 - key: 'polygonTooltipPattern',  
1213 - type: 'textarea'  
1214 - }, 'usePolygonTooltipFunction', {  
1215 - key: 'polygonTooltipFunction',  
1216 - type: 'javascript'  
1217 - }, {  
1218 - key: 'polygonColor',  
1219 - type: 'color'  
1220 - }, 'polygonOpacity', {  
1221 - key: 'polygonStrokeColor',  
1222 - type: 'color'  
1223 - }, 'polygonStrokeOpacity', 'polygonStrokeWeight', 'usePolygonColorFunction', {  
1224 - key: 'polygonColorFunction',  
1225 - type: 'javascript'  
1226 - }, 'showPoints', {  
1227 - key: 'pointColor',  
1228 - type: 'color'  
1229 - }, 'pointSize', 'usePointAsAnchor', {  
1230 - key: 'pointAsAnchorFunction',  
1231 - type: 'javascript'  
1232 - }, 'pointTooltipOnRightPanel', 'autocloseTooltip', {  
1233 - key: 'markerImage',  
1234 - type: 'image'  
1235 - }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction',  
1236 - {  
1237 - key: 'markerImageFunction',  
1238 - type: 'javascript'  
1239 - }, {  
1240 - key: 'markerImages',  
1241 - items: [  
1242 - {  
1243 - key: 'markerImages[]',  
1244 - type: 'image'  
1245 - }  
1246 - ]  
1247 - }]  
1248 } 1235 }
@@ -22,8 +22,8 @@ import { interpolateOnPointSegment } from 'leaflet-geometryutil'; @@ -22,8 +22,8 @@ import { interpolateOnPointSegment } from 'leaflet-geometryutil';
22 import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, SecurityContext, ViewChild } from '@angular/core'; 22 import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, SecurityContext, ViewChild } from '@angular/core';
23 import { MapWidgetController, TbMapWidgetV2 } from '../lib/maps/map-widget2'; 23 import { MapWidgetController, TbMapWidgetV2 } from '../lib/maps/map-widget2';
24 import { MapProviders } from '../lib/maps/map-models'; 24 import { MapProviders } from '../lib/maps/map-models';
25 -import { initSchema, addToSchema, addGroupInfo } from '@app/core/schema-utils';  
26 -import { tripAnimationSchema } from '../lib/maps/schemes'; 25 +import { initSchema, addToSchema, addGroupInfo, addCondition } from '@app/core/schema-utils';
  26 +import { tripAnimationSchema, mapPolygonSchema, pathSchema, pointSchema } from '../lib/maps/schemes';
27 import { DomSanitizer } from '@angular/platform-browser'; 27 import { DomSanitizer } from '@angular/platform-browser';
28 import { WidgetContext } from '@app/modules/home/models/widget-component.models'; 28 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
29 import { findAngle, getRatio, parseArray, parseWithTranslation, safeExecute } from '../lib/maps/maps-utils'; 29 import { findAngle, getRatio, parseArray, parseWithTranslation, safeExecute } from '../lib/maps/maps-utils';
@@ -61,10 +61,16 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { @@ -61,10 +61,16 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
61 61
62 static getSettingsSchema(): JsonSettingsSchema { 62 static getSettingsSchema(): JsonSettingsSchema {
63 const schema = initSchema(); 63 const schema = initSchema();
64 - addToSchema(schema, TbMapWidgetV2.getProvidersSchema()); 64 + addToSchema(schema, TbMapWidgetV2.getProvidersSchema(null, true));
65 addGroupInfo(schema, 'Map Provider Settings'); 65 addGroupInfo(schema, 'Map Provider Settings');
66 addToSchema(schema, tripAnimationSchema); 66 addToSchema(schema, tripAnimationSchema);
67 addGroupInfo(schema, 'Trip Animation Settings'); 67 addGroupInfo(schema, 'Trip Animation Settings');
  68 + addToSchema(schema, pathSchema);
  69 + addGroupInfo(schema, 'Path Settings');
  70 + addToSchema(schema, addCondition(pointSchema, 'model.showPoint === true', ['showPoint']));
  71 + addGroupInfo(schema, 'Polygon Settings');
  72 + addToSchema(schema, addCondition(mapPolygonSchema, 'model.showPolygon === true', ['showPolygon']));
  73 + addGroupInfo(schema, 'Polygon Settings');
68 return schema; 74 return schema;
69 } 75 }
70 76
@@ -79,7 +85,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { @@ -79,7 +85,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
79 } 85 }
80 this.settings = { ...settings, ...this.ctx.settings }; 86 this.settings = { ...settings, ...this.ctx.settings };
81 const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; 87 const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
82 - if (subscription) subscription.callbacks.onDataUpdated = (updated) => { 88 + if (subscription) subscription.callbacks.onDataUpdated = () => {
83 this.historicalData = parseArray(this.ctx.data); 89 this.historicalData = parseArray(this.ctx.data);
84 this.activeTrip = this.historicalData[0][0]; 90 this.activeTrip = this.historicalData[0][0];
85 this.calculateIntervals(); 91 this.calculateIntervals();
@@ -107,6 +113,9 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { @@ -107,6 +113,9 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
107 if (this.settings.showPolygon) { 113 if (this.settings.showPolygon) {
108 this.mapWidget.map.updatePolygons(this.interpolatedData); 114 this.mapWidget.map.updatePolygons(this.interpolatedData);
109 } 115 }
  116 + if(this.settings.showPoint){
  117 + this.mapWidget.map.updateMarkers(this.interpolatedData)
  118 + }
110 this.mapWidget.map.updateMarkers(currentPosition); 119 this.mapWidget.map.updateMarkers(currentPosition);
111 } 120 }
112 } 121 }