@masterportal/masterportalapi 2.13.0 → 2.15.0

package/src/vectorStyle/styles/styleText.js

@@ -0,0 +1,143 @@
+import StyleClass from "./style";
+import {Text, Fill, Stroke} from "ol/style.js";
+import {mapAttributes} from "../../lib/attributeMapper";
+import {prepareValue, isObjectPath} from "../../lib/attributeMapper";
+import defaultStyle from "./defaultStyles";
+
+class TextStyle extends StyleClass {
+    /**
+     * @description Class to create ol.style/Text
+     * @class TextStyle
+     * @constructor
+     * @extends StyleClass
+     * @memberof VectorStyle.Style
+     */
+    constructor () {
+        super();
+        this.attributes = {...defaultStyle.text};
+    }
+
+    /**
+    * This function initializes the styleText Object by setting or overwriting some attributes.
+    * @param {ol/feature} feature Feature to be styled.
+    * @param {object} styles styling properties to overwrite defaults
+    * @param {Boolean} isClustered Flag to show if feature is clustered.
+    * @returns {void}
+    */
+    initialize (feature, styles, isClustered) {
+        this.setFeature(feature);
+        this.setIsClustered(isClustered);
+        this.overwriteStyling(styles);
+        this.setStyle(this.getStyle());
+    }
+
+    /**
+    * This function returns a style for each feature.
+    * @returns {ol/style} - The created style.
+    */
+    getStyle () {
+        const isClustered = this.isClustered,
+            feature = this.feature,
+            labelField = this.labelField;
+
+        if (isClustered && feature.get("features")?.length > 1 && this.attributes.clusterTextType !== "none") {
+            return this.createClusteredTextStyle();
+        }
+        else if (labelField) {
+            return this.createLabeledTextStyle();
+        }
+
+        return new Text();
+    }
+
+    /**
+     * Returns the rotation value and its corresponding value according to style.json.
+     * @param {Object} rotation - The rotation object from the style.json
+     * @param {Object} featureValues - The values object from the feature
+     * @returns {number} - The rotation value in degrees or radiants.
+     */
+    getRotationValue (rotation, featureValues) {
+        if (typeof rotation === "object") {
+            const {value, isDegree} = rotation;
+
+            if (isObjectPath(value) && featureValues !== undefined) {
+                const rotationValueFromService = parseInt(prepareValue(featureValues, value), 10);
+
+                return isDegree ? rotationValueFromService * Math.PI / 180 : rotationValueFromService;
+            }
+            return isDegree ? parseInt(value, 10) * Math.PI / 180 : parseInt(value, 10);
+        }
+        return 0;
+    }
+
+    /**
+    * Creates text style for clustered features. The text attribute is set according to "clusterTextType".
+    * "clusterTextType" === "counter" sets the number of clustered features.
+    * "clusterTextType" === "text" sets the value of "clusterText" or "undefined".
+    * @returns {ol/style/Text} - The created style.
+    */
+    createClusteredTextStyle () {
+        const feature = this.feature;
+        let text;
+
+        if (this.attributes.clusterTextType === "counter") {
+            text = feature.get("features").length.toString();
+        }
+        else if (this.attributes.clusterTextType === "text" && typeof this.attributes.clusterText === "string") {
+            text = this.attributes.clusterText;
+        }
+        else {
+            text = "undefined";
+        }
+
+        return new Text({
+            text: text,
+            textAlign: this.attributes.clusterTextAlign,
+            offsetX: this.attributes.clusterTextOffsetX,
+            offsetY: this.attributes.clusterTextOffsetY,
+            font: this.attributes.clusterTextFont,
+            scale: this.attributes.clusterTextScale,
+            fill: new Fill({
+                color: this.attributes.clusterTextFillColor
+            }),
+            stroke: new Stroke({
+                color: this.attributes.clusterTextStrokeColor,
+                width: this.attributes.clusterTextStrokeWidth
+            }),
+            rotation: this.getRotationValue(this.attributes.rotation, feature.getProperties())
+        });
+    }
+
+    /**
+    * Creates text style for simple features. The text attribute is set using "labelField".
+    * @returns {ol/style/Text} - The created style.
+    */
+    createLabeledTextStyle () {
+        const feature = this.feature,
+            featureProperties = feature.getProperties(),
+            textSuffix = this.attributes.textSuffix;
+        let text = mapAttributes(featureProperties, this.attributes.labelField, false);
+
+        if (textSuffix !== "") {
+            text = text + " " + textSuffix;
+        }
+        return new Text({
+            text: text.toString(),
+            textAlign: this.attributes.textAlign,
+            offsetX: this.attributes.textOffsetX,
+            offsetY: this.attributes.textOffsetY,
+            font: this.attributes.textFont,
+            scale: this.attributes.textScale,
+            fill: new Fill({
+                color: this.attributes.textFillColor
+            }),
+            stroke: new Stroke({
+                color: this.attributes.textStrokeColor,
+                width: this.attributes.textStrokeWidth
+            }),
+            rotation: this.getRotationValue(this.attributes.rotation, featureProperties)
+        });
+    }
+}
+
+export default TextStyle;

package/test/layer/geojson/index.test.js

@@ -3,9 +3,17 @@ import VectorSource from "ol/source/Vector.js";
 import Feature from "ol/Feature";
 import {Style, Icon} from "ol/style.js";
 import {geojson} from "../../../src";
+import * as webgl from "../../../src/renderer/webgl.js";
 
 const features = [new Feature(), new Feature()];
 
+jest.mock("../../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../../src/renderer/webgl.js");
+
+    original.afterLoading = jest.fn();
+    return original;
+});
+
 describe("geojson/index", function () {
     describe("createLayer", function () {
         it("creates an ol/layer/Vector", function () {
@@ -70,6 +78,12 @@ describe("geojson/index", function () {
             expect(layer.get("name")).toEqual("name");
             expect(layer.get("layers")).toEqual("layer1, layer2");
         });
+        it("creates a WebGLLayer, with param renderer \"webgl\"", function () {
+            const layer = geojson.createLayer({}, {layerParams: {renderer: "webgl"}});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(VectorSource);
+        });
     });
 
     describe("createLayerSource", function () {
@@ -79,6 +93,15 @@ describe("geojson/index", function () {
             expect(source.getFormat()).toBeDefined();
             expect(source.getUrl()).toBeDefined();
         });
+        it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
+            const
+                rawLayer = {url: "example.com/geo.json"},
+                source = geojson.createLayerSource({...rawLayer, renderer: "webgl"}, {});
+
+            expect(source.getListeners("featuresloadend")).toHaveLength(2);
+            source.getListeners("featuresloadend")[1]({features: []});
+            expect(webgl.afterLoading).toHaveBeenCalled();
+        });
 
     });
 

package/test/layer/oaf.test.js

@@ -7,6 +7,7 @@ import defaults from "../../src/defaults";
 import GeoJSON from "ol/format/GeoJSON.js";
 import * as oaf from "../../src/layer/oaf";
 import {featureCollection} from "./resources/oafFeatures";
+import * as webgl from "../../src/renderer/webgl.js";
 
 jest.mock("../../src/rawLayerList.js", () => {
     const original = jest.requireActual("../../src/rawLayerList.js");
@@ -15,6 +16,13 @@ jest.mock("../../src/rawLayerList.js", () => {
     return original;
 });
 
+jest.mock("../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../src/renderer/webgl.js");
+
+    original.afterLoading = jest.fn();
+    return original;
+});
+
 
 describe("oaf.js", function () {
     describe("createLayer", function () {
@@ -107,6 +115,12 @@ describe("oaf.js", function () {
             expect(layer.get("name")).toEqual("name");
             expect(layer.get("layers")).toEqual("layer1, layer2");
         });
+        it("creates a WebGLLayer, with param renderer \"webgl\"", function () {
+            const layer = oaf.createLayer({id: "id"}, {layerParams: {renderer: "webgl"}});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(VectorSource);
+        });
     });
     describe("createLayerSource", function () {
         const consoleError = console.error;
@@ -241,5 +255,21 @@ describe("oaf.js", function () {
                 expect(afterLoadingMock.mock.calls.length).toBe(1);
             });
         });
+        it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
+            const
+                url = "https://url.de",
+                rawLayer = {
+                    id: "id",
+                    url: url,
+                    featureNS: "http://www.deegree.org/app",
+                    featureType: "krankenhaeuser_hh",
+                    version: "1.0.0"
+                },
+                source = oaf.createLayerSource({...rawLayer, renderer: "webgl"});
+
+            expect(source.getListeners("featuresloadend")).toHaveLength(1);
+            source.getListeners("featuresloadend")[0]({features: []});
+            expect(webgl.afterLoading).toHaveBeenCalled();
+        });
     });
 });

package/test/layer/vectorBase.test.js

@@ -4,6 +4,14 @@ import Polygon from "ol/geom/Polygon";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector.js";
 import * as vectorBase from "../../src/layer/vectorBase";
+import * as webgl from "../../src/renderer/webgl.js";
+
+jest.mock("../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../src/renderer/webgl.js");
+
+    original.afterLoading = jest.fn();
+    return original;
+});
 
 describe("vectorBase.js", function () {
 
@@ -25,23 +33,35 @@ describe("vectorBase.js", function () {
 
             expect(source).toBeInstanceOf(VectorSource);
         });
+        it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
+            vectorBase.createLayerSource({renderer: "webgl"});
+
+            expect(webgl.afterLoading).toHaveBeenCalled();
+        });
     });
 
     describe("createLayer", function () {
+        const attr = {
+            name: "Albus Percival Wulfric Brian Dumbledore",
+            typ: "VectorBase",
+            gfiAttributes: "ignore",
+            id: "Rawenclaw_01"
+        };
+
         it("creates a vector Base Layer", function () {
-            const attr = {
-                    name: "Albus Percival Wulfric Brian Dumbledore",
-                    typ: "VectorBase",
-                    gfiAttributes: "ignore",
-                    id: "Rawenclaw_01"
-                },
-                layer = vectorBase.createLayer(attr);
+            const layer = vectorBase.createLayer(attr);
 
             expect(layer).toBeInstanceOf(VectorLayer);
             expect(layer.get("name")).toEqual("Albus Percival Wulfric Brian Dumbledore");
             expect(layer.get("typ")).toEqual("VectorBase");
             expect(layer.get("id")).toEqual("Rawenclaw_01");
         });
+        it("creates a WebGLLayer, with param renderer \"webgl\"", function () {
+            const layer = vectorBase.createLayer({...attr, renderer: "webgl"});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(VectorSource);
+        });
     });
 
     describe("updateSource", function () {

package/test/layer/wfs.test.js

@@ -8,6 +8,7 @@ import {WFS} from "ol/format.js";
 import * as wfs from "../../src/layer/wfs";
 import {featureCollection} from "./resources/wfsFeatures";
 import {wfsFilterQuery} from "./resources/wfsFilter";
+import * as webgl from "../../src/renderer/webgl.js";
 
 jest.mock("../../src/rawLayerList.js", () => {
     const original = jest.requireActual("../../src/rawLayerList.js");
@@ -16,6 +17,13 @@ jest.mock("../../src/rawLayerList.js", () => {
     return original;
 });
 
+jest.mock("../../src/renderer/webgl.js", () => {
+    const original = jest.requireActual("../../src/renderer/webgl.js");
+
+    original.afterLoading = jest.fn();
+    return original;
+});
+
 
 describe("wfs.js", function () {
     describe("createLayer", function () {
@@ -107,6 +115,12 @@ describe("wfs.js", function () {
             expect(layer.get("name")).toEqual("name");
             expect(layer.get("layers")).toEqual("layer1, layer2");
         });
+        it("creates a WebGLLayer, with param renderer \"webgl\"", function () {
+            const layer = wfs.createLayer({version: "1.1.0"}, {layerParams: {renderer: "webgl"}});
+
+            expect(layer.constructor.name).toEqual("LocalWebGLLayer");
+            expect(layer.getSource()).toBeInstanceOf(VectorSource);
+        });
     });
     describe("createLayerSource", function () {
         const consoleError = console.error;
@@ -383,6 +397,22 @@ describe("wfs.js", function () {
                 expect(afterLoadingMock.mock.calls.length).toBe(1);
             });
         });
+        it("creates a vectorSource with an additional listener, when renderer is \"webgl\"", () => {
+            const
+                url = "https://url.de",
+                rawLayer = {
+                    id: "id",
+                    url: url,
+                    featureNS: "http://www.deegree.org/app",
+                    featureType: "krankenhaeuser_hh",
+                    version: "1.0.0"
+                },
+                source = wfs.createLayerSource({...rawLayer, renderer: "webgl"});
+
+            expect(source.getListeners("featuresloadend")).toHaveLength(1);
+            source.getListeners("featuresloadend")[0]({features: []});
+            expect(webgl.afterLoading).toHaveBeenCalled();
+        });
     });
 });
 

package/test/lib/attributeMapper.test.js

@@ -0,0 +1,290 @@
+import {mapAttributes, isObjectPath} from "../../src/lib/attributeMapper";
+
+const props = {
+    random_text: "foobar",
+    random_boolean: true,
+    random_int: 12345,
+    random_float: 1.23,
+    random_date: "2021-11-17 13:02:00 UTC",
+    random_datastreams: [
+        {
+            Observations: [
+                {
+                    result: 123
+                }
+            ]
+        },
+        {
+            Observations: [
+                {
+                    result: 456
+                }
+            ]
+        }
+    ]
+};
+
+describe("src/utils/attributeMapper.js", () => {
+    describe("mapAttributes", () => {
+        it("should map object with single attribute", () => {
+            const mappingObj = {
+                random_text: "text"
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                text: "foobar"
+            });
+        });
+        it("should map object with single attribute and objectpath", () => {
+            const mappingObj = {
+                "@random_text": "text"
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                text: "foobar"
+            });
+        });
+        it("should map object with single attribute and nested objectpath", () => {
+            const mappingObj = {
+                "@random_datastreams.0.Observations.0.result": "result"
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                result: 123
+            });
+        });
+        it("should map object with multiple attributes", () => {
+            const mappingObj = {
+                random_text: "text",
+                random_boolean: "boolean"
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                text: "foobar",
+                boolean: true
+            });
+        });
+        it("should map object with multiple attributes with nested objectpath", () => {
+            const mappingObj = {
+                random_text: "text",
+                random_boolean: "boolean",
+                "@random_datastreams.0.Observations.0.result": "result"
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                text: "foobar",
+                boolean: true,
+                result: 123
+            });
+        });
+        it("should map object with mapping object and condition:endsWith", () => {
+            const mappingObj = {
+                random_text: {
+                    name: "text",
+                    condition: "endsWith"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                text: "foobar"
+            });
+        });
+        it("should map object with mapping object and condition:startsWith", () => {
+            const mappingObj = {
+                random_text: {
+                    name: "text",
+                    condition: "startsWith"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                text: "foobar"
+            });
+        });
+        it("should map object with mapping object and condition:contains", () => {
+            const mappingObj = {
+                random_text: {
+                    name: "text",
+                    condition: "contains"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                text: "foobar"
+            });
+        });
+        it("should map object with mapping object and suffix", () => {
+            const mappingObj = {
+                random_text: {
+                    name: "text",
+                    condition: "contains",
+                    suffix: "barfoo"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                text: "foobar barfoo"
+            });
+        });
+        it("should map object with mapping object and prefix", () => {
+            const mappingObj = {
+                random_text: {
+                    name: "text",
+                    condition: "contains",
+                    prefix: "barfoo"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                text: "barfoofoobar"
+            });
+        });
+        it("should map object with mapping object and type:date", () => {
+            const mappingObj = {
+                random_date: {
+                    name: "date",
+                    condition: "contains",
+                    type: "date"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                date: "2021-11-17T13:02:00.000+01:00"
+            });
+        });
+        it("should map object with mapping object and type:date and format:YYYY-MM-DD", () => {
+            const mappingObj = {
+                random_date: {
+                    name: "date",
+                    condition: "contains",
+                    type: "date",
+                    format: "YYYY-MM-DD"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                date: "2021-11-17"
+            });
+        });
+        it("should map object with mapping object and type:date and format:DD-MM-YYYYf", () => {
+            const mappingObj = {
+                random_date: {
+                    name: "date",
+                    condition: "contains",
+                    type: "date",
+                    format: "DD-MM-YYYY"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                date: "17-11-2021"
+            });
+        });
+        it("should map object with mapping object (random_int) and type:number", () => {
+            const mappingObj = {
+                random_int: {
+                    name: "integer",
+                    condition: "contains",
+                    type: "number"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                integer: "12.345"
+            });
+        });
+        it("should map object with mapping object (random_float) and type:number", () => {
+            const mappingObj = {
+                random_float: {
+                    name: "float",
+                    condition: "contains",
+                    type: "number"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                float: "1,23"
+            });
+        });
+        it("should map object with mapping object and type:boolean", () => {
+            const mappingObj = {
+                random_boolean: {
+                    name: "boolean",
+                    condition: "contains",
+                    type: "boolean"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                boolean: "true"
+            });
+        });
+        it("should map object with mapping object and type:boolean and format", () => {
+            const mappingObj = {
+                random_boolean: {
+                    name: "boolean",
+                    condition: "contains",
+                    type: "boolean",
+                    format: {
+                        true: "Ja",
+                        false: "Nein"
+                    }
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                boolean: "Ja"
+            });
+        });
+        it("should map object with mapping object and type:boolean and format with i18next", () => {
+            const mappingObj = {
+                random_boolean: {
+                    name: "boolean",
+                    condition: "contains",
+                    type: "boolean",
+                    format: {
+                        true: "common:modules.tools.gfi.boolean.yes",
+                        false: "common:modules.tools.gfi.boolean.no"
+                    }
+                }
+            };
+
+            // i18next only returns the path.
+            // Propably mocking of language-file would get the right translated value?
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                boolean: "common:modules.tools.gfi.boolean.yes"
+            });
+        });
+        it("should map object with mapping object and no type (defaults to string)", () => {
+            const mappingObj = {
+                random_boolean: {
+                    name: "boolean",
+                    condition: "contains"
+                },
+                random_int: {
+                    name: "int",
+                    condition: "contains"
+                }
+            };
+
+            expect(mapAttributes(props, mappingObj)).toEqual({
+                boolean: "true",
+                int: "12345"
+            });
+        });
+    });
+    describe("isObjectPath", () => {
+        it("should return true for \"@foobar\"", () => {
+            expect(isObjectPath("@foobar")).toBe(true);
+        });
+        it("should return false for \"foobar\"", () => {
+            expect(isObjectPath("foobar")).toBe(false);
+        });
+        it("should return false for 1", () => {
+            expect(isObjectPath(1)).toBe(false);
+        });
+        it("should return false for true", () => {
+            expect(isObjectPath(true)).toBe(false);
+        });
+    });
+});