@masterportal/masterportalapi 2.13.0 → 2.15.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;

package/src/maps/ol/olMap.js

@@ -84,12 +84,13 @@ function injectErrorCallback (layer, errorCallback) {
  * This function is available on all ol/Map instances.
  * @param {(string|ol/layer/Base)} layerOrId - if of layer to add to map
  * @param {object} [params] - optional parameter object
+ * @param {boolean} [params.layerParams={}] - additional layerParams specified in portalConfig
  * @param {boolean} [params.visibility=true] - whether added layer is initially visible
  * @param {Number} [params.transparency=0] - how visible the layer is initially
  * @param {Function} [params.errorCallback=console.error] - callback for layer source error events
  * @returns {?ol.Layer} added layer
  */
-function addLayer (layerOrId, params = {visibility: true, transparency: 0, errorCallback: console.error}) {
+function addLayer (layerOrId, params = {layerParams: {}, visibility: true, transparency: 0, errorCallback: console.error}) {
     const errorCallback = typeof params.errorCallback === "function"
         ? params.errorCallback
         : console.error;
@@ -108,7 +109,7 @@ function addLayer (layerOrId, params = {visibility: true, transparency: 0, error
             console.error("Layer with id '" + layerOrId + "' has unknown type '" + rawLayer.typ + "'. No layer added to map.");
             return null;
         }
-        layer = layerBuilder.createLayer(rawLayer, {}, {map: this});
+        layer = layerBuilder.createLayer(rawLayer, {layerParams: params.layerParams}, {map: this});
         layer.setVisible(typeof params.visibility === "boolean" ? params.visibility : true);
         layer.setOpacity(typeof params.transparency === "number" ? (100 - params.transparency) / 100 : 1);
         injectErrorCallback(layer, errorCallback);
@@ -169,7 +170,7 @@ export function createMap (config = defaults, {mapParams, callback, errorCallbac
     rawLayerList.initializeLayerList(config.layerConf, (param, error) => {
         getInitialLayers(config)
             .forEach(layer => {
-                map.addLayer(layer.id, {errorCallback});
+                map.addLayer(layer.id, {layerParams: layer, errorCallback});
             });
 
         if (typeof callback === "function") {

package/src/renderer/webgl.js

@@ -0,0 +1,250 @@
+import WebGLPointsLayer from "ol/layer/WebGLPoints";
+import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer";
+import VectorLayer from "ol/layer/Layer";
+import {packColor} from "ol/renderer/webgl/shaders";
+import styleList from "../vectorStyle/styleList";
+import {getRulesForFeature} from "../vectorStyle/lib/getRuleForIndex";
+
+/**
+ * The default style for OpenLayers WebGLPoints class
+ * @see https://openlayers.org/en/latest/examples/webgl-points-layer.html
+ * @private
+ */
+const defaultStyle = {
+    symbol: {
+        symbolType: "circle",
+        size: 20,
+        color: "#006688",
+        rotateWithView: false,
+        offset: [0, 0],
+        opacity: 0.6
+    }
+};
+
+/**
+ * parses the styling rules for the renderer
+ * @static
+ * @private
+ * @returns {Object} the style options object with conditional functions
+ */
+export function getRenderFunctions () {
+    return {
+        /**
+         * Used for polygon fills
+         * Reads the relevant properties from the Masterportal style object
+         * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
+         */
+        fill: {
+            attributes: {
+                color: (feature) => {
+                    return packColor(feature.styleRule?.style.polygonFillColor || "#006688");
+                },
+                opacity: (feature) => {
+                    return typeof feature.styleRule?.style.polygonFillColor?.[3] === "number" ?
+                        feature.styleRule.style.polygonFillColor[3] : 1;
+                }
+            }
+        },
+        stroke: {
+            /**
+             * Used for polygon edges and lineStrings
+             * Reads the relevant properties from the Masterportal style object
+             * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
+             */
+            attributes: {
+                color: (feature) => {
+                    return packColor(feature.styleRule?.style.polygonStrokeColor || "#006688");
+                },
+                width: (feature) => {
+                    return feature.styleRule?.style.polygonStrokeWidth || 1;
+                },
+                opacity: (feature) => {
+                    return typeof feature.styleRule?.style.polygonStrokeColor?.[3] === "number" ?
+                        feature.styleRule.style.polygonStrokeColor[3] : 1;
+                }
+            }
+        },
+        point: {
+            /**
+             * As of now, the generic VectorLayerRenderer only supports points rendered as quads
+             * available attributes: color, size, opacity
+             * Due to that, we use WebGLPoints Layer Class for point geom types
+             * Reads the relevant properties from the Masterportal style object
+             * @see https://bitbucket.org/geowerkstatt-hamburg/masterportal/src/dev/doc/style.json.md
+             */
+            attributes: {
+                color: (feature) => {
+                    return packColor(feature.styleRule?.style.circleFillColor || "#006688");
+                },
+                size: (feature) => {
+                    return feature.styleRule?.style.circleRadius || 20;
+                },
+                opacity: (feature) => {
+                    return typeof feature.styleRule?.style.circleFillColor?.[3] === "number" ?
+                        feature.styleRule.style.circleFillColor[3] : 1;
+                }
+            }
+        }
+    };
+}
+
+/**
+ * Creates a layer object to extend from.
+ * @augments VectorLayer
+ * @private
+ * @implements {WebGLVectorLayerRenderer}
+ * @param {Object} attrs attributes of the layer
+ * @returns {module:ol/layer/Layer} the LocalWebGLLayer with a custom renderer for WebGL styling
+ */
+export function createVectorLayerRenderer () {
+    /**
+     * @class LocalWebGLLayer
+     * @see https://openlayers.org/en/latest/examples/webgl-vector-layer.html
+     * @description the temporary class with a custom renderer to render the vector data with WebGL
+     */
+    class LocalWebGLLayer extends VectorLayer {
+        /**
+         * Creates a new renderer that takes the defined style of the new layer as an input
+         * @returns {module:ol/renderer/webgl/WebGLVectorLayerRenderer} the custom renderer
+         * @experimental
+         */
+        createRenderer () {
+            return new WebGLVectorLayerRenderer(this, getRenderFunctions());
+        }
+    }
+
+    return LocalWebGLLayer;
+}
+
+/**
+ * Parses the vectorStyle from style.json to the feature
+ * to reduce processing on runtime
+ * @private
+ * @param {module:ol/Feature} feature - the feature to check
+ * @param {module:Backbone/Model} [styleObject] - (optional) the style model from StyleList
+ * @returns {void}
+ */
+export function formatFeatureStyles (feature, styleObject) {
+    if (!styleObject) {
+        return;
+    }
+
+    // extract first matching rule only
+    const rule = getRulesForFeature(styleObject, feature)[0];
+
+    // don't set on properties to avoid GFI issues
+    // undefined if no match
+    feature.styleRule = rule;
+}
+
+/**
+ * Layouts the geometry coordinates, removes the Z component
+ * @deprecated Will be probably removed in release version
+ * @private
+ * @param {module:ol/Feature} feature - the feature to format
+ * @returns {void}
+ */
+export function formatFeatureGeometry (feature) {
+    feature.getGeometry()?.setCoordinates?.(feature.getGeometry().getCoordinates(), "XY");
+}
+
+/**
+ * Cleans the data by automatically parsing data provided as strings to the accurate data type
+ * @todo Extend to Date types
+ * @private
+ * @param {module:ol/Feature} feature - the feature to format
+ * @param {String[]} [excludeTypes=["boolean"]] - types that should not be parsed from strings
+ * @returns {void}
+ */
+export function formatFeatureData (feature, excludeTypes = ["boolean"]) {
+    for (const key in feature.getProperties()) {
+        const
+            valueAsNumber = parseFloat(feature.get(key)),
+            valueIsTrue = typeof feature.get(key) === "string" && feature.get(key).toLowerCase() === "true" ? true : undefined,
+            valueIsFalse = typeof feature.get(key) === "string" && feature.get(key).toLowerCase() === "false" ? false : undefined;
+
+        if (!isNaN(parseFloat(feature.get(key))) && !excludeTypes.includes("number")) {
+            feature.set(key, valueAsNumber);
+        }
+        if (valueIsTrue === true && !excludeTypes.includes("boolean")) {
+            feature.set(key, valueIsTrue);
+        }
+        if (valueIsFalse === false && !excludeTypes.includes("boolean")) {
+            feature.set(key, valueIsFalse);
+        }
+    }
+}
+
+/**
+ * feature transformations called after loading
+ * called by the layer source loader, binds the instance of the layer model
+ * should be called on each source refresh
+ * @param {module:ol/Feature[]} features - the features loaded by the layer
+ * @param {String} styleId - The layer's styleId
+ * @param {String[]} excludeTypesFromParsing - types that should not be parsed from strings, only necessary for webgl
+ * @returns {void}
+ */
+export function afterLoading (features, styleId, excludeTypesFromParsing) {
+    const styleObject = styleList.returnStyleObject(styleId); // load styleModel to extract rules per feature
+
+    if (Array.isArray(features)) {
+        features.forEach(feature => {
+            formatFeatureGeometry(feature); /** @deprecated will propbably not be necessary anymore in release version */
+            formatFeatureStyles(feature, styleObject); /** @todo needs refactoring in release version  */
+            formatFeatureData(feature, excludeTypesFromParsing); /** Necessary since the WebGLPoints Style Syntax depends on data types (i.e. numbers not as strings) */
+        });
+    }
+}
+
+
+/**
+ * Creates the OL Layer instance, used to rebuild the layer when shown again after layer has been disposed
+ * @param {Object} attrs - the attributes of the layer
+ * @public
+ * @returns {VectorLayer | WebGLPointsLayer} returns the layer instance
+ */
+export function createLayer (attrs) {
+    let LayerConstructor = WebGLPointsLayer;
+    const options = {
+        id: attrs.id,
+        source: attrs.source,
+        disableHitDetection: false,
+        name: attrs.name,
+        typ: attrs.typ,
+        gfiAttributes: attrs.gfiAttributes,
+        gfiTheme: attrs.gfiTheme,
+        hitTolerance: attrs.hitTolerance || 10,
+        opacity: attrs.transparency ? (100 - attrs.transparency) / 100 : attrs.opacity,
+        renderer: "webgl",
+        styleId: attrs.styleId,
+        excludeTypesFromParsing: attrs.excludeTypesFromParsing
+    };
+
+    /**
+     * If the layer consists only of points, use WebGLPointsLayer
+     * For advanced styling options
+     * @see https://openlayers.org/en/latest/examples/webgl-points-layer.html
+    */
+    if (attrs.isPointLayer) {
+        /**
+         * @deprecated
+         * @todo will be replaced in the next OL release and incorporated in the WebGLVectorLayerRenderer
+         */
+        return new LayerConstructor({
+            style: attrs.style || defaultStyle,
+            disableHitDetection: false,
+            ...options,
+            isPointLayer: true
+        });
+    }
+
+    /**
+     * use ol/renderer/webgl/WebGLVectorLayerRenderer if not point layer
+     * Point styling as quads only
+     */
+    LayerConstructor = createVectorLayerRenderer(attrs);
+    return new LayerConstructor({
+        ...options,
+        isPointLayer: false
+    });
+}