@osm-editor-kit/street-imagery-react 0.1.0-alpha.1 → 0.1.0-alpha.10

package/dist/viewpoints/FloatingPhotoViewer.d.ts

@@ -0,0 +1,73 @@
+import type { PhotoCandidate, ViewSuggestion } from '@osm-editor-kit/street-imagery';
+import { type ReactNode } from 'react';
+/** Info button for `titleActions`; `label` is its tooltip and accessible name. */
+export declare const FloatingViewerInfoButton: ({ label, onClick, }: {
+    label: string;
+    onClick: () => void;
+}) => import("react").JSX.Element;
+export type FloatingPhotoViewerProps = {
+    title: ReactNode;
+    /** Buttons right after the title, e.g. `<FloatingViewerInfoButton>` for the photo's details. */
+    titleActions?: ReactNode;
+    /** Suggested views (viewpoint × direction); shown as chips. Empty hides the strip. */
+    suggestions: ViewSuggestion[];
+    activeDirectionKey: string | null;
+    /**
+     * A view button was clicked. `candidate` is the photo to show: the view's best one, or the next
+     * one when the active view is clicked again.
+     */
+    onSelectSuggestion: (suggestion: ViewSuggestion, candidate: PhotoCandidate) => void;
+    /** The photo in the viewer, so the active view can show which of its photos that is. */
+    shownPhotoId?: string | null;
+    /**
+     * History of shown photos: the back and forward buttons and the keys [ and ]. Leave out
+     * `onBack` and `onForward` for a host without a history; the buttons are then not shown.
+     */
+    canGoBack?: boolean;
+    canGoForward?: boolean;
+    onBack?: () => void;
+    onForward?: () => void;
+    onClose: () => void;
+    /**
+     * Step to the neighbouring photo, e.g. along the clicked street: the `<` `>` buttons at the
+     * left of the header. A missing handler disables its button.
+     */
+    step?: {
+        onPrevious?: () => void;
+        onNext?: () => void;
+        previousLabel: string;
+        nextLabel: string;
+    };
+    /**
+     * Bar below the header, in place of the suggested-view chips; e.g. the map feature the photos
+     * belong to, with a button per capture day.
+     */
+    toolbar?: ReactNode;
+    /** Short status line, e.g. "Loading…" or "No photos from the last 2 years". */
+    status?: ReactNode;
+    /** Viewer body (provider panel). */
+    children?: ReactNode;
+    footer?: ReactNode;
+    /** Collapsible list below the footer, e.g. other photos near the click. */
+    drawer?: {
+        label: ReactNode;
+        content: ReactNode;
+    };
+    /** localStorage key for position, width and minimized state. */
+    storageKey?: string;
+    /**
+     * Where the box is until the user moves it: the bottom right corner (default), or the top left
+     * one with `left` and `top` in px from the container's edges, e.g. next to a side panel.
+     */
+    defaultPosition?: {
+        corner: 'top-left';
+        left?: number;
+        top?: number;
+    };
+};
+/**
+ * Photo viewer box floating over the map. Render inside a positioned (relative) map container.
+ * Drag the header to move, drag the left edge to resize. Keys: Esc closes, [ and ] step history,
+ * Alt + arrow left/right step along (`step`).
+ */
+export declare const FloatingPhotoViewer: ({ title, titleActions, suggestions, activeDirectionKey, onSelectSuggestion, shownPhotoId, canGoBack, canGoForward, onBack, onForward, onClose, step, toolbar, status, children, footer, drawer, storageKey, defaultPosition, }: FloatingPhotoViewerProps) => import("react").JSX.Element;

package/dist/viewpoints/ViewpointLayer.d.ts

@@ -0,0 +1,17 @@
+import { type LngLat, type ViewSuggestion, type Viewpoint } from '@osm-editor-kit/street-imagery';
+import type { MapGeoJSONFeature } from 'maplibre-gl';
+/** Add to `interactiveLayerIds` to make view directions clickable; see `viewDirectionKeyFromFeatures`. */
+export declare const VIEWPOINT_DIRECTION_LAYER_ID = "viewpoint-direction-fill";
+export declare const VIEWPOINT_DEFAULT_COLOR = "#c026d3";
+export type ViewpointLayerProps = {
+    viewpoints: Viewpoint[];
+    suggestions: ViewSuggestion[];
+    activeDirectionKey: string | null;
+    zoom: number;
+    /** Clicked line, drawn below the viewpoints. */
+    line?: LngLat[] | null;
+    color?: string;
+};
+export declare const ViewpointLayer: ({ viewpoints, suggestions, activeDirectionKey, zoom, line, color, }: ViewpointLayerProps) => import("react").JSX.Element;
+/** Direction key of the top-most clicked view direction, if any. */
+export declare const viewDirectionKeyFromFeatures: (features: MapGeoJSONFeature[] | undefined) => string | null;

package/dist/viewpoints/useViewSuggestions.d.ts

@@ -0,0 +1,23 @@
+import { type NormalizedPhoto, type PhotoTypeFilter, type ViewSuggestion, type ViewpointPhotoSource, type Viewpoint } from '@osm-editor-kit/street-imagery';
+export type ViewSuggestionsOptions = {
+    /** Only photos from the last N years. */
+    maxAgeYears?: number;
+    photoTypes?: PhotoTypeFilter[];
+    /** Candidates kept per direction. */
+    limit?: number;
+    /** Extra app filter (e.g. date range), applied before ranking. */
+    filterPhoto?: (photo: NormalizedPhoto) => boolean;
+    /**
+     * Where photos come from; default Mapillary. Pass several to rank across providers, e.g.
+     * `[mapillaryPhotoSource, streetViewPhotoSource]` or your own (Infra3D).
+     */
+    sources?: ViewpointPhotoSource[];
+    enabled?: boolean;
+};
+export type ViewSuggestionsResult = {
+    suggestions: ViewSuggestion[];
+    isLoading: boolean;
+    isError: boolean;
+};
+/** Photos near each viewpoint from all `sources`, ranked per view direction. */
+export declare const useViewSuggestions: (viewpoints: Viewpoint[], { maxAgeYears, photoTypes, limit, filterPhoto, sources, enabled, }?: ViewSuggestionsOptions) => ViewSuggestionsResult;

package/dist/viewpoints/useViewpointSessionStore.d.ts

@@ -0,0 +1,35 @@
+import type { LngLat, NormalizedPhoto, Viewpoint } from '@osm-editor-kit/street-imagery';
+export type ViewpointHistoryEntry = {
+    photo: NormalizedPhoto;
+    /** Suggested view the photo came from; `null` for photos picked by hand. */
+    directionKey: string | null;
+};
+type OpenInput = {
+    viewpoints: Viewpoint[];
+    /** Clicked line, drawn as context on the map. */
+    line?: LngLat[] | null;
+};
+export declare const useViewpoints: () => Viewpoint[];
+export declare const useViewpointLine: () => LngLat[] | null;
+export declare const useActiveDirectionKey: () => string | null;
+export declare const useCurrentHistoryEntry: () => ViewpointHistoryEntry;
+export declare const useCanGoBack: () => boolean;
+export declare const useCanGoForward: () => boolean;
+/** Actions + current entry outside React (event handlers, tests). */
+export declare const getViewpointSession: () => {
+    actions: {
+        open: (input: OpenInput) => void;
+        /**
+         * Show a photo; truncates forward history. For the photo that is shown already, only its
+         * direction changes.
+         */
+        showPhoto: (entry: ViewpointHistoryEntry) => void;
+        back: () => ViewpointHistoryEntry | null;
+        forward: () => ViewpointHistoryEntry | null;
+        close: () => void;
+        /** Like `close`, and forget the history too: the viewer was closed. */
+        reset: () => void;
+    };
+    current: ViewpointHistoryEntry;
+};
+export {};

package/dist/viewpoints/viewDirectionLabels.d.ts

@@ -0,0 +1,4 @@
+import type { ViewSuggestion } from '@osm-editor-kit/street-imagery';
+import type { StreetImageryMessages } from '../i18n/messages';
+/** Label of a suggested view, e.g. "Start, looking along the street". */
+export declare const viewSuggestionLabel: ({ viewpoint, direction }: ViewSuggestion, messages: StreetImageryMessages) => string;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@osm-editor-kit/street-imagery-react",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.10",
   "description": "React MapLibre layers and photo viewers for street-level imagery providers.",
+  "homepage": "https://github.com/osmberlin/street-space-editor/tree/main/packages/street-imagery-react",
   "license": "MIT",
   "author": "Tobias Jordans",
   "repository": {
@@ -9,16 +10,28 @@
     "url": "git+https://github.com/osmberlin/street-space-editor.git",
     "directory": "packages/street-imagery-react"
   },
-  "homepage": "https://github.com/osmberlin/street-space-editor/tree/main/packages/street-imagery-react",
-  "type": "module",
   "files": [
     "dist"
   ],
+  "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./photo-details": {
+      "types": "./dist/photo-details/index.d.ts",
+      "import": "./dist/photo-details.js"
+    },
+    "./viewer-panels": {
+      "types": "./dist/viewer-panels/index.d.ts",
+      "import": "./dist/viewer-panels.js"
+    },
+    "./panoramax-web-viewer": {
+      "types": "./dist/panoramax-web-viewer/index.d.ts",
+      "import": "./dist/panoramax-web-viewer.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -42,30 +55,47 @@
     "@types/react-dom": "^19.1.7",
     "bun-types": "^1.2.20",
     "mapillary-js": "^4.1.2",
-    "maplibre-gl": "^5.7.1",
+    "maplibre-gl": "^6.7.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-map-gl": "^8.0.4",
+    "react-map-gl": "^8.1.3",
     "tsup": "^8.5.1",
     "typescript": "^7.0.0",
     "zustand": "^5.0.7"
   },
   "peerDependencies": {
-    "@osm-editor-kit/street-imagery": "workspace:*",
+    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.8",
     "@panoramax/web-viewer": "^5",
     "@tanstack/react-query": "^5",
     "mapillary-js": "^4",
-    "maplibre-gl": "^5",
+    "maplibre-gl": "^6",
     "react": "^19",
     "react-dom": "^19",
     "react-map-gl": "^8",
     "zustand": "^5"
   },
+  "peerDependenciesMeta": {
+    "@panoramax/web-viewer": {
+      "optional": true
+    }
+  },
   "publishExports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./photo-details": {
+      "types": "./dist/photo-details/index.d.ts",
+      "import": "./dist/photo-details.js"
+    },
+    "./viewer-panels": {
+      "types": "./dist/viewer-panels/index.d.ts",
+      "import": "./dist/viewer-panels.js"
+    },
+    "./panoramax-web-viewer": {
+      "types": "./dist/panoramax-web-viewer/index.d.ts",
+      "import": "./dist/panoramax-web-viewer.js"
+    },
     "./package.json": "./package.json"
   }
 }

package/dist/MapillaryPanel-QX6NESX7.js

@@ -1,2 +0,0 @@
-export { MapillaryPanel } from './chunk-BS6LPDMY.js';
-import './chunk-25UGGXIE.js';

package/dist/PanoramaxPanel-J6ANR6LB.js

@@ -1,2 +0,0 @@
-export { PanoramaxPanel } from './chunk-ZH3TPW4D.js';
-import './chunk-25UGGXIE.js';

package/dist/chunk-BS6LPDMY.js

@@ -1,143 +0,0 @@
-import { useViewerActions } from './chunk-25UGGXIE.js';
-import { getStreetImageryConfig } from '@osm-editor-kit/street-imagery';
-import 'mapillary-js/dist/mapillary.css';
-import { Viewer } from 'mapillary-js';
-import { useRef, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var MapillaryPanel = ({
-  photo,
-  onPhotoSelected,
-  onEaseMapToPoint
-}) => {
-  const containerRef = useRef(null);
-  const viewerRef = useRef(null);
-  const navigableRef = useRef(false);
-  const pendingImageIdRef = useRef(null);
-  const lastViewerPhotoIdRef = useRef(null);
-  const bearingRafRef = useRef(null);
-  const pendingBearingRef = useRef(null);
-  const actions = useViewerActions();
-  const initialPhotoIdRef = useRef(photo.photoId);
-  useEffect(
-    function resetViewerStoreOnProviderChange() {
-      return () => {
-        actions.reset();
-      };
-    },
-    [actions, photo.providerId]
-  );
-  useEffect(
-    function mountMapillaryViewer() {
-      const container = containerRef.current;
-      if (!container) {
-        return;
-      }
-      const viewer = new Viewer({
-        accessToken: getStreetImageryConfig().mapillaryToken,
-        container,
-        imageId: initialPhotoIdRef.current,
-        component: {
-          cover: false,
-          sequence: { visible: true }
-        }
-      });
-      viewerRef.current = viewer;
-      lastViewerPhotoIdRef.current = initialPhotoIdRef.current;
-      const flushPendingMove = () => {
-        const pendingId = pendingImageIdRef.current;
-        if (!pendingId) {
-          return;
-        }
-        pendingImageIdRef.current = null;
-        void viewer.moveTo(pendingId).catch(() => {
-        });
-      };
-      const onNavigable = (event) => {
-        navigableRef.current = event.navigable;
-        if (event.navigable) {
-          flushPendingMove();
-        }
-      };
-      const onImage = (event) => {
-        const { image } = event;
-        lastViewerPhotoIdRef.current = image.id;
-        onPhotoSelected({
-          provider: "mapillary",
-          sequenceId: image.sequenceId,
-          photoId: image.id
-        });
-        const position = image.lngLat ?? image.originalLngLat;
-        if (!position) {
-          return;
-        }
-        actions.setPov({ lngLat: [position.lng, position.lat] });
-        onEaseMapToPoint(position.lng, position.lat);
-      };
-      const flushBearing = () => {
-        bearingRafRef.current = null;
-        if (pendingBearingRef.current != null) {
-          actions.setPov({ bearing: pendingBearingRef.current });
-          pendingBearingRef.current = null;
-        }
-        void viewer.getFieldOfView().then((fov) => {
-          actions.setPov({ hfov: fov });
-        }).catch(() => {
-        });
-      };
-      const onBearing = (event) => {
-        pendingBearingRef.current = event.bearing;
-        if (bearingRafRef.current == null) {
-          bearingRafRef.current = requestAnimationFrame(flushBearing);
-        }
-      };
-      viewer.on("navigable", onNavigable);
-      viewer.on("image", onImage);
-      viewer.on("bearing", onBearing);
-      const resizeObserver = new ResizeObserver(() => {
-        viewer.resize();
-      });
-      resizeObserver.observe(container);
-      return () => {
-        if (bearingRafRef.current != null) {
-          cancelAnimationFrame(bearingRafRef.current);
-          bearingRafRef.current = null;
-        }
-        resizeObserver.disconnect();
-        viewer.off("navigable", onNavigable);
-        viewer.off("image", onImage);
-        viewer.off("bearing", onBearing);
-        viewer.remove();
-        viewerRef.current = null;
-      };
-    },
-    [actions, onEaseMapToPoint, onPhotoSelected]
-  );
-  useEffect(
-    function syncExternalPhotoSelection() {
-      const viewer = viewerRef.current;
-      if (!viewer || photo.photoId === lastViewerPhotoIdRef.current) {
-        return;
-      }
-      actions.reset();
-      lastViewerPhotoIdRef.current = photo.photoId;
-      if (navigableRef.current) {
-        void viewer.moveTo(photo.photoId).catch(() => {
-        });
-      } else {
-        pendingImageIdRef.current = photo.photoId;
-      }
-    },
-    [actions, photo.photoId]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
-      style: { aspectRatio: "4 / 3" }
-    }
-  );
-};
-
-export { MapillaryPanel };

package/dist/chunk-ZH3TPW4D.js

@@ -1,165 +0,0 @@
-import { useViewerActions } from './chunk-25UGGXIE.js';
-import '@panoramax/web-viewer';
-import { getStreetImageryConfig } from '@osm-editor-kit/street-imagery';
-import { useRef, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var panoramaxApiEndpoint = () => `${getStreetImageryConfig().panoramaxApiBase}/api`;
-var normalizeBearing = (degrees) => (degrees % 360 + 360) % 360;
-var PanoramaxPanel = ({
-  photo,
-  onPhotoSelected,
-  onEaseMapToPoint
-}) => {
-  const containerRef = useRef(null);
-  const viewerRef = useRef(null);
-  const lastViewerPhotoIdRef = useRef(null);
-  const readyRef = useRef(false);
-  const pendingSelectRef = useRef(null);
-  const photoRef = useRef(photo);
-  const bearingRafRef = useRef(null);
-  const pendingBearingRef = useRef(null);
-  const pendingHfovRef = useRef(null);
-  const actions = useViewerActions();
-  useEffect(
-    function syncPhotoRef() {
-      photoRef.current = photo;
-    },
-    [photo]
-  );
-  useEffect(
-    function resetViewerStoreOnProviderChange() {
-      return () => {
-        actions.reset();
-      };
-    },
-    [actions, photo.providerId]
-  );
-  useEffect(
-    function mountPanoramaxViewer() {
-      const viewer = viewerRef.current;
-      const container = containerRef.current;
-      if (!viewer || !container) {
-        return;
-      }
-      lastViewerPhotoIdRef.current = photoRef.current.photoId;
-      const flushBearing = () => {
-        bearingRafRef.current = null;
-        if (pendingBearingRef.current != null) {
-          actions.setPov({ bearing: pendingBearingRef.current });
-          pendingBearingRef.current = null;
-        }
-        if (pendingHfovRef.current != null) {
-          actions.setPov({ hfov: pendingHfovRef.current });
-          pendingHfovRef.current = null;
-        }
-      };
-      const onSelect = (event) => {
-        const { seqId, picId } = event.detail;
-        if (!picId) {
-          return;
-        }
-        lastViewerPhotoIdRef.current = picId;
-        const currentPhoto = photoRef.current;
-        const sequenceId = seqId ?? (picId === currentPhoto.photoId && currentPhoto.sequenceId ? currentPhoto.sequenceId : `photo:${picId}`);
-        onPhotoSelected({
-          provider: "panoramax",
-          sequenceId,
-          photoId: picId
-        });
-      };
-      const onPictureLoaded = (event) => {
-        const detail = event.detail;
-        if (detail.lon == null || detail.lat == null) {
-          return;
-        }
-        actions.setPov({ lngLat: [detail.lon, detail.lat] });
-        if (detail.x != null) {
-          actions.setPov({ bearing: normalizeBearing(detail.x) });
-        }
-        const psv = viewer.psv;
-        if (psv && detail.z != null) {
-          actions.setPov({ hfov: psv.dataHelper.zoomLevelToFov(detail.z) });
-        }
-        onEaseMapToPoint(detail.lon, detail.lat);
-      };
-      const onViewRotated = (event) => {
-        const detail = event.detail;
-        pendingBearingRef.current = normalizeBearing(detail.x);
-        const psv = viewer.psv;
-        if (psv && detail.z != null) {
-          pendingHfovRef.current = psv.dataHelper.zoomLevelToFov(detail.z);
-        }
-        if (bearingRafRef.current == null) {
-          bearingRafRef.current = requestAnimationFrame(flushBearing);
-        }
-      };
-      viewer.addEventListener("select", onSelect);
-      viewer.addEventListener("psv:picture-loaded", onPictureLoaded);
-      viewer.addEventListener("psv:view-rotated", onViewRotated);
-      const resizeObserver = new ResizeObserver(() => {
-        viewer.psv?.resize();
-      });
-      resizeObserver.observe(container);
-      readyRef.current = true;
-      const pending = pendingSelectRef.current;
-      if (pending) {
-        pendingSelectRef.current = null;
-        if (typeof viewer.select === "function") {
-          viewer.select(pending.sequenceId ?? null, pending.photoId);
-        }
-      }
-      return () => {
-        readyRef.current = false;
-        if (bearingRafRef.current != null) {
-          cancelAnimationFrame(bearingRafRef.current);
-          bearingRafRef.current = null;
-        }
-        resizeObserver.disconnect();
-        viewer.removeEventListener("select", onSelect);
-        viewer.removeEventListener("psv:picture-loaded", onPictureLoaded);
-        viewer.removeEventListener("psv:view-rotated", onViewRotated);
-      };
-    },
-    [actions, onEaseMapToPoint, onPhotoSelected]
-  );
-  useEffect(
-    function syncExternalPhotoSelection() {
-      const viewer = viewerRef.current;
-      if (!viewer || photo.photoId === lastViewerPhotoIdRef.current) {
-        return;
-      }
-      actions.reset();
-      lastViewerPhotoIdRef.current = photo.photoId;
-      if (!readyRef.current) {
-        pendingSelectRef.current = { sequenceId: photo.sequenceId, photoId: photo.photoId };
-        return;
-      }
-      if (typeof viewer.select === "function") {
-        viewer.select(photo.sequenceId ?? null, photo.photoId);
-      }
-    },
-    [actions, photo.photoId, photo.sequenceId]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
-      style: { aspectRatio: "4 / 3" },
-      children: /* @__PURE__ */ jsx(
-        "pnx-photo-viewer",
-        {
-          ref: viewerRef,
-          className: "block h-full w-full",
-          endpoint: panoramaxApiEndpoint(),
-          "url-parameters": "false",
-          picture: photo.photoId,
-          sequence: photo.sequenceId ?? void 0
-        }
-      )
-    }
-  );
-};
-
-export { PanoramaxPanel };