@npm9912/v-map 0.1.0

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

@@ -0,0 +1,42 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createLiveMap, createTaggedElement, loadVMapBundle, onceEvent, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map-layer-terrain-geotiff browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-layer-terrain-geotiff');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates inside a live deck map with a local terrain GeoTIFF fixture', async () => {
+        const map = createLiveMap('deck');
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-terrain-geotiff');
+        const readyEvent = onceEvent(layer, 'ready', 10_000);
+        layer.setAttribute('url', '/geotiff/cea.tif');
+        layer.setAttribute('mesh-max-error', '2');
+        layer.setAttribute('elevation-scale', '1.5');
+        layer.setAttribute('projection', 'EPSG:32632');
+        layer.setAttribute('force-projection', 'true');
+        layer.visible = false;
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        await readyEvent;
+        expect(layer.getAttribute('url')).toBe('/geotiff/cea.tif');
+        expect(layer.getAttribute('mesh-max-error')).toBe('2');
+        expect(layer.getAttribute('elevation-scale')).toBe('1.5');
+        expect(layer.getAttribute('projection')).toBe('EPSG:32632');
+        expect(layer.getAttribute('force-projection')).toBe('true');
+        layer.opacity = 0.9;
+        layer.visible = true;
+        layer.zIndex = 300;
+        await waitFor(() => layer.opacity === 0.9 &&
+            layer.visible === true &&
+            layer.zIndex === 300);
+        expect(layer.opacity).toBe(0.9);
+        expect(layer.visible).toBe(true);
+        expect(layer.zIndex).toBe(300);
+    });
+});

package/dist/collection/components/v-map-layer-tile3d/v-map-layer-tile3d.css

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

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

@@ -0,0 +1,449 @@
+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-tile3d - ';
+export class VMapLayerTile3d {
+    el;
+    /** Current load state of the layer. */
+    loadState = 'idle';
+    /**
+     * URL pointing to the Cesium 3D Tileset.
+     */
+    url;
+    /**
+     * Optional JSON string or object with Cesium3DTileset options.
+     */
+    tilesetOptions;
+    /**
+     * Whether the tileset should be visible.
+     * @default true
+     */
+    visible = true;
+    /**
+     * Global opacity factor (0-1).
+     * @default 1
+     */
+    opacity = 1;
+    /**
+     * Z-index used for ordering tilesets.
+     * @default 1000
+     */
+    zIndex = 1000;
+    /**
+     * Fired once the tileset layer is initialised.
+     */
+    ready;
+    didLoad = false;
+    hasLoadedOnce = false;
+    helper;
+    appliedCesiumStyle;
+    async connectedCallback() {
+        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);
+        this.helper.startLoading();
+        await this.helper.initLayer(() => this.createLayerConfig(), this.el.id);
+        await this.applyExistingStyles();
+        this.didLoad = true;
+        this.hasLoadedOnce = true;
+        this.ready.emit();
+    }
+    async disconnectedCallback() {
+        log(MSG_COMPONENT + MSG.COMPONENT_DISCONNECTED_CALLBACK);
+        await this.helper?.dispose();
+    }
+    /**
+     * Indicates whether the tileset has been initialised and added to the map.
+     */
+    async isReady() {
+        return this.didLoad;
+    }
+    setLoadState(state) {
+        this.loadState = state;
+    }
+    /** Returns the last error detail, if any. */
+    async getError() {
+        return this.helper?.getError();
+    }
+    async onUrlChanged(oldValue, newValue) {
+        if (oldValue === newValue || !this.helper)
+            return;
+        await this.helper.updateLayer({
+            type: 'tile3d',
+            data: {
+                url: newValue,
+                tilesetOptions: this.parseTilesetOptions(),
+                cesiumStyle: this.appliedCesiumStyle,
+            },
+        });
+    }
+    async onTilesetOptionsChanged() {
+        if (!this.helper)
+            return;
+        await this.helper.updateLayer({
+            type: 'tile3d',
+            data: {
+                url: this.url,
+                tilesetOptions: this.parseTilesetOptions(),
+                cesiumStyle: this.appliedCesiumStyle,
+            },
+        });
+    }
+    async onVisibleChanged() {
+        await this.helper?.setVisible(this.visible);
+    }
+    async onOpacityChanged() {
+        await this.helper?.setOpacity(this.opacity);
+    }
+    async onZIndexChanged() {
+        await this.helper?.setZIndex(this.zIndex);
+    }
+    /**
+     * Listen for style events from v-map-style components
+     */
+    async onStyleReady(event) {
+        const { style, layerIds } = event.detail;
+        if (!style || isGeoStylerStyle(style))
+            return;
+        if (!this.isTargetedByStyle(layerIds))
+            return;
+        log(MSG_COMPONENT + 'Applying Cesium 3D Tiles style');
+        this.appliedCesiumStyle = style;
+        await this.updateLayerWithCesiumStyle();
+    }
+    // @Listen('styleReady', { target: 'document' })
+    // async onStyleReady(event: CustomEvent<unknown>) {
+    //   const styleComponent = event.target as HTMLVMapStyleElement;
+    //   if (!this.isCesiumStyle(styleComponent)) return;
+    //   if (!this.isTargetedByStyle(styleComponent)) return;
+    //   const style = styleComponent.getStyle
+    //     ? await styleComponent.getStyle()
+    //     : event.detail;
+    //   if (!style || typeof style !== 'object') return;
+    //   log(MSG_COMPONENT + 'Applying Cesium 3D Tiles style');
+    //   this.appliedCesiumStyle = style as Cesium3DTileStyle;
+    //   await this.updateLayerWithCesiumStyle();
+    // }
+    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 Cesium 3D Tiles style');
+            this.appliedCesiumStyle = style;
+            await this.updateLayerWithCesiumStyle();
+        }
+    }
+    /**
+     * 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 updateLayerWithCesiumStyle() {
+        if (!this.helper || !this.appliedCesiumStyle)
+            return;
+        await this.helper.updateLayer({
+            type: 'tile3d-style',
+            data: {
+                style: this.appliedCesiumStyle,
+            },
+        });
+    }
+    parseTilesetOptions() {
+        if (!this.tilesetOptions)
+            return undefined;
+        if (typeof this.tilesetOptions === 'object') {
+            return this.tilesetOptions;
+        }
+        try {
+            return JSON.parse(this.tilesetOptions);
+        }
+        catch (error) {
+            this.helper?.setError({ type: 'parse', message: 'Invalid tilesetOptions JSON', attribute: 'tilesetOptions', cause: error });
+            return undefined;
+        }
+    }
+    createLayerConfig() {
+        const config = {
+            type: 'tile3d',
+            url: this.url,
+            visible: this.visible,
+            opacity: this.opacity,
+            zIndex: this.zIndex,
+            tilesetOptions: this.parseTilesetOptions(),
+            cesiumStyle: this.appliedCesiumStyle,
+        };
+        return config;
+    }
+    render() {
+        return h("slot", { key: '39223347c38080929d4865fa5ee2de4f3b1f87b1' });
+    }
+    static get is() { return "v-map-layer-tile3d"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-layer-tile3d.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-layer-tile3d.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'"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL pointing to the Cesium 3D Tileset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "url"
+            },
+            "tilesetOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional JSON string or object with Cesium3DTileset options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tileset-options"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether the tileset should be visible."
+                },
+                "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": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Global opacity factor (0-1)."
+                },
+                "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": [{
+                            "name": "default",
+                            "text": "1000"
+                        }],
+                    "text": "Z-index used for ordering tilesets."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "z-index",
+                "defaultValue": "1000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "didLoad": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ready",
+                "name": "ready",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired once the tileset layer is initialised."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isReady": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Indicates whether the tileset has been initialised and added to the map.",
+                    "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": "url",
+                "methodName": "onUrlChanged"
+            }, {
+                "propName": "tilesetOptions",
+                "methodName": "onTilesetOptionsChanged"
+            }, {
+                "propName": "visible",
+                "methodName": "onVisibleChanged"
+            }, {
+                "propName": "opacity",
+                "methodName": "onOpacityChanged"
+            }, {
+                "propName": "zIndex",
+                "methodName": "onZIndexChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "styleReady",
+                "method": "onStyleReady",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,50 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createTaggedElement, loadVMapBundle, onceEvent, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map-layer-tile3d browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-style');
+        await customElements.whenDefined('v-map-layer-tile3d');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates and reacts to live style events without the legacy e2e harness', async () => {
+        const style = createTaggedElement('v-map-style');
+        const initialStyle = {
+            color: "color('white', 0.5)",
+            show: true,
+        };
+        style.format = 'cesium-3d-tiles';
+        style.layerTargets = 'test-tileset';
+        style.content = JSON.stringify(initialStyle);
+        const initialStyleReady = onceEvent(style, 'styleReady');
+        document.body.appendChild(style);
+        await waitForHydration(style);
+        await initialStyleReady;
+        const layer = createTaggedElement('v-map-layer-tile3d');
+        const readyEvent = onceEvent(layer, 'ready');
+        layer.id = 'test-tileset';
+        layer.url = 'https://example.com/tileset.json';
+        layer.opacity = 0.8;
+        layer.visible = true;
+        layer.zIndex = 1200;
+        document.body.appendChild(layer);
+        await waitForHydration(layer);
+        await readyEvent;
+        expect(await layer.isReady()).toBe(true);
+        expect(await style.getStyle()).toEqual(initialStyle);
+        expect(layer.url).toBe('https://example.com/tileset.json');
+        expect(layer.opacity).toBe(0.8);
+        expect(layer.visible).toBe(true);
+        const nextStyle = {
+            color: "color('red')",
+            show: false,
+        };
+        const updatedStyleReady = onceEvent(style, 'styleReady');
+        style.content = JSON.stringify(nextStyle);
+        await updatedStyleReady;
+        expect(await style.getStyle()).toEqual(nextStyle);
+        expect(await layer.isReady()).toBe(true);
+    });
+});

package/dist/collection/components/v-map-layer-wcs/v-map-layer-wcs.css

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