@angular-helpers/openlayers 0.3.0 → 0.5.0

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

@@ -1,13 +1,22 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject } from '@angular/core';
+import { signal, computed, Injectable, inject, DestroyRef, input, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { OlMapService, OlZoneHelper } from '@angular-helpers/openlayers/core';
 import { Subject } from 'rxjs';
 import Select from 'ol/interaction/Select';
+import { pointerMove, click } from 'ol/events/condition';
 import Draw from 'ol/interaction/Draw';
 import Snap from 'ol/interaction/Snap';
 import VectorSource from 'ol/source/Vector';
+import { Polygon, LineString } from 'ol/geom';
 import { OlLayerService } from '@angular-helpers/openlayers/layers';
 import Modify from 'ol/interaction/Modify';
+import VectorLayer from 'ol/layer/Vector';
+import Overlay from 'ol/Overlay';
+import { getLength, getArea } from 'ol/sphere';
+import { unByKey } from 'ol/Observable';
+import { Style, Circle, Fill, Stroke } from 'ol/style';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
 
 // Interaction state management service
 /**
@@ -22,6 +31,7 @@ class InteractionStateService {
     drawStartSubject = new Subject();
     drawEndSubject = new Subject();
     modifySubject = new Subject();
+    selectSubject = new Subject();
     // Public readonly signals
     selectedFeatures = computed(() => this.selectedFeaturesInternal(), ...(ngDevMode ? [{ debugName: "selectedFeatures" }] : /* istanbul ignore next */ []));
     selectionCount = computed(() => this.selectedFeaturesInternal().length, ...(ngDevMode ? [{ debugName: "selectionCount" }] : /* istanbul ignore next */ []));
@@ -31,11 +41,23 @@ class InteractionStateService {
     drawStart$ = this.drawStartSubject.asObservable();
     drawEnd$ = this.drawEndSubject.asObservable();
     modify$ = this.modifySubject.asObservable();
+    select$ = this.selectSubject.asObservable();
     /**
      * Adds a managed interaction to the state.
+     * If the interaction is marked as exclusive, it disables other exclusive interactions.
      * @param interaction - The interaction to add
      */
     addInteraction(interaction) {
+        if (interaction.config.exclusive !== false) {
+            // Disable other exclusive interactions to maintain mutual exclusivity
+            const currentInteractions = this.interactions();
+            for (const existing of currentInteractions) {
+                if (existing.id !== interaction.id && existing.config.exclusive !== false) {
+                    existing.cleanup();
+                    this.removeInteraction(existing.id);
+                }
+            }
+        }
         this.interactions.update((list) => [...list, interaction]);
     }
     /**
@@ -94,6 +116,13 @@ class InteractionStateService {
     emitModify(event) {
         this.modifySubject.next(event);
     }
+    /**
+     * Emits a select event.
+     * @param event - The select event data
+     */
+    emitSelect(event) {
+        this.selectSubject.next(event);
+    }
     /**
      * Gets the current interaction state summary.
      * @returns Array of interaction state objects
@@ -122,10 +151,10 @@ class InteractionStateService {
         this.interactions.set([]);
         this.selectedFeaturesInternal.set([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: InteractionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: InteractionStateService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InteractionStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InteractionStateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: InteractionStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InteractionStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -195,16 +224,22 @@ class SelectInteractionService {
                     : undefined,
                 multi: config.multi ?? false,
                 hitTolerance: config.hitTolerance ?? 0,
+                condition: config.condition === 'pointerMove' ? pointerMove : click,
             });
             // Listen to selection changes — use getFeatures().getArray() for the full
             // accumulated collection, not e.selected which only contains newly added ones
-            select.on('select', (_e) => {
+            select.on('select', (e) => {
                 this.zoneHelper.runInsideAngular(() => {
                     const allSelected = select
                         .getFeatures()
                         .getArray()
                         .map((f) => olFeatureToFeature(f));
                     this.stateService.setSelectedFeatures(allSelected);
+                    this.stateService.emitSelect({
+                        interactionId: id,
+                        selected: e.selected.map((f) => olFeatureToFeature(f)),
+                        deselected: e.deselected.map((f) => olFeatureToFeature(f)),
+                    });
                 });
             });
             map.addInteraction(select);
@@ -221,10 +256,10 @@ class SelectInteractionService {
             this.stateService.addInteraction(managed);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectInteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectInteractionService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectInteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectInteractionService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectInteractionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectInteractionService, decorators: [{
             type: Injectable
         }] });
 
@@ -256,9 +291,69 @@ class DrawInteractionService {
             source = new VectorSource();
         }
         this.zoneHelper.runOutsideAngular(() => {
+            let drawType = config.type;
+            let geometryFunction;
+            if (config.type === 'Ellipse') {
+                drawType = 'Circle';
+                geometryFunction = (coords, geom) => {
+                    if (!geom) {
+                        geom = new Polygon([]);
+                    }
+                    const center = coords[0];
+                    const last = coords[1];
+                    const dx = last[0] - center[0];
+                    const dy = last[1] - center[1];
+                    const semiMajor = Math.sqrt(dx * dx + dy * dy);
+                    const semiMinor = semiMajor * 0.7; // Default ratio
+                    const rotation = Math.atan2(dy, dx);
+                    const ring = [];
+                    const segments = 64;
+                    for (let i = 0; i < segments; i++) {
+                        const theta = (i / segments) * Math.PI * 2;
+                        const ax = Math.cos(theta) * semiMajor;
+                        const ay = Math.sin(theta) * semiMinor;
+                        const rx = ax * Math.cos(rotation) - ay * Math.sin(rotation);
+                        const ry = ax * Math.sin(rotation) + ay * Math.cos(rotation);
+                        ring.push([center[0] + rx, center[1] + ry]);
+                    }
+                    ring.push(ring[0]);
+                    geom.setCoordinates([ring]);
+                    return geom;
+                };
+            }
+            else if (config.type === 'Donut') {
+                drawType = 'Circle';
+                geometryFunction = (coords, geom) => {
+                    if (!geom) {
+                        geom = new Polygon([]);
+                    }
+                    const center = coords[0];
+                    const last = coords[1];
+                    const dx = last[0] - center[0];
+                    const dy = last[1] - center[1];
+                    const outerRadius = Math.sqrt(dx * dx + dy * dy);
+                    const innerRadius = outerRadius * 0.6; // Default ratio
+                    const outer = [];
+                    const inner = [];
+                    const segments = 64;
+                    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.push([center[0] + cosT * outerRadius, center[1] + sinT * outerRadius]);
+                        inner.push([center[0] + cosT * innerRadius, center[1] + sinT * innerRadius]);
+                    }
+                    inner.reverse();
+                    outer.push(outer[0]);
+                    inner.push(inner[0]);
+                    geom.setCoordinates([outer, inner]);
+                    return geom;
+                };
+            }
             const draw = new Draw({
                 source,
-                type: config.type,
+                type: drawType,
+                geometryFunction,
                 freehand: config.freehand ?? false,
                 snapTolerance: config.snapTolerance ?? 12,
             });
@@ -267,14 +362,14 @@ class DrawInteractionService {
             draw.on('drawstart', (e) => {
                 this.zoneHelper.runInsideAngular(() => {
                     const feature = olFeatureToFeature(e.feature);
-                    this.stateService.emitDrawStart({ feature });
+                    this.stateService.emitDrawStart({ interactionId: id, feature });
                 });
             });
             // Handle draw end event
             draw.on('drawend', (e) => {
                 this.zoneHelper.runInsideAngular(() => {
                     const feature = olFeatureToFeature(e.feature);
-                    const event = { feature, type: config.type };
+                    const event = { interactionId: id, feature, type: config.type };
                     this.stateService.emitDrawEnd(event);
                 });
             });
@@ -296,10 +391,10 @@ class DrawInteractionService {
         });
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DrawInteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DrawInteractionService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DrawInteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DrawInteractionService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DrawInteractionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DrawInteractionService, decorators: [{
             type: Injectable
         }] });
 
@@ -337,7 +432,7 @@ class ModifyInteractionService {
             modify.on('modifystart', (e) => {
                 this.zoneHelper.runInsideAngular(() => {
                     const features = e.features.getArray().map((f) => olFeatureToFeature(f));
-                    const event = { features, type: 'modifystart' };
+                    const event = { interactionId: id, features, type: 'modifystart' };
                     this.stateService.emitModify(event);
                 });
             });
@@ -345,7 +440,7 @@ class ModifyInteractionService {
             modify.on('modifyend', (e) => {
                 this.zoneHelper.runInsideAngular(() => {
                     const features = e.features.getArray().map((f) => olFeatureToFeature(f));
-                    const event = { features, type: 'modifyend' };
+                    const event = { interactionId: id, features, type: 'modifyend' };
                     this.stateService.emitModify(event);
                 });
             });
@@ -366,10 +461,10 @@ class ModifyInteractionService {
             this.stateService.addInteraction(managed);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ModifyInteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ModifyInteractionService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ModifyInteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ModifyInteractionService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ModifyInteractionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ModifyInteractionService, decorators: [{
             type: Injectable
         }] });
 
@@ -408,6 +503,7 @@ class OlInteractionService {
     drawStart$ = this.stateService.drawStart$;
     drawEnd$ = this.stateService.drawEnd$;
     modify$ = this.stateService.modify$;
+    select$ = this.stateService.select$;
     /**
      * Enable a select interaction on the map.
      * @param id - Unique identifier for this interaction
@@ -517,13 +613,305 @@ class OlInteractionService {
     getInteractionState() {
         return this.stateService.getInteractionState();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlInteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlInteractionService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlInteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlInteractionService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlInteractionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlInteractionService, decorators: [{
             type: Injectable
         }] });
 
+class MeasurementInteractionService {
+    mapService = inject(OlMapService);
+    zoneHelper = inject(OlZoneHelper);
+    draw;
+    source = new VectorSource();
+    vectorLayer;
+    map;
+    sketch = null;
+    measureTooltipElement = null;
+    measureTooltip = null;
+    listener = null;
+    isMeasuring = false;
+    startMeasuring(type) {
+        if (this.isMeasuring)
+            this.stopMeasuring();
+        this.map = this.mapService.getMap() ?? undefined;
+        if (!this.map)
+            return;
+        this.zoneHelper.runOutsideAngular(() => {
+            this.vectorLayer = new VectorLayer({
+                source: this.source,
+                style: new Style({
+                    fill: new Fill({ color: 'rgba(255, 255, 255, 0.2)' }),
+                    stroke: new Stroke({ color: '#ffcc33', width: 2 }),
+                    image: new Circle({ radius: 7, fill: new Fill({ color: '#ffcc33' }) }),
+                }),
+                zIndex: 9999,
+            });
+            this.map.addLayer(this.vectorLayer);
+            this.draw = new Draw({
+                source: this.source,
+                type,
+                style: new Style({
+                    fill: new Fill({ color: 'rgba(255, 255, 255, 0.2)' }),
+                    stroke: new Stroke({ color: 'rgba(0, 0, 0, 0.5)', lineDash: [10, 10], width: 2 }),
+                    image: new Circle({
+                        radius: 5,
+                        stroke: new Stroke({ color: 'rgba(0, 0, 0, 0.7)' }),
+                        fill: new Fill({ color: 'rgba(255, 255, 255, 0.2)' }),
+                    }),
+                }),
+            });
+            this.map.addInteraction(this.draw);
+            this.createMeasureTooltip();
+            this.draw.on('drawstart', (evt) => {
+                this.sketch = evt.feature;
+                let tooltipCoord = evt.coordinate;
+                const geometry = this.sketch?.getGeometry();
+                if (geometry) {
+                    this.listener = geometry.on('change', (e) => {
+                        const geom = e.target;
+                        let output;
+                        if (geom instanceof Polygon) {
+                            output = this.formatArea(geom);
+                            tooltipCoord = geom.getInteriorPoint().getCoordinates();
+                        }
+                        else if (geom instanceof LineString) {
+                            output = this.formatLength(geom);
+                            tooltipCoord = geom.getLastCoordinate();
+                        }
+                        else {
+                            output = '';
+                        }
+                        if (this.measureTooltipElement) {
+                            this.measureTooltipElement.innerHTML = output;
+                            this.measureTooltip?.setPosition(tooltipCoord);
+                        }
+                    });
+                }
+            });
+            this.draw.on('drawend', () => {
+                if (this.measureTooltipElement) {
+                    this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
+                    this.measureTooltip?.setOffset([0, -7]);
+                    this.sketch = null;
+                    this.measureTooltipElement = null;
+                    this.createMeasureTooltip();
+                }
+                if (this.listener)
+                    unByKey(this.listener);
+            });
+            this.isMeasuring = true;
+        });
+    }
+    stopMeasuring() {
+        if (!this.isMeasuring)
+            return;
+        this.zoneHelper.runOutsideAngular(() => {
+            if (this.draw && this.map)
+                this.map.removeInteraction(this.draw);
+            if (this.vectorLayer && this.map)
+                this.map.removeLayer(this.vectorLayer);
+            this.source.clear();
+            // Remove all tooltips
+            const overlays = this.map
+                ?.getOverlays()
+                .getArray()
+                .filter((o) => o.getElement()?.classList.contains('ol-tooltip'));
+            overlays?.forEach((o) => this.map?.removeOverlay(o));
+            this.isMeasuring = false;
+            this.measureTooltipElement = null;
+            this.measureTooltip = null;
+        });
+    }
+    isActive() {
+        return this.isMeasuring;
+    }
+    createMeasureTooltip() {
+        if (!this.map)
+            return;
+        if (this.measureTooltipElement) {
+            this.measureTooltipElement.parentNode?.removeChild(this.measureTooltipElement);
+        }
+        this.measureTooltipElement = document.createElement('div');
+        this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
+        this.measureTooltipElement.style.backgroundColor = 'rgba(0,0,0,0.7)';
+        this.measureTooltipElement.style.color = 'white';
+        this.measureTooltipElement.style.padding = '4px 8px';
+        this.measureTooltipElement.style.borderRadius = '4px';
+        this.measureTooltipElement.style.fontSize = '12px';
+        this.measureTooltipElement.style.whiteSpace = 'nowrap';
+        this.measureTooltipElement.style.pointerEvents = 'none';
+        this.measureTooltip = new Overlay({
+            element: this.measureTooltipElement,
+            offset: [0, -15],
+            positioning: 'bottom-center',
+            stopEvent: false,
+        });
+        this.map.addOverlay(this.measureTooltip);
+    }
+    formatLength(line) {
+        const length = getLength(line);
+        let output;
+        if (length > 100) {
+            output = Math.round((length / 1000) * 100) / 100 + ' km';
+        }
+        else {
+            output = Math.round(length * 100) / 100 + ' m';
+        }
+        return output;
+    }
+    formatArea(polygon) {
+        const area = getArea(polygon);
+        let output;
+        if (area > 10000) {
+            output = Math.round((area / 1000000) * 100) / 100 + ' km<sup>2</sup>';
+        }
+        else {
+            output = Math.round(area * 100) / 100 + ' m<sup>2</sup>';
+        }
+        return output;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MeasurementInteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MeasurementInteractionService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MeasurementInteractionService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Declarative component to configure an OpenLayers Draw Interaction.
+ */
+class OlDrawInteractionComponent {
+    interactionService = inject(OlInteractionService);
+    destroyRef = inject(DestroyRef);
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    source = input(...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
+    freehand = input(...(ngDevMode ? [undefined, { debugName: "freehand" }] : /* istanbul ignore next */ []));
+    snapTolerance = input(...(ngDevMode ? [undefined, { debugName: "snapTolerance" }] : /* istanbul ignore next */ []));
+    active = input(true, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    drawStartFiltered$ = this.interactionService.drawStart$.pipe(filter((e) => e.interactionId === this.id()));
+    drawEndFiltered$ = this.interactionService.drawEnd$.pipe(filter((e) => e.interactionId === this.id()));
+    drawStart = outputFromObservable(this.drawStartFiltered$);
+    drawEnd = outputFromObservable(this.drawEndFiltered$);
+    constructor() {
+        effect(() => {
+            if (this.active()) {
+                this.interactionService.enableDraw(this.id(), {
+                    type: this.type(),
+                    source: this.source(),
+                    freehand: this.freehand(),
+                    snapTolerance: this.snapTolerance(),
+                });
+            }
+            else {
+                this.interactionService.disableInteraction(this.id());
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            this.interactionService.disableInteraction(this.id());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlDrawInteractionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlDrawInteractionComponent, isStandalone: true, selector: "ol-draw-interaction", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, freehand: { classPropertyName: "freehand", publicName: "freehand", isSignal: true, isRequired: false, transformFunction: null }, snapTolerance: { classPropertyName: "snapTolerance", publicName: "snapTolerance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drawStart: "drawStart", drawEnd: "drawEnd" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlDrawInteractionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-draw-interaction',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], freehand: [{ type: i0.Input, args: [{ isSignal: true, alias: "freehand", required: false }] }], snapTolerance: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapTolerance", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], drawStart: [{ type: i0.Output, args: ["drawStart"] }], drawEnd: [{ type: i0.Output, args: ["drawEnd"] }] } });
+
+/**
+ * Declarative component to configure an OpenLayers Modify Interaction.
+ */
+class OlModifyInteractionComponent {
+    interactionService = inject(OlInteractionService);
+    destroyRef = inject(DestroyRef);
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    source = input(...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
+    snapTolerance = input(...(ngDevMode ? [undefined, { debugName: "snapTolerance" }] : /* istanbul ignore next */ []));
+    active = input(true, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    modifyFiltered$ = this.interactionService.modify$.pipe(filter((e) => e.interactionId === this.id()));
+    modifyEvent = outputFromObservable(this.modifyFiltered$);
+    constructor() {
+        effect(() => {
+            if (this.active()) {
+                this.interactionService.enableModify(this.id(), {
+                    source: this.source(),
+                    snapTolerance: this.snapTolerance(),
+                });
+            }
+            else {
+                this.interactionService.disableInteraction(this.id());
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            this.interactionService.disableInteraction(this.id());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlModifyInteractionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlModifyInteractionComponent, isStandalone: true, selector: "ol-modify-interaction", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, snapTolerance: { classPropertyName: "snapTolerance", publicName: "snapTolerance", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modifyEvent: "modifyEvent" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlModifyInteractionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-modify-interaction',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], snapTolerance: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapTolerance", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], modifyEvent: [{ type: i0.Output, args: ["modifyEvent"] }] } });
+
+/**
+ * Declarative component to configure an OpenLayers Select Interaction.
+ */
+class OlSelectInteractionComponent {
+    interactionService = inject(OlInteractionService);
+    destroyRef = inject(DestroyRef);
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    layers = input(...(ngDevMode ? [undefined, { debugName: "layers" }] : /* istanbul ignore next */ []));
+    multi = input(...(ngDevMode ? [undefined, { debugName: "multi" }] : /* istanbul ignore next */ []));
+    hitTolerance = input(...(ngDevMode ? [undefined, { debugName: "hitTolerance" }] : /* istanbul ignore next */ []));
+    condition = input(...(ngDevMode ? [undefined, { debugName: "condition" }] : /* istanbul ignore next */ []));
+    active = input(true, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    selectFiltered$ = this.interactionService.select$.pipe(filter((e) => e.interactionId === this.id()));
+    selectEvent = outputFromObservable(this.selectFiltered$);
+    constructor() {
+        effect(() => {
+            if (this.active()) {
+                this.interactionService.enableSelect(this.id(), {
+                    layers: this.layers(),
+                    multi: this.multi(),
+                    hitTolerance: this.hitTolerance(),
+                    condition: this.condition(),
+                });
+            }
+            else {
+                this.interactionService.disableInteraction(this.id());
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            this.interactionService.disableInteraction(this.id());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlSelectInteractionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlSelectInteractionComponent, isStandalone: true, selector: "ol-select-interaction", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, layers: { classPropertyName: "layers", publicName: "layers", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, hitTolerance: { classPropertyName: "hitTolerance", publicName: "hitTolerance", isSignal: true, isRequired: false, transformFunction: null }, condition: { classPropertyName: "condition", publicName: "condition", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEvent: "selectEvent" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlSelectInteractionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-select-interaction',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], layers: [{ type: i0.Input, args: [{ isSignal: true, alias: "layers", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], hitTolerance: [{ type: i0.Input, args: [{ isSignal: true, alias: "hitTolerance", required: false }] }], condition: [{ type: i0.Input, args: [{ isSignal: true, alias: "condition", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], selectEvent: [{ type: i0.Output, args: ["selectEvent"] }] } });
+
 /**
  * Provide the interactions feature with OlInteractionService and all specialized services.
  * Note: ZoneHelper is inherited from core's provideOpenLayers.
@@ -533,11 +921,13 @@ function withInteractions() {
     return {
         kind: 'interactions',
         providers: [
+            OlLayerService, // DX: interactions often need layers
             OlInteractionService,
             InteractionStateService,
             SelectInteractionService,
             DrawInteractionService,
             ModifyInteractionService,
+            MeasurementInteractionService,
         ],
     };
 }
@@ -596,6 +986,19 @@ function withModifyInteraction(id, config = {}) {
         deps: [OlInteractionService],
     };
 }
+/**
+ * Enable measurement interaction when providing the interactions feature.
+ * @returns Provider function that enables measurement interaction
+ */
+function withMeasurementInteraction() {
+    return {
+        provide: 'MEASUREMENT_INTERACTION_CONFIG',
+        useFactory: (service) => {
+            return service;
+        },
+        deps: [MeasurementInteractionService],
+    };
+}
 
 // @angular-helpers/openlayers/interactions
 // Main orchestrator service
@@ -604,4 +1007,4 @@ function withModifyInteraction(id, config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { DrawInteractionService, InteractionStateService, ModifyInteractionService, OlInteractionService, SelectInteractionService, olFeatureToFeature, provideInteractions, withDrawInteraction, withInteractions, withModifyInteraction, withSelectInteraction };
+export { DrawInteractionService, InteractionStateService, MeasurementInteractionService, ModifyInteractionService, OlDrawInteractionComponent, OlInteractionService, OlModifyInteractionComponent, OlSelectInteractionComponent, SelectInteractionService, olFeatureToFeature, provideInteractions, withDrawInteraction, withInteractions, withMeasurementInteraction, withModifyInteraction, withSelectInteraction };