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

package/dist/chunk-SGIB7AVC.js

@@ -0,0 +1,309 @@
+import { useViewerActions } from './chunk-25UGGXIE.js';
+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 = ({
+  photo,
+  onPhotoSelected,
+  onEaseMapToPoint,
+  onViewerPhoto,
+  lookAtBearing,
+  lookAt,
+  outlines,
+  hideAttribution = false
+}) => {
+  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);
+  const turnToWantedBearing = useEffectEvent((viewer, image) => {
+    if (image.id !== photo.photoId) {
+      return;
+    }
+    if (lookAt) {
+      void turnMapillaryViewerTo(viewer, image, lookAt).then((aimedAt) => {
+        if (aimedAt && !outlines && lastViewerPhotoIdRef.current === image.id) {
+          setMapillaryViewerOutlines(viewer, [aimedAt]);
+        }
+      }).catch(() => {
+      });
+      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]);
+    }
+  });
+  const drawOutlines = useEffectEvent((viewer) => {
+    setMapillaryViewerOutlines(viewer, outlines ?? []);
+  });
+  const emitViewerPhoto = useEffectEvent(
+    (viewerPhoto) => onViewerPhoto?.(viewerPhoto)
+  );
+  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: {
+          attribution: !initialHideAttributionRef.current,
+          cover: false,
+          sequence: { visible: true },
+          tag: 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;
+        turnToWantedBearing(viewer, image);
+        drawOutlines(viewer);
+        emitPhotoSelected({
+          provider: "mapillary",
+          sequenceId: image.sequenceId,
+          photoId: image.id
+        });
+        const position = image.lngLat ?? image.originalLngLat;
+        if (!position) {
+          return;
+        }
+        emitViewerPhoto({
+          providerId: "mapillary",
+          photoId: image.id,
+          sequenceId: image.sequenceId,
+          capturedAt: image.capturedAt,
+          isPano: image.cameraType === "spherical" || image.cameraType === "equirectangular",
+          heading: image.computedCompassAngle ?? image.compassAngle,
+          lngLat: [position.lng, position.lat],
+          ...image.creatorUsername ? { creatorName: image.creatorUsername } : {}
+        });
+        const isFlat = image.cameraType !== "spherical" && image.cameraType !== "equirectangular";
+        const compass = image.computedCompassAngle ?? image.compassAngle;
+        actions.setPov({
+          lngLat: [position.lng, position.lat],
+          ...isFlat && compass != null ? { bearing: compass } : {}
+        });
+        emitEaseMapToPoint(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]
+  );
+  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]
+  );
+  const lookAtKey = lookAt ? `${lookAt.lngLat.join(",")}|${lookAt.outline?.length ?? 0}|${lookAt.value ?? ""}` : String(lookAtBearing);
+  useEffect(
+    function turnToTargetOnChange() {
+      const viewer = viewerRef.current;
+      if (!viewer || lastViewerPhotoIdRef.current !== photo.photoId) {
+        return;
+      }
+      void viewer.getImage().then((image) => turnToWantedBearing(viewer, image)).catch(() => {
+      });
+    },
+    [lookAtKey, photo.photoId]
+  );
+  useEffect(
+    function redrawOutlinesOnChange() {
+      const viewer = viewerRef.current;
+      if (viewer && navigableRef.current) {
+        drawOutlines(viewer);
+      }
+    },
+    [outlines]
+  );
+  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, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo };