@angular-helpers/openlayers 0.4.0 → 0.5.1

package/fesm2022/angular-helpers-openlayers-core.mjs

@@ -1,8 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, NgZone, Injectable, DestroyRef, input, output, viewChild, afterNextRender, effect, ChangeDetectionStrategy, Component, makeEnvironmentProviders } from '@angular/core';
+import { inject, NgZone, Injectable, signal, DestroyRef, input, output, viewChild, afterNextRender, effect, ChangeDetectionStrategy, Component, computed, resource, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import OLMap from 'ol/Map';
 import View from 'ol/View';
-import { fromLonLat, toLonLat } from 'ol/proj';
+import { fromLonLat, toLonLat, get } from 'ol/proj';
+import { offset } from 'ol/sphere';
+import GeoJSON from 'ol/format/GeoJSON';
+import FeatureClass from 'ol/Feature';
+import { Point, LineString, Polygon } from 'ol/geom';
+import { register } from 'ol/proj/proj4';
 
 // ZoneHelperService - Handles NgZone compatibility for zoneless mode
 /**
@@ -52,10 +57,10 @@ class OlZoneHelper {
         }
         return fn();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlZoneHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlZoneHelper });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlZoneHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlZoneHelper });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlZoneHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlZoneHelper, decorators: [{
             type: Injectable
         }] });
 
@@ -64,13 +69,22 @@ class OlMapService {
     zoneHelper = inject(OlZoneHelper);
     map = null;
     readyCallbacks = [];
+    _resolution = signal(1, ...(ngDevMode ? [{ debugName: "_resolution" }] : /* istanbul ignore next */ []));
+    /** Signal that emits the current map resolution in meters per pixel */
+    resolution = this._resolution.asReadonly();
     setMap(map) {
         this.map = map;
-        const callbacks = this.readyCallbacks.splice(0);
-        for (const cb of callbacks) {
-            cb(map);
+        if (map) {
+            this._resolution.set(map.getView()?.getResolution() ?? 1);
+            const callbacks = this.readyCallbacks.splice(0);
+            for (const cb of callbacks) {
+                cb(map);
+            }
         }
     }
+    setResolution(resolution) {
+        this._resolution.set(resolution);
+    }
     getMap() {
         return this.map;
     }
@@ -134,10 +148,10 @@ class OlMapService {
             rotation: view.getRotation() ?? 0,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlMapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlMapService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMapService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlMapService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMapService, decorators: [{
             type: Injectable
         }] });
 
@@ -201,7 +215,12 @@ class OlMapComponent {
                 this.resizeObserver.observe(container);
             }
             view.on('change:center', () => this.zoneHelper.runInsideAngular(() => this.emitViewChange()));
-            view.on('change:resolution', () => this.zoneHelper.runInsideAngular(() => this.emitViewChange()));
+            view.on('change:resolution', () => {
+                this.zoneHelper.runInsideAngular(() => {
+                    this.mapService.setResolution(view.getResolution() ?? 1);
+                    this.emitViewChange();
+                });
+            });
             this.map.on('click', (e) => this.zoneHelper.runInsideAngular(() => this.mapClick.emit({
                 coordinate: toLonLat(e.coordinate, this.projection()),
                 pixel: e.pixel,
@@ -272,16 +291,358 @@ class OlMapComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: OlMapComponent, isStandalone: true, selector: "ol-map", inputs: { center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null }, projection: { classPropertyName: "projection", publicName: "projection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewChange: "viewChange", mapClick: "mapClick", mapDblClick: "mapDblClick" }, viewQueries: [{ propertyName: "mapContainerRef", first: true, predicate: ["mapContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `<div class="ol-map-container" #mapContainer></div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: OlMapComponent, isStandalone: true, selector: "ol-map", inputs: { center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null }, projection: { classPropertyName: "projection", publicName: "projection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewChange: "viewChange", mapClick: "mapClick", mapDblClick: "mapDblClick" }, viewQueries: [{ propertyName: "mapContainerRef", first: true, predicate: ["mapContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `<div class="ol-map-container" #mapContainer></div>
     <ng-content />`, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative}.ol-map-container{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ol-map', template: `<div class="ol-map-container" #mapContainer></div>
     <ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;position:relative}.ol-map-container{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }], projection: [{ type: i0.Input, args: [{ isSignal: true, alias: "projection", required: false }] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], mapClick: [{ type: i0.Output, args: ["mapClick"] }], mapDblClick: [{ type: i0.Output, args: ["mapDblClick"] }], mapContainerRef: [{ type: i0.ViewChild, args: ['mapContainer', { isSignal: true }] }] } });
 
+// OlGeometryService — general purpose geometry helpers
+/**
+ * Service exposing general purpose geometry helpers for creating
+ * approximated polygons (ellipses, sectors, donuts) from metric parameters.
+ */
+class OlGeometryService {
+    idCounter = 0;
+    /**
+     * Build a `Feature<Polygon>` approximating an ellipse centered at
+     * `config.center`. See {@link EllipseConfig} for parameter semantics.
+     */
+    createEllipse(config) {
+        const { center, semiMajor, semiMinor, rotation = 0, segments = 64, properties } = config;
+        if (semiMajor <= 0 || semiMinor <= 0) {
+            throw new RangeError('semiMajor and semiMinor must be positive');
+        }
+        if (segments < 8) {
+            throw new RangeError('segments must be >= 8');
+        }
+        const cosR = Math.cos(rotation);
+        const sinR = Math.sin(rotation);
+        const ring = [];
+        for (let i = 0; i < segments; i++) {
+            const theta = (i / segments) * Math.PI * 2;
+            // Ellipse in local axis-aligned frame, then rotated by `rotation`.
+            const ax = Math.cos(theta) * semiMajor;
+            const ay = Math.sin(theta) * semiMinor;
+            const dx = ax * cosR - ay * sinR;
+            const dy = ax * sinR + ay * cosR;
+            ring.push(this.offsetMetersToLonLat(center, dx, dy));
+        }
+        ring.push(ring[0]); // close the ring
+        return {
+            id: this.nextId('ellipse'),
+            geometry: { type: 'Polygon', coordinates: [ring] },
+            properties,
+        };
+    }
+    /**
+     * Build a `Feature<Polygon>` for a circular sector (pie slice).
+     * See {@link SectorConfig} for parameter semantics.
+     */
+    createSector(config) {
+        const { center, radius, startAngle, endAngle, segments = 32, properties } = config;
+        if (radius <= 0) {
+            throw new RangeError('radius must be positive');
+        }
+        if (endAngle <= startAngle) {
+            throw new RangeError('endAngle must be greater than startAngle');
+        }
+        if (endAngle - startAngle > Math.PI * 2) {
+            throw new RangeError('sector cannot exceed full circle');
+        }
+        if (segments < 4) {
+            throw new RangeError('segments must be >= 4');
+        }
+        const ring = [center];
+        const span = endAngle - startAngle;
+        for (let i = 0; i <= segments; i++) {
+            const theta = startAngle + (i / segments) * span;
+            const dx = Math.cos(theta) * radius;
+            const dy = Math.sin(theta) * radius;
+            ring.push(this.offsetMetersToLonLat(center, dx, dy));
+        }
+        ring.push(center); // close back to apex
+        return {
+            id: this.nextId('sector'),
+            geometry: { type: 'Polygon', coordinates: [ring] },
+            properties,
+        };
+    }
+    /**
+     * Build a `Feature<Polygon>` for a donut (annular ring). The output has
+     * two rings: an outer ring wound counter-clockwise and an inner ring
+     * wound clockwise so the GeoJSON right-hand rule renders the hole.
+     */
+    createDonut(config) {
+        const { center, outerRadius, innerRadius, segments = 64, properties } = config;
+        if (outerRadius <= 0 || innerRadius <= 0) {
+            throw new RangeError('radii must be positive');
+        }
+        if (outerRadius <= innerRadius) {
+            throw new RangeError('outerRadius must be greater than innerRadius');
+        }
+        if (segments < 8) {
+            throw new RangeError('segments must be >= 8');
+        }
+        const outer = [];
+        const inner = [];
+        for (let i = 0; i < segments; i++) {
+            const theta = (i / segments) * Math.PI * 2;
+            const cosT = Math.cos(theta);
+            const sinT = Math.sin(theta);
+            // Outer ring: CCW (theta increasing)
+            outer.push(this.offsetMetersToLonLat(center, cosT * outerRadius, sinT * outerRadius));
+            // Inner ring: CW — sample the SAME thetas but we'll reverse the
+            // accumulator below so the ring is traversed in the opposite sense.
+            inner.push(this.offsetMetersToLonLat(center, cosT * innerRadius, sinT * innerRadius));
+        }
+        inner.reverse();
+        outer.push(outer[0]);
+        inner.push(inner[0]);
+        return {
+            id: this.nextId('donut'),
+            geometry: { type: 'Polygon', coordinates: [outer, inner] },
+            properties,
+        };
+    }
+    /**
+     * Project an `(dx, dy)` meter offset from `center` to lon/lat using true
+     * geodesic math (Vincenty's formulae) via ol/sphere.
+     */
+    offsetMetersToLonLat(center, dx, dy) {
+        if (dx === 0 && dy === 0)
+            return [...center];
+        const distance = Math.hypot(dx, dy);
+        const bearing = Math.atan2(dx, dy);
+        return offset(center, distance, bearing);
+    }
+    nextId(kind) {
+        return `${kind}-${++this.idCounter}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlGeometryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlGeometryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlGeometryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Service for orchestrating time-series animations in OpenLayers.
+ * Exposes a reactive currentTime signal that updates outside the Angular zone
+ * via requestAnimationFrame, ensuring 60FPS WebGL animations without triggering
+ * global change detection.
+ */
+class OlTimeService {
+    zoneHelper = inject(OlZoneHelper);
+    timeSignal = signal(Date.now(), ...(ngDevMode ? [{ debugName: "timeSignal" }] : /* istanbul ignore next */ []));
+    playingSignal = signal(false, ...(ngDevMode ? [{ debugName: "playingSignal" }] : /* istanbul ignore next */ []));
+    speedSignal = signal(1, ...(ngDevMode ? [{ debugName: "speedSignal" }] : /* istanbul ignore next */ []));
+    animationFrameId = null;
+    lastTick = 0;
+    currentTime = computed(() => this.timeSignal(), ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
+    isPlaying = computed(() => this.playingSignal(), ...(ngDevMode ? [{ debugName: "isPlaying" }] : /* istanbul ignore next */ []));
+    speed = computed(() => this.speedSignal(), ...(ngDevMode ? [{ debugName: "speed" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the current time manually.
+     * @param time Epoch timestamp in milliseconds
+     */
+    setTime(time) {
+        this.timeSignal.set(time);
+    }
+    /**
+     * Sets the playback speed multiplier.
+     * @param speed Multiplier (e.g. 1 = real time, 60 = 1 minute per second)
+     */
+    setSpeed(speed) {
+        this.speedSignal.set(speed);
+    }
+    /**
+     * Starts the time animation loop.
+     */
+    play() {
+        if (this.playingSignal())
+            return;
+        this.playingSignal.set(true);
+        this.lastTick = performance.now();
+        this.zoneHelper.runOutsideAngular(() => {
+            const loop = (now) => {
+                if (!this.playingSignal())
+                    return;
+                const delta = now - this.lastTick;
+                this.lastTick = now;
+                // Advance time based on delta and speed multiplier
+                const advance = delta * this.speedSignal();
+                this.timeSignal.update((t) => t + advance);
+                this.animationFrameId = requestAnimationFrame(loop);
+            };
+            this.animationFrameId = requestAnimationFrame(loop);
+        });
+    }
+    /**
+     * Pauses the time animation loop.
+     */
+    pause() {
+        this.playingSignal.set(false);
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+    }
+    /**
+     * Stops the animation and resets to a specific time.
+     */
+    stop(resetTime = Date.now()) {
+        this.pause();
+        this.setTime(resetTime);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTimeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTimeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTimeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// Feature conversion utilities for OpenLayers interactions
+/**
+ * Converts an OpenLayers feature to the internal Feature format.
+ * Handles coordinate extraction and geometry type mapping.
+ *
+ * @param olFeature - The OpenLayers feature to convert
+ * @returns The converted Feature with normalized structure
+ */
+function olFeatureToFeature(olFeature) {
+    // Unwrap spider features
+    const spiderFeature = olFeature.get('spider-feature');
+    if (spiderFeature) {
+        return olFeatureToFeature(spiderFeature);
+    }
+    // Unwrap single-item clusters
+    const clusterFeatures = olFeature.get('features');
+    if (Array.isArray(clusterFeatures) && clusterFeatures.length === 1) {
+        return olFeatureToFeature(clusterFeatures[0]);
+    }
+    const geometry = olFeature.getGeometry();
+    const geomType = geometry?.getType() ?? 'Point';
+    // Convert coordinates based on geometry type
+    let coordinates;
+    if (geomType === 'Circle') {
+        // ol/geom/Circle has no getCoordinates() — use getCenter() instead
+        const circle = geometry;
+        coordinates = circle.getCenter();
+    }
+    else {
+        // oxlint-disable-next-line no-explicit-any
+        const olCoords = geometry.getCoordinates();
+        if (Array.isArray(olCoords) && Array.isArray(olCoords[0])) {
+            // Multi-coordinate structures (LineString, Polygon, etc.)
+            coordinates = olCoords;
+        }
+        else {
+            // Single point
+            coordinates = olCoords;
+        }
+    }
+    return {
+        id: olFeature.getId()?.toString() ?? `feature-${Math.random().toString(36).slice(2)}`,
+        geometry: {
+            type: geomType,
+            coordinates,
+        },
+        properties: olFeature.getProperties(),
+    };
+}
+/**
+ * Converts an internal Feature to an OpenLayers feature.
+ */
+function featureToOlFeature(feature) {
+    const geom = feature.geometry;
+    let geometry;
+    if (!geom.coordinates) {
+        geometry = new Point([0, 0]);
+    }
+    else if (geom.type === 'Point') {
+        const coords = geom.coordinates;
+        geometry = new Point(fromLonLat(coords));
+    }
+    else if (geom.type === 'LineString') {
+        const coords = geom.coordinates.map((c) => fromLonLat(c));
+        geometry = new LineString(coords);
+    }
+    else if (geom.type === 'Polygon') {
+        const rings = geom.coordinates.map((ring) => ring.map((c) => fromLonLat(c)));
+        geometry = new Polygon(rings);
+    }
+    else {
+        geometry = new Point([0, 0]);
+    }
+    // Create OL Feature
+    // Note: we must avoid passing 'geometry' as a plain object to OLFeature constructor,
+    // so we pass the object properties without it, then set geometry explicitly.
+    const props = { ...feature.properties };
+    delete props['geometry']; // Just in case
+    const olFeature = new FeatureClass(props);
+    olFeature.setGeometry(geometry);
+    olFeature.setId(feature.id);
+    return olFeature;
+}
+
+/**
+ * Creates an Angular resource for fetching and decoding GeoJSON into OpenLayers Features.
+ * Must be called in an injection context.
+ *
+ * @param url The URL signal or string to fetch data from
+ * @param options Additional vector resource options
+ * @returns An Angular Resource containing an array of parsed Features
+ */
+function createVectorResource(url, options) {
+    return resource({
+        loader: async ({ abortSignal }) => {
+            const fetchUrl = url();
+            if (!fetchUrl)
+                return [];
+            const cacheKey = 'ol-vector-cache-v1';
+            const isBrowser = typeof caches !== 'undefined';
+            let response;
+            let cache;
+            if (isBrowser) {
+                cache = await caches.open(cacheKey);
+                const cachedResponse = await cache.match(fetchUrl);
+                if (cachedResponse) {
+                    response = cachedResponse;
+                }
+            }
+            if (!response) {
+                response = await fetch(fetchUrl, {
+                    ...options?.fetchOptions,
+                    signal: abortSignal,
+                });
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch vector data: ${response.statusText}`);
+                }
+                if (isBrowser && cache) {
+                    await cache.put(fetchUrl, response.clone());
+                }
+            }
+            // We process the text since GeoJSON readFeatures accepts string or object.
+            // Doing text() might be slightly faster before passing to OL's parser.
+            const data = await response.text();
+            const format = new GeoJSON();
+            // We parse the GeoJSON string into OpenLayers features.
+            const olFeatures = format.readFeatures(data);
+            // Convert to our generic Feature interface expected by OlVectorLayer
+            return olFeatures.map((f) => olFeatureToFeature(f));
+        },
+    });
+}
+
 // Provider functions
 function provideOpenLayers(...features) {
     return makeEnvironmentProviders([
@@ -291,10 +652,43 @@ function provideOpenLayers(...features) {
     ]);
 }
 
+/**
+ * Registers custom projections using proj4.
+ *
+ * @param proj4 - The proj4 instance (must be passed to avoid strong dependency on proj4 package)
+ * @param definitions - Array of projection definitions
+ * @returns OlFeature for projections
+ */
+function withProjections(proj4, definitions) {
+    return {
+        kind: 'projections',
+        providers: [
+            {
+                provide: ENVIRONMENT_INITIALIZER,
+                multi: true,
+                useValue: () => {
+                    definitions.forEach((d) => {
+                        proj4.defs(d.code, d.def);
+                    });
+                    register(proj4);
+                    definitions.forEach((d) => {
+                        if (d.extent) {
+                            const proj = get(d.code);
+                            if (proj) {
+                                proj.setExtent(d.extent);
+                            }
+                        }
+                    });
+                },
+            },
+        ],
+    };
+}
+
 // @angular-helpers/openlayers/core
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { OlMapComponent, OlMapService, OlZoneHelper, provideOpenLayers };
+export { OlGeometryService, OlMapComponent, OlMapService, OlTimeService, OlZoneHelper, createVectorResource, featureToOlFeature, olFeatureToFeature, provideOpenLayers, withProjections };