@masterportal/masterportalapi 2.13.0 → 2.14.0

package/src/vectorStyle/styles/polygon/polygonStyleHatch.js

@@ -0,0 +1,160 @@
+// pattern library – default draw instructions as described in style.json.md
+const diagonal = {
+        draw: [
+            {type: "line", parameters: [[1, -0.5], [-0.5, 1]]},
+            {type: "line", parameters: [[1.5, 0], [0, 1.5]]}
+        ]
+    },
+    zigLine = {
+        draw: [
+            {type: "line", parameters: [[0, -0.25], [0.75, 0.5], [0, 1.25]]}
+        ]
+    },
+    namedHatches = {
+        diagonal,
+        "zig-line": zigLine,
+        "diagonal-right": {...diagonal, rotate: 90},
+        "zig-line-horizontal": {...zigLine, rotate: 90},
+        rectangle: {
+            draw: [
+                {type: "rect", parameters: [
+                    [0.125, 0.125, 0.25, 0.25],
+                    [0.625, 0.625, 0.25, 0.25]
+                ]}
+            ]
+        },
+        triangle: {
+            draw: [
+                {type: "line", parameters: [
+                    [0.25, 0], [0.5, 0.5], [0, 0.5], [0.25, 0]
+                ]},
+                {type: "line", parameters: [
+                    [0.75, 0.5], [1, 1], [0.5, 1], [0.75, 0.5]
+                ]}
+            ]
+        },
+        diamond: {
+            draw: [
+                {type: "line", parameters: [
+                    [0.25, 0], [0.5, 0.25], [0.25, 0.5], [0, 0.25], [0.25, 0]
+                ]},
+                {type: "line", parameters: [
+                    [0.75, 0.5], [1, 0.75], [0.75, 1], [0.5, 0.75], [0.75, 0.5]
+                ]}
+            ]
+        },
+        circle: {
+            draw: [
+                {type: "arc", parameters: [
+                    0.25, 0.25,
+                    ({size, lineWidth}) => (size - (2 * lineWidth)) / 4
+                ]},
+                {type: "arc", parameters: [
+                    0.75, 0.75,
+                    ({size, lineWidth}) => (size - (2 * lineWidth)) / 4
+                ]}
+            ]
+        }
+    };
+
+/**
+ * Determines the absolute position of a relative segment coordinate.
+ * @param {Number} size side length of context
+ * @returns {Function} gets absolute position in context (x or y)
+ */
+function makeCalculateAbsolutePosition (size) {
+    return relativePosition => relativePosition * size;
+}
+
+/**
+ * Draws a singular draw instruction to context, i.e., a single line, rect, or arc.
+ * @param {CanvasRenderingContext2D} context draw context
+ * @param {Number} size side length of context
+ * @param {Object} segment draw segment, i.e. a singular draw instruction
+ * @param {('rect'|'line'|'arc')} segment.type what kind of segment it is
+ * @param {Array} segment.parameters type-specific parameters, see style.json.md
+ * @returns {void} side-effect on context
+ */
+function drawSegment (context, size, {type, parameters}) {
+    const calculateAbsolutePosition = makeCalculateAbsolutePosition(size);
+
+    context.beginPath();
+
+    if (type === "rect") {
+        parameters.forEach(rect => context.rect(...rect.map(calculateAbsolutePosition)));
+    }
+    else if (type === "line") {
+        const [start, ...waypoints] = parameters;
+
+        context.moveTo(...start.map(calculateAbsolutePosition));
+        waypoints.forEach(waypoint => context.lineTo(...waypoint.map(calculateAbsolutePosition)));
+    }
+    else if (type === "arc") {
+        const [
+                x, y, getRadiusOrRadius, startAngle, endAngle, counterclockwise
+            ] = parameters,
+            radius = typeof getRadiusOrRadius === "function"
+                ? getRadiusOrRadius({size, lineWidth: context.lineWidth})
+                : getRadiusOrRadius;
+
+        context.arc(makeCalculateAbsolutePosition(size)(x),
+            makeCalculateAbsolutePosition(size)(y),
+            radius,
+            // default to full circle
+            startAngle || 0,
+            endAngle || 2 * Math.PI,
+            counterclockwise || false);
+    }
+    else {
+        console.error(`polygonStyleHatches: Unknown segment type "${type}". Skipping segment.`);
+
+        return;
+    }
+
+    context.stroke();
+}
+
+
+/**
+ * Rotates a given context of side length "size" by "degrees" around its center.
+ * Normally, rotation would happen based on the top left corner.
+ * @param {CanvasRenderingContext2D} context draw context
+ * @param {Number} size side length of context
+ * @param {Number} [degrees=90] degrees to rotate context by
+ * @returns {void} side-effect on context
+ */
+function rotateContextCenter (context, size, degrees = 90) {
+    const halfSize = 0.5 * size;
+
+    context.translate(halfSize, halfSize);
+    context.rotate(degrees * (Math.PI / 180));
+    context.translate(-halfSize, -halfSize);
+}
+
+/**
+ * Draws a hatch pattern to the context element.
+ * @param {CanvasRenderingContext2D} context draw context
+ * @param {Number} size side length of context
+ * @param {(("diagonal"|"zig-line"|"diagonal-right"|"zig-line-horizontal"|"rectangle"|"triangle"|"diamond"|"circle")|Object)} pattern Name of pattern library object, or draw instructions as described in style.json.md
+ * @returns {void} side-effect on context
+ */
+export function drawHatch (context, size, pattern) {
+    const hatchDefinition = typeof pattern === "string"
+        ? namedHatches[pattern]
+        : pattern;
+
+    if (hatchDefinition) {
+        const {draw, rotate} = hatchDefinition;
+
+        if (draw) {
+            draw.forEach(segment => drawSegment(context, size, segment));
+        }
+
+        if (rotate) {
+            rotateContextCenter(context, size, rotate);
+        }
+    }
+    else {
+        console.error(`polygonStyleHatches: Unknown polygon style "${pattern}". Skipping hatching.`);
+    }
+}

package/src/vectorStyle/styles/polygon/stylePolygon.js

@@ -0,0 +1,125 @@
+import StyleClass from "../style";
+import {Style, Fill, Stroke} from "ol/style.js";
+import defaultStyle from "../defaultStyles";
+import {drawHatch} from "./polygonStyleHatch";
+import {returnColor} from "../../lib/colorConvertions";
+
+class PolygonStyle extends StyleClass {
+    /**
+     * @description Class to create ol.style.Style
+     * @constructor
+     * @class PolygonStyle
+     * @extends StyleClass
+     * @memberof VectorStyle.Style
+     */
+    constructor () {
+        super();
+        this.attributes = {...defaultStyle.polygon};
+    }
+
+    /**
+     * This function initializes the stylePolygon 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 polygonFillColor = this.attributes.polygonFillColor,
+            polygonFillHatch = this.attributes.polygonFillHatch;
+
+        return new Style({
+            stroke: new Stroke({
+                lineCap: this.attributes.polygonStrokeCap,
+                lineJoin: this.attributes.polygonStrokeJoin,
+                lineDash: this.attributes.polygonStrokeDash,
+                lineDashOffset: this.attributes.polygonStrokeDashOffset,
+                miterLimit: this.attributes.polygonStrokeMiterLimit,
+                color: this.attributes.polygonStrokeColor,
+                width: this.attributes.polygonStrokeWidth
+            }),
+            fill: new Fill({color:
+                polygonFillHatch
+                    ? this.getPolygonFillHatch(polygonFillHatch)
+                        .getContext("2d")
+                        .fillStyle
+                    : polygonFillColor
+            })
+        });
+    }
+
+    /**
+     * Generates a polygon fill pattern.
+     * @param {object} params parameters as defined in style.json.md#Polygon.polygonFillHatch
+     * @returns {HTMLCanvasElement} contains polygon fill pattern
+     */
+    getPolygonFillHatch ({
+        pattern = "diagonal",
+        size = 30,
+        lineWidth = 10,
+        backgroundColor = [0, 0, 0, 1],
+        patternColor = [255, 255, 255, 1]
+    }) {
+        const canvas = document.createElement("canvas"),
+            context = canvas.getContext("2d");
+
+        canvas.width = size;
+        canvas.height = size;
+
+        context.fillStyle = `rgba(${backgroundColor.join(",")})`;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+
+        context.lineWidth = lineWidth;
+        context.strokeStyle = `rgba(${patternColor.join(",")})`;
+
+        drawHatch(context, size, pattern);
+
+        context.fillStyle = context.createPattern(canvas, "repeat");
+
+        return canvas;
+    }
+
+    getPolygonFillHatchLegendDataUrl (style) {
+        const originalCanvas = this.getPolygonFillHatch(style.polygonFillHatch),
+            strokeColor = returnColor(style.polygonStrokeColor, "hex"),
+            strokeWidth = parseInt(style.polygonStrokeWidth, 10),
+            strokeOpacity = style.polygonStrokeColor[3].toString() || 0,
+            legendCanvas = document.createElement("canvas"),
+            legendContext = legendCanvas.getContext("2d"),
+            halfStroke = strokeWidth / 2,
+            doubleStroke = strokeWidth * 2;
+
+        legendCanvas.width = originalCanvas.width + doubleStroke;
+        legendCanvas.height = originalCanvas.height + doubleStroke;
+
+        legendContext.drawImage(originalCanvas,
+            strokeWidth,
+            strokeWidth);
+
+        legendContext.lineCap = "round";
+        legendContext.lineJoin = "round";
+        legendContext.strokeStyle = strokeColor;
+        legendContext.lineWidth = strokeWidth;
+        legendContext.globalAlpha = strokeOpacity;
+
+        legendContext.strokeRect(halfStroke,
+            halfStroke,
+            legendCanvas.width - strokeWidth,
+            legendCanvas.height - strokeWidth);
+
+        return legendCanvas.toDataURL();
+    }
+}
+
+export default PolygonStyle;

package/src/vectorStyle/styles/style.js

@@ -0,0 +1,161 @@
+import {getValueFromObjectByPath} from "../../lib/getValueFromObjectByPath";
+
+class StyleClass {
+    /**
+     * @param {ol/feature} feature Feature to be styled.
+     * @param {object} style styling properties to overwrite defaults
+     * @param {Boolean} isClustered Flag to show if feature is clustered.
+     * @constructor
+     */
+    constructor (feature, style, isClustered) {
+        this.feature = feature;
+        this.style = style;
+        this.isClustered = isClustered;
+        this.attributes = {};
+        this.legendInfos = [];
+        this.styleMultiGeomOnlyWithRule = false;
+    }
+
+    /**
+     * setter for feature
+     * @param {ol/feature} value the feature to set
+     * @returns {void}
+     */
+    setFeature (value) {
+        this.feature = value;
+    }
+
+    /**
+     * Setter for style.
+     * @param {object} value the style to set
+     * @returns {void}
+     */
+    setStyle (value) {
+        this.style = value;
+    }
+
+    /*
+     * setter for styles
+     * @param {object} styles styles
+     * @returns {void}
+     */
+    overwriteStyling (styles) {
+        // check if styles object is defined
+        // if not, use defaults instead
+        if (styles) {
+            Object.keys(styles).forEach(element => {
+                const value = styles[element];
+
+                this.attributes[element] = value;
+            });
+        }
+    }
+
+    /**
+     * setter for isClustered
+     * @param {Boolean} value isClustered
+     * @returns {void}
+     */
+    setIsClustered (value) {
+        this.isClustered = value;
+    }
+
+    /**
+     * returns the legend info
+     * @returns {object[]} legend objects
+     */
+    getLegendInfos () {
+        return this.legendInfos;
+    }
+
+    /**
+     * Returns an id created from geometryType and conditions using encodeURIComponent.
+     * @param   {string} geometryType features geometry type
+     * @param   {object} rule         a rule description
+     * @returns {string} id
+     */
+    createLegendId (geometryType, rule) {
+        const properties = rule?.conditions ? rule.conditions : null;
+
+        return encodeURIComponent(geometryType + JSON.stringify(properties));
+    }
+
+    /**
+     * Returns the label or null examining some attributes. Giving precedence to "legendValue". Otherwhile creates a string out of rules conditions.
+     * @param   {Object} rule conditions
+     * @param   {vectorStyle/style} styleObject a vector style needed in
+     * @returns {String | null} label for styleObject
+     */
+    createLegendLabel (rule, styleObject) {
+        if (styleObject?.attributes?.legendValue) {
+            return styleObject.attributes.legendValue.toString();
+        }
+        else if (rule?.conditions) {
+            let label = "";
+
+            if (rule.conditions?.properties) {
+                label = Object.values(rule.conditions.properties).join(", ");
+            }
+
+            if (rule.conditions?.sequence
+                && Array.isArray(rule.conditions.sequence)
+                && rule.conditions.sequence.every(element => typeof element === "number")
+                && rule.conditions.sequence.length === 2
+                && rule.conditions.sequence[1] >= rule.conditions.sequence[0]) {
+                label = label + " (" + rule.conditions.sequence.join("-") + ")";
+            }
+
+            return label;
+        }
+
+        return null;
+    }
+
+    /**
+     * Adds a unique legendInfo for each id to vectorStyle model to be used for legend descriptions.
+     * @param {string} geometryType features geometry type needed in legend model
+     * @param {vectorStyle/style} styleObject  a vector style needed in
+     * @param {Object} rule conditions
+     * @returns {void}
+     */
+    addLegendInfo (geometryType, styleObject, rule) {
+        const {legendInfos} = styleObject,
+            id = this.createLegendId(geometryType, rule),
+            hasLegendInfo = legendInfos.some(legend => {
+                return legend.id === id;
+            });
+
+        if (!hasLegendInfo) {
+            this.legendInfos.push({
+                "id": id,
+                "geometryType": geometryType,
+                "styleObject": styleObject.attributes.type === "NOMINAL" ? {attributes: styleObject.attributes, style: styleObject.style} : styleObject.attributes,
+                "label": this.createLegendLabel(rule, styleObject)
+            });
+        }
+    }
+
+    /**
+     * Returns the value of the given field. Also considers that the field can be an object path.
+     * @param {Object} featureProperties Feature properties.
+     * @param {String} field Field to get value.
+     * @returns {*} - Value from given field.
+     */
+    prepareField (featureProperties, field) {
+        const isPath = field.startsWith("@");
+        let value = field;
+
+        if (isPath) {
+            value = getValueFromObjectByPath(featureProperties, value);
+            if (typeof value === "undefined") {
+                value = "undefined";
+            }
+        }
+        else {
+            value = Object.prototype.hasOwnProperty.call(featureProperties, field) ? featureProperties[field] : "undefined";
+        }
+        return value;
+    }
+}
+
+export default StyleClass;

package/src/vectorStyle/styles/styleCesium.js

@@ -0,0 +1,106 @@
+import StyleClass from "./style";
+import defaultStyle from "./defaultStyles";
+class CesiumStyle extends StyleClass {
+    /**
+     * @description Class to create ol.style.Style
+     * @constructor
+     * @class CesiumStyleMode
+     * @extends StyleClass
+     * @memberof VectorStyle.Style
+     */
+    constructor () {
+        super();
+        this.attributes = {...defaultStyle.point};
+        this.conditions = [];
+    }
+
+    /**
+     * This function initializes the Linestring Object by setting or overwriting some attributes.
+     * @param {ol/feature} rule styling rule of the feature.
+     * @returns {void}
+     */
+    initialize (rule) {
+        this.overwriteStyling(rule.style);
+        this.setConditions(rule.conditions);
+        this.setStyle(this.getStyle());
+    }
+
+    /**
+     * This function returns a style for each feature.
+     * @returns {ol/style} - The created style.
+     */
+    getStyle () {
+        return this.createCondition(this.get("conditions"), this.get("style"));
+    }
+
+    /**
+     * Creates the cesium tile style conditions.
+     * @param {Object} conditions Condition.
+     * @param {Object} style Style.
+     * @returns {*} - Condition for cesium 3d tile style.
+     */
+    createCondition (conditions, style) {
+        const {color} = style,
+            condition = [];
+        let ruleCondition;
+
+        if (conditions && Object.keys(conditions).length > 0) {
+            Object.keys(conditions).forEach(key => {
+                const value = conditions[key];
+
+                condition.push([key, value]);
+            });
+            ruleCondition = [this.createCesiumConditionForRule(condition), color];
+        }
+        else {
+            ruleCondition = ["true", color];
+        }
+        return ruleCondition;
+    }
+
+    /**
+     * Creates a cesium condition.
+     * @param {*} conditions Conditions.
+     * @returns {String[]} - Cesium condition for rule.
+     */
+    createCesiumConditionForRule (conditions) {
+        let cesiumCondition = [],
+            singleCondition = "";
+
+        conditions.forEach(condition => {
+            const cesiumKey = "${" + condition[0] + "}";
+            let value = condition[1],
+                minValue,
+                maxValue;
+
+            if (Array.isArray(value)) {
+                minValue = value[0];
+                maxValue = value[1];
+                singleCondition = "(" + cesiumKey + " > " + minValue + " && " + cesiumKey + " <= " + maxValue + ")";
+            }
+            else {
+                if (typeof value === "string") {
+                    value = "'" + value + "'";
+                }
+                singleCondition = "(" + cesiumKey + " === " + value + ")";
+            }
+
+            cesiumCondition.push(singleCondition);
+        });
+
+        cesiumCondition = "(" + cesiumCondition.join(" && ") + ")";
+
+        return cesiumCondition;
+    }
+
+    /**
+     * Setter for attribute "conditions"
+     * @param {*} conditions conditions
+     * @returns {void}
+     */
+    setConditions (conditions) {
+        this.attributes.conditions = conditions;
+    }
+}
+
+export default CesiumStyle;

package/src/vectorStyle/styles/styleLine.js

@@ -0,0 +1,51 @@
+import StyleClass from "./style";
+import {Style, Stroke} from "ol/style.js";
+import defaultStyle from "./defaultStyles";
+
+class LineStringStyle extends StyleClass {
+    /**
+     * @description Class to create ol.style.Style
+     * @constructor
+     * @class LineStringStyle
+     * @extends StyleClass
+     * @memberof VectorStyle.Style
+     */
+    constructor () {
+        super();
+        this.attributes = {...defaultStyle.line};
+    }
+
+    /**
+     * 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.getStyle());
+    }
+
+    /**
+     * This function returns a style for each feature.
+     * @returns {ol/style/Style} - The created style.
+     */
+    getStyle () {
+        return new Style({
+            stroke: new Stroke({
+                lineCap: this.attributes.lineStrokeCap,
+                lineJoin: this.attributes.lineStrokeJoin,
+                lineDash: this.attributes.lineStrokeDash,
+                lineDashOffset: this.attributes.lineStrokeDashOffset,
+                miterLimit: this.attributes.lineStrokeMiterLimit,
+                color: this.attributes.lineStrokeColor,
+                width: this.attributes.lineStrokeWidth
+            })
+        });
+    }
+}
+
+export default LineStringStyle;