@npm9912/v-map 0.1.0

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

@@ -0,0 +1,467 @@
+// src/components/v-map/v-map.tsx
+import { h, } from "@stencil/core";
+import { createProvider } from "../../map-provider/provider-factory";
+import { ensureImportMap } from "../../lib/ensure-importmap";
+import { VMapEvents } from "../../utils/events";
+import { watchElementResize } from "../../utils/dom-env";
+import { log } from "../../utils/logger";
+import MSG from "../../utils/messages";
+const NOOP_PROVIDER = {
+    async init() { },
+    async destroy() { },
+    async setOpacity() { },
+    async setVisible() { },
+    async setZIndex() { },
+    async addLayerToGroup() {
+        return null;
+    },
+    async updateLayer() { },
+    async removeLayer() { },
+    async setView() { },
+    async addBaseLayer() {
+        return null;
+    },
+    async setBaseLayer() { },
+    async ensureGroup() { },
+    async setGroupVisible() { },
+};
+const MSG_COMPONENT = 'v-map - ';
+export class VMap {
+    el;
+    /**
+     * Zu verwendender Karten-Provider.
+     * Unterstützte Werte: "ol" | "leaflet" | "cesium" | "deck".
+     * @default "ol"
+     * @example
+     * <v-map flavour="leaflet"></v-map>
+     */
+    flavour = 'ol';
+    /**
+     * Mittelpunkt der Karte im **WGS84**-Koordinatensystem.
+     * Erwartet [lon, lat] (Längengrad, Breitengrad).
+     * @default [0, 0]
+     * @example
+     * <v-map center="[11.5761, 48.1371]" zoom="12"></v-map>
+     */
+    center = '0,0';
+    /**
+     * Anfangs-Zoomstufe. Skala abhängig vom Provider (typisch 0–20).
+     * @default 3
+     */
+    zoom = 2;
+    /** Falls true, injiziert v-map automatisch die Import-Map. */
+    useDefaultImportMap = true;
+    /**
+     * Aktiviert ein „CSS-Only“-Rendering (z. B. für einfache Tests/Layouts).
+     * Bei `true` werden keine Provider initialisiert.
+     * @default false
+     */
+    cssMode = 'cdn';
+    /**
+     * Wird ausgelöst, sobald der Karten-Provider initialisiert wurde und Layers entgegennimmt.
+     * `detail` enthält `{ provider, flavour }`.
+     * @event mapProviderReady
+     */
+    mapProviderReady;
+    // KEIN @State – keine Re-Renders nötig
+    mapProvider;
+    mapState = 'unavailable';
+    mapContainer;
+    unsubscribeResize;
+    unsubscribePointerMove = null;
+    async onFlavourChanged(oldValue, newValue) {
+        log(MSG_COMPONENT + 'onFlavourChanged');
+        if (oldValue !== newValue) {
+            this.reset();
+            // await this.createMap();
+        }
+    }
+    reset() {
+        this.unsubscribeResize?.();
+        this.unsubscribePointerMove?.();
+        this.unsubscribePointerMove = null;
+        const mapProvider = this.mapProvider;
+        this.mapProvider = null;
+        this.el.__vMapProvider = null;
+        const payLoad = {
+            mapProvider: NOOP_PROVIDER,
+        };
+        // this.mapProviderReady.emit(payLoad);
+        this.el.dispatchEvent(new CustomEvent(VMapEvents.MapProviderWillShutdown, {
+            detail: payLoad, // deine Payload
+            bubbles: false, // blubbert nach oben
+            composed: false, // geht über Shadow-Grenzen
+            cancelable: true, // Parent kann preventDefault() aufrufen
+        }));
+        mapProvider?.destroy();
+        this.mapState = 'unavailable';
+    }
+    async createMap() {
+        this.mapContainer = this.ensureContainer();
+        if (this.mapState === 'creating') {
+            log('Map already in creating state.');
+            return;
+        }
+        this.mapState = 'creating';
+        this.mapProvider = await createProvider(this.flavour);
+        const mapInitOpts = { zoom: this.zoom };
+        if (this.center) {
+            const centerLL = this.center.split(',').map(parseFloat);
+            const [centerLon, centerLat] = centerLL;
+            if (!Number.isFinite(centerLon) || !Number.isFinite(centerLat)) {
+                throw new Error(`<v-map>: Ungültiges center-Prop: "${this.center}" (erwartet "lon,lat")`);
+            }
+            mapInitOpts.center = centerLL;
+        }
+        const opts = {
+            target: this.mapContainer,
+            shadowRoot: this.el.shadowRoot,
+            mapInitOptions: mapInitOpts,
+            cssMode: this.cssMode,
+        };
+        await this.mapProvider.init(opts);
+        this.mapState = 'available';
+        this.el.__vMapProvider = this.mapProvider;
+        this.unsubscribeResize = watchElementResize(this.el, async () => {
+            await this.mapProvider?.setView(mapInitOpts.center, mapInitOpts.zoom);
+        });
+        const payLoad = {
+            mapProvider: this.mapProvider,
+        };
+        // this.mapProviderReady.emit(payLoad);
+        this.el.dispatchEvent(new CustomEvent(VMapEvents.MapProviderReady, {
+            detail: payLoad, // deine Payload
+            bubbles: false, // blubbert nach oben
+            composed: false, // geht über Shadow-Grenzen
+            cancelable: true, // Parent kann preventDefault() aufrufen
+        }));
+        // Mouse-move → Geo-Koordinaten (provider-spezifisch)
+        if (this.mapProvider?.onPointerMove) {
+            this.unsubscribePointerMove = this.mapProvider.onPointerMove((coordinate, pixel) => {
+                this.el.dispatchEvent(new CustomEvent(VMapEvents.MapMouseMove, {
+                    detail: { coordinate, pixel },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        }
+    }
+    async componentWillLoad() {
+        log(MSG_COMPONENT + MSG.COMPONENT_WILL_LOAD);
+        if (this.useDefaultImportMap) {
+            log(MSG_COMPONENT + MSG.COMPONENT_WILL_LOAD + ' - useDefaultImportMap');
+            ensureImportMap();
+        }
+    }
+    // async componentDidLoad() {
+    //   log(MSG_COMPONENT + MSG.COMPONENT_DID_LOAD);
+    //   //test
+    // }
+    async componentWillRender() {
+        log(MSG_COMPONENT + MSG.COMPONENT_WILL_RENDER);
+    }
+    async componentDidRender() {
+        log(MSG_COMPONENT + MSG.COMPONENT_DID_RENDER);
+        await this.createMap();
+        this.el.addEventListener(VMapEvents.MapProviderReady, ((event) => {
+            log(MSG_COMPONENT + 'test - event: ', event);
+        }));
+    }
+    disconnectedCallback() {
+        log(MSG_COMPONENT + MSG.COMPONENT_DISCONNECTED_CALLBACK);
+        this.reset();
+    }
+    /**
+     * Gibt zurück, ob der Karten-Provider initialisiert wurde und verwendet werden kann.
+     * @returns Promise mit `true`, sobald der Provider bereit ist, sonst `false`.
+     */
+    async isMapProviderReady() {
+        const isReady = this.mapProvider !== null &&
+            this.mapProvider !== undefined &&
+            this.mapProvider !== NOOP_PROVIDER;
+        if (!isReady) {
+            log(MSG_COMPONENT + 'Map provider not yet ready.');
+        }
+        return isReady;
+    }
+    /**
+     * Setzt Kartenzentrum und Zoom (optional animiert).
+     * @param center [lon, lat] in WGS84
+     * @param zoom   Zoomstufe
+     * @param options Zusätzliche Optionen (z. B. { animate: true, duration: 300 })
+     * @example
+     * await mapEl.setView([7.1, 50.7], 10, { animate: true, duration: 400 });
+     */
+    async setView(coordinates, zoom) {
+        if (!this.mapProvider || this.mapProvider == NOOP_PROVIDER)
+            throw new Error(MSG_COMPONENT + 'Map-Provider noch nicht initialisiert.');
+        await Promise.resolve(this.mapProvider?.setView(coordinates, zoom));
+    }
+    ensureContainer() {
+        let el = this.el.shadowRoot.querySelector('#map');
+        if (!el) {
+            el = document.createElement('div');
+            el.id = 'map';
+            el.style.cssText =
+                'position:relative;width:100%;height:100%;display:block;';
+            this.el.shadowRoot.appendChild(el);
+        }
+        return el;
+    }
+    render() {
+        log(MSG_COMPONENT + MSG.COMPONENT_RENDER);
+        //return <div id="map-container"></div>;
+        return (h("div", { key: '41aca26c5cab5a3d7fef6169e9c4b8d27c7e65db' }, h("slot", { key: '4b04986c721a478cdfb900491e44106778c07df7' })));
+    }
+    static get is() { return "v-map"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "flavour": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Flavour",
+                    "resolved": "\"cesium\" | \"deck\" | \"leaflet\" | \"ol\"",
+                    "references": {
+                        "Flavour": {
+                            "location": "import",
+                            "path": "../../types/flavour",
+                            "id": "src/types/flavour.ts::Flavour",
+                            "referenceLocation": "Flavour"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"ol\""
+                        }, {
+                            "name": "example",
+                            "text": "<v-map flavour=\"leaflet\"></v-map>"
+                        }],
+                    "text": "Zu verwendender Karten-Provider.\nUnterst\u00FCtzte Werte: \"ol\" | \"leaflet\" | \"cesium\" | \"deck\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "flavour",
+                "defaultValue": "'ol'"
+            },
+            "center": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "[0, 0]"
+                        }, {
+                            "name": "example",
+                            "text": "<v-map center=\"[11.5761, 48.1371]\" zoom=\"12\"></v-map>"
+                        }],
+                    "text": "Mittelpunkt der Karte im **WGS84**-Koordinatensystem.\nErwartet [lon, lat] (L\u00E4ngengrad, Breitengrad)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "center",
+                "defaultValue": "'0,0'"
+            },
+            "zoom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "3"
+                        }],
+                    "text": "Anfangs-Zoomstufe. Skala abh\u00E4ngig vom Provider (typisch 0\u201320)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "zoom",
+                "defaultValue": "2"
+            },
+            "useDefaultImportMap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Falls true, injiziert v-map automatisch die Import-Map."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-default-import-map",
+                "defaultValue": "true"
+            },
+            "cssMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CssMode",
+                    "resolved": "\"bundle\" | \"cdn\" | \"inline-min\" | \"none\"",
+                    "references": {
+                        "CssMode": {
+                            "location": "import",
+                            "path": "../../types/cssmode",
+                            "id": "src/types/cssmode.ts::CssMode",
+                            "referenceLocation": "CssMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Aktiviert ein \u201ECSS-Only\u201C-Rendering (z. B. f\u00FCr einfache Tests/Layouts).\nBei `true` werden keine Provider initialisiert."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "css-mode",
+                "defaultValue": "'cdn'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mapProviderReady",
+                "name": "mapProviderReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "mapProviderReady"
+                        }],
+                    "text": "Wird ausgel\u00F6st, sobald der Karten-Provider initialisiert wurde und Layers entgegennimmt.\n`detail` enth\u00E4lt `{ provider, flavour }`."
+                },
+                "complexType": {
+                    "original": "MapProviderDetail",
+                    "resolved": "MapProviderDetail",
+                    "references": {
+                        "MapProviderDetail": {
+                            "location": "import",
+                            "path": "../../utils/events",
+                            "id": "src/utils/events.ts::MapProviderDetail",
+                            "referenceLocation": "MapProviderDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isMapProviderReady": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Gibt zur\u00FCck, ob der Karten-Provider initialisiert wurde und verwendet werden kann.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise mit `true`, sobald der Provider bereit ist, sonst `false`."
+                        }]
+                }
+            },
+            "setView": {
+                "complexType": {
+                    "signature": "(coordinates: [number, number], zoom: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "coordinates",
+                            "type": "[number, number]",
+                            "docs": ""
+                        }, {
+                            "name": "zoom",
+                            "type": "number",
+                            "docs": "Zoomstufe"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Setzt Kartenzentrum und Zoom (optional animiert).",
+                    "tags": [{
+                            "name": "param",
+                            "text": "center [lon, lat] in WGS84"
+                        }, {
+                            "name": "param",
+                            "text": "zoom Zoomstufe"
+                        }, {
+                            "name": "param",
+                            "text": "options Zus\u00E4tzliche Optionen (z. B. { animate: true, duration: 300 })"
+                        }, {
+                            "name": "example",
+                            "text": "await mapEl.setView([7.1, 50.7], 10, { animate: true, duration: 400 });"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "flavour",
+                "methodName": "onFlavourChanged"
+            }];
+    }
+}
+/*
+export interface VMap {
+  flavour: 'ol' | 'cesium' | 'leaflet';
+  center: string;
+  zoom: number;
+}
+*/

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

@@ -0,0 +1,33 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createLiveMap, loadVMapBundle, onceEvent, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates and reports a ready live map provider', async () => {
+        const map = createLiveMap();
+        const readyEvent = onceEvent(map, 'map-provider-ready');
+        document.body.appendChild(map);
+        await waitForHydration(map);
+        await readyEvent;
+        await waitFor(() => !!map.shadowRoot?.querySelector('#map'));
+        expect(map.getAttribute('center')).toBe('11.5761,48.1371');
+        expect(map.getAttribute('zoom')).toBe('12');
+        expect(await map.isMapProviderReady()).toBe(true);
+    });
+    it('emits shutdown when the live map is removed from the DOM', async () => {
+        const map = createLiveMap();
+        const readyEvent = onceEvent(map, 'map-provider-ready');
+        document.body.appendChild(map);
+        await waitForHydration(map);
+        await readyEvent;
+        const shutdownEvent = onceEvent(map, 'map-provider-will-shutdown');
+        map.remove();
+        const event = await shutdownEvent;
+        expect(event.type).toBe('map-provider-will-shutdown');
+    });
+});

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

@@ -0,0 +1 @@
+:host{display:block;height:100%}.root{height:100%}