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

package/dist/chunk-R6BDVYWM.js

@@ -0,0 +1,665 @@
+import { watchMapillaryJsView, panoramaxZoomLevel } from './chunk-XLBFXACK.js';
+import { useViewerActions } from './chunk-GYUS2JVV.js';
+import { c } from 'react/compiler-runtime';
+import { providerExternalLink, getStreetImageryConfig } from '@osm-editor-kit/street-imagery';
+import 'mapillary-js/dist/mapillary.css';
+import { DataProviderBase, S2GeometryProvider, Viewer } from 'mapillary-js';
+import { useRef, useState, useEffectEvent, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/panels/panoramaxItem.ts
+var DEFAULT_FIELD_OF_VIEW_DEG = 70;
+var toMs = (iso) => {
+  const ms = iso ? Date.parse(iso) : Number.NaN;
+  return Number.isNaN(ms) ? null : ms;
+};
+var orientation = (item) => item.properties?.["pers:interior_orientation"];
+var isPanoramaxItemSpherical = (item) => orientation(item)?.field_of_view === 360;
+var panoramaxItemFieldOfView = (item) => orientation(item)?.field_of_view ?? DEFAULT_FIELD_OF_VIEW_DEG;
+var panoramaxItemSize = (item) => orientation(item)?.sensor_array_dimensions ?? (isPanoramaxItemSpherical(item) ? [2, 1] : [4, 3]);
+var panoramaxItemNeighbour = (item, rel) => item.links?.find((link) => link.rel === rel)?.id ?? null;
+var SD_WIDTH = 2048;
+var panoramaxItemImageUrl = (item) => {
+  const {
+    hd,
+    sd,
+    thumb
+  } = item.assets ?? {};
+  return sd?.href ?? hd?.href ?? thumb?.href ?? "";
+};
+var TILE_SIZE = 1024;
+var tileSpan = ([width, height], z) => TILE_SIZE * 2 ** (Math.ceil(Math.log2(Math.max(width, height))) - z);
+var panoramaxViewerSize = (item) => {
+  const [width, height] = panoramaxItemSize(item);
+  const scale = 2 ** Math.ceil(Math.log2(Math.max(width, height))) / Math.max(width, height);
+  return [Math.round(width * scale), Math.round(height * scale)];
+};
+var panoramaxLevelNeedsOriginal = (size, z) => size[0] / (tileSpan(size, z) / TILE_SIZE) > SD_WIDTH;
+var panoramaxTilesOfLevel = (size, z) => {
+  const [width, height] = size;
+  const span = tileSpan(size, z);
+  const tiles = [];
+  for (let y = 0; y < Math.ceil(height / span); y++) {
+    for (let x = 0; x < Math.ceil(width / span); x++) {
+      tiles.push({
+        x,
+        y
+      });
+    }
+  }
+  return tiles;
+};
+var panoramaxTileRect = (size, tile, original) => {
+  const [width, height] = size;
+  const span = tileSpan(size, tile.z);
+  const x = tile.x * span;
+  const y = tile.y * span;
+  const cutWidth = Math.min(span, width - x);
+  const cutHeight = Math.min(span, height - y);
+  const scaleX = original.width / width;
+  const scaleY = original.height / height;
+  return {
+    x: x * scaleX,
+    y: y * scaleY,
+    width: cutWidth * scaleX,
+    height: cutHeight * scaleY,
+    outWidth: Math.max(1, Math.round(cutWidth / span * TILE_SIZE)),
+    outHeight: Math.max(1, Math.round(cutHeight / span * TILE_SIZE))
+  };
+};
+var panoramaxItemFocal = (item) => {
+  const fieldOfView = orientation(item)?.field_of_view || DEFAULT_FIELD_OF_VIEW_DEG;
+  const [width, height] = panoramaxItemSize(item);
+  const focalByWidth = 0.5 / Math.tan(Math.min(fieldOfView, 170) * Math.PI / 360);
+  return focalByWidth * (width / Math.max(width, height));
+};
+var creatorOf = (item) => item.properties?.["geovisio:producer"] ?? item.providers?.at(-1)?.name;
+var panoramaxPhotoFromItem = (item) => {
+  const properties = item.properties ?? {};
+  const camera = orientation(item);
+  const cameraName = [camera?.camera_manufacturer, camera?.camera_model].filter(Boolean).join(" ");
+  const isPano = isPanoramaxItemSpherical(item);
+  const creatorName = creatorOf(item);
+  const uploadedAt = toMs(properties.created);
+  const licenseUrl = item.links?.find((link) => link.rel === "license")?.href;
+  const instance = item.links?.find((link) => link.rel === "via")?.instance_name;
+  const exifEntries = Object.entries(properties.exif ?? {}).filter(([, value]) => typeof value === "string" || typeof value === "number").map(([key, value]) => [key, String(value)]);
+  const details = {
+    ...properties.license ? {
+      license: properties.license
+    } : {},
+    ...licenseUrl ? {
+      licenseUrl
+    } : {},
+    ...properties.datetimetz ? {
+      capturedAtLocal: properties.datetimetz
+    } : {},
+    ...uploadedAt != null ? {
+      uploadedAt
+    } : {},
+    ...cameraName ? {
+      camera: cameraName
+    } : {},
+    ...!isPano && camera?.field_of_view ? {
+      fieldOfViewDeg: camera.field_of_view
+    } : {},
+    ...properties["quality:horizontal_accuracy"] != null ? {
+      positionAccuracyMeters: properties["quality:horizontal_accuracy"]
+    } : {},
+    ...instance ? {
+      instance
+    } : {},
+    ...camera?.focal_length != null ? {
+      focalLengthMm: camera.focal_length
+    } : {},
+    ...properties["original_file:name"] ? {
+      originalFileName: properties["original_file:name"]
+    } : {},
+    ...properties["original_file:size"] != null ? {
+      originalFileSizeBytes: properties["original_file:size"]
+    } : {},
+    ...properties["geovisio:rank_in_collection"] != null ? {
+      rankInSequence: properties["geovisio:rank_in_collection"]
+    } : {},
+    ...exifEntries.length > 0 ? {
+      exif: Object.fromEntries(exifEntries)
+    } : {}
+  };
+  return {
+    providerId: "panoramax",
+    photoId: item.id,
+    sequenceId: item.collection ?? null,
+    capturedAt: toMs(properties.datetime),
+    isPano,
+    heading: properties["view:azimuth"] ?? null,
+    lngLat: item.geometry.coordinates,
+    ...creatorName ? {
+      creatorName
+    } : {},
+    details
+  };
+};
+
+// src/panels/panoramaxDataProvider.ts
+var IDS_PER_REQUEST = 40;
+var SEQUENCE_PREFIX = "panoramax-around:";
+var fetchFile = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Panoramax picture file: HTTP ${response.status}`);
+  }
+  return response;
+};
+var TILE_PREFIX = "panoramax-tile:";
+var PanoramaxDataProvider = class extends DataProviderBase {
+  endpoint;
+  items = /* @__PURE__ */ new Map();
+  itemRequests = /* @__PURE__ */ new Map();
+  imageBuffers = /* @__PURE__ */ new Map();
+  pictures = /* @__PURE__ */ new Map();
+  constructor({
+    endpoint
+  }) {
+    super(new S2GeometryProvider());
+    this.endpoint = endpoint.replace(/\/$/, "");
+  }
+  /** The Panoramax data of a picture the viewer has loaded. */
+  getItem(imageId) {
+    return this.items.get(imageId);
+  }
+  // Only the arrows to pictures nearby need these, and those need a 3D reconstruction.
+  getCoreImages(cellId) {
+    return Promise.resolve({
+      cell_id: cellId,
+      images: []
+    });
+  }
+  async getImages(imageIds) {
+    const items = await this.loadItems(imageIds);
+    return items.map((item) => ({
+      node: this.toImageEnt(item),
+      node_id: item.id
+    }));
+  }
+  getSpatialImages(imageIds) {
+    return this.getImages(imageIds);
+  }
+  async getSequence(sequenceId) {
+    const imageId = sequenceId.slice(SEQUENCE_PREFIX.length);
+    const [item] = await this.loadItems([imageId]);
+    if (!item) {
+      throw new Error(`Panoramax picture ${imageId} not found`);
+    }
+    const around = [panoramaxItemNeighbour(item, "prev"), item.id, panoramaxItemNeighbour(item, "next")];
+    return {
+      id: sequenceId,
+      image_ids: around.filter((id) => id != null)
+    };
+  }
+  // The viewer asks for the same file more than once while it starts; one download serves all.
+  getImageBuffer(url) {
+    const running = this.imageBuffers.get(url);
+    if (running) {
+      return running;
+    }
+    const load = url.startsWith(TILE_PREFIX) ? this.cutTile(url) : fetchFile(url).then((response) => response.arrayBuffer());
+    const request = load.finally(() => this.imageBuffers.delete(url));
+    this.imageBuffers.set(url, request);
+    return request;
+  }
+  async getImageTiles({
+    imageId,
+    z
+  }) {
+    const [item] = await this.loadItems([imageId]);
+    const tiles = item ? panoramaxTilesOfLevel(panoramaxViewerSize(item), z) : [];
+    return {
+      node_id: imageId,
+      node: tiles.map(({
+        x,
+        y
+      }) => ({
+        url: `${TILE_PREFIX}${imageId}/${z}/${x}/${y}`,
+        x,
+        y,
+        z
+      }))
+    };
+  }
+  async cutTile(url) {
+    const [imageId = "", z, x, y] = url.slice(TILE_PREFIX.length).split("/");
+    const item = this.items.get(imageId);
+    if (!item) {
+      throw new Error(`Panoramax picture ${imageId} not loaded`);
+    }
+    const size = panoramaxViewerSize(item);
+    const {
+      hd,
+      sd
+    } = item.assets ?? {};
+    const file = (panoramaxLevelNeedsOriginal(size, Number(z)) ? hd : sd) ?? hd ?? sd;
+    const original = await this.loadPicture(file?.href ?? "");
+    const rect = panoramaxTileRect(size, {
+      x: Number(x),
+      y: Number(y),
+      z: Number(z)
+    }, {
+      width: original.width,
+      height: original.height
+    });
+    const canvas = new OffscreenCanvas(rect.outWidth, rect.outHeight);
+    canvas.getContext("2d")?.drawImage(original, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.outWidth, rect.outHeight);
+    const blob = await canvas.convertToBlob({
+      type: "image/jpeg",
+      quality: 0.9
+    });
+    return blob.arrayBuffer();
+  }
+  loadPicture(url) {
+    const known = this.pictures.get(url);
+    if (known) {
+      return known;
+    }
+    const picture = fetchFile(url).then((response) => response.blob()).then((blob) => createImageBitmap(blob));
+    this.pictures.set(url, picture);
+    picture.catch(() => this.pictures.delete(url));
+    for (const [oldUrl, old] of [...this.pictures].slice(0, -3)) {
+      this.pictures.delete(oldUrl);
+      void old.then((bitmap) => bitmap.close()).catch(() => {
+      });
+    }
+    return picture;
+  }
+  getMesh() {
+    return Promise.resolve({
+      faces: [],
+      vertices: []
+    });
+  }
+  getCluster(url) {
+    return Promise.resolve({
+      id: url,
+      points: {},
+      reference: {
+        lat: 0,
+        lng: 0,
+        alt: 0
+      }
+    });
+  }
+  async loadItems(imageIds) {
+    const missing = [...new Set(imageIds.filter((id) => !this.items.has(id) && !this.itemRequests.has(id)))];
+    for (let start = 0; start < missing.length; start += IDS_PER_REQUEST) {
+      const ids = missing.slice(start, start + IDS_PER_REQUEST);
+      const request = fetch(`${this.endpoint}/search?ids=${ids.join(",")}&limit=${ids.length}`).then((response) => {
+        if (!response.ok) {
+          throw new Error(`Panoramax search: HTTP ${response.status}`);
+        }
+        return response.json();
+      }).then((result) => {
+        for (const item of result.features ?? []) {
+          this.items.set(item.id, item);
+        }
+      }).finally(() => {
+        for (const id of ids) {
+          this.itemRequests.delete(id);
+        }
+      });
+      for (const id of ids) {
+        this.itemRequests.set(id, request);
+      }
+    }
+    await Promise.all(imageIds.flatMap((id) => this.itemRequests.get(id) ?? []));
+    return imageIds.flatMap((id) => this.items.get(id) ?? []);
+  }
+  toImageEnt(item) {
+    const [lng, lat] = item.geometry.coordinates;
+    const [width, height] = panoramaxViewerSize(item);
+    const spherical = isPanoramaxItemSpherical(item);
+    const properties = item.properties ?? {};
+    const none = {
+      id: "",
+      url: ""
+    };
+    return {
+      id: item.id,
+      geometry: {
+        lat,
+        lng
+      },
+      sequence: {
+        id: `${SEQUENCE_PREFIX}${item.id}`
+      },
+      altitude: 0,
+      camera_type: spherical ? "spherical" : "perspective",
+      camera_parameters: spherical ? [] : [panoramaxItemFocal(item), 0, 0],
+      captured_at: Date.parse(properties.datetime ?? "") || 0,
+      compass_angle: properties["view:azimuth"] ?? 0,
+      cluster: none,
+      creator: {
+        id: "",
+        username: properties["geovisio:producer"] ?? ""
+      },
+      // Panoramax serves its pictures upright.
+      exif_orientation: 1,
+      width,
+      height,
+      mesh: none,
+      owner: {
+        id: ""
+      },
+      thumb: {
+        id: item.id,
+        url: panoramaxItemImageUrl(item)
+      }
+    };
+  }
+};
+var PanoramaxPanel = (t0) => {
+  const $ = c(33);
+  const {
+    photo,
+    onPhotoSelected,
+    onEaseMapToPoint,
+    onViewerPhoto,
+    onViewerView,
+    hideAttribution: t1
+  } = t0;
+  const hideAttribution = t1 === void 0 ? false : t1;
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const dataProviderRef = 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 [shownPhoto, setShownPhoto] = useState(null);
+  const emitPhotoSelected = useEffectEvent(onPhotoSelected);
+  const emitEaseMapToPoint = useEffectEvent(onEaseMapToPoint);
+  let t2;
+  if ($[0] !== onViewerPhoto) {
+    t2 = (viewerPhoto) => onViewerPhoto?.(viewerPhoto);
+    $[0] = onViewerPhoto;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const emitViewerPhoto = useEffectEvent(t2);
+  let t3;
+  if ($[2] !== actions) {
+    t3 = function resetViewerStoreOnProviderChange() {
+      return () => {
+        actions.reset();
+      };
+    };
+    $[2] = actions;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== actions || $[5] !== photo.providerId) {
+    t4 = [actions, photo.providerId];
+    $[4] = actions;
+    $[5] = photo.providerId;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[7] !== actions || $[8] !== emitEaseMapToPoint || $[9] !== emitPhotoSelected || $[10] !== emitViewerPhoto) {
+    t5 = function mountViewer() {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const dataProvider = new PanoramaxDataProvider({
+        endpoint: `${getStreetImageryConfig().panoramaxApiBase}/api`
+      });
+      dataProviderRef.current = dataProvider;
+      const viewer = new Viewer({
+        container,
+        dataProvider,
+        imageId: initialPhotoIdRef.current,
+        component: {
+          attribution: false,
+          cache: {
+            depth: {
+              sequence: 1,
+              spherical: 0,
+              step: 0,
+              turn: 0
+            }
+          },
+          cover: false,
+          sequence: {
+            visible: true
+          }
+        }
+      });
+      viewerRef.current = viewer;
+      lastViewerPhotoIdRef.current = initialPhotoIdRef.current;
+      const flushPendingMove = () => {
+        const pendingId = pendingImageIdRef.current;
+        if (!pendingId) {
+          return;
+        }
+        pendingImageIdRef.current = null;
+        viewer.moveTo(pendingId).catch(_temp);
+      };
+      const onNavigable = (event) => {
+        navigableRef.current = event.navigable;
+        if (event.navigable) {
+          flushPendingMove();
+        }
+      };
+      const onImage = (event_0) => {
+        const {
+          image
+        } = event_0;
+        lastViewerPhotoIdRef.current = image.id;
+        const item = dataProvider.getItem(image.id);
+        if (!item) {
+          return;
+        }
+        const viewerPhoto_0 = panoramaxPhotoFromItem(item);
+        emitPhotoSelected({
+          provider: "panoramax",
+          sequenceId: viewerPhoto_0.sequenceId ?? `photo:${image.id}`,
+          photoId: image.id
+        });
+        setShownPhoto(viewerPhoto_0);
+        emitViewerPhoto(viewerPhoto_0);
+        actions.setPov({
+          lngLat: viewerPhoto_0.lngLat,
+          ...!viewerPhoto_0.isPano && viewerPhoto_0.heading != null ? {
+            bearing: viewerPhoto_0.heading
+          } : {}
+        });
+        emitEaseMapToPoint(...viewerPhoto_0.lngLat);
+      };
+      const flushBearing = () => {
+        bearingRafRef.current = null;
+        if (pendingBearingRef.current != null) {
+          actions.setPov({
+            bearing: pendingBearingRef.current
+          });
+          pendingBearingRef.current = null;
+        }
+        viewer.getFieldOfView().then((fov) => {
+          actions.setPov({
+            hfov: fov
+          });
+        }).catch(_temp2);
+      };
+      const onBearing = (event_1) => {
+        pendingBearingRef.current = event_1.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;
+      };
+    };
+    $[7] = actions;
+    $[8] = emitEaseMapToPoint;
+    $[9] = emitPhotoSelected;
+    $[10] = emitViewerPhoto;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== actions) {
+    t6 = [actions];
+    $[12] = actions;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[14] !== onViewerView) {
+    t7 = (view) => onViewerView?.(view);
+    $[14] = onViewerView;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  const emitViewerView = useEffectEvent(t7);
+  const reportsView = onViewerView !== void 0;
+  let t8;
+  if ($[16] !== emitViewerView || $[17] !== reportsView) {
+    t8 = function reportViewInPhoto() {
+      const viewer_0 = viewerRef.current;
+      if (!viewer_0 || !reportsView) {
+        return;
+      }
+      const read = async () => {
+        const [image_0, t92, fov_0] = await Promise.all([viewer_0.getImage(), viewer_0.getPointOfView(), viewer_0.getFieldOfView()]);
+        const {
+          bearing,
+          tilt
+        } = t92;
+        const item_0 = dataProviderRef.current?.getItem(image_0.id);
+        return item_0 ? {
+          providerId: "panoramax",
+          photoId: image_0.id,
+          heading: bearing,
+          pitch: tilt,
+          zoom: panoramaxZoomLevel(fov_0, panoramaxItemFieldOfView(item_0))
+        } : null;
+      };
+      return watchMapillaryJsView(viewer_0, read, (view_0) => emitViewerView(view_0));
+    };
+    $[16] = emitViewerView;
+    $[17] = reportsView;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== actions || $[20] !== reportsView) {
+    t9 = [actions, reportsView];
+    $[19] = actions;
+    $[20] = reportsView;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  useEffect(t8, t9);
+  let t10;
+  let t11;
+  if ($[22] !== actions || $[23] !== photo.photoId) {
+    t10 = function syncExternalPhotoSelection() {
+      const viewer_1 = viewerRef.current;
+      if (!viewer_1 || photo.photoId === lastViewerPhotoIdRef.current) {
+        return;
+      }
+      actions.reset();
+      lastViewerPhotoIdRef.current = photo.photoId;
+      if (navigableRef.current) {
+        viewer_1.moveTo(photo.photoId).catch(_temp3);
+      } else {
+        pendingImageIdRef.current = photo.photoId;
+      }
+    };
+    t11 = [actions, photo.photoId];
+    $[22] = actions;
+    $[23] = photo.photoId;
+    $[24] = t10;
+    $[25] = t11;
+  } else {
+    t10 = $[24];
+    t11 = $[25];
+  }
+  useEffect(t10, t11);
+  const attribution = hideAttribution ? null : shownPhoto;
+  const license = attribution?.details?.license;
+  let t12;
+  let t13;
+  if ($[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t12 = {
+      aspectRatio: "4 / 3"
+    };
+    t13 = /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full w-full" });
+    $[26] = t12;
+    $[27] = t13;
+  } else {
+    t12 = $[26];
+    t13 = $[27];
+  }
+  let t14;
+  if ($[28] !== attribution || $[29] !== license) {
+    t14 = attribution ? /* @__PURE__ */ jsxs("div", { className: "absolute right-0 bottom-0 flex gap-1.5 rounded-tl bg-black/50 px-1.5 py-0.5 text-[11px] leading-4 text-white", children: [
+      /* @__PURE__ */ jsx("a", { className: "underline-offset-2 hover:underline", href: providerExternalLink(attribution), rel: "noreferrer", target: "_blank", children: ["Panoramax", attribution.creatorName].filter(Boolean).join(" \xB7 ") }),
+      license ? attribution.details?.licenseUrl ? /* @__PURE__ */ jsx("a", { className: "underline-offset-2 hover:underline", href: attribution.details.licenseUrl, rel: "noreferrer", target: "_blank", children: license }) : /* @__PURE__ */ jsx("span", { children: license }) : null
+    ] }) : null;
+    $[28] = attribution;
+    $[29] = license;
+    $[30] = t14;
+  } else {
+    t14 = $[30];
+  }
+  let t15;
+  if ($[31] !== t14) {
+    t15 = /* @__PURE__ */ jsxs("div", { className: "relative min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: t12, children: [
+      t13,
+      t14
+    ] });
+    $[31] = t14;
+    $[32] = t15;
+  } else {
+    t15 = $[32];
+  }
+  return t15;
+};
+function _temp() {
+}
+function _temp2() {
+}
+function _temp3() {
+}
+
+export { PanoramaxDataProvider, PanoramaxPanel, panoramaxPhotoFromItem };