@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

package/lib/es/components/map/components/features/layers/MapLayerGroup.d.ts

@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from 'react';
+export type MapLayerGroupProps = {
+    isVisible?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+};
+declare const MapLayerGroup: (props: PropsWithChildren<MapLayerGroupProps>) => import("react/jsx-runtime").JSX.Element;
+export default MapLayerGroup;

package/lib/es/components/map/components/features/layers/MapLayerGroup.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MapContext_1 = require("../../MapContext");
+// TODO: apparently it is not used
+// Consider Using a Group Layer: If you have additional map objects or want to
+// control visibility/z-index of the cluster layer separately, using a group layer can be beneficial.
+const MapLayerGroup = (props) => {
+    const { minZoom = Number.NEGATIVE_INFINITY, maxZoom = Number.POSITIVE_INFINITY, isVisible = true, children, } = props;
+    const context = (0, react_1.useContext)(MapContext_1.MapContext);
+    const api = context.api;
+    const [group, setGroup] = (0, react_1.useState)();
+    const [childApi, setChildApi] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const newGroup = new H.map.Group({
+            min: minZoom,
+            max: maxZoom,
+        });
+        newGroup.setVisibility(isVisible);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newGroup);
+        setGroup(newGroup);
+        setChildApi(Object.assign(Object.assign({}, context), { api: Object.assign(Object.assign({}, api), { group: newGroup }) }));
+        return () => {
+            var _a, _b;
+            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newGroup)) {
+                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newGroup);
+            }
+            newGroup.dispose();
+        };
+    }, [api.map]);
+    (0, react_1.useEffect)(() => {
+        if (group) {
+            group.setVisibility(isVisible);
+        }
+    }, [isVisible]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapLayerGroup' }, { children: childApi && (0, jsx_runtime_1.jsx)(MapContext_1.MapContext.Provider, Object.assign({ value: childApi }, { children: children })) })));
+};
+exports.default = MapLayerGroup;

package/lib/es/components/map/components/features/layers/MapOverlayLayers.d.ts

@@ -0,0 +1,5 @@
+export type MapOverlayLayersProps = {
+    layers: string[];
+};
+declare const MapOverlayLayers: (props: MapOverlayLayersProps) => import("react/jsx-runtime").JSX.Element;
+export default MapOverlayLayers;

package/lib/es/components/map/components/features/layers/MapOverlayLayers.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
+const constants_1 = require("../../constants");
+const IncidentsLayer_1 = tslib_1.__importDefault(require("./overlayLayers/IncidentsLayer"));
+const RoadRestrictionLayer_1 = tslib_1.__importDefault(require("./overlayLayers/RoadRestrictionLayer"));
+const TrafficLayer_1 = tslib_1.__importDefault(require("./overlayLayers/TrafficLayer"));
+const MapOverlayLayers = (props) => {
+    const { layers } = props;
+    const layersToRender = (0, map_1.default)(layer => {
+        switch (layer) {
+            case constants_1.MAP_LAYER_TRAFFIC:
+                return (0, jsx_runtime_1.jsx)(TrafficLayer_1.default, { id: constants_1.MAP_LAYER_TRAFFIC }, layer);
+            case constants_1.MAP_LAYER_INCIDENTS:
+                return (0, jsx_runtime_1.jsx)(IncidentsLayer_1.default, {}, layer);
+            case constants_1.MAP_LAYER_ROAD_RESTRICTIONS:
+                return (0, jsx_runtime_1.jsx)(RoadRestrictionLayer_1.default, { id: constants_1.MAP_LAYER_ROAD_RESTRICTIONS }, layer);
+            default:
+                return null;
+        }
+    }, layers);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: layersToRender });
+};
+exports.default = MapOverlayLayers;

package/lib/es/components/map/components/features/layers/MarkerLayer.d.ts

@@ -1,14 +1,10 @@
+import React from 'react';
+import ClusterLayer, { type ClusterTheme } from './clustering/ClusterLayer';
+export type MarkerLayerProps = React.ComponentProps<typeof ClusterLayer> & {
+    simpleTheme?: ClusterTheme;
+    clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
+};
+declare const MarkerLayer: (props: MarkerLayerProps) => import("react/jsx-runtime").JSX.Element;
 export default MarkerLayer;
-declare function MarkerLayer(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MarkerLayer {
-    namespace propTypes {
-        const simpleTheme: PropTypes.Requireable<PropTypes.InferProps<{
-            getNoisePresentation: PropTypes.Validator<(...args: any[]) => any>;
-            getClusterPresentation: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-        const clusterDissolvable: PropTypes.Requireable<boolean>;
-        const clusterStrategy: PropTypes.Requireable<string>;
-        const eps: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/map/components/features/layers/MarkerLayer.js

@@ -2,28 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const getOr_1 = tslib_1.__importDefault(require("lodash/fp/getOr"));
-const proptypes_1 = tslib_1.__importDefault(require("../../../utils/proptypes"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const ClusterLayer_1 = tslib_1.__importDefault(require("./clustering/ClusterLayer"));
 const clustering_1 = require("../../../utils/clustering");
-const context_1 = require("../../context");
+const MapContext_1 = require("../../MapContext");
 /*
  * Not very different to the SimpleClusterLayer, but with a different intention.
  */
-const MarkerLayer = props => {
-    const { api } = (0, react_1.useContext)(context_1.MapContext);
+const MarkerLayer = (props) => {
+    const mapContext = (0, MapContext_1.useMapContext)();
     const { simpleTheme, clusterDissolvable = true } = props, rest = tslib_1.__rest(props, ["simpleTheme", "clusterDissolvable"]);
     // Norbert: Not an ideal solution
-    const showCluster = !clusterDissolvable || (0, getOr_1.default)(true, 'settings.showCluster', api);
+    const showCluster = !clusterDissolvable || mapContext.showCluster;
     const newProps = Object.assign({ clusterTheme: simpleTheme && (0, clustering_1.wrapSimpleTheme)(simpleTheme) }, rest);
     return (0, jsx_runtime_1.jsx)(ClusterLayer_1.default, Object.assign({}, newProps, { minWeight: showCluster ? undefined : 1000000000 }));
 };
-MarkerLayer.propTypes = {
-    simpleTheme: proptypes_1.default.clusterTheme,
-    clusterDissolvable: prop_types_1.default.bool,
-    clusterStrategy: prop_types_1.default.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
-    eps: prop_types_1.default.number,
-};
 exports.default = MarkerLayer;

package/lib/es/components/map/components/features/layers/clustering/ClusterLayer.d.ts

@@ -1,29 +1,22 @@
+/// <reference types="heremaps" />
+import type { EventListenerMap } from '../../../../utils/eventHandling';
+export type ClusterStrategy = 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+export type ClusterTheme = H.clustering.ITheme;
+export type Position = {
+    lat: number;
+    lng: number;
+};
+export type DataConverter = (data: Position, index: number) => H.clustering.DataPoint;
+export type ClusterLayerProps = {
+    data: object[];
+    dataConverter?: DataConverter;
+    minWeight?: string | number;
+    minZoom?: string | number;
+    maxZoom?: string | number;
+    clusterTheme?: ClusterTheme | undefined;
+    eventListenerMap?: EventListenerMap;
+    clusterStrategy?: ClusterStrategy;
+    eps?: number;
+};
+declare const ClusterLayer: (props: ClusterLayerProps) => null;
 export default ClusterLayer;
-declare function ClusterLayer({ data, dataConverter, minWeight, minZoom, maxZoom, clusterTheme, eventListenerMap, clusterStrategy, eps, }: {
-    data: any;
-    dataConverter: any;
-    minWeight: any;
-    minZoom: any;
-    maxZoom: any;
-    clusterTheme?: any;
-    eventListenerMap: any;
-    clusterStrategy: any;
-    eps?: number | undefined;
-}): null;
-declare namespace ClusterLayer {
-    namespace propTpyes {
-        const data: PropTypes.Validator<any[]>;
-        const dataConverter: PropTypes.Requireable<(...args: any[]) => any>;
-        const minWeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const minZoom: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const maxZoom: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const clusterTheme: PropTypes.Requireable<PropTypes.InferProps<{
-            getNoisePresentation: PropTypes.Validator<(...args: any[]) => any>;
-            getClusterPresentation: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-        const eventListenerMap: PropTypes.Requireable<object>;
-        const clusterStrategy: PropTypes.Requireable<string>;
-        const eps: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/es/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -1,16 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-/* eslint-disable no-undef */
 const react_1 = require("react");
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const proptypes_1 = tslib_1.__importDefault(require("../../../../utils/proptypes"));
-const context_1 = require("../../../context");
+// import ReactDomServer from 'react-dom/server';
+const MapContext_1 = require("../../../MapContext");
 const hooks_1 = require("../../../../utils/hooks");
-const DEFAULT_DATA_CONVERTER = d => new H.clustering.DataPoint(d.lat, d.lng, 1, d);
-const convertData = (data, converterFunc) => data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
+const DEFAULT_DATA_CONVERTER = (pos, index) => new H.clustering.DataPoint(pos.lat, pos.lng, 1, pos);
+const convertData = (data, converterFunc = DEFAULT_DATA_CONVERTER) => data.map((value, index) => converterFunc(value, index));
 const DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
-const getClusterStrategy = strategy => {
+const getClusterStrategy = (strategy) => {
     switch (strategy) {
         case 'GRID':
             return H.clustering.Provider.Strategy.GRID;
@@ -20,28 +17,91 @@ const getClusterStrategy = strategy => {
             return H.clustering.Provider.Strategy.FASTGRID;
     }
 };
-const ClusterLayer = ({ data, dataConverter, minWeight, minZoom, maxZoom, clusterTheme = DEFAULT_CLUSTER_THEME, eventListenerMap, clusterStrategy, eps = 100, }) => {
-    const { api } = (0, react_1.useContext)(context_1.MapContext);
+// TODO: replace some cluster marker like for POIs with SVG MarkerIcons instead of rendering DomMarker
+// to increase rendering performance, especially, when rendering hundreds of marker like for charging stations
+// const noiseSvg =
+//     '<svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px"><circle cx="5px" cy="5px" r="5px" fill="green" /></svg>';
+// Create an icon to represent the noise points
+// Note that same icon will be used for all noise points
+// const noiseIcon = new H.map.Icon(noiseSvg, {
+//     size: { w: 20, h: 20 },
+//     anchor: { x: 10, y: 10 },
+// });
+// SVG template to use for cluster icons
+// const clusterSvgTemplate = `<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer">
+//     <circle cx="20" cy="20" r="19.5" fill="#B23672" stroke="#B23672"/>
+//     <g transform="translate(20,24.6)">
+//         <text fill="white" font-family="'Source Sans Pro', Helvetica, sans-serif" font-size="15" font-weight="500" text-anchor="middle">
+//             {text}
+//         </text>
+//     </g>
+// </svg>`;
+const ClusterLayer = (props) => {
+    const { data, dataConverter, minWeight, minZoom, maxZoom, clusterTheme = DEFAULT_CLUSTER_THEME, eventListenerMap, clusterStrategy, eps = 100, } = props;
+    const { api } = (0, MapContext_1.useMapContext)();
     const [provider, setProvider] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
-        const newProviderOptions = {
+        // const reactIcon = new H.map.DomIcon(
+        //     ReactDomServer.renderToStaticMarkup(
+        //         <div className='bg-info padding-x-5 padding-y-2 border rounded shadow-default'>test</div>
+        //     )
+        // );
+        var _a;
+        const clusterProviderOptions = {
             clusteringOptions: {
                 strategy: getClusterStrategy(clusterStrategy),
                 eps,
-                minWeight: minWeight ? parseInt(minWeight, 10) : 2,
+                minWeight: minWeight ? Number.parseInt(minWeight, 10) : 2,
             },
-            min: minZoom ? parseInt(minZoom, 10) : 0,
-            max: maxZoom ? parseInt(maxZoom, 10) : 22,
-            // Note: set cluster theme every time the provider changes but leave it out of the hook dependency
-            // to avoid recreation of the provider and it's items
+            min: minZoom ? Number.parseInt(minZoom, 10) : 0,
+            max: maxZoom ? Number.parseInt(maxZoom, 10) : 22,
             theme: clusterTheme,
+            // theme: {
+            //     getClusterPresentation: cluster => {
+            //         // Use cluster weight to change the icon size
+            //         const weight = cluster.getWeight();
+            //         // Calculate circle size
+            //         const radius = weight; // * 5;
+            //         const diameter = radius * 2;
+            //         // Replace variables in the icon template
+            //         const svgString = clusterSvgTemplate.replace(/\{text\}/g, String(weight));
+            //         // .replace(/\{diameter\}/g, String(diameter));
+            //         // Create an icon
+            //         // Note that we create a different icon depending from the weight of the cluster
+            //         const clusterIcon = new H.map.Icon(svgString);
+            //         // Create a marker for the cluster
+            //         const clusterMarker = new H.map.Marker(cluster.getPosition(), {
+            //             icon: clusterIcon,
+            //             // Set min/max zoom with values from the cluster, otherwise
+            //             // clusters will be shown at all zoom levels
+            //             min: cluster.getMinZoom(),
+            //             max: cluster.getMaxZoom(),
+            //         });
+            //         // Bind cluster data to the marker
+            //         clusterMarker.setData(cluster);
+            //         return clusterMarker;
+            //     },
+            //     getNoisePresentation: noisePoint => {
+            //         // Create a marker for noise points:
+            //         const noiseMarker = new H.map.DomMarker(noisePoint.getPosition(), {
+            //             // icon: noiseIcon,
+            //             icon: reactIcon,
+            //             // Use min zoom from a noise point to show it correctly at certain zoom levels
+            //             min: noisePoint.getMinZoom(),
+            //         });
+            //         // Bind noise point data to the marker:
+            //         noiseMarker.setData(noisePoint);
+            //         return noiseMarker;
+            //     },
+            // },
         };
-        const newProvider = new H.clustering.Provider(convertData(data, dataConverter), newProviderOptions);
+        const newProvider = new H.clustering.Provider(convertData(data, dataConverter), clusterProviderOptions);
         const objectLayer = new H.map.layer.ObjectLayer(newProvider);
-        api.map.addLayer(objectLayer);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addLayer(objectLayer);
         setProvider(newProvider);
         return () => {
-            api.map.removeLayer(objectLayer);
+            var _a;
+            (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(objectLayer);
             objectLayer.dispose();
             newProvider.dispose();
         };
@@ -53,18 +113,7 @@ const ClusterLayer = ({ data, dataConverter, minWeight, minZoom, maxZoom, cluste
         }
     }, [data, dataConverter]);
     (0, hooks_1.useUpdateProp)(provider, 'setTheme', clusterTheme);
-    (0, hooks_1.useUpdateEventListenerMap)(provider, eventListenerMap, api.map);
+    (0, hooks_1.useUpdateEventListenerMap)(provider, eventListenerMap);
     return null;
 };
-ClusterLayer.propTpyes = {
-    data: prop_types_1.default.array.isRequired,
-    dataConverter: prop_types_1.default.func,
-    minWeight: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    minZoom: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    maxZoom: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    clusterTheme: proptypes_1.default.clusterTheme,
-    eventListenerMap: prop_types_1.default.object,
-    clusterStrategy: prop_types_1.default.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
-    eps: prop_types_1.default.number,
-};
 exports.default = ClusterLayer;

package/lib/es/components/map/components/features/layers/clustering/SimpleClusterLayer.d.ts

@@ -1,10 +1,6 @@
+import { type ClusterTheme, type ClusterLayerProps } from './ClusterLayer';
+export type SimpleClusterLayerProps = Omit<ClusterLayerProps, 'clusterTheme'> & {
+    simpleTheme?: ClusterTheme;
+};
+declare const SimpleClusterLayer: (props: SimpleClusterLayerProps) => import("react/jsx-runtime").JSX.Element;
 export default SimpleClusterLayer;
-declare function SimpleClusterLayer(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SimpleClusterLayer {
-    namespace propTypes {
-        const simpleTheme: import("prop-types").Requireable<import("prop-types").InferProps<{
-            getNoisePresentation: import("prop-types").Validator<(...args: any[]) => any>;
-            getClusterPresentation: import("prop-types").Validator<(...args: any[]) => any>;
-        }>>;
-    }
-}

package/lib/es/components/map/components/features/layers/clustering/SimpleClusterLayer.js

@@ -2,16 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const proptypes_1 = tslib_1.__importDefault(require("../../../../utils/proptypes"));
+require("react");
 const ClusterLayer_1 = tslib_1.__importDefault(require("./ClusterLayer"));
 const clustering_1 = require("../../../../utils/clustering");
-const SimpleClusterLayer = props => {
+const SimpleClusterLayer = (props) => {
     const { simpleTheme } = props, rest = tslib_1.__rest(props, ["simpleTheme"]);
-    const newProps = Object.assign({ clusterTheme: simpleTheme && (0, clustering_1.wrapSimpleTheme)(simpleTheme) }, rest);
-    return (0, jsx_runtime_1.jsx)(ClusterLayer_1.default, Object.assign({}, newProps));
-};
-SimpleClusterLayer.propTypes = {
-    simpleTheme: proptypes_1.default.clusterTheme,
+    return (0, jsx_runtime_1.jsx)(ClusterLayer_1.default, Object.assign({}, rest, { clusterTheme: simpleTheme && (0, clustering_1.wrapSimpleTheme)(simpleTheme) }));
 };
 exports.default = SimpleClusterLayer;

package/lib/es/components/map/components/features/layers/overlayLayers/IncidentsLayer.d.ts

@@ -0,0 +1,6 @@
+export declare const CLUSTER_ICON_WIDTH = 34;
+export declare const CLUSTER_ICON_HEIGHT = 38;
+export declare const MARKER_ICON_WIDTH = 26;
+export declare const MARKER_ICON_HEIGHT = 31;
+declare const IncidentsLayer: () => null;
+export default IncidentsLayer;