@npm9912/v-map 0.1.0

package/dist/collection/components/v-map-style/v-map-style.css

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+.style-container {
+  min-height: 20px;
+}
+
+.loading {
+  padding: 8px;
+  background-color: #f0f0f0;
+  border-left: 4px solid #2196f3;
+  font-size: 14px;
+  color: #666;
+}
+
+.error {
+  padding: 8px;
+  background-color: #ffebee;
+  border-left: 4px solid #f44336;
+  color: #c62828;
+  font-size: 14px;
+}
+
+.success {
+  padding: 8px;
+  background-color: #e8f5e8;
+  border-left: 4px solid #4caf50;
+  color: #2e7d32;
+  font-size: 14px;
+}
+
+.targets {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #666;
+}

package/dist/collection/components/v-map-style/v-map-style.js

@@ -0,0 +1,492 @@
+import { h, } from "@stencil/core";
+import SLDParser from "geostyler-sld-parser";
+import MapboxParser from "geostyler-mapbox-parser";
+import QGISParser from "geostyler-qgis-parser";
+import LyrxParser from "geostyler-lyrx-parser";
+import { log } from "../../utils/logger";
+import MSG from "../../utils/messages";
+import { VMapEvents } from "../../utils/events";
+const MSG_COMPONENT = 'v-map-style';
+export class VMapStyle {
+    el;
+    /**
+     * The styling format to parse (supports 'sld', 'mapbox-gl', 'qgis', 'lyrx', 'cesium-3d-tiles').
+     */
+    format = 'sld';
+    /**
+     * The style source - can be a URL to fetch from or inline SLD/style content.
+     */
+    src;
+    /**
+     * Inline style content as string (alternative to src).
+     */
+    content;
+    /**
+     * Target layer IDs to apply this style to. If not specified, applies to all compatible layers.
+     */
+    layerTargets;
+    /**
+     * Whether to automatically apply the style when loaded.
+     * @default true
+     */
+    autoApply = true;
+    /**
+     * Fired when style is successfully parsed and ready to apply.
+     */
+    styleReady;
+    /**
+     * Fired when style parsing fails.
+     */
+    styleError;
+    parsedStyle;
+    isLoading = false;
+    error;
+    sldParser = new SLDParser();
+    mapboxParser = new MapboxParser();
+    qgisParser = new QGISParser();
+    lyrxParser = new LyrxParser();
+    async connectedCallback() {
+        log(MSG_COMPONENT + ' - ' + MSG.COMPONENT_CONNECTED_CALLBACK);
+        if (this.autoApply && (this.src || this.content)) {
+            await this.loadAndParseStyle();
+        }
+    }
+    async onStyleSourceChanged() {
+        if (this.autoApply && (this.src || this.content)) {
+            await this.loadAndParseStyle();
+        }
+    }
+    /**
+     * Load and parse the style from src or content.
+     */
+    async loadAndParseStyle() {
+        this.isLoading = true;
+        this.error = undefined;
+        try {
+            let styleContent;
+            if (this.src) {
+                // Fetch style from URL
+                const response = await fetch(this.src);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch style from ${this.src}: ${response.statusText}`);
+                }
+                styleContent = await response.text();
+            }
+            else if (this.content) {
+                // Use inline content
+                styleContent = this.content;
+            }
+            else {
+                throw new Error('Either src or content must be provided');
+            }
+            // Parse based on format
+            const style = await this.parseStyle(styleContent);
+            this.parsedStyle = style;
+            const styleEvent = {
+                style,
+                layerIds: this.getLayerTargets(),
+            };
+            this.styleReady.emit(styleEvent);
+            log(MSG_COMPONENT + ' - Style successfully parsed', style);
+            return style;
+        }
+        catch (error) {
+            this.error = error;
+            this.styleError.emit(this.error);
+            const errorType = isRemoteFetchFailure(this.error) ? 'network' : 'parse';
+            this.el.dispatchEvent(new CustomEvent(VMapEvents.Error, {
+                detail: {
+                    type: errorType,
+                    message: this.error.message,
+                    cause: this.error,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+            console.error(MSG_COMPONENT + ' - Style parsing failed:', error);
+            return undefined;
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async parseStyle(styleContent) {
+        switch (this.format) {
+            case 'sld':
+                return this.parseSLD(styleContent);
+            case 'mapbox-gl':
+                return this.parseMapboxGL(styleContent);
+            case 'qgis':
+                return this.parseQGIS(styleContent);
+            case 'lyrx':
+                return this.parseLyrx(styleContent);
+            case 'cesium-3d-tiles':
+                return this.parseCesium3DTiles(styleContent);
+            case 'geostyler':
+                return this.parseGeoStyler(styleContent);
+            default:
+                throw new Error(`Unsupported style format: ${this.format}`);
+        }
+    }
+    async parseSLD(sldContent) {
+        try {
+            const { output: style } = await this.sldParser.readStyle(sldContent);
+            if (!style) {
+                throw new Error('Failed to parse SLD - no style output');
+            }
+            return style;
+        }
+        catch (error) {
+            throw new Error(`SLD parsing failed: ${error?.message || error}`);
+        }
+    }
+    async parseMapboxGL(mapboxContent) {
+        try {
+            // Parse JSON if string
+            const mapboxStyle = typeof mapboxContent === 'string'
+                ? JSON.parse(mapboxContent)
+                : mapboxContent;
+            if (typeof mapboxStyle !== 'object' || mapboxStyle === null) {
+                throw new Error('Parsed Mapbox GL style is not a valid object');
+            }
+            const { output: style } = await this.mapboxParser.readStyle(mapboxStyle);
+            if (!style) {
+                throw new Error('Failed to parse Mapbox GL Style - no style output');
+            }
+            return style;
+        }
+        catch (error) {
+            throw new Error(`Mapbox GL Style parsing failed: ${error?.message || error}`);
+        }
+    }
+    async parseQGIS(qgisContent) {
+        try {
+            const { output: style } = await this.qgisParser.readStyle(qgisContent);
+            if (!style) {
+                throw new Error('Failed to parse QGIS Style - no style output');
+            }
+            return style;
+        }
+        catch (error) {
+            throw new Error(`QGIS Style parsing failed: ${error?.message || error}`);
+        }
+    }
+    async parseLyrx(lyrxContent) {
+        try {
+            // Parse JSON if string
+            const lyrxStyle = typeof lyrxContent === 'string' ? JSON.parse(lyrxContent) : lyrxContent;
+            if (typeof lyrxStyle !== 'object' || lyrxStyle === null) {
+                throw new Error('Parsed LYRX style is not a valid object');
+            }
+            const { output: style } = await this.lyrxParser.readStyle(lyrxStyle);
+            if (!style) {
+                throw new Error('Failed to parse LYRX (ArcGIS Pro) Style - no style output');
+            }
+            return style;
+        }
+        catch (error) {
+            throw new Error(`LYRX (ArcGIS Pro) Style parsing failed: ${error?.message || error}`);
+        }
+    }
+    /**
+     * Get the currently parsed style.
+     */
+    async getStyle() {
+        return this.parsedStyle;
+    }
+    async parseCesium3DTiles(jsonContent) {
+        try {
+            const style = JSON.parse(jsonContent);
+            if (typeof style !== 'object' || style === null) {
+                throw new Error('Parsed Cesium 3D Tiles style is not a valid object');
+            }
+            return style;
+        }
+        catch (error) {
+            throw new Error(`Cesium 3D Tiles style parsing failed: ${error?.message || error}`);
+        }
+    }
+    async parseGeoStyler(jsonContent) {
+        try {
+            const style = JSON.parse(jsonContent);
+            if (typeof style !== 'object' || style === null) {
+                throw new Error('Parsed GeoStyler style is not a valid object');
+            }
+            if (typeof style.name !== 'string' || !Array.isArray(style.rules)) {
+                throw new Error('GeoStyler style must have "name" (string) and "rules" (array)');
+            }
+            return style;
+        }
+        catch (error) {
+            throw new Error(`GeoStyler style parsing failed: ${error?.message || error}`);
+        }
+    }
+    /**
+     * Get the target layer IDs as array. async
+     */
+    async getLayerTargetIds() {
+        return this.getLayerTargets();
+    }
+    /**
+     * Get the target layer IDs as array.
+     */
+    getLayerTargets() {
+        if (!this.layerTargets)
+            return [];
+        return this.layerTargets.split(',').map(id => id.trim());
+    }
+    /**
+     * Check if style is loading.
+     */
+    isStyleLoading() {
+        return this.isLoading;
+    }
+    /**
+     * Get any parsing error.
+     */
+    getError() {
+        return this.error;
+    }
+    render() {
+        return (h("div", { key: 'a913bf37c39b0dc70522bb813809c38e5e099ebe', class: "style-container" }, this.isLoading && h("div", { key: 'b8a28051b8ff2ae1d80b1a0af110f9e8342e2260', class: "loading" }, "Loading style..."), this.error && (h("div", { key: 'b7db13abadd3f11f5916296d3e0278ce9044fafc', class: "error" }, "Style Error: ", this.error.message)), this.parsedStyle && (h("div", { key: '56e9327b9794d3eb09c520a17cc1103538f42453', class: "success" }, "Style loaded (", this.format.toUpperCase(), ")", this.getLayerTargets().length > 0 && (h("div", { key: 'b08e604f7fbec96aede1112538b0d785e9b3d226', class: "targets" }, "Targets: ", this.getLayerTargets().join(', '))))), h("slot", { key: '609e6131f414425f639cc81104cbb20da61bc1de' })));
+    }
+    static get is() { return "v-map-style"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-style.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-style.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StyleFormat",
+                    "resolved": "\"cesium-3d-tiles\" | \"geostyler\" | \"lyrx\" | \"mapbox-gl\" | \"qgis\" | \"sld\"",
+                    "references": {
+                        "StyleFormat": {
+                            "location": "import",
+                            "path": "../../types/styling",
+                            "id": "src/types/styling.ts::StyleFormat",
+                            "referenceLocation": "StyleFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The styling format to parse (supports 'sld', 'mapbox-gl', 'qgis', 'lyrx', 'cesium-3d-tiles')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "format",
+                "defaultValue": "'sld'"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The style source - can be a URL to fetch from or inline SLD/style content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "src"
+            },
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Inline style content as string (alternative to src)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "content"
+            },
+            "layerTargets": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Target layer IDs to apply this style to. If not specified, applies to all compatible layers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layer-targets"
+            },
+            "autoApply": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether to automatically apply the style when loaded."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "auto-apply",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedStyle": {},
+            "isLoading": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "styleReady",
+                "name": "styleReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when style is successfully parsed and ready to apply."
+                },
+                "complexType": {
+                    "original": "StyleEvent",
+                    "resolved": "{ style?: ResolvedStyle; layerIds?: string[]; }",
+                    "references": {
+                        "StyleEvent": {
+                            "location": "import",
+                            "path": "../../types/styling",
+                            "id": "src/types/styling.ts::StyleEvent",
+                            "referenceLocation": "StyleEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "styleError",
+                "name": "styleError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when style parsing fails."
+                },
+                "complexType": {
+                    "original": "Error",
+                    "resolved": "Error",
+                    "references": {
+                        "Error": {
+                            "location": "global",
+                            "id": "global::Error"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getStyle": {
+                "complexType": {
+                    "signature": "() => Promise<ResolvedStyle | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ResolvedStyle": {
+                            "location": "import",
+                            "path": "../../types/styling",
+                            "id": "src/types/styling.ts::ResolvedStyle",
+                            "referenceLocation": "ResolvedStyle"
+                        }
+                    },
+                    "return": "Promise<ResolvedStyle>"
+                },
+                "docs": {
+                    "text": "Get the currently parsed style.",
+                    "tags": []
+                }
+            },
+            "getLayerTargetIds": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Get the target layer IDs as array. async",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "onStyleSourceChanged"
+            }, {
+                "propName": "content",
+                "methodName": "onStyleSourceChanged"
+            }, {
+                "propName": "format",
+                "methodName": "onStyleSourceChanged"
+            }];
+    }
+}
+/**
+ * Checks whether the error originated from a failed fetch() call
+ * (e.g. "Failed to fetch style from ...") vs. a parse error.
+ */
+function isRemoteFetchFailure(error) {
+    return error.message.startsWith('Failed to fetch style from');
+}

package/dist/collection/components/v-map-style/v-map-style.unit.js

@@ -0,0 +1,62 @@
+import { describe, it, expect } from "vitest";
+/**
+ * v-map-style parseGeoStyler is a private method on the Stencil component.
+ * We test the parsing logic directly by extracting the same validation rules.
+ */
+function parseGeoStyler(jsonContent) {
+    const style = JSON.parse(jsonContent);
+    if (typeof style !== 'object' || style === null) {
+        throw new Error('GeoStyler style parsing failed: Parsed GeoStyler style is not a valid object');
+    }
+    if (typeof style.name !== 'string' || !Array.isArray(style.rules)) {
+        throw new Error('GeoStyler style parsing failed: GeoStyler style must have "name" (string) and "rules" (array)');
+    }
+    return style;
+}
+describe('v-map-style – format="geostyler"', () => {
+    it('accepts a valid GeoStyler style with name and rules', () => {
+        const input = JSON.stringify({
+            name: 'Test Style',
+            rules: [
+                {
+                    name: 'default',
+                    symbolizers: [{ kind: 'Mark', wellKnownName: 'circle', color: '#ff0000', radius: 8 }],
+                },
+            ],
+        });
+        const result = parseGeoStyler(input);
+        expect(result.name).toBe('Test Style');
+        expect(result.rules).toHaveLength(1);
+    });
+    it('accepts a style with empty rules array', () => {
+        const input = JSON.stringify({ name: 'Empty', rules: [] });
+        const result = parseGeoStyler(input);
+        expect(result.name).toBe('Empty');
+        expect(result.rules).toHaveLength(0);
+    });
+    it('rejects invalid JSON', () => {
+        expect(() => parseGeoStyler('{ INVALID }')).toThrow();
+    });
+    it('rejects null', () => {
+        expect(() => parseGeoStyler('null')).toThrow('not a valid object');
+    });
+    it('rejects a primitive string', () => {
+        expect(() => parseGeoStyler('"hello"')).toThrow('not a valid object');
+    });
+    it('rejects an object without name', () => {
+        const input = JSON.stringify({ rules: [] });
+        expect(() => parseGeoStyler(input)).toThrow('"name" (string) and "rules" (array)');
+    });
+    it('rejects an object without rules', () => {
+        const input = JSON.stringify({ name: 'NoRules' });
+        expect(() => parseGeoStyler(input)).toThrow('"name" (string) and "rules" (array)');
+    });
+    it('rejects an object where rules is not an array', () => {
+        const input = JSON.stringify({ name: 'Bad', rules: 'not-an-array' });
+        expect(() => parseGeoStyler(input)).toThrow('"name" (string) and "rules" (array)');
+    });
+    it('rejects an object where name is not a string', () => {
+        const input = JSON.stringify({ name: 42, rules: [] });
+        expect(() => parseGeoStyler(input)).toThrow('"name" (string) and "rules" (array)');
+    });
+});

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};