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

package/README.md

@@ -26,7 +26,7 @@ import {
 } from '@osm-editor-kit/street-imagery-react'
 import { createStreetImageryConfig } from '@osm-editor-kit/street-imagery'
 
-const bbox = useMapViewportBbox('main', map)
+const bbox = useMapViewportBbox('main')
 
 <StreetLevelImagerySourcesAndLayers
   providers={['mapillary', 'panoramax']}
@@ -106,6 +106,58 @@ const { suggestions } = useViewSuggestions(viewpoints, { maxAgeYears: 2 })
 Render `FloatingPhotoViewer` inside a positioned map container. Photos from suggestions open in
 `StreetLevelImageryViewer` with `lookAtBearing={suggestion.direction.bearing}`.
 
+A host without suggested views leaves out `suggestions`, `activeDirectionKey` and `onSelectSuggestion`; the chips are then not shown. Its own buttons and links go in `titleActions`. They keep their size next to a long title and do not start a drag.
+
+For a free window over the whole page, use the viewport as container and let the box leave it until a share of it shows:
+
+```tsx
+<FloatingPhotoViewer position="fixed" minVisibleShare={0.2} onClose={close} title="Photo">
+  {viewer}
+</FloatingPhotoViewer>
+```
+
+`position="fixed"` (default `absolute`) needs an ancestor without `transform` or `filter`, and a stacking order that puts the box above the page. `minVisibleShare` (0–1) never lets the box go over the top edge, because the header is what moves it. The limit also holds when the box or the container changes size, and a minimized viewer stays within reach. Without `minVisibleShare` the box keeps 8px from the right and bottom edge.
+
+To ask "who sees this spot" instead of "what looks north here", use `usePhotosLookingAt`: flat photos within `maxDistanceMeters` (50) whose heading points at the place within `maxFlatAngleDeg` (35), and 360° photos within the distance, best first. Each candidate has `bearingToPlace`.
+
+```tsx
+const [place, setPlace] = useState<LngLat | null>(null) // set on map click
+const [index, setIndex] = useState(0)
+const { candidates } = usePhotosLookingAt(place, { maxAgeYears: 2, enabled: place != null })
+const candidate = candidates[index]
+
+{candidate ? (
+  <FloatingPhotoViewer
+    title="Photos of this place"
+    onClose={() => setPlace(null)}
+    step={{
+      onPrevious: index > 0 ? () => setIndex(index - 1) : undefined,
+      onNext: index < candidates.length - 1 ? () => setIndex(index + 1) : undefined,
+      previousLabel: 'Previous photo',
+      nextLabel: 'Next photo',
+    }}
+  >
+    <StreetLevelImageryViewer
+      photo={candidate.photo}
+      lookAtBearing={candidate.bearingToPlace}
+      … />
+  </FloatingPhotoViewer>
+) : null}
+```
+
+The list needs no chips: `step` gives the `<` `>` buttons and Alt + arrow keys. `lookAtBearing` turns Mapillary 360° photos only. The pure ranking is `rankPhotosLookingAt(place, photos, options)` in the core package.
+
+For a link that opens the same photo with the same zoom and pan, keep the view the viewer reports and pass it to `providerExternalLink`:
+
+```tsx
+const [view, setView] = useState<PhotoView | null>(null)
+
+<StreetLevelImageryViewer onViewerView={setView} … />
+<a href={providerExternalLink(photo, view)}>Open on Mapillary</a>
+```
+
+`onViewerView` runs when the view has stopped moving and when the photo changes, not during a drag, for Mapillary (`x`, `y`, `zoom`) and Panoramax (`heading`, `pitch`, `zoom`). A view of another photo is ignored by the link. What a link shows also depends on the size of the window it opens in. Panoramax in the default panel: the viewers differ, so direction and height of the view carry over, not every pixel.
+
 **Tailwind:** components use Tailwind classes. Tailwind does not scan `node_modules`, so add to your CSS:
 
 ```css
@@ -181,7 +233,7 @@ const { photos } = useAllProviderPhotos(providers, bbox, zoom) // no date: all p
 />
 ```
 
-A handle at its end means no limit, so the left end also shows photos older than the slider spans (`maxYears`, default 10). The scale itself is in the core package (`dateSliderPosition`, `dateSliderBins`, …) for a host that draws its own chart. The texts are in `messages.dateFilter`.
+A click or tap on the chart moves the nearer handle to that exact place, and a press on the chart can go on as a drag. Handles on the same spot come apart in the direction of the drag. Handles stay separate targets for mouse and touch, at least 44px high and wide, and a vertical swipe on a phone scrolls the page. A handle at its end means no limit, so the left end also shows photos older than the slider spans (`maxYears`, default 10). The scale itself is in the core package (`dateSliderPosition`, `dateSliderBins`, …) for a host that draws its own chart. The texts are in `messages.dateFilter`.
 
 ## Pick a place on the map to open elsewhere
 

package/dist/MapillaryPanel-SOHGB7JA.js

@@ -0,0 +1,3 @@
+export { MapillaryPanel } from './chunk-LZR5SZDS.js';
+import './chunk-XLBFXACK.js';
+import './chunk-GYUS2JVV.js';

package/dist/PanoramaxPanel-NAKCJHT5.js

@@ -0,0 +1,3 @@
+export { PanoramaxPanel } from './chunk-BZGY6BZC.js';
+import './chunk-XLBFXACK.js';
+import './chunk-GYUS2JVV.js';

package/dist/StreetLevelImageryViewer.d.ts

@@ -1,4 +1,4 @@
-import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
 import { type ComponentType } from 'react';
 import type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
 import type { PanoramaxPanelProps } from './panels/PanoramaxPanel';
@@ -10,6 +10,12 @@ type StreetLevelImageryViewerProps = {
     onEaseMapToPoint: (lng: number, lat: number) => void;
     /** Mapillary, Panoramax: full photo data (creator, licence …) for each image the viewer shows. */
     onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /**
+     * Mapillary, Panoramax: the view inside the shown photo (pan and zoom), after it has stopped
+     * moving and when the photo changes. Pass it to `providerExternalLink` for a link that opens the
+     * same view on the provider's site.
+     */
+    onViewerView?: (view: PhotoView) => void;
     /** Mapillary 360° photos: initial view bearing (e.g. a suggested view direction). */
     lookAtBearing?: number | null;
     /** Mapillary: turn and zoom to a place (sign, traffic light, junction); wins over `lookAtBearing`. */
@@ -28,5 +34,5 @@ type StreetLevelImageryViewerProps = {
      */
     panoramaxPanel?: ComponentType<PanoramaxPanelProps>;
 };
-export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, hideAttribution, panoramaxPanel: PanoramaxPanelOverride, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
+export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, lookAtBearing, lookAt, outlines, hideAttribution, panoramaxPanel: PanoramaxPanelOverride, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
 export {};

package/dist/{chunk-6EMFFIL2.js → chunk-3DFVM6VK.js}

@@ -1,3 +1,4 @@
+import { c } from 'react/compiler-runtime';
 import { DEFAULT_STREET_IMAGERY_LOCALE } from '@osm-editor-kit/street-imagery';
 import { createContext, use } from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -58,7 +59,12 @@ var en = {
     }
   }
 };
-var COMPASS_DE = { N: "Norden", E: "Osten", S: "S\xFCden", W: "Westen" };
+var COMPASS_DE = {
+  N: "Norden",
+  E: "Osten",
+  S: "S\xFCden",
+  W: "Westen"
+};
 var de = {
   viewer: {
     regionLabel: "Fotoansicht",
@@ -125,23 +131,61 @@ var DEFAULT_I18N = {
 var I18nContext = createContext(DEFAULT_I18N);
 var mergeMessages = (base, overrides) => overrides ? {
   unknownDate: overrides.unknownDate ?? base.unknownDate,
-  dateFilter: { ...base.dateFilter, ...overrides.dateFilter },
-  viewer: { ...base.viewer, ...overrides.viewer },
-  viewpointRole: { ...base.viewpointRole, ...overrides.viewpointRole },
+  dateFilter: {
+    ...base.dateFilter,
+    ...overrides.dateFilter
+  },
+  viewer: {
+    ...base.viewer,
+    ...overrides.viewer
+  },
+  viewpointRole: {
+    ...base.viewpointRole,
+    ...overrides.viewpointRole
+  },
   compass: overrides.compass?.length === 8 ? overrides.compass : base.compass,
   viewDirection: overrides.viewDirection ?? base.viewDirection
 } : base;
-var StreetImageryLocaleProvider = ({
-  locale,
-  messages,
-  children
-}) => /* @__PURE__ */ jsx(
-  I18nContext,
-  {
-    value: { locale, messages: mergeMessages(STREET_IMAGERY_MESSAGES[locale], messages) },
+var StreetImageryLocaleProvider = (t0) => {
+  const $ = c(9);
+  const {
+    locale,
+    messages,
     children
+  } = t0;
+  const t1 = STREET_IMAGERY_MESSAGES[locale];
+  let t2;
+  if ($[0] !== messages || $[1] !== t1) {
+    t2 = mergeMessages(t1, messages);
+    $[0] = messages;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== locale || $[4] !== t2) {
+    t3 = {
+      locale,
+      messages: t2
+    };
+    $[3] = locale;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
   }
-);
+  let t4;
+  if ($[6] !== children || $[7] !== t3) {
+    t4 = /* @__PURE__ */ jsx(I18nContext, { value: t3, children });
+    $[6] = children;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
+};
 var useStreetImageryI18n = () => use(I18nContext);
 
 export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n };