@c8y/ngx-components 1023.28.5 → 1023.37.0

package/fesm2022/c8y-ngx-components-map.mjs

@@ -5,7 +5,7 @@ import { sortByPriority, ManagedObjectRealtimeService, globalAutoRefreshLoading,
 import * as i3 from '@ngx-translate/core';
 import * as i4 from 'rxjs';
 import { of, combineLatest, defer, firstValueFrom, NEVER, BehaviorSubject, Subject, fromEvent, merge, from } from 'rxjs';
-import { map, first, takeUntil, scan, filter, switchMap, tap, mergeMap, catchError, debounceTime, skip } from 'rxjs/operators';
+import { map, first, takeUntil, scan, filter, switchMap, tap, mergeMap, catchError, take, debounceTime, skip } from 'rxjs/operators';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1 from '@c8y/client';
 import { QueriesUtil } from '@c8y/client';
@@ -85,6 +85,19 @@ const defaultMapConfig = {
 const defaultFitBoundsOptions = {
     padding: [50, 50]
 };
+/**
+ * Extension of QueriesUtil to use decimal literals instead of float literals.
+ * Used for queries involving longitude and latitude to avoid precision issues.
+ */
+class QueriesUtilDecimalExtension extends QueriesUtil {
+    useAsFloat(operand) {
+        operand = this.quoteString(operand);
+        if (typeof operand === 'number') {
+            return `${operand}d`;
+        }
+        return operand;
+    }
+}
 
 class MapService {
     /**
@@ -200,25 +213,25 @@ class MapService {
     /**
      * Counts all managed objects in a given bound with a c8y_Position fragment.
      * @param bound The lat lng bound to request the managed objects for.
-     * @param isinhierarchyofMO The group managed object of which direct children should be searched for.
+     * @param isInHierarchyOfMO The group managed object of which direct children should be searched for.
      * @returns The number of all position managed objects in the given bound (and group).
      */
-    async getPositionMOsFromBoundCount(bound, isinhierarchyofMO) {
-        return this.getPositionMOsFromBound(bound, isinhierarchyofMO, true);
+    async getPositionMOsFromBoundCount(bound, isInHierarchyOfMO) {
+        return this.getPositionMOsFromBound(bound, isInHierarchyOfMO, true);
     }
-    async getPositionMOsFromBound(bound, isinhierarchyofMO, count = false) {
+    async getPositionMOsFromBound(bound, isInHierarchyOfMO, count = false) {
         const { lat: latMin, lng: lngMinRaw } = bound.getSouthWest();
         const { lat: latMax, lng: lngMaxRaw } = bound.getNorthEast();
         const lngMin = lngMaxRaw - lngMinRaw > 360 ? -180 : this.normalizeLongitude(lngMinRaw);
         const lngMax = lngMaxRaw - lngMinRaw > 360 ? 180 : this.normalizeLongitude(lngMaxRaw);
         const filterObjWithCoordinates = {
             __and: [
-                ...(isinhierarchyofMO
+                ...(isInHierarchyOfMO
                     ? [
                         {
                             __or: [
-                                { id: isinhierarchyofMO.id },
-                                await this.childrenOfGroupFilter(isinhierarchyofMO)
+                                { id: isInHierarchyOfMO.id },
+                                await this.childrenOfGroupFilter(isInHierarchyOfMO)
                             ]
                         }
                     ]
@@ -287,15 +300,15 @@ class MapService {
     }
     /**
      * Returns all managed object with a c8y_Position fragment.
-     * @param isinhierarchyofMO The group managed object of which direct children should be searched for.
+     * @param isInHierarchyOfMO The group managed object of which direct children should be searched for.
      * @param pageSize Defines how many results should be returned.
      * @returns The managed objects with position.
      */
-    async getAllPositionMOs(isinhierarchyofMO, pageSize = 500) {
-        const childrenFilter = isinhierarchyofMO
-            ? await this.childrenOfGroupFilter(isinhierarchyofMO)
+    async getAllPositionMOs(isInHierarchyOfMO, pageSize = 500) {
+        const childrenFilter = isInHierarchyOfMO
+            ? await this.childrenOfGroupFilter(isInHierarchyOfMO)
             : undefined;
-        const orValue = childrenFilter ? [{ id: isinhierarchyofMO.id }, childrenFilter] : undefined;
+        const orValue = childrenFilter ? [{ id: isInHierarchyOfMO.id }, childrenFilter] : undefined;
         const queryObj = {
             __filter: {
                 __and: [{ __has: 'c8y_Position' }],
@@ -315,31 +328,27 @@ class MapService {
             data: data
         };
     }
+    /**
+     * Gets the bounds of all assets, optionally within a group.
+     * @param isInHierarchyOfMO Is inhierachy of managed object to limit the assets to a group.
+     * @returns The bounds of all assets.
+     */
+    async getAllBounds(isInHierarchyOfMO) {
+        return this.getBounds('query', isInHierarchyOfMO);
+    }
     /**
      * Determines a rectangular geographical area based on the positions of all devices.
      *
      * @returns A [[LatLngBounds]] object fitting all devices' geo positions.
      */
     async getAllDevicesBounds() {
-        const filter = (coord, order) => ({
-            pageSize: 1,
-            q: `$filter=has(c8y_Position) $orderby=c8y_Position.${coord} ${order}`
-        });
-        const filterReverse = (op, order) => ({
-            pageSize: 1,
-            q: `$filter=has(c8y_Position) and c8y_Position.lng ${op} 0d $orderby=c8y_Position.lng ${order}`
-        });
-        const [latMin, latMax, lngMin, lngMax, lngRevMin, lngRevMax] = await Promise.all([
-            this.inventory.list(filter('lat', 'asc')),
-            this.inventory.list(filter('lat', 'desc')),
-            this.inventory.list(filter('lng', 'asc')),
-            this.inventory.list(filter('lng', 'desc')),
-            this.inventory.list(filterReverse('gt', 'asc')),
-            this.inventory.list(filterReverse('lt', 'desc'))
-        ]).then(result => result.map(r => get(r.data, '[0].c8y_Position')));
-        const shiftWorld = (lngRevMin?.lng ?? 0) - (lngRevMax?.lng ?? 0) > 180;
-        return latLngBounds(latLng(latMin?.lat, shiftWorld ? lngRevMin?.lng : lngMin?.lng), latLng(latMax?.lat, shiftWorld ? lngRevMax?.lng + 360 : lngMax?.lng));
+        return this.getBounds('q');
     }
+    /**
+     * Calculates the bounding box that contains all given assets.
+     * @param assets The assets to calculate the bounds for.
+     * @returns The calculated bounds or undefined if no valid positions are found.
+     */
     async getAssetsBounds(assets) {
         const leaflet = await this.getLeaflet();
         const bounds = leaflet.latLngBounds([]);
@@ -423,6 +432,66 @@ class MapService {
         }
         return { __bygroupid: mo.id };
     }
+    /**
+     * Internal method to calculate bounds based on position coordinates.
+     * @param queryName The query parameter name to use ('q' or 'query'). Use q to limit to devices only.
+     * @param isInHierarchyOfMO Optional managed object to limit the assets to a group.
+     * @returns The calculated bounds
+     */
+    async getBounds(queryName, isInHierarchyOfMO) {
+        const childrenFilter = isInHierarchyOfMO
+            ? await this.childrenOfGroupFilter(isInHierarchyOfMO)
+            : undefined;
+        const filter = (coord, order) => ({
+            pageSize: 1,
+            [queryName]: new QueriesUtil().buildQuery({
+                __filter: {
+                    __and: [
+                        childrenFilter,
+                        {
+                            __has: 'c8y_Position'
+                        }
+                    ].filter(Boolean)
+                },
+                __orderby: [
+                    {
+                        [`c8y_Position.${coord}`]: order === 'asc' ? 1 : -1
+                    }
+                ]
+            })
+        });
+        const filterReverse = (op, order) => ({
+            pageSize: 1,
+            [queryName]: new QueriesUtilDecimalExtension().buildQuery({
+                __filter: {
+                    __and: [
+                        childrenFilter,
+                        {
+                            __has: 'c8y_Position',
+                            [`c8y_Position.lng`]: {
+                                [`__${op}`]: 0
+                            }
+                        }
+                    ].filter(Boolean)
+                },
+                __orderby: [
+                    {
+                        [`c8y_Position.lng`]: order === 'asc' ? 1 : -1
+                    }
+                ]
+            })
+        });
+        const [latMin, latMax, lngMin, lngMax, lngRevMin, lngRevMax] = await Promise.all([
+            this.inventory.list(filter('lat', 'asc')),
+            this.inventory.list(filter('lat', 'desc')),
+            this.inventory.list(filter('lng', 'asc')),
+            this.inventory.list(filter('lng', 'desc')),
+            this.inventory.list(filterReverse('gt', 'asc')),
+            this.inventory.list(filterReverse('lt', 'desc'))
+        ]).then(result => result.map(r => get(r.data, '[0].c8y_Position')));
+        const shiftWorld = (lngRevMin?.lng ?? 0) - (lngRevMax?.lng ?? 0) > 180;
+        return latLngBounds(latLng(latMin?.lat, shiftWorld ? lngRevMin?.lng : lngMin?.lng), latLng(latMax?.lat, shiftWorld ? lngRevMax?.lng + 360 : lngMax?.lng));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapService, deps: [{ token: i1.InventoryService }, { token: i1$1.OptionsService }, { token: i1$1.ServiceRegistry }, { token: i1$1.FeatureCacheService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapService, providedIn: 'root' }); }
 }
@@ -906,6 +975,9 @@ class MapComponent {
         if (this.hasChanged(change, 'follow')) {
             this.moveToPositionOfMo(this.assets);
         }
+        if (this.hasChanged(change, 'bounds')) {
+            this.fitBounds(change.currentValue.bounds);
+        }
         if (this.hasChanged(change, 'disablePan') || this.hasChanged(change, 'disableZoom')) {
             this.toggleControls();
         }
@@ -1085,6 +1157,10 @@ class ClusterMapComponent extends MapComponent {
         this.mapChange = new EventEmitter();
         /** @ignore */
         this.errorNotifier = new BehaviorSubject(null);
+        /**
+         * Indicates if the map was manually changed by the user (e.g., panned or zoomed).
+         */
+        this.isDirty = false;
         this.reloadTrigger$ = new BehaviorSubject(false);
         this.clusters = [];
         this.EVENT_THROTTLE_TIME = 750;
@@ -1511,7 +1587,25 @@ class ClusterMapComponent extends MapComponent {
         return Promise.all(updatePromise);
     }
     getMapChangeObservable() {
-        return merge(fromEvent(this.map, 'move'), fromEvent(this.map, 'moveend')).pipe(debounceTime(this.EVENT_THROTTLE_TIME), tap(event => {
+        // Set isDirty flag on user interactions
+        merge(fromEvent(this.map, 'mousedown'), fromEvent(this.mapElement?.nativeElement, 'wheel'), fromEvent(this.map, 'touchstart'))
+            .pipe(take(1), takeUntil(this.unsubscribeTrigger$))
+            .subscribe(() => {
+            this.isDirty = true;
+        });
+        let skipMoveEvent = false;
+        return merge(fromEvent(this.map, 'move'), fromEvent(this.map, 'moveend')).pipe(debounceTime(this.EVENT_THROTTLE_TIME), switchMap(async (event) => {
+            // If the map wasn't changed by user and we have autoFitToBounds, fit the bounds
+            // Skip this event and let the fitBounds-triggered event be processed instead
+            if (this.config.autoFitToBounds && !this.isDirty && !skipMoveEvent) {
+                const bounds = await this.mapService.getAllBounds(this.rootNode);
+                skipMoveEvent = true;
+                this.map.fitBounds(bounds, this.config.fitBoundsOptions || defaultFitBoundsOptions);
+                return null; // Skip current event
+            }
+            skipMoveEvent = false;
+            return event;
+        }), filter(event => event !== null), tap(event => {
             this.mapChange.emit(event);
         }), takeUntil(this.unsubscribeTrigger$));
     }
@@ -1851,5 +1945,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ClusterMap, ClusterMapComponent, ClusterSize, MAP_DEFAULT_CONFIG, MAP_TILE_LAYER, MapComponent, MapModule, MapPopupDirective, MapService, MapStatusComponent, MapTenantOptionKeys, defaultFitBoundsOptions, defaultLayer, defaultMapConfig, getC8yMarker };
+export { ClusterMap, ClusterMapComponent, ClusterSize, MAP_DEFAULT_CONFIG, MAP_TILE_LAYER, MapComponent, MapModule, MapPopupDirective, MapService, MapStatusComponent, MapTenantOptionKeys, QueriesUtilDecimalExtension, defaultFitBoundsOptions, defaultLayer, defaultMapConfig, getC8yMarker };
 //# sourceMappingURL=c8y-ngx-components-map.mjs.map