fix: fixed zoom limits in DbxFormMapboxZoomFieldComponent

apps/demo/src/app/modules/doc/modules/extension/container/mapbox.component.ts

@@ -118,9 +118,11 @@ export class DocExtensionMapboxComponent implements OnInit, OnDestroy {
     }),
     mapboxZoomField({
       key: 'zoom',
-      description: 'This is a zoom picker synchronized with the big map.',
+      description: 'This is a zoom picker synchronized with the big map. It has a min and max zoom.',
       showMap: false,
-      zoomStep: 0.5
+      zoomStep: 0.5,
+      minZoom: 6,
+      maxZoom: 15
     })
   ];
 

packages/dbx-form/mapbox/src/lib/field/zoom/zoom.field.component.ts

@@ -8,7 +8,7 @@ import { filterMaybe, SubscriptionObject } from '@dereekb/rxjs';
 import { ZoomLevel, Maybe, LatLngPoint, latLngPoint } from '@dereekb/util';
 import { DbxMapboxService, DbxMapboxMapStore, MapboxZoomLevel, provideMapboxStoreIfParentIsUnavailable, mapboxZoomLevel, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL } from '@dereekb/dbx-web/mapbox';
 
-export interface DbxFormMapboxZoomComponentFieldProps extends FormlyFieldProps {
+export interface DbxFormMapboxZoomComponentFieldProps extends Omit<FormlyFieldProps, 'min' | 'max'> {
   /**
    * (Optional) Whether or not the show the map. Cases where this would be set false is if another map is being used.
    *
@@ -51,6 +51,8 @@ export interface DbxFormMapboxZoomComponentFieldProps extends FormlyFieldProps {
   styleUrls: ['../mapbox.field.component.scss']
 })
 export class DbxFormMapboxZoomFieldComponent<T extends DbxFormMapboxZoomComponentFieldProps = DbxFormMapboxZoomComponentFieldProps> extends FieldType<FieldTypeConfig<T>> implements OnInit, OnDestroy {
+  private _undoZoomLimit = false;
+
   readonly compactClass$ = mapCompactModeObs(this.compact?.mode$, {
     compact: 'dbx-mapbox-input-field-compact'
   });
@@ -117,6 +119,10 @@ export class DbxFormMapboxZoomFieldComponent<T extends DbxFormMapboxZoomComponen
     this._formControlObs.next(this.formControl);
     this._center.next(this.center);
 
+    // set/sync props for error messages
+    (this.props as FormlyFieldProps).min = this.minZoom;
+    (this.props as FormlyFieldProps).max = this.maxZoom;
+
     this.dbxMapboxMapStore.setZoom(this.zoom$);
 
     // Set center only if showMap is false.
@@ -130,11 +136,19 @@ export class DbxFormMapboxZoomFieldComponent<T extends DbxFormMapboxZoomComponen
       if (this.showMap) {
         this.dbxMapboxMapStore.setZoomDisabled();
       }
+    } else {
+      // set zoom limits
+      this.dbxMapboxMapStore.setZoomRange({ min: this.minZoom, max: this.maxZoom });
+
+      // flat to undo them later if not using the same map
+      this._undoZoomLimit = !this.showMap;
     }
 
     this._sub.subscription = this.dbxMapboxMapStore.zoom$.subscribe((zoom) => {
       if (!this.isReadonlyOrDisabled) {
-        this.ngZone.run(() => this.setValue(zoom));
+        this.ngZone.run(() => {
+          this.setValue(zoom);
+        });
       }
     });
   }
@@ -144,6 +158,10 @@ export class DbxFormMapboxZoomFieldComponent<T extends DbxFormMapboxZoomComponen
     this._formControlObs.complete();
     this._center.complete();
     this._sub.destroy();
+
+    if (!this._undoZoomLimit) {
+      this.dbxMapboxMapStore.setZoomRange({});
+    }
   }
 
   setValue(zoom?: Maybe<ZoomLevel>) {

packages/dbx-web/mapbox/src/lib/mapbox.store.ts

@@ -5,7 +5,7 @@ import { ComponentStore } from '@ngrx/component-store';
 import { MapService } from 'ngx-mapbox-gl';
 import { defaultIfEmpty, distinctUntilChanged, filter, map, shareReplay, switchMap, tap, NEVER, Observable, of, Subscription, startWith, interval, first, combineLatest } from 'rxjs';
 import * as MapboxGl from 'mapbox-gl';
-import { DbxMapboxClickEvent, KnownMapboxStyle, MapboxBearing, MapboxEaseTo, MapboxFitBounds, MapboxFlyTo, MapboxJumpTo, MapboxResetNorth, MapboxResetNorthPitch, MapboxRotateTo, MapboxSnapToNorth, MapboxStyleConfig, MapboxZoomLevel } from './mapbox';
+import { DbxMapboxClickEvent, KnownMapboxStyle, MapboxBearing, MapboxEaseTo, MapboxFitBounds, MapboxFlyTo, MapboxJumpTo, MapboxResetNorth, MapboxResetNorthPitch, MapboxRotateTo, MapboxSnapToNorth, MapboxStyleConfig, MapboxZoomLevel, MapboxZoomLevelRange } from './mapbox';
 import { DbxMapboxService } from './mapbox.service';
 import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { mapboxViewportBoundFunction, MapboxViewportBoundFunction } from './mapbox.util';
@@ -206,6 +206,19 @@ export class DbxMapboxMapStore extends ComponentStore<DbxMapboxStoreState> imple
     );
   });
 
+  readonly setZoomRange = this.effect((input: Observable<Partial<MapboxZoomLevelRange>>) => {
+    return input.pipe(
+      switchMap((zoomRange: Partial<MapboxZoomLevelRange>) => {
+        return this.mapInstance$.pipe(
+          tap((map) => {
+            map.setMinZoom(zoomRange.min);
+            map.setMaxZoom(zoomRange.max);
+          })
+        );
+      })
+    );
+  });
+
   readonly setMinZoom = this.effect((input: Observable<MapboxZoomLevel>) => {
     return input.pipe(
       switchMap((zoom: MapboxZoomLevel) => {

packages/dbx-web/mapbox/src/lib/mapbox.ts

@@ -1,4 +1,4 @@
-import { LatLngPointInput, LatLngBoundInput, ZoomLevel } from '@dereekb/util';
+import { LatLngPointInput, LatLngBoundInput, ZoomLevel, ZoomLevelRange } from '@dereekb/util';
 import * as MapboxGl from 'mapbox-gl';
 
 export type KnownMapboxStyle = 'mapbox://styles/mapbox/streets-v11' | 'mapbox://styles/mapbox/outdoors-v11' | 'mapbox://styles/mapbox/light-v10' | 'mapbox://styles/mapbox/dark-v10' | 'mapbox://styles/mapbox/satellite-v9' | 'mapbox://styles/mapbox/satellite-streets-v11' | 'mapbox://styles/mapbox/navigation-day-v1' | 'mapbox://styles/mapbox/navigation-night-v1';
@@ -16,6 +16,7 @@ export const KNOWN_MAPBOX_STYLES: KnownMapboxStyle[] = [
 ];
 
 export type MapboxZoomLevel = ZoomLevel;
+export type MapboxZoomLevelRange = ZoomLevelRange;
 
 export const MAPBOX_MIN_ZOOM_LEVEL: MapboxZoomLevel = 0;
 export const MAPBOX_MAX_ZOOM_LEVEL: MapboxZoomLevel = 22;

packages/util/src/lib/value/zoom.ts

@@ -2,3 +2,11 @@
  * Camera zoom level.
  */
 export type ZoomLevel = number;
+
+/**
+ * Camera zoom level range.
+ */
+export interface ZoomLevelRange {
+  min: ZoomLevel;
+  max: ZoomLevel;
+}