@npm9912/v-map 0.1.0

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

@@ -0,0 +1,548 @@
+import { h, } from "@stencil/core";
+import { VMapLayerHelper } from "../../layer/v-map-layer-helper";
+import { log } from "../../utils/logger";
+const MSG_COMPONENT = 'v-map-layer-terrain - ';
+export class VMapLayerTerrain {
+    el;
+    /** Current load state of the layer. */
+    loadState = 'idle';
+    /**
+     * URL zu Höhenraster im Heightmap-Format (z. B. GeoTIFF oder PNG Heightmap).
+     */
+    elevationData;
+    /**
+     * Optionale Textur (RGB) für das Terrain.
+     */
+    texture;
+    /**
+     * JSON-Repräsentation eines Elevation-Decoders (z. B. '{"r":1,"g":1,"b":1,"offset":0}').
+     */
+    elevationDecoder;
+    /**
+     * Darstellung des Mesh als Drahtgitter.
+     */
+    wireframe;
+    /**
+     * Basisfarbe für das Terrain. Erwartet Hex oder RGB (z. B. '#ff0000' oder '255,0,0').
+     */
+    color;
+    /**
+     * Minimale Zoomstufe für das Terrain.
+     */
+    minZoom;
+    /**
+     * Maximale Zoomstufe für das Terrain.
+     */
+    maxZoom;
+    /**
+     * Fehler-Toleranz für das Mesh (wird an TerrainRenderer durchgereicht).
+     */
+    meshMaxError;
+    /**
+     * Sichtbarkeit des Layers.
+     */
+    visible = true;
+    /**
+     * Opazität des Layers.
+     */
+    opacity = 1;
+    /**
+     * Z-Index für die Darstellung.
+     */
+    zIndex = 1000;
+    didLoad = false;
+    hasLoadedOnce = false;
+    helper;
+    setLoadState(state) {
+        this.loadState = state;
+    }
+    /** Returns the last error detail, if any. */
+    async getError() {
+        return this.helper?.getError();
+    }
+    componentWillLoad() {
+        log(MSG_COMPONENT + 'componentWillLoad');
+        this.helper = new VMapLayerHelper(this.el, this);
+    }
+    async componentDidLoad() {
+        log(MSG_COMPONENT + 'componentDidLoad');
+        this.helper.startLoading();
+        await this.helper.initLayer(() => this.createLayerConfig(), this.el.id);
+        this.didLoad = true;
+        this.hasLoadedOnce = true;
+    }
+    async connectedCallback() {
+        if (!this.hasLoadedOnce)
+            return;
+        this.helper.startLoading();
+        await this.helper.initLayer(() => this.createLayerConfig(), this.el.id);
+    }
+    async disconnectedCallback() {
+        log(MSG_COMPONENT + 'disconnectedCallback');
+        await this.helper?.dispose();
+    }
+    /**
+     * Liefert `true`, sobald das Terrain-Layer initialisiert wurde.
+     */
+    async isReady() {
+        return this.didLoad;
+    }
+    async onVisibleChanged() {
+        if (!this.didLoad)
+            return;
+        await this.helper?.setVisible(this.visible);
+    }
+    async onOpacityChanged() {
+        if (!this.didLoad)
+            return;
+        await this.helper?.setOpacity(this.opacity);
+    }
+    async onZIndexChanged() {
+        if (!this.didLoad)
+            return;
+        await this.helper?.setZIndex(this.zIndex);
+    }
+    async onTerrainConfigChanged() {
+        if (!this.didLoad)
+            return;
+        await this.pushTerrainUpdate();
+    }
+    async pushTerrainUpdate() {
+        await this.helper?.updateLayer({
+            type: 'terrain',
+            data: {
+                type: 'terrain',
+                elevationData: this.elevationData,
+                texture: this.texture,
+                elevationDecoder: this.getElevationDecoder(),
+                wireframe: this.wireframe,
+                color: this.getColorArray(),
+                minZoom: this.minZoom,
+                maxZoom: this.maxZoom,
+                meshMaxError: this.meshMaxError,
+                opacity: this.opacity,
+                visible: this.visible,
+                zIndex: this.zIndex,
+            },
+        });
+    }
+    getElevationDecoder() {
+        if (!this.elevationDecoder)
+            return undefined;
+        try {
+            const parsed = JSON.parse(this.elevationDecoder);
+            if (typeof parsed === 'object' &&
+                parsed !== null &&
+                ['r', 'g', 'b', 'offset'].every(k => k in parsed)) {
+                return parsed;
+            }
+            this.helper?.setError({ type: 'parse', message: 'Invalid elevationDecoder JSON', attribute: 'elevationDecoder', cause: undefined });
+        }
+        catch (error) {
+            this.helper?.setError({ type: 'parse', message: 'Invalid elevationDecoder JSON', attribute: 'elevationDecoder', cause: error });
+        }
+        return undefined;
+    }
+    getColorArray() {
+        if (!this.color)
+            return undefined;
+        const value = this.color.trim();
+        if (!value)
+            return undefined;
+        // JSON-style array
+        if (value.startsWith('[') && value.endsWith(']')) {
+            try {
+                const parsed = JSON.parse(value);
+                if (Array.isArray(parsed) &&
+                    parsed.length === 3 &&
+                    parsed.every(item => typeof item === 'number')) {
+                    return parsed;
+                }
+            }
+            catch (error) {
+                this.helper?.setError({ type: 'parse', message: 'Failed to parse color JSON array', attribute: 'color', cause: error });
+            }
+        }
+        // Comma separated numbers
+        if (value.includes(',')) {
+            const parts = value.split(',').map(part => parseFloat(part.trim()));
+            if (parts.length === 3 && parts.every(num => !Number.isNaN(num))) {
+                return parts;
+            }
+        }
+        // Hex value
+        if (value.startsWith('#')) {
+            const hex = value.replace('#', '');
+            if (hex.length === 3 || hex.length === 6) {
+                const normalized = hex.length === 3
+                    ? hex
+                        .split('')
+                        .map(ch => ch + ch)
+                        .join('')
+                    : hex;
+                const r = parseInt(normalized.slice(0, 2), 16);
+                const g = parseInt(normalized.slice(2, 4), 16);
+                const b = parseInt(normalized.slice(4, 6), 16);
+                if (![r, g, b].some(Number.isNaN)) {
+                    return [r, g, b];
+                }
+            }
+        }
+        this.helper?.setError({ type: 'parse', message: `Unsupported color format: ${value}`, attribute: 'color' });
+        return undefined;
+    }
+    createLayerConfig() {
+        const config = {
+            type: 'terrain',
+            elevationData: this.elevationData,
+            texture: this.texture,
+            elevationDecoder: this.getElevationDecoder(),
+            wireframe: this.wireframe,
+            color: this.getColorArray(),
+            minZoom: this.minZoom,
+            maxZoom: this.maxZoom,
+            meshMaxError: this.meshMaxError,
+            opacity: this.opacity,
+            visible: this.visible,
+            zIndex: this.zIndex,
+        };
+        return config;
+    }
+    render() {
+        return h("slot", { key: 'c199c1789ddbfdf0c9327a154d82d2ffac090b33' });
+    }
+    static get is() { return "v-map-layer-terrain"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-layer-terrain.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-layer-terrain.css"]
+        };
+    }
+    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'"
+            },
+            "elevationData": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL zu H\u00F6henraster im Heightmap-Format (z.\u202FB. GeoTIFF oder PNG Heightmap)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "elevation-data"
+            },
+            "texture": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optionale Textur (RGB) f\u00FCr das Terrain."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "texture"
+            },
+            "elevationDecoder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON-Repr\u00E4sentation eines Elevation-Decoders (z.\u202FB. '{\"r\":1,\"g\":1,\"b\":1,\"offset\":0}')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "elevation-decoder"
+            },
+            "wireframe": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Darstellung des Mesh als Drahtgitter."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "wireframe"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Basisfarbe f\u00FCr das Terrain. Erwartet Hex oder RGB (z.\u202FB. '#ff0000' oder '255,0,0')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color"
+            },
+            "minZoom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimale Zoomstufe f\u00FCr das Terrain."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "min-zoom"
+            },
+            "maxZoom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximale Zoomstufe f\u00FCr das Terrain."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-zoom"
+            },
+            "meshMaxError": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fehler-Toleranz f\u00FCr das Mesh (wird an TerrainRenderer durchgereicht)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mesh-max-error"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sichtbarkeit des Layers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "visible",
+                "defaultValue": "true"
+            },
+            "opacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opazit\u00E4t des Layers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "opacity",
+                "defaultValue": "1"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Z-Index f\u00FCr die Darstellung."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "z-index",
+                "defaultValue": "1000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "didLoad": {}
+        };
+    }
+    static get methods() {
+        return {
+            "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": []
+                }
+            },
+            "isReady": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Liefert `true`, sobald das Terrain-Layer initialisiert wurde.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "onVisibleChanged"
+            }, {
+                "propName": "opacity",
+                "methodName": "onOpacityChanged"
+            }, {
+                "propName": "zIndex",
+                "methodName": "onZIndexChanged"
+            }, {
+                "propName": "elevationData",
+                "methodName": "onTerrainConfigChanged"
+            }, {
+                "propName": "texture",
+                "methodName": "onTerrainConfigChanged"
+            }, {
+                "propName": "elevationDecoder",
+                "methodName": "onTerrainConfigChanged"
+            }, {
+                "propName": "wireframe",
+                "methodName": "onTerrainConfigChanged"
+            }, {
+                "propName": "color",
+                "methodName": "onTerrainConfigChanged"
+            }, {
+                "propName": "minZoom",
+                "methodName": "onTerrainConfigChanged"
+            }, {
+                "propName": "maxZoom",
+                "methodName": "onTerrainConfigChanged"
+            }, {
+                "propName": "meshMaxError",
+                "methodName": "onTerrainConfigChanged"
+            }];
+    }
+}

package/dist/collection/components/v-map-layer-terrain/v-map-layer-terrain.test.js

@@ -0,0 +1,36 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createTaggedElement, loadVMapBundle, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map-layer-terrain browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-layer-terrain');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates and reflects terrain props without the legacy e2e harness', async () => {
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-terrain');
+        layer.elevationData = 'https://example.com/terrain';
+        layer.texture = 'https://example.com/texture.jpg';
+        layer.wireframe = true;
+        layer.color = '#ff0000';
+        group.appendChild(layer);
+        document.body.appendChild(group);
+        await waitForHydration(layer);
+        expect(await layer.isReady()).toBe(true);
+        expect(layer.elevationData).toBe('https://example.com/terrain');
+        expect(layer.getAttribute('texture')).toBe('https://example.com/texture.jpg');
+        expect(layer.hasAttribute('wireframe')).toBe(true);
+        expect(layer.getAttribute('color')).toBe('#ff0000');
+        layer.opacity = 0.9;
+        layer.visible = false;
+        layer.zIndex = 300;
+        await waitFor(() => layer.getAttribute('opacity') === '0.9' &&
+            !layer.hasAttribute('visible') &&
+            layer.getAttribute('z-index') === '300');
+        expect(layer.getAttribute('opacity')).toBe('0.9');
+        expect(layer.hasAttribute('visible')).toBe(false);
+        expect(layer.getAttribute('z-index')).toBe('300');
+    });
+});

package/dist/collection/components/v-map-layer-terrain-geotiff/v-map-layer-terrain-geotiff.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}