@angular-helpers/openlayers 0.4.0 → 0.5.1

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 { OlMapService, OlZoneHelper } from '@angular-helpers/openlayers/core';
+import { signal, computed, Injectable, inject, DestroyRef, input, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { OlMapService, OlZoneHelper, olFeatureToFeature } from '@angular-helpers/openlayers/core';
 import { Subject } from 'rxjs';
 import Select from 'ol/interaction/Select';
+import { pointerMove, click } from 'ol/events/condition';
+import { Style, Icon, Fill, Stroke, Circle } from 'ol/style';
 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 { outputFromObservable } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
 
 // Interaction state management service
 /**
@@ -18,12 +27,15 @@ class InteractionStateService {
     // Internal signals
     interactions = signal([], ...(ngDevMode ? [{ debugName: "interactions" }] : /* istanbul ignore next */ []));
     selectedFeaturesInternal = signal([], ...(ngDevMode ? [{ debugName: "selectedFeaturesInternal" }] : /* istanbul ignore next */ []));
+    hoveredFeatureInternal = signal(null, ...(ngDevMode ? [{ debugName: "hoveredFeatureInternal" }] : /* istanbul ignore next */ []));
     // Event subjects
     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 */ []));
+    hoveredFeature = computed(() => this.hoveredFeatureInternal(), ...(ngDevMode ? [{ debugName: "hoveredFeature" }] : /* istanbul ignore next */ []));
     selectionCount = computed(() => this.selectedFeaturesInternal().length, ...(ngDevMode ? [{ debugName: "selectionCount" }] : /* istanbul ignore next */ []));
     hasSelection = computed(() => this.selectedFeaturesInternal().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
     activeInteractions = computed(() => this.interactions().filter((i) => i.config.active !== false), ...(ngDevMode ? [{ debugName: "activeInteractions" }] : /* istanbul ignore next */ []));
@@ -31,6 +43,7 @@ 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.
@@ -84,6 +97,13 @@ class InteractionStateService {
     clearSelection() {
         this.selectedFeaturesInternal.set([]);
     }
+    /**
+     * Sets the currently hovered feature.
+     * @param feature - The hovered feature or null
+     */
+    setHoveredFeature(feature) {
+        this.hoveredFeatureInternal.set(feature);
+    }
     /**
      * Emits a draw start event.
      * @param event - The draw start event data
@@ -105,6 +125,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
@@ -132,54 +159,15 @@ class InteractionStateService {
     clearAll() {
         this.interactions.set([]);
         this.selectedFeaturesInternal.set([]);
+        this.hoveredFeatureInternal.set(null);
     }
-    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
         }] });
 
-// 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) {
-    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(),
-    };
-}
-
 // Select interaction creation service
 /**
  * Service responsible for creating and managing Select interactions.
@@ -206,17 +194,99 @@ class SelectInteractionService {
                     : undefined,
                 multi: config.multi ?? false,
                 hitTolerance: config.hitTolerance ?? 0,
+                condition: config.condition === 'pointerMove' ? pointerMove : click,
+                style: (olFeature, resolution) => {
+                    const styles = [];
+                    // 1. Resolve feature's own custom style (same as layer style Fn)
+                    const abstractStyle = olFeature.get('__angular_helpers_style__');
+                    const featureStyle = new Style();
+                    let hasCustom = false;
+                    if (abstractStyle) {
+                        const { icon, fill, stroke } = abstractStyle;
+                        if (icon?.src) {
+                            featureStyle.setImage(new Icon({
+                                src: icon.src,
+                                ...(icon.size ? { size: icon.size } : {}),
+                                ...(icon.anchor ? { anchor: icon.anchor } : {}),
+                            }));
+                            hasCustom = true;
+                        }
+                        if (fill) {
+                            featureStyle.setFill(new Fill({ color: fill.color }));
+                            hasCustom = true;
+                        }
+                        if (stroke) {
+                            featureStyle.setStroke(new Stroke({ color: stroke.color, width: stroke.width }));
+                            hasCustom = true;
+                        }
+                    }
+                    if (!hasCustom) {
+                        // Fallback to standard vector default style
+                        featureStyle.setFill(new Fill({ color: 'rgba(25, 118, 210, 0.3)' }));
+                        featureStyle.setStroke(new Stroke({ color: '#1976d2', width: 2 }));
+                        featureStyle.setImage(new Circle({
+                            radius: 8,
+                            fill: new Fill({ color: '#1976d2' }),
+                            stroke: new Stroke({ color: '#d32f2f', width: 2 }),
+                        }));
+                    }
+                    styles.push(featureStyle);
+                    // 2. Add high-fidelity premium selection highlight overlay
+                    const geometry = olFeature.getGeometry();
+                    if (geometry) {
+                        const geomType = geometry.getType();
+                        if (geomType === 'Point') {
+                            // Outer glowing selection ring for Points
+                            styles.push(new Style({
+                                image: new Circle({
+                                    radius: 12,
+                                    stroke: new Stroke({
+                                        color: 'rgba(59, 130, 246, 0.8)',
+                                        width: 2,
+                                        lineDash: [4, 4],
+                                    }),
+                                }),
+                            }));
+                        }
+                        else {
+                            // Outer thick dashed highlight for Polygons/LineStrings
+                            styles.push(new Style({
+                                stroke: new Stroke({
+                                    color: 'rgba(59, 130, 246, 0.9)',
+                                    width: 3,
+                                    lineDash: [6, 4],
+                                }),
+                                fill: new Fill({
+                                    color: 'rgba(59, 130, 246, 0.05)',
+                                }),
+                            }));
+                        }
+                    }
+                    return styles;
+                },
             });
             // 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) => {
-                this.zoneHelper.runInsideAngular(() => {
-                    const allSelected = select
-                        .getFeatures()
-                        .getArray()
-                        .map((f) => olFeatureToFeature(f));
-                    this.stateService.setSelectedFeatures(allSelected);
-                });
+            select.on('select', (e) => {
+                const allFeatures = select
+                    .getFeatures()
+                    .getArray()
+                    .map((f) => olFeatureToFeature(f));
+                if (config.condition === 'pointerMove') {
+                    // Update signal outside Angular zone. Consumers of this signal will schedule
+                    // targeted change detection automatically.
+                    this.stateService.setHoveredFeature(allFeatures.length > 0 ? allFeatures[0] : null);
+                }
+                else {
+                    this.zoneHelper.runInsideAngular(() => {
+                        this.stateService.setSelectedFeatures(allFeatures);
+                        this.stateService.emitSelect({
+                            interactionId: id,
+                            selected: e.selected.map((f) => olFeatureToFeature(f)),
+                            deselected: e.deselected.map((f) => olFeatureToFeature(f)),
+                        });
+                    });
+                }
             });
             map.addInteraction(select);
             const managed = {
@@ -232,10 +302,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
         }] });
 
@@ -267,9 +337,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,
             });
@@ -278,14 +408,34 @@ 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 uniqueId = `drawn-${Date.now()}`;
+                    e.feature.setId(uniqueId);
+                    // Set default properties and styling on raw OL feature
+                    e.feature.set('name', 'Sketch');
+                    const defaultStyle = {
+                        fill: { color: 'rgba(59, 130, 246, 0.2)' },
+                        stroke: { color: '#3b82f6', width: 2 },
+                    };
+                    e.feature.set('__angular_helpers_style__', defaultStyle);
+                    // Convert to internal Feature representation
                     const feature = olFeatureToFeature(e.feature);
-                    const event = { feature, type: config.type };
+                    feature.id = uniqueId;
+                    feature.properties = {
+                        ...feature.properties,
+                        name: 'Sketch',
+                        strokeColor: '#3b82f6',
+                        strokeWidth: 2,
+                        fillColor: '#3b82f6',
+                        fillOpacity: 0.2,
+                    };
+                    feature.style = defaultStyle;
+                    const event = { interactionId: id, feature, type: config.type };
                     this.stateService.emitDrawEnd(event);
                 });
             });
@@ -307,10 +457,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
         }] });
 
@@ -348,7 +498,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);
                 });
             });
@@ -356,7 +506,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);
                 });
             });
@@ -377,10 +527,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
         }] });
 
@@ -413,12 +563,14 @@ class OlInteractionService {
     modifyService = inject(ModifyInteractionService);
     // Public signals and observables delegated to state service
     selectedFeatures = this.stateService.selectedFeatures;
+    hoveredFeature = this.stateService.hoveredFeature;
     selectionCount = this.stateService.selectionCount;
     hasSelection = this.stateService.hasSelection;
     activeInteractions = this.stateService.activeInteractions;
     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
@@ -528,13 +680,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.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.4", ngImport: i0, type: OlInteractionService, decorators: [{
+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.
@@ -550,6 +994,7 @@ function withInteractions() {
             SelectInteractionService,
             DrawInteractionService,
             ModifyInteractionService,
+            MeasurementInteractionService,
         ],
     };
 }
@@ -608,6 +1053,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
@@ -616,4 +1074,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, provideInteractions, withDrawInteraction, withInteractions, withMeasurementInteraction, withModifyInteraction, withSelectInteraction };