@masterportal/masterportalapi 2.12.0 → 2.14.0

package/src/vectorStyle/createStyle.js

@@ -0,0 +1,259 @@
+import {Style} from "ol/style.js";
+import PointStyle from "./styles/point/stylePoint";
+import TextStyle from "./styles/styleText";
+import PolygonStyle from "./styles/polygon/stylePolygon";
+import LineStringStyle from "./styles/styleLine";
+import CesiumStyle from "./styles/styleCesium";
+import {getRuleForIndex, getRulesForFeature} from "./lib/getRuleForIndex";
+
+const legendsOfAllStyles = [],
+    uniqueStyles = [];
+let legendInformationLength = 0;
+
+/**
+ * Returns true if feature contains some kind of MultiGeometry
+ * @param   {string}  geometryType     the geometry type to check
+ * @returns {Boolean} is geometrytype a multiGeometry
+ */
+function isMultiGeometry (geometryType) {
+    return geometryType === "MultiPoint" || geometryType === "MultiLineString" || geometryType === "MultiPolygon" || geometryType === "GeometryCollection" || geometryType === "Cesium";
+}
+
+/**
+ * Returns the style for simple (non-multi) geometry types
+ * @param   {string}  geometryType GeometryType
+ * @param   {ol/feature}  feature     the ol/feature to style
+ * @param   {object}  rule       styling rules to check.
+ * @param   {Boolean} isClustered  Flag to show if feature is clustered.
+ * @param   {String} wfsImgPathFromConfig path to wfsImg from Config
+ * @returns {ol/style/Style}    style is always returned
+ */
+function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsImgPathFromConfig) {
+    const style = rule?.style,
+        legendValue = style ? style.legendValue : null,
+        alreadyExisitingStyle = uniqueStyles.find(element => element.featureStyle === style && element.geometryType === geometryType);
+    let styleObject;
+
+    feature.legendValue = legendValue ? legendValue : null;
+
+    if (alreadyExisitingStyle) {
+        styleObject = alreadyExisitingStyle.featureStyleObject;
+    }
+    else if (geometryType === "Point") {
+        styleObject = new PointStyle(feature, style, isClustered);
+    }
+    else if (geometryType === "LineString") {
+        styleObject = new LineStringStyle(feature, style, isClustered);
+    }
+    else if (geometryType === "Polygon") {
+        styleObject = new PolygonStyle(feature, style, isClustered);
+    }
+    else if (geometryType === "Cesium") {
+        styleObject = new CesiumStyle(rule);
+        styleObject.initialize(rule);
+        styleObject.addLegendInfo("Cesium", styleObject, rule);
+        styleObject.legendValue = legendValue;
+        return styleObject;
+    }
+    else if (geometryType === "LinearRing" || geometryType === "Circle") {
+        console.warn("Geometry type not implemented: " + geometryType + " default style ist used for feature " + feature);
+        return new Style();
+    }
+    else {
+        console.warn("Geometry type not implemented: " + geometryType + " default style ist used for feature " + feature);
+        return new Style();
+    }
+    uniqueStyles.push({featureStyle: style, featureStyleObject: styleObject, geometryType});
+    styleObject.initialize(feature, style, isClustered, wfsImgPathFromConfig);
+    styleObject.addLegendInfo(geometryType, styleObject, rule);
+    styleObject.legendValue = legendValue;
+    return styleObject;
+}
+
+/**
+ * Returns an array of simple geometry styles.
+ * @param   {string}  geometryType GeometryType
+ * @param   {ol/feature}  feature     the ol/feature to style
+ * @param   {object[]}  rules       styling rules to check.
+ * @param   {Boolean} isClustered  Flag to show if feature is clustered.
+ * @param   {String} wfsImgPathFromConfig path to wfsImg from Config
+ * @returns {ol/style/Style[]}    style array of simple geometry styles is always returned
+ */
+function getMultiGeometryStyle (geometryType, feature, rules, isClustered, wfsImgPathFromConfig) {
+    const olStyle = [];
+    let geometries = [];
+
+    if (typeof feature === "object") {
+        if (geometryType === "MultiPoint") {
+            geometries = feature.getGeometry().getPoints();
+        }
+        else if (geometryType === "MultiLineString") {
+            geometries = feature.getGeometry().getLineStrings();
+        }
+        else if (geometryType === "MultiPolygon") {
+            geometries = feature.getGeometry().getPolygons();
+        }
+        else if (geometryType === "GeometryCollection") {
+            geometries = feature.getGeometry().getGeometries();
+        }
+
+        geometries.forEach((geometry, index) => {
+            const geometryTypeSimpleGeom = geometry.getType(),
+                rule = rules ? getRuleForIndex(rules, index) : undefined,
+                simpleStyle = getSimpleGeometryStyle(geometryTypeSimpleGeom, feature, rule, isClustered, wfsImgPathFromConfig);
+
+            // For simplicity reasons we do not support multi encasulated multi geometries but ignore them.
+            if (isMultiGeometry(geometryTypeSimpleGeom)) {
+                console.warn("Multi encapsulated multiGeometries are not supported.");
+            }
+            else if (!simpleStyle.styleMultiGeomOnlyWithRule || rule) {
+                olStyle.push(simpleStyle);
+            }
+        });
+    }
+    else if (geometryType === "Cesium") {
+        rules.forEach(rule => {
+            const simpleStyle = getSimpleGeometryStyle(geometryType, feature, rule, isClustered, wfsImgPathFromConfig);
+
+            olStyle.push(simpleStyle);
+        });
+    }
+    else {
+        const simpleStyle = getSimpleGeometryStyle(geometryType, feature, rules, isClustered, wfsImgPathFromConfig);
+
+        simpleStyle.getStyle().setGeometry(geometryType);
+        olStyle.push(simpleStyle);
+    }
+    return olStyle;
+}
+
+/**
+ * Returns the style for the geometry object
+ * @param   {ol/feature}  feature     the ol/feature to style
+ * @param   {object[]}  rules       styling rules to check. Array can be empty.
+ * @param   {Boolean} isClustered Flag to show if feature is clustered.
+ * @param   {String} wfsImgPathFromConfig path to wfsImg from Config
+ * @returns {ol/style/Style}    style is always returned
+ */
+function getGeometryStyle (feature, rules, isClustered, wfsImgPathFromConfig) {
+    const geometryType = feature ? feature.getGeometry().getType() : "Cesium";
+
+    // For simple geometries the first styling rule is used.
+    // That algorithm implements an OR statement between multiple valid conditions giving precedence to its order in the style.json.
+    if (!isMultiGeometry(geometryType) && Object.prototype.hasOwnProperty.call(rules, 0) && Object.prototype.hasOwnProperty.call(rules[0], "style")) {
+        return getSimpleGeometryStyle(geometryType, feature, rules[0], isClustered, wfsImgPathFromConfig);
+    }
+    // MultiGeometries must be checked against all rules because there might be a "sequence" in the condition.
+    else if (isMultiGeometry(geometryType) && rules.length > 0 && rules.every(element => element?.style)) {
+        return getMultiGeometryStyle(geometryType, feature, rules, isClustered, wfsImgPathFromConfig);
+    }
+
+    // fall back to default styles as configured in geomType specific styles, if no rule is matched
+    console.warn("No valid styling rule found. Falling back to defaults");
+    return isMultiGeometry(geometryType)
+        ? getMultiGeometryStyle(geometryType, feature, undefined, isClustered, wfsImgPathFromConfig)
+        : getSimpleGeometryStyle(geometryType, feature, undefined, isClustered, wfsImgPathFromConfig);
+}
+
+/**
+ * Returns the style to label the object
+ * @param   {ol/feature}  feature     the ol/feature to style
+ * @param   {object}  style       styling rule from style.json
+ * @param   {Boolean} isClustered Flag to show if feature is clustered.
+ * @returns {ol/style/Text}    style is always returned
+ */
+function getLabelStyle (feature, style, isClustered) {
+    const styleObject = new TextStyle(feature, style, isClustered);
+
+    styleObject.initialize(feature, style, isClustered);
+    return styleObject.getStyle();
+}
+
+/**
+ * Captures the legend from a feature and pushes it to an array of all legends.
+ * @param   {string}  styleId styleId from a given feature
+ * @param   {object}  legendInformation legendInformation from a given feature
+ * @returns {void}
+ */
+function captureLegendFromFeature (styleId, legendInformation) {
+    let legend = legendsOfAllStyles.find(element => element.id === styleId);
+
+    if (!legend) {
+        legend = {id: styleId, legendInformation: []};
+        legendsOfAllStyles.push(legend);
+    }
+    else if (styleId === "default" && legend.legendInformation !== legendInformation) {
+        legend.legendInformation = legendInformation;
+        legendInformationLength = legendInformation.length;
+    }
+    else if (!legend.legendInformation.find(element => element.label === legendInformation[0].label)) {
+        legend.legendInformation.push(legendInformation[0]);
+
+        const event = new CustomEvent("legendCaptured");
+
+        event.id = legend.id;
+        if (this) {
+            this.dispatchEvent(event);
+        }
+    }
+}
+
+/**
+     * Function is called from layer models for each feature.
+     * @param   {String}  styleObject     id of the style
+     * @param   {ol/feature}  feature     the feature to style
+     * @param   {Boolean} isClustered is feature clustered
+     * @param   {String} wfsImgPathFromConfig path to wfsImg from Config
+     * @returns {ol/style/Style} style used in layer model
+     */
+function createStyle (styleObject, feature, isClustered, wfsImgPathFromConfig) {
+    const rules = getRulesForFeature(styleObject, feature),
+        // Takes first rule in array for labeling so that is giving precedence to the order in the style.json
+        style = Array.isArray(rules) && rules.length > 0 ? rules[0].style : null,
+        hasLabelField = style?.labelField,
+        geometryStyle = getGeometryStyle(feature, rules, isClustered, wfsImgPathFromConfig),
+        legendInformation = Array.isArray(geometryStyle) ? geometryStyle[0].legendInfos : geometryStyle.legendInfos,
+        styleObjectGeometry = Array.isArray(geometryStyle) ? geometryStyle[0].getStyle() : geometryStyle.getStyle();
+
+    captureLegendFromFeature(styleObject.styleId, legendInformation);
+
+    // label style is optional and depends on some fields
+    if (isClustered || hasLabelField) {
+        if (Array.isArray(styleObjectGeometry)) {
+            styleObjectGeometry[0].setText(getLabelStyle(feature, style, isClustered));
+        }
+        else {
+            styleObjectGeometry.setText(getLabelStyle(feature, style, isClustered));
+        }
+    }
+    return styleObjectGeometry;
+}
+
+async function returnLegendByStyleId (styleId) {
+    return new Promise(function (resolve) {
+        const legend = legendsOfAllStyles.find(element => element.id === styleId);
+
+        if (legend && (styleId.id !== "default" || legend.legendInformation.length === legendInformationLength)) {
+            resolve(legend);
+        }
+
+        this.addEventListener("legendCaptured", event => {
+            if (event.id === styleId && event.id !== "default") {
+                resolve(legendsOfAllStyles.find(element => element.id === event.id));
+            }
+            else if (legend && legend.legendInformation.length === legendInformationLength) {
+                resolve(legendsOfAllStyles.find(element => element.id === event.id));
+            }
+        }, false);
+    });
+}
+
+export default {
+    isMultiGeometry,
+    getSimpleGeometryStyle,
+    getMultiGeometryStyle,
+    getGeometryStyle,
+    getLabelStyle,
+    createStyle,
+    returnLegendByStyleId
+};

package/src/vectorStyle/lib/colorConvertions.js

@@ -0,0 +1,97 @@
+/**
+ * Makes sure that one rgb color always consists of four values
+ * @param {Number[]} newColor Color in rgb
+ * @return {Number[]} normColor
+ */
+export function normalizeRgbColor (newColor) {
+    const defaultArray = [1, 1, 1, 1];
+
+    return newColor.concat(defaultArray).slice(0, 4);
+}
+
+/**
+ * Converts hex value to rgbarray.
+ * @param {String} hex Color as hex string.
+ * @returns {Number[]} - Color als rgb array.
+ */
+export function hexToRgb (hex) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+        hexReplace = hex.replace(shorthandRegex, function (m, r, g, b) {
+            return r + r + g + g + b + b;
+        });
+    let result;
+
+    result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+    result = result.exec(hexReplace);
+
+    return result
+        ? [
+            parseFloat(result[1], 16),
+            parseFloat(result[2], 16),
+            parseFloat(result[3], 16)
+        ]
+        : null;
+}
+
+/**
+ * Converts number to hex string.
+ * @param {Number} c Color value as number.
+ * @returns {String} - Converted color number as hex string.
+ */
+export function componentToHex (c) {
+    const hex = Number(c).toString(16);
+
+    return hex.length === 1 ? "0" + hex : hex;
+}
+/**
+ * Converts rgb to hex.
+ * @param {Number} r Red value.
+ * @param {Number} g Green Value.
+ * @param {Number} b Blue value.
+ * @returns {String} - Hex color string.
+ */
+export function rgbToHex (r, g, b) {
+    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+/**
+ * Returns input color to destinated color.
+ * possible values for dest are "rgb" and "hex".
+ * color has to come as hex (e.g. "#ffffff" || "#fff") or as array (e.g [255,255,255,0]) or as String ("[255,255,255,0]")
+ * @param {Number[]|String} color The color to return.
+ * @param {String} dest Destination color type.
+ * @returns {String|Number[]} - The converted color.
+ */
+export function returnColor (color, dest) {
+    let src,
+        newColor = color,
+        pArray = [];
+
+    if (Array.isArray(newColor)) {
+        src = "rgb";
+    }
+    else if (typeof newColor === "string" && newColor.indexOf("#") === 0) {
+        src = "hex";
+    }
+    else if (typeof newColor === "string" && newColor.indexOf("#") === -1) {
+        src = "rgb";
+
+        pArray = newColor
+            .replace("[", "")
+            .replace("]", "")
+            .replace(/ /g, "")
+            .split(",");
+        newColor = [pArray[0], pArray[1], pArray[2], pArray[3]];
+    }
+
+    if (src === "hex" && dest === "rgb") {
+        newColor = hexToRgb(newColor);
+    }
+    else if (src === "rgb" && dest === "hex") {
+        newColor = rgbToHex(newColor[0], newColor[1], newColor[2]);
+    }
+
+    newColor = dest === "rgb" ? normalizeRgbColor(newColor) : newColor;
+
+    return newColor;
+}

package/src/vectorStyle/lib/createLegendInfo.js

@@ -0,0 +1,28 @@
+import {getSimpleGeometryStyle, getMultiGeometryStyle} from "../createStyle";
+/**
+ * Creates the style objects for the layer
+ * @param   {object[]} rules styling rules from the styleObject
+ * @param   {string[]} geometryType Array of geometry types
+ * @returns {void}
+ */
+export function createLegendInfo (rules, geometryType) {
+    let styleObject,
+        simpleGeom;
+
+    geometryType.forEach(geom => rules.forEach(rule => {
+        if (geom === "MultiSurface") {
+            simpleGeom = "Polygon";
+            styleObject = getSimpleGeometryStyle(simpleGeom, "", rule, false);
+            return styleObject;
+        }
+        else if (geom.includes("Multi")) {
+            simpleGeom = geom.replace("Multi", "");
+            styleObject = getMultiGeometryStyle(simpleGeom, "", rule, false);
+            return styleObject;
+        }
+
+        simpleGeom = geom;
+        styleObject = getSimpleGeometryStyle(simpleGeom, "", rule, false);
+        return styleObject;
+    }));
+}

package/src/vectorStyle/lib/getGeometryTypeFromService.js

@@ -0,0 +1,153 @@
+import {createLegendInfo} from "./createLegendInfo";
+
+/**
+ * Parses the xml with another structure to get the subelements from the layer
+ * @param   {string} xml response xml
+ * @param   {string} featureType wfs feature type from layer without namespace
+ * @returns {object[]} subElements of the xml element
+ */
+function getSubelementsFromXMLOtherStructure (xml, featureType) {
+    const elements = xml ? Array.from(xml.getElementsByTagName("element")) : [];
+    let subElements = [];
+
+    elements.forEach(element => {
+        if (element.getAttribute("name") === featureType) {
+            const sibling = element.nextElementSibling;
+
+            if (sibling && sibling.tagName === "complexType" && sibling.hasAttribute("name")) {
+                subElements = Array.from(sibling.getElementsByTagName("element"));
+            }
+        }
+    });
+    return subElements;
+}
+
+/**
+ * Parses the xml to get the subelements from the layer
+ * @param   {string} xml response xml
+ * @param   {string} featureType wfs feature type from layer. Namespace is taken into account.
+ * @returns {object[]} subElements of the xml element
+ */
+function getSubelementsFromXML (xml, featureType) {
+    const elements = xml ? Array.from(xml.getElementsByTagName("element")) : [];
+    let subElements = [],
+        featureTypeWithoutNamespace = featureType;
+
+    if (featureType && featureType.indexOf(":") > -1) {
+        featureTypeWithoutNamespace = featureType.substr(featureType.indexOf(":") + 1, featureType.length);
+    }
+
+    elements.forEach(element => {
+        if (element.getAttribute("name") === featureTypeWithoutNamespace) {
+            subElements = Array.from(element.getElementsByTagName("element"));
+        }
+    });
+    if (subElements.length === 0) {
+        subElements = getSubelementsFromXMLOtherStructure(xml, featureTypeWithoutNamespace);
+    }
+    return subElements;
+}
+
+/**
+ * Parses the geometry types from the subelements
+ * @param   {Object[]} [subElements=[]] xml subelements
+ * @param   {String[] | String} [styleGeometryType=null] The configured geometry type of the layer
+ * @returns {String[]} geometry types of the layer
+ */
+function getTypeAttributesFromSubelements (subElements = [], styleGeometryType = null) {
+    const geometryType = [];
+
+    subElements.forEach(elements => {
+        const typeAttribute = elements.getAttribute("type");
+        let geomType = styleGeometryType;
+
+        if (typeAttribute && typeAttribute.includes("gml")) {
+            geomType = styleGeometryType || typeAttribute.split("gml:")[1].replace("PropertyType", "");
+            if (geomType === "Geometry") {
+                geometryType.push("Point");
+                geometryType.push("Polygon");
+                geometryType.push("LineString");
+            }
+            else if (Array.isArray(geomType)) {
+                geomType.forEach(singleGeomType => geometryType.push(singleGeomType));
+            }
+            else {
+                geometryType.push(geomType);
+            }
+        }
+    });
+    return geometryType;
+}
+/**
+* Requests the DescribeFeatureType of the wfs layer and starts the function to parse the xml and creates the legend info
+* @param   {object[]} rules styling rules from the styleObject
+* @param   {string} wfsURL url from layer
+* @param   {string} version wfs version from layer
+* @param   {string} featureType wfs feature type from layer
+* @param   {string[] | string} styleGeometryType The configured geometry type of the layer
+* @param   {boolean} isSecured true if wfs is secured
+* @param {function} [callback] - called with services after loaded; called with false and error on error
+* @returns {void}
+*/
+// eslint-disable-next-line max-params
+function getGeometryTypeFromWFS (rules, wfsURL, version, featureType, styleGeometryType, isSecured, callback) {
+    const params = {
+        "SERVICE": "WFS",
+        "VERSION": version,
+        "REQUEST": "DescribeFeatureType"
+    };
+    let url = wfsURL + "?";
+
+    Object.keys(params).forEach(key => {
+        url += key + "=" + params[key] + "&";
+    });
+    url = url.slice(0, -1);
+
+
+    fetch(url, {
+        method: "get",
+        withCredentials: isSecured,
+        responseType: "text"
+    }).then(response => response.text())
+        .then(responseAsString => new window.DOMParser().parseFromString(responseAsString, "text/xml"))
+        .then(responseXML => {
+            const subElements = getSubelementsFromXML(responseXML, featureType),
+                geometryTypes = getTypeAttributesFromSubelements(subElements, styleGeometryType);
+
+            createLegendInfo(rules, geometryTypes);
+        }).catch(error => {
+            return callback(error);
+        });
+}
+
+/**
+ * Requests the geometry type of the OAF collection and creates the legend info
+ * @param   {object[]} rules styling rules from the styleObject
+ * @param   {string} oafURL url from layer
+ * @param   {String} collection the collection name to fetch geometry type for
+ * @param {function} [callback] - called with services after loaded; called with false and error on error
+ * @returns {void}
+ */
+function getGeometryTypeFromOAF (rules, oafURL, collection, callback) {
+    const url = oafURL + "/collections/" + collection + "/items?limit=1";
+
+    fetch(url, {
+        method: "get",
+        headers: {
+            accept: "application/geo+json"
+        }
+    }).then(response => {
+        const geometryType = response.data?.features[0]?.geometry?.type;
+
+        if (geometryType) {
+            createLegendInfo(rules, [geometryType]);
+        }
+    }).catch(error => {
+        return callback(error);
+    });
+}
+
+export default {
+    getGeometryTypeFromWFS,
+    getGeometryTypeFromOAF
+};

package/src/vectorStyle/lib/getRuleForIndex.js

@@ -0,0 +1,62 @@
+import {checkProperties} from "../lib/valueOperations";
+/**
+ * Returning all rules that fit to the feature. Array could be empty.
+ * @param {object} styleObject the styleObject with style information
+ * @param {ol/feature} feature the feature to check
+ * @returns {object[]} return all rules that fit to the feature
+ */
+export function getRulesForFeature (styleObject, feature) {
+    styleObject.rules.forEach(rule => {
+        if (typeof feature.get("rotation") !== "undefined") {
+            rule.style.rotation = feature.get("rotation");
+        }
+    });
+    return styleObject.rules.filter(rule => checkProperties(feature, rule));
+}
+/**
+ * Returns the first rule that satisfies the index of the multi geometry.
+ * The "sequence" must be an integer with defined min and max values representing the index range.
+ * @param   {object[]} rules all rules the satisfy conditions.properties.
+ * @param   {integer} index the simple geometries index
+ * @returns {object|undefined} the proper rule
+ */
+export function getIndexedRule (rules, index) {
+    return rules.find(rule => {
+        const sequence = rule.conditions?.sequence ? rule.conditions.sequence : null,
+            isSequenceValid = sequence && Array.isArray(sequence) && sequence.every(element => typeof element === "number") && sequence.length === 2 && sequence[1] >= sequence[0],
+            minValue = isSequenceValid ? sequence[0] : -1,
+            maxValue = isSequenceValid ? sequence[1] : -1;
+
+        return index >= minValue && index <= maxValue;
+    });
+}
+
+/**
+ * Returns the best rule for the indexed feature giving precedence to the index position.
+ * Otherwhile returns the rule with conditions but without a sequence definition.
+ * Fallback is a rule without conditions.
+ * That means also: A rule with fitting properties but without fitting sequence is never used for any multi geometry.
+ * @param   {object[]} rules the rules to check
+ * @param   {integer} index the index position of geometry in the multi geometry
+ * @returns {object|null} the rule or null if no rule match the conditions
+ */
+export function getRuleForIndex (rules, index) {
+    const indexedRule = getIndexedRule(rules, index),
+        propertiesRule = rules.find(rule => {
+            return rule?.conditions && !Object.prototype.hasOwnProperty.call(rule.conditions, "sequence");
+        }),
+        fallbackRule = rules.find(rule => {
+            return !rule?.conditions;
+        });
+
+    if (indexedRule) {
+        return indexedRule;
+    }
+    else if (propertiesRule) {
+        return propertiesRule;
+    }
+    else if (fallbackRule) {
+        return fallbackRule;
+    }
+    return null;
+}