@dereekb/dbx-web 9.24.41 → 9.24.43

package/fesm2020/dereekb-dbx-web-mapbox.mjs

@@ -3,8 +3,8 @@ import { Injectable, Host, Optional, Inject, Component, ChangeDetectionStrategy,
 import * as i2 from '@dereekb/dbx-core';
 import { safeMarkForCheck, safeDetectChanges, AbstractSubscriptionDirective, DbxInjectionComponentModule } from '@dereekb/dbx-core';
 import { asObservable, cleanup, filterMaybe, onTrueToFalse, SubscriptionObject, distinctUntilMapHasDifferentKeys } from '@dereekb/rxjs';
-import { distinctUntilChanged, switchMap, map, combineLatestWith, shareReplay, NEVER, defaultIfEmpty, tap, EMPTY, of, combineLatest, filter, first, startWith, interval, Subject, merge, throttleTime, BehaviorSubject } from 'rxjs';
-import { LAT_LONG_10M_PRECISION, latLngPointFunction, roundNumberToStepFunction, latLngBoundFunction, latLngBoundFromInput, filterUndefinedValues, isSameLatLngPoint, isSameVector, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, isSameLatLngBound, diffLatLngBoundPoints, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, latLngBoundCenterPoint, addLatLngPoints, vectorMinimumSizeResizeFunction, latLngPoint, DestroyFunctionObject, getValueFromGetter } from '@dereekb/util';
+import { distinctUntilChanged, switchMap, map, combineLatestWith, shareReplay, NEVER, defaultIfEmpty, tap, EMPTY, of, combineLatest, filter, first, startWith, throttleTime, interval, Subject, merge, BehaviorSubject } from 'rxjs';
+import { LAT_LONG_10M_PRECISION, latLngPointFunction, roundNumberToStepFunction, latLngBoundFunction, latLngBoundFromInput, filterUndefinedValues, isSameLatLngPoint, isSameVector, isSameLatLngBound, isDefaultLatLngPoint, swMostLatLngPoint, neMostLatLngPoint, diffLatLngBoundPoints, latLngBoundWrapsMap, isWithinLatLngBoundFunction, overlapsLatLngBoundFunction, latLngBoundCenterPoint, addLatLngPoints, vectorMinimumSizeResizeFunction, latLngPoint, DestroyFunctionObject, getValueFromGetter } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import * as MapboxGl from 'mapbox-gl';
 import { bounds } from '@mapbox/geo-viewport';
@@ -160,7 +160,11 @@ class DbxMapboxMapStore extends ComponentStore {
             zoomState: 'init',
             rotateState: 'init',
             retainContent: true,
-            useVirtualBound: true
+            useVirtualBound: true,
+            boundRefreshSettings: {
+                throttle: 300,
+                refreshType: 'always'
+            }
         });
         this.dbxMapboxService = dbxMapboxService;
         this.safeLatLngPoint = latLngPointFunction({ wrap: true });
@@ -413,6 +417,7 @@ class DbxMapboxMapStore extends ComponentStore {
             }
         }), distinctUntilChanged(), shareReplay(1));
         this.mapInstance$ = this.currentMapInstance$.pipe(filterMaybe());
+        this.boundRefreshSettings$ = this.state$.pipe(map((x) => x.boundRefreshSettings), shareReplay(1));
         this.moveState$ = this.state$.pipe(map((x) => x.moveState), distinctUntilChanged(), shareReplay(1));
         this.lifecycleState$ = this.state$.pipe(map((x) => x.lifecycleState), distinctUntilChanged(), shareReplay(1));
         this.zoomState$ = this.state$.pipe(map((x) => x.zoomState), distinctUntilChanged(), shareReplay(1));
@@ -463,11 +468,24 @@ class DbxMapboxMapStore extends ComponentStore {
             }
         }), shareReplay(1));
         this.virtualBound$ = this.viewportBoundFunction$.pipe(switchMap((fn) => {
-            return combineLatest([this.center$, this.zoom$]).pipe(map(([center, zoom]) => fn({
-                center,
-                zoom
-            })));
-        }), shareReplay(1));
+            return this.boundRefreshSettings$.pipe(switchMap((settings) => {
+                const { throttle: throttleMs, refreshType } = settings;
+                let obs;
+                switch (refreshType) {
+                    case 'always':
+                        obs = combineLatest([this.centerNow$, this.zoomNow$]);
+                        break;
+                    case 'when_not_rendering':
+                    case 'only_after_render_finishes':
+                        obs = this.bound$.pipe(switchMap(() => combineLatest([this.centerNow$, this.zoomNow$]))); // refresh whenever the bound refreshes
+                        break;
+                }
+                return obs.pipe(throttleTime(throttleMs, undefined, { leading: true, trailing: true }), map(([center, zoom]) => fn({
+                    center,
+                    zoom
+                })));
+            }));
+        }), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
         this.margin$ = this.state$.pipe(map((x) => x.margin), distinctUntilChanged((a, b) => a != null && b != null && a.fullWidth === b.fullWidth && a.leftMargin === b.leftMargin && a.rightMargin === b.rightMargin), shareReplay(1));
         this.reverseMargin$ = this.margin$.pipe(map((x) => {
             if (x) {
@@ -494,17 +512,32 @@ class DbxMapboxMapStore extends ComponentStore {
             const sw = isDefaultLatLngPoint(boundSw) ? swMostLatLngPoint() : { lat: boundSw.lat, lng: boundSw.lng };
             const ne = isDefaultLatLngPoint(boundNe) ? neMostLatLngPoint() : { lat: boundNe.lat, lng: boundNe.lng };
             return this.latLngBound(sw, ne);
-        }))), shareReplay(1))));
+        }))))), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
         this.rawBound$ = this.whenInitialized$.pipe(switchMap(() => {
-            return this.isRendering$.pipe(onTrueToFalse(), startWith(undefined), switchMap((x) => this.rawBoundNow$.pipe(first())), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
-        }));
+            return this.boundRefreshSettings$.pipe(switchMap((settings) => {
+                const { throttle: throttleMs, refreshType } = settings;
+                let obs;
+                switch (refreshType) {
+                    case 'always':
+                        obs = this.rawBoundNow$;
+                        break;
+                    case 'when_not_rendering':
+                        obs = this.isRendering$.pipe(switchMap((x) => (x ? EMPTY : this.rawBoundNow$)));
+                        break;
+                    case 'only_after_render_finishes':
+                        obs = this.isRendering$.pipe(onTrueToFalse(), switchMap((x) => this.rawBoundNow$.pipe(first())));
+                        break;
+                }
+                return obs.pipe(throttleTime(throttleMs, undefined, { leading: true, trailing: true }));
+            }));
+        }), distinctUntilChanged(isSameLatLngBound), shareReplay(1));
         this.useVirtualBound$ = this.state$.pipe(map((x) => x.useVirtualBound), distinctUntilChanged(), shareReplay(1));
         this.bound$ = this.useVirtualBound$.pipe(switchMap((useVirtualBound) => {
             if (useVirtualBound) {
                 return this.virtualBound$;
             }
             else {
-                return this.bound$;
+                return this.rawBound$;
             }
         }), shareReplay(1));
         this.boundSizing$ = this.bound$.pipe(map((x) => diffLatLngBoundPoints(x)), shareReplay(1));
@@ -532,7 +565,8 @@ class DbxMapboxMapStore extends ComponentStore {
         this.setMargin = this.updater((state, margin) => ({ ...state, margin: margin && (margin.rightMargin !== 0 || margin.leftMargin !== 0) ? margin : undefined }));
         this.setMinimumVirtualViewportSize = this.updater((state, minimumVirtualViewportSize) => ({ ...state, minimumVirtualViewportSize }));
         this.setUseVirtualBound = this.updater((state, useVirtualBound) => ({ ...state, useVirtualBound }));
-        this._setMapService = this.updater((state, mapService) => ({ mapService, moveState: 'init', lifecycleState: 'init', zoomState: 'init', rotateState: 'init', retainContent: state.retainContent, content: state.retainContent ? state.content : undefined, useVirtualBound: state.useVirtualBound }));
+        this.setBoundRefreshSettings = this.updater((state, boundRefreshSettings) => ({ ...state, boundRefreshSettings: { ...state.boundRefreshSettings, ...boundRefreshSettings } }));
+        this._setMapService = this.updater((state, mapService) => ({ mapService, moveState: 'init', lifecycleState: 'init', zoomState: 'init', rotateState: 'init', retainContent: state.retainContent, content: state.retainContent ? state.content : undefined, useVirtualBound: state.useVirtualBound, boundRefreshSettings: state.boundRefreshSettings }));
         this._setLifecycleState = this.updater((state, lifecycleState) => ({ ...state, lifecycleState }));
         this._setMoveState = this.updater((state, moveState) => ({ ...state, moveState }));
         this._setZoomState = this.updater((state, zoomState) => ({ ...state, zoomState }));