@masterportal/masterportalapi 2.27.0 → 2.28.0

package/CHANGELOG.md

@@ -5,20 +5,35 @@
 
 ### Unreleased - in development
 ## Added
+
 ## Changed
+
 ## Deprecated
+
 ## Removed
+
 ## Fixed
 
 ---
 
-### 2.27.0 - 2023-08-31
+### 2.28.0 - 2023-09-27
 ## Added
+- GfiAttributes: GFI Attributes can now be configured as HTML tags, e.g <a>, <img> or <iframe>
+
 ## Changed
-- VectorStyle: 'initializeStyleList' is asynchron, waits for loading finished and returns the loaded styles.
-## Deprecated
-## Removed
+- The following packages have been updated:
+    - dependencies:
+        - ol: 7.5.1 to 7.5.2 (This version fix a bug for vectorTiles with declutter: true)
 ## Fixed
+- Issue Masterportal #1067 VectorStyle: if there is a ? in the services URL, no further one is added
+- Cesium tileset: set visibility and set opacity was fixed.
+- Webgl: set default style for feature and fix the opacity problem
+
+---
+
+### 2.27.0 - 2023-08-31
+## Changed
+- VectorStyle: 'initializeStyleList' is asynchron, waits for loading finished and returns the loaded styles.
 
 ---
 
@@ -31,7 +46,6 @@
 ---
 
 ## 2.25.0 - 2023-08-21
-
 ### Changed
 - WebGL: method "afterLoading" catches MultiPoint geometries and parses them to a single point feature for proper rendering
 - WebGL Render-Pipeline for VectorLayer of type VectorTile can be called using {"renderer": "webgl"} in config.json.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -21,8 +21,8 @@
   "dependencies": {
     "core-js": "^3.32.0",
     "dayjs": "^1.11.9",
-    "ol": "7.5.1",
-    "olcs": "^2.15.0",
+    "ol": "7.5.2",
+    "olcs": "2.15.0",
     "proj4": "^2.9.0",
     "xml2js": "^0.6.2"
   },

package/src/layer/tileset.js

@@ -63,7 +63,11 @@ Tileset.prototype.setOpacity = function (opacity) {
         color = splitValues.toString();
     }
 
-    this.tileset.style = new Cesium.Cesium3DTileStyle({color});
+    this.tileset.then(function (tileset) {
+        if (tileset) {
+            tileset.style = new Cesium.Cesium3DTileStyle({color});
+        }
+    });
 };
 
 /**
@@ -80,11 +84,12 @@ Tileset.prototype.setVisible = function (value, map) {
                     map.getCesiumScene().primitives.add(tileset);
                 });
             }
-            this.tileset.show = true;
-        }
-        else {
-            this.tileset.show = false;
         }
+        this.tileset.then(function (tileset) {
+            if (tileset) {
+                tileset.show = value;
+            }
+        });
     }
 };
 

package/src/lib/attributeMapper.js

@@ -118,6 +118,29 @@ function getValueFromCondition (key, condition, properties) {
 
 }
 
+/**
+ * Maps the feature properties by the given object. if the value is the wildcard '%value%' then the prepared value is taken.
+ * @param {HTML} htmltag The html tag.
+ * @param {Object} properties The properties for the htmltag.
+ * @param {String} preparedValue The prepared value.
+ * @returns {HTML} The html tag with mapped properties.
+ */
+function addPropertiesToHtmlTag (htmltag, properties, preparedValue) {
+    const htmltagWithproperties = htmltag;
+
+    if (properties) {
+        Object.keys(properties).forEach(prop => {
+            if (properties[prop] === "%value%") {
+                htmltagWithproperties.setAttribute(prop, preparedValue);
+            }
+            else {
+                htmltagWithproperties.setAttribute(prop, properties[prop]);
+            }
+        });
+    }
+    return htmltagWithproperties;
+}
+
 /**
  * Derives the gfi value if the value is an object.
  * @param {*} key Key of Attribute.
@@ -127,10 +150,12 @@ function getValueFromCondition (key, condition, properties) {
  */
 function prepareValueFromObject (key, mappingObj, properties) {
     const type = mappingObj?.type ? mappingObj.type : "string",
-        condition = mappingObj?.condition ? mappingObj.condition : null;
+        condition = mappingObj?.condition ? mappingObj.condition : null,
+        serializer = new XMLSerializer();
     let preparedValue = prepareValue(properties, key),
         format = mappingObj?.format ? mappingObj.format : "YYYY-MM-DDTHH:mm:ss.SSSZ",
-        date;
+        date,
+        htmltag;
 
     if (condition) {
         preparedValue = getValueFromCondition(key, condition, properties);
@@ -172,6 +197,32 @@ function prepareValueFromObject (key, mappingObj, properties) {
             preparedValue = getBooleanValue(preparedValue, format);
             break;
         }
+        case "html": {
+            // create tag
+            if (mappingObj?.html?.tag) {
+                htmltag = document.createElement(mappingObj?.html?.tag);
+            }
+            // create innerHTML
+            if (mappingObj?.html?.innerHTML === "%value%") {
+                htmltag.innerHTML = preparedValue;
+            }
+            else if (mappingObj?.html?.innerHTML) {
+                htmltag.innerHTML = mappingObj?.html?.innerHTML;
+            }
+
+
+            if (htmltag) {
+                if (mappingObj?.html?.properties) {
+                    htmltag = addPropertiesToHtmlTag(htmltag, mappingObj?.html?.properties, preparedValue);
+                }
+                preparedValue = serializer.serializeToString(htmltag);
+                // remove xmlns
+                preparedValue = preparedValue.replace(/ xmlns="(.*?)"/g, "");
+
+            }
+
+            break;
+        }
         // default equals to mappingObj.type === "string"
         default: {
             preparedValue = String(preparedValue);

package/src/renderer/webgl.js

@@ -14,7 +14,7 @@ import {packColor, parseLiteralStyle} from "ol/webgl/styleparser.js";
  * @see https://openlayers.org/en/latest/examples/webgl-points-layer.html
  * @private
  */
-const defaultStyle = {
+const defaultPointStyle = {
         symbol: {
             symbolType: "circle",
             size: 20,
@@ -25,6 +25,13 @@ const defaultStyle = {
         }
     },
 
+    defaultPolygonStyle = {
+        fillColor: "#006688",
+        strokeColor: "#006688",
+        strokeWidth: 1,
+        opacity: 1
+    },
+
     /** @type {import('ol/style/literal.js').LiteralStyle} */
     style = {
         "stroke-color": ["get", "strokeColor"],
@@ -32,7 +39,7 @@ const defaultStyle = {
         "fill-color": ["get", "fillColor"],
         "opacity": ["get", "opacity", "number"],
         "size": ["get", "circleSize", "number"],
-        symbol: defaultStyle.symbol
+        symbol: defaultPointStyle.symbol
     };
 
 /**
@@ -165,29 +172,36 @@ export function createVectorTileLayerRenderer () {
  * @returns {void}
  */
 export function formatFeatureStyles (feature, styleObject) {
-    if (!styleObject) {
-        return;
-    }
+    let rule;
 
-    // extract first matching rule only
-    const rule = getRulesForFeature(styleObject, feature)[0];
+    if (styleObject) {
+        // extract first matching rule only
+        rule = getRulesForFeature(styleObject, feature)[0];
+    }
 
-    // undefined if no match
-    feature.styleRule = rule;
+    if (rule?.style) {
+        feature.styleRule = rule;
 
-    if (rule && rule.style) {
-        const polygonFillColor = returnColor(rule.style.polygonFillColor, "hex"),
+        const polygonFillColor = returnColor(rule.style.polygonFillColor, "rgba"),
             circleFillColor = returnColor(rule.style.circleFillColor, "hex"),
+
             fillColor = polygonFillColor ? polygonFillColor : circleFillColor,
             strokeColor = returnColor(rule.style.polygonStrokeColor || rule.style.lineStrokeColor, "hex"),
             strokeWidth = rule.style.polygonStrokeWidth || rule.style.lineStrokeWidth,
             size = rule.style.circleRadius;
 
-        feature.set("fillColor", fillColor ? fillColor : "#006688");
-        feature.set("strokeColor", strokeColor ? strokeColor : "#006688");
-        feature.set("strokeWidth", strokeWidth ? strokeWidth : 1);
-        feature.set("opacity", fillColor ? (rule.style.polygonFillColor || rule.style.circleFillColor)[3] : 1);
-        feature.set("circleSize", size ? size : 20);
+        feature.set("fillColor", fillColor || defaultPolygonStyle.fillColor);
+        feature.set("strokeColor", strokeColor || defaultPolygonStyle.strokeColor);
+        feature.set("strokeWidth", strokeWidth || defaultPolygonStyle.strokeWidth);
+        feature.set("opacity", fillColor ? (rule.style.polygonFillColor || rule.style.circleFillColor)[3] : defaultPolygonStyle.opacity);
+        feature.set("circleSize", size || defaultPointStyle.symbol.size);
+    }
+    else {
+        feature.set("fillColor", defaultPolygonStyle.fillColor);
+        feature.set("strokeColor", defaultPolygonStyle.strokeColor);
+        feature.set("strokeWidth", defaultPolygonStyle.strokeWidth);
+        feature.set("opacity", defaultPolygonStyle.opacity);
+        feature.set("circleSize", defaultPointStyle.symbol.size);
     }
 }
 
@@ -217,7 +231,7 @@ export function formatFeatureData (feature, excludeTypes = ["boolean"]) {
             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")) {
+        if (!isNaN(parseFloat(feature.get(key))) && !excludeTypes?.includes("number")) {
             feature.set(key, valueAsNumber);
         }
         if (valueIsTrue === true && !excludeTypes.includes("boolean")) {
@@ -288,14 +302,14 @@ export function createLayer (attrs) {
      * 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,
+            style: attrs.style || defaultPointStyle,
             disableHitDetection: false,
             ...options,
             isPointLayer: true
@@ -323,3 +337,12 @@ export function createLayer (attrs) {
         isPointLayer: false
     });
 }
+
+export default {
+    afterLoading,
+    createLayer,
+    createVectorLayerRenderer,
+    formatFeatureData,
+    formatFeatureGeometry,
+    formatFeatureStyles
+};

package/src/vectorStyle/lib/colorConvertions.js

@@ -90,6 +90,9 @@ export function returnColor (color, dest) {
     else if (src === "rgb" && dest === "hex") {
         newColor = rgbToHex(newColor[0], newColor[1], newColor[2]);
     }
+    else if (src === "rgb" && dest === "rgba") {
+        newColor = "rgba(" + newColor[0] + ", " + newColor[1] + ", " + newColor[2] + ", " + newColor[3] + ")";
+    }
 
     newColor = dest === "rgb" ? normalizeRgbColor(newColor) : newColor;
 

package/src/vectorStyle/lib/getGeometryTypeFromService.js

@@ -99,7 +99,14 @@ function getGeometryTypeFromWFS (rules, wfsURL, version, featureType, styleGeome
         "VERSION": version,
         "REQUEST": "DescribeFeatureType"
     };
-    let url = wfsURL + "?";
+    let url = wfsURL;
+
+    if (url && url.includes("?")) {
+        url += "&";
+    }
+    else {
+        url += "?";
+    }
 
     Object.keys(params).forEach(key => {
         url += key + "=" + params[key] + "&";

package/test/layer/tileset.test.js

@@ -75,40 +75,62 @@ describe("tileset.js", function () {
         });
     });
     describe("setOpacity", function () {
-        it("calls setOpacity sets opacity to terrain style", function () {
+        it("calls setOpacity sets opacity to terrain style", function (done) {
             const layer = new Tileset(attr, map);
 
             layer.setOpacity(0.5);
 
-            expect(layer.tileset.style).toEqual({color: "rgba(255, 255, 255, 0.5)"});
+            layer.tileset.then(function (tileset) {
+                if (tileset) {
+                    expect(tileset.style).toEqual({color: "rgba(255, 255, 255, 0.5)"});
+                    done();
+                }
+            });
         });
     });
     describe("setVisible", function () {
-        it("calls setVisible without map shall not fail", function () {
+        it("calls setVisible without map shall not fail", function (done) {
             const layer = new Tileset(attr, map);
 
             expect(layer.tileset.show).toEqual(undefined);
             layer.setVisible(true);
 
-            checkAttributes(layer, attr);
-            expect(layer.tileset.show).toEqual(undefined);
-            expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
+            layer.tileset.then(function (tileset) {
+                if (tileset) {
+                    checkAttributes(layer, attr);
+                    expect(layer.tileset.show).toEqual(undefined);
+                    expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
+                    done();
+                }
+            });
         });
-        it("sets the tileset layer visible", function () {
+        it("sets the tileset layer visible", function (done) {
             const layer = new Tileset(attr, map);
 
             layer.setVisible(true, map);
-            checkAttributes(layer, attr);
-            expect(layer.tileset.show).toEqual(true);
-            expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
+
+            layer.tileset.then(function (tileset) {
+                if (tileset) {
+                    checkAttributes(layer, attr);
+                    expect(tileset.show).toEqual(true);
+                    expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
+                    done();
+                }
+            });
         });
-        it("sets the tileset layer not visible", function () {
+        it("sets the tileset layer not visible", function (done) {
             const layer = new Tileset(attr, map);
 
             layer.setVisible(false, map);
-            checkAttributes(layer, attr);
-            expect(layer.tileset.show).toEqual(false);
-            expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
+
+            layer.tileset.then(function (tileset) {
+                if (tileset) {
+                    checkAttributes(layer, attr);
+                    expect(tileset.show).toEqual(false);
+                    expect(cesium3DTilesetSpy).toHaveBeenCalledTimes(1);
+                    done();
+                }
+            });
         });
     });
     describe("get", function () {

package/test/lib/attributeMapper.test.js

@@ -21,7 +21,8 @@ const props = {
                 }
             ]
         }
-    ]
+    ],
+    random_url: "http://random.url.de"
 };
 
 describe("src/utils/attributeMapper.js", () => {
@@ -272,6 +273,168 @@ describe("src/utils/attributeMapper.js", () => {
                 int: "12345"
             });
         });
+        it("should map object with mapping object and type:html", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "http://random.url.de"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        properties: {
+                            href: "%value%"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\"></a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        innerHTML: "%value%",
+                        properties: {
+                            href: "%value%"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\">http://random.url.de</a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a without innerHTML and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a"
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a></a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a and innerHTML", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        innerHTML: "myURL",
+                        properties: {
+                            href: "%value%"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\">myURL</a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        innerHTML: "myURL",
+                        properties: {
+                            href: "%value%",
+                            target: "_blank"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\" target=\"_blank\">myURL</a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag a and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "a",
+                        innerHTML: "%value%",
+                        properties: {
+                            href: "%value%",
+                            target: "_blank"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<a href=\"http://random.url.de\" target=\"_blank\">http://random.url.de</a>"
+            });
+        });
+        it("should map object with mapping object and type:html and tag img and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "img",
+                        properties: {
+                            src: "%value%",
+                            style: "width:150px"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<img src=\"http://random.url.de\" style=\"width:150px\" />"
+            });
+        });
+        it("should map object with mapping object and type:html and tag iframe and properties", () => {
+            const mappingObj = {
+                random_url: {
+                    name: "url",
+                    type: "html",
+                    html: {
+                        tag: "iframe",
+                        properties: {
+                            src: "%value%",
+                            foo: "bar",
+                            bar: "foo"
+                        }
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                url: "<iframe src=\"http://random.url.de\" foo=\"bar\" bar=\"foo\"></iframe>"
+            });
+        });
     });
     describe("isObjectPath", () => {
         it("should return true for \"@foobar\"", () => {

package/test/renderer/webgl.test.js

@@ -18,7 +18,7 @@ jest.mock("../../src/vectorStyle/styleList.js", () => {
 });
 
 describe("webgl.js", () => {
-    let layerParams, layerParamsVectorTile, rawLayer, rawLayerVectorTile, styleRule, styleObject;
+    let layerParams, layerParamsVectorTile, rawLayer, rawLayerVectorTile, styleRule, styleObject, defaultStyle;
 
     beforeEach(() => {
         layerParams = {
@@ -68,6 +68,13 @@ describe("webgl.js", () => {
         styleObject = {
             rules: [styleRule]
         };
+        defaultStyle = {
+            fillColor: "#006688",
+            strokeColor: "#006688",
+            strokeWidth: 1,
+            opacity: 1,
+            size: 20
+        };
     });
 
     describe("createLayer", () => {
@@ -156,7 +163,7 @@ describe("webgl.js", () => {
             it("set the necessary style attributes on the feature for literal style syntax", () => {
                 $feature = feature.clone();
                 webgl.formatFeatureStyles($feature, styleObject);
-                expect($feature.get("fillColor")).toEqual(returnColor(styleRule.style.polygonFillColor, "hex"));
+                expect($feature.get("fillColor")).toEqual(returnColor(styleRule.style.polygonFillColor, "rgba"));
                 expect($feature.get("strokeColor")).toEqual(returnColor(styleRule.style.polygonStrokeColor, "hex"));
                 expect($feature.get("strokeWidth")).toEqual(styleRule.style.polygonStrokeWidth);
                 expect($feature.get("opacity")).toEqual(styleRule.style.polygonFillColor[3]);
@@ -173,6 +180,19 @@ describe("webgl.js", () => {
                 expect($feature.get("opacity")).toEqual(styleRule.style.circleFillColor[3]);
                 expect($feature.get("circleSize")).toEqual(styleRule.style.circleRadius);
             });
+            it("set the necessary style attributes on the feature with default style", () => {
+                $feature = feature.clone();
+                styleRule = null;
+                styleObject = {
+                    rules: [styleRule]
+                };
+                webgl.formatFeatureStyles($feature, styleObject);
+                expect($feature.get("fillColor")).toEqual(defaultStyle.fillColor);
+                expect($feature.get("strokeColor")).toEqual(defaultStyle.strokeColor);
+                expect($feature.get("strokeWidth")).toEqual(defaultStyle.strokeWidth);
+                expect($feature.get("opacity")).toEqual(defaultStyle.opacity);
+                expect($feature.get("circleSize")).toEqual(defaultStyle.size);
+            });
         });
     });
-});
+});

package/test/vectorStyle/lib/colorConvertions.test.js

@@ -1,4 +1,10 @@
-import {normalizeRgbColor, componentToHex, rgbToHex, hexToRgb} from "../../../src/vectorStyle/lib/colorConvertions";
+import {
+    normalizeRgbColor,
+    componentToHex,
+    rgbToHex,
+    hexToRgb,
+    returnColor
+} from "../../../src/vectorStyle/lib/colorConvertions";
 
 describe("normalizeRgbColor", function () {
     it("should be extend the given array with length 3 by value 1", function () {
@@ -39,4 +45,26 @@ describe("hexToRgb", function () {
     it("should return null", function () {
         expect(hexToRgb("")).toEqual(null);
     });
-});
+});
+
+describe("returnColor", function () {
+    it("should return the parsed rgb value", function () {
+        expect(returnColor([255, 0, 0])).toEqual([255, 0, 0]);
+    });
+    it("should return the parsed rgb value with hex format", function () {
+        expect(returnColor([255, 0, 0, 0.5], "hex")).toEqual("#ff0000");
+    });
+    it("should return the parsed rgb value with rgba format", function () {
+        expect(returnColor([255, 0, 0, 0.5], "rgba")).toEqual("rgba(255, 0, 0, 0.5)");
+    });
+
+    it("should return the parsed rgb value with hex format", function () {
+        expect(returnColor("#ff0000")).toEqual("#ff0000");
+    });
+    it("should return the parsed rgb value with array in string", function () {
+        expect(returnColor("[255, 0, 0, 0.5]")).toEqual(["255", "0", "0", "0.5"]);
+    });
+    it("should return the parsed rgb value with array in string and hex format as destination format", function () {
+        expect(returnColor("[255, 0, 0, 0.5]", "hex")).toEqual("#ff0000");
+    });
+});