@acorex/components 19.15.0-next.3 → 19.15.0-next.5

package/fesm2022/acorex-components-map.mjs

@@ -496,34 +496,40 @@ class AXLeafletService {
      * Adjusts the map view to fit all markers, polygons, and boundaries currently on the map.
      */
     fitBoundsToDrawItems() {
-        if (!this.map || !this.drawnItems) {
-            console.warn('Map or drawn items not initialized.');
+        if (!this.map) {
+            console.warn('Map not initialized.');
             return;
         }
         const bounds = this.L.latLngBounds([]);
-        // Add all draw items to bounds
-        this.drawnItems.getLayers().forEach((layer) => {
-            if (layer instanceof this.L.Marker) {
-                bounds.extend(layer.getLatLng());
-            }
-            else if (layer instanceof this.L.Polygon) {
-                const latLngs = layer.getLatLngs();
-                latLngs.forEach((latLngArray) => {
-                    latLngArray.forEach((latLng) => {
-                        bounds.extend(latLng);
+        let hasValidBounds = false;
+        // Add all draw items to bounds if they exist
+        if (this.drawnItems) {
+            this.drawnItems.getLayers().forEach((layer) => {
+                if (layer instanceof this.L.Marker) {
+                    bounds.extend(layer.getLatLng());
+                    hasValidBounds = true;
+                }
+                else if (layer instanceof this.L.Polygon) {
+                    const latLngs = layer.getLatLngs();
+                    latLngs.forEach((latLngArray) => {
+                        latLngArray.forEach((latLng) => {
+                            bounds.extend(latLng);
+                            hasValidBounds = true;
+                        });
                     });
-                });
-            }
-        });
-        // Also include boundaries if set
+                }
+            });
+        }
+        // Always include boundaries if set
         if (this.boundary && this.boundary.length > 0) {
             this.boundary.forEach((boundaryPolygon) => {
                 boundaryPolygon.points.forEach((point) => {
                     bounds.extend([point.latitude, point.longitude]);
+                    hasValidBounds = true;
                 });
             });
         }
-        if (bounds.isValid()) {
+        if (hasValidBounds && bounds.isValid()) {
             const maxZoom = 18;
             this.map.fitBounds(bounds, {
                 padding: [20, 20],
@@ -654,13 +660,13 @@ class AXMapComponent {
         this.hasLocator = input(false);
         /**
          * @description
-         * whener map should contain all draw items.
+         * Whether map should contain all draw items.
          * @default false
          */
         this.fitToDraw = input(false);
         /**
          * @description
-         * whener map draw has to limit in area.
+         * Whether map draw has to limit in area.
          * @default undefined
          */
         this.limitDraw = input(undefined);
@@ -721,106 +727,138 @@ class AXMapComponent {
         this.mapContainer = viewChild('mapContainer');
         this.leafletService = inject(AXLeafletService);
         this.rendered = signal(false);
+        /**
+         * Initialize the map once rendering is complete
+         */
         this.#initMap = afterNextRender(async () => {
             await this.leafletService.initMap(this.mapContainer().nativeElement, { latitude: this.latitude() ?? 31, longitude: this.longitude() ?? 51 }, this.zoomLevel() ?? 5);
+            // Initialize map data
             if (this.markers()) {
                 this.leafletService.addMarker(this.markers());
             }
             if (this.polygons()) {
                 this.leafletService.addPolygon(this.polygons());
             }
-            if (this.fitToDraw() && (this.polygons() || this.markers())) {
-                this.leafletService.fitBoundsToDrawItems();
-            }
             if (this.limitDraw()) {
                 this.leafletService.setBoundary(this.limitDraw());
             }
+            // Setup map events
+            this.setupMapEvents();
+            // Apply initial fit if needed
+            if (this.fitToDraw()) {
+                this.leafletService.fitBoundsToDrawItems();
+            }
             this.onMapReady.emit();
             this.rendered.set(true);
         });
+        /**
+         * Effect for locator control
+         */
         this.#locatorEffect = effect(() => {
-            if (this.rendered()) {
-                if (!this.hasLocator()) {
-                    this.leafletService.removeLocateControl();
-                    if (this.onLocationFoundSubscription) {
-                        this.onLocationFoundSubscription.unsubscribe();
-                        this.onLocationFoundSubscription = null;
-                    }
-                }
-                else {
-                    this.leafletService.addLocateControl(this.locatePlace());
-                    if (!this.onLocationFoundSubscription) {
-                        this.onLocationFoundSubscription = this.leafletService.onLocationFound
-                            .pipe(distinctUntilChanged((prev, curr) => prev.latitude === curr.latitude && prev.longitude === curr.longitude))
-                            .subscribe((location) => {
-                            this.onLocationFound.emit(location);
-                        });
-                    }
+            if (!this.rendered())
+                return;
+            const hasLocator = this.hasLocator();
+            const locatePlace = this.locatePlace();
+            if (!hasLocator) {
+                this.leafletService.removeLocateControl();
+                if (this.onLocationFoundSubscription) {
+                    this.onLocationFoundSubscription.unsubscribe();
+                    this.onLocationFoundSubscription = undefined;
                 }
+                return;
             }
-        });
-        this.#drawEffect = effect(() => {
-            if (this.rendered()) {
-                this.leafletService.onLatitudeChanged.subscribe((latitude) => {
-                    this.latitude.set(latitude);
-                });
-                this.leafletService.onLongitudeChanged.subscribe((longitude) => {
-                    this.longitude.set(longitude);
-                });
-                this.leafletService.onZoomChanged.subscribe((zoom) => {
-                    this.zoomLevel.set(zoom);
+            // Add locator control
+            this.leafletService.addLocateControl(locatePlace);
+            // Subscribe to location events if not already subscribed
+            if (!this.onLocationFoundSubscription) {
+                this.onLocationFoundSubscription = this.leafletService.onLocationFound
+                    .pipe(distinctUntilChanged((prev, curr) => prev.latitude === curr.latitude && prev.longitude === curr.longitude))
+                    .subscribe((location) => {
+                    this.onLocationFound.emit(location);
                 });
-                if (!this.hasDraw()) {
-                    this.leafletService.removeDrawControl();
-                    this.unsubscribeFromEvents();
-                }
-                else {
-                    this.leafletService.addDrawControl(this.markerPlace(), this.maxMarker() || 1, this.maxPolygon());
-                    if (!this.onMarkerChangedSubscription) {
-                        this.onMarkerChangedSubscription = this.leafletService.onMarkerChanged.subscribe((location) => {
-                            this.onMarkerChanged.emit(location);
-                        });
-                    }
-                    if (!this.onMarkerAddedSubscription) {
-                        this.onMarkerAddedSubscription = this.leafletService.onMarkerAdded.subscribe((location) => {
-                            this.onMarkerAdded.emit(location);
-                        });
-                    }
-                    if (!this.onPolygonChangedSubscription) {
-                        this.onPolygonChangedSubscription = this.leafletService.onPolygonChanged.subscribe((location) => {
-                            this.onPolygonChanged.emit(location);
-                        });
-                    }
-                    if (!this.onPolygonAddedSubscription) {
-                        this.onPolygonAddedSubscription = this.leafletService.onPolygonAdded.subscribe((location) => {
-                            this.onPolygonAdded.emit(location);
-                        });
-                    }
-                }
             }
         });
+        /**
+         * Effect for draw control
+         */
+        this.#drawControlEffect = effect(() => {
+            if (!this.rendered())
+                return;
+            const hasDraw = this.hasDraw();
+            const markerPlace = this.markerPlace();
+            const maxMarker = this.maxMarker();
+            const maxPolygon = this.maxPolygon();
+            if (!hasDraw) {
+                this.leafletService.removeDrawControl();
+                this.unsubscribeFromDrawEvents();
+                return;
+            }
+            // Add draw control with current settings
+            this.leafletService.addDrawControl(markerPlace, maxMarker || 1, maxPolygon);
+            // Set up event subscriptions
+            this.setupDrawEventSubscriptions();
+        });
+        /**
+         * Effect for zoom level changes
+         */
         this.#zoomEffect = effect(() => {
             if (this.rendered() && this.zoomLevel() !== null) {
                 this.leafletService.setZoomLevel(this.zoomLevel());
             }
         });
+        /**
+         * Effect for limit draw changes
+         */
         this.#limitDrawEffect = effect(() => {
-            if (this.rendered() && this.limitDraw()) {
+            if (!this.rendered())
+                return;
+            const limitDraw = this.limitDraw();
+            if (limitDraw) {
                 this.leafletService.removeBoundary();
-                this.leafletService.setBoundary(this.limitDraw());
+                this.leafletService.setBoundary(limitDraw);
+                if (this.fitToDraw()) {
+                    this.fitBoundsToDrawItems();
+                }
             }
         });
+        /**
+         * Effect for markers changes
+         */
+        this.#markersEffect = effect(() => {
+            if (this.rendered() && this.markers() && this.fitToDraw()) {
+                this.fitBoundsToDrawItems();
+            }
+        });
+        /**
+         * Effect for polygons changes
+         */
+        this.#polygonsEffect = effect(() => {
+            if (this.rendered() && this.polygons() && this.fitToDraw()) {
+                this.fitBoundsToDrawItems();
+            }
+        });
+        /**
+         * Effect for fitToDraw changes
+         */
+        this.#fitToDrawEffect = effect(() => {
+            if (this.rendered() && this.fitToDraw()) {
+                this.fitBoundsToDrawItems();
+            }
+        });
+        /**
+         * Effect for center changes (lat/long)
+         */
         this.#centerEffect = effect(() => {
-            if (this.rendered()) {
-                if (this.fitToDraw() === false) {
-                    this.leafletService.setCenter({
-                        latitude: this.latitude(),
-                        longitude: this.longitude(),
-                    });
-                }
-                else {
-                    this.fitBoundsToDrawItems();
-                }
+            if (!this.rendered())
+                return;
+            if (this.fitToDraw()) {
+                this.fitBoundsToDrawItems();
+            }
+            else {
+                this.leafletService.setCenter({
+                    latitude: this.latitude(),
+                    longitude: this.longitude(),
+                });
             }
         });
     }
@@ -832,6 +870,12 @@ class AXMapComponent {
     addMarker(location) {
         this.leafletService.addMarker(location);
     }
+    /**
+     * @description
+     * Adds a polygon to the specified location on the map.
+     * @param location - The location where the polygon should be placed.
+     * @param clickCallback - Optional callback for polygon click events.
+     */
     addPolygon(location, clickCallback) {
         this.leafletService.addPolygon(location, clickCallback);
     }
@@ -878,9 +922,18 @@ class AXMapComponent {
     fitBoundsToDrawItems() {
         return this.leafletService.fitBoundsToDrawItems();
     }
+    /**
+     * @description
+     * Sets the boundary limit for drawing
+     * @param data - The polygon data defining the boundary
+     */
     setLimitDraw(data) {
         return this.leafletService.setBoundary(data);
     }
+    /**
+     * @description
+     * Removes the boundary limit for drawing
+     */
     removeLimitDraw() {
         this.leafletService.removeBoundary();
     }
@@ -896,35 +949,138 @@ class AXMapComponent {
     flyTo(location, zoom, setMarker, duration) {
         this.leafletService.flyTo(location, zoom, setMarker, duration);
     }
+    /**
+     * Initialize the map once rendering is complete
+     */
     #initMap;
+    /**
+     * Setup map event listeners
+     */
+    setupMapEvents() {
+        // Map movement events
+        this.onLatitudeChangedSubscription = this.leafletService.onLatitudeChanged.subscribe((latitude) => {
+            this.latitude.set(latitude);
+        });
+        this.onLongitudeChangedSubscription = this.leafletService.onLongitudeChanged.subscribe((longitude) => {
+            this.longitude.set(longitude);
+        });
+        this.onZoomChangedSubscription = this.leafletService.onZoomChanged.subscribe((zoom) => {
+            this.zoomLevel.set(zoom);
+        });
+    }
+    /**
+     * Effect for locator control
+     */
     #locatorEffect;
-    #drawEffect;
-    unsubscribeFromEvents() {
+    /**
+     * Effect for draw control
+     */
+    #drawControlEffect;
+    /**
+     * Setup draw event subscriptions
+     */
+    setupDrawEventSubscriptions() {
+        // Marker changed events
+        if (!this.onMarkerChangedSubscription) {
+            this.onMarkerChangedSubscription = this.leafletService.onMarkerChanged.subscribe((markers) => {
+                this.onMarkerChanged.emit(markers);
+                if (this.fitToDraw()) {
+                    this.fitBoundsToDrawItems();
+                }
+            });
+        }
+        // Marker added events
+        if (!this.onMarkerAddedSubscription) {
+            this.onMarkerAddedSubscription = this.leafletService.onMarkerAdded.subscribe((marker) => {
+                this.onMarkerAdded.emit(marker);
+                if (this.fitToDraw()) {
+                    this.fitBoundsToDrawItems();
+                }
+            });
+        }
+        // Polygon changed events
+        if (!this.onPolygonChangedSubscription) {
+            this.onPolygonChangedSubscription = this.leafletService.onPolygonChanged.subscribe((polygons) => {
+                this.onPolygonChanged.emit(polygons);
+                if (this.fitToDraw()) {
+                    this.fitBoundsToDrawItems();
+                }
+            });
+        }
+        // Polygon added events
+        if (!this.onPolygonAddedSubscription) {
+            this.onPolygonAddedSubscription = this.leafletService.onPolygonAdded.subscribe((polygon) => {
+                this.onPolygonAdded.emit(polygon);
+                if (this.fitToDraw()) {
+                    this.fitBoundsToDrawItems();
+                }
+            });
+        }
+    }
+    /**
+     * Unsubscribe from draw events
+     */
+    unsubscribeFromDrawEvents() {
         if (this.onMarkerChangedSubscription) {
             this.onMarkerChangedSubscription.unsubscribe();
-            this.onMarkerChangedSubscription = null;
+            this.onMarkerChangedSubscription = undefined;
         }
         if (this.onMarkerAddedSubscription) {
             this.onMarkerAddedSubscription.unsubscribe();
-            this.onMarkerAddedSubscription = null;
+            this.onMarkerAddedSubscription = undefined;
         }
         if (this.onPolygonChangedSubscription) {
             this.onPolygonChangedSubscription.unsubscribe();
-            this.onPolygonChangedSubscription = null;
+            this.onPolygonChangedSubscription = undefined;
         }
         if (this.onPolygonAddedSubscription) {
             this.onPolygonAddedSubscription.unsubscribe();
-            this.onPolygonAddedSubscription = null;
+            this.onPolygonAddedSubscription = undefined;
         }
     }
+    /**
+     * Effect for zoom level changes
+     */
     #zoomEffect;
+    /**
+     * Effect for limit draw changes
+     */
     #limitDrawEffect;
+    /**
+     * Effect for markers changes
+     */
+    #markersEffect;
+    /**
+     * Effect for polygons changes
+     */
+    #polygonsEffect;
+    /**
+     * Effect for fitToDraw changes
+     */
+    #fitToDrawEffect;
+    /**
+     * Effect for center changes (lat/long)
+     */
     #centerEffect;
     /**
-     * @description
-     * Cleanup function that destroys the map when the component is destroyed.
+     * Cleanup function that destroys the map and unsubscribes from all subscriptions.
      */
     ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this.unsubscribeFromDrawEvents();
+        if (this.onLocationFoundSubscription) {
+            this.onLocationFoundSubscription.unsubscribe();
+        }
+        if (this.onLatitudeChangedSubscription) {
+            this.onLatitudeChangedSubscription.unsubscribe();
+        }
+        if (this.onLongitudeChangedSubscription) {
+            this.onLongitudeChangedSubscription.unsubscribe();
+        }
+        if (this.onZoomChangedSubscription) {
+            this.onZoomChangedSubscription.unsubscribe();
+        }
+        // Destroy the map
         this.leafletService.destroyMap();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }