@osm-editor-kit/street-imagery-react 0.1.0-alpha.3 → 0.1.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osm-editor-kit/street-imagery-react",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.6",
   "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",
@@ -19,6 +19,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./photo-details": {
+      "types": "./dist/photo-details/index.d.ts",
+      "import": "./dist/photo-details.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -45,13 +49,13 @@
     "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": "^0.1.0-alpha.2",
+    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.5",
     "@panoramax/web-viewer": "^5",
     "@tanstack/react-query": "^5",
     "mapillary-js": "^4",
@@ -66,6 +70,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./photo-details": {
+      "types": "./dist/photo-details/index.d.ts",
+      "import": "./dist/photo-details.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 };