@masterportal/masterportalapi 2.13.0 → 2.14.0

package/.eslintrc

@@ -3,7 +3,8 @@
         // browser global variables
         "browser": true,
         "node": true,
-        "es6": true
+        "es6": true,
+        "jest": true
     },
     "globals": {
         "Cesium": true

package/CHANGELOG.md

@@ -3,23 +3,26 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
-## Unreleased - in development
+## 2.14.0 - 2023-02-22
 ### Added
+- VectorStyle is now part of the masterportalApi.
+- The following packages have been installed:
+    - use-resize-observer: 9.1.0
+
 ### Changed
-- GeoJSON now also register a featuresloadend function if the source is a cluster.
-### Deprecated
-### Removed
-### Fixed
+- The following packages have been updated:
+    - dependencies:
+        - ol: 7.1.0 to 7.2.2
 
 ---
 
-## 2.13.0 - 2022-02-16
+## 2.13.0 - 2023-02-16
 ### Changed
 - GeoJSON now also register a featuresloadend function if the source is a cluster.
 
 ---
 
-## 2.12.0 - 2022-01-24
+## 2.12.0 - 2023-01-24
 ### Added
 - Added support for Node LTS version 18.
 - Add possibility to specify additional layerparams for a wmts layer, like opacity for example.

package/example/config/portal.json

@@ -29,7 +29,14 @@
   "layers": [
     {
       "id": "1001"
+    },
+    {
+      "id": "8712",
+      "name": "Schulinfosystem",
+      "styleId": "8712",
+      "typ": "WFS"
     }
   ],
-  "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/1_99/Cesium.js"
+  "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/1_99/Cesium.js",
+  "wfsImgPath": "https://geodienste.hamburg.de/lgv-config/img/"
 }

package/example/config/services.json

@@ -113,6 +113,16 @@
       "anzahl_schueler": ">1000"
     }
   },
+  {
+    "id": "8712",
+    "name": "de.hh.up:staatliche schulen",
+    "url": "https://geodienste.hamburg.de/HH_WFS_Schulen",
+    "typ": "WFS",
+    "featureType": "staatliche_schulen",
+    "outputFormat": "XML",
+    "version": "1.1.0",
+    "featureNS": "https://registry.gdi-de.org/id/de.hh.up"
+  },
   {
     "id": "6001",
     "name": "ADV (EPSG:25832)",

package/example/index.js

@@ -5,6 +5,8 @@ import {Style, Stroke, Fill, Icon} from "ol/style.js";
 import * as mpapi from "../src";
 import mapsAPI from "../src/maps/api.js";
 import rawLayerList from "../src/rawLayerList";
+import styleList from "../src/vectorStyle/styleList";
+import createStyle from "../src/vectorStyle/createStyle";
 
 import services from "./config/services.json";
 import portalConfig from "./config/portal.json";
@@ -31,7 +33,25 @@ const hamburgServicesUrl = "https://geodienste.hamburg.de/services-internet.json
     },
     config = {
         ...portalConfig,
-        layerConf: services
+        layerConf: services,
+        styleConf: "https://geodienste.hamburg.de/lgv-config/style_v3.json"
+    },
+    // eslint-disable-next-line func-style
+    getWfsStyleFunction = function () {
+        const styleId = "8712",
+            olLayer = window.mpapi.map.getLayers().getArray().find((element) => element.get("id") === "8712"),
+            source = olLayer.getSource(),
+            styleObject = styleList.returnStyleObject(styleId);
+        let isClusterFeature = false;
+
+        if (styleObject !== undefined) {
+            source.on("featuresloadend", event => {
+                event.features.forEach(element => {
+                    isClusterFeature = false;
+                    element.setStyle(createStyle.createStyle(styleObject, element, isClusterFeature, config.wfsImgPath));
+                });
+            });
+        }
     };
 let map2D = null;
 
@@ -237,4 +257,16 @@ map2D.getLayers().forEach(layer => {
 window.mpapi.map.addLayer("7001");
 window.mpapi.map.addLayer("7002");
 window.mpapi.map.addLayer("7003");
-// */
+*/
+
+/* VectorStyle example */
+// Example for using the vectorStyle that is now implemented in the masterportalAPI.
+// Hardcoded to show the school layer "8712" as a wfs.
+// For better visibility adding of the other layers, especially "5001", should be commented out.
+styleList.initializeStyleList({}, config, config.layers, undefined, (initializedStyleList, error) => {
+    if (error) {
+        console.error("Die Datei " + config.styleConf + " konnte nicht geladen werden!");
+    }
+    return initializedStyleList;
+});
+getWfsStyleFunction();

package/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
     /** ol prints errors without HTMLCanvasElement being available in test environment */
     "setupFiles": ["jest-canvas-mock"],
     /** node_modules are usually ignored by babel-jest, but ol is published in ES6 */
-    "transformIgnorePatterns": ["/node_modules/(?!(ol|olcs|ol-mapbox-style|geotiff)/).*/"],
+    "transformIgnorePatterns": ["/node_modules/(?!(ol|olcs|ol-mapbox-style|geotiff|quick-lru)/).*/"],
     /** only consider files in src/ for coverage */
     "collectCoverageFrom": ["src/**/*.js"],
     /** coverage reporters */

package/jest.setup.js

@@ -2,4 +2,12 @@ import "regenerator-runtime/runtime";
 
 window.URL.createObjectURL = function () {
     // empty
-};
+};
+
+window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+        disconnect: jest.fn(),
+        observe: jest.fn(),
+        unobserve: jest.fn()
+    }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "core-js": "^3.27.1",
-    "ol": "7.1.0",
+    "ol": "7.2.2",
     "olcs": "^2.13.1",
     "proj4": "^2.8.1",
     "xml2js": "^0.4.23"
@@ -42,7 +42,8 @@
     "process": "^0.11.10",
     "sass": "^1.57.1",
     "stream-browserify": "^3.0.0",
-    "timers-browserify": "^2.0.12"
+    "timers-browserify": "^2.0.12",
+    "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
     "cesium": "^1.95.0"

package/src/lib/attributeMapper.js

@@ -0,0 +1,231 @@
+import {getValueFromObjectByPath} from "./getValueFromObjectByPath.js";
+import thousandsSeparator from "./thousandsSeparator";
+/**
+ * checks if value starts with special prefix to determine if value is a object path
+ * @param   {string} value string to check
+ * @returns {Boolean} true is value is an object path
+ */
+function isObjectPath (value) {
+    return typeof value === "string" && value.startsWith("@");
+}
+/**
+ * Returns the value of the given key. Also considers, that the key may be an object path.
+ * @param {Object} properties properties.
+ * @param {String} key Key to derive value from.
+ * @returns {*} - Value from key.
+ */
+function prepareValue (properties, key) {
+    const isPath = isObjectPath(key);
+    let value = properties[Object.keys(properties).find(propertiesKey => propertiesKey.toLowerCase() === key.toLowerCase())];
+
+    if (isPath) {
+        value = getValueFromObjectByPath(properties, key);
+    }
+    return value;
+}
+
+/**
+ * Parsing the boolean value
+ * @param {String} value default value
+ * @param {String|Object} format the format of boolean value
+* @returns {String} - original value or parsed value
+ */
+function getBooleanValue (value, format) {
+    let parsedValue = String(value);
+
+    if (Object.prototype.hasOwnProperty.call(format, value)) {
+        // TODO: check if true -> translation is dismissed because i18next does not exist in masterportalApi
+        parsedValue = format[value];
+
+    }
+    return parsedValue;
+}
+
+/**
+ * Appends a suffix if available.
+ * @param {*} value Value to append suffix.
+ * @param {String} suffix Suffix
+ * @returns {String} - Value with suffix.
+ */
+function appendSuffix (value, suffix) {
+    let valueWithSuffix = value;
+
+    if (suffix) {
+        valueWithSuffix = String(valueWithSuffix) + " " + suffix;
+    }
+    return valueWithSuffix;
+}
+
+/**
+ * Prepend a prefix if available.
+ * @param {*} value Value to prepend prefix.
+ * @param {String} prefix Prefix
+ * @returns {String} - Value with prefix.
+ */
+function prependPrefix (value, prefix) {
+    let valueWithPrefix = value;
+
+    if (prefix) {
+        valueWithPrefix = prefix + String(valueWithPrefix);
+    }
+    return valueWithPrefix;
+}
+
+/**
+ * Derives the value from the given condition.
+ * @param {String} key Key.
+ * @param {String} condition Condition to filter.
+ * @param {Object} properties Properties.
+ * @returns {*} - Value that matches the given condition.
+ */
+function getValueFromCondition (key, condition, properties) {
+    let valueFromCondition,
+        match;
+
+    if (condition === "contains") {
+        match = Object.keys(properties).filter(key2 => {
+            return key2.includes(key);
+        })[0];
+        valueFromCondition = properties[match];
+    }
+    else if (condition === "startsWith") {
+        match = Object.keys(properties).filter(key2 => {
+            return key2.startsWith(key);
+        })[0];
+        valueFromCondition = properties[match];
+    }
+    else if (condition === "endsWith") {
+        match = Object.keys(properties).filter(key2 => {
+            return key2.endsWith(key);
+        })[0];
+        valueFromCondition = properties[match];
+    }
+    else {
+        valueFromCondition = properties[key];
+    }
+
+    return valueFromCondition;
+
+}
+
+/**
+ * Derives the gfi value if the value is an object.
+ * @param {*} key Key of Attribute.
+ * @param {Object} mappingObj Value of attribute.
+ * @param {Object} properties object.
+ * @returns {*} - Prepared Value
+ */
+function prepareValueFromObject (key, mappingObj, properties) {
+    const type = mappingObj?.type ? mappingObj.type : "string",
+        condition = mappingObj?.condition ? mappingObj.condition : null;
+    let preparedValue = prepareValue(properties, key),
+        format = mappingObj?.format ? mappingObj.format : "YYYY-MM-DDTHH:mm:ss.SSSZ",
+        date;
+
+    if (condition) {
+        preparedValue = getValueFromCondition(key, condition, properties);
+    }
+    switch (type) {
+        case "date": {
+            date = new Date(String(preparedValue));
+            if (!isNaN(date.getTime())) {
+                const year = date.getFullYear(),
+                    month = ("0" + (date.getMonth() + 1)).slice(-2),
+                    day = ("0" + date.getDate()).slice(-2);
+
+                if (format === "YYYY-MM-DDTHH:mm:ss.SSSZ") {
+                    const offset = date.getTimezoneOffset();
+
+                    let offsetHours = (offset / 60) % 24,
+                        offsetMinutes = offset % 60;
+
+                    offsetHours = offsetHours < 0 ? "+" + ("0" + Math.abs(offsetHours)).slice(-2) : "-" + ("0" + Math.abs(offsetHours)).slice(-2);
+                    offsetMinutes = offsetMinutes < 0 ? ":" + ("0" + Math.abs(offsetMinutes)).slice(-2) : ":" + ("0" + offsetMinutes).slice(-2);
+                    preparedValue = date.toISOString().slice(0, -1) + offsetHours + offsetMinutes;
+                }
+                else if (format === "YYYY-MM-DD") {
+                    preparedValue = year + "-" + month + "-" + day;
+                }
+                else if (format === "DD-MM-YYYY") {
+                    preparedValue = day + "-" + month + "-" + year;
+                }
+                else {
+                    console.error("The format must be 'YYYY-MM-DD' or 'DD-MM-YYYY', if the attribute is missing, ISO 8601 is used.");
+                }
+            }
+            break;
+        }
+        case "number": {
+            preparedValue = thousandsSeparator(preparedValue);
+            break;
+        }
+        case "linechart": {
+            preparedValue = Object.assign({
+                name: key,
+                staObject: preparedValue
+            }, mappingObj);
+            break;
+        }
+        case "boolean": {
+            format = format === "DD.MM.YYYY HH:mm:ss" ? {true: "true", false: "false"} : format;
+            preparedValue = getBooleanValue(preparedValue, format);
+            break;
+        }
+        // default equals to mappingObj.type === "string"
+        default: {
+            preparedValue = String(preparedValue);
+        }
+    }
+    if (preparedValue && mappingObj.suffix && preparedValue !== "undefined") {
+        preparedValue = appendSuffix(preparedValue, mappingObj.suffix);
+    }
+    if (preparedValue && mappingObj.prefix && preparedValue !== "undefined") {
+        preparedValue = prependPrefix(preparedValue, mappingObj.prefix);
+    }
+    return preparedValue;
+}
+
+/**
+ * Maps the feature properties by the given object.
+ * @param {Object} properties The feature properties.
+ * @param {Object} mappingObject Object to me mapped.
+ * @param {Boolean} [isNested=true] Flag if Object is nested, like "gfiAttributes".
+ * @returns {Object} The mapped properties.
+ */
+function mapAttributes (properties, mappingObject, isNested = true) {
+    let mappedProperties;
+
+    if (!mappingObject) {
+        return false;
+    }
+    if (!isNested) {
+        if (typeof mappingObject === "string") {
+            mappedProperties = prepareValue(properties, mappingObject);
+        }
+        else {
+            mappedProperties = prepareValueFromObject(mappingObject.name, mappingObject, properties);
+        }
+    }
+    else {
+        mappedProperties = {};
+        Object.keys(mappingObject).forEach(key => {
+            let newKey = mappingObject[key],
+                value = prepareValue(properties, key);
+
+            if (typeof newKey === "object") {
+                value = prepareValueFromObject(key, newKey, properties);
+                newKey = newKey.name;
+            }
+            if (value && value !== "undefined") {
+                mappedProperties[newKey] = value;
+            }
+        });
+    }
+    return mappedProperties;
+}
+
+export {
+    mapAttributes,
+    isObjectPath,
+    prepareValue
+};

package/src/lib/getValueFromObjectByPath.js

@@ -0,0 +1,73 @@
+/**
+ * gets the parts of the given path splitted by ".", ignoring escaped "."
+ * @param {String} path the path to split
+ * @param {String} [delimitor="."] the delimitor to use
+ * @returns {String[]} the resulting parts of the path
+ */
+function getPathPartsFromPath (path, delimitor = ".") {
+    const len = path.length,
+        result = [];
+    let letter = "",
+        word = "";
+
+    for (let i = 0; i < len; i++) {
+        letter = path[i];
+
+        if (letter === "\\") {
+            i++;
+            letter = path[i];
+        }
+        else if (letter === delimitor) {
+            result.push(word);
+            word = "";
+            continue;
+        }
+        word += letter;
+    }
+
+    if (word) {
+        result.push(word);
+    }
+    return result;
+}
+/**
+ * uses the given path to go into the given object and returns the value found at the end
+ * @info arrays can be accessed by using a number as index (e.g. "@Test.0.test")
+ * @param {Object} obj an object or array to search through
+ * @param {String} path the path to follow through the given object
+ * @param {String} [prefix="@"] the prefix to use to recognize the string as path to follow
+ * @param {String} [delimitor="."] the delimitor to use
+ * @param {Number} [depthBarrier=20] the depth barrier to avoid infinit recurtions
+ * @returns {*} any value found at the end or undefined if nothing was found
+ */
+function getValueFromObjectByPath (obj, path, prefix = "@", delimitor = ".", depthBarrier = 20) {
+    if (
+        typeof obj !== "object"
+        || obj === null
+        || typeof path !== "string"
+        || (
+            typeof prefix === "string"
+            && path.substr(0, prefix.length) !== prefix
+        )
+    ) {
+        return undefined;
+    }
+    const pathParts = getPathPartsFromPath(typeof prefix === "string" ? path.substring(prefix.length) : path, delimitor),
+        len = pathParts.length;
+    let value = obj,
+        depth = 0;
+
+    for (let i = 0; i < len; i++) {
+        if (typeof value !== "object" || value === null) {
+            return undefined;
+        }
+        value = value[pathParts[i]];
+        depth++;
+        if (typeof value === "undefined" || depth > depthBarrier) {
+            return undefined;
+        }
+    }
+    return value;
+}
+
+export {getValueFromObjectByPath, getPathPartsFromPath};

package/src/lib/thousandsSeparator.js

@@ -0,0 +1,23 @@
+
+/**
+ * adds thousands seperators into a number and changes the decimal point
+ * @param {(Number|String)} num the number as number or string
+ * @param {String} [delimAbs="."] the letter(s) to use as thousand point
+ * @param {String} [delimDec=","] the letter(s) to use as decimal point
+ * @returns {String}  the given number with thousands seperators or an empty string if any invalid num was given
+ */
+function thousandsSeparator (num, delimAbs = ".", delimDec = ",") {
+    if (typeof num !== "number" && typeof num !== "string") {
+        return "";
+    }
+
+    const value = typeof num !== "string" ? num.toString() : num,
+        decPointPos = value.indexOf("."),
+        abs = decPointPos > -1 ? value.substring(0, decPointPos) : value,
+        result = abs.replace(/\B(?=(\d{3})+(?!\d),?.*)/g, delimAbs),
+        dec = decPointPos > -1 ? value.substring(decPointPos + 1) : false;
+
+    return dec ? result + delimDec + dec : result;
+}
+
+export default thousandsSeparator;