@angular-helpers/openlayers 0.1.0 → 0.2.0

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

@@ -1,15 +1,521 @@
 import * as i0 from '@angular/core';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { signal, computed, Injectable, inject } from '@angular/core';
+import { OlMapService, OlZoneHelper } from '@angular-helpers/openlayers/core';
+import { Subject } from 'rxjs';
+import Select from 'ol/interaction/Select';
+import Draw from 'ol/interaction/Draw';
+import Snap from 'ol/interaction/Snap';
+import VectorSource from 'ol/source/Vector';
+import { OlLayerService } from '@angular-helpers/openlayers/layers';
+import Modify from 'ol/interaction/Modify';
 
-// OlInteractionService
+// Interaction state management service
+/**
+ * Service responsible for managing the reactive state of interactions.
+ * Provides signals for interaction state and observables for events.
+ */
+class InteractionStateService {
+    // Internal signals
+    interactions = signal([], ...(ngDevMode ? [{ debugName: "interactions" }] : /* istanbul ignore next */ []));
+    selectedFeaturesInternal = signal([], ...(ngDevMode ? [{ debugName: "selectedFeaturesInternal" }] : /* istanbul ignore next */ []));
+    // Event subjects
+    drawStartSubject = new Subject();
+    drawEndSubject = new Subject();
+    modifySubject = 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 */ []));
+    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 */ []));
+    // Public observables
+    drawStart$ = this.drawStartSubject.asObservable();
+    drawEnd$ = this.drawEndSubject.asObservable();
+    modify$ = this.modifySubject.asObservable();
+    /**
+     * Adds a managed interaction to the state.
+     * @param interaction - The interaction to add
+     */
+    addInteraction(interaction) {
+        this.interactions.update((list) => [...list, interaction]);
+    }
+    /**
+     * Removes an interaction by id.
+     * @param id - The interaction identifier to remove
+     */
+    removeInteraction(id) {
+        this.interactions.update((list) => list.filter((i) => i.id !== id));
+    }
+    /**
+     * Gets all managed interactions.
+     * @returns Array of managed interactions
+     */
+    getInteractions() {
+        return this.interactions();
+    }
+    /**
+     * Finds an interaction by id.
+     * @param id - The interaction identifier
+     * @returns The managed interaction or undefined
+     */
+    findInteraction(id) {
+        return this.interactions().find((i) => i.id === id);
+    }
+    /**
+     * Sets the currently selected features.
+     * @param features - Array of selected features
+     */
+    setSelectedFeatures(features) {
+        this.selectedFeaturesInternal.set(features);
+    }
+    /**
+     * Clears the current selection.
+     */
+    clearSelection() {
+        this.selectedFeaturesInternal.set([]);
+    }
+    /**
+     * Emits a draw start event.
+     * @param event - The draw start event data
+     */
+    emitDrawStart(event) {
+        this.drawStartSubject.next(event);
+    }
+    /**
+     * Emits a draw end event.
+     * @param event - The draw end event data
+     */
+    emitDrawEnd(event) {
+        this.drawEndSubject.next(event);
+    }
+    /**
+     * Emits a modify event.
+     * @param event - The modify event data
+     */
+    emitModify(event) {
+        this.modifySubject.next(event);
+    }
+    /**
+     * Gets the current interaction state summary.
+     * @returns Array of interaction state objects
+     */
+    getInteractionState() {
+        return this.interactions().map((i) => ({
+            id: i.id,
+            type: i.type,
+            active: i.config.active !== false,
+        }));
+    }
+    /**
+     * Checks if an interaction is currently active.
+     * @param id - The interaction identifier
+     * @returns True if the interaction exists and is active
+     */
+    isActive(id) {
+        const interaction = this.findInteraction(id);
+        return interaction ? interaction.config.active !== false : false;
+    }
+    /**
+     * Clears all interactions from state.
+     * Note: This only clears the state tracking, not the actual OL interactions.
+     */
+    clearAll() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", 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.
+ */
+class SelectInteractionService {
+    mapService = inject(OlMapService);
+    stateService = inject(InteractionStateService);
+    zoneHelper = inject(OlZoneHelper);
+    /**
+     * Creates and configures a Select interaction.
+     * @param id - Unique identifier for the interaction
+     * @param config - Select interaction configuration
+     * @param map - OpenLayers map instance
+     * @returns Promise that resolves when the interaction is created
+     */
+    createSelectInteraction(id, config, map) {
+        this.zoneHelper.runOutsideAngular(() => {
+            const select = new Select({
+                layers: config.layers
+                    ? (layer) => {
+                        const layerId = layer.get('id');
+                        return config.layers?.includes(layerId) ?? false;
+                    }
+                    : undefined,
+                multi: config.multi ?? false,
+                hitTolerance: config.hitTolerance ?? 0,
+            });
+            // 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);
+                });
+            });
+            map.addInteraction(select);
+            const managed = {
+                id,
+                type: 'select',
+                olInteraction: select,
+                config,
+                cleanup: () => {
+                    map.removeInteraction(select);
+                    select.dispose();
+                },
+            };
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectInteractionService, decorators: [{
+            type: Injectable
+        }] });
+
+// Draw interaction creation service
+/**
+ * Service responsible for creating and managing Draw interactions.
+ */
+class DrawInteractionService {
+    mapService = inject(OlMapService);
+    layerService = inject(OlLayerService);
+    stateService = inject(InteractionStateService);
+    zoneHelper = inject(OlZoneHelper);
+    /**
+     * Creates and configures a Draw interaction.
+     * @param id - Unique identifier for the interaction
+     * @param config - Draw interaction configuration
+     * @param map - OpenLayers map instance
+     * @returns True if the interaction was created successfully
+     */
+    createDrawInteraction(id, config, map) {
+        let source;
+        // Get source from layer if specified
+        if (config.source) {
+            const layer = this.layerService.getLayer(config.source);
+            source = layer?.getSource() ?? undefined;
+        }
+        // Create a temporary source if none provided
+        if (!source) {
+            source = new VectorSource();
+        }
+        this.zoneHelper.runOutsideAngular(() => {
+            const draw = new Draw({
+                source,
+                type: config.type,
+                freehand: config.freehand ?? false,
+                snapTolerance: config.snapTolerance ?? 12,
+            });
+            const snap = new Snap({ source });
+            // Handle draw start event
+            draw.on('drawstart', (e) => {
+                this.zoneHelper.runInsideAngular(() => {
+                    const feature = olFeatureToFeature(e.feature);
+                    this.stateService.emitDrawStart({ feature });
+                });
+            });
+            // Handle draw end event
+            draw.on('drawend', (e) => {
+                this.zoneHelper.runInsideAngular(() => {
+                    const feature = olFeatureToFeature(e.feature);
+                    const event = { feature, type: config.type };
+                    this.stateService.emitDrawEnd(event);
+                });
+            });
+            map.addInteraction(draw);
+            map.addInteraction(snap);
+            const managed = {
+                id,
+                type: 'draw',
+                olInteraction: draw,
+                config,
+                cleanup: () => {
+                    map.removeInteraction(draw);
+                    map.removeInteraction(snap);
+                    draw.dispose();
+                    snap.dispose();
+                },
+            };
+            this.stateService.addInteraction(managed);
+        });
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DrawInteractionService, decorators: [{
+            type: Injectable
+        }] });
+
+// Modify interaction creation service
+/**
+ * Service responsible for creating and managing Modify interactions.
+ */
+class ModifyInteractionService {
+    layerService = inject(OlLayerService);
+    stateService = inject(InteractionStateService);
+    zoneHelper = inject(OlZoneHelper);
+    /**
+     * Creates and configures a Modify interaction.
+     * @param id - Unique identifier for the interaction
+     * @param config - Modify interaction configuration
+     * @param map - OpenLayers map instance
+     */
+    createModifyInteraction(id, config, map) {
+        this.zoneHelper.runOutsideAngular(() => {
+            let source;
+            if (config.source) {
+                const layer = this.layerService.getLayer(config.source);
+                source = layer?.getSource() ?? undefined;
+            }
+            if (!source) {
+                // No source available, cannot create modify interaction
+                return;
+            }
+            const modify = new Modify({
+                source,
+                pixelTolerance: config.snapTolerance ?? 10,
+            });
+            const snap = new Snap({ source: source });
+            // Handle modify start event
+            modify.on('modifystart', (e) => {
+                this.zoneHelper.runInsideAngular(() => {
+                    const features = e.features.getArray().map((f) => olFeatureToFeature(f));
+                    const event = { features, type: 'modifystart' };
+                    this.stateService.emitModify(event);
+                });
+            });
+            // Handle modify end event
+            modify.on('modifyend', (e) => {
+                this.zoneHelper.runInsideAngular(() => {
+                    const features = e.features.getArray().map((f) => olFeatureToFeature(f));
+                    const event = { features, type: 'modifyend' };
+                    this.stateService.emitModify(event);
+                });
+            });
+            map.addInteraction(modify);
+            map.addInteraction(snap);
+            const managed = {
+                id,
+                type: 'modify',
+                olInteraction: modify,
+                config,
+                cleanup: () => {
+                    map.removeInteraction(modify);
+                    map.removeInteraction(snap);
+                    modify.dispose();
+                    snap.dispose();
+                },
+            };
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ModifyInteractionService, decorators: [{
+            type: Injectable
+        }] });
+
+// OlInteractionService - Main orchestrator for OpenLayers interactions
+/**
+ * Main service for managing OpenLayers map interactions.
+ * Orchestrates specialized interaction services and exposes unified API.
+ *
+ * @example
+ * ```typescript
+ * const interactionService = inject(OlInteractionService);
+ *
+ * // Enable select interaction
+ * interactionService.enableSelect('select-1', { layers: ['cities'], multi: true });
+ *
+ * // React to selection changes
+ * effect(() => {
+ *   const selected = interactionService.selectedFeatures();
+ *   console.log('Selected:', selected);
+ * });
+ * ```
+ */
 class OlInteractionService {
-    enableInteraction(type, config) {
-        return null;
+    mapService = inject(OlMapService);
+    stateService = inject(InteractionStateService);
+    zoneHelper = inject(OlZoneHelper);
+    // Specialized interaction services (injected, not instantiated)
+    selectService = inject(SelectInteractionService);
+    drawService = inject(DrawInteractionService);
+    modifyService = inject(ModifyInteractionService);
+    // Public signals and observables delegated to state service
+    selectedFeatures = this.stateService.selectedFeatures;
+    selectionCount = this.stateService.selectionCount;
+    hasSelection = this.stateService.hasSelection;
+    activeInteractions = this.stateService.activeInteractions;
+    drawStart$ = this.stateService.drawStart$;
+    drawEnd$ = this.stateService.drawEnd$;
+    modify$ = this.stateService.modify$;
+    /**
+     * Enable a select interaction on the map.
+     * @param id - Unique identifier for this interaction
+     * @param config - Selection configuration
+     * @returns Object with cleanup method
+     */
+    enableSelect(id, config = {}) {
+        if (this.stateService.findInteraction(id)) {
+            return { cleanup: () => this.disableInteraction(id) };
+        }
+        this.mapService.onReady((map) => {
+            this.selectService.createSelectInteraction(id, config, map);
+        });
+        return { cleanup: () => this.disableInteraction(id) };
+    }
+    /**
+     * Enable a draw interaction on the map.
+     * @param id - Unique identifier for this interaction
+     * @param config - Draw configuration
+     * @returns Object with cleanup method and isActive signal
+     */
+    enableDraw(id, config) {
+        if (this.stateService.findInteraction(id)) {
+            return { cleanup: () => this.disableInteraction(id), isActive: () => false };
+        }
+        let isActive = false;
+        this.mapService.onReady((map) => {
+            isActive = this.drawService.createDrawInteraction(id, config, map);
+        });
+        return {
+            cleanup: () => this.disableInteraction(id),
+            isActive: () => isActive,
+        };
+    }
+    /**
+     * Enable a modify interaction on the map.
+     * @param id - Unique identifier for this interaction
+     * @param config - Modify configuration
+     * @returns Object with cleanup method
+     */
+    enableModify(id, config = {}) {
+        if (this.stateService.findInteraction(id)) {
+            return { cleanup: () => this.disableInteraction(id) };
+        }
+        this.mapService.onReady((map) => {
+            this.modifyService.createModifyInteraction(id, config, map);
+        });
+        return { cleanup: () => this.disableInteraction(id) };
+    }
+    /**
+     * Disable and remove an interaction by id.
+     * @param id - The interaction identifier
+     */
+    disableInteraction(id) {
+        const interaction = this.stateService.findInteraction(id);
+        if (!interaction)
+            return;
+        // Run cleanup outside Angular zone
+        this.zoneHelper.runOutsideAngular(() => {
+            interaction.cleanup();
+        });
+        // Remove from state
+        this.stateService.removeInteraction(id);
+        // Clear selection if this was a select interaction
+        if (interaction.type === 'select') {
+            this.stateService.clearSelection();
+        }
     }
-    disableInteraction(id) { }
-    startDrawing(type, options) {
-        return new Observable();
+    /**
+     * Disable all active interactions.
+     */
+    disableAll() {
+        const ids = this.stateService.getInteractions().map((i) => i.id);
+        for (const id of ids) {
+            this.disableInteraction(id);
+        }
+    }
+    /**
+     * Clear the current selection.
+     * Also clears the OL Select interaction's internal feature collection so the
+     * visual selection is removed from the map.
+     */
+    clearSelection() {
+        const interactions = this.stateService.getInteractions();
+        for (const managed of interactions) {
+            if (managed.type === 'select') {
+                this.zoneHelper.runOutsideAngular(() => {
+                    const olSelect = managed.olInteraction;
+                    olSelect.getFeatures?.()?.clear();
+                });
+            }
+        }
+        this.stateService.clearSelection();
+    }
+    /**
+     * Check if an interaction is currently active.
+     * @param id - The interaction identifier
+     * @returns True if active, false otherwise
+     */
+    isActive(id) {
+        return this.stateService.isActive(id);
+    }
+    /**
+     * Get current interaction state.
+     * @returns Array of interaction state summaries
+     */
+    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 });
@@ -18,17 +524,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Injectable
         }] });
 
+/**
+ * Provide the interactions feature with OlInteractionService and all specialized services.
+ * Note: ZoneHelper is inherited from core's provideOpenLayers.
+ * @returns OlFeature configuration for interactions
+ */
 function withInteractions() {
-    return { kind: 'interactions', providers: [OlInteractionService] };
+    return {
+        kind: 'interactions',
+        providers: [
+            OlInteractionService,
+            InteractionStateService,
+            SelectInteractionService,
+            DrawInteractionService,
+            ModifyInteractionService,
+        ],
+    };
 }
+/**
+ * Alias for withInteractions().
+ * @returns OlFeature configuration for interactions
+ */
 function provideInteractions() {
     return withInteractions();
 }
+/**
+ * Enable select interaction when providing the interactions feature.
+ * @param id Unique identifier for this interaction
+ * @param config Select interaction configuration
+ * @returns Provider function that enables select interaction
+ */
+function withSelectInteraction(id, config = {}) {
+    return {
+        provide: 'SELECT_INTERACTION_CONFIG',
+        useFactory: (service) => {
+            service.enableSelect(id, config);
+            return { id, config };
+        },
+        deps: [OlInteractionService],
+    };
+}
+/**
+ * Enable draw interaction when providing the interactions feature.
+ * @param id Unique identifier for this interaction
+ * @param config Draw interaction configuration
+ * @returns Provider function that enables draw interaction
+ */
+function withDrawInteraction(id, config) {
+    return {
+        provide: 'DRAW_INTERACTION_CONFIG',
+        useFactory: (service) => {
+            service.enableDraw(id, config);
+            return { id, config };
+        },
+        deps: [OlInteractionService],
+    };
+}
+/**
+ * Enable modify interaction when providing the interactions feature.
+ * @param id Unique identifier for this interaction
+ * @param config Modify interaction configuration
+ * @returns Provider function that enables modify interaction
+ */
+function withModifyInteraction(id, config = {}) {
+    return {
+        provide: 'MODIFY_INTERACTION_CONFIG',
+        useFactory: (service) => {
+            service.enableModify(id, config);
+            return { id, config };
+        },
+        deps: [OlInteractionService],
+    };
+}
 
 // @angular-helpers/openlayers/interactions
+// Main orchestrator service
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { OlInteractionService, provideInteractions, withInteractions };
+export { DrawInteractionService, InteractionStateService, ModifyInteractionService, OlInteractionService, SelectInteractionService, olFeatureToFeature, provideInteractions, withDrawInteraction, withInteractions, withModifyInteraction, withSelectInteraction };