@angular-helpers/openlayers 0.3.0 → 0.5.0

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

@@ -1,8 +1,10 @@
 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, 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 { register } from 'ol/proj/proj4';
 
 // ZoneHelperService - Handles NgZone compatibility for zoneless mode
 /**
@@ -52,10 +54,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 +66,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 +145,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
         }] });
 
@@ -155,6 +166,7 @@ class OlMapComponent {
     mapDblClick = output();
     mapContainerRef = viewChild.required('mapContainer');
     map;
+    resizeObserver;
     constructor() {
         afterNextRender(() => this.initMap());
         effect(() => {
@@ -186,8 +198,26 @@ class OlMapComponent {
             });
             this.map = new OLMap({ target: container, view, layers: [] });
             this.mapService.setMap(this.map);
+            // Add ResizeObserver to handle container size changes (e.g. sidebars, window resize)
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver(() => {
+                    if (this.map) {
+                        // Using requestAnimationFrame prevents "ResizeObserver loop limit exceeded" errors
+                        requestAnimationFrame(() => {
+                            if (this.map)
+                                this.map.updateSize();
+                        });
+                    }
+                });
+                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,
@@ -200,6 +230,10 @@ class OlMapComponent {
         this.emitViewChange();
     }
     destroyMap() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
         if (this.map) {
             this.zoneHelper.runOutsideAngular(() => {
                 this.map.setTarget(undefined);
@@ -254,16 +288,148 @@ 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',
+                }]
+        }] });
+
 // Provider functions
 function provideOpenLayers(...features) {
     return makeEnvironmentProviders([
@@ -273,10 +439,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, OlZoneHelper, provideOpenLayers, withProjections };