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

package/dist/mapillary/lookAt.d.ts

@@ -0,0 +1,26 @@
+import type { LngLat, TargetShape } from '@osm-editor-kit/street-imagery';
+/** A place the Mapillary viewer should turn to: a sign, a traffic light, a junction … */
+export type MapillaryLookAt = {
+    lngLat: LngLat;
+    /** Size and height of the target; decides zoom and vertical position. Default: a traffic sign. */
+    shape?: TargetShape;
+    /** The target's outline in the shown image, if known; it is more exact than the location. */
+    outline?: [number, number][];
+    /**
+     * Mapillary value of the target (`regulatory--bicycles-only--g1`). Without an `outline`, the
+     * image's own detection of this value is used: Mapillary links a map feature to few of its
+     * images, but almost every image has a detection of it. With several, the one nearest to the
+     * computed position wins (the computed position alone can be far off in 360° images).
+     */
+    value?: string;
+    /** Label for the outline drawn around the target. */
+    label?: string;
+};
+export type MapillaryViewerOutline = {
+    id: string;
+    /** Image ("basic") coordinates, `[0, 0]` top left to `[1, 1]` bottom right. */
+    outline: [number, number][];
+    label?: string;
+    /** CSS color number, e.g. `0xffff00`. Default yellow. */
+    color?: number;
+};

package/dist/mapillary/useMapillaryFeatures.d.ts

@@ -6,7 +6,7 @@ import { type LngLat, type TargetShape } from '@osm-editor-kit/street-imagery';
  */
 export declare const useMapillaryMapFeatureImages: (featureId: string | null | undefined, { shape }?: {
     shape?: TargetShape;
-}) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").MapFeatureImages | null>, Error>;
+}) => import("@tanstack/react-query").UseQueryResult<import("@osm-editor-kit/street-imagery").MapFeatureImages | null, Error>;
 /**
  * Map features within `radiusMeters` of a point (Graph API), nearest first, e.g. the traffic
  * lights and markings at a junction. `objectValues` accepts wildcards (`object--traffic-light--*`).
@@ -15,7 +15,7 @@ export declare const useMapillaryMapFeaturesNear: (lngLat: LngLat | null | undef
     radiusMeters?: number;
     objectValues?: string[];
     enabled?: boolean;
-}) => import("@tanstack/react-query").UseQueryResult<NoInfer<{
+}) => import("@tanstack/react-query").UseQueryResult<{
     id: string;
     value: string;
     lngLat: LngLat;
@@ -24,7 +24,7 @@ export declare const useMapillaryMapFeaturesNear: (lngLat: LngLat | null | undef
     facing: number | null;
     imageIds: string[];
     distanceMeters: number;
-}[]>, Error>;
+}[], Error>;
 /**
  * Detection outlines of one image, for `outlines` of the Mapillary viewer. An image has ~500
  * detections; pass `filter` (e.g. `matchesAnyGroup(JUNCTION_DETECTION_GROUPS)`) and name it with
@@ -33,7 +33,7 @@ export declare const useMapillaryMapFeaturesNear: (lngLat: LngLat | null | undef
 export declare const useMapillaryImageDetections: (imageId: string | null | undefined, { filter, filterKey }?: {
     filter?: (value: string) => boolean;
     filterKey?: string;
-}) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").MapillaryDetection[]>, Error>;
+}) => import("@tanstack/react-query").UseQueryResult<import("@osm-editor-kit/street-imagery").MapillaryDetection[], Error>;
 /**
  * A selected Mapillary map feature (sign, object) for a host's feature + photo selection: all its
  * photos by day, the photo that is shown (`shownPhotoId`), and the one to open first — the best of
@@ -46,7 +46,7 @@ export declare const useSelectedMapillaryFeature: ({ featureId, shownPhotoId, mi
     minCapturedAt?: number | null;
     shape?: TargetShape;
 }) => {
-    data: NonNullable<NoInfer<import("@osm-editor-kit/street-imagery").MapFeatureImages | null>> | null;
+    data: import("@osm-editor-kit/street-imagery").MapFeatureImages | null;
     isLoading: boolean;
     isError: boolean;
     shownImage: import("@osm-editor-kit/street-imagery").TargetImage | null;

package/dist/panels/MapillaryPanel.d.ts

@@ -1,7 +1,7 @@
-import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
 import 'mapillary-js/dist/mapillary.css';
+import type { MapillaryLookAt, MapillaryViewerOutline } from '../mapillary/lookAt';
 import type { StreetImageryPhotoSelection } from '../types';
-import { type MapillaryLookAt, type MapillaryViewerOutline } from './mapillaryLookAt';
 type MapillaryPanelProps = {
     photo: NormalizedPhoto;
     groupPhotos: NormalizedPhoto[];
@@ -9,6 +9,11 @@ type MapillaryPanelProps = {
     onEaseMapToPoint: (lng: number, lat: number) => void;
     /** Full photo data for each image the viewer shows (incl. native prev/next navigation). */
     onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /**
+     * The view inside the shown photo, after it has stopped moving and when the photo changes. Pass
+     * it to `providerExternalLink` for a link that opens the same view.
+     */
+    onViewerView?: (view: PhotoView) => void;
     /** 360° photos: turn the view to this map bearing when `photo` opens (e.g. a suggested view). */
     lookAtBearing?: number | null;
     /**
@@ -25,5 +30,5 @@ type MapillaryPanelProps = {
      */
     hideAttribution?: boolean;
 };
-export declare const MapillaryPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, hideAttribution, }: MapillaryPanelProps) => import("react").JSX.Element;
+export declare const MapillaryPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, lookAtBearing, lookAt, outlines, hideAttribution, }: MapillaryPanelProps) => import("react").JSX.Element;
 export {};

package/dist/panels/PanoramaxPanel.d.ts

@@ -1,7 +1,7 @@
-import '@panoramax/web-viewer';
-import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
+import 'mapillary-js/dist/mapillary.css';
 import type { StreetImageryPhotoSelection } from '../types';
-type PanoramaxPanelProps = {
+export type PanoramaxPanelProps = {
     photo: NormalizedPhoto;
     groupPhotos: NormalizedPhoto[];
     onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
@@ -9,11 +9,18 @@ type PanoramaxPanelProps = {
     /** The shown picture with creator, licence, local capture time and camera. */
     onViewerPhoto?: (photo: NormalizedPhoto) => void;
     /**
-     * Leave out the viewer's own widgets: the legend (a bottom drawer in narrow containers), the
-     * player and the zoom buttons. The host must then show creator and licence itself, from
-     * `onViewerPhoto`. Stepping through a sequence still works with the arrows in the photo.
+     * The view inside the shown photo, after it has stopped moving and when the photo changes. Pass
+     * it to `providerExternalLink` for a link that opens the same view.
      */
-    hideLegend?: boolean;
+    onViewerView?: (view: PhotoView) => void;
+    /**
+     * Hide the line with creator and licence. The host must then show both itself, from
+     * `onViewerPhoto`.
+     */
+    hideAttribution?: boolean;
 };
-export declare const PanoramaxPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, hideLegend, }: PanoramaxPanelProps) => import("react").JSX.Element;
-export {};
+/**
+ * Panoramax pictures in the Mapillary viewer (`mapillary-js` with a `PanoramaxDataProvider`): no
+ * second viewer engine to load, and the same handling as Mapillary photos.
+ */
+export declare const PanoramaxPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, hideAttribution, }: PanoramaxPanelProps) => import("react").JSX.Element;

package/dist/panels/PanoramaxWebViewerPanel.d.ts

@@ -0,0 +1,25 @@
+import '@panoramax/web-viewer';
+import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
+import type { StreetImageryPhotoSelection } from '../types';
+export type PanoramaxWebViewerPanelProps = {
+    photo: NormalizedPhoto;
+    groupPhotos: NormalizedPhoto[];
+    onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
+    onEaseMapToPoint: (lng: number, lat: number) => void;
+    /** The shown picture with creator, licence, local capture time and camera. */
+    onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /**
+     * The view inside the shown photo, after it has stopped moving and when the photo changes. Pass
+     * it to `providerExternalLink` for a link that opens the same view.
+     */
+    onViewerView?: (view: PhotoView) => void;
+    /**
+     * Leave out the viewer's own widgets: the legend (a bottom drawer in narrow containers), the
+     * player and the zoom buttons. The host must then show creator and licence itself, from
+     * `onViewerPhoto`. Stepping through a sequence still works with the arrows in the photo.
+     */
+    hideLegend?: boolean;
+    /** Same as `hideLegend`; the name `StreetLevelImageryViewer` passes. */
+    hideAttribution?: boolean;
+};
+export declare const PanoramaxWebViewerPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, hideLegend: hideLegendProp, hideAttribution, }: PanoramaxWebViewerPanelProps) => import("react").JSX.Element;

package/dist/panels/mapillaryLookAt.d.ts

@@ -1,30 +1,6 @@
-import { type LngLat, type TargetShape, type ViewTarget } from '@osm-editor-kit/street-imagery';
+import { type ViewTarget } from '@osm-editor-kit/street-imagery';
 import { type Image, type Viewer } from 'mapillary-js';
-/** A place the Mapillary viewer should turn to: a sign, a traffic light, a junction … */
-export type MapillaryLookAt = {
-    lngLat: LngLat;
-    /** Size and height of the target; decides zoom and vertical position. Default: a traffic sign. */
-    shape?: TargetShape;
-    /** The target's outline in the shown image, if known; it is more exact than the location. */
-    outline?: [number, number][];
-    /**
-     * Mapillary value of the target (`regulatory--bicycles-only--g1`). Without an `outline`, the
-     * image's own detection of this value is used: Mapillary links a map feature to few of its
-     * images, but almost every image has a detection of it. With several, the one nearest to the
-     * computed position wins (the computed position alone can be far off in 360° images).
-     */
-    value?: string;
-    /** Label for the outline drawn around the target. */
-    label?: string;
-};
-export type MapillaryViewerOutline = {
-    id: string;
-    /** Image ("basic") coordinates, `[0, 0]` top left to `[1, 1]` bottom right. */
-    outline: [number, number][];
-    label?: string;
-    /** CSS color number, e.g. `0xffff00`. Default yellow. */
-    color?: number;
-};
+import type { MapillaryLookAt, MapillaryViewerOutline } from '../mapillary/lookAt';
 /**
  * Where the target is in the image: from its outline, else computed from the locations
  * (360°: the viewer's own projection; flat: a pinhole model). `undefined` when a flat image does

package/dist/panels/panoramaxDataProvider.d.ts

@@ -0,0 +1,44 @@
+import { DataProviderBase, type ClusterContract, type CoreImagesContract, type ImagesContract, type ImageTilesContract, type ImageTilesRequestContract, type MeshContract, type SequenceContract, type SpatialImagesContract } from 'mapillary-js';
+import { type PanoramaxItem } from './panoramaxItem';
+export type PanoramaxDataProviderOptions = {
+    /** The Panoramax API, e.g. `https://api.panoramax.xyz/api`. */
+    endpoint: string;
+};
+/**
+ * Lets a mapillary-js `Viewer` show Panoramax pictures: pass it as the viewer's `dataProvider`.
+ *
+ * A picture opens with its `sd` file (2048 px wide). The viewer then asks for tiles of the part in
+ * view; they are cut here, in the browser. Only when the view needs more detail than `sd` has is
+ * the original file loaded for that, once. (Panoramax has tiles of its own for 360° pictures only,
+ * in another layout.)
+ *
+ * Panoramax has no 3D reconstruction, so the viewer places each picture by its compass direction
+ * and offers the steps along the sequence only, not the arrows to pictures nearby.
+ *
+ * A Panoramax sequence can hold thousands of pictures and the API has no short list of them, so
+ * the viewer never gets the whole sequence. Every picture gets a short one of its own: the
+ * picture before, the picture, the picture after. `Image.sequenceId` of the viewer is therefore
+ * not the Panoramax sequence; use `getItem(id).collection`.
+ */
+export declare class PanoramaxDataProvider extends DataProviderBase {
+    private readonly endpoint;
+    private readonly items;
+    private readonly itemRequests;
+    private readonly imageBuffers;
+    private readonly pictures;
+    constructor({ endpoint }: PanoramaxDataProviderOptions);
+    /** The Panoramax data of a picture the viewer has loaded. */
+    getItem(imageId: string): PanoramaxItem | undefined;
+    getCoreImages(cellId: string): Promise<CoreImagesContract>;
+    getImages(imageIds: string[]): Promise<ImagesContract>;
+    getSpatialImages(imageIds: string[]): Promise<SpatialImagesContract>;
+    getSequence(sequenceId: string): Promise<SequenceContract>;
+    getImageBuffer(url: string): Promise<ArrayBuffer>;
+    getImageTiles({ imageId, z, }: ImageTilesRequestContract): Promise<ImageTilesContract>;
+    private cutTile;
+    private loadPicture;
+    getMesh(): Promise<MeshContract>;
+    getCluster(url: string): Promise<ClusterContract>;
+    private loadItems;
+    private toImageEnt;
+}

package/dist/panels/panoramaxItem.d.ts

@@ -0,0 +1,98 @@
+import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+/** The parts of a Panoramax picture (a STAC item of `/api/search`) the viewer reads. */
+export type PanoramaxItem = {
+    id: string;
+    collection?: string;
+    geometry: {
+        type: 'Point';
+        coordinates: [number, number];
+    };
+    links?: {
+        rel: string;
+        href?: string;
+        /** `prev` and `next` name the neighbour in the sequence. */
+        id?: string;
+        /** `via` names the server the picture is stored on. */
+        instance_name?: string;
+    }[];
+    assets?: Partial<Record<'hd' | 'sd' | 'thumb', {
+        href: string;
+    }>>;
+    providers?: {
+        name: string;
+        roles?: string[];
+    }[];
+    properties?: {
+        datetime?: string;
+        datetimetz?: string;
+        created?: string;
+        license?: string;
+        exif?: Record<string, unknown>;
+        'view:azimuth'?: number | null;
+        'geovisio:producer'?: string;
+        'geovisio:rank_in_collection'?: number;
+        'original_file:name'?: string;
+        'original_file:size'?: number;
+        'quality:horizontal_accuracy'?: number;
+        'pers:interior_orientation'?: {
+            camera_manufacturer?: string;
+            camera_model?: string;
+            focal_length?: number;
+            /** Horizontal field of view in degrees; 360 for a 360° picture. */
+            field_of_view?: number | null;
+            /** Width and height of the picture in pixels. */
+            sensor_array_dimensions?: [number, number];
+        };
+    };
+};
+export declare const isPanoramaxItemSpherical: (item: PanoramaxItem) => boolean;
+/** Horizontal field of view in degrees. */
+export declare const panoramaxItemFieldOfView: (item: PanoramaxItem) => number;
+/** Width and height in pixels; a guess when the picture does not state them. */
+export declare const panoramaxItemSize: (item: PanoramaxItem) => [number, number];
+/** Neighbour in the sequence, from the item's `prev` / `next` link. */
+export declare const panoramaxItemNeighbour: (item: PanoramaxItem, rel: 'prev' | 'next') => string | null;
+/** The file a picture opens with: `sd`, 2048 px wide. */
+export declare const panoramaxItemImageUrl: (item: PanoramaxItem) => string;
+type PictureSize = [width: number, height: number];
+/**
+ * The size to tell mapillary-js: the real proportions, with the longer side raised to the next
+ * power of two. Its tile levels halve from that power of two, so a picture of 8704 px would get
+ * levels of 4352, 2176, 1088 px, the low ones coarser than the `sd` file. This way they are
+ * 8192, 4096, 2048 px.
+ */
+export declare const panoramaxViewerSize: (item: PanoramaxItem) => PictureSize;
+/** Whether level `z` shows more detail than the `sd` file; only then the original is needed. */
+export declare const panoramaxLevelNeedsOriginal: (size: PictureSize, z: number) => boolean;
+/** The tiles of a picture at level `z`. */
+export declare const panoramaxTilesOfLevel: (size: PictureSize, z: number) => {
+    x: number;
+    y: number;
+}[];
+/**
+ * Where to cut a tile from a file of the picture, and how large to draw it. `original` is the
+ * size of that file; the cut is scaled when it differs from the stated `size`.
+ */
+export declare const panoramaxTileRect: (size: PictureSize, tile: {
+    x: number;
+    y: number;
+    z: number;
+}, original: {
+    width: number;
+    height: number;
+}) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    outWidth: number;
+    outHeight: number;
+};
+/**
+ * Focal length of a flat picture as mapillary-js wants it: relative to the longer side. A
+ * picture without a field of view gets a common one.
+ */
+export declare const panoramaxItemFocal: (item: PanoramaxItem) => number;
+/** The picture as a photo with creator, licence, local capture time and camera. */
+export declare const panoramaxPhotoFromItem: (item: PanoramaxItem) => NormalizedPhoto;
+export {};

package/dist/panels/photoView.d.ts

@@ -0,0 +1,19 @@
+import type { PhotoView } from '@osm-editor-kit/street-imagery';
+import type { Viewer } from 'mapillary-js';
+/**
+ * The Panoramax viewer's zoom level (0–100) for a vertical field of view in mapillary-js, from
+ * that viewer's own limits, so that both show the same height of the picture. In a flat picture
+ * the degrees differ: mapillary-js draws it through a lens, the Panoramax viewer as part of a
+ * sphere, where each degree has the same width.
+ */
+export declare const panoramaxZoomLevel: (verticalFov: number, horizontalFovOfPicture: number) => number;
+/**
+ * Calls `report` once the view has stopped changing, and only when it differs from the last one.
+ * `viewChanged` is cheap enough for every frame of a drag.
+ */
+export declare const createPhotoViewReporter: (read: () => Promise<PhotoView | null>, report: (view: PhotoView) => void, delayMs?: number) => {
+    viewChanged: () => void;
+    stop: () => void;
+};
+/** Runs the reporter on a mapillary-js viewer until the returned function is called. */
+export declare const watchMapillaryJsView: (viewer: Viewer, read: () => Promise<PhotoView | null>, report: (view: PhotoView) => void) => (() => void);

package/dist/panoramax-web-viewer/index.d.ts

@@ -0,0 +1 @@
+export { PanoramaxWebViewerPanel } from '../panels/PanoramaxWebViewerPanel';