@rio-cloud/rio-uikit 0.16.4-beta.35 → 0.16.4-beta.38

package/components/map/components/Map.js

@@ -95,6 +95,14 @@ const Map = (props) => {
             platform,
             ui: hereUi,
             utils: createUtils(hereMap),
+            // Put settings back into the map API object so the invoking service
+            // can check on these settings for instance inside a test
+            settings: {
+                enableWebGL,
+                baseLayer,
+                activeLayers,
+                showCluster,
+            },
         });
         // If the base layer changed, re-add all previous objects again,
         // otherwise the map would be empty
@@ -152,10 +160,12 @@ const Map = (props) => {
     // due to the nature of the AssetTree with it's hundreds DOM nodes, applying the CSS selectors
     // takes time.
     const handleMapInteractionStart = () => {
-        document.body.classList.add('pointer-events-none');
+        var _a;
+        (_a = document.querySelector('.AssetTree')) === null || _a === void 0 ? void 0 : _a.classList.add('pointer-events-none');
     };
     const handleMapInteractionEnd = () => {
-        document.body.classList.remove('pointer-events-none');
+        var _a;
+        (_a = document.querySelector('.AssetTree')) === null || _a === void 0 ? void 0 : _a.classList.remove('pointer-events-none');
     };
     const style = {};
     if (height) {

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

@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect, useContext } from 'react';
 import { MapContext } from '../../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 = useContext(MapContext);

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

@@ -90,6 +90,12 @@ export type MapApi = {
     ui?: H.ui.UI;
     utils?: MapUtils;
     group?: H.map.Group;
+    settings?: {
+        enableWebGL?: boolean;
+        baseLayer?: MapType;
+        activeLayers?: MapLayer[];
+        showCluster?: boolean;
+    };
 };
 export type MapIncidents = {
     sourceUpdated: string;

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

@@ -1,4 +1,4 @@
-import type { BoundingBox } from '../../../mapTypes';
+import type { BoundingBox, Position } from '../../../mapTypes';
 export declare const isValidBoundingBox: (box: BoundingBox) => boolean;
 export declare const calculateBoundingBox: (positions: {
     lat: number;
@@ -8,3 +8,21 @@ export declare const parsePositionFromString: (value: string) => {
     lat: number;
     lng: number;
 } | undefined;
+/**
+ * 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;

package/components/map/utils/positions.js

@@ -34,3 +34,38 @@ export const parsePositionFromString = (value) => {
         }
     }
 };
+/**
+ * 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 const ease = (startCoord = { lat: 0, lng: 0 }, endCoord = { lat: 1, lng: 1 }, durationMs = 200, onStep = (pos) => { }, onComplete = () => { }) => {
+    const raf = window.requestAnimationFrame;
+    const stepCount = durationMs / 16;
+    const valueIncrementLat = (endCoord.lat - startCoord.lat) / stepCount;
+    const valueIncrementLng = (endCoord.lng - startCoord.lng) / stepCount;
+    const sinValueIncrement = Math.PI / stepCount;
+    let currentValueLat = startCoord.lat;
+    let currentValueLng = startCoord.lng;
+    let currentSinValue = 0;
+    const step = () => {
+        currentSinValue += sinValueIncrement;
+        currentValueLat += valueIncrementLat * Math.pow(Math.sin(currentSinValue), 2) * 2;
+        currentValueLng += valueIncrementLng * Math.pow(Math.sin(currentSinValue), 2) * 2;
+        if (currentSinValue < Math.PI) {
+            onStep({ lat: currentValueLat, lng: currentValueLng });
+            raf(step);
+        }
+        else {
+            onStep(endCoord);
+            onComplete();
+        }
+    };
+    raf(step);
+};

package/lib/es/components/map/components/Map.js

@@ -98,6 +98,14 @@ const Map = (props) => {
             platform,
             ui: hereUi,
             utils: (0, mapUtils_1.createUtils)(hereMap),
+            // Put settings back into the map API object so the invoking service
+            // can check on these settings for instance inside a test
+            settings: {
+                enableWebGL,
+                baseLayer,
+                activeLayers,
+                showCluster,
+            },
         });
         // If the base layer changed, re-add all previous objects again,
         // otherwise the map would be empty
@@ -155,10 +163,12 @@ const Map = (props) => {
     // due to the nature of the AssetTree with it's hundreds DOM nodes, applying the CSS selectors
     // takes time.
     const handleMapInteractionStart = () => {
-        document.body.classList.add('pointer-events-none');
+        var _a;
+        (_a = document.querySelector('.AssetTree')) === null || _a === void 0 ? void 0 : _a.classList.add('pointer-events-none');
     };
     const handleMapInteractionEnd = () => {
-        document.body.classList.remove('pointer-events-none');
+        var _a;
+        (_a = document.querySelector('.AssetTree')) === null || _a === void 0 ? void 0 : _a.classList.remove('pointer-events-none');
     };
     const style = {};
     if (height) {

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

@@ -4,6 +4,8 @@ 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);

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

@@ -90,6 +90,12 @@ export type MapApi = {
     ui?: H.ui.UI;
     utils?: MapUtils;
     group?: H.map.Group;
+    settings?: {
+        enableWebGL?: boolean;
+        baseLayer?: MapType;
+        activeLayers?: MapLayer[];
+        showCluster?: boolean;
+    };
 };
 export type MapIncidents = {
     sourceUpdated: string;

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

@@ -1,4 +1,4 @@
-import type { BoundingBox } from '../../../mapTypes';
+import type { BoundingBox, Position } from '../../../mapTypes';
 export declare const isValidBoundingBox: (box: BoundingBox) => boolean;
 export declare const calculateBoundingBox: (positions: {
     lat: number;
@@ -8,3 +8,21 @@ export declare const parsePositionFromString: (value: string) => {
     lat: number;
     lng: number;
 } | undefined;
+/**
+ * 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;

package/lib/es/components/map/utils/positions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parsePositionFromString = exports.calculateBoundingBox = exports.isValidBoundingBox = void 0;
+exports.ease = exports.parsePositionFromString = exports.calculateBoundingBox = exports.isValidBoundingBox = void 0;
 const createBoundingBox = () => ({
     top: Number.NEGATIVE_INFINITY,
     right: Number.NEGATIVE_INFINITY,
@@ -40,3 +40,39 @@ const parsePositionFromString = (value) => {
     }
 };
 exports.parsePositionFromString = parsePositionFromString;
+/**
+ * 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
+ */
+const ease = (startCoord = { lat: 0, lng: 0 }, endCoord = { lat: 1, lng: 1 }, durationMs = 200, onStep = (pos) => { }, onComplete = () => { }) => {
+    const raf = window.requestAnimationFrame;
+    const stepCount = durationMs / 16;
+    const valueIncrementLat = (endCoord.lat - startCoord.lat) / stepCount;
+    const valueIncrementLng = (endCoord.lng - startCoord.lng) / stepCount;
+    const sinValueIncrement = Math.PI / stepCount;
+    let currentValueLat = startCoord.lat;
+    let currentValueLng = startCoord.lng;
+    let currentSinValue = 0;
+    const step = () => {
+        currentSinValue += sinValueIncrement;
+        currentValueLat += valueIncrementLat * Math.pow(Math.sin(currentSinValue), 2) * 2;
+        currentValueLng += valueIncrementLng * Math.pow(Math.sin(currentSinValue), 2) * 2;
+        if (currentSinValue < Math.PI) {
+            onStep({ lat: currentValueLat, lng: currentValueLng });
+            raf(step);
+        }
+        else {
+            onStep(endCoord);
+            onComplete();
+        }
+    };
+    raf(step);
+};
+exports.ease = ease;

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.35"
+    "version": "0.16.4-beta.38"
 }

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.4-beta.35",
+    "version": "0.16.4-beta.38",
     "description": "The RIO UIKIT component library",
     "repository": "https://bitbucket.collaboration-man.com/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
         "build": "npm run build:font && npm run build:styles && npm run build:vite && npm run format-code && echo '\n👉 For an npm release use build:npm 👈'",
-        "build:npm": "npm run build:cjs && npm run build:esm && npm run copy-to-package && npm run fixEsmImports && echo '\n📦 Publish to npm only from within 'package' folder 📦'",
+        "build:npm": "npm run build:cjs && npm run build:esm && npm run copy-to-package && echo '\n📦 Publish to npm only from within 'package' folder 📦'",
         "build:cjs": "tsc -p tsconfig.cjs.json && copyfiles --up 1 src/*.d.ts src/version.json src/styles/variables/colors/colors.json package/lib/es",
         "build:esm": "tsc -p tsconfig.esm.json && copyfiles --up 1 src/*.d.ts src/version.json src/styles/variables/colors/colors.json package",
         "build:vite": "vite build",
@@ -22,7 +22,6 @@
         "build:style-traton": "vite build --mode style-traton",
         "build:style-xmas": "vite build --mode style-xmas",
         "build:font": "svgo -f webfont/svgs && vite build --mode font",
-        "fixEsmImports": "node tools/fixEsmImportsInDeclarations.mjs",
         "fixCssMinified": "node tools/fixCssMinified.mjs",
         "format-code": "npm run format-code:uikit && npm run format-code:demo",
         "format-code:uikit": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
@@ -40,13 +39,11 @@
     },
     "author": "TB Digital Services GmbH",
     "license": "Apache-2.0",
-    "main": "./lib/es/index.js",
-    "module": "./index.js",
-    "types": "./lib/es/index.d.ts",
+    "main": "lib/es/index.js",
+    "module": "index.js",
+    "types": "index.d.ts",
     "less": "./styles/css/rio-uikit.less",
-    "files": [
-        "**/*.*"
-    ],
+    "files": ["**/*.*"],
     "devDependencies": {
         "@testing-library/dom": "9.3.3",
         "@testing-library/jest-dom": "5.17.0",
@@ -132,12 +129,6 @@
         "recharts": "2.10.3",
         "tslib": "2.6.2"
     },
-    "pre-commit": [
-        "format-code"
-    ],
-    "browserslist": [
-        "> 0.5%",
-        "Firefox ESR",
-        "not dead"
-    ]
+    "pre-commit": ["format-code"],
+    "browserslist": ["> 0.5%", "Firefox ESR", "not dead"]
 }

package/version.json

@@ -1,3 +1,3 @@
 {
-    "version": "0.16.4-beta.35"
+    "version": "0.16.4-beta.38"
 }