@angular-helpers/openlayers 0.5.0 → 0.5.1

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

@@ -1,9 +1,10 @@
 import * as i0 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 { 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';
@@ -14,7 +15,6 @@ 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';
 
@@ -27,6 +27,7 @@ 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();
@@ -34,6 +35,7 @@ class InteractionStateService {
     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 */ []));
@@ -95,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
@@ -150,6 +159,7 @@ class InteractionStateService {
     clearAll() {
         this.interactions.set([]);
         this.selectedFeaturesInternal.set([]);
+        this.hoveredFeatureInternal.set(null);
     }
     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 });
@@ -158,46 +168,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             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.
@@ -225,22 +195,98 @@ class SelectInteractionService {
                 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);
-                    this.stateService.emitSelect({
-                        interactionId: id,
-                        selected: e.selected.map((f) => olFeatureToFeature(f)),
-                        deselected: e.deselected.map((f) => olFeatureToFeature(f)),
+                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 = {
@@ -368,7 +414,27 @@ class DrawInteractionService {
             // 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);
+                    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);
                 });
@@ -497,6 +563,7 @@ 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;
@@ -1007,4 +1074,4 @@ function withMeasurementInteraction() {
  * Generated bundle index. Do not edit.
  */
 
-export { DrawInteractionService, InteractionStateService, MeasurementInteractionService, ModifyInteractionService, OlDrawInteractionComponent, OlInteractionService, OlModifyInteractionComponent, OlSelectInteractionComponent, SelectInteractionService, olFeatureToFeature, provideInteractions, withDrawInteraction, withInteractions, withMeasurementInteraction, withModifyInteraction, withSelectInteraction };
+export { DrawInteractionService, InteractionStateService, MeasurementInteractionService, ModifyInteractionService, OlDrawInteractionComponent, OlInteractionService, OlModifyInteractionComponent, OlSelectInteractionComponent, SelectInteractionService, provideInteractions, withDrawInteraction, withInteractions, withMeasurementInteraction, withModifyInteraction, withSelectInteraction };