@masterportal/masterportalapi 2.20.0 → 2.21.0

package/CHANGELOG.md

@@ -3,7 +3,17 @@
 
  The [Semantic Versioning](https://semver.org/spec/v2.0.0.html) is used.
 
-## ## 2.20.0 - 2023-06-30
+## 2.21.0 - 2023-07-20
+### Added
+- VectorStyle: Add Styling rules for Geoemtries of type `Circle`.
+- Add Styling and zIndex to draw interactions and improve the draw behavior.
+
+### Changed
+- Changed peerDependency from cesium 1.106.0 to @cesium/engine 2.4.1.
+
+---
+
+## 2.20.0 - 2023-06-30
 ### Added
 - Add draw interaction for interactive and static geometry types.
 - WFS: Added function to load wfs features manually.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {
@@ -47,7 +47,7 @@
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "cesium": "^1.106.0"
+    "@cesium/engine": "^2.4.1"
   },
   "engines": {
     "node": "^16.13.2 || ^18.12.0",

package/src/layer/wfs.js

@@ -202,9 +202,16 @@ export function createLayerSource (rawLayer, options = {}) {
         return createClusterVectorSource(source, rawLayer.clusterDistance, options.clusterGeometryFunction);
     }
     if (rawLayer.renderer === "webgl") {
-        source.once("featuresloadend", event => {
-            webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
-        });
+        if (options.loadingStrategy === bbox) {
+            source.on("featuresloadend", event => {
+                webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
+            });
+        }
+        else {
+            source.once("featuresloadend", event => {
+                webgl.afterLoading(event?.features, rawLayer.styleId, rawLayer.excludeTypesFromParsing);
+            });
+        }
     }
     return source;
 }

package/src/maps/interactions/drawInteractions.js

@@ -1,6 +1,8 @@
 import {createBox} from "ol/interaction/Draw.js";
 import {Draw} from "ol/interaction.js";
 
+import createStyle from "../../vectorStyle/createStyle";
+
 const earthRadius = 6378137,
     roh = 180 / Math.PI,
     mappingDrawTypes = {
@@ -32,6 +34,9 @@ const earthRadius = 6378137,
             type: "Polygon"
         }
     };
+let styleObject = null,
+    styleObjectOuterCircle = null,
+    zIndex = 0;
 
 /**
  * Transform the radius to map projection unit.
@@ -55,21 +60,44 @@ function transformMapUnitRadius (radius, mapProjection) {
 
 /**
  * Create a feature for the outer circle of draw type: double circle.
- * @param {ol/interaction/Draw} drawInteraction The draw interaction.
+ * @param {ol/feature} feature The ol feature.
  * @param {Object} mapProjection The map projection.
  * @param {ol/source} source The vector layer source for draw features.
  * @param {Object} [options={}] The options for drawing features.
- * @param {Number} [options.circleOuterRadius] The radius for the outer circle.
+ * @param {Number} [options.innerRadius] The radius for the inner circle.
+ * @param {Number} [options.outerRadius] The radius for the outer circle.
  * @returns {void}
  */
-function drawOuterCircle (drawInteraction, mapProjection, source, options = {}) {
-    drawInteraction.on("drawend", event => {
-        const outerCircleFeature = event.feature.clone(),
-            mapUnitOuterRadius = transformMapUnitRadius(options.circleOuterRadius, mapProjection);
+function drawOuterCircle (feature, mapProjection, source, options = {}) {
+    const innerCircleFeature = feature.clone(),
+        mapUnitInnerRadius = transformMapUnitRadius(options.innerRadius, mapProjection),
+        mapUnitOuterRadius = transformMapUnitRadius(options.outerRadius, mapProjection),
+        innerStyle = createStyle.createStyle(styleObject, innerCircleFeature, false),
+        outerStyle = createStyle.createStyle(styleObjectOuterCircle, feature, false);
 
-        outerCircleFeature.getGeometry().setRadius(mapUnitOuterRadius);
-        source.addFeature(outerCircleFeature);
-    });
+    outerStyle.setZIndex(zIndex++);
+    feature.setStyle(outerStyle);
+    feature.getGeometry().setRadius(mapUnitOuterRadius);
+
+    innerStyle.setZIndex(zIndex++);
+    innerCircleFeature.setStyle(innerStyle);
+    innerCircleFeature.getGeometry().setRadius(mapUnitInnerRadius);
+
+    source.addFeature(innerCircleFeature);
+}
+
+/**
+ * Create a feature for the (inner) circle of draw type: circle or double circle.
+ * @param {ol/feature} feature The ol feature.vb
+ * @param {Object} mapProjection The map projection.
+ * @param {Object} [options={}] The options for drawing features.
+ * @param {Number} [options.innerRadius] The radius for the (inner) circle.
+ * @returns {void}
+ */
+function drawInnerCircle (feature, mapProjection, options = {}) {
+    const mapUnitInnerRadius = transformMapUnitRadius(options.innerRadius, mapProjection);
+
+    feature.getGeometry().setRadius(mapUnitInnerRadius);
 }
 
 /**
@@ -79,26 +107,74 @@ function drawOuterCircle (drawInteraction, mapProjection, source, options = {})
  * @param {Object} mapProjection The map projection.
  * @param {ol/source} source The vector layer source for draw features.
  * @param {Object} [options={}] The options for drawing features.
- * @param {Number} [options.circleInnerRadius] The radius for the inner circle.
- * @param {Number} [options.circleOuterRadius] The radius for the outer circle.
- * @param {Boolean} [options.interactiveCircle] Circle is drawn interactively or not.
+ * @param {Number} [options.innerRadius] The radius for the inner circle.
+ * @param {Boolean} [options.interactive] Circle is drawn interactively or not.
+ * @param {Number} [options.outerRadius] The radius for the outer circle.
  * @returns {void}
  */
 function drawCircle (drawInteraction, drawType, mapProjection, source, options = {}) {
-    if (options.interactiveCircle === false && options.circleInnerRadius > 0) {
+    if ((drawType === "doubleCircle" || options.interactive === false) && options.innerRadius > 0) {
         drawInteraction.on("drawstart", event => {
-            const mapUnitInnerRadius = transformMapUnitRadius(options.circleInnerRadius, mapProjection);
-
-            event.feature.getGeometry().setRadius(mapUnitInnerRadius);
+            if (drawType === "circle") {
+                drawInnerCircle(event.feature, mapProjection, options);
+            }
+            else if (drawType === "doubleCircle" && options.outerRadius > 0) {
+                drawOuterCircle(event.feature, mapProjection, source, options);
+            }
             drawInteraction.finishDrawing();
         });
+    }
+}
 
-        if (drawType === "doubleCircle" && options.circleOuterRadius > 0) {
-            drawOuterCircle(drawInteraction, mapProjection, source, options);
-        }
+/**
+ * Creates a styleObject from vectorStyling from layout.
+ * @param {Object} currentLayout The current layout.
+ * @param {Boolean} [outerCircle=false] Indicates if the styling is for the outer circle.
+ * @returns {void}
+ */
+function setStyleObject (currentLayout, outerCircle = false) {
+    const fillOpacity = 1 - (currentLayout.fillTransparency / 100),
+        fillColorRgba = [...currentLayout.fillColor, fillOpacity],
+        style = {
+            rules: [
+                {
+                    style: {
+                        circleFillColor: fillColorRgba,
+                        circleStrokeColor: currentLayout.strokeColor,
+                        circleStrokeWidth: currentLayout.strokeWidth,
+                        lineStrokeColor: currentLayout.strokeColor,
+                        lineStrokeWidth: currentLayout.strokeWidth,
+                        polygonFillColor: fillColorRgba,
+                        polygonStrokeColor: currentLayout.strokeColor,
+                        polygonStrokeWidth: currentLayout.strokeWidth
+                    }
+                }
+            ]
+        };
+
+    if (outerCircle === true) {
+        styleObjectOuterCircle = style;
+    }
+    else {
+        styleObject = style;
     }
 }
 
+/**
+ * Sets the style to overlay and feature.
+ * @param {ol/interaction/Draw} drawInteraction The draw interaction.
+ * @returns {void}
+ */
+function setStyleToDrawInteraction (drawInteraction) {
+    drawInteraction.on("drawstart", event => {
+        const style = createStyle.createStyle(styleObject, event.feature, false);
+
+        style.setZIndex(zIndex++);
+        drawInteraction.getOverlay().setStyle(style);
+        event.feature.setStyle(style);
+    });
+}
+
 /**
  * Create the draw interaction.
  * @param {String} drawType The current draw type.
@@ -112,19 +188,27 @@ function createDrawInteraction (drawType, source) {
         const options = mappingDrawTypes[drawType].options || {};
 
         drawInteraction = new Draw({
-            source: source,
-            type: mappingDrawTypes[drawType].type,
             freehand: options.freehand,
-            geometryFunction: options.geometryFunction
+            geometryFunction: options.geometryFunction,
+            source: source,
+            type: mappingDrawTypes[drawType].type
         });
+
+        if (styleObject !== null && drawType !== "doubleCircle") {
+            setStyleToDrawInteraction(drawInteraction);
+        }
     }
 
     return drawInteraction;
 }
 
+export {styleObject};
+
 export default {
     createDrawInteraction,
     drawCircle,
+    drawInnerCircle,
     drawOuterCircle,
+    setStyleObject,
     transformMapUnitRadius
 };

package/src/renderer/webgl.js

@@ -21,15 +21,13 @@ const defaultStyle = {
         }
     },
 
-    /** @type {import('../src/ol/style/literal.js').LiteralStyle} */
+    /** @type {import('ol/style/literal.js').LiteralStyle} */
     style = {
         "stroke-color": ["get", "STROKECOLOR"],
-        // NOTICE: does not work with ol 7.4.0, throws errors -> use 1 pixel width
-        // "stroke-width": ["get", "STROKEWIDTH"],
-        "stroke-width": 1,
+        "stroke-width": ["get", "STROKEWIDTH", "number"],
         "fill-color": ["get", "FILLCOLOR"],
-        "opacity": ["get", "OPACITY"],
-        "size": ["get", "CIRCLESIZE"]
+        "opacity": ["get", "OPACITY", "number"],
+        "size": ["get", "CIRCLESIZE", "number"]
     };
 
 /**
@@ -82,18 +80,17 @@ export function formatFeatureStyles (feature, styleObject) {
     feature.styleRule = rule;
 
     if (rule && rule.style) {
-        // TODO set style on properties will be visible in GFI
         const polygonFillColor = returnColor(rule.style.polygonFillColor, "hex"),
             circleFillColor = returnColor(rule.style.circleFillColor, "hex"),
             fillColor = polygonFillColor ? polygonFillColor : circleFillColor,
-            polygonStrokeColor = returnColor(rule.style.polygonStrokeColor, "hex"),
-            polygonStrokeWidth = rule.style.polygonStrokeWidth,
+            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", polygonStrokeColor ? polygonStrokeColor : "#006688");
-        feature.set("STROKEWIDTH", polygonStrokeWidth ? polygonStrokeWidth : 1);
-        feature.set("OPACITY", polygonFillColor ? polygonFillColor[3] : 1);
+        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);
     }
 }

package/src/vectorStyle/createStyle.js

@@ -3,6 +3,7 @@ import PointStyle from "./styles/point/stylePoint";
 import TextStyle from "./styles/styleText";
 import PolygonStyle from "./styles/polygon/stylePolygon";
 import LineStringStyle from "./styles/styleLine";
+import CircleStyle from "./styles/styleCircle";
 import CesiumStyle from "./styles/styleCesium";
 import {getRuleForIndex, getRulesForFeature} from "./lib/getRuleForIndex";
 
@@ -60,7 +61,13 @@ function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsIm
         styleObject.legendValue = legendValue;
         return styleObject;
     }
-    else if (geometryType === "LinearRing" || geometryType === "Circle") {
+    else if (geometryType === "Circle") {
+        styleObject = new CircleStyle(feature, style, isClustered);
+        if (isClustered) {
+            styleObjectForLegend = new CircleStyle(feature, style, false);
+        }
+    }
+    else if (geometryType === "LinearRing") {
         console.warn("Geometry type not implemented: " + geometryType + " default style ist used for feature " + feature);
         return new Style();
     }

package/src/vectorStyle/styles/styleCircle.js

@@ -0,0 +1,61 @@
+import StyleClass from "./style";
+import {Circle, Fill, Stroke, Style} from "ol/style.js";
+import defaultStyle from "./defaultStyles";
+
+class CircleStyle extends StyleClass {
+    /**
+     * @description Class to create ol.style.Style
+     * @constructor
+     * @class CircleStyle
+     * @extends StyleClass
+     * @memberof VectorStyle.Style
+     */
+    constructor () {
+        super();
+        this.attributes = {...defaultStyle.circle};
+    }
+
+    /**
+     * This function initializes the Linestring 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.createStyle());
+    }
+
+    /**
+     * This function returns a style for each feature.
+     * @returns {ol/style/Style} - The created style.
+     */
+    createStyle () {
+        if (this.nullStyle) {
+            return null;
+        }
+
+        const fill = new Fill({
+                color: this.attributes.circleFillColor
+            }),
+            stroke = new Stroke({
+                color: this.attributes.circleStrokeColor,
+                width: this.attributes.circleStrokeWidth
+            });
+
+        return new Style({
+            image: new Circle({
+                fill: fill,
+                stroke: stroke,
+                radius: 0
+            }),
+            fill: fill,
+            stroke: stroke
+        });
+    }
+}
+
+export default CircleStyle;

package/test/maps/interactions/drawInteractions.test.js

@@ -1,9 +1,103 @@
 import {Draw} from "ol/interaction.js";
+import Feature from "ol/Feature";
+import Circle from "ol/geom/Circle";
 import VectorSource from "ol/source/Vector";
 
-import drawInteractions from "../../../src/maps/interactions/drawInteractions";
+import drawInteractions, {styleObject} from "../../../src/maps/interactions/drawInteractions";
 
 describe("src/maps/interactions/drawInteractions.js", () => {
+    describe("transformMapUnitRadius", () => {
+        it("should return the input meter radius in meter ", () => {
+            const radius = 100,
+                mapProjection = {
+                    getUnits: () => "m"
+                },
+                mapUnitRadius = drawInteractions.transformMapUnitRadius(radius, mapProjection);
+
+            expect(mapUnitRadius).toEqual(100);
+        });
+
+        it("should return the input degree radius in meter ", () => {
+            const radius = 100,
+                mapProjection = {
+                    getUnits: () => "degrees"
+                },
+                mapUnitRadius = drawInteractions.transformMapUnitRadius(radius, mapProjection);
+
+            expect(mapUnitRadius).toEqual(0.0008983152841195215);
+        });
+    });
+
+    describe("drawInnerCircle", () => {
+        it("should set radius for circle feature", () => {
+            const feature = new Feature({geometry: new Circle([565826.38, 5934174.40], 10)}),
+                mapProjection = {
+                    getUnits: () => "m"
+                },
+                options = {
+                    innerRadius: 100,
+                    interactive: false,
+                    outerRadius: 500
+                };
+
+            drawInteractions.drawInnerCircle(feature, mapProjection, options);
+
+            expect(feature.getGeometry().getRadius()).toEqual(100);
+        });
+    });
+
+    describe("setStyleObject", () => {
+        it("should set style object", () => {
+            const currentLayout = {
+                fillColor: [55, 126, 184],
+                fillTransparency: 0,
+                strokeColor: [0, 0, 0],
+                strokeWidth: 1
+            };
+
+            drawInteractions.setStyleObject(currentLayout);
+
+            expect(styleObject).toEqual({
+                rules: [
+                    {
+                        style: {
+                            circleFillColor: [
+                                55,
+                                126,
+                                184,
+                                1
+                            ],
+                            circleStrokeColor: [
+                                0,
+                                0,
+                                0
+                            ],
+                            circleStrokeWidth: 1,
+                            lineStrokeColor: [
+                                0,
+                                0,
+                                0
+                            ],
+                            lineStrokeWidth: 1,
+                            polygonFillColor: [
+                                55,
+                                126,
+                                184,
+                                1
+                            ],
+                            polygonStrokeColor: [
+                                0,
+                                0,
+                                0
+                            ],
+                            polygonStrokeWidth: 1
+                        }
+                    }
+                ]
+            });
+        });
+    });
+
     describe("createDrawInteraction", () => {
         it("should create a draw interaction", () => {
             const source = new VectorSource(),
@@ -26,25 +120,4 @@ describe("src/maps/interactions/drawInteractions.js", () => {
         });
     });
 
-    describe("transformMapUnitRadius", () => {
-        it("should return the input meter radius in meter ", () => {
-            const radius = 100,
-                mapProjection = {
-                    getUnits: () => "m"
-                },
-                mapUnitRadius = drawInteractions.transformMapUnitRadius(radius, mapProjection);
-
-            expect(mapUnitRadius).toEqual(100);
-        });
-
-        it("should return the input degree radius in meter ", () => {
-            const radius = 100,
-                mapProjection = {
-                    getUnits: () => "degrees"
-                },
-                mapUnitRadius = drawInteractions.transformMapUnitRadius(radius, mapProjection);
-
-            expect(mapUnitRadius).toEqual(0.0008983152841195215);
-        });
-    });
 });

package/test/vectorStyle/styles/styleCircle.test.js

@@ -0,0 +1,31 @@
+import CircleStyle from "../../../src/vectorStyle/styles/styleCircle";
+import {Style} from "ol/style.js";
+
+describe("styleCircle", () => {
+    const feature = {
+            geometryName: "geom",
+            id: "DE.HH.UP_GESUNDHEIT_KRANKENHAEUSER_2"
+        },
+        style = {
+            type: "icon",
+            legendValue: "Krankenhaus",
+            imageName: "krankenhaus.png"
+        },
+        isClustered = false,
+        styleCircleClass = new CircleStyle(feature, style, isClustered);
+
+    describe("initialize", function () {
+        it("returns an instance of openlayers style", () => {
+            expect(typeof styleCircleClass.initialize).toBe("function");
+        });
+    });
+
+    describe("createStyle", function () {
+        it("returns an instance of openlayers style", () => {
+            const createdStyle = styleCircleClass.createStyle();
+
+            styleCircleClass.setStyle(createdStyle);
+            expect(styleCircleClass.getStyle()).toBeInstanceOf(Style);
+        });
+    });
+});