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

package/dist/index.js

@@ -1,10 +1,10 @@
 import { useStreetImageryI18n } from './chunk-6EMFFIL2.js';
 export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n } from './chunk-6EMFFIL2.js';
 export { useViewerActions, useViewerBearing, useViewerHfov, useViewerLngLat } from './chunk-25UGGXIE.js';
-import { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, providerById, providerCoversBbox, fetchedSequencesMinZoom, viewConeGeoJson, viewShapeRadiusMeters, setStreetImageryConfig, viewfieldLayerId, photoLayerId, photoTargetLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoMatchesFilters, resolvePhotoPanoramaUrl, photoFullUrlQueryKey, resolvePhotoThumbnailUrl, photoThumbnailQueryKey, formatLocalDateTime, formatMonth, formatRelativeDate, formatDateTooltip, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, SIGN_TARGET, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, fetchImageDetections, bestTargetImage, findLocationOpener, MAP_FEATURE_COLOR, mapillaryValueName, mapillaryIconUrl, dateRangeToSliderPositions, sliderPositionsToDateRange, dateSliderBins, dateSliderPosition, yearsAgoMs, parseIsoDateStartMs, openLocationInNewTab, formatDate, isIsoDate, alignLineToPoints, coneRadiusMeters, mapFeaturesToFeatureCollection, emptyPointCollection, buildMapFeatureLayerFilter, featureSourceId, photosToFeatureCollection, photosToViewfieldsFeatureCollection, emptyPolygonCollection, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceTilesSourceId, renameExpressionProperties, sequenceTilesLayerId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId, VIEWFIELD_MIN_ZOOM } from '@osm-editor-kit/street-imagery';
+import { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, providerById, providerCoversBbox, fetchedSequencesMinZoom, viewConeGeoJson, viewShapeRadiusMeters, setStreetImageryConfig, viewfieldLayerId, photoLayerId, photoTargetLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoFilter, resolvePhotoPanoramaUrl, photoFullUrlQueryKey, resolvePhotoThumbnailUrl, photoThumbnailQueryKey, formatLocalDateTime, formatMonth, formatRelativeDate, formatDateTooltip, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, SIGN_TARGET, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, fetchImageDetections, bestTargetImage, findLocationOpener, MAP_FEATURE_COLOR, mapillaryValueName, mapillaryIconUrl, dateRangeToSliderPositions, sliderPositionsToDateRange, dateSliderBins, dateSliderPosition, yearsAgoMs, parseIsoDateStartMs, openLocationInNewTab, formatDate, isIsoDate, alignLineToPoints, coneRadiusMeters, emptyPointCollection, mapFeaturesToFeatureCollection, buildMapFeatureLayerFilter, featureSourceId, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceTilesSourceId, renameExpressionProperties, sequenceTilesLayerId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId, VIEWFIELD_MIN_ZOOM, photosToFeatureCollection, photosToViewfieldsFeatureCollection, emptyPolygonCollection } from '@osm-editor-kit/street-imagery';
 import { Source, Layer, useMap } from 'react-map-gl/maplibre';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { lazy, useEffect, Fragment as Fragment$1, Suspense, useState, useRef, useEffectEvent } from 'react';
+import { lazy, useEffect, Fragment as Fragment$1, Suspense, useState, useRef, useEffectEvent, useMemo } from 'react';
 import { keepPreviousData, useQuery, useQueries } from '@tanstack/react-query';
 import { create } from 'zustand';
 
@@ -280,8 +280,95 @@ var AGE_SHADE = [
   ]
 ];
 var PHOTO_TARGET_RADIUS_PX = 10;
-var PHOTO_SORT_KEY = ["coalesce", ["get", "capturedAt"], 0];
-var FEATURE_SORT_KEY = ["coalesce", ["get", "lastSeenAt"], 0];
+var NO_PHOTOS = [];
+var NO_SEQUENCES = [];
+var NO_MAP_FEATURES = [];
+var bboxesOverlap = (a, b) => a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1];
+var sequenceBbox = ({ geometry }) => {
+  const lines = geometry.type === "LineString" ? [geometry.coordinates] : geometry.coordinates;
+  const bbox = [Infinity, Infinity, -Infinity, -Infinity];
+  for (const line of lines) {
+    for (const [lng, lat] of line) {
+      if (lng === void 0 || lat === void 0) continue;
+      bbox[0] = Math.min(bbox[0], lng);
+      bbox[1] = Math.min(bbox[1], lat);
+      bbox[2] = Math.max(bbox[2], lng);
+      bbox[3] = Math.max(bbox[3], lat);
+    }
+  }
+  return bbox;
+};
+var buildPhotoLayerData = ({
+  photos,
+  sequences,
+  bbox,
+  photoTypes,
+  date,
+  showPhotos,
+  showSequences,
+  viewfieldZoom
+}) => {
+  const matchesFilters = photoFilter(photoTypes, date);
+  const visiblePhotos = showPhotos ? photos.filter(matchesFilters) : [];
+  const drawBbox = bbox ? padBbox(bbox, 0.25) : null;
+  const drawnPhotos = drawBbox ? visiblePhotos.filter((photo) => lngLatInBbox(photo.lngLat, drawBbox)) : [...visiblePhotos];
+  drawnPhotos.sort((a, b) => (a.capturedAt ?? 0) - (b.capturedAt ?? 0));
+  const photoCollection = showPhotos ? photosToFeatureCollection(drawnPhotos) : emptyPointCollection();
+  const viewfieldCollection = viewfieldZoom != null ? photosToViewfieldsFeatureCollection(visiblePhotos, viewfieldZoom, { bbox }) : emptyPolygonCollection();
+  const sequenceCapturedAtById = /* @__PURE__ */ new Map();
+  for (const photo of visiblePhotos) {
+    if (photo.sequenceId == null || photo.capturedAt == null) continue;
+    const prev = sequenceCapturedAtById.get(photo.sequenceId);
+    if (prev == null || photo.capturedAt > prev) {
+      sequenceCapturedAtById.set(photo.sequenceId, photo.capturedAt);
+    }
+  }
+  const filteredSequences = showSequences ? sequences.map((sequence) => {
+    if (sequence.capturedAt != null) return sequence;
+    const fromPhotos = sequenceCapturedAtById.get(sequence.sequenceId);
+    return fromPhotos != null ? { ...sequence, capturedAt: fromPhotos } : sequence;
+  }).filter((sequence) => {
+    const asPhoto = {
+      providerId: sequence.providerId,
+      photoId: sequence.sequenceId,
+      sequenceId: sequence.sequenceId,
+      capturedAt: sequence.capturedAt,
+      isPano: sequence.isPano,
+      heading: null,
+      lngLat: [0, 0]
+    };
+    return matchesFilters(asPhoto) && (!drawBbox || bboxesOverlap(sequenceBbox(sequence), drawBbox));
+  }) : [];
+  const photoLngLatsBySequence = /* @__PURE__ */ new Map();
+  for (const photo of photos) {
+    if (photo.sequenceId == null) continue;
+    const list = photoLngLatsBySequence.get(photo.sequenceId);
+    if (list) {
+      list.push(photo.lngLat);
+    } else {
+      photoLngLatsBySequence.set(photo.sequenceId, [photo.lngLat]);
+    }
+  }
+  const alignedSequences = filteredSequences.map((sequence) => {
+    const points = photoLngLatsBySequence.get(sequence.sequenceId);
+    if (!points) return sequence;
+    const { geometry } = sequence;
+    return {
+      ...sequence,
+      geometry: geometry.type === "LineString" ? {
+        ...geometry,
+        coordinates: alignLineToPoints(geometry.coordinates, points)
+      } : {
+        ...geometry,
+        coordinates: geometry.coordinates.map(
+          (line) => alignLineToPoints(line, points)
+        )
+      }
+    };
+  });
+  const sequenceCollection = alignedSequences.length > 0 ? sequencesToFeatureCollection(alignedSequences) : emptyLineCollection();
+  return { photoCollection, viewfieldCollection, sequenceCollection };
+};
 var PhotoProviderLayer = ({
   providerId,
   bbox,
@@ -301,15 +388,44 @@ var PhotoProviderLayer = ({
   const photosMinZoom = Math.max(meta.minZoom, minZoom);
   const fetchedLinesMinZoom = fetchedSequencesMinZoom(providerId);
   const sequencesMinZoom = Math.max(fetchedLinesMinZoom, minZoom);
-  const { data: photos = [] } = useProviderPhotos(providerId, bbox, zoom, { minZoom });
-  const { data: sequences = [] } = useProviderSequences(providerId, bbox, zoom, { minZoom });
-  const visiblePhotos = zoom >= photosMinZoom ? photos.filter((photo) => photoMatchesFilters(photo, filter?.photoTypes, filter?.date)) : [];
-  const drawBbox = bbox ? padBbox(bbox, 0.25) : null;
-  const photoCollection = zoom >= photosMinZoom ? photosToFeatureCollection(
-    drawBbox ? visiblePhotos.filter((photo) => lngLatInBbox(photo.lngLat, drawBbox)) : visiblePhotos
-  ) : emptyPointCollection();
+  const { data: photos = NO_PHOTOS } = useProviderPhotos(providerId, bbox, zoom, { minZoom });
+  const { data: sequences = NO_SEQUENCES } = useProviderSequences(providerId, bbox, zoom, {
+    minZoom
+  });
   const viewfieldsActive = showViewfields && zoom >= VIEWFIELD_MIN_ZOOM;
-  const viewfieldCollection = viewfieldsActive ? photosToViewfieldsFeatureCollection(visiblePhotos, zoom, { bbox }) : emptyPolygonCollection();
+  const viewfieldZoom = viewfieldsActive ? Math.floor(zoom * 2) / 2 : null;
+  const showPhotos = zoom >= photosMinZoom;
+  const showFetchedSequences = showSequences && zoom >= sequencesMinZoom;
+  const [west, south, east, north] = bbox ?? [];
+  const photoTypesKey = filter?.photoTypes?.join(",");
+  const dateFrom = filter?.date?.from;
+  const dateTo = filter?.date?.to;
+  const { photoCollection, viewfieldCollection, sequenceCollection } = useMemo(
+    () => buildPhotoLayerData({
+      photos,
+      sequences,
+      bbox: west !== void 0 && south !== void 0 && east !== void 0 && north !== void 0 ? [west, south, east, north] : null,
+      photoTypes: photoTypesKey ? photoTypesKey.split(",") : void 0,
+      date: { from: dateFrom, to: dateTo },
+      showPhotos,
+      showSequences: showFetchedSequences,
+      viewfieldZoom
+    }),
+    [
+      photos,
+      sequences,
+      west,
+      south,
+      east,
+      north,
+      photoTypesKey,
+      dateFrom,
+      dateTo,
+      showPhotos,
+      showFetchedSequences,
+      viewfieldZoom
+    ]
+  );
   const inActiveSequence = [
     "==",
     ["get", "sequenceId"],
@@ -345,63 +461,11 @@ var PhotoProviderLayer = ({
     hasActiveSequence ? full * 0.4 : full
   ];
   const notShownPhoto = ["!=", ["get", "photoId"], shownPhotoId ?? ""];
-  const photoFilter = buildPhotoLayerFilter(filter?.photoTypes, filter?.date);
+  const photoFilter3 = buildPhotoLayerFilter(filter?.photoTypes, filter?.date);
   const photoSrcId = photoSourceId(providerId);
   const viewfieldSrcId = viewfieldSourceId(providerId);
-  const sequenceCapturedAtById = /* @__PURE__ */ new Map();
-  for (const photo of visiblePhotos) {
-    if (photo.sequenceId == null || photo.capturedAt == null) continue;
-    const prev = sequenceCapturedAtById.get(photo.sequenceId);
-    if (prev == null || photo.capturedAt > prev) {
-      sequenceCapturedAtById.set(photo.sequenceId, photo.capturedAt);
-    }
-  }
-  const filteredSequences = showSequences && zoom >= sequencesMinZoom ? sequences.map((sequence) => {
-    if (sequence.capturedAt != null) return sequence;
-    const fromPhotos = sequenceCapturedAtById.get(sequence.sequenceId);
-    return fromPhotos != null ? { ...sequence, capturedAt: fromPhotos } : sequence;
-  }).filter((sequence) => {
-    const asPhoto = {
-      providerId: sequence.providerId,
-      photoId: sequence.sequenceId,
-      sequenceId: sequence.sequenceId,
-      capturedAt: sequence.capturedAt,
-      isPano: sequence.isPano,
-      heading: null,
-      lngLat: [0, 0]
-    };
-    return photoMatchesFilters(asPhoto, filter?.photoTypes, filter?.date);
-  }) : [];
-  const photoLngLatsBySequence = /* @__PURE__ */ new Map();
-  for (const photo of photos) {
-    if (photo.sequenceId == null) continue;
-    const list = photoLngLatsBySequence.get(photo.sequenceId);
-    if (list) {
-      list.push(photo.lngLat);
-    } else {
-      photoLngLatsBySequence.set(photo.sequenceId, [photo.lngLat]);
-    }
-  }
-  const alignedSequences = filteredSequences.map((sequence) => {
-    const points = photoLngLatsBySequence.get(sequence.sequenceId);
-    if (!points) return sequence;
-    const { geometry } = sequence;
-    return {
-      ...sequence,
-      geometry: geometry.type === "LineString" ? {
-        ...geometry,
-        coordinates: alignLineToPoints(geometry.coordinates, points)
-      } : {
-        ...geometry,
-        coordinates: geometry.coordinates.map(
-          (line) => alignLineToPoints(line, points)
-        )
-      }
-    };
-  });
   const sequenceTiles = showSequences ? adapter?.sequenceTiles?.() : null;
   const sequenceTilesMinZoom = sequenceTiles ? Math.max(sequenceTiles.minZoom, minZoom) : 0;
-  const sequenceCollection = alignedSequences.length > 0 ? sequencesToFeatureCollection(alignedSequences) : emptyLineCollection();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     meta.coverageTiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -448,7 +512,7 @@ var PhotoProviderLayer = ({
           "source-layer": sequenceTiles.sourceLayer,
           minzoom: sequenceTilesMinZoom,
           maxzoom: fetchedLinesMinZoom,
-          filter: renameExpressionProperties(photoFilter, sequenceTiles.properties),
+          filter: renameExpressionProperties(photoFilter3, sequenceTiles.properties),
           layout: {
             "line-cap": "round",
             "line-join": "round",
@@ -556,8 +620,7 @@ var PhotoProviderLayer = ({
         id: photoTargetLayerId(providerId),
         type: "circle",
         source: photoSrcId,
-        filter: photoFilter,
-        layout: { "circle-sort-key": PHOTO_SORT_KEY },
+        filter: photoFilter3,
         paint: { "circle-radius": PHOTO_TARGET_RADIUS_PX, "circle-opacity": 0 }
       }
     ),
@@ -568,8 +631,7 @@ var PhotoProviderLayer = ({
         id: photoLayerId(providerId),
         type: "circle",
         source: photoSrcId,
-        filter: photoFilter,
-        layout: { "circle-sort-key": PHOTO_SORT_KEY },
+        filter: photoFilter3,
         paint: {
           "circle-radius": dotRadius,
           "circle-color": lineAndDotColor
@@ -588,11 +650,17 @@ var MapFeatureProviderLayer = ({
   minZoom
 }) => {
   const meta = providerById[providerId];
-  const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom, { minZoom });
+  const { data: features = NO_MAP_FEATURES } = useProviderMapFeatures(providerId, bbox, zoom, {
+    minZoom
+  });
   const valueFilter = filter?.mapFeatureValue;
-  const featureCollection = zoom >= Math.max(meta.minZoom, minZoom) ? mapFeaturesToFeatureCollection(
-    valueFilter ? features.filter((feature) => valueFilter(feature.value)) : features
-  ) : emptyPointCollection();
+  const showFeatures = zoom >= Math.max(meta.minZoom, minZoom);
+  const featureCollection = useMemo(() => {
+    if (!showFeatures) return emptyPointCollection();
+    const drawn = valueFilter ? features.filter((feature) => valueFilter(feature.value)) : [...features];
+    drawn.sort((a, b) => (a.lastSeenAt ?? 0) - (b.lastSeenAt ?? 0));
+    return mapFeaturesToFeatureCollection(drawn);
+  }, [features, valueFilter, showFeatures]);
   const featureFilter = buildMapFeatureLayerFilter(filter?.date);
   const featureSrcId = featureSourceId(providerId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -614,7 +682,6 @@ var MapFeatureProviderLayer = ({
         type: "circle",
         source: featureSrcId,
         filter: featureFilter,
-        layout: { "circle-sort-key": FEATURE_SORT_KEY },
         paint: {
           "circle-radius": FEATURE_CIRCLE_RADIUS,
           "circle-color": mapFeatureCircleColor
@@ -866,10 +933,8 @@ var useAllProviderPhotos = (providerIds, bbox, zoom, photoTypes, date) => {
       zoom
     )
   }));
-  const photos = queries.flatMap(({ query }) => {
-    const data = query.data ?? [];
-    return data.filter((photo) => photoMatchesFilters(photo, photoTypes, date));
-  });
+  const matchesFilters = photoFilter(photoTypes, date);
+  const photos = queries.flatMap(({ query }) => (query.data ?? []).filter(matchesFilters));
   const activeQueries = queries.filter(({ providerId }) => enabled.has(providerId));
   const isLoading = activeQueries.some(({ query }) => query.isLoading);
   const isFetching = activeQueries.some(({ query }) => query.isFetching);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osm-editor-kit/street-imagery-react",
-  "version": "0.1.0-alpha.11",
+  "version": "0.1.0-alpha.12",
   "description": "React MapLibre layers and photo viewers for street-level imagery providers.",
   "homepage": "https://github.com/osmberlin/street-space-editor/tree/main/packages/street-imagery-react",
   "license": "MIT",
@@ -64,7 +64,7 @@
     "zustand": "^5.0.7"
   },
   "peerDependencies": {
-    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.8",
+    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.9",
     "@panoramax/web-viewer": "^5",
     "@tanstack/react-query": "^5",
     "mapillary-js": "^4",