@osm-editor-kit/street-imagery-react 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/chunk-QBBIFF2C.js

@@ -0,0 +1,448 @@
+import { useViewerActions } from './chunk-GYUS2JVV.js';
+import { c } from 'react/compiler-runtime';
+import { viewFromOutline, SIGN_TARGET, viewFromFlatCamera, cameraPitch, panoX, bearingDeg, viewFromLocation, getStreetImageryConfig, fetchImageDetections } from '@osm-editor-kit/street-imagery';
+import 'mapillary-js/dist/mapillary.css';
+import { OutlineTag, PolygonGeometry, Viewer } from 'mapillary-js';
+import { useRef, useEffectEvent, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var isSpherical = (image) => image.cameraType === "spherical" || image.cameraType === "equirectangular";
+var mapillaryViewFor = async (viewer, image, {
+  lngLat,
+  shape = SIGN_TARGET,
+  outline
+}) => {
+  const spherical = isSpherical(image);
+  if (outline?.length) {
+    return viewFromOutline(outline, spherical, shape.maxZoom);
+  }
+  const position = image.lngLat ?? image.originalLngLat;
+  const imageLngLat = [position.lng, position.lat];
+  const compass = image.computedCompassAngle ?? image.compassAngle;
+  if (!spherical) {
+    const focal = image.cameraParameters?.[0];
+    return focal ? viewFromFlatCamera({
+      focal,
+      width: image.width,
+      height: image.height,
+      compassAngle: compass,
+      pitch: cameraPitch(image.rotation)
+    }, imageLngLat, lngLat, shape) : void 0;
+  }
+  let x = panoX(bearingDeg(imageLngLat, lngLat), compass);
+  try {
+    viewer.setCenter([x, 0.5]);
+    const pixel = await viewer.project({
+      lng: lngLat[0],
+      lat: lngLat[1]
+    });
+    const basic = pixel ? await viewer.unprojectToBasic(pixel) : null;
+    const projected = basic?.[0];
+    if (projected != null && projected >= 0 && projected <= 1) {
+      x = projected;
+    }
+  } catch {
+  }
+  return viewFromLocation(x, {
+    lngLat: imageLngLat,
+    isPano: true
+  }, lngLat, shape);
+};
+var xDistance = (a, b, spherical) => {
+  const distance = Math.abs(a - b);
+  return spherical ? Math.min(distance, 1 - distance) : distance;
+};
+var findOwnDetection = async (image, value, estimate) => {
+  const spherical = isSpherical(image);
+  const candidates = await fetchImageDetections(image.id, {
+    filter: (v) => v === value
+  }).catch(() => []);
+  const centerX = (detection) => viewFromOutline(detection.outline, spherical)?.center[0] ?? 0.5;
+  return candidates.sort((a, b) => estimate ? xDistance(centerX(a), estimate.center[0], spherical) - xDistance(centerX(b), estimate.center[0], spherical) : 0)[0];
+};
+var turnMapillaryViewerTo = async (viewer, image, lookAt) => {
+  let outline = lookAt.outline?.length ? lookAt.outline : void 0;
+  let outlineId = `look-at-${image.id}`;
+  let view;
+  if (!outline) {
+    view = await mapillaryViewFor(viewer, image, lookAt);
+    const own = lookAt.value ? await findOwnDetection(image, lookAt.value, view) : void 0;
+    if (own) {
+      outline = own.outline;
+      outlineId = own.id;
+    }
+  }
+  if (outline) {
+    view = viewFromOutline(outline, isSpherical(image), (lookAt.shape ?? SIGN_TARGET).maxZoom);
+  }
+  if (!view) {
+    return false;
+  }
+  viewer.setCenter(view.center);
+  viewer.setZoom(view.zoom);
+  return outline ? {
+    id: outlineId,
+    outline,
+    label: lookAt.label
+  } : null;
+};
+var setMapillaryViewerOutlines = (viewer, outlines) => {
+  const tags = viewer.getComponent("tag");
+  tags.removeAll();
+  tags.add(outlines.filter(({
+    outline
+  }) => outline.length >= 3).map(({
+    id,
+    outline,
+    label,
+    color = 16776960
+  }) => {
+    const first = outline[0];
+    const last = outline[outline.length - 1];
+    const closed = first[0] === last[0] && first[1] === last[1] ? outline : [...outline, first];
+    return new OutlineTag(id, new PolygonGeometry(closed), {
+      text: label,
+      textColor: color,
+      lineColor: color,
+      lineWidth: 2,
+      fillColor: color,
+      fillOpacity: 0.3
+    });
+  }));
+};
+var panoCenterX = (bearing, compassAngle) => ((0.5 + (bearing - compassAngle) / 360) % 1 + 1) % 1;
+var MapillaryPanel = (t0) => {
+  const $ = c(41);
+  const {
+    photo,
+    onPhotoSelected,
+    onEaseMapToPoint,
+    onViewerPhoto,
+    lookAtBearing,
+    lookAt,
+    outlines,
+    hideAttribution: t1
+  } = t0;
+  const hideAttribution = t1 === void 0 ? false : t1;
+  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);
+  const initialHideAttributionRef = useRef(hideAttribution);
+  const emitPhotoSelected = useEffectEvent(onPhotoSelected);
+  const emitEaseMapToPoint = useEffectEvent(onEaseMapToPoint);
+  let t2;
+  if ($[0] !== lookAt || $[1] !== lookAtBearing || $[2] !== outlines || $[3] !== photo.photoId) {
+    t2 = (viewer, image) => {
+      if (image.id !== photo.photoId) {
+        return;
+      }
+      if (lookAt) {
+        turnMapillaryViewerTo(viewer, image, lookAt).then((aimedAt) => {
+          if (aimedAt && !outlines && lastViewerPhotoIdRef.current === image.id) {
+            setMapillaryViewerOutlines(viewer, [aimedAt]);
+          }
+        }).catch(_temp);
+        return;
+      }
+      const spherical = image.cameraType === "spherical" || image.cameraType === "equirectangular";
+      const compass = image.computedCompassAngle ?? image.compassAngle;
+      if (lookAtBearing != null && spherical && compass != null) {
+        viewer.setCenter([panoCenterX(lookAtBearing, compass), 0.5]);
+      }
+    };
+    $[0] = lookAt;
+    $[1] = lookAtBearing;
+    $[2] = outlines;
+    $[3] = photo.photoId;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const turnToWantedBearing = useEffectEvent(t2);
+  let t3;
+  if ($[5] !== outlines) {
+    t3 = (viewer_0) => {
+      setMapillaryViewerOutlines(viewer_0, outlines ?? []);
+    };
+    $[5] = outlines;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const drawOutlines = useEffectEvent(t3);
+  let t4;
+  if ($[7] !== onViewerPhoto) {
+    t4 = (viewerPhoto) => onViewerPhoto?.(viewerPhoto);
+    $[7] = onViewerPhoto;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const emitViewerPhoto = useEffectEvent(t4);
+  let t5;
+  if ($[9] !== actions) {
+    t5 = function resetViewerStoreOnProviderChange() {
+      return () => {
+        actions.reset();
+      };
+    };
+    $[9] = actions;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== actions || $[12] !== photo.providerId) {
+    t6 = [actions, photo.providerId];
+    $[11] = actions;
+    $[12] = photo.providerId;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[14] !== actions || $[15] !== drawOutlines || $[16] !== emitEaseMapToPoint || $[17] !== emitPhotoSelected || $[18] !== emitViewerPhoto || $[19] !== turnToWantedBearing) {
+    t7 = function mountMapillaryViewer() {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const viewer_1 = new Viewer({
+        accessToken: getStreetImageryConfig().mapillaryToken,
+        container,
+        imageId: initialPhotoIdRef.current,
+        component: {
+          attribution: !initialHideAttributionRef.current,
+          cover: false,
+          sequence: {
+            visible: true
+          },
+          tag: true
+        }
+      });
+      viewerRef.current = viewer_1;
+      lastViewerPhotoIdRef.current = initialPhotoIdRef.current;
+      const flushPendingMove = () => {
+        const pendingId = pendingImageIdRef.current;
+        if (!pendingId) {
+          return;
+        }
+        pendingImageIdRef.current = null;
+        viewer_1.moveTo(pendingId).catch(_temp2);
+      };
+      const onNavigable = (event) => {
+        navigableRef.current = event.navigable;
+        if (event.navigable) {
+          flushPendingMove();
+        }
+      };
+      const onImage = (event_0) => {
+        const {
+          image: image_0
+        } = event_0;
+        lastViewerPhotoIdRef.current = image_0.id;
+        turnToWantedBearing(viewer_1, image_0);
+        drawOutlines(viewer_1);
+        emitPhotoSelected({
+          provider: "mapillary",
+          sequenceId: image_0.sequenceId,
+          photoId: image_0.id
+        });
+        const position = image_0.lngLat ?? image_0.originalLngLat;
+        if (!position) {
+          return;
+        }
+        emitViewerPhoto({
+          providerId: "mapillary",
+          photoId: image_0.id,
+          sequenceId: image_0.sequenceId,
+          capturedAt: image_0.capturedAt,
+          isPano: image_0.cameraType === "spherical" || image_0.cameraType === "equirectangular",
+          heading: image_0.computedCompassAngle ?? image_0.compassAngle,
+          lngLat: [position.lng, position.lat],
+          ...image_0.creatorUsername ? {
+            creatorName: image_0.creatorUsername
+          } : {}
+        });
+        const isFlat = image_0.cameraType !== "spherical" && image_0.cameraType !== "equirectangular";
+        const compass_0 = image_0.computedCompassAngle ?? image_0.compassAngle;
+        actions.setPov({
+          lngLat: [position.lng, position.lat],
+          ...isFlat && compass_0 != null ? {
+            bearing: compass_0
+          } : {}
+        });
+        emitEaseMapToPoint(position.lng, position.lat);
+      };
+      const flushBearing = () => {
+        bearingRafRef.current = null;
+        if (pendingBearingRef.current != null) {
+          actions.setPov({
+            bearing: pendingBearingRef.current
+          });
+          pendingBearingRef.current = null;
+        }
+        viewer_1.getFieldOfView().then((fov) => {
+          actions.setPov({
+            hfov: fov
+          });
+        }).catch(_temp3);
+      };
+      const onBearing = (event_1) => {
+        pendingBearingRef.current = event_1.bearing;
+        if (bearingRafRef.current == null) {
+          bearingRafRef.current = requestAnimationFrame(flushBearing);
+        }
+      };
+      viewer_1.on("navigable", onNavigable);
+      viewer_1.on("image", onImage);
+      viewer_1.on("bearing", onBearing);
+      const resizeObserver = new ResizeObserver(() => {
+        viewer_1.resize();
+      });
+      resizeObserver.observe(container);
+      return () => {
+        if (bearingRafRef.current != null) {
+          cancelAnimationFrame(bearingRafRef.current);
+          bearingRafRef.current = null;
+        }
+        resizeObserver.disconnect();
+        viewer_1.off("navigable", onNavigable);
+        viewer_1.off("image", onImage);
+        viewer_1.off("bearing", onBearing);
+        viewer_1.remove();
+        viewerRef.current = null;
+      };
+    };
+    $[14] = actions;
+    $[15] = drawOutlines;
+    $[16] = emitEaseMapToPoint;
+    $[17] = emitPhotoSelected;
+    $[18] = emitViewerPhoto;
+    $[19] = turnToWantedBearing;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  let t8;
+  if ($[21] !== actions) {
+    t8 = [actions];
+    $[21] = actions;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  useEffect(t7, t8);
+  let t10;
+  let t9;
+  if ($[23] !== actions || $[24] !== photo.photoId) {
+    t9 = function syncExternalPhotoSelection() {
+      const viewer_2 = viewerRef.current;
+      if (!viewer_2 || photo.photoId === lastViewerPhotoIdRef.current) {
+        return;
+      }
+      actions.reset();
+      lastViewerPhotoIdRef.current = photo.photoId;
+      if (navigableRef.current) {
+        viewer_2.moveTo(photo.photoId).catch(_temp4);
+      } else {
+        pendingImageIdRef.current = photo.photoId;
+      }
+    };
+    t10 = [actions, photo.photoId];
+    $[23] = actions;
+    $[24] = photo.photoId;
+    $[25] = t10;
+    $[26] = t9;
+  } else {
+    t10 = $[25];
+    t9 = $[26];
+  }
+  useEffect(t9, t10);
+  let t11;
+  if ($[27] !== lookAt || $[28] !== lookAtBearing) {
+    t11 = lookAt ? `${lookAt.lngLat.join(",")}|${lookAt.outline?.length ?? 0}|${lookAt.value ?? ""}` : String(lookAtBearing);
+    $[27] = lookAt;
+    $[28] = lookAtBearing;
+    $[29] = t11;
+  } else {
+    t11 = $[29];
+  }
+  const lookAtKey = t11;
+  let t12;
+  if ($[30] !== photo.photoId || $[31] !== turnToWantedBearing) {
+    t12 = function turnToTargetOnChange() {
+      const viewer_3 = viewerRef.current;
+      if (!viewer_3 || lastViewerPhotoIdRef.current !== photo.photoId) {
+        return;
+      }
+      viewer_3.getImage().then((image_1) => turnToWantedBearing(viewer_3, image_1)).catch(_temp5);
+    };
+    $[30] = photo.photoId;
+    $[31] = turnToWantedBearing;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  let t13;
+  if ($[33] !== lookAtKey || $[34] !== photo.photoId) {
+    t13 = [lookAtKey, photo.photoId];
+    $[33] = lookAtKey;
+    $[34] = photo.photoId;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  useEffect(t12, t13);
+  let t14;
+  if ($[36] !== drawOutlines) {
+    t14 = function redrawOutlinesOnChange() {
+      const viewer_4 = viewerRef.current;
+      if (viewer_4 && navigableRef.current) {
+        drawOutlines(viewer_4);
+      }
+    };
+    $[36] = drawOutlines;
+    $[37] = t14;
+  } else {
+    t14 = $[37];
+  }
+  let t15;
+  if ($[38] !== outlines) {
+    t15 = [outlines];
+    $[38] = outlines;
+    $[39] = t15;
+  } else {
+    t15 = $[39];
+  }
+  useEffect(t14, t15);
+  let t16;
+  if ($[40] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t16 = /* @__PURE__ */ jsx("div", { ref: containerRef, className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: {
+      aspectRatio: "4 / 3"
+    } });
+    $[40] = t16;
+  } else {
+    t16 = $[40];
+  }
+  return t16;
+};
+function _temp() {
+}
+function _temp2() {
+}
+function _temp3() {
+}
+function _temp4() {
+}
+function _temp5() {
+}
+
+export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo };

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;