@npm9912/v-map 0.1.0

package/dist/collection/components/v-map-layer-geojson/v-map-layer-geojson.js

@@ -0,0 +1,862 @@
+import { h, } from "@stencil/core";
+import { VMapLayerHelper } from "../../layer/v-map-layer-helper";
+import { log } from "../../utils/logger";
+import MSG from "../../utils/messages";
+import { isGeoStylerStyle } from "../../types/styling";
+const MSG_COMPONENT = 'v-map-layer-geojson - ';
+export class VMapLayerGeoJSON {
+    el;
+    /** Current load state of the layer. */
+    loadState = 'idle';
+    /** Prop, die du intern nutzt/weiterverarbeitest */
+    geojson;
+    /**
+     * URL to fetch GeoJSON data from. Alternative to providing data via slot.
+     */
+    url = null;
+    /**
+     * Whether the layer is visible on the map.
+     */
+    visible = true;
+    /**
+     * Z-index for layer stacking order. Higher values render on top.
+     */
+    zIndex = 1000;
+    /**
+     * Opazität der geojson-Kacheln (0–1).
+     * @default 1
+     */
+    opacity = 1.0;
+    // ========== Styling Properties ==========
+    /**
+     * Fill color for polygon geometries (CSS color value)
+     * @default 'rgba(0,100,255,0.3)'
+     */
+    fillColor;
+    /**
+     * Fill opacity for polygon geometries (0-1)
+     * @default 0.3
+     */
+    fillOpacity;
+    /**
+     * Stroke color for lines and polygon outlines (CSS color value)
+     * @default 'rgba(0,100,255,1)'
+     */
+    strokeColor;
+    /**
+     * Stroke width in pixels
+     * @default 2
+     */
+    strokeWidth;
+    /**
+     * Stroke opacity (0-1)
+     * @default 1
+     */
+    strokeOpacity;
+    /**
+     * Point radius for point geometries in pixels
+     * @default 6
+     */
+    pointRadius;
+    /**
+     * Point color for point geometries (CSS color value)
+     * @default 'rgba(0,100,255,1)'
+     */
+    pointColor;
+    /**
+     * Icon URL for point features (alternative to pointColor/pointRadius)
+     */
+    iconUrl;
+    /**
+     * Icon size as [width, height] in pixels (comma-separated string like "32,32")
+     * @default "32,32"
+     */
+    iconSize;
+    /**
+     * Text property name from feature properties to display as label
+     */
+    textProperty;
+    /**
+     * Text color for labels (CSS color value)
+     * @default '#000000'
+     */
+    textColor;
+    /**
+     * Text size for labels in pixels
+     * @default 12
+     */
+    textSize;
+    geoSlot;
+    mo;
+    lastString;
+    layerId = null;
+    didLoad = false;
+    hasLoadedOnce = false;
+    helper;
+    appliedGeostylerStyle;
+    /**
+     * Returns the internal layer ID used by the map provider.
+     */
+    async getLayerId() {
+        return this.layerId;
+    }
+    setLoadState(state) {
+        this.loadState = state;
+    }
+    /** Returns the last error detail, if any. */
+    async getError() {
+        return this.helper?.getError();
+    }
+    async connectedCallback() {
+        log(MSG_COMPONENT + MSG.COMPONENT_CONNECTED_CALLBACK);
+        if (!this.hasLoadedOnce)
+            return;
+        this.helper.startLoading();
+        await this.helper.initLayer(() => this.createLayerConfig(), this.el.id);
+    }
+    async componentWillLoad() {
+        log(MSG_COMPONENT + MSG.COMPONENT_WILL_LOAD);
+        this.helper = new VMapLayerHelper(this.el, this);
+    }
+    async componentDidLoad() {
+        log(MSG_COMPONENT + MSG.COMPONENT_DID_LOAD);
+        // Slot referenzieren
+        this.geoSlot = this.el.shadowRoot.querySelector('slot[name="geojson"]');
+        if (this.geoSlot) {
+            // 1) Auf Slot-Zuweisungswechsel reagieren
+            this.geoSlot.addEventListener('slotchange', this.onSlotChange);
+            // 2) Initial lesen + zugewiesene Nodes beobachten
+            this.observeAssignedNodes();
+            this.readGeoJsonFromSlot();
+        }
+        this.helper.startLoading();
+        await this.helper.initLayer(() => this.createLayerConfig(), this.el.id);
+        await this.applyExistingStyles();
+        this.didLoad = true;
+        this.hasLoadedOnce = true;
+        //todo    this.ready.emit();
+    }
+    async disconnectedCallback() {
+        log(MSG_COMPONENT + MSG.COMPONENT_DISCONNECTED_CALLBACK);
+        this.mo?.disconnect();
+        this.geoSlot?.removeEventListener('slotchange', this.onSlotChange);
+        await this.helper?.dispose();
+    }
+    isReady() {
+        return this.didLoad;
+    }
+    async onGeoJsonChanged(oldValue, newValue) {
+        log(MSG_COMPONENT + 'onGeoJsonChanged');
+        // hier deinen Layer aktualisieren
+        if (oldValue !== newValue) {
+            let geojsonString = null;
+            if (typeof this.geojson === 'object') {
+                geojsonString = JSON.stringify(this.geojson);
+            }
+            else if (typeof this.geojson === 'string') {
+                geojsonString = this.geojson;
+            }
+            await this.helper?.updateLayer({
+                type: 'geojson',
+                data: {
+                    geojson: geojsonString,
+                },
+            });
+            //     await this.helper.initLayer(() => this.createLayerConfig());
+        }
+    }
+    async onUrlChanged(oldValue, newValue) {
+        log(MSG_COMPONENT + 'onUrlChanged');
+        if (oldValue !== newValue) {
+            await this.helper?.updateLayer({
+                type: 'geojson',
+                data: {
+                    url: this.url,
+                },
+            });
+        }
+        //    if (oldValue !== newValue) {
+        //      await this.helper.initLayer(() => this.createLayerConfig());
+        //    }
+    }
+    async onVisibleChanged() {
+        log(MSG_COMPONENT + 'onVisibleChanged');
+        await this.helper?.setVisible(this.visible);
+    }
+    async onOpacityChanged() {
+        log(MSG_COMPONENT + 'onOpacityChanged');
+        await this.helper?.setOpacity(this.opacity);
+    }
+    async onZIndexChanged() {
+        log(MSG_COMPONENT + 'onZIndexChanged');
+        await this.helper?.setZIndex(this.zIndex);
+    }
+    // ========== Styling Property Watchers ==========
+    async onStyleChanged() {
+        log(MSG_COMPONENT + 'onStyleChanged');
+        // Trigger layer recreation with new style
+        await this.helper?.updateLayer({
+            type: 'geojson',
+            data: {
+                geojson: this.geojson,
+                url: this.url,
+            },
+        });
+    }
+    /**
+     * Listen for style events from v-map-style components
+     */
+    async onStyleReady(event) {
+        if (isGeoStylerStyle(event.detail.style)) {
+            if (this.isTargetedByStyle(event.detail.layerIds)) {
+                log(MSG_COMPONENT + 'Applying geostyler style');
+                this.appliedGeostylerStyle = event.detail.style;
+                await this.updateLayerWithGeostylerStyle();
+            }
+        }
+    }
+    /**
+     * Check if this layer is targeted by a style component
+     */
+    isTargetedByStyle(layerIds) {
+        if (!layerIds)
+            return false;
+        return layerIds.includes(this.el.id) || layerIds.length === 0;
+    }
+    async applyExistingStyles() {
+        const styleComponents = Array.from(document.querySelectorAll('v-map-style'));
+        for (const styleComponent of styleComponents) {
+            const style = styleComponent.getStyle
+                ? await styleComponent.getStyle()
+                : undefined;
+            if (!style)
+                continue;
+            if (!isGeoStylerStyle(style))
+                continue;
+            const layerTargetIds = styleComponent.getLayerTargetIds
+                ? await styleComponent.getLayerTargetIds()
+                : undefined;
+            if (!layerTargetIds)
+                continue;
+            if (!this.isTargetedByStyle(layerTargetIds))
+                continue;
+            log(MSG_COMPONENT + 'Applying existing geostyler style');
+            this.appliedGeostylerStyle = style;
+            await this.updateLayerWithGeostylerStyle();
+        }
+    }
+    // private isGeostylerFormat(styleComponent: HTMLVMapStyleElement): boolean {
+    //   const format = styleComponent.format?.toLowerCase();
+    //   return (
+    //     format === 'sld' ||
+    //     format === 'mapbox-gl' ||
+    //     format === 'qgis' ||
+    //     format === 'lyrx'
+    //   );
+    // }
+    /**
+     * Update the layer with the applied geostyler style
+     */
+    async updateLayerWithGeostylerStyle() {
+        if (!this.appliedGeostylerStyle || !this.helper)
+            return;
+        await this.helper.updateLayer({
+            type: 'geojson',
+            data: {
+                geojson: this.geojson,
+                url: this.url,
+                geostylerStyle: this.appliedGeostylerStyle,
+            },
+        });
+    }
+    onSlotChange = () => {
+        log(MSG_COMPONENT + 'onSlotChange');
+        this.observeAssignedNodes();
+        this.readGeoJsonFromSlot();
+    };
+    observeAssignedNodes() {
+        log(MSG_COMPONENT + 'observeAssignedNodes');
+        this.mo?.disconnect();
+        if (!this.geoSlot)
+            return;
+        const nodes = this.geoSlot.assignedNodes({ flatten: true });
+        this.mo = new MutationObserver(() => this.readGeoJsonFromSlot());
+        for (const n of nodes) {
+            // Text- oder Element-Knoten beobachten (inkl. Subtree)
+            this.mo.observe(n, {
+                characterData: true,
+                childList: true,
+                subtree: true,
+            });
+        }
+    }
+    readGeoJsonFromSlot() {
+        log(MSG_COMPONENT + 'readGeoJsonFromSlot');
+        if (!this.geoSlot) {
+            log(MSG_COMPONENT + 'readGeoJsonFromSlot - geoSlot: false');
+            return;
+        }
+        const raw = this.geoSlot
+            .assignedNodes({ flatten: true })
+            .map(n => n.textContent || '')
+            .join('')
+            .trim();
+        if (!raw) {
+            log(MSG_COMPONENT + 'readGeoJsonFromSlot - raw: false');
+            return; // nichts/keine Änderung
+        }
+        if (raw === this.lastString) {
+            log(MSG_COMPONENT + 'readGeoJsonFromSlot - raw === this.lastString');
+            return; // nichts/keine Änderung
+        }
+        this.lastString = raw;
+        try {
+            const geojson = JSON.parse(raw);
+            log(MSG_COMPONENT + 'readGeoJsonFromSlot: ', geojson);
+            this.geojson = geojson;
+            // optional: eigenes Event „data-updated“ feuern
+            // this.host.dispatchEvent(new CustomEvent('data-updated', { detail: this.geojson }));
+        }
+        catch (e) {
+            this.helper?.setError({ type: 'parse', message: 'Ungültiges JSON im Slot', attribute: 'geojson', cause: e });
+        }
+    }
+    createLayerConfig() {
+        // Parse iconSize string to array
+        const iconSizeArray = this.iconSize
+            ? this.iconSize.split(',').map(s => parseInt(s.trim(), 10))
+            : undefined;
+        let geojsonString = null;
+        if (typeof this.geojson === 'object') {
+            geojsonString = JSON.stringify(this.geojson);
+        }
+        else if (typeof this.geojson === 'string') {
+            geojsonString = this.geojson;
+        }
+        const style = {
+            fillColor: this.fillColor,
+            fillOpacity: this.fillOpacity,
+            strokeColor: this.strokeColor,
+            strokeWidth: this.strokeWidth,
+            strokeOpacity: this.strokeOpacity,
+            pointRadius: this.pointRadius,
+            pointColor: this.pointColor,
+            iconUrl: this.iconUrl,
+            iconSize: iconSizeArray,
+            textProperty: this.textProperty,
+            textColor: this.textColor,
+            textSize: this.textSize,
+        };
+        const config = {
+            type: 'geojson',
+            opacity: this.opacity,
+            visible: this.visible,
+            zIndex: this.zIndex,
+            url: this.url,
+            geojson: geojsonString,
+            style,
+        };
+        // Add geostyler style if available (takes precedence over component style props)
+        if (this.appliedGeostylerStyle) {
+            config.geostylerStyle = this.appliedGeostylerStyle;
+        }
+        return config;
+    }
+    render() {
+        return h("slot", { key: '093a5de19ea7090df1883b15e379b604dfabc1a1', name: "geojson", onSlotchange: this.onSlotChange });
+    }
+    static get is() { return "v-map-layer-geojson"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "loadState": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'idle' | 'loading' | 'ready' | 'error'",
+                    "resolved": "\"error\" | \"idle\" | \"loading\" | \"ready\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current load state of the layer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "load-state",
+                "defaultValue": "'idle'"
+            },
+            "geojson": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Prop, die du intern nutzt/weiterverarbeitest"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "geojson"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to fetch GeoJSON data from. Alternative to providing data via slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "url",
+                "defaultValue": "null"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the layer is visible on the map."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "visible",
+                "defaultValue": "true"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Z-index for layer stacking order. Higher values render on top."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "z-index",
+                "defaultValue": "1000"
+            },
+            "opacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Opazit\u00E4t der geojson-Kacheln (0\u20131)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "opacity",
+                "defaultValue": "1.0"
+            },
+            "fillColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'rgba(0,100,255,0.3)'"
+                        }],
+                    "text": "Fill color for polygon geometries (CSS color value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "fill-color"
+            },
+            "fillOpacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0.3"
+                        }],
+                    "text": "Fill opacity for polygon geometries (0-1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "fill-opacity"
+            },
+            "strokeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'rgba(0,100,255,1)'"
+                        }],
+                    "text": "Stroke color for lines and polygon outlines (CSS color value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "stroke-color"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "2"
+                        }],
+                    "text": "Stroke width in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "stroke-width"
+            },
+            "strokeOpacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Stroke opacity (0-1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "stroke-opacity"
+            },
+            "pointRadius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "6"
+                        }],
+                    "text": "Point radius for point geometries in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "point-radius"
+            },
+            "pointColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'rgba(0,100,255,1)'"
+                        }],
+                    "text": "Point color for point geometries (CSS color value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "point-color"
+            },
+            "iconUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon URL for point features (alternative to pointColor/pointRadius)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon-url"
+            },
+            "iconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"32,32\""
+                        }],
+                    "text": "Icon size as [width, height] in pixels (comma-separated string like \"32,32\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon-size"
+            },
+            "textProperty": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text property name from feature properties to display as label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-property"
+            },
+            "textColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'#000000'"
+                        }],
+                    "text": "Text color for labels (CSS color value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-color"
+            },
+            "textSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "12"
+                        }],
+                    "text": "Text size for labels in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-size"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "getLayerId": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the internal layer ID used by the map provider.",
+                    "tags": []
+                }
+            },
+            "getError": {
+                "complexType": {
+                    "signature": "() => Promise<VMapErrorDetail | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "VMapErrorDetail": {
+                            "location": "import",
+                            "path": "../../utils/events",
+                            "id": "src/utils/events.ts::VMapErrorDetail",
+                            "referenceLocation": "VMapErrorDetail"
+                        }
+                    },
+                    "return": "Promise<VMapErrorDetail>"
+                },
+                "docs": {
+                    "text": "Returns the last error detail, if any.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "geojson",
+                "methodName": "onGeoJsonChanged"
+            }, {
+                "propName": "url",
+                "methodName": "onUrlChanged"
+            }, {
+                "propName": "visible",
+                "methodName": "onVisibleChanged"
+            }, {
+                "propName": "opacity",
+                "methodName": "onOpacityChanged"
+            }, {
+                "propName": "zIndex",
+                "methodName": "onZIndexChanged"
+            }, {
+                "propName": "fillColor",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "fillOpacity",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "strokeColor",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "strokeWidth",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "strokeOpacity",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "pointRadius",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "pointColor",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "iconUrl",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "iconSize",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "textProperty",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "textColor",
+                "methodName": "onStyleChanged"
+            }, {
+                "propName": "textSize",
+                "methodName": "onStyleChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "styleReady",
+                "method": "onStyleReady",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}