@osm-editor-kit/street-imagery-react 0.1.0-alpha.8 → 1.0.0

package/dist/chunk-LZR5SZDS.js

@@ -0,0 +1,498 @@
+import { watchMapillaryJsView } from './chunk-XLBFXACK.js';
+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(49);
+  const {
+    photo,
+    onPhotoSelected,
+    onEaseMapToPoint,
+    onViewerPhoto,
+    onViewerView,
+    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 t9;
+  if ($[23] !== onViewerView) {
+    t9 = (view) => onViewerView?.(view);
+    $[23] = onViewerView;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  const emitViewerView = useEffectEvent(t9);
+  const reportsView = onViewerView !== void 0;
+  let t10;
+  if ($[25] !== emitViewerView || $[26] !== reportsView) {
+    t10 = function reportViewInPhoto() {
+      const viewer_2 = viewerRef.current;
+      if (!viewer_2 || !reportsView) {
+        return;
+      }
+      const read = async () => {
+        const [image_1, t112, zoom] = await Promise.all([viewer_2.getImage(), viewer_2.getCenter(), viewer_2.getZoom()]);
+        const [t122, t132] = t112;
+        const x = t122 === void 0 ? 0.5 : t122;
+        const y = t132 === void 0 ? 0.5 : t132;
+        return {
+          providerId: "mapillary",
+          photoId: image_1.id,
+          x,
+          y,
+          zoom
+        };
+      };
+      return watchMapillaryJsView(viewer_2, read, (view_0) => emitViewerView(view_0));
+    };
+    $[25] = emitViewerView;
+    $[26] = reportsView;
+    $[27] = t10;
+  } else {
+    t10 = $[27];
+  }
+  let t11;
+  if ($[28] !== actions || $[29] !== reportsView) {
+    t11 = [actions, reportsView];
+    $[28] = actions;
+    $[29] = reportsView;
+    $[30] = t11;
+  } else {
+    t11 = $[30];
+  }
+  useEffect(t10, t11);
+  let t12;
+  let t13;
+  if ($[31] !== actions || $[32] !== photo.photoId) {
+    t12 = function syncExternalPhotoSelection() {
+      const viewer_3 = viewerRef.current;
+      if (!viewer_3 || photo.photoId === lastViewerPhotoIdRef.current) {
+        return;
+      }
+      actions.reset();
+      lastViewerPhotoIdRef.current = photo.photoId;
+      if (navigableRef.current) {
+        viewer_3.moveTo(photo.photoId).catch(_temp4);
+      } else {
+        pendingImageIdRef.current = photo.photoId;
+      }
+    };
+    t13 = [actions, photo.photoId];
+    $[31] = actions;
+    $[32] = photo.photoId;
+    $[33] = t12;
+    $[34] = t13;
+  } else {
+    t12 = $[33];
+    t13 = $[34];
+  }
+  useEffect(t12, t13);
+  let t14;
+  if ($[35] !== lookAt || $[36] !== lookAtBearing) {
+    t14 = lookAt ? `${lookAt.lngLat.join(",")}|${lookAt.outline?.length ?? 0}|${lookAt.value ?? ""}` : String(lookAtBearing);
+    $[35] = lookAt;
+    $[36] = lookAtBearing;
+    $[37] = t14;
+  } else {
+    t14 = $[37];
+  }
+  const lookAtKey = t14;
+  let t15;
+  if ($[38] !== photo.photoId || $[39] !== turnToWantedBearing) {
+    t15 = function turnToTargetOnChange() {
+      const viewer_4 = viewerRef.current;
+      if (!viewer_4 || lastViewerPhotoIdRef.current !== photo.photoId) {
+        return;
+      }
+      viewer_4.getImage().then((image_2) => turnToWantedBearing(viewer_4, image_2)).catch(_temp5);
+    };
+    $[38] = photo.photoId;
+    $[39] = turnToWantedBearing;
+    $[40] = t15;
+  } else {
+    t15 = $[40];
+  }
+  let t16;
+  if ($[41] !== lookAtKey || $[42] !== photo.photoId) {
+    t16 = [lookAtKey, photo.photoId];
+    $[41] = lookAtKey;
+    $[42] = photo.photoId;
+    $[43] = t16;
+  } else {
+    t16 = $[43];
+  }
+  useEffect(t15, t16);
+  let t17;
+  if ($[44] !== drawOutlines) {
+    t17 = function redrawOutlinesOnChange() {
+      const viewer_5 = viewerRef.current;
+      if (viewer_5 && navigableRef.current) {
+        drawOutlines(viewer_5);
+      }
+    };
+    $[44] = drawOutlines;
+    $[45] = t17;
+  } else {
+    t17 = $[45];
+  }
+  let t18;
+  if ($[46] !== outlines) {
+    t18 = [outlines];
+    $[46] = outlines;
+    $[47] = t18;
+  } else {
+    t18 = $[47];
+  }
+  useEffect(t17, t18);
+  let t19;
+  if ($[48] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t19 = /* @__PURE__ */ jsx("div", { ref: containerRef, className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: {
+      aspectRatio: "4 / 3"
+    } });
+    $[48] = t19;
+  } else {
+    t19 = $[48];
+  }
+  return t19;
+};
+function _temp() {
+}
+function _temp2() {
+}
+function _temp3() {
+}
+function _temp4() {
+}
+function _temp5() {
+}
+
+export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo };