Commit 034ea03f247b1c0354e7b708460c6086c5e87e4f
1 parent
68eebaf0
Refactoring code to dynamic color point in trip-animation widget
Showing
4 changed files
with
20 additions
and
20 deletions
... | ... | @@ -626,11 +626,11 @@ export default abstract class LeafletMap { |
626 | 626 | } |
627 | 627 | this.points = new FeatureGroup(); |
628 | 628 | } |
629 | - let pointColor = this.options.pointColor; | |
629 | + let pointColor = this.options.pointColor; | |
630 | 630 | for (const pointsList of pointsData) { |
631 | 631 | pointsList.filter(pdata => !!this.convertPosition(pdata)).forEach(data => { |
632 | 632 | if (this.options.useColorPointFunction) { |
633 | - pointColor = safeExecute(this.options.colorPointFunction,[data, pointsData, data.dsIndex]); | |
633 | + pointColor = safeExecute(this.options.colorPointFunction, [data, pointsData, data.dsIndex]); | |
634 | 634 | } |
635 | 635 | const point = L.circleMarker(this.convertPosition(data), { |
636 | 636 | color: pointColor, | ... | ... |
... | ... | @@ -301,7 +301,7 @@ export class MapWidgetController implements MapWidgetInterface { |
301 | 301 | labelFunction: parseFunction(settings.labelFunction, functionParams), |
302 | 302 | tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), |
303 | 303 | colorFunction: parseFunction(settings.colorFunction, functionParams), |
304 | - colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), | |
304 | + colorPointFunction: parseFunction(settings.colorPointFunction, functionParams), | |
305 | 305 | polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), |
306 | 306 | polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams), |
307 | 307 | markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), | ... | ... |
... | ... | @@ -871,6 +871,15 @@ export const pointSchema = |
871 | 871 | title: 'Point color', |
872 | 872 | type: 'string' |
873 | 873 | }, |
874 | + useColorPointFunction: { | |
875 | + title: 'Use color point function', | |
876 | + type: 'boolean', | |
877 | + default: false | |
878 | + }, | |
879 | + colorPointFunction: { | |
880 | + title: 'Color point function: f(data, dsData, dsIndex)', | |
881 | + type: 'string' | |
882 | + }, | |
874 | 883 | pointSize: { |
875 | 884 | title: 'Point size (px)', |
876 | 885 | type: 'number', |
... | ... | @@ -899,6 +908,11 @@ export const pointSchema = |
899 | 908 | key: 'pointColor', |
900 | 909 | type: 'color' |
901 | 910 | }, |
911 | + 'useColorPointFunction', | |
912 | + { | |
913 | + key: 'colorPointFunction', | |
914 | + type: 'javascript' | |
915 | + }, | |
902 | 916 | 'pointSize', |
903 | 917 | 'usePointAsAnchor', |
904 | 918 | { |
... | ... | @@ -1036,15 +1050,6 @@ export const tripAnimationSchema = { |
1036 | 1050 | title: 'Custom marker image', |
1037 | 1051 | type: 'string' |
1038 | 1052 | }, |
1039 | - useColorPointFunction: { | |
1040 | - title: 'Use color point function', | |
1041 | - type: 'boolean', | |
1042 | - default: false | |
1043 | - }, | |
1044 | - colorPointFunction: { | |
1045 | - title: 'Color point function: f(data, dsData, dsIndex)', | |
1046 | - type: 'string' | |
1047 | - }, | |
1048 | 1053 | markerImageSize: { |
1049 | 1054 | title: 'Custom marker image size (px)', |
1050 | 1055 | type: 'number', |
... | ... | @@ -1090,12 +1095,7 @@ export const tripAnimationSchema = { |
1090 | 1095 | }, 'useTooltipFunction', { |
1091 | 1096 | key: 'tooltipFunction', |
1092 | 1097 | type: 'javascript' |
1093 | - }, 'autocloseTooltip', 'useColorPointFunction', | |
1094 | - { | |
1095 | - key: 'colorPointFunction', | |
1096 | - type: 'javascript' | |
1097 | - }, | |
1098 | - { | |
1098 | + }, 'autocloseTooltip', { | |
1099 | 1099 | key: 'markerImage', |
1100 | 1100 | type: 'image' |
1101 | 1101 | }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction', | ... | ... |
... | ... | @@ -112,7 +112,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy |
112 | 112 | this.settings.pointAsAnchorFunction = parseFunction(this.settings.pointAsAnchorFunction, ['data', 'dsData', 'dsIndex']); |
113 | 113 | this.settings.tooltipFunction = parseFunction(this.settings.tooltipFunction, ['data', 'dsData', 'dsIndex']); |
114 | 114 | this.settings.labelFunction = parseFunction(this.settings.labelFunction, ['data', 'dsData', 'dsIndex']); |
115 | - this.settings.colorPointFunction = parseFunction(this.settings.colorPointFunction, ['data', 'dsData', 'dsIndex']); | |
115 | + this.settings.colorPointFunction = parseFunction(this.settings.colorPointFunction, ['data', 'dsData', 'dsIndex']); | |
116 | 116 | this.normalizationStep = this.settings.normalizationStep; |
117 | 117 | const subscription = this.ctx.defaultSubscription; |
118 | 118 | subscription.callbacks.onDataUpdated = () => { |
... | ... | @@ -179,7 +179,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit, OnDestroy |
179 | 179 | if (this.settings.showPolygon) { |
180 | 180 | this.mapWidget.map.updatePolygons(this.interpolatedTimeData); |
181 | 181 | } |
182 | - if (this.settings.showPoints || this.settings.useColorPointFunction) { | |
182 | + if (this.settings.showPoints) { | |
183 | 183 | this.mapWidget.map.updatePoints(formattedInterpolatedTimeData.map(ds => _.union(ds)), this.calcTooltip); |
184 | 184 | } |
185 | 185 | this.mapWidget.map.updateMarkers(currentPosition, true, (trip) => { | ... | ... |