@dereekb/dbx-web 9.6.3 → 9.7.0

package/mapbox/lib/mapbox.marker.d.ts

@@ -0,0 +1,49 @@
+import { ClickableAnchor } from '@dereekb/dbx-core';
+import { Pixels, FactoryWithRequiredInput, LatLngInputRef } from '@dereekb/util';
+/**
+ * DbxMapboxMarkerSize. Numbers are converted to pixels.
+ */
+export declare type DbxMapboxMarkerSize = 'small' | 'medium' | 'large' | 'tall' | Pixels;
+export declare type DbxMapboxMarker = LatLngInputRef & {
+    /**
+     * icon
+     */
+    icon?: string;
+    /**
+     * label
+     */
+    label?: string;
+    /**
+     * Image URL
+     */
+    image?: string | FactoryWithRequiredInput<string, Pixels>;
+    /**
+     * Size of the marker.
+     */
+    size?: DbxMapboxMarkerSize;
+    /**
+     *
+     */
+    anchor?: ClickableAnchor;
+    /**
+     * Additional object styling
+     */
+    style?: object;
+};
+/**
+ * MapFunction that converts the input data to a DbxMapboxMarker.
+ */
+export declare type DbxMapboxMarkerFactory<T> = (value: T, index: number) => DbxMapboxMarker;
+/**
+ * Creates the styling for rendering a dot.
+ *
+ * @param background
+ * @param color
+ * @returns
+ */
+export declare function dbxMapboxColoredDotStyle(background: string, color?: string): {
+    background: string;
+    padding: string;
+    color: string;
+    'border-radius': string;
+};

package/mapbox/lib/mapbox.markers.component.d.ts

@@ -0,0 +1,21 @@
+import { Maybe } from '@dereekb/util';
+import { ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { DbxMapboxMarkerFactory } from './mapbox.marker';
+import * as i0 from "@angular/core";
+/**
+ * Component used to render a set of DbxMapboxMarker values from the input data and marker factory.
+ */
+export declare class DbxMapboxMarkersComponent<T> implements OnDestroy {
+    readonly cdRef: ChangeDetectorRef;
+    private _data;
+    private _markerFactory;
+    readonly markers$: import("rxjs").Observable<import("./mapbox.marker").DbxMapboxMarker[]>;
+    constructor(cdRef: ChangeDetectorRef);
+    get data(): Maybe<T[]>;
+    set data(data: Maybe<T[]>);
+    get markerFactory(): Maybe<DbxMapboxMarkerFactory<T>>;
+    set markerFactory(markerFactory: Maybe<DbxMapboxMarkerFactory<T>>);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxMapboxMarkersComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxMapboxMarkersComponent<any>, "dbx-mapbox-markers", never, { "data": "data"; "markerFactory": "markerFactory"; }, {}, never, never, false>;
+}

package/mapbox/lib/mapbox.module.d.ts

@@ -6,18 +6,19 @@ import * as i2 from "./mapbox.layout.component";
 import * as i3 from "./mapbox.layout.drawer.component";
 import * as i4 from "./mapbox.menu.component";
 import * as i5 from "./mapbox.marker.component";
-import * as i6 from "./mapbox.store.provide";
-import * as i7 from "@angular/common";
-import * as i8 from "@angular/material/sidenav";
-import * as i9 from "@dereekb/dbx-core";
-import * as i10 from "@angular/material/button";
-import * as i11 from "@angular/material/icon";
-import * as i12 from "angular-resize-event";
-import * as i13 from "@dereekb/dbx-web";
-import * as i14 from "ngx-mapbox-gl";
+import * as i6 from "./mapbox.markers.component";
+import * as i7 from "./mapbox.store.provide";
+import * as i8 from "@angular/common";
+import * as i9 from "@angular/material/sidenav";
+import * as i10 from "@dereekb/dbx-core";
+import * as i11 from "@angular/material/button";
+import * as i12 from "@angular/material/icon";
+import * as i13 from "angular-resize-event";
+import * as i14 from "@dereekb/dbx-web";
+import * as i15 from "ngx-mapbox-gl";
 export declare class DbxMapboxModule {
     static forRoot(config: DbxMapboxConfig): ModuleWithProviders<DbxMapboxModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxMapboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxMapboxModule, [typeof i1.DbxMapboxMapDirective, typeof i2.DbxMapboxLayoutComponent, typeof i3.DbxMapboxLayoutDrawerComponent, typeof i4.DbxMapboxMenuComponent, typeof i5.DbxMapboxMarkerComponent, typeof i6.DbxMapboxMapStoreInjectionBlockDirective], [typeof i7.CommonModule, typeof i8.MatSidenavModule, typeof i9.DbxInjectionComponentModule, typeof i10.MatButtonModule, typeof i11.MatIconModule, typeof i12.AngularResizeEventModule, typeof i13.DbxRouterAnchorModule, typeof i14.NgxMapboxGLModule], [typeof i1.DbxMapboxMapDirective, typeof i2.DbxMapboxLayoutComponent, typeof i3.DbxMapboxLayoutDrawerComponent, typeof i4.DbxMapboxMenuComponent, typeof i5.DbxMapboxMarkerComponent, typeof i6.DbxMapboxMapStoreInjectionBlockDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxMapboxModule, [typeof i1.DbxMapboxMapDirective, typeof i2.DbxMapboxLayoutComponent, typeof i3.DbxMapboxLayoutDrawerComponent, typeof i4.DbxMapboxMenuComponent, typeof i5.DbxMapboxMarkerComponent, typeof i6.DbxMapboxMarkersComponent, typeof i7.DbxMapboxMapStoreInjectionBlockDirective], [typeof i8.CommonModule, typeof i9.MatSidenavModule, typeof i10.DbxInjectionComponentModule, typeof i11.MatButtonModule, typeof i12.MatIconModule, typeof i13.AngularResizeEventModule, typeof i14.DbxRouterAnchorModule, typeof i15.NgxMapboxGLModule], [typeof i1.DbxMapboxMapDirective, typeof i2.DbxMapboxLayoutComponent, typeof i3.DbxMapboxLayoutDrawerComponent, typeof i4.DbxMapboxMenuComponent, typeof i5.DbxMapboxMarkerComponent, typeof i6.DbxMapboxMarkersComponent, typeof i7.DbxMapboxMapStoreInjectionBlockDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxMapboxModule>;
 }

package/mapbox/lib/mapbox.rxjs.d.ts

@@ -0,0 +1,44 @@
+import { ObservableOrValue } from '@dereekb/rxjs';
+import { LatLngPointInput, LatLngBound, LatLngBoundCheckFunction, RoundNumberToStepFunctionInput, LatLngPrecision, Maybe } from '@dereekb/util';
+import { OperatorFunction } from 'rxjs';
+import { MapboxZoomLevel } from './mapbox';
+import { MapboxViewportBoundFunction } from './mapbox.util';
+export interface FilterMapboxBoundConfig<T> {
+    boundFunctionObs: ObservableOrValue<MapboxViewportBoundFunction>;
+    boundDecisionObs: ObservableOrValue<LatLngBoundCheckFunction>;
+    /**
+     * Reads the value from the input item.
+     */
+    readValue: (value: T) => MapboxViewportBoundFunctionItemValue;
+    /**
+     * Minimum precision to retain. Defaults to LAT_LONG_10M_PRECISION
+     */
+    precision?: LatLngPrecision;
+    /**
+     * Amount of zoom rounding to use. By default rounds to 0.5 steps using "floor" in order to "round up" since zoom values are inversely proportional to bounds area.
+     */
+    zoomRounding?: RoundNumberToStepFunctionInput;
+    /**
+     * Default zoom level for item values that do not have an explicit zoom, or a zoom of 0.
+     *
+     * Defaults to 17, which can produce a viewport/bounds about the size of a park.
+     */
+    defaultZoom?: MapboxZoomLevel;
+}
+export interface MapboxViewportBoundFunctionItemValue {
+    readonly center: LatLngPointInput;
+    readonly zoom?: Maybe<MapboxZoomLevel>;
+}
+export interface MapboxViewportBoundFunctionItem<T> {
+    readonly value: T;
+    readonly bound: LatLngBound;
+}
+/**
+ * Filters the input objects based on their center and zoom values.
+ *
+ * This function caches the bounds computations for each of the input values.
+ *
+ * @param config
+ * @returns
+ */
+export declare function filterByMapboxViewportBound<T>(config: FilterMapboxBoundConfig<T>): OperatorFunction<T[], T[]>;

package/mapbox/lib/mapbox.store.d.ts

@@ -1,5 +1,5 @@
 import { OnDestroy } from '@angular/core';
-import { IsWithinLatLngBoundFunction, LatLngBound, LatLngPointInput, LatLngPoint, Maybe, OverlapsLatLngBoundFunction } from '@dereekb/util';
+import { IsWithinLatLngBoundFunction, LatLngBound, LatLngPointInput, LatLngPoint, Maybe, OverlapsLatLngBoundFunction, Vector } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import { MapService } from 'ngx-mapbox-gl';
 import { Observable, Subscription } from 'rxjs';
@@ -7,6 +7,7 @@ import * as MapboxGl from 'mapbox-gl';
 import { DbxMapboxClickEvent, MapboxEaseTo, MapboxFitBounds, MapboxFlyTo, MapboxJumpTo, MapboxResetNorth, MapboxResetNorthPitch, MapboxRotateTo, MapboxSnapToNorth, MapboxStyleConfig, MapboxZoomLevel } from './mapbox';
 import { DbxMapboxService } from './mapbox.service';
 import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { MapboxViewportBoundFunction } from './mapbox.util';
 import * as i0 from "@angular/core";
 export declare type MapboxMapLifecycleState = 'init' | 'load' | 'render' | 'idle';
 export declare type MapboxMapMoveState = 'init' | 'idle' | 'moving';
@@ -34,6 +35,10 @@ export interface DbxMapboxStoreState {
     moveState: MapboxMapMoveState;
     zoomState: MapboxMapZoomState;
     rotateState: MapboxMapRotateState;
+    /**
+     * Visual container size of the map.
+     */
+    mapCanvasSize?: Maybe<Vector>;
     /**
      * Latest click event
      */
@@ -70,6 +75,7 @@ export interface DbxMapboxStoreState {
  */
 export declare class DbxMapboxMapStore extends ComponentStore<DbxMapboxStoreState> implements OnDestroy {
     private readonly dbxMapboxService;
+    private safeLatLngPoint;
     private latLngPoint;
     private latLngBound;
     constructor(dbxMapboxService: DbxMapboxService);
@@ -129,6 +135,7 @@ export declare class DbxMapboxMapStore extends ComponentStore<DbxMapboxStoreStat
     readonly centerGivenMargin$: Observable<LatLngPoint>;
     readonly boundNow$: Observable<LatLngBound>;
     readonly bound$: Observable<LatLngBound>;
+    readonly boundSizing$: Observable<LatLngPoint>;
     readonly boundWrapsAroundWorld$: Observable<boolean>;
     readonly isWithinBoundFunction$: Observable<IsWithinLatLngBoundFunction>;
     readonly overlapsBoundFunction$: Observable<OverlapsLatLngBoundFunction>;
@@ -140,6 +147,9 @@ export declare class DbxMapboxMapStore extends ComponentStore<DbxMapboxStoreStat
     readonly bearing$: Observable<number>;
     readonly content$: Observable<Maybe<DbxInjectionComponentConfig<unknown>>>;
     readonly hasContent$: Observable<boolean>;
+    readonly currentMapCanvasSize$: Observable<Maybe<Vector>>;
+    readonly mapCanvasSize$: Observable<Vector>;
+    readonly viewportBoundFunction$: Observable<MapboxViewportBoundFunction>;
     readonly clickEvent$: Observable<Maybe<DbxMapboxClickEvent>>;
     readonly doubleClickEvent$: Observable<Maybe<DbxMapboxClickEvent>>;
     readonly rightClickEvent$: Observable<Maybe<DbxMapboxClickEvent>>;
@@ -149,6 +159,7 @@ export declare class DbxMapboxMapStore extends ComponentStore<DbxMapboxStoreStat
     private readonly _setMoveState;
     private readonly _setZoomState;
     private readonly _setRotateState;
+    private readonly _setMapCanvasSize;
     private readonly _setClickEvent;
     private readonly _setDoubleClickEvent;
     private readonly _setRightClickEvent;

package/mapbox/lib/mapbox.util.d.ts

@@ -0,0 +1,27 @@
+import { LatLngBound, LatLngPoint, Vector } from '@dereekb/util';
+import { MapboxTileSize, MapboxZoomLevel } from './mapbox';
+export interface MapboxViewportBoundFunctionConfig {
+    readonly mapCanvasSize: Vector;
+    /**
+     * Mapbox tilesize being used. Defaults to 512x512.
+     */
+    readonly tileSize?: MapboxTileSize;
+}
+/**
+ * Input for MapboxViewportBoundFunction.
+ */
+export interface MapboxViewportBoundFunctionInput {
+    /**
+     * Center of the viewport
+     */
+    readonly center: LatLngPoint;
+    /**
+     * Zoom level
+     */
+    readonly zoom: MapboxZoomLevel;
+}
+/**
+ * Used to calculate the bounds of a view/object given the input MapboxViewportBoundFunctionInput.
+ */
+export declare type MapboxViewportBoundFunction = (input: MapboxViewportBoundFunctionInput) => LatLngBound;
+export declare function mapboxViewportBoundFunction(config: MapboxViewportBoundFunctionConfig): MapboxViewportBoundFunction;

package/mapbox/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@dereekb/dbx-web/mapbox",
-  "version": "9.6.3",
+  "version": "9.7.0",
   "peerDependencies": {
     "@angular/common": "^14.1.0",
     "@angular/core": "^14.1.0",
     "rxjs": "^7.5.0",
-    "@dereekb/util": "9.6.3",
-    "@dereekb/dbx-web": "9.6.3",
+    "@dereekb/util": "9.7.0",
+    "@dereekb/dbx-web": "9.7.0",
     "ngx-mapbox-gl": "^9.1.0",
-    "mapbox-gl": "^2.9.2"
+    "mapbox-gl": "^2.9.2",
+    "@mapbox/geo-viewport": "git+https://git@github.com/dereekb/geo-viewport#165513972f87dca23a20c177f4d173edc51b5e2f"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "9.6.3",
+  "version": "9.7.0",
   "peerDependencies": {
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.0",
     "linkify-string": "4.0.0-beta.5",
     "linkifyjs": "^4.0.0-beta.5",
     "@angular/material": "^14.0.0",
-    "@dereekb/rxjs": "9.6.3",
-    "@dereekb/dbx-core": "9.6.3",
+    "@dereekb/rxjs": "9.7.0",
+    "@dereekb/dbx-core": "9.7.0",
     "angular-calendar": "^0.30.1",
     "@angular/flex-layout": "^14.0.0-beta.40",
     "ng-overlay-container": "^14.0.0",