@rio-cloud/rio-uikit 0.16.2-beta.8 → 0.16.2

package/components/map/components/Map.js

@@ -10,6 +10,7 @@ import isFunction from 'lodash/fp/isFunction';
 import map from 'lodash/fp/map';
 import isEmpty from 'lodash/fp/isEmpty';
 import throttle from 'lodash/fp/throttle';
+import cloneDeep from 'lodash/fp/cloneDeep';
 import mapProps from '../utils/proptypes';
 import addEventListener from '../../../utils/addEventListener';
 import '../herePolyfill';
@@ -28,7 +29,7 @@ import { getDefaultBaseLayer } from './features/layers/baselayers/useBaseLayer';
 import { addEventListenerMap, removeEventListenerMap } from '../utils/eventHandling';
 import { MapContext, MapSettingsContext } from './context';
 import { createUtils, getPPI } from './mapUtils';
-import { useDarkMode } from '../../../hooks/useDarkMode';
+import useDarkMode from '../../../hooks/useDarkMode';
 export var NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
 var RESIZE_THROTTLE = 1100; // 100 more than the ApplicationLayout handler
 
@@ -59,14 +60,14 @@ var getBounds = function getBounds(boundingBox) {
     right = boundingBox.right;
   return new H.geo.Rect(top, left, bottom, right);
 };
-var getLayer = function getLayer(api, layer, language, useWebGL) {
+var getLayer = function getLayer(api, layer, language, enableWebGL) {
   switch (layer) {
     case MAP_LAYER_TRAFFIC:
       return /*#__PURE__*/React.createElement(TrafficLayer, {
         api: api,
         language: language,
         key: layer,
-        useWebGL: useWebGL
+        useWebGL: enableWebGL
       });
     case MAP_LAYER_INCIDENTS:
       return /*#__PURE__*/React.createElement(IncidentsLayer, {
@@ -79,17 +80,17 @@ var getLayer = function getLayer(api, layer, language, useWebGL) {
         api: api,
         language: language,
         key: layer,
-        useWebGL: useWebGL
+        useWebGL: enableWebGL
       });
     default:
       null;
   }
 };
-var getBaseLayer = function getBaseLayer(api, baseLayer, language, useWebGL, darkMode) {
+var getBaseLayer = function getBaseLayer(api, baseLayer, language, enableWebGL, darkMode) {
   switch (baseLayer) {
     case MAP_TYPE_DEFAULT:
       {
-        return !darkMode && useWebGL ? /*#__PURE__*/React.createElement(DefaultVectorLayer, {
+        return !darkMode && enableWebGL ? /*#__PURE__*/React.createElement(DefaultVectorLayer, {
           api: api,
           language: language,
           key: baseLayer
@@ -173,7 +174,8 @@ var Map = function Map(props) {
     onZoomOut = props.onZoomOut,
     mapSettingsTooltip = props.mapSettingsTooltip,
     mapSettings = props.mapSettings,
-    useWebGL = props.useWebGL,
+    enableWebGL = props.enableWebGL,
+    enableDevicePixelRatio = props.enableDevicePixelRatio,
     darkMode = props.darkMode;
   var mapRef = useRef(null);
   var _useState = useState(false),
@@ -196,33 +198,22 @@ var Map = function Map(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     showCluster = _useState10[0],
     setShowCluster = _useState10[1];
-  var isDarkMode = useDarkMode();
-  useEffect(function () {
-    // Toggle night map only if current map type is default
-    if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {
-      setBaseLayer(MAP_TYPE_NIGHT);
-      onMapTypeChange(MAP_TYPE_NIGHT);
-    }
-    // Toggle back to default map only if current map type is night
-    else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {
-      setBaseLayer(MAP_TYPE_DEFAULT);
-      onMapTypeChange(MAP_TYPE_DEFAULT);
-    }
-  }, [isDarkMode]);
-  var devicePixelRatio = window.devicePixelRatio || 1;
+  var devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
   useEffect(function () {
     console.debug('initialize here map');
     var bounds = boundingBox && getBounds(boundingBox);
     var platform = getPlatform(credentials);
     var defaultLayers = platform.createDefaultLayers();
-    var defaultLayer = getDefaultBaseLayer(defaultLayers, baseLayer, useWebGL);
+    var defaultLayer = getDefaultBaseLayer(defaultLayers, baseLayer, enableWebGL);
 
     // Instantiate (and display) a map object:
     var mapConfig = {
       zoom: zoom,
       center: center,
       bounds: bounds,
-      pixelRatio: devicePixelRatio
+      pixelRatio: devicePixelRatio,
+      // need to be set for better performence of legacy map
+      engineType: enableWebGL ? undefined : H.map.render.RenderEngine.EngineType.P2D
     };
     var hereMap = new H.Map(mapRef.current, defaultLayer, mapConfig);
 
@@ -237,10 +228,12 @@ var Map = function Map(props) {
     var hereMapEvents = !disableMapEvents && new H.mapevents.MapEvents(hereMap);
     var hereBehavior = !(disableMapEvents || disableBehavior) && new H.mapevents.Behavior(hereMapEvents);
     addEventListenerMap(hereMap, eventListenerMap, hereMap);
+
+    // The api will be passed to services when using a render function.
+    // This allows the service to access the map internals
     setApi({
       credentials: credentials,
       defaultLayers: defaultLayers,
-      group: hereMap,
       map: hereMap,
       mapEvents: hereMapEvents,
       behavior: hereBehavior,
@@ -248,6 +241,7 @@ var Map = function Map(props) {
       ui: getHereUi(hereMap, defaultLayers, showScaleBar),
       utils: createUtils(hereMap),
       settings: {
+        enableWebGL: enableWebGL,
         baseLayer: baseLayer,
         mapLayer: activeLayers,
         showCluster: showCluster
@@ -268,7 +262,18 @@ var Map = function Map(props) {
         hereMap.dispose();
       }
     };
-  }, [useWebGL]);
+  }, [enableWebGL, enableDevicePixelRatio]);
+  var isDarkMode = useDarkMode();
+  useEffect(function () {
+    // Toggle night map only if current map type is default
+    if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {
+      handleMapTypeChange(MAP_TYPE_NIGHT);
+    }
+    // Toggle back to default map only if current map type is night
+    else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {
+      handleMapTypeChange(MAP_TYPE_DEFAULT);
+    }
+  }, [isDarkMode]);
 
   // Update BoundingBox from outside
   useEffect(function () {
@@ -307,7 +312,7 @@ var Map = function Map(props) {
 
   // Update MapType from outside
   useEffect(function () {
-    return setBaseLayer(mapType);
+    return handleMapTypeChange(mapType);
   }, [mapType]);
 
   // Update MapLayer from outside
@@ -322,11 +327,13 @@ var Map = function Map(props) {
   var handleMapTypeChange = function handleMapTypeChange(newMapType) {
     setBaseLayer(newMapType);
     onMapTypeChange(newMapType, mapType);
-    setApi(_objectSpread(_objectSpread({}, api), {}, {
-      settings: _objectSpread(_objectSpread({}, api.settings), {}, {
-        baseLayer: newMapType
-      })
-    }));
+    if (api) {
+      setApi(_objectSpread(_objectSpread({}, api), {}, {
+        settings: _objectSpread(_objectSpread({}, api.settings), {}, {
+          baseLayer: newMapType
+        })
+      }));
+    }
   };
   var handleMapLayerChange = function handleMapLayerChange(layer) {
     var removeLayer = function removeLayer(layerToRemove) {
@@ -372,7 +379,9 @@ var Map = function Map(props) {
     style: style,
     ref: mapRef
   }, isMapInitialized && /*#__PURE__*/React.createElement(MapContext.Provider, {
-    value: api
+    value: {
+      api: api
+    }
   }, !hideZoomButtons && /*#__PURE__*/React.createElement(ZoomButtons, {
     onZoomIn: handleZoomIn,
     onZoomOut: handleZoomOut
@@ -388,8 +397,8 @@ var Map = function Map(props) {
       onShowClusterChange: handleShowClusterChange,
       mapSettingsTooltip: mapSettingsTooltip
     }
-  }, mapSettings), getBaseLayer(api, baseLayer, language, useWebGL, darkMode), map(function (layer) {
-    return getLayer(api, layer, language, useWebGL);
+  }, mapSettings), getBaseLayer(api, baseLayer, language, enableWebGL, darkMode), map(function (layer) {
+    return getLayer(api, layer, language, enableWebGL);
   }, activeLayers), children && /*#__PURE__*/React.createElement("div", {
     className: 'MapElements'
   }, isFunction(children) ? children(api) : enrichChildrenWithApi(children, api))));
@@ -417,7 +426,8 @@ Map.defaultProps = {
   onShowClusterChange: function onShowClusterChange() {},
   onZoomIn: function onZoomIn() {},
   onZoomOut: function onZoomOut() {},
-  useWebGL: false,
+  enableWebGL: true,
+  enableDevicePixelRatio: true,
   darkMode: false
 };
 Map.propTypes = {
@@ -446,7 +456,8 @@ Map.propTypes = {
   getApi: PropTypes.func,
   mapSettingsTooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   mapSettings: PropTypes.node,
-  useWebGL: PropTypes.bool,
+  enableWebGL: PropTypes.bool,
+  enableDevicePixelRatio: PropTypes.bool,
   darkMode: PropTypes.bool
 };
 export default Map;

package/components/map/components/features/ContextMenu.js

@@ -80,7 +80,7 @@ var ContextMenu = function ContextMenu(props) {
     contextMenuEvent = props.contextMenuEvent,
     targetPosition = props.targetPosition;
   var mapContext = useContext(MapContext);
-  var _ref = api || mapContext,
+  var _ref = api || mapContext.api,
     hereMap = _ref.map;
 
   // Use a ref to store the target position used when a map object was clicked with a fixed

package/components/map/components/features/Route.js

@@ -15,7 +15,6 @@ export var MISSING_POSITIONS_EXCEPTION_MSG = 'Route requires a minimum of 1 posi
 export var TO_LESS_LINE_WIDTH_EXCEPTION_MSG = 'If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth';
 var LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
 var LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
-var BORDER_STROKE_COLOR = 'rgba(255, 255, 255, 1)';
 var BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
 var defaultStyle = {
   width: 5,
@@ -24,14 +23,6 @@ var defaultStyle = {
   borderColor: 'rgba(54, 144, 174, 1)',
   isBorderIncludedInWidth: false
 };
-var defaultArrowStyle = {
-  lineWidth: 10,
-  fillColor: 'rgba(42, 55, 64, 1)',
-  strokeColor: BORDER_STROKE_COLOR,
-  lineDash: [0, 6],
-  lineTailCap: 'arrow-tail',
-  lineHeadCap: 'arrow-head'
-};
 var alternativeRouteStyle = _objectSpread(_objectSpread({}, defaultStyle), {}, {
   color: 'rgb(218,253,255)'
 });
@@ -144,7 +135,7 @@ var Route = function Route(props) {
 };
 Route.defaultProps = {
   hasArrows: true,
-  arrowStyle: defaultArrowStyle,
+  arrowStyle: {},
   isReduced: false,
   isRouteAlternative: false,
   markers: []

package/components/map/components/features/basics/Circle.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable no-undef */
-import { useContext, useState, useEffect } from 'react';
+import { useContext, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import mapProps from '../../../utils/proptypes';
 import { MapContext } from '../../context';
@@ -13,25 +13,30 @@ var Circle = function Circle(_ref) {
     precision = _ref$precision === void 0 ? 60 : _ref$precision,
     style = _ref.style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     circle = _useState2[0],
     setCircle = _useState2[1];
+
+  // Create a new circle and check for changes on the map itself.
+  // The map instance may change due to rendering changes like webgl vs raster.
+  // In this case, add the circle to the new map instance otherwise it will be gone.
   useEffect(function () {
     var newCircle = new H.map.Circle(position, radius, {
       style: style,
       precision: parseFloat(precision)
     });
     setCircle(newCircle);
-    context.group.addObject(newCircle);
+    api.map.addObject(newCircle);
     return function () {
-      if (context.group.getObjects().includes(newCircle)) {
-        context.group.removeObject(newCircle);
+      if (api.map.getObjects().includes(newCircle)) {
+        api.map.removeObject(newCircle);
       }
       newCircle.dispose();
     };
-  }, []);
+  }, [api.map]);
   useUpdateProp(circle, 'setCenter', position);
   useUpdateProp(circle, 'setStyle', style);
   useUpdateProp(circle, 'setRadius', radius);

package/components/map/components/features/basics/MapLayerGroup.js

@@ -12,6 +12,7 @@ var MapLayerGroup = function MapLayerGroup(_ref) {
     maxZoom = _ref.maxZoom,
     isVisible = _ref.isVisible;
   var context = useContext(MapContext);
+  var api = context.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     group = _useState2[0],
@@ -26,19 +27,21 @@ var MapLayerGroup = function MapLayerGroup(_ref) {
       max: parseFloat(maxZoom)
     });
     newGroup.setVisibility(isVisible);
-    context.group.addObject(newGroup);
+    api.map.addObject(newGroup);
     setGroup(newGroup);
     var newChildApi = _objectSpread(_objectSpread({}, context), {}, {
-      group: newGroup
+      api: _objectSpread(_objectSpread({}, api), {}, {
+        group: newGroup
+      })
     });
     setChildApi(newChildApi);
     return function () {
-      if (context.group.getObjects().includes(newGroup)) {
-        context.group.removeObject(newGroup);
+      if (api.map.getObjects().includes(newGroup)) {
+        api.map.removeObject(newGroup);
       }
       newGroup.dispose();
     };
-  }, []);
+  }, [api.map]);
   useEffect(function () {
     if (group) {
       group.setVisibility(isVisible);

package/components/map/components/features/basics/Polygon.js

@@ -21,7 +21,8 @@ var Polygon = function Polygon(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? H.map.SpatialStyle.DEFAULT_STYLE : _ref$style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     polygon = _useState2[0],
@@ -30,15 +31,15 @@ var Polygon = function Polygon(_ref) {
     var newPolygon = new H.map.Polygon(createGeometry(points), {
       style: style
     });
-    context.group.addObject(newPolygon);
+    api.map.addObject(newPolygon);
     setPolygon(newPolygon);
     return function () {
-      if (context.group.getObjects().includes(newPolygon)) {
-        context.group.removeObject(newPolygon);
+      if (api.map.getObjects().includes(newPolygon)) {
+        api.map.removeObject(newPolygon);
       }
       newPolygon.dispose();
     };
-  }, []);
+  }, [api.map]);
   useEffect(function () {
     if (polygon) {
       polygon.setGeometry(createGeometry(points));

package/components/map/components/features/basics/Polyline.js

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /* eslint-disable no-undef */
 import { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
@@ -15,7 +18,8 @@ var Polyline = function Polyline(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? H.map.SpatialStyle.DEFAULT_STYLE : _ref$style,
     eventListenerMap = _ref.eventListenerMap;
-  var context = useContext(MapContext);
+  var _useContext = useContext(MapContext),
+    api = _useContext.api;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     polyline = _useState2[0],
@@ -32,18 +36,39 @@ var Polyline = function Polyline(_ref) {
       style: style
     });
     if (hasArrows) {
-      // Create a patterned polyline:
-
-      // Non-legacy version:
-      var arrowLineStyle = new H.map.SpatialStyle({
-        width: 5,
-        lineWidth: 10,
-        strokeColor: 'rgba(255, 255, 255, 0)'
-      });
-      var routeArrows = new H.map.Polyline(geometry, {
-        style: arrowLineStyle
-      });
-      routeArrows.setArrows(arrowStyle);
+      var routeArrows;
+      if (api.settings.enableWebGL) {
+        // Create a patterned polyline
+        var arrowLineStyle = new H.map.SpatialStyle(_objectSpread(_objectSpread({}, arrowStyle), {}, {
+          lineWidth: 10,
+          strokeColor: 'rgba(0, 0, 0, 0.8)',
+          lineDash: [0, 3],
+          lineDashOffset: 1.6,
+          lineTailCap: 'arrow-tail',
+          lineHeadCap: 'arrow-head'
+        }));
+        routeArrows = new H.map.Polyline(geometry, {
+          style: arrowLineStyle
+        });
+      } else {
+        // Non WebGL way - Create a patterned polyline
+        var defaultArrowStyle = {
+          lineWidth: 2,
+          fillColor: 'rgba(42, 55, 64, 1)',
+          strokeColor: 'rgba(0, 0, 0, 0.8)',
+          lineDash: [0, 4],
+          lineTailCap: 'arrow-tail',
+          lineHeadCap: 'arrow-head'
+        };
+        var _arrowLineStyle = new H.map.SpatialStyle({
+          lineWidth: 10,
+          strokeColor: 'rgba(255, 255, 255, 0)'
+        });
+        routeArrows = new H.map.Polyline(geometry, {
+          style: _arrowLineStyle,
+          arrows: defaultArrowStyle
+        });
+      }
 
       // create a group that represents the route line and contains
       // outline and the pattern
@@ -51,43 +76,20 @@ var Polyline = function Polyline(_ref) {
     } else {
       lineGroup.addObjects([line]);
     }
-    context.group.addObject(lineGroup);
+    api.map.addObject(lineGroup);
     setPolyline(lineGroup);
     return function () {
-      // cleanup
-      //console.log('cleanup polyline');
-
       removeEventListenerMap(lineGroup);
       lineGroup.forEach(function (singleLine) {
         lineGroup.removeObject(singleLine);
         singleLine.dispose();
       });
-      if (context.group.getObjects().includes(lineGroup)) {
-        context.group.removeObject(lineGroup);
+      if (api.map.getObjects().includes(lineGroup)) {
+        api.map.removeObject(lineGroup);
       }
       lineGroup.dispose();
     };
-  }, [geometry, style, hasArrows, arrowStyle]);
-
-  /*useEffect(() => {
-      if (polyline) {
-          polyline.forEach((line, index) => {
-              if (index === 0) {
-                  line.setStyle(style);
-              } else {
-                  line.setStyle(arrowStyle);
-              }
-          });
-      }
-  }, [style, arrowStyle]);*/
-
-  /*useEffect(() => {
-      if (polyline) {
-          polyline.forEach(line => line.setGeometry(geometry));
-      }
-  }, [geometry]);*/
-
-  //useUpdateProp(polyline, 'setStyle', style);
+  }, [api.map, geometry, style, hasArrows, arrowStyle]);
   useUpdateEventListenerMap(polyline, eventListenerMap);
   return null;
 };

package/components/map/components/features/basics/marker/DomMarker.js

@@ -10,6 +10,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import mapProps from '../../../../utils/proptypes';
 import { addEventListenerMap, removeEventListenerMap, checkAndUpdateEventListenerMap } from '../../../../utils/eventHandling';
+
+// Should be deprecated...
+// Here Documentation:
+//     It should be only used where small numbers of markers with dynamic style and/or scripted icons are to be displayed 
+//     on the map (for example animated interactive SVG). Otherwise a H.map.Marker should be preferred for performance reasons.
+//
 var DomMarker = /*#__PURE__*/function (_React$Component) {
   _inherits(DomMarker, _React$Component);
   var _super = _createSuper(DomMarker);
@@ -21,7 +27,7 @@ var DomMarker = /*#__PURE__*/function (_React$Component) {
     _this.marker = new H.map.DomMarker(_this.convertPosition(props.position), {
       icon: icon
     });
-    context.api.group.addObject(_this.marker);
+    context.api.map.addObject(_this.marker);
     addEventListenerMap(_this.marker, props.eventListenerMap, _this.context.api.map);
     return _this;
   }
@@ -48,8 +54,8 @@ var DomMarker = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       removeEventListenerMap(this.marker);
-      if (this.context.api.group.includes(this.marker)) {
-        this.context.api.group.removeObject(this.marker);
+      if (this.context.api.map.includes(this.marker)) {
+        this.context.api.map.removeObject(this.marker);
       }
       this.marker.dispose();
     }