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

package/dist/{chunk-XQXYV6SR.js → chunk-5D7YCQUN.js}

@@ -1,5 +1,6 @@
-import { useViewerActions } from './chunk-25UGGXIE.js';
-import { getStreetImageryConfig, providerExternalLink } from '@osm-editor-kit/street-imagery';
+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';
@@ -17,7 +18,11 @@ var panoramaxItemSize = (item) => orientation(item)?.sensor_array_dimensions ??
 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 ?? {};
+  const {
+    hd,
+    sd,
+    thumb
+  } = item.assets ?? {};
   return sd?.href ?? hd?.href ?? thumb?.href ?? "";
 };
 var TILE_SIZE = 1024;
@@ -34,7 +39,10 @@ var panoramaxTilesOfLevel = (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 });
+      tiles.push({
+        x,
+        y
+      });
     }
   }
   return tiles;
@@ -75,19 +83,45 @@ var panoramaxPhotoFromItem = (item) => {
   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) } : {}
+    ...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",
@@ -97,7 +131,9 @@ var panoramaxPhotoFromItem = (item) => {
     isPano,
     heading: properties["view:azimuth"] ?? null,
     lngLat: item.geometry.coordinates,
-    ...creatorName ? { creatorName } : {},
+    ...creatorName ? {
+      creatorName
+    } : {},
     details
   };
 };
@@ -119,7 +155,9 @@ var PanoramaxDataProvider = class extends DataProviderBase {
   itemRequests = /* @__PURE__ */ new Map();
   imageBuffers = /* @__PURE__ */ new Map();
   pictures = /* @__PURE__ */ new Map();
-  constructor({ endpoint }) {
+  constructor({
+    endpoint
+  }) {
     super(new S2GeometryProvider());
     this.endpoint = endpoint.replace(/\/$/, "");
   }
@@ -129,11 +167,17 @@ var PanoramaxDataProvider = class extends DataProviderBase {
   }
   // Only the arrows to pictures nearby need these, and those need a 3D reconstruction.
   getCoreImages(cellId) {
-    return Promise.resolve({ cell_id: cellId, images: [] });
+    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 }));
+    return items.map((item) => ({
+      node: this.toImageEnt(item),
+      node_id: item.id
+    }));
   }
   getSpatialImages(imageIds) {
     return this.getImages(imageIds);
@@ -144,12 +188,11 @@ var PanoramaxDataProvider = class extends DataProviderBase {
     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) };
+    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) {
@@ -170,7 +213,15 @@ var PanoramaxDataProvider = class extends DataProviderBase {
     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 }))
+      node: tiles.map(({
+        x,
+        y
+      }) => ({
+        url: `${TILE_PREFIX}${imageId}/${z}/${x}/${y}`,
+        x,
+        y,
+        z
+      }))
     };
   }
   async cutTile(url) {
@@ -180,27 +231,26 @@ var PanoramaxDataProvider = class extends DataProviderBase {
       throw new Error(`Panoramax picture ${imageId} not loaded`);
     }
     const size = panoramaxViewerSize(item);
-    const { hd, sd } = item.assets ?? {};
+    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 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 });
+    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) {
@@ -219,15 +269,24 @@ var PanoramaxDataProvider = class extends DataProviderBase {
     return picture;
   }
   getMesh() {
-    return Promise.resolve({ faces: [], vertices: [] });
+    return Promise.resolve({
+      faces: [],
+      vertices: []
+    });
   }
   getCluster(url) {
-    return Promise.resolve({ id: url, points: {}, reference: { lat: 0, lng: 0, alt: 0 } });
+    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)))
-    ];
+    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) => {
@@ -256,24 +315,37 @@ var PanoramaxDataProvider = class extends DataProviderBase {
     const [width, height] = panoramaxViewerSize(item);
     const spherical = isPanoramaxItemSpherical(item);
     const properties = item.properties ?? {};
-    const none = { id: "", url: "" };
+    const none = {
+      id: "",
+      url: ""
+    };
     return {
       id: item.id,
-      geometry: { lat, lng },
-      sequence: { id: `${SEQUENCE_PREFIX}${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"] ?? "" },
+      creator: {
+        id: "",
+        username: properties["geovisio:producer"] ?? ""
+      },
       // Panoramax serves its pictures upright.
       exif_orientation: 1,
       width,
       height,
       mesh: none,
-      owner: { id: "" },
+      owner: {
+        id: ""
+      },
       thumb: {
         id: item.id,
         url: panoramaxItemImageUrl(item)
@@ -281,13 +353,16 @@ var PanoramaxDataProvider = class extends DataProviderBase {
     };
   }
 };
-var PanoramaxPanel = ({
-  photo,
-  onPhotoSelected,
-  onEaseMapToPoint,
-  onViewerPhoto,
-  hideAttribution = false
-}) => {
+var PanoramaxPanel = (t0) => {
+  const $ = c(25);
+  const {
+    photo,
+    onPhotoSelected,
+    onEaseMapToPoint,
+    onViewerPhoto,
+    hideAttribution: t1
+  } = t0;
+  const hideAttribution = t1 === void 0 ? false : t1;
   const containerRef = useRef(null);
   const viewerRef = useRef(null);
   const navigableRef = useRef(false);
@@ -300,19 +375,40 @@ var PanoramaxPanel = ({
   const [shownPhoto, setShownPhoto] = useState(null);
   const emitPhotoSelected = useEffectEvent(onPhotoSelected);
   const emitEaseMapToPoint = useEffectEvent(onEaseMapToPoint);
-  const emitViewerPhoto = useEffectEvent(
-    (viewerPhoto) => onViewerPhoto?.(viewerPhoto)
-  );
-  useEffect(
-    function resetViewerStoreOnProviderChange() {
+  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();
       };
-    },
-    [actions, photo.providerId]
-  );
-  useEffect(
-    function mountViewer() {
+    };
+    $[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;
@@ -325,12 +421,19 @@ var PanoramaxPanel = ({
         dataProvider,
         imageId: initialPhotoIdRef.current,
         component: {
-          // The attribution of the viewer links to mapillary.com.
           attribution: false,
-          // Load only the direct neighbours ahead.
-          cache: { depth: { sequence: 1, spherical: 0, step: 0, turn: 0 } },
+          cache: {
+            depth: {
+              sequence: 1,
+              spherical: 0,
+              step: 0,
+              turn: 0
+            }
+          },
           cover: false,
-          sequence: { visible: true }
+          sequence: {
+            visible: true
+          }
         }
       });
       viewerRef.current = viewer;
@@ -341,8 +444,7 @@ var PanoramaxPanel = ({
           return;
         }
         pendingImageIdRef.current = null;
-        void viewer.moveTo(pendingId).catch(() => {
-        });
+        viewer.moveTo(pendingId).catch(_temp);
       };
       const onNavigable = (event) => {
         navigableRef.current = event.navigable;
@@ -350,40 +452,47 @@ var PanoramaxPanel = ({
           flushPendingMove();
         }
       };
-      const onImage = (event) => {
-        const { image } = event;
+      const onImage = (event_0) => {
+        const {
+          image
+        } = event_0;
         lastViewerPhotoIdRef.current = image.id;
         const item = dataProvider.getItem(image.id);
         if (!item) {
           return;
         }
-        const viewerPhoto = panoramaxPhotoFromItem(item);
+        const viewerPhoto_0 = panoramaxPhotoFromItem(item);
         emitPhotoSelected({
           provider: "panoramax",
-          sequenceId: viewerPhoto.sequenceId ?? `photo:${image.id}`,
+          sequenceId: viewerPhoto_0.sequenceId ?? `photo:${image.id}`,
           photoId: image.id
         });
-        setShownPhoto(viewerPhoto);
-        emitViewerPhoto(viewerPhoto);
+        setShownPhoto(viewerPhoto_0);
+        emitViewerPhoto(viewerPhoto_0);
         actions.setPov({
-          lngLat: viewerPhoto.lngLat,
-          ...!viewerPhoto.isPano && viewerPhoto.heading != null ? { bearing: viewerPhoto.heading } : {}
+          lngLat: viewerPhoto_0.lngLat,
+          ...!viewerPhoto_0.isPano && viewerPhoto_0.heading != null ? {
+            bearing: viewerPhoto_0.heading
+          } : {}
         });
-        emitEaseMapToPoint(...viewerPhoto.lngLat);
+        emitEaseMapToPoint(...viewerPhoto_0.lngLat);
       };
       const flushBearing = () => {
         bearingRafRef.current = null;
         if (pendingBearingRef.current != null) {
-          actions.setPov({ bearing: pendingBearingRef.current });
+          actions.setPov({
+            bearing: pendingBearingRef.current
+          });
           pendingBearingRef.current = null;
         }
-        void viewer.getFieldOfView().then((fov) => {
-          actions.setPov({ hfov: fov });
-        }).catch(() => {
-        });
+        viewer.getFieldOfView().then((fov) => {
+          actions.setPov({
+            hfov: fov
+          });
+        }).catch(_temp2);
       };
-      const onBearing = (event) => {
-        pendingBearingRef.current = event.bearing;
+      const onBearing = (event_1) => {
+        pendingBearingRef.current = event_1.bearing;
         if (bearingRafRef.current == null) {
           bearingRafRef.current = requestAnimationFrame(flushBearing);
         }
@@ -407,60 +516,95 @@ var PanoramaxPanel = ({
         viewer.remove();
         viewerRef.current = null;
       };
-    },
-    [actions]
-  );
-  useEffect(
-    function syncExternalPhotoSelection() {
-      const viewer = viewerRef.current;
-      if (!viewer || photo.photoId === lastViewerPhotoIdRef.current) {
+    };
+    $[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;
+  let t8;
+  if ($[14] !== actions || $[15] !== photo.photoId) {
+    t7 = function syncExternalPhotoSelection() {
+      const viewer_0 = viewerRef.current;
+      if (!viewer_0 || photo.photoId === lastViewerPhotoIdRef.current) {
         return;
       }
       actions.reset();
       lastViewerPhotoIdRef.current = photo.photoId;
       if (navigableRef.current) {
-        void viewer.moveTo(photo.photoId).catch(() => {
-        });
+        viewer_0.moveTo(photo.photoId).catch(_temp3);
       } else {
         pendingImageIdRef.current = photo.photoId;
       }
-    },
-    [actions, photo.photoId]
-  );
+    };
+    t8 = [actions, photo.photoId];
+    $[14] = actions;
+    $[15] = photo.photoId;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t7 = $[16];
+    t8 = $[17];
+  }
+  useEffect(t7, t8);
   const attribution = hideAttribution ? null : shownPhoto;
   const license = attribution?.details?.license;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "relative min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
-      style: { aspectRatio: "4 / 3" },
-      children: [
-        /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full w-full" }),
-        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
-      ]
-    }
-  );
+  let t10;
+  let t9;
+  if ($[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
+      aspectRatio: "4 / 3"
+    };
+    t10 = /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full w-full" });
+    $[18] = t10;
+    $[19] = t9;
+  } else {
+    t10 = $[18];
+    t9 = $[19];
+  }
+  let t11;
+  if ($[20] !== attribution || $[21] !== license) {
+    t11 = 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;
+    $[20] = attribution;
+    $[21] = license;
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  let t12;
+  if ($[23] !== t11) {
+    t12 = /* @__PURE__ */ jsxs("div", { className: "relative min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: t9, children: [
+      t10,
+      t11
+    ] });
+    $[23] = t11;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  return t12;
 };
+function _temp() {
+}
+function _temp2() {
+}
+function _temp3() {
+}
 
 export { PanoramaxDataProvider, PanoramaxPanel, panoramaxPhotoFromItem };

package/dist/{chunk-25UGGXIE.js → chunk-GYUS2JVV.js}

@@ -17,9 +17,29 @@ var useViewerStore = create()((set) => ({
     reset: () => set(initialState)
   }
 }));
-var useViewerBearing = () => useViewerStore((state) => state.bearing);
-var useViewerHfov = () => useViewerStore((state) => state.hfov);
-var useViewerLngLat = () => useViewerStore((state) => state.lngLat);
-var useViewerActions = () => useViewerStore((state) => state.actions);
+var useViewerBearing = () => {
+  return useViewerStore(_temp);
+};
+var useViewerHfov = () => {
+  return useViewerStore(_temp2);
+};
+var useViewerLngLat = () => {
+  return useViewerStore(_temp3);
+};
+var useViewerActions = () => {
+  return useViewerStore(_temp4);
+};
+function _temp(state) {
+  return state.bearing;
+}
+function _temp2(state) {
+  return state.hfov;
+}
+function _temp3(state) {
+  return state.lngLat;
+}
+function _temp4(state) {
+  return state.actions;
+}
 
 export { useViewerActions, useViewerBearing, useViewerHfov, useViewerLngLat };