@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/components/map/utils/eventHandling.js

@@ -1,65 +1,62 @@
-class MapTimeGuard {
-    constructor(delay = 250) {
-        this.delayTime = delay;
-        this.timer = undefined;
-    }
-    delay(callback, ...args) {
-        this.cancel();
-        this.timer = window.setTimeout(() => callback(...args), this.delayTime);
-    }
-    cancel() {
-        window.clearTimeout(this.timer);
-    }
-}
-class EnhancedMapEvent {
-    constructor(event, mapApi) {
-        this.viewportX = event.currentPointer.viewportX;
-        this.viewportY = event.currentPointer.viewportY;
-        this.map = mapApi;
-    }
-    calculateGeoCoords() {
-        return this.map.screenToGeo(this.viewportX, this.viewportY);
-    }
-}
+const createMapTimeGuard = (delay = 250) => {
+    let timer;
+    const delayFunc = (callback, ...args) => {
+        cancelFunc();
+        timer = window.setTimeout(() => callback(...args), delay);
+    };
+    const cancelFunc = () => {
+        window.clearTimeout(timer);
+    };
+    return {
+        delayTime: delay,
+        timer,
+        delay: delayFunc,
+        cancel: cancelFunc,
+    };
+};
 export const createEnhancedMapEvent = (event, mapApi) => {
     if (!event || !event.currentPointer) {
         return {
             map: mapApi,
         };
     }
-    return new EnhancedMapEvent(event, mapApi);
+    const viewportX = event.currentPointer.viewportX;
+    const viewportY = event.currentPointer.viewportY;
+    const calculateGeoCoords = () => {
+        return mapApi.screenToGeo(viewportX, viewportY);
+    };
+    return {
+        viewportX,
+        viewportY,
+        map: mapApi,
+        calculateGeoCoords,
+    };
 };
 export const createEnhancedListener = (listener, mapApi) => {
-    return event => listener(event, createEnhancedMapEvent(event, mapApi));
+    return (event) => listener(event, createEnhancedMapEvent(event, mapApi));
 };
-export const addEventListenerMap = (hMapObject, eventListenerMap = {}, mapApi) => {
+export const addEventListenerMap = (eventTarget, eventListenerMap, mapApi) => {
+    if (!eventListenerMap) {
+        return;
+    }
     const enhancedMap = {};
     Object.keys(eventListenerMap).forEach(key => {
         const enhancedListener = createEnhancedListener(eventListenerMap[key], mapApi);
-        hMapObject.addEventListener(key, enhancedListener);
+        eventTarget.addEventListener(key, enhancedListener);
         enhancedMap[key] = enhancedListener;
     });
-    hMapObject.rioMapRemoveEvents = () => {
+    eventTarget.rioMapRemoveEvents = () => {
         Object.keys(enhancedMap).forEach(key => {
-            hMapObject.removeEventListener(key, enhancedMap[key]);
+            eventTarget.removeEventListener(key, enhancedMap[key]);
         });
-        delete hMapObject.rioMapRemoveEvents;
+        // biome-ignore lint/performance/noDelete: <explanation>
+        delete eventTarget.rioMapRemoveEvents;
         return mapApi;
     };
 };
-export const removeEventListenerMap = hMapObject => {
-    if (hMapObject.rioMapRemoveEvents) {
-        return hMapObject.rioMapRemoveEvents();
-    }
-};
-export const checkAndUpdateEventListenerMap = (hMapObject, props, nextProps) => {
-    if (!hMapObject) {
-        return;
-    }
-    if (props.eventListenerMap !== nextProps.eventListenerMap) {
-        // use exports to make methods accessible for stubbing
-        const mapApi = removeEventListenerMap(hMapObject);
-        addEventListenerMap(hMapObject, nextProps.eventListenerMap, mapApi);
+export const removeEventListenerMap = (eventTarget) => {
+    if (eventTarget.rioMapRemoveEvents) {
+        return eventTarget.rioMapRemoveEvents();
     }
 };
 export const createTapOnDblTapPreventer = (eventListenerMap, delayBetweenTaps = 300) => {
@@ -67,7 +64,7 @@ export const createTapOnDblTapPreventer = (eventListenerMap, delayBetweenTaps =
     if (!eventListenerMap[EventUtils.TAP] || !eventListenerMap[EventUtils.DBL_TAP]) {
         return result;
     }
-    const guard = new MapTimeGuard(delayBetweenTaps);
+    const guard = createMapTimeGuard(delayBetweenTaps);
     result[EventUtils.TAP] = (...args) => {
         guard.delay(eventListenerMap[EventUtils.TAP], ...args);
     };
@@ -77,10 +74,10 @@ export const createTapOnDblTapPreventer = (eventListenerMap, delayBetweenTaps =
     };
     return result;
 };
-export const getMouseButton = event => {
+export const getMouseButton = (event) => {
     return event.originalEvent.button;
 };
-export const isRightClick = event => {
+export const isRightClick = (event) => {
     return getMouseButton(event) === EventUtils.MOUSE_BUTTONS.RIGHT;
 };
 export const EventUtils = {
@@ -112,3 +109,4 @@ export const EventUtils = {
     getMouseButton,
     isRightClick,
 };
+export default EventUtils;

package/components/map/utils/hooks.js

@@ -1,5 +1,5 @@
-import { useEffect, useContext } from 'react';
-import { MapContext } from '../components/context';
+import { useEffect } from 'react';
+import { useMapContext } from '../components/MapContext';
 import { addEventListenerMap, removeEventListenerMap } from './eventHandling';
 export const useUpdateProp = (mapObject, propSetter, value) => {
     useEffect(() => {
@@ -9,7 +9,7 @@ export const useUpdateProp = (mapObject, propSetter, value) => {
     }, [value]);
 };
 export const useUpdateEventListenerMap = (mapObject, eventListenerMap) => {
-    const { api } = useContext(MapContext);
+    const { api } = useMapContext();
     useEffect(() => {
         if (!mapObject) {
             return;

package/components/map/utils/localization.d.ts

@@ -1,2 +1,2 @@
-export function mapToLongLocale(locale: any): any;
-export function mapToShortLocale(locale: any): any;
+export declare const mapToLongLocale: (locale: string) => string;
+export declare const mapToShortLocale: (locale: string) => string;

package/components/map/utils/localization.js

@@ -379,7 +379,7 @@ const parseLocale = (locale = 'eng') => {
     }
     return locale;
 };
-export const mapToLongLocale = locale => {
+export const mapToLongLocale = (locale) => {
     const key = parseLocale(locale);
     if (threeToTwoMapping[key]) {
         return key;
@@ -389,7 +389,8 @@ export const mapToLongLocale = locale => {
     }
     return 'eng';
 };
-export const mapToShortLocale = locale => {
+// unused
+export const mapToShortLocale = (locale) => {
     const key = parseLocale(locale);
     if (twoToThreeMapping[key]) {
         return key;

package/components/map/utils/mapTypes.d.ts

@@ -0,0 +1,166 @@
+/// <reference types="heremaps" />
+/// <reference types="react" />
+import type { ObjectValues } from '../../../utils/ObjectValues';
+import type { MapUtils } from './mapUtils';
+import type { EventListenerMap } from './eventHandling';
+export type Point = H.geo.Point;
+export type NoisePoint = H.clustering.INoisePoint;
+export type DataPoint = H.clustering.DataPoint;
+export type MapEvent = H.mapevents.Event & {};
+export type MapContextMenuEvent = H.mapevents.ContextMenuEvent;
+export type MapInfoBubble = H.ui.InfoBubble;
+export type MapUtilEvent = H.util.Event;
+export type Position = {
+    lat: number;
+    lng: number;
+};
+export type BoundingBox = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export type MapBoundingBox = {
+    topLeft: {
+        lng: number | undefined;
+        lat: number | undefined;
+    };
+    bottomRight: {
+        lng: number | undefined;
+        lat: number | undefined;
+    };
+};
+export declare const MapTypeMap: {
+    readonly TYPE_DEFAULT: "DEFAULT";
+    readonly TYPE_FLEET_STYLE: "FLEET_STYLE";
+    readonly TYPE_SATELLITE: "SATELLITE";
+    readonly TYPE_TERRAIN: "TERRAIN";
+    readonly TYPE_NIGHT: "NIGHT";
+};
+export type MapType = ObjectValues<typeof MapTypeMap>;
+export declare const MapLayerMap: {
+    readonly MAP_LAYER_INCIDENTS: "INCIDENTS";
+    readonly MAP_LAYER_TRAFFIC: "TRAFFIC";
+    readonly MAP_LAYER_ROAD_RESTRICTIONS: "ROAD_RESTRICTIONS";
+};
+export type MapLayer = ObjectValues<typeof MapLayerMap>;
+export type MapCredentials = {
+    app_id?: string;
+    app_code?: string;
+    apikey?: string;
+};
+export type MapProps = {
+    credentials: MapCredentials;
+    height?: number;
+    width?: number;
+    language?: string;
+    center?: Position;
+    zoom?: number;
+    boundingBox?: BoundingBox;
+    disableMapEvents?: boolean;
+    disableBehavior?: boolean;
+    eventListenerMap?: EventListenerMap;
+    hideMapSettings?: boolean;
+    hideClusterSettings?: boolean;
+    hideMapLayerSettings?: boolean;
+    mapType?: MapType;
+    mapLayer?: MapLayer[];
+    showCluster?: boolean;
+    showScaleBar?: boolean;
+    onMapTypeChange?: (type: MapType, previousType?: MapType) => void;
+    onMapLayerChange?: (activeLayer: MapLayer[], previousLayer?: MapLayer[]) => void;
+    onShowClusterChange?: (show: boolean) => void;
+    onZoomIn?: (zoom: number) => void;
+    onZoomOut?: (zoom: number) => void;
+    onIncidentsChange?: (incidentsResult: MapIncidents) => void;
+    mapSettingsTooltip?: string | React.ReactNode;
+    mapSettings?: React.ReactNode;
+    zoomAnimation?: boolean;
+    enableWebGL?: boolean;
+    enableDevicePixelRatio?: boolean;
+    children?: React.ReactNode | ((api: MapApi, incidents?: MapIncidents) => React.ReactNode);
+};
+export type MapApi = {
+    credentials?: MapCredentials;
+    defaultLayers?: H.service.DefaultLayers;
+    map?: H.Map;
+    mapEvents?: false | H.mapevents.MapEvents;
+    behavior?: false | H.mapevents.Behavior;
+    platform?: H.service.Platform;
+    ui?: H.ui.UI;
+    utils?: MapUtils;
+    group?: H.map.Group;
+    settings?: {
+        enableWebGL?: boolean;
+        baseLayer?: MapType;
+        activeLayers?: MapLayer[];
+        showCluster?: boolean;
+    };
+};
+export type MapIncidents = {
+    sourceUpdated: string;
+    results: IncidentDataPoint[];
+};
+export type Incidents = {
+    sourceUpdated: string;
+    results: Incident[];
+};
+export type IncidentLocationPoint = {
+    length: number;
+    points: Position[];
+};
+export type IncidentLocationShape = {
+    links: IncidentLocationPoint[];
+};
+export type Incident = {
+    incidentDetails: IncidentDetails;
+    location: {
+        length: number;
+        shape: IncidentLocationShape;
+    };
+};
+export type IncidentDetails = {
+    id: string;
+    hrn: string;
+    originalId: string;
+    originalHrn: string;
+    startTime: string;
+    endTime: string;
+    entryTime: string;
+    roadClosed: boolean;
+    criticality: 'minor' | 'major' | 'critical';
+    type: 'roadClosure' | 'construction' | 'roadHazard' | 'other';
+    codes: number[];
+    comment: string | undefined;
+    description: {
+        value: string;
+        language?: string;
+    };
+    summary: {
+        value: string;
+        language?: string;
+    };
+    junctionTraversability: string;
+};
+export type IncidentDataPoint = {
+    id: string;
+    tooltipContent: string;
+    criticality: 'low' | 'minor' | 'major' | 'critical';
+    description: {
+        value: string;
+        language?: string;
+    };
+    summary: {
+        value: string;
+        language?: string;
+    };
+    comment: string | undefined;
+    type: 'accident' | 'construction' | 'congestion' | 'roadHazard' | 'roadClosure' | 'disabledVehicle' | 'massTransit' | 'plannedEvent' | 'weather' | 'laneRestriction' | 'other';
+    startTime: string;
+    endTime: string;
+    roadClosed: boolean;
+    position: Position;
+};
+export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route"];
+export type MarkerColor = (typeof markerColorOptions)[number];
+export declare const markerColorMapping: Record<MarkerColor, string>;

package/components/map/utils/mapTypes.js

@@ -0,0 +1,24 @@
+export const MapTypeMap = {
+    TYPE_DEFAULT: 'DEFAULT',
+    TYPE_FLEET_STYLE: 'FLEET_STYLE',
+    TYPE_SATELLITE: 'SATELLITE',
+    TYPE_TERRAIN: 'TERRAIN',
+    TYPE_NIGHT: 'NIGHT',
+};
+export const MapLayerMap = {
+    MAP_LAYER_INCIDENTS: 'INCIDENTS',
+    MAP_LAYER_TRAFFIC: 'TRAFFIC',
+    MAP_LAYER_ROAD_RESTRICTIONS: 'ROAD_RESTRICTIONS',
+};
+export const markerColorOptions = [
+    'bg-map-marker-asset',
+    'bg-map-marker-poi',
+    'bg-map-marker-geofence',
+    'bg-map-marker-route',
+];
+export const markerColorMapping = {
+    'bg-map-marker-asset': 'map-marker-type-asset',
+    'bg-map-marker-poi': 'map-marker-type-poi',
+    'bg-map-marker-geofence': 'map-marker-type-geofence',
+    'bg-map-marker-route': 'map-marker-type-route',
+};

package/components/map/utils/mapUi.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="heremaps" />
+export declare const getHereUi: (hereMap: H.Map, defaultLayers: H.service.DefaultLayers, showScaleBar: boolean, language: string) => H.ui.UI;

package/components/map/utils/mapUi.js

@@ -0,0 +1,28 @@
+const getSupportedUiLocale = (language) => {
+    const supportedLocales = [
+        'en-US',
+        'de-DE',
+        'es-ES',
+        'fi-FI',
+        'fr-FR',
+        'it-IT',
+        'nl-NL',
+        'pl-PL',
+        'pt-BR',
+        'pt-PT',
+        'ru-RU',
+        'tr-TR',
+        'zh-CN',
+    ];
+    return language ? supportedLocales.find(locale => locale.startsWith(language)) : undefined;
+};
+export const getHereUi = (hereMap, defaultLayers, showScaleBar, language) => {
+    const hereUi = H.ui.UI.createDefault(hereMap, defaultLayers, getSupportedUiLocale(language));
+    if (hereUi) {
+        hereUi.getControl('scalebar').setVisibility(showScaleBar);
+        hereUi.getControl('scalebar').setAlignment(H.ui.LayoutAlignment.BOTTOM_LEFT);
+        hereUi.getControl('mapsettings').setVisibility(false);
+        hereUi.removeControl('zoom');
+    }
+    return hereUi;
+};

package/components/map/utils/mapUtils.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="heremaps" />
+import { calculateBoundingBox, isValidBoundingBox, parsePositionFromString } from './positions';
+import type { BoundingBox, MapBoundingBox, Position } from './mapTypes';
+export declare const getMapBounds: (boundingBox: BoundingBox) => H.geo.Rect;
+declare const getPosition: (marker: H.map.AbstractMarker) => H.geo.Point | H.geo.MultiPoint;
+export type MapUtils = {
+    getCenter: () => Position;
+    setCenter: (position: Position, animate: boolean) => void;
+    getZoom: () => number;
+    setZoom: (zoom: number, zoomAnimation: boolean) => void;
+    getViewPort: () => {
+        width: number;
+        height: number;
+        margin: number;
+        padding: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        center: {
+            x: number;
+            y: number;
+        };
+    };
+    getBounds: () => MapBoundingBox;
+    getObjects: () => H.map.Object[];
+    getLayers: () => H.map.DataModel[];
+    getBaseLayer: () => H.map.layer.Layer;
+    getGroups: () => H.map.Object[];
+    getMarkers: () => H.map.Object[];
+    getRoutePolylines: () => H.map.Object[];
+    getPosition: typeof getPosition;
+    calculateBoundingBox: typeof calculateBoundingBox;
+    isValidBoundingBox: typeof isValidBoundingBox;
+    parsePositionFromString: typeof parsePositionFromString;
+};
+export declare const createUtils: (mapApi: H.Map) => {
+    getCenter: () => {
+        lat: number;
+        lng: number;
+    };
+    setCenter: (position: Position, animate: boolean) => void;
+    getZoom: () => number;
+    setZoom: (zoom: number, zoomAnimation?: boolean) => void;
+    getViewPort: () => {
+        width: number;
+        height: number;
+        margin: number;
+        padding: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        center: {
+            x: number;
+            y: number;
+        };
+    };
+    getBounds: () => {
+        topLeft: {
+            lng: number | undefined;
+            lat: number | undefined;
+        };
+        bottomRight: {
+            lng: number | undefined;
+            lat: number | undefined;
+        };
+    };
+    getObjects: () => H.map.Object[];
+    getLayers: () => any[];
+    getBaseLayer: () => H.map.layer.Layer;
+    getGroups: () => H.map.Object[];
+    getMarkers: () => H.map.Object[];
+    getRoutePolylines: () => any;
+    getPosition: (marker: H.map.AbstractMarker) => H.geo.Point | H.geo.MultiPoint;
+    calculateBoundingBox: (positions: {
+        lat: number;
+        lng: number;
+    }[]) => BoundingBox;
+    isValidBoundingBox: (box: BoundingBox) => boolean;
+    parsePositionFromString: (value: string) => {
+        lat: number;
+        lng: number;
+    } | undefined;
+};
+export {};

package/components/map/utils/mapUtils.js

@@ -0,0 +1,79 @@
+import flatMap from 'lodash/fp/flatMap';
+import filter from 'lodash/fp/filter';
+import flow from 'lodash/fp/flow';
+import { calculateBoundingBox, isValidBoundingBox, parsePositionFromString } from './positions';
+// Internal use for setting the map to a given bounding box
+export const getMapBounds = (boundingBox) => {
+    const { top, left, bottom, right } = boundingBox;
+    return new H.geo.Rect(top, left, bottom, right);
+};
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const typeFilterFunction = (hereType) => (obj) => obj instanceof hereType;
+const markerFilterFunction = typeFilterFunction(H.map.AbstractMarker);
+const groupFilterFunction = typeFilterFunction(H.map.Group);
+const polylineFilterFunction = typeFilterFunction(H.map.Polyline);
+const getPosition = (marker) => marker.getGeometry();
+export const createUtils = (mapApi) => {
+    return {
+        getCenter: () => {
+            const center = mapApi.getCenter();
+            return {
+                lat: center.lat,
+                lng: center.lng,
+            };
+        },
+        setCenter: (position, animate) => {
+            mapApi.getViewModel().setLookAtData({ position }, animate);
+        },
+        getZoom: () => {
+            const { zoom } = mapApi.getViewModel().getLookAtData();
+            return Math.round(zoom === undefined ? 0 : zoom);
+        },
+        setZoom: (zoom, zoomAnimation = false) => {
+            mapApi.getViewModel().setLookAtData({ zoom }, zoomAnimation);
+        },
+        getViewPort: () => {
+            const viewPort = mapApi.getViewPort();
+            return {
+                width: viewPort.width,
+                height: viewPort.height,
+                margin: viewPort.margin,
+                padding: {
+                    top: viewPort.padding.top,
+                    right: viewPort.padding.right,
+                    bottom: viewPort.padding.bottom,
+                    left: viewPort.padding.left,
+                },
+                center: {
+                    x: viewPort.center.x,
+                    y: viewPort.center.y,
+                },
+            };
+        },
+        getBounds: () => {
+            const { bounds } = mapApi.getViewModel().getLookAtData();
+            // HERE Maps API for JavaScript 3.1
+            const boundingBox = bounds === null || bounds === void 0 ? void 0 : bounds.getBoundingBox();
+            return {
+                topLeft: {
+                    lng: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getTopLeft().lng,
+                    lat: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getTopLeft().lat,
+                },
+                bottomRight: {
+                    lng: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getBottomRight().lng,
+                    lat: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getBottomRight().lat,
+                },
+            };
+        },
+        getObjects: () => mapApi.getObjects(),
+        getLayers: () => mapApi.getLayers().asArray(),
+        getBaseLayer: () => mapApi.getBaseLayer(),
+        getGroups: () => filter(groupFilterFunction)(mapApi.getObjects()),
+        getMarkers: () => filter(markerFilterFunction)(mapApi.getObjects()),
+        getRoutePolylines: () => flow(filter(groupFilterFunction), flatMap((group) => group.getObjects()), filter(polylineFilterFunction))(mapApi.getObjects()),
+        getPosition,
+        calculateBoundingBox,
+        isValidBoundingBox,
+        parsePositionFromString,
+    };
+};

package/components/map/utils/positions.d.ts

@@ -1,10 +1,28 @@
-export namespace PositionUtils {
-    export { calculateBoundingBox };
-    export { parsePositionFromString };
-}
-declare function calculateBoundingBox(positions: any): any;
-declare function parsePositionFromString(value: any): {
+import type { BoundingBox, Position } from '../../../mapTypes';
+export declare const isValidBoundingBox: (box: BoundingBox) => boolean;
+export declare const calculateBoundingBox: (positions: {
+    lat: number;
+    lng: number;
+}[]) => BoundingBox;
+export declare const parsePositionFromString: (value: string) => {
     lat: number;
     lng: number;
 } | undefined;
-export {};
+/**
+ * Ease function that can be used to animate positions on the map.
+ *
+ * See: https://developer.here.com/documentation/examples/maps-js/markers/markers-update-position-with-animation
+ *
+ * @param   {H.geo.IPoint} startCoord   start geo coordinate
+ * @param   {H.geo.IPoint} endCoord     end geo coordinate
+ * @param   number durationMs           duration of animation between start & end coordinates
+ * @param   function onStep             callback executed each step
+ * @param   function onStep             callback executed at the end
+ */
+export declare const ease: (startCoord?: {
+    lat: number;
+    lng: number;
+}, endCoord?: {
+    lat: number;
+    lng: number;
+}, durationMs?: number, onStep?: (pos: Position) => void, onComplete?: () => void) => void;