@angular-helpers/openlayers 0.1.0 → 0.2.0

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

@@ -1,49 +1,126 @@
 import * as i0 from '@angular/core';
-import { inject, NgZone, Injectable, input, output, viewChild, effect, ChangeDetectionStrategy, Component, makeEnvironmentProviders } from '@angular/core';
+import { inject, NgZone, Injectable, DestroyRef, input, output, viewChild, afterNextRender, effect, ChangeDetectionStrategy, Component, makeEnvironmentProviders } from '@angular/core';
 import OLMap from 'ol/Map';
 import View from 'ol/View';
 import { fromLonLat, toLonLat } from 'ol/proj';
 
+// ZoneHelperService - Handles NgZone compatibility for zoneless mode
+/**
+ * Helper service that abstracts NgZone operations for zoneless compatibility.
+ *
+ * When NgZone is available (classic Angular):
+ * - runOutsideAngular: executes outside Angular's zone for performance
+ * - runInsideAngular: executes inside Angular's zone to trigger change detection
+ *
+ * When zoneless (signals-only Angular):
+ * - Both methods execute directly since signals handle reactivity
+ *
+ * @usageNotes
+ * Inject this service instead of NgZone directly:
+ * ```ts
+ * private zoneHelper = inject(OlZoneHelper);
+ *
+ * this.zoneHelper.runOutsideAngular(() => {
+ *   // OpenLayers operations that don't need CD
+ * });
+ * ```
+ */
+class OlZoneHelper {
+    ngZone = inject(NgZone, { optional: true });
+    /**
+     * Runs callback outside Angular zone if available (for performance with NgZone),
+     * or directly if zoneless.
+     *
+     * Use for: OpenLayers operations that don't need to trigger Angular change detection
+     * (map manipulation, event listeners, animations)
+     */
+    runOutsideAngular(fn) {
+        if (this.ngZone) {
+            return this.ngZone.runOutsideAngular(fn);
+        }
+        return fn();
+    }
+    /**
+     * Runs callback inside Angular zone if available (for triggering CD),
+     * or directly if zoneless.
+     *
+     * Use for: Emitting outputs that should be handled by parent components
+     */
+    runInsideAngular(fn) {
+        if (this.ngZone) {
+            return this.ngZone.run(fn);
+        }
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlZoneHelper, decorators: [{
+            type: Injectable
+        }] });
+
 // OlMapService
 class OlMapService {
-    ngZone = inject(NgZone);
+    zoneHelper = inject(OlZoneHelper);
     map = null;
+    readyCallbacks = [];
     setMap(map) {
         this.map = map;
+        const callbacks = this.readyCallbacks.splice(0);
+        for (const cb of callbacks) {
+            cb(map);
+        }
     }
     getMap() {
         return this.map;
     }
+    onReady(callback) {
+        if (this.map) {
+            callback(this.map);
+        }
+        else {
+            this.readyCallbacks.push(callback);
+        }
+    }
     getView() {
         return this.map?.getView() ?? null;
     }
     setCenter(coordinate) {
         const view = this.getView();
         if (view)
-            this.ngZone.runOutsideAngular(() => view.setCenter(coordinate));
+            this.zoneHelper.runOutsideAngular(() => view.setCenter(coordinate));
     }
     setZoom(level) {
         const view = this.getView();
         if (view)
-            this.ngZone.runOutsideAngular(() => view.setZoom(level));
+            this.zoneHelper.runOutsideAngular(() => view.setZoom(level));
     }
     fitExtent(extent, options) {
+        const map = this.map;
         const view = this.getView();
-        if (view)
-            this.ngZone.runOutsideAngular(() => view.fit(extent, options));
+        if (!map || !view)
+            return;
+        // Defer to next macrotask to ensure DOM layout is complete
+        setTimeout(() => {
+            this.zoneHelper.runOutsideAngular(() => {
+                // Force size recalculation before fitting
+                map.updateSize();
+                view.fit(extent, options);
+            });
+        }, 0);
     }
     animateView(options) {
         const view = this.getView();
         if (!view)
             return Promise.resolve();
         return new Promise((resolve) => {
-            this.ngZone.runOutsideAngular(() => {
+            this.zoneHelper.runOutsideAngular(() => {
                 view.animate({
                     center: options.center,
                     zoom: options.zoom,
                     rotation: options.rotation,
                     duration: options.duration ?? 250,
-                }, () => this.ngZone.run(() => resolve()));
+                }, () => this.zoneHelper.runInsideAngular(() => resolve()));
             });
         });
     }
@@ -67,7 +144,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 // OlMapComponent
 class OlMapComponent {
     mapService = inject(OlMapService);
-    ngZone = inject(NgZone);
+    zoneHelper = inject(OlZoneHelper);
+    destroyRef = inject(DestroyRef);
     center = input([0, 0], ...(ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []));
     zoom = input(0, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
     rotation = input(0, ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
@@ -78,6 +156,7 @@ class OlMapComponent {
     mapContainerRef = viewChild.required('mapContainer');
     map;
     constructor() {
+        afterNextRender(() => this.initMap());
         effect(() => {
             const center = this.center();
             if (this.map)
@@ -93,16 +172,12 @@ class OlMapComponent {
             if (this.map)
                 this.updateRotation(rotation);
         });
-    }
-    ngAfterViewInit() {
-        this.initMap();
-    }
-    ngOnDestroy() {
-        this.destroyMap();
+        // Cleanup when component is destroyed
+        this.destroyRef.onDestroy(() => this.destroyMap());
     }
     initMap() {
         const container = this.mapContainerRef().nativeElement;
-        this.ngZone.runOutsideAngular(() => {
+        this.zoneHelper.runOutsideAngular(() => {
             const view = new View({
                 center: fromLonLat(this.center(), this.projection()),
                 zoom: this.zoom(),
@@ -111,14 +186,14 @@ class OlMapComponent {
             });
             this.map = new OLMap({ target: container, view, layers: [] });
             this.mapService.setMap(this.map);
-            view.on('change:center', () => this.ngZone.run(() => this.emitViewChange()));
-            view.on('change:resolution', () => this.ngZone.run(() => this.emitViewChange()));
-            this.map.on('click', (e) => this.ngZone.run(() => this.mapClick.emit({
-                coordinate: e.coordinate,
+            view.on('change:center', () => this.zoneHelper.runInsideAngular(() => this.emitViewChange()));
+            view.on('change:resolution', () => this.zoneHelper.runInsideAngular(() => this.emitViewChange()));
+            this.map.on('click', (e) => this.zoneHelper.runInsideAngular(() => this.mapClick.emit({
+                coordinate: toLonLat(e.coordinate, this.projection()),
                 pixel: e.pixel,
             })));
-            this.map.on('dblclick', (e) => this.ngZone.run(() => this.mapDblClick.emit({
-                coordinate: e.coordinate,
+            this.map.on('dblclick', (e) => this.zoneHelper.runInsideAngular(() => this.mapDblClick.emit({
+                coordinate: toLonLat(e.coordinate, this.projection()),
                 pixel: e.pixel,
             })));
         });
@@ -126,7 +201,7 @@ class OlMapComponent {
     }
     destroyMap() {
         if (this.map) {
-            this.ngZone.runOutsideAngular(() => {
+            this.zoneHelper.runOutsideAngular(() => {
                 this.map.setTarget(undefined);
                 this.map.dispose();
             });
@@ -135,18 +210,37 @@ class OlMapComponent {
         }
     }
     updateCenter(center) {
-        if (this.map) {
-            const projectedCenter = fromLonLat(center, this.projection());
-            this.ngZone.runOutsideAngular(() => this.map.getView().setCenter(projectedCenter));
+        if (!this.map)
+            return;
+        const view = this.map.getView();
+        const projectedCenter = fromLonLat(center, this.projection());
+        const currentCenter = view.getCenter();
+        // Only update if center is significantly different (prevents interfering with animations)
+        if (!currentCenter ||
+            Math.abs(currentCenter[0] - projectedCenter[0]) > 1 ||
+            Math.abs(currentCenter[1] - projectedCenter[1]) > 1) {
+            this.zoneHelper.runOutsideAngular(() => view.setCenter(projectedCenter));
         }
     }
     updateZoom(zoom) {
-        if (this.map)
-            this.ngZone.runOutsideAngular(() => this.map.getView().setZoom(zoom));
+        if (!this.map)
+            return;
+        const view = this.map.getView();
+        const currentZoom = view.getZoom();
+        // Only update if zoom is different (prevents interfering with animations)
+        if (currentZoom !== zoom) {
+            this.zoneHelper.runOutsideAngular(() => view.setZoom(zoom));
+        }
     }
     updateRotation(rotation) {
-        if (this.map)
-            this.ngZone.runOutsideAngular(() => this.map.getView().setRotation(rotation));
+        if (!this.map)
+            return;
+        const view = this.map.getView();
+        const currentRotation = view.getRotation();
+        // Only update if rotation is significantly different
+        if (Math.abs(currentRotation - rotation) > 0.001) {
+            this.zoneHelper.runOutsideAngular(() => view.setRotation(rotation));
+        }
     }
     emitViewChange() {
         const view = this.map?.getView();
@@ -172,7 +266,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 
 // Provider functions
 function provideOpenLayers(...features) {
-    return makeEnvironmentProviders([OlMapService, ...features.flatMap((f) => f.providers)]);
+    return makeEnvironmentProviders([
+        OlMapService,
+        OlZoneHelper,
+        ...features.flatMap((f) => f.providers),
+    ]);
 }
 
 // @angular-helpers/openlayers/core
@@ -181,4 +279,4 @@ function provideOpenLayers(...features) {
  * Generated bundle index. Do not edit.
  */
 
-export { OlMapComponent, OlMapService, provideOpenLayers };
+export { OlMapComponent, OlMapService, OlZoneHelper, provideOpenLayers };