@vcmap/core 5.0.0-rc.9 → 5.0.1

package/dist/src/style/vectorStyleItem.js

@@ -0,0 +1,703 @@
+/* eslint-disable no-template-curly-in-string,@typescript-eslint/ban-ts-comment */
+import Stroke from 'ol/style/Stroke.js';
+import { Color, VerticalOrigin } from '@vcmap-cesium/engine';
+import Icon from 'ol/style/Icon.js';
+import Style from 'ol/style/Style.js';
+import OLText from 'ol/style/Text.js';
+import OLImage from 'ol/style/Image.js';
+import Fill from 'ol/style/Fill.js';
+import Circle from 'ol/style/Circle.js';
+import RegularShape from 'ol/style/RegularShape.js';
+import { check, checkMaybe } from '@vcsuite/check';
+import StyleItem from './styleItem.js';
+import { parseColor, PatternType, createPattern, getStrokeOptions, getTextOptions, getTextFromOptions, getStringColor, getDefaultCondition, getDefaultVectorStyleItemOptions, olColorToCesiumColor, getStrokeFromOptions, getImageStyleOptions, } from './styleHelpers.js';
+import { getShapeFromOptions } from './shapesCategory.js';
+import { styleClassRegistry } from '../classRegistry.js';
+export var OlcsGeometryType;
+(function (OlcsGeometryType) {
+    OlcsGeometryType[OlcsGeometryType["POLYGON"] = 1] = "POLYGON";
+    OlcsGeometryType[OlcsGeometryType["POLYLINE"] = 2] = "POLYLINE";
+    OlcsGeometryType[OlcsGeometryType["POINT"] = 3] = "POINT";
+})(OlcsGeometryType = OlcsGeometryType || (OlcsGeometryType = {}));
+/**
+ * Is set on a feature and is used to signal that the feature has a specific vectorStyleItem.
+ * Is set by the Editor if the layerStyle is overwritten. The VectorLayer layer assures this style is set, if
+ * the style on the layer is not a DeclarativeStyle
+ */
+export const vectorStyleSymbol = Symbol('VcsVectorStyleItem');
+/**
+ * @group Style
+ */
+class VectorStyleItem extends StyleItem {
+    static get className() {
+        return 'VectorStyleItem';
+    }
+    exclude;
+    _fillOptions;
+    _fill;
+    _stroke;
+    _text;
+    _label;
+    _cesiumColor;
+    _image;
+    constructor(options) {
+        super(options);
+        this.validateOptions(options);
+        this.exclude = {
+            fill: options.fill === false,
+            stroke: options.stroke === false,
+            image: options.image === false,
+        };
+        this._fillOptions = null;
+        this._fill = undefined;
+        this._stroke = options.stroke
+            ? getStrokeFromOptions(options.stroke)
+            : undefined;
+        this._text = undefined;
+        if (options.text) {
+            this._text = getTextFromOptions(options.text);
+        }
+        this._label = options.label;
+        this.label = this._label;
+        this._cesiumColor = new Color();
+        this._image = undefined;
+        if (options.image) {
+            this._image = options.image.radius
+                ? getShapeFromOptions({ ...options.image })
+                : new Icon(options.image);
+        }
+        this._style = new Style({
+            image: this._image,
+            stroke: this._stroke,
+            text: this._text,
+        });
+        if (options.fill) {
+            this._fillOptions = options.fill;
+            this._setFill();
+        }
+        else {
+            this.updateCesiumStyle();
+        }
+    }
+    validateOptions(options) {
+        const checkColor = (option) => {
+            try {
+                option.color = parseColor(option.color);
+                check(option.color, [Number]);
+                check(option.color.length, [3, 4]);
+            }
+            catch (e) {
+                this.getLogger().error(e.message);
+                option.color = [255, 255, 255, 0.4];
+            }
+        };
+        const checkStroke = (option) => {
+            checkColor(option);
+            if (!option.width) {
+                this.getLogger().error('missing width for stroke, setting to 1.5');
+                option.width = 1.5;
+            }
+        };
+        if (options.fill) {
+            checkColor(options.fill);
+            if (options.fill.pattern) {
+                checkStroke(options.fill.pattern);
+                if (!(options.fill.pattern.type &&
+                    Object.values(PatternType).includes(options.fill.pattern.type))) {
+                    this.getLogger().error(`Cannot find pattern ${options.fill.pattern.type}`);
+                    options.fill.pattern.type = PatternType.NWSE;
+                }
+            }
+        }
+        if (options.stroke) {
+            checkStroke(options.stroke);
+        }
+        if (options.image) {
+            // XXX Legacy...
+            if (options.image.icon) {
+                options.image = options.image.icon;
+            }
+            else if (options.image.circle) {
+                options.image = options.image.circle;
+            }
+            if (!(options.image.src || options.image.radius)) {
+                this.getLogger().error('missing source or label in style, setting default circle');
+                options.image = {
+                    fill: {
+                        color: 'rgba(255,255,255,0.4)',
+                    },
+                    stroke: {
+                        color: '#3399CC',
+                        width: 1,
+                    },
+                    radius: 5,
+                };
+            }
+            if (options.image.radius) {
+                options.image.radius = Number(options.image.radius);
+                if (!Number.isFinite(options.image.radius)) {
+                    this.getLogger().error('radius must be a number');
+                    options.image.radius = 5;
+                }
+                if (options.image.fill?.color) {
+                    checkColor(options.image.fill);
+                }
+                if (options.image.stroke?.color) {
+                    checkStroke(options.image.stroke);
+                }
+            }
+        }
+        // TODO text validation
+    }
+    /**
+     * the current fill color, not the pattern
+     */
+    get fillColor() {
+        return this._fillOptions ? this._fillOptions.color : undefined;
+    }
+    set fillColor(color) {
+        this.exclude.fill = false;
+        if (this._style instanceof Style) {
+            if (!color) {
+                this._fillOptions = null;
+                this._fill = undefined;
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore // bug in ol def. you can set fill undefined
+                this._style.setFill(this._fill);
+                this.updateCesiumStyleColor(true);
+            }
+            else {
+                if (!this._fillOptions) {
+                    this._fillOptions = { color: parseColor(color) };
+                }
+                else {
+                    this._fillOptions.color = parseColor(color);
+                }
+                this._setFill();
+            }
+        }
+        else {
+            this.getLogger().info('trying to set fill on a style function');
+        }
+    }
+    /**
+     * the current fill color as a cesium color
+     */
+    get cesiumFillColor() {
+        const fillColor = this.fillColor ? this.fillColor.slice() : null;
+        if (fillColor) {
+            return olColorToCesiumColor(fillColor, this._cesiumColor);
+        }
+        return Color.RED.clone(this._cesiumColor); // TODO should not be red - transparent?
+    }
+    get pattern() {
+        return this._fillOptions && this._fillOptions.pattern
+            ? this._fillOptions.pattern
+            : undefined;
+    }
+    set pattern(patternOptions) {
+        if (!this._fillOptions) {
+            this.getLogger().error('Missing fill color');
+            return;
+        }
+        if (patternOptions) {
+            checkMaybe(patternOptions, {
+                color: [String, [Number]],
+                width: Number,
+                type: Number,
+                size: [Number, undefined, null],
+            }, true);
+            this._fillOptions.pattern = patternOptions;
+        }
+        else {
+            this._fillOptions.pattern = undefined;
+        }
+        this._setFill();
+    }
+    get stroke() {
+        return this._stroke;
+    }
+    set stroke(stroke) {
+        this.exclude.stroke = false;
+        if (this._style instanceof Style) {
+            checkMaybe(stroke, Stroke);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore // bug in ol
+            this._style.setStroke(stroke);
+            this._stroke = stroke;
+            this.updateCesiumStyleColor(true);
+        }
+        else {
+            this.getLogger().info('trying to set stroke on a style function');
+        }
+    }
+    get label() {
+        return this._label;
+    }
+    set label(label) {
+        checkMaybe(label, String);
+        if (!label) {
+            this._label = undefined;
+        }
+        else {
+            this._label = label;
+        }
+        if (this._text) {
+            this._text.setText(label);
+        }
+    }
+    get text() {
+        return this._text;
+    }
+    set text(text) {
+        if (this._style instanceof Style) {
+            checkMaybe(text, OLText);
+            this._text = text;
+            this._text?.setText?.(this._label);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore // bug in ol
+            this._style.setText(this._text);
+        }
+        else {
+            this.getLogger().info('trying to set text on a style function');
+        }
+    }
+    get image() {
+        return this._image;
+    }
+    set image(image) {
+        this.exclude.image = false;
+        if (this._style instanceof Style) {
+            checkMaybe(image, OLImage);
+            this._image = image;
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore // bug in ol
+            this._style.setImage(this._image);
+            this.updateCesiumStyle();
+        }
+        else {
+            this.getLogger().info('trying to set text on a style function');
+        }
+    }
+    get style() {
+        return this._style;
+    }
+    set style(style) {
+        checkMaybe(style, [Style, Function]);
+        if (style instanceof Style) {
+            this._stroke = style.getStroke();
+            this._fill = style.getFill();
+            this._text = style.getText();
+            this._image = style.getImage();
+        }
+        else {
+            this._stroke = undefined;
+            this._fill = undefined;
+            this._text = undefined;
+            this._image = undefined;
+        }
+        this._style = style;
+        if (this._fill && this._fill.getColor()) {
+            this._fillOptions = {
+                color: parseColor(this._fill.getColor()),
+            };
+        }
+        if (this._text) {
+            this._text.setText(this._label);
+        }
+        this.updateCesiumStyle();
+    }
+    _setFill() {
+        if (this._style instanceof Style) {
+            const color = this._fillOptions?.pattern
+                ? createPattern(this._fillOptions)
+                : this._fillOptions?.color;
+            if (!color) {
+                return;
+            }
+            if (this._fill) {
+                this._fill.setColor(color);
+            }
+            else {
+                this._fill = new Fill({ color });
+                this._style.setFill(this._fill);
+            }
+            if (this._fillOptions?.pattern) {
+                this._fill.fallBackColor = this._fillOptions.color;
+            }
+            this.updateCesiumStyle();
+        }
+    }
+    updateCesiumStyle() {
+        this.updateCesiumStyleColor(true);
+        this.updateCesiumStyleImage(true);
+        this.updateCesiumStyleText(true);
+        this._styleChanged();
+    }
+    updateCesiumStyleColor(silent) {
+        const colorConditions = getDefaultCondition('olcs_color', true);
+        if (this.stroke && this.stroke.getColor()) {
+            colorConditions.splice(1, 0, [
+                `\${olcs_geometryType}===${OlcsGeometryType.POLYLINE}`,
+                getStringColor(this.stroke.getColor()),
+            ]);
+        }
+        if (this._image instanceof Circle && this._image.getFill()) {
+            colorConditions.splice(1, 0, [
+                `\${olcs_geometryType}===${OlcsGeometryType.POINT}`,
+                getStringColor(this._image.getFill().getColor()),
+            ]);
+        }
+        if (this.fillColor) {
+            colorConditions.splice(-1, 1, ['true', getStringColor(this.fillColor)]);
+        }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.cesiumStyle.color = { conditions: colorConditions };
+        if (!silent) {
+            this._styleChanged();
+        }
+    }
+    updateCesiumStyleImage(silent) {
+        /* this.cesiumStyle.show = {
+          conditions: [
+            ['${olcs_color}===false', false],
+            ['true', 'true'],
+          ],
+        } */
+        const scaleConditions = getDefaultCondition('olcs_scale');
+        const pointOutlineWidthConditions = getDefaultCondition('olcs_outlineWidth');
+        const pointOutlineColorConditions = getDefaultCondition('olcs_outlineColor', true);
+        const pointSizeConditions = getDefaultCondition('olcs_pointSize');
+        const imageConditions = getDefaultCondition('olcs_image');
+        /* commented out, because we simulate the anchorline via a line in the tileset, TODO Evaluate again
+        const heightOffsetCondition = [
+          [defaultExtrudedHeightCondition, '${attributes.olcs_extrudedHeight}'],
+          ['true', '0'],
+        ];
+        const anchorLineEnabledConditions = [
+          [defaultExtrudedHeightCondition, 'true'],
+          ['true', 'false'],
+        ];
+        const anchorLineColorConditions = getDefaultCondition('olcs_anchorLineColor', true);
+        */
+        if (this._image) {
+            if (this._image.getScale() != null) {
+                scaleConditions.splice(1, 1, [
+                    'true',
+                    `${String(this._image.getScale())}`,
+                ]);
+            }
+            if (this._image instanceof Circle) {
+                const stroke = this._image.getStroke();
+                let size = this._image.getRadius() * 2;
+                if (stroke) {
+                    if (this._image.getStroke().getColor()) {
+                        pointOutlineColorConditions.splice(1, 1, [
+                            'true',
+                            getStringColor(this._image.getStroke().getColor()),
+                        ]);
+                    }
+                    const width = this._image.getStroke().getWidth();
+                    pointOutlineWidthConditions.splice(1, 1, ['true', `${width}`]);
+                    size -= width;
+                }
+                pointSizeConditions.splice(1, 1, ['true', `${size}`]);
+            }
+            else if (this._image instanceof RegularShape) {
+                const dataUrl = this._image.getImage(1).toDataURL();
+                imageConditions.splice(1, 1, ['true', `"${dataUrl}"`]);
+            }
+            else if (this._image instanceof Icon) {
+                imageConditions.splice(1, 1, [
+                    'true',
+                    `"${String(this._image.getSrc())}"`,
+                ]);
+            }
+        }
+        /*
+        if (this._stroke && this._stroke.getColor()) {
+          anchorLineColorConditions.splice(1, 1, ['true', getStringColor(this._stroke.getColor())]);
+        }
+        */
+        // @ts-ignore
+        this.cesiumStyle.scale = { conditions: scaleConditions };
+        this.cesiumStyle.pointOutlineWidth = {
+            // @ts-ignore
+            conditions: pointOutlineWidthConditions,
+        };
+        this.cesiumStyle.pointOutlineColor = {
+            // @ts-ignore
+            conditions: pointOutlineColorConditions,
+        };
+        // @ts-ignore
+        this.cesiumStyle.pointSize = { conditions: pointSizeConditions };
+        // @ts-ignore
+        this.cesiumStyle.image = { conditions: imageConditions };
+        /*
+        // @ts-ignore
+        this.cesiumStyle.heightOffset = { conditions: heightOffsetCondition };
+        // @ts-ignore
+        this.cesiumStyle.anchorLineEnabled = { conditions: anchorLineEnabledConditions };
+        // @ts-ignore
+        this.cesiumStyle.anchorLineColor = { conditions: anchorLineColorConditions };
+        */
+        // @ts-ignore
+        this.cesiumStyle.verticalOrigin = '1';
+        // @ts-ignore
+        this.cesiumStyle.horizontalOrigin = '0';
+        if (!silent) {
+            this._styleChanged();
+        }
+    }
+    updateCesiumStyleText(silent) {
+        const fontConditions = getDefaultCondition('olcs_font');
+        const labelTextConditions = getDefaultCondition('olcs_labelText');
+        const labelColorConditions = getDefaultCondition('olcs_fontColor', true);
+        const labelOutlineWidthConditions = getDefaultCondition('olcs_fontOutlineWidth');
+        const labelOutlineColorConditions = getDefaultCondition('olcs_fontOutlineColor', true);
+        if (this._text) {
+            if (this._text.getFont()) {
+                fontConditions.splice(1, 1, [
+                    'true',
+                    `'${String(this._text.getFont())}'`,
+                ]);
+            }
+            if (this._text.getText()) {
+                labelTextConditions.splice(1, 1, [
+                    'true',
+                    `'${String(this._text.getText())}'`,
+                ]);
+            }
+            if (this._text.getFill() && this._text.getFill().getColor()) {
+                labelColorConditions.splice(1, 1, [
+                    'true',
+                    getStringColor(this._text.getFill().getColor()),
+                ]);
+            }
+            if (this._text.getStroke() && this._text.getStroke().getColor()) {
+                labelOutlineColorConditions.splice(1, 1, [
+                    'true',
+                    getStringColor(this._text.getStroke().getColor()),
+                ]);
+                labelOutlineWidthConditions.splice(1, 1, [
+                    'true',
+                    `${this._text.getStroke().getWidth() || 1.25}`,
+                ]);
+            }
+        }
+        // @ts-ignore
+        this.cesiumStyle.font = { conditions: fontConditions };
+        // @ts-ignore
+        this.cesiumStyle.labelText = { conditions: labelTextConditions };
+        // @ts-ignore
+        this.cesiumStyle.labelColor = { conditions: labelColorConditions };
+        this.cesiumStyle.labelOutlineWidth = {
+            // @ts-ignore
+            conditions: labelOutlineWidthConditions,
+        };
+        this.cesiumStyle.labelOutlineColor = {
+            // @ts-ignore
+            conditions: labelOutlineColorConditions,
+        };
+        // @ts-ignore
+        this.cesiumStyle.labelStyle =
+            'Boolean(${olcs_fontOutlineWidth}) === true ? 2 : 0';
+        // @ts-ignore
+        this.cesiumStyle.labelHorizontalOrigin = '0';
+        let verticalOrigin = VerticalOrigin.CENTER;
+        if (this._text) {
+            switch (this._text.getTextBaseline()) {
+                case 'top':
+                    verticalOrigin = VerticalOrigin.TOP;
+                    break;
+                case 'middle':
+                    verticalOrigin = VerticalOrigin.CENTER;
+                    break;
+                case 'bottom':
+                    verticalOrigin = VerticalOrigin.BOTTOM;
+                    break;
+                case 'alphabetic':
+                    verticalOrigin = VerticalOrigin.TOP;
+                    break;
+                case 'hanging':
+                    verticalOrigin = VerticalOrigin.BOTTOM;
+                    break;
+                default:
+                    break;
+            }
+        }
+        // @ts-ignore
+        this.cesiumStyle.labelVerticalOrigin = verticalOrigin;
+        if (!silent) {
+            this._styleChanged();
+        }
+    }
+    clone(result) {
+        if (result) {
+            result.style =
+                this._style instanceof Style ? this._style.clone() : this._style;
+            if (this._fillOptions && this._fillOptions.color) {
+                result.fillColor = this._fillOptions.color.slice();
+                if (this._fillOptions.pattern) {
+                    result.pattern = { ...this._fillOptions.pattern };
+                }
+            }
+            Object.keys(this.exclude).forEach((section) => {
+                if (this.exclude[section]) {
+                    result.unset(section);
+                }
+            });
+            return result;
+        }
+        const config = this.toJSON();
+        delete config.name;
+        return new VectorStyleItem(config);
+    }
+    assign(result) {
+        super.assign(result);
+        if (result.fillColor) {
+            this.fillColor = result.fillColor.slice();
+        }
+        if (result.pattern) {
+            this.pattern = { ...result.pattern };
+        }
+        else {
+            this.pattern = undefined;
+        }
+        if (result.stroke) {
+            this.stroke = result.stroke.clone();
+        }
+        if (result.image) {
+            this.image = result.image.clone();
+        }
+        if (result.text) {
+            this.text = result.text.clone();
+        }
+        if (result.label) {
+            this.label = result.label;
+        }
+        Object.keys(result.exclude).forEach((section) => {
+            if (result.exclude[section]) {
+                this.unset(section);
+            }
+        });
+        return this;
+    }
+    toJSON() {
+        // TODO clean default, only copy relevant keys
+        const options = super.toJSON();
+        if (this._fillOptions) {
+            options.fill = {
+                color: parseColor(this._fillOptions.color).slice(),
+            };
+            if (this._fillOptions.pattern) {
+                options.fill.pattern = { ...this._fillOptions.pattern };
+            }
+        }
+        else if (this.exclude.fill) {
+            options.fill = false;
+        }
+        if (this._stroke) {
+            options.stroke = getStrokeOptions(this._stroke);
+        }
+        else if (this.exclude.stroke) {
+            options.stroke = false;
+        }
+        if (this._text) {
+            options.text = getTextOptions(this._text);
+        }
+        if (this._label) {
+            options.label = this._label;
+        }
+        const imageOptions = this._image
+            ? getImageStyleOptions(this._image)
+            : undefined;
+        if (imageOptions) {
+            options.image = imageOptions;
+        }
+        else if (this.exclude.image) {
+            options.image = false;
+        }
+        return options;
+    }
+    getOptionsForFeature(feature) {
+        const type = feature.getGeometry()?.getType();
+        const extrusion = !!feature.get('olcs_extrudedHeight');
+        const sections = new Set();
+        if (type === 'Point' || type === 'MultiPoint') {
+            if (feature[vectorStyleSymbol]?.label != null) {
+                sections.add('text');
+                sections.add('label');
+            }
+            sections.add('image');
+            if (extrusion) {
+                sections.add('stroke');
+            }
+        }
+        else if (type === 'LineString' || type === 'MultiLineString') {
+            sections.add('stroke');
+            if (extrusion) {
+                sections.add('fill');
+            }
+        }
+        else if (type === 'Polygon' ||
+            type === 'MultiPolygon' ||
+            type === 'Circle') {
+            sections.add('stroke');
+            sections.add('fill');
+        }
+        else if (type === 'GeometryCollection') {
+            sections.add('stroke');
+            sections.add('fill');
+            sections.add('image');
+            sections.add('text');
+        }
+        const config = this.toJSON();
+        const options = {};
+        sections.forEach((key) => {
+            // @ts-ignore
+            options[key] = config[key];
+        });
+        return options;
+    }
+    /**
+     * Exclude a section from this style. Excluded section are not returned and cannot be assigned via .assign.
+     * Setting the section over a property will remove it from the excluded sections.
+     * @param  section - one of fill, stroke, image
+     */
+    unset(section) {
+        check(section, Object.keys(this.exclude));
+        if (section === 'fill') {
+            this.fillColor = undefined;
+        }
+        else {
+            this[section] = undefined;
+        }
+        this.exclude[section] = true;
+    }
+    destroy() {
+        this._image = undefined;
+        this._stroke = undefined;
+        this._fill = undefined;
+        this._label = undefined;
+        this._text = undefined;
+        this._style = () => { };
+        super.destroy();
+    }
+}
+export default VectorStyleItem;
+export const defaultVectorStyle = new VectorStyleItem(getDefaultVectorStyleItemOptions());
+styleClassRegistry.registerClass(VectorStyleItem.className, VectorStyleItem);
+export function fromCesiumColor(cesiumColor) {
+    const color = cesiumColor.toBytes();
+    color[3] /= 255;
+    return new VectorStyleItem({
+        fill: { color },
+        stroke: {
+            color,
+            width: defaultVectorStyle.stroke?.getWidth(),
+        },
+    });
+}
+//# sourceMappingURL=vectorStyleItem.js.map