@osm-editor-kit/street-imagery-react 0.1.0-alpha.9 → 1.0.0

package/dist/chunk-XLBFXACK.js

@@ -0,0 +1,56 @@
+// src/panels/photoView.ts
+var REPORT_DELAY_MS = 200;
+var PANORAMAX_MIN_FOV = 5;
+var PANORAMAX_MAX_FOV = 90;
+var tanOfHalf = (degrees) => Math.tan(degrees * Math.PI / 360);
+var panoramaxZoomLevel = (verticalFov, horizontalFovOfPicture) => {
+  const maxFov = Math.min(horizontalFovOfPicture * 3 / 4, PANORAMAX_MAX_FOV);
+  const fov = horizontalFovOfPicture >= 360 ? verticalFov : tanOfHalf(verticalFov) / tanOfHalf(horizontalFovOfPicture) * horizontalFovOfPicture;
+  const level = (maxFov - fov) / (maxFov - PANORAMAX_MIN_FOV) * 100;
+  return Math.min(100, Math.max(0, level));
+};
+var viewKey = (view) => JSON.stringify(view, (_, value) => typeof value === "number" ? Number(value.toFixed(4)) : value);
+var createPhotoViewReporter = (read, report, delayMs = REPORT_DELAY_MS) => {
+  let timer;
+  let last = null;
+  let stopped = false;
+  const send = () => {
+    void read().then((view) => {
+      if (view && !stopped && viewKey(view) !== last) {
+        last = viewKey(view);
+        report(view);
+      }
+    }).catch(() => {
+    });
+  };
+  return {
+    viewChanged: () => {
+      clearTimeout(timer);
+      timer = setTimeout(send, delayMs);
+    },
+    stop: () => {
+      stopped = true;
+      clearTimeout(timer);
+    }
+  };
+};
+var watchMapillaryJsView = (viewer, read, report) => {
+  const reporter = createPhotoViewReporter(read, report);
+  const {
+    viewChanged
+  } = reporter;
+  viewer.on("image", viewChanged);
+  viewer.on("pov", viewChanged);
+  viewer.on("fov", viewChanged);
+  viewer.on("moveend", viewChanged);
+  viewChanged();
+  return () => {
+    reporter.stop();
+    viewer.off("image", viewChanged);
+    viewer.off("pov", viewChanged);
+    viewer.off("fov", viewChanged);
+    viewer.off("moveend", viewChanged);
+  };
+};
+
+export { createPhotoViewReporter, panoramaxZoomLevel, watchMapillaryJsView };

package/dist/filters/PhotoDateRangeFilter.d.ts

@@ -10,7 +10,10 @@ export type PhotoDateMarker = {
 export type PhotoDateRangeFilterProps = {
     /** The chosen range, days as `YYYY-MM-DD`. No `from` and no `to`: all dates. */
     value: DateRange;
-    /** Called when a handle is released, a year label is clicked or a date input changes. */
+    /**
+     * Called when a handle is released, the chart is clicked, a year label is clicked or a date
+     * input changes.
+     */
     onChange: (range: DateRange) => void;
     /**
      * Capture times (ms) of the photos to show as marks above the slider, usually all photos in

package/dist/filters/dateSliderPointer.d.ts

@@ -0,0 +1,21 @@
+import type { DateSliderPositions } from '@osm-editor-kit/street-imagery';
+export type DateSliderHandle = 'from' | 'to';
+/** Size of one step of the slider, in positions: about a day to a month, depending on the age. */
+export declare const DATE_SLIDER_STEP = 0.001;
+/** The handles as they show. */
+export declare const HANDLE_PX = 16;
+/** Position of a point `leftPx` from the start of the track, in steps like the native handles. */
+export declare const positionOnTrack: (leftPx: number, widthPx: number) => number;
+/**
+ * The handle a press takes. `null` when the handles overlap under the press: they can only move
+ * apart, so the direction of the drag decides (`handleOfDrag`), also when both are at one end.
+ */
+export declare const pressedHandle: (positions: DateSliderPositions, press: number, widthPx: number) => DateSliderHandle | null;
+export declare const handleOfDrag: (deltaPx: number) => DateSliderHandle;
+/** A drag keeps the distance between a grabbed handle and the pointer: the handle does not jump. */
+export declare const dragPositions: (start: DateSliderPositions, press: number, handle: DateSliderHandle, deltaPx: number, widthPx: number) => DateSliderPositions;
+/** A click or tap moves the nearer handle there, or does nothing on a handle itself. */
+export declare const tapPositions: (start: DateSliderPositions, press: number, widthPx: number) => {
+    handle: DateSliderHandle;
+    positions: DateSliderPositions | null;
+};

package/dist/hooks/useMapViewportBbox.d.ts

@@ -1,9 +1,7 @@
 import type { Bbox } from '@osm-editor-kit/street-imagery';
 /**
- * Live WGS84 bbox from a react-map-gl map instance.
+ * WGS84 bbox of a react-map-gl map, updated when a move of the map ends. The array stays the same
+ * object while the viewport is the same, so it works as a dependency and as a prop.
  * @param mapId - react-map-gl `<Map id=…>`
- * @param viewportTrigger - optional value that changes when the camera moves
- *   (e.g. URL map param) so the bbox recomputes after pan/zoom without relying
- *   on MapLibre events.
  */
-export declare const useMapViewportBbox: (mapId: string, viewportTrigger?: unknown) => Bbox | null;
+export declare const useMapViewportBbox: (mapId: string) => Bbox | null;

package/dist/hooks/useProviderData.d.ts

@@ -1,10 +1,16 @@
 import type { Bbox } from '@osm-editor-kit/street-imagery';
 import { type ProviderId } from '@osm-editor-kit/street-imagery';
+import { keepPreviousData } from '@tanstack/react-query';
+/**
+ * Keeps the last result on screen while the next viewport loads. Only while the query is on:
+ * a query that is off (provider turned off, zoomed out too far) would show that result forever.
+ */
+export declare const previousDataWhile: (enabled: boolean) => typeof keepPreviousData | undefined;
 /** Host limit on top of the provider's own minimum zooms: below it nothing is requested. */
 type ProviderDataOptions = {
     minZoom?: number;
 };
-export declare const useProviderPhotos: (providerId: ProviderId, bbox: Bbox | null, zoom: number, { minZoom }?: ProviderDataOptions) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").NormalizedPhoto[]>, Error>;
-export declare const useProviderSequences: (providerId: ProviderId, bbox: Bbox | null, zoom: number, { minZoom }?: ProviderDataOptions) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").NormalizedSequence[]>, Error>;
-export declare const useProviderMapFeatures: (providerId: ProviderId, bbox: Bbox | null, zoom: number, { minZoom }?: ProviderDataOptions) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").NormalizedMapFeature[]>, Error>;
+export declare const useProviderPhotos: (providerId: ProviderId, bbox: Bbox | null, zoom: number, { minZoom }?: ProviderDataOptions) => import("@tanstack/react-query").UseQueryResult<import("@osm-editor-kit/street-imagery").NormalizedPhoto[], Error>;
+export declare const useProviderSequences: (providerId: ProviderId, bbox: Bbox | null, zoom: number, { minZoom }?: ProviderDataOptions) => import("@tanstack/react-query").UseQueryResult<import("@osm-editor-kit/street-imagery").NormalizedSequence[], Error>;
+export declare const useProviderMapFeatures: (providerId: ProviderId, bbox: Bbox | null, zoom: number, { minZoom }?: ProviderDataOptions) => import("@tanstack/react-query").UseQueryResult<import("@osm-editor-kit/street-imagery").NormalizedMapFeature[], Error>;
 export {};

package/dist/index.d.ts

@@ -4,21 +4,22 @@ export { StreetLevelImageryViewCone, VIEW_SHAPE_FILL_OPACITY } from './StreetLev
 export { StreetLevelImageryViewer } from './StreetLevelImageryViewer';
 export type { StreetImageryPhotoSelection } from './types';
 export { queryStreetImageryFeatures, streetImageryInteractiveLayerIds, type StreetImageryClickFeature, } from './streetImageryClick';
-export * from './hooks/useAllProviderMapFeatures';
-export * from './hooks/useAllProviderPhotos';
-export * from './hooks/useMapViewportBbox';
-export * from './hooks/useProviderData';
-export * from './hooks/usePhotoThumbnails';
-export * from './useViewerStore';
+export { useAllProviderMapFeatures } from './hooks/useAllProviderMapFeatures';
+export { useAllProviderPhotos, type AllProviderPhotosResult } from './hooks/useAllProviderPhotos';
+export { useMapViewportBbox } from './hooks/useMapViewportBbox';
+export { useProviderMapFeatures, useProviderPhotos, useProviderSequences, } from './hooks/useProviderData';
+export { usePhotoFullUrl, usePhotoThumbnail } from './hooks/usePhotoThumbnails';
+export { useViewerActions, useViewerBearing, useViewerHfov, useViewerLngLat, } from './useViewerStore';
 export { FloatingPhotoViewer, FloatingViewerInfoButton, type FloatingPhotoViewerProps, } from './viewpoints/FloatingPhotoViewer';
 export { VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, ViewpointLayer, viewDirectionKeyFromFeatures, type ViewpointLayerProps, } from './viewpoints/ViewpointLayer';
 export { viewSuggestionLabel } from './viewpoints/viewDirectionLabels';
-export * from './viewpoints/useViewpointSessionStore';
-export * from './viewpoints/useViewSuggestions';
+export { getViewpointSession, useActiveDirectionKey, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useViewpointLine, useViewpoints, type ViewpointHistoryEntry, } from './viewpoints/useViewpointSessionStore';
+export { useViewSuggestions, type ViewSuggestionsOptions, type ViewSuggestionsResult, } from './viewpoints/useViewSuggestions';
+export { usePhotosLookingAt, type PhotosLookingAtOptions, type PhotosLookingAtResult, } from './viewpoints/usePhotosLookingAt';
 export type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
-export * from './mapillary/useMapillaryFeatures';
+export { useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, useSelectedMapillaryFeature, } from './mapillary/useMapillaryFeatures';
 export { LocationPickOnMap, type LocationPickOnMapProps } from './openers/LocationPickOnMap';
-export * from './openers/useLocationPickStore';
+export { useArmedLocationOpenerId, useLocationPickActions } from './openers/useLocationPickStore';
 export { SelectedMapFeatureLayer, type SelectedMapFeatureLayerProps, } from './mapillary/SelectedMapFeatureLayer';
 export { MapillaryFeatureBar, type MapillaryFeatureBarProps } from './mapillary/MapillaryFeatureBar';
 export { MAPILLARY_FEATURE_BAR_LABELS, type MapillaryFeatureBarLabels, } from './mapillary/featureBarLabels';