@mappedin/viewer 0.16.4 → 0.16.5-405d2d3.0

package/dist/types/components/annotation-marker/index.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { Annotation } from '../../lib/sdk';
 type TAnnotationMarkerProps = {
-    annotationId: string;
+    annotation: Annotation;
+    backgroundColor: string;
     annotationSrc: string | undefined;
     size?: number;
 };

package/dist/types/components/common/utils.d.ts

@@ -1 +1,55 @@
+import { Place } from '../../lib/sdk';
+import { E_APP_STATE } from '../../lib/types/state';
 export declare const id: (...values: string[]) => string;
+type TGenerateGlobalClassNamesOptions = {
+    state: E_APP_STATE;
+    selectedPlaces: Place[];
+    departures: Place[];
+};
+export declare const generateGlobalClassNames: ({ state, selectedPlaces, departures, }: TGenerateGlobalClassNamesOptions) => string;
+/**
+ * A utility function returning css that only applies when the provided {@link Place} is selected. Requires
+ * {@link generateGlobalClassNames} to be used to apply the correct class names to the root element.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = styled.div<{ place: Place }>`
+ * 	// Change the background color when "place" is selected
+ * 	${({place}) => isSelected(place)`
+ * 		background-color: red;
+ * 	`}
+ * `;
+ * ```
+ */
+export declare const isSelected: (place: Place) => (...args: any[]) => string;
+/**
+ * A utility function returning css that only applies when the provided {@link Place} is a departure. Requires
+ * {@link generateGlobalClassNames} to be used to apply the correct class names to the root element.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = styled.div<{ place: Place }>`
+ * 	// Change the background color when "place" is a departure
+ * 	${({place}) => isDeparture(place)`
+ * 		background-color: red;
+ * 	`}
+ * `;
+ * ```
+ */
+export declare const isDeparture: (place: Place) => (...args: any[]) => string;
+/**
+ * A utility function returning css that only applies when the app is in the provided {@link E_APP_STATE}. Requires
+ * {@link generateGlobalClassNames} to be used to apply the correct class names to the root element.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = styled.div`
+ * 	// Change the background color when the app is in the "DIRECTIONS" state
+ * 	${isState(E_APP_STATE.DIRECTIONS)`
+ * 		background-color: red;
+ * 	`}
+ * `;
+ * ```
+ */
+export declare const isState: (state: E_APP_STATE) => (...args: any[]) => string;
+export {};

package/dist/types/components/common/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/directions/departure-modes.d.ts

@@ -2,6 +2,7 @@
 import { E_DEPARTURE_MODE } from '../../lib/types/directions';
 type TDepartureModes = {
     mode: E_DEPARTURE_MODE;
+    modes?: E_DEPARTURE_MODE[];
     onModeClick?: (mode: E_DEPARTURE_MODE) => void;
 };
 declare const DepartureModes: React.FC<TDepartureModes>;

package/dist/types/components/directions/index.d.ts

@@ -4,6 +4,7 @@ import { ComponentProps } from 'react';
 import DirectionsSearchBar from './directions-search-bar';
 type TDirectionsProps = {
     departureMode?: ComponentProps<typeof DepartureModes>['mode'];
+    departureModes?: ComponentProps<typeof DepartureModes>['modes'];
     departureQuery?: ComponentProps<typeof DirectionsSearchBar>['query'];
     onDepartureQueryChange?: ComponentProps<typeof DirectionsSearchBar>['onQueryChange'];
     onDepartureModeChange?: (mode: E_DEPARTURE_MODE) => void;

package/dist/types/components/main/index.d.ts

@@ -14,6 +14,7 @@ type TMainUIProps = {
     onSearchBarBlur?: ComponentProps<typeof SearchBar>['onBlur'];
     maxHeight?: number;
     departureMode?: ComponentProps<typeof Directions>['departureMode'];
+    departureModes?: ComponentProps<typeof Directions>['departureModes'];
     onDepartureModeChange?: ComponentProps<typeof Directions>['onDepartureModeChange'];
     departureQuery?: ComponentProps<typeof Directions>['departureQuery'];
     onDepartureQueryChange?: ComponentProps<typeof Directions>['onDepartureQueryChange'];

package/dist/types/components/main/utils.d.ts

@@ -0,0 +1 @@
+export declare const MAIN_UI_DEFAULT_WIDTH_DESKTOP = 320;

package/dist/types/lib/hooks/use-deep-focus.d.ts

@@ -1,11 +1,12 @@
 import { FocusEvent } from 'react';
 type TUseDeepFocusProps = {
     onBlur?: () => void;
+    debug?: boolean;
 };
 /**
  * Control when the focus is deep (i.e. when the focus is on the container or any of its children).
  */
-declare const useDeepFocus: ({ onBlur }?: TUseDeepFocusProps) => {
+declare const useDeepFocus: ({ onBlur, debug }?: TUseDeepFocusProps) => {
     isFocused: boolean;
     onContainerBlur: (event?: FocusEvent) => void;
     onContainerFocus: () => void;

package/dist/types/lib/hooks/use-resize.d.ts

@@ -1,11 +1,13 @@
 type TUseResizeProps = {
     resizeWidth?: boolean;
     resizeHeight?: boolean;
+    maxHeight?: number;
+    maxWidth?: number;
 };
 /**
  * Update the width and height of a wrapper element based on the size of its children.
  */
-declare const useResize: ({ resizeWidth, resizeHeight }?: TUseResizeProps) => {
+declare const useResize: ({ resizeWidth, resizeHeight, maxHeight, maxWidth }?: TUseResizeProps) => {
     contentRef: (ref: unknown) => void;
     wrapperRef: (ref: unknown) => void;
 };

package/dist/types/lib/sdk/index.d.ts

@@ -1,8 +1,8 @@
 import { MapData, Space, MapObject, PointOfInterest, Connection, Annotation, Coordinate, Door } from '@mappedin/mappedin-js';
 export declare const loadData: (mapId: string, url?: string) => Promise<MapData>;
 export declare const loadAnnotationAsset: (annotation: Annotation) => string | undefined;
-export declare const isOneOf: <T extends typeof Space | typeof PointOfInterest | typeof Connection | typeof MapObject | typeof Door | typeof Coordinate>(types: T[], object: object) => object is InstanceType<T>;
-export declare const PLACE_TYPES: (typeof Space | typeof PointOfInterest | typeof Connection | typeof MapObject | typeof Door | typeof Coordinate)[];
+export declare const isOneOf: <T extends typeof Space | typeof PointOfInterest | typeof Connection | typeof MapObject | typeof Door | typeof Coordinate | typeof Annotation>(types: T[], object: object) => object is InstanceType<T>;
+export declare const PLACE_TYPES: (typeof Space | typeof PointOfInterest | typeof Connection | typeof MapObject | typeof Door | typeof Coordinate | typeof Annotation)[];
 export type PlaceType = (typeof PLACE_TYPES)[number];
 export type Place = InstanceType<PlaceType>;
 export declare const GEOMETRY_TYPES: (typeof Space | typeof MapObject)[];

package/dist/types/lib/utils/animation-utils.d.ts

@@ -1,5 +1,5 @@
-export declare const ANIMATION_DURATION_MS = 125;
-export declare const SCHEDULER_TIMEOUT_MS = 2000;
+export declare let ANIMATION_DURATION_MS: number;
+export declare const SCHEDULER_TIMEOUT_MS = 500;
 /**
  * Simple class to help with scheduling expensive functions against high priority
  * UI animations.
@@ -31,7 +31,9 @@ declare class AnimationScheduler {
  * {@link AnimationScheduler} instance to be used throughout the application.
  */
 export declare const animationScheduler: AnimationScheduler;
-export declare const getTransitionPropsForTaskScheduler: (animationName: string) => {
+export declare const getTransitionPropsForTaskScheduler: (animationName: string, options?: {
+    debug?: boolean;
+}) => {
     onEnter: () => void;
     onEntered: () => void;
     onExit: () => void;

package/dist/types/lib/utils/color-utils.d.ts

@@ -2,3 +2,4 @@ export declare const hexToRGB: (hex: string) => [number, number, number];
 export declare const RGBToHex: (color: [number, number, number]) => string;
 export declare const mixColors: (color1: string, color2: string, ratio: number) => string;
 export declare const opacityToHex: (opacity: number) => string;
+export declare const extractTopLeftPixelColor: (src: string) => Promise<string>;

package/dist/types/lib/utils/data-utils.d.ts

@@ -1,4 +1,4 @@
-import { Place, Coordinate, MapData, Geometry } from '../sdk';
+import { Annotation, Place, Coordinate, MapData, Geometry, TNavigationTarget } from '../sdk';
 /**
  * Whether the location can be assumed to be a washroom
  */
@@ -9,6 +9,7 @@ export declare const isWashroom: (place: Place) => boolean;
  */
 export declare const hasMetaData: (place: Place) => boolean;
 export declare const getCategoryName: (place: Place) => string;
+export declare const getAnnotationName: (annotation: Annotation) => string;
 type TGetDisplayNameForPlaceOptions = {
     fallbackToCategoryName?: boolean;
 };
@@ -26,6 +27,12 @@ export declare const getDisplayNameForPlaces: (places: Place[]) => string;
  * that is exactly 0,0 is the result of some sort of invalid data.
  */
 export declare const isValidPlace: (place: Place) => boolean;
+/**
+ * Abstraction for getting navigation target for places. Any place should technically be fine to use
+ * as a navigation target, but sometimes the SDK types are stale, and sometimes certain behaviours
+ * yield better results.
+ */
+export declare const getNavigationTargetForPlaces: (places: Place[]) => TNavigationTarget | TNavigationTarget[];
 type TProcessedPlaces = {
     places: Exclude<Place, Coordinate>[];
     placesById: Record<string, Exclude<Place, Coordinate>>;

package/dist/types/lib/utils/object-utils.d.ts

@@ -0,0 +1,9 @@
+type ArrayKeys<T> = Exclude<{
+    [K in keyof T]: Required<T>[K] extends Array<unknown> ? K : never;
+}[keyof T], undefined>;
+type ArrayValues<T> = Required<T>[ArrayKeys<T>] extends Array<infer U> ? U : never;
+/**
+ * Push a value to an array property of an object, creating the array if it doesn't exist.
+ */
+export declare const safePush: <T extends object>(object: T, key: Exclude<{ [K in keyof T]: Required<T>[K] extends unknown[] ? K : never; }[keyof T], undefined>, value: ArrayValues<T>) => void;
+export {};

package/dist/types/lib/utils/object-utils.test-d.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/lib/utils/object-utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/stores/map-store/controllers/camera.d.ts

@@ -1,6 +1,6 @@
 import type RootStore from '../../root-store';
 import type MapStore from '..';
-import { MapView, TCameraAnimationOptions, TEvents } from '../../../lib/sdk';
+import { MapView, Place, TCameraAnimationOptions, TEvents } from '../../../lib/sdk';
 export declare const ZOOM_FACTOR = 1.025;
 export declare const TILT_FACTOR = 1.05;
 export declare const CAMERA_ANIMATION_OPTIONS: TCameraAnimationOptions;
@@ -20,7 +20,7 @@ declare class CameraController {
     handleCameraChange(payload?: TEvents['camera-change']): void;
     handleUserInteractionStart(): void;
     handleUserInteractionEnd(): void;
-    focusOn(...[targets, options]: Parameters<MapView['Camera']['focusOn']>): Promise<void>;
+    focusOn(targets: Place | Place[], options?: Parameters<MapView['Camera']['focusOn']>[1]): Promise<void>;
     zoomIn(): Promise<void>;
     zoomOut(): Promise<void>;
     resetZoom(): Promise<void>;

package/dist/types/stores/map-store/controllers/labels.d.ts

@@ -6,7 +6,7 @@ declare class LabelsController {
     private mapStore;
     private reactionDisposers;
     private state;
-    locationByLabelId: Record<string, Place>;
+    placeByLabelId: Record<string, Place>;
     constructor({ rootStore, mapStore }: {
         rootStore: RootStore;
         mapStore: MapStore;

package/dist/types/stores/map-store/controllers/markers.d.ts

@@ -4,17 +4,21 @@ declare class MarkersController {
     private rootStore;
     private mapStore;
     private reactionDisposers;
-    markersVisible: boolean;
+    private markersVisible;
     private sdkMarkersByKey;
     constructor({ rootStore, mapStore }: {
         rootStore: RootStore;
         mapStore: MapStore;
     });
     private get annotationMarkers();
+    private get meMarkers();
     private get selectionMarkers();
+    private get directionsMarkers();
     private get currentMarkers();
     private getMarkerColor;
     private handleZoomChange;
+    private addMarker;
+    private removeMarker;
     private updateMarkers;
     cleanup(): void;
 }

package/dist/types/stores/map-store/controllers/markers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/stores/root-store/index.d.ts

@@ -25,17 +25,18 @@ declare class RootStore {
     uiStore: UIStore;
     mapStore: MapStore;
     departureMode: E_DEPARTURE_MODE;
-    isAppMobile: boolean;
+    isAppMobile: any;
     readonly places: Exclude<Place, Coordinate>[];
     readonly placesById: Record<string, Exclude<Place, Coordinate>>;
     readonly placesByNames: Record<string, Exclude<Place, Coordinate>[]>;
     readonly placesByFloorId: Record<string, Exclude<Place, Coordinate>[]>;
     readonly geometries: Geometry[];
     readonly geometriesById: Record<string, Geometry>;
-    constructor({ router, data, startupOptions, }: {
+    constructor({ router, data, startupOptions, isMobile, }: {
         router: RouterStore;
         data: MapData;
         startupOptions: TStartViewerOptions | TStartViewerWithLocalDataOptions;
+        isMobile: boolean;
     });
     private getInitialDepartureMode;
     private syncState;

package/dist/types/stores/ui-store/index.d.ts

@@ -34,11 +34,12 @@ declare class UIStore {
     get openAppButtonVisible(): boolean;
     get tiltControlsVisible(): boolean;
     get zoomControlsVisible(): boolean;
-    get shareButtonVisible(): boolean;
+    get shareButtonVisible(): any;
     get mainUIVisible(): boolean;
     get appPadding(): 20 | 0 | 15;
     get makerPopUpVisible(): boolean;
     get metadataCardVisible(): boolean;
+    get availableDepartureModes(): E_DEPARTURE_MODE[];
     dismissMakerPopUp(): void;
     setTheme(theme: TTheme): void;
     setOverrideShareButtonHandler(handler?: () => void): void;

package/dist/types/test-utils/test-mocks.d.ts

@@ -4,5 +4,6 @@ export type TMapViewWithTestUtilities = MapView & {
     __test: {
         subscribers: Record<string, ((...args: any[]) => void)[]>;
         labels: SDK.Label[];
+        markers: SDK.Marker[];
     };
 };

package/dist/types/test-utils/test-with-map.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="@mappedin/mappedin-js" />
 import RootStore from '../stores/root-store';
-import { InitialEntry } from 'history';
 import { ParsedMVF } from '@mappedin/mvf';
 import { MapData } from '../lib/sdk';
 import { TStartViewerOptions, TStartViewerWithLocalDataOptions } from '../lib/types/options';
 type TTestWithMapOptions = {
     startupOptions?: TStartViewerOptions | TStartViewerWithLocalDataOptions;
-    initialState?: InitialEntry | ((data: MapData) => InitialEntry);
+    initialState?: string | ((data: MapData) => string);
+    isMobile?: boolean;
 };
 export declare const testWithMap: (venueFileName?: string, options?: TTestWithMapOptions) => Promise<{
     rootStore: RootStore;
@@ -14,6 +14,7 @@ export declare const testWithMap: (venueFileName?: string, options?: TTestWithMa
     mapViewTestUtilities: {
         subscribers: Record<string, ((...args: any[]) => void)[]>;
         labels: import("@mappedin/mappedin-js/maker/src/map-view-objects/label").Label[];
+        markers: import("@mappedin/mappedin-js/maker/src/map-view-objects/marker").Marker[];
     };
     mapEl: HTMLDivElement;
     data: MapData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mappedin/viewer",
-  "version": "0.16.4",
+  "version": "0.16.5-405d2d3.0",
   "type": "module",
   "browser": "./dist/index.js",
   "license": "UNLICENSED",
@@ -19,9 +19,11 @@
   "devDependencies": {
     "@ladle/react": "^2.17.2",
     "@mappedin/maker-icons": "1.0.0-fe4ca2f",
-    "@mappedin/mappedin-js": "6.0.1-alpha.7-canary-V5.ddcba63d",
+    "@mappedin/mappedin-js": "6.0.1-alpha.11-canary-V5.26bada14",
     "@mappedin/mvf": "2.0.1-c7526c3.0",
+    "@testing-library/react": "^14.2.2",
     "@testing-library/react-hooks": "^8.0.1",
+    "@types/lodash.isequal": "^4.5.8",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/react-transition-group": "^4.4.10",