@rio-cloud/rio-uikit 0.16.2-beta.11 → 0.16.2-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/components/map/components/Map.js +1 -1
  2. package/components/map/components/features/layers/MarkerLayer.js +3 -1
  3. package/components/map/components/features/layers/clustering/ClusterLayer.js +19 -4
  4. package/components/mapMarker/ClusterMapMarker.js +1 -1
  5. package/components/mapMarker/SingleMapMarker.js +1 -7
  6. package/hooks/useScrollPosition.js +2 -2
  7. package/lib/es/components/map/components/Map.js +1 -1
  8. package/lib/es/components/map/components/features/layers/MarkerLayer.js +3 -1
  9. package/lib/es/components/map/components/features/layers/clustering/ClusterLayer.js +19 -4
  10. package/lib/es/components/mapMarker/ClusterMapMarker.js +1 -1
  11. package/lib/es/components/mapMarker/SingleMapMarker.js +1 -7
  12. package/lib/es/hooks/useScrollPosition.js +2 -2
  13. package/lib/es/styles/design/border.less +6 -0
  14. package/lib/es/styles/design/colors.less +9 -1
  15. package/lib/es/styles/design/text.less +10 -1
  16. package/lib/es/styles/mapping/color-map.less +10 -0
  17. package/lib/es/styles/variables/concated_css_variables.less +6 -0
  18. package/lib/es/styles/variables/dark_colors.less +7 -0
  19. package/lib/es/styles/variables/dark_css_variables_map.less +7 -0
  20. package/lib/es/styles/variables/light_colors.less +7 -0
  21. package/lib/es/styles/variables/light_css_variables_map.less +7 -0
  22. package/lib/es/types.ts +6 -0
  23. package/lib/es/version.json +1 -1
  24. package/package.json +1 -1
  25. package/styles/design/border.less +6 -0
  26. package/styles/design/colors.less +9 -1
  27. package/styles/design/text.less +10 -1
  28. package/styles/mapping/color-map.less +10 -0
  29. package/styles/variables/concated_css_variables.less +6 -0
  30. package/styles/variables/dark_colors.less +7 -0
  31. package/styles/variables/dark_css_variables_map.less +7 -0
  32. package/styles/variables/light_colors.less +7 -0
  33. package/styles/variables/light_css_variables_map.less +7 -0
  34. package/types.ts +6 -0
  35. package/version.json +1 -1
@@ -417,7 +417,7 @@ Map.defaultProps = {
417
417
  onShowClusterChange: function onShowClusterChange() {},
418
418
  onZoomIn: function onZoomIn() {},
419
419
  onZoomOut: function onZoomOut() {},
420
- useWebGL: false,
420
+ useWebGL: true,
421
421
  darkMode: false
422
422
  };
423
423
  Map.propTypes = {
@@ -33,6 +33,8 @@ var MarkerLayer = function MarkerLayer(props) {
33
33
  MarkerLayer.propTypes = {
34
34
  // api: mapProps.api,
35
35
  simpleTheme: mapProps.clusterTheme,
36
- clusterDissolvable: PropTypes.bool
36
+ clusterDissolvable: PropTypes.bool,
37
+ clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
38
+ eps: PropTypes.number
37
39
  };
38
40
  export default MarkerLayer;
@@ -12,6 +12,16 @@ var convertData = function convertData(data, converterFunc) {
12
12
  return data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
13
13
  };
14
14
  var DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
15
+ var getClusterStrategy = function getClusterStrategy(strategy) {
16
+ switch (strategy) {
17
+ case 'GRID':
18
+ return H.clustering.Provider.Strategy.GRID;
19
+ case 'DYNAMICGRID':
20
+ return H.clustering.Provider.Strategy.DYNAMICGRID;
21
+ default:
22
+ return H.clustering.Provider.Strategy.FASTGRID;
23
+ }
24
+ };
15
25
  var ClusterLayer = function ClusterLayer(_ref) {
16
26
  var data = _ref.data,
17
27
  dataConverter = _ref.dataConverter,
@@ -20,7 +30,10 @@ var ClusterLayer = function ClusterLayer(_ref) {
20
30
  maxZoom = _ref.maxZoom,
21
31
  _ref$clusterTheme = _ref.clusterTheme,
22
32
  clusterTheme = _ref$clusterTheme === void 0 ? DEFAULT_CLUSTER_THEME : _ref$clusterTheme,
23
- eventListenerMap = _ref.eventListenerMap;
33
+ eventListenerMap = _ref.eventListenerMap,
34
+ clusterStrategy = _ref.clusterStrategy,
35
+ _ref$eps = _ref.eps,
36
+ eps = _ref$eps === void 0 ? 100 : _ref$eps;
24
37
  var context = useContext(MapContext);
25
38
  var _useState = useState(),
26
39
  _useState2 = _slicedToArray(_useState, 2),
@@ -29,8 +42,8 @@ var ClusterLayer = function ClusterLayer(_ref) {
29
42
  useEffect(function () {
30
43
  var newProviderOptions = {
31
44
  clusteringOptions: {
32
- strategy: H.clustering.Provider.Strategy.DYNAMICGRID,
33
- eps: 100,
45
+ strategy: getClusterStrategy(clusterStrategy),
46
+ eps: eps,
34
47
  minWeight: minWeight ? parseInt(minWeight, 10) : 2
35
48
  },
36
49
  min: minZoom ? parseInt(minZoom, 10) : 0,
@@ -67,6 +80,8 @@ ClusterLayer.propTpyes = {
67
80
  minZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
68
81
  maxZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
69
82
  clusterTheme: mapProps.clusterTheme,
70
- eventListenerMap: PropTypes.object
83
+ eventListenerMap: PropTypes.object,
84
+ clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
85
+ eps: PropTypes.number
71
86
  };
72
87
  export default ClusterLayer;
@@ -28,7 +28,7 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
28
28
  var baseColor = getColorMapping(colorClass) || markerColor;
29
29
  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
30
30
  var markerBorderColor = baseColor.replace('bg-', 'border-color-');
31
- var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
31
+ var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
32
32
  return /*#__PURE__*/React.createElement("div", {
33
33
  className: classes
34
34
  }, /*#__PURE__*/React.createElement("div", {
@@ -42,9 +42,6 @@ var SingleMapMarker = function SingleMapMarker(props) {
42
42
  textColor = props.textColor,
43
43
  warningCount = props.warningCount,
44
44
  fixed = props.fixed;
45
-
46
- // TODO: check if we still need "colorClass"
47
-
48
45
  if (colorClass) {
49
46
  // warnung
50
47
  }
@@ -55,12 +52,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
55
52
  };
56
53
  var mapDirection = getMapDirection(moving, bearing, rotationStyle);
57
54
  var baseColor = getColorMapping(colorClass, markerColor);
58
-
59
- // const baseColorWithMode = isDarkMode ?
60
-
61
55
  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
62
56
  var markerBorderColor = baseColor.replace('bg-', 'border-color-');
63
- var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
57
+ var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
64
58
  return /*#__PURE__*/React.createElement("div", {
65
59
  className: classes
66
60
  }, /*#__PURE__*/React.createElement("div", {
@@ -42,8 +42,8 @@ var useScrollPosition = function useScrollPosition(target) {
42
42
  else {
43
43
  setTargetElement(target);
44
44
  }
45
- return {
46
- "if": function _if(checkForModuleContent) {
45
+ return function () {
46
+ if (checkForModuleContent) {
47
47
  clearInterval(check);
48
48
  }
49
49
  };
@@ -428,7 +428,7 @@ Map.defaultProps = {
428
428
  onShowClusterChange: function onShowClusterChange() {},
429
429
  onZoomIn: function onZoomIn() {},
430
430
  onZoomOut: function onZoomOut() {},
431
- useWebGL: false,
431
+ useWebGL: true,
432
432
  darkMode: false
433
433
  };
434
434
  Map.propTypes = {
@@ -42,7 +42,9 @@ var MarkerLayer = function MarkerLayer(props) {
42
42
  MarkerLayer.propTypes = {
43
43
  // api: mapProps.api,
44
44
  simpleTheme: _proptypes["default"].clusterTheme,
45
- clusterDissolvable: _propTypes["default"].bool
45
+ clusterDissolvable: _propTypes["default"].bool,
46
+ clusterStrategy: _propTypes["default"].oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
47
+ eps: _propTypes["default"].number
46
48
  };
47
49
  var _default = MarkerLayer;
48
50
  exports["default"] = _default;
@@ -20,6 +20,16 @@ var convertData = function convertData(data, converterFunc) {
20
20
  return data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
21
21
  };
22
22
  var DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
23
+ var getClusterStrategy = function getClusterStrategy(strategy) {
24
+ switch (strategy) {
25
+ case 'GRID':
26
+ return H.clustering.Provider.Strategy.GRID;
27
+ case 'DYNAMICGRID':
28
+ return H.clustering.Provider.Strategy.DYNAMICGRID;
29
+ default:
30
+ return H.clustering.Provider.Strategy.FASTGRID;
31
+ }
32
+ };
23
33
  var ClusterLayer = function ClusterLayer(_ref) {
24
34
  var data = _ref.data,
25
35
  dataConverter = _ref.dataConverter,
@@ -28,7 +38,10 @@ var ClusterLayer = function ClusterLayer(_ref) {
28
38
  maxZoom = _ref.maxZoom,
29
39
  _ref$clusterTheme = _ref.clusterTheme,
30
40
  clusterTheme = _ref$clusterTheme === void 0 ? DEFAULT_CLUSTER_THEME : _ref$clusterTheme,
31
- eventListenerMap = _ref.eventListenerMap;
41
+ eventListenerMap = _ref.eventListenerMap,
42
+ clusterStrategy = _ref.clusterStrategy,
43
+ _ref$eps = _ref.eps,
44
+ eps = _ref$eps === void 0 ? 100 : _ref$eps;
32
45
  var context = (0, _react.useContext)(_context.MapContext);
33
46
  var _useState = (0, _react.useState)(),
34
47
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -37,8 +50,8 @@ var ClusterLayer = function ClusterLayer(_ref) {
37
50
  (0, _react.useEffect)(function () {
38
51
  var newProviderOptions = {
39
52
  clusteringOptions: {
40
- strategy: H.clustering.Provider.Strategy.DYNAMICGRID,
41
- eps: 100,
53
+ strategy: getClusterStrategy(clusterStrategy),
54
+ eps: eps,
42
55
  minWeight: minWeight ? parseInt(minWeight, 10) : 2
43
56
  },
44
57
  min: minZoom ? parseInt(minZoom, 10) : 0,
@@ -75,7 +88,9 @@ ClusterLayer.propTpyes = {
75
88
  minZoom: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
76
89
  maxZoom: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
77
90
  clusterTheme: _proptypes["default"].clusterTheme,
78
- eventListenerMap: _propTypes["default"].object
91
+ eventListenerMap: _propTypes["default"].object,
92
+ clusterStrategy: _propTypes["default"].oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
93
+ eps: _propTypes["default"].number
79
94
  };
80
95
  var _default = ClusterLayer;
81
96
  exports["default"] = _default;
@@ -35,7 +35,7 @@ var ClusterMapMarker = function ClusterMapMarker(props) {
35
35
  var baseColor = getColorMapping(colorClass) || markerColor;
36
36
  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
37
37
  var markerBorderColor = baseColor.replace('bg-', 'border-color-');
38
- var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
38
+ var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
39
39
  return /*#__PURE__*/_react["default"].createElement("div", {
40
40
  className: classes
41
41
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -49,9 +49,6 @@ var SingleMapMarker = function SingleMapMarker(props) {
49
49
  textColor = props.textColor,
50
50
  warningCount = props.warningCount,
51
51
  fixed = props.fixed;
52
-
53
- // TODO: check if we still need "colorClass"
54
-
55
52
  if (colorClass) {
56
53
  // warnung
57
54
  }
@@ -62,12 +59,9 @@ var SingleMapMarker = function SingleMapMarker(props) {
62
59
  };
63
60
  var mapDirection = getMapDirection(moving, bearing, rotationStyle);
64
61
  var baseColor = getColorMapping(colorClass, markerColor);
65
-
66
- // const baseColorWithMode = isDarkMode ?
67
-
68
62
  var markerBackgroundColor = active ? 'bg-map-marker-active' : baseColor;
69
63
  var markerBorderColor = baseColor.replace('bg-', 'border-color-');
70
- var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'color-map-marker-text';
64
+ var markerTextColor = active ? baseColor.replace('bg-', 'text-color-') : 'text-color-map-marker-text';
71
65
  return /*#__PURE__*/_react["default"].createElement("div", {
72
66
  className: classes
73
67
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -49,8 +49,8 @@ var useScrollPosition = function useScrollPosition(target) {
49
49
  else {
50
50
  setTargetElement(target);
51
51
  }
52
- return {
53
- "if": function _if(checkForModuleContent) {
52
+ return function () {
53
+ if (checkForModuleContent) {
54
54
  clearInterval(check);
55
55
  }
56
56
  };
@@ -122,6 +122,12 @@ each(@colors-map-marker-map, {
122
122
  }
123
123
  })
124
124
 
125
+ each(@colors-map-marker-night-map, {
126
+ .border-color-@{key} {
127
+ border-color: @value !important;
128
+ }
129
+ })
130
+
125
131
  // rating-1
126
132
  // rating-2
127
133
  // rating-3
@@ -72,7 +72,6 @@ each(@colors-gray-map, {
72
72
  // map-marker-route
73
73
  each(@colors-map-marker-map, {
74
74
  .bg-@{key} {
75
- color: var(--color-white) !important;
76
75
  background-color: @value !important;
77
76
  }
78
77
  .hover-bg-@{key}:hover {
@@ -83,6 +82,15 @@ each(@colors-map-marker-map, {
83
82
  }
84
83
  })
85
84
 
85
+ each(@colors-map-marker-night-map, {
86
+ .bg-@{key} {
87
+ background-color: @value !important;
88
+ }
89
+ .hover-bg-@{key}:hover {
90
+ background-color: @value !important;
91
+ }
92
+ })
93
+
86
94
  // rating-1
87
95
  // rating-2
88
96
  // rating-3
@@ -55,7 +55,6 @@ each(@colors-gray-map, {
55
55
  // map-marker-poi
56
56
  // map-marker-geofence
57
57
  // map-marker-route
58
- .color-map-marker-text { color: var(--color-map-marker-text) !important }
59
58
  each(@colors-map-marker-map, {
60
59
  .text-color-@{key},
61
60
  .hover-text-color-@{key}:hover {
@@ -63,6 +62,16 @@ each(@colors-map-marker-map, {
63
62
  }
64
63
  })
65
64
 
65
+ each(@colors-map-marker-night-map, {
66
+ .text-color-@{key},
67
+ .hover-text-color-@{key}:hover {
68
+ color: @value !important;
69
+ }
70
+ })
71
+
72
+ // .text-color-map-marker-text { color: var(--color-map-marker-text) !important }
73
+ // .text-color-map-marker-text-night { color: var(--color-map-marker-text-night) !important }
74
+
66
75
  // rating-1
67
76
  // rating-2
68
77
  // rating-3
@@ -115,6 +115,7 @@
115
115
  // map-marker-geofence
116
116
  // map-marker-route
117
117
  @colors-map-marker-map: {
118
+ map-marker-text: var(--color-map-marker-text);
118
119
  map-marker-active: var(--color-map-marker-active);
119
120
  map-marker-asset: var(--color-map-marker-asset);
120
121
  map-marker-poi: var(--color-map-marker-poi);
@@ -122,6 +123,15 @@
122
123
  map-marker-route: var(--color-map-marker-route);
123
124
  }
124
125
 
126
+ @colors-map-marker-night-map: {
127
+ map-marker-text-night: var(--color-map-marker-text-night);
128
+ map-marker-active-night: var(--color-map-marker-active-night);
129
+ map-marker-asset-night: var(--color-map-marker-asset-night);
130
+ map-marker-poi-night: var(--color-map-marker-poi-night);
131
+ map-marker-geofence-night: var(--color-map-marker-geofence-night);
132
+ map-marker-route-night: var(--color-map-marker-route-night);
133
+ }
134
+
125
135
  // Color Map - Rating
126
136
  // rating-1
127
137
  // rating-2
@@ -33,6 +33,12 @@
33
33
  @color-map-marker-geofence-hsl: var(--color-map-marker-geofence-h), var(--color-map-marker-geofence-s), var(--color-map-marker-geofence-l);
34
34
  @color-map-marker-route-hsl: var(--color-map-marker-route-h), var(--color-map-marker-route-s), var(--color-map-marker-route-l);
35
35
  @color-map-marker-text-hsl: var(--color-map-marker-text-h), var(--color-map-marker-text-s), var(--color-map-marker-text-l);
36
+ @color-map-marker-active-night-hsl: var(--color-map-marker-active-night-h), var(--color-map-marker-active-night-s), var(--color-map-marker-active-night-l);
37
+ @color-map-marker-asset-night-hsl: var(--color-map-marker-asset-night-h), var(--color-map-marker-asset-night-s), var(--color-map-marker-asset-night-l);
38
+ @color-map-marker-poi-night-hsl: var(--color-map-marker-poi-night-h), var(--color-map-marker-poi-night-s), var(--color-map-marker-poi-night-l);
39
+ @color-map-marker-geofence-night-hsl: var(--color-map-marker-geofence-night-h), var(--color-map-marker-geofence-night-s), var(--color-map-marker-geofence-night-l);
40
+ @color-map-marker-route-night-hsl: var(--color-map-marker-route-night-h), var(--color-map-marker-route-night-s), var(--color-map-marker-route-night-l);
41
+ @color-map-marker-text-night-hsl: var(--color-map-marker-text-night-h), var(--color-map-marker-text-night-s), var(--color-map-marker-text-night-l);
36
42
  @color-highlight-darkest-hsl: var(--color-highlight-darkest-h), var(--color-highlight-darkest-s), var(--color-highlight-darkest-l);
37
43
  @color-highlight-darker-hsl: var(--color-highlight-darker-h), var(--color-highlight-darker-s), var(--color-highlight-darker-l);
38
44
  @color-highlight-dark-hsl: var(--color-highlight-dark-h), var(--color-highlight-dark-s), var(--color-highlight-dark-l);
@@ -48,6 +48,13 @@
48
48
  @dark-color-map-marker-route: @color-map-marker-route;
49
49
  @dark-color-map-marker-text: @color-map-marker-text;
50
50
 
51
+ @dark-color-map-marker-active-night: @color-map-marker-active-night;
52
+ @dark-color-map-marker-asset-night: @color-map-marker-asset-night;
53
+ @dark-color-map-marker-poi-night: @color-map-marker-poi-night;
54
+ @dark-color-map-marker-geofence-night: @color-map-marker-geofence-night;
55
+ @dark-color-map-marker-route-night: @color-map-marker-route-night;
56
+ @dark-color-map-marker-text-night: @color-map-marker-text-night;
57
+
51
58
  // Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
52
59
  @dark-color-rating-1: @color-rating-1;
53
60
  @dark-color-rating-2: @color-rating-2;
@@ -49,6 +49,13 @@
49
49
  // color-map-marker-route: @dark-color-map-marker-route;
50
50
  // color-map-marker-text: @dark-color-map-marker-text;
51
51
 
52
+ // color-map-marker-active-night: @dark-color-map-marker-active-night;
53
+ // color-map-marker-asset-night: @dark-color-map-marker-asset-night;
54
+ // color-map-marker-poi-night: @dark-color-map-marker-poi-night;
55
+ // color-map-marker-geofence-night: @dark-color-map-marker-geofence-night;
56
+ // color-map-marker-route-night: @dark-color-map-marker-route-night;
57
+ // color-map-marker-text-night: @dark-color-map-marker-text-night;
58
+
52
59
  // Color - Highlight
53
60
  color-highlight-darkest: @dark-color-highlight-darkest;
54
61
  color-highlight-darker: @dark-color-highlight-darker;
@@ -52,6 +52,13 @@
52
52
  @color-map-marker-route: #3690ae;
53
53
  @color-map-marker-text: #ffffff;
54
54
 
55
+ @color-map-marker-active-night: #79e703;
56
+ @color-map-marker-asset-night: #0e8a14;
57
+ @color-map-marker-poi-night: #d212be;
58
+ @color-map-marker-geofence-night: #d7b269;
59
+ @color-map-marker-route-night: #750666;
60
+ @color-map-marker-text-night: #f7ff13;
61
+
55
62
  // Color - Rating
56
63
  @color-rating-1: #d90000;
57
64
  @color-rating-2: #ff8e3c;
@@ -53,6 +53,13 @@
53
53
  color-map-marker-route: @color-map-marker-route;
54
54
  color-map-marker-text: @color-map-marker-text;
55
55
 
56
+ color-map-marker-active-night: @color-map-marker-active-night;
57
+ color-map-marker-asset-night: @color-map-marker-asset-night;
58
+ color-map-marker-poi-night: @color-map-marker-poi-night;
59
+ color-map-marker-geofence-night: @color-map-marker-geofence-night;
60
+ color-map-marker-route-night: @color-map-marker-route-night;
61
+ color-map-marker-text-night: @color-map-marker-text-night;
62
+
56
63
  // Color - Highlight
57
64
  color-highlight-darkest: @color-highlight-darkest;
58
65
  color-highlight-darker: @color-highlight-darker;
package/lib/es/types.ts CHANGED
@@ -411,6 +411,8 @@ export interface ClusterLayerProps {
411
411
  maxZoom?: string | number;
412
412
  clusterTheme?: ClusterTheme;
413
413
  eventListenerMap: EventListenerMap;
414
+ clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
415
+ eps?: number;
414
416
  }
415
417
 
416
418
  export interface ClusterMapMarkerProps {
@@ -871,6 +873,8 @@ export interface MapProps {
871
873
  getApi?: Function;
872
874
  mapSettingsTooltip?: string | React.ReactNode;
873
875
  mapSettings?: React.ReactNode;
876
+ useWebGl?: boolean;
877
+ children?: any;
874
878
  }
875
879
 
876
880
  export interface MapBoundingBoxButtonProps {
@@ -983,6 +987,8 @@ export interface MarkerProps {
983
987
  export interface MarkerLayerProps {
984
988
  simpleTheme?: ClusterTheme;
985
989
  clusterDissolvable?: boolean;
990
+ clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
991
+ eps?: number;
986
992
  }
987
993
 
988
994
  export interface MenuItem {
@@ -1,3 +1,3 @@
1
1
  {
2
- "version": "0.16.2-beta.11"
2
+ "version": "0.16.2-beta.12"
3
3
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rio-cloud/rio-uikit",
3
- "version": "0.16.2-beta.11",
3
+ "version": "0.16.2-beta.12",
4
4
  "description": "The RIO UIKIT component library",
5
5
  "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
6
6
  "scripts": {
@@ -122,6 +122,12 @@ each(@colors-map-marker-map, {
122
122
  }
123
123
  })
124
124
 
125
+ each(@colors-map-marker-night-map, {
126
+ .border-color-@{key} {
127
+ border-color: @value !important;
128
+ }
129
+ })
130
+
125
131
  // rating-1
126
132
  // rating-2
127
133
  // rating-3
@@ -72,7 +72,6 @@ each(@colors-gray-map, {
72
72
  // map-marker-route
73
73
  each(@colors-map-marker-map, {
74
74
  .bg-@{key} {
75
- color: var(--color-white) !important;
76
75
  background-color: @value !important;
77
76
  }
78
77
  .hover-bg-@{key}:hover {
@@ -83,6 +82,15 @@ each(@colors-map-marker-map, {
83
82
  }
84
83
  })
85
84
 
85
+ each(@colors-map-marker-night-map, {
86
+ .bg-@{key} {
87
+ background-color: @value !important;
88
+ }
89
+ .hover-bg-@{key}:hover {
90
+ background-color: @value !important;
91
+ }
92
+ })
93
+
86
94
  // rating-1
87
95
  // rating-2
88
96
  // rating-3
@@ -55,7 +55,6 @@ each(@colors-gray-map, {
55
55
  // map-marker-poi
56
56
  // map-marker-geofence
57
57
  // map-marker-route
58
- .color-map-marker-text { color: var(--color-map-marker-text) !important }
59
58
  each(@colors-map-marker-map, {
60
59
  .text-color-@{key},
61
60
  .hover-text-color-@{key}:hover {
@@ -63,6 +62,16 @@ each(@colors-map-marker-map, {
63
62
  }
64
63
  })
65
64
 
65
+ each(@colors-map-marker-night-map, {
66
+ .text-color-@{key},
67
+ .hover-text-color-@{key}:hover {
68
+ color: @value !important;
69
+ }
70
+ })
71
+
72
+ // .text-color-map-marker-text { color: var(--color-map-marker-text) !important }
73
+ // .text-color-map-marker-text-night { color: var(--color-map-marker-text-night) !important }
74
+
66
75
  // rating-1
67
76
  // rating-2
68
77
  // rating-3
@@ -115,6 +115,7 @@
115
115
  // map-marker-geofence
116
116
  // map-marker-route
117
117
  @colors-map-marker-map: {
118
+ map-marker-text: var(--color-map-marker-text);
118
119
  map-marker-active: var(--color-map-marker-active);
119
120
  map-marker-asset: var(--color-map-marker-asset);
120
121
  map-marker-poi: var(--color-map-marker-poi);
@@ -122,6 +123,15 @@
122
123
  map-marker-route: var(--color-map-marker-route);
123
124
  }
124
125
 
126
+ @colors-map-marker-night-map: {
127
+ map-marker-text-night: var(--color-map-marker-text-night);
128
+ map-marker-active-night: var(--color-map-marker-active-night);
129
+ map-marker-asset-night: var(--color-map-marker-asset-night);
130
+ map-marker-poi-night: var(--color-map-marker-poi-night);
131
+ map-marker-geofence-night: var(--color-map-marker-geofence-night);
132
+ map-marker-route-night: var(--color-map-marker-route-night);
133
+ }
134
+
125
135
  // Color Map - Rating
126
136
  // rating-1
127
137
  // rating-2
@@ -33,6 +33,12 @@
33
33
  @color-map-marker-geofence-hsl: var(--color-map-marker-geofence-h), var(--color-map-marker-geofence-s), var(--color-map-marker-geofence-l);
34
34
  @color-map-marker-route-hsl: var(--color-map-marker-route-h), var(--color-map-marker-route-s), var(--color-map-marker-route-l);
35
35
  @color-map-marker-text-hsl: var(--color-map-marker-text-h), var(--color-map-marker-text-s), var(--color-map-marker-text-l);
36
+ @color-map-marker-active-night-hsl: var(--color-map-marker-active-night-h), var(--color-map-marker-active-night-s), var(--color-map-marker-active-night-l);
37
+ @color-map-marker-asset-night-hsl: var(--color-map-marker-asset-night-h), var(--color-map-marker-asset-night-s), var(--color-map-marker-asset-night-l);
38
+ @color-map-marker-poi-night-hsl: var(--color-map-marker-poi-night-h), var(--color-map-marker-poi-night-s), var(--color-map-marker-poi-night-l);
39
+ @color-map-marker-geofence-night-hsl: var(--color-map-marker-geofence-night-h), var(--color-map-marker-geofence-night-s), var(--color-map-marker-geofence-night-l);
40
+ @color-map-marker-route-night-hsl: var(--color-map-marker-route-night-h), var(--color-map-marker-route-night-s), var(--color-map-marker-route-night-l);
41
+ @color-map-marker-text-night-hsl: var(--color-map-marker-text-night-h), var(--color-map-marker-text-night-s), var(--color-map-marker-text-night-l);
36
42
  @color-highlight-darkest-hsl: var(--color-highlight-darkest-h), var(--color-highlight-darkest-s), var(--color-highlight-darkest-l);
37
43
  @color-highlight-darker-hsl: var(--color-highlight-darker-h), var(--color-highlight-darker-s), var(--color-highlight-darker-l);
38
44
  @color-highlight-dark-hsl: var(--color-highlight-dark-h), var(--color-highlight-dark-s), var(--color-highlight-dark-l);
@@ -48,6 +48,13 @@
48
48
  @dark-color-map-marker-route: @color-map-marker-route;
49
49
  @dark-color-map-marker-text: @color-map-marker-text;
50
50
 
51
+ @dark-color-map-marker-active-night: @color-map-marker-active-night;
52
+ @dark-color-map-marker-asset-night: @color-map-marker-asset-night;
53
+ @dark-color-map-marker-poi-night: @color-map-marker-poi-night;
54
+ @dark-color-map-marker-geofence-night: @color-map-marker-geofence-night;
55
+ @dark-color-map-marker-route-night: @color-map-marker-route-night;
56
+ @dark-color-map-marker-text-night: @color-map-marker-text-night;
57
+
51
58
  // Color - Rating // CURRENTLY NO DIFFERENCES TO THE LIGHT THEME
52
59
  @dark-color-rating-1: @color-rating-1;
53
60
  @dark-color-rating-2: @color-rating-2;
@@ -49,6 +49,13 @@
49
49
  // color-map-marker-route: @dark-color-map-marker-route;
50
50
  // color-map-marker-text: @dark-color-map-marker-text;
51
51
 
52
+ // color-map-marker-active-night: @dark-color-map-marker-active-night;
53
+ // color-map-marker-asset-night: @dark-color-map-marker-asset-night;
54
+ // color-map-marker-poi-night: @dark-color-map-marker-poi-night;
55
+ // color-map-marker-geofence-night: @dark-color-map-marker-geofence-night;
56
+ // color-map-marker-route-night: @dark-color-map-marker-route-night;
57
+ // color-map-marker-text-night: @dark-color-map-marker-text-night;
58
+
52
59
  // Color - Highlight
53
60
  color-highlight-darkest: @dark-color-highlight-darkest;
54
61
  color-highlight-darker: @dark-color-highlight-darker;
@@ -52,6 +52,13 @@
52
52
  @color-map-marker-route: #3690ae;
53
53
  @color-map-marker-text: #ffffff;
54
54
 
55
+ @color-map-marker-active-night: #79e703;
56
+ @color-map-marker-asset-night: #0e8a14;
57
+ @color-map-marker-poi-night: #d212be;
58
+ @color-map-marker-geofence-night: #d7b269;
59
+ @color-map-marker-route-night: #750666;
60
+ @color-map-marker-text-night: #f7ff13;
61
+
55
62
  // Color - Rating
56
63
  @color-rating-1: #d90000;
57
64
  @color-rating-2: #ff8e3c;
@@ -53,6 +53,13 @@
53
53
  color-map-marker-route: @color-map-marker-route;
54
54
  color-map-marker-text: @color-map-marker-text;
55
55
 
56
+ color-map-marker-active-night: @color-map-marker-active-night;
57
+ color-map-marker-asset-night: @color-map-marker-asset-night;
58
+ color-map-marker-poi-night: @color-map-marker-poi-night;
59
+ color-map-marker-geofence-night: @color-map-marker-geofence-night;
60
+ color-map-marker-route-night: @color-map-marker-route-night;
61
+ color-map-marker-text-night: @color-map-marker-text-night;
62
+
56
63
  // Color - Highlight
57
64
  color-highlight-darkest: @color-highlight-darkest;
58
65
  color-highlight-darker: @color-highlight-darker;
package/types.ts CHANGED
@@ -411,6 +411,8 @@ export interface ClusterLayerProps {
411
411
  maxZoom?: string | number;
412
412
  clusterTheme?: ClusterTheme;
413
413
  eventListenerMap: EventListenerMap;
414
+ clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
415
+ eps?: number;
414
416
  }
415
417
 
416
418
  export interface ClusterMapMarkerProps {
@@ -871,6 +873,8 @@ export interface MapProps {
871
873
  getApi?: Function;
872
874
  mapSettingsTooltip?: string | React.ReactNode;
873
875
  mapSettings?: React.ReactNode;
876
+ useWebGl?: boolean;
877
+ children?: any;
874
878
  }
875
879
 
876
880
  export interface MapBoundingBoxButtonProps {
@@ -983,6 +987,8 @@ export interface MarkerProps {
983
987
  export interface MarkerLayerProps {
984
988
  simpleTheme?: ClusterTheme;
985
989
  clusterDissolvable?: boolean;
990
+ clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
991
+ eps?: number;
986
992
  }
987
993
 
988
994
  export interface MenuItem {
package/version.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "version": "0.16.2-beta.11"
2
+ "version": "0.16.2-beta.12"
3
3
  }