@osm-editor-kit/street-imagery-react 0.1.0-alpha.13 → 0.1.0-alpha.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +54 -2
- package/dist/MapillaryPanel-SOHGB7JA.js +3 -0
- package/dist/PanoramaxPanel-5P5LWMRY.js +3 -0
- package/dist/StreetLevelImageryViewer.d.ts +8 -2
- package/dist/{chunk-QBBIFF2C.js → chunk-LZR5SZDS.js} +112 -62
- package/dist/{chunk-5D7YCQUN.js → chunk-R6BDVYWM.js} +94 -39
- package/dist/chunk-XLBFXACK.js +56 -0
- package/dist/filters/PhotoDateRangeFilter.d.ts +4 -1
- package/dist/filters/dateSliderPointer.d.ts +21 -0
- package/dist/hooks/useProviderData.d.ts +3 -3
- package/dist/index.d.ts +1 -0
- package/dist/index.js +915 -738
- package/dist/mapillary/useMapillaryFeatures.d.ts +5 -5
- package/dist/panels/MapillaryPanel.d.ts +7 -2
- package/dist/panels/PanoramaxPanel.d.ts +7 -2
- package/dist/panels/PanoramaxWebViewerPanel.d.ts +7 -2
- package/dist/panels/panoramaxItem.d.ts +2 -0
- package/dist/panels/photoView.d.ts +19 -0
- package/dist/panoramax-web-viewer.js +113 -51
- package/dist/viewer-panels.js +3 -2
- package/dist/viewpoints/FloatingPhotoViewer.d.ts +22 -7
- package/dist/viewpoints/floatingViewerPosition.d.ts +18 -0
- package/dist/viewpoints/usePhotosLookingAt.d.ts +26 -0
- package/package.json +7 -4
- package/dist/MapillaryPanel-FQR4TTEW.js +0 -2
- package/dist/PanoramaxPanel-GO4GSVFE.js +0 -2
|
@@ -6,7 +6,7 @@ import { type LngLat, type TargetShape } from '@osm-editor-kit/street-imagery';
|
|
|
6
6
|
*/
|
|
7
7
|
export declare const useMapillaryMapFeatureImages: (featureId: string | null | undefined, { shape }?: {
|
|
8
8
|
shape?: TargetShape;
|
|
9
|
-
}) => import("@tanstack/react-query").UseQueryResult<
|
|
9
|
+
}) => import("@tanstack/react-query").UseQueryResult<import("@osm-editor-kit/street-imagery").MapFeatureImages | null, Error>;
|
|
10
10
|
/**
|
|
11
11
|
* Map features within `radiusMeters` of a point (Graph API), nearest first, e.g. the traffic
|
|
12
12
|
* lights and markings at a junction. `objectValues` accepts wildcards (`object--traffic-light--*`).
|
|
@@ -15,7 +15,7 @@ export declare const useMapillaryMapFeaturesNear: (lngLat: LngLat | null | undef
|
|
|
15
15
|
radiusMeters?: number;
|
|
16
16
|
objectValues?: string[];
|
|
17
17
|
enabled?: boolean;
|
|
18
|
-
}) => import("@tanstack/react-query").UseQueryResult<
|
|
18
|
+
}) => import("@tanstack/react-query").UseQueryResult<{
|
|
19
19
|
id: string;
|
|
20
20
|
value: string;
|
|
21
21
|
lngLat: LngLat;
|
|
@@ -24,7 +24,7 @@ export declare const useMapillaryMapFeaturesNear: (lngLat: LngLat | null | undef
|
|
|
24
24
|
facing: number | null;
|
|
25
25
|
imageIds: string[];
|
|
26
26
|
distanceMeters: number;
|
|
27
|
-
}[]
|
|
27
|
+
}[], Error>;
|
|
28
28
|
/**
|
|
29
29
|
* Detection outlines of one image, for `outlines` of the Mapillary viewer. An image has ~500
|
|
30
30
|
* detections; pass `filter` (e.g. `matchesAnyGroup(JUNCTION_DETECTION_GROUPS)`) and name it with
|
|
@@ -33,7 +33,7 @@ export declare const useMapillaryMapFeaturesNear: (lngLat: LngLat | null | undef
|
|
|
33
33
|
export declare const useMapillaryImageDetections: (imageId: string | null | undefined, { filter, filterKey }?: {
|
|
34
34
|
filter?: (value: string) => boolean;
|
|
35
35
|
filterKey?: string;
|
|
36
|
-
}) => import("@tanstack/react-query").UseQueryResult<
|
|
36
|
+
}) => import("@tanstack/react-query").UseQueryResult<import("@osm-editor-kit/street-imagery").MapillaryDetection[], Error>;
|
|
37
37
|
/**
|
|
38
38
|
* A selected Mapillary map feature (sign, object) for a host's feature + photo selection: all its
|
|
39
39
|
* photos by day, the photo that is shown (`shownPhotoId`), and the one to open first — the best of
|
|
@@ -46,7 +46,7 @@ export declare const useSelectedMapillaryFeature: ({ featureId, shownPhotoId, mi
|
|
|
46
46
|
minCapturedAt?: number | null;
|
|
47
47
|
shape?: TargetShape;
|
|
48
48
|
}) => {
|
|
49
|
-
data:
|
|
49
|
+
data: import("@osm-editor-kit/street-imagery").MapFeatureImages | null;
|
|
50
50
|
isLoading: boolean;
|
|
51
51
|
isError: boolean;
|
|
52
52
|
shownImage: import("@osm-editor-kit/street-imagery").TargetImage | null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
|
|
1
|
+
import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
|
|
2
2
|
import 'mapillary-js/dist/mapillary.css';
|
|
3
3
|
import type { StreetImageryPhotoSelection } from '../types';
|
|
4
4
|
import { type MapillaryLookAt, type MapillaryViewerOutline } from './mapillaryLookAt';
|
|
@@ -9,6 +9,11 @@ type MapillaryPanelProps = {
|
|
|
9
9
|
onEaseMapToPoint: (lng: number, lat: number) => void;
|
|
10
10
|
/** Full photo data for each image the viewer shows (incl. native prev/next navigation). */
|
|
11
11
|
onViewerPhoto?: (photo: NormalizedPhoto) => void;
|
|
12
|
+
/**
|
|
13
|
+
* The view inside the shown photo, after it has stopped moving and when the photo changes. Pass
|
|
14
|
+
* it to `providerExternalLink` for a link that opens the same view.
|
|
15
|
+
*/
|
|
16
|
+
onViewerView?: (view: PhotoView) => void;
|
|
12
17
|
/** 360° photos: turn the view to this map bearing when `photo` opens (e.g. a suggested view). */
|
|
13
18
|
lookAtBearing?: number | null;
|
|
14
19
|
/**
|
|
@@ -25,5 +30,5 @@ type MapillaryPanelProps = {
|
|
|
25
30
|
*/
|
|
26
31
|
hideAttribution?: boolean;
|
|
27
32
|
};
|
|
28
|
-
export declare const MapillaryPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, hideAttribution, }: MapillaryPanelProps) => import("react").JSX.Element;
|
|
33
|
+
export declare const MapillaryPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, lookAtBearing, lookAt, outlines, hideAttribution, }: MapillaryPanelProps) => import("react").JSX.Element;
|
|
29
34
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
|
|
1
|
+
import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
|
|
2
2
|
import 'mapillary-js/dist/mapillary.css';
|
|
3
3
|
import type { StreetImageryPhotoSelection } from '../types';
|
|
4
4
|
export type PanoramaxPanelProps = {
|
|
@@ -8,6 +8,11 @@ export type PanoramaxPanelProps = {
|
|
|
8
8
|
onEaseMapToPoint: (lng: number, lat: number) => void;
|
|
9
9
|
/** The shown picture with creator, licence, local capture time and camera. */
|
|
10
10
|
onViewerPhoto?: (photo: NormalizedPhoto) => void;
|
|
11
|
+
/**
|
|
12
|
+
* The view inside the shown photo, after it has stopped moving and when the photo changes. Pass
|
|
13
|
+
* it to `providerExternalLink` for a link that opens the same view.
|
|
14
|
+
*/
|
|
15
|
+
onViewerView?: (view: PhotoView) => void;
|
|
11
16
|
/**
|
|
12
17
|
* Hide the line with creator and licence. The host must then show both itself, from
|
|
13
18
|
* `onViewerPhoto`.
|
|
@@ -18,4 +23,4 @@ export type PanoramaxPanelProps = {
|
|
|
18
23
|
* Panoramax pictures in the Mapillary viewer (`mapillary-js` with a `PanoramaxDataProvider`): no
|
|
19
24
|
* second viewer engine to load, and the same handling as Mapillary photos.
|
|
20
25
|
*/
|
|
21
|
-
export declare const PanoramaxPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, hideAttribution, }: PanoramaxPanelProps) => import("react").JSX.Element;
|
|
26
|
+
export declare const PanoramaxPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, hideAttribution, }: PanoramaxPanelProps) => import("react").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import '@panoramax/web-viewer';
|
|
2
|
-
import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
|
|
2
|
+
import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
|
|
3
3
|
import type { StreetImageryPhotoSelection } from '../types';
|
|
4
4
|
export type PanoramaxWebViewerPanelProps = {
|
|
5
5
|
photo: NormalizedPhoto;
|
|
@@ -8,6 +8,11 @@ export type PanoramaxWebViewerPanelProps = {
|
|
|
8
8
|
onEaseMapToPoint: (lng: number, lat: number) => void;
|
|
9
9
|
/** The shown picture with creator, licence, local capture time and camera. */
|
|
10
10
|
onViewerPhoto?: (photo: NormalizedPhoto) => void;
|
|
11
|
+
/**
|
|
12
|
+
* The view inside the shown photo, after it has stopped moving and when the photo changes. Pass
|
|
13
|
+
* it to `providerExternalLink` for a link that opens the same view.
|
|
14
|
+
*/
|
|
15
|
+
onViewerView?: (view: PhotoView) => void;
|
|
11
16
|
/**
|
|
12
17
|
* Leave out the viewer's own widgets: the legend (a bottom drawer in narrow containers), the
|
|
13
18
|
* player and the zoom buttons. The host must then show creator and licence itself, from
|
|
@@ -17,4 +22,4 @@ export type PanoramaxWebViewerPanelProps = {
|
|
|
17
22
|
/** Same as `hideLegend`; the name `StreetLevelImageryViewer` passes. */
|
|
18
23
|
hideAttribution?: boolean;
|
|
19
24
|
};
|
|
20
|
-
export declare const PanoramaxWebViewerPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, hideLegend: hideLegendProp, hideAttribution, }: PanoramaxWebViewerPanelProps) => import("react").JSX.Element;
|
|
25
|
+
export declare const PanoramaxWebViewerPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, hideLegend: hideLegendProp, hideAttribution, }: PanoramaxWebViewerPanelProps) => import("react").JSX.Element;
|
|
@@ -46,6 +46,8 @@ export type PanoramaxItem = {
|
|
|
46
46
|
};
|
|
47
47
|
};
|
|
48
48
|
export declare const isPanoramaxItemSpherical: (item: PanoramaxItem) => boolean;
|
|
49
|
+
/** Horizontal field of view in degrees. */
|
|
50
|
+
export declare const panoramaxItemFieldOfView: (item: PanoramaxItem) => number;
|
|
49
51
|
/** Width and height in pixels; a guess when the picture does not state them. */
|
|
50
52
|
export declare const panoramaxItemSize: (item: PanoramaxItem) => [number, number];
|
|
51
53
|
/** Neighbour in the sequence, from the item's `prev` / `next` link. */
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { PhotoView } from '@osm-editor-kit/street-imagery';
|
|
2
|
+
import type { Viewer } from 'mapillary-js';
|
|
3
|
+
/**
|
|
4
|
+
* The Panoramax viewer's zoom level (0–100) for a vertical field of view in mapillary-js, from
|
|
5
|
+
* that viewer's own limits, so that both show the same height of the picture. In a flat picture
|
|
6
|
+
* the degrees differ: mapillary-js draws it through a lens, the Panoramax viewer as part of a
|
|
7
|
+
* sphere, where each degree has the same width.
|
|
8
|
+
*/
|
|
9
|
+
export declare const panoramaxZoomLevel: (verticalFov: number, horizontalFovOfPicture: number) => number;
|
|
10
|
+
/**
|
|
11
|
+
* Calls `report` once the view has stopped changing, and only when it differs from the last one.
|
|
12
|
+
* `viewChanged` is cheap enough for every frame of a drag.
|
|
13
|
+
*/
|
|
14
|
+
export declare const createPhotoViewReporter: (read: () => Promise<PhotoView | null>, report: (view: PhotoView) => void, delayMs?: number) => {
|
|
15
|
+
viewChanged: () => void;
|
|
16
|
+
stop: () => void;
|
|
17
|
+
};
|
|
18
|
+
/** Runs the reporter on a mapillary-js viewer until the returned function is called. */
|
|
19
|
+
export declare const watchMapillaryJsView: (viewer: Viewer, read: () => Promise<PhotoView | null>, report: (view: PhotoView) => void) => (() => void);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { createPhotoViewReporter } from './chunk-XLBFXACK.js';
|
|
1
2
|
import { useViewerActions } from './chunk-GYUS2JVV.js';
|
|
2
3
|
import { c } from 'react/compiler-runtime';
|
|
3
4
|
import '@panoramax/web-viewer';
|
|
@@ -168,12 +169,13 @@ var panoramaxApiEndpoint = () => `${getStreetImageryConfig().panoramaxApiBase}/a
|
|
|
168
169
|
var HIDE_LEGEND_CSS = "pnx-photo-viewer pnx-bottom-drawer, pnx-photo-viewer pnx-picture-legend { display: none !important; }";
|
|
169
170
|
var normalizeBearing = (degrees) => (degrees % 360 + 360) % 360;
|
|
170
171
|
var PanoramaxWebViewerPanel = (t0) => {
|
|
171
|
-
const $ = c(
|
|
172
|
+
const $ = c(42);
|
|
172
173
|
const {
|
|
173
174
|
photo,
|
|
174
175
|
onPhotoSelected,
|
|
175
176
|
onEaseMapToPoint,
|
|
176
177
|
onViewerPhoto,
|
|
178
|
+
onViewerView,
|
|
177
179
|
hideLegend: t1,
|
|
178
180
|
hideAttribution: t2
|
|
179
181
|
} = t0;
|
|
@@ -371,11 +373,71 @@ var PanoramaxWebViewerPanel = (t0) => {
|
|
|
371
373
|
}
|
|
372
374
|
useEffect(t8, t9);
|
|
373
375
|
let t10;
|
|
376
|
+
if ($[19] !== onViewerView) {
|
|
377
|
+
t10 = (view) => onViewerView?.(view);
|
|
378
|
+
$[19] = onViewerView;
|
|
379
|
+
$[20] = t10;
|
|
380
|
+
} else {
|
|
381
|
+
t10 = $[20];
|
|
382
|
+
}
|
|
383
|
+
const emitViewerView = useEffectEvent(t10);
|
|
384
|
+
const reportsView = onViewerView !== void 0;
|
|
374
385
|
let t11;
|
|
375
|
-
if ($[
|
|
376
|
-
|
|
386
|
+
if ($[21] !== emitViewerView || $[22] !== reportsView) {
|
|
387
|
+
t11 = function reportViewInPhoto() {
|
|
377
388
|
const viewer_0 = viewerRef.current;
|
|
378
|
-
if (!viewer_0 ||
|
|
389
|
+
if (!viewer_0 || !reportsView) {
|
|
390
|
+
return;
|
|
391
|
+
}
|
|
392
|
+
const read = async () => {
|
|
393
|
+
const psv_1 = viewer_0.psv;
|
|
394
|
+
const photoId = psv_1?.getPictureMetadata()?.id;
|
|
395
|
+
if (!psv_1 || !photoId) {
|
|
396
|
+
return null;
|
|
397
|
+
}
|
|
398
|
+
const {
|
|
399
|
+
x,
|
|
400
|
+
y,
|
|
401
|
+
z
|
|
402
|
+
} = psv_1.getXYZ();
|
|
403
|
+
return {
|
|
404
|
+
providerId: "panoramax",
|
|
405
|
+
photoId,
|
|
406
|
+
heading: x,
|
|
407
|
+
pitch: y,
|
|
408
|
+
zoom: z
|
|
409
|
+
};
|
|
410
|
+
};
|
|
411
|
+
const reporter = createPhotoViewReporter(read, (view_0) => emitViewerView(view_0));
|
|
412
|
+
viewer_0.addEventListener("psv:picture-loaded", reporter.viewChanged);
|
|
413
|
+
viewer_0.addEventListener("psv:view-rotated", reporter.viewChanged);
|
|
414
|
+
return () => {
|
|
415
|
+
reporter.stop();
|
|
416
|
+
viewer_0.removeEventListener("psv:picture-loaded", reporter.viewChanged);
|
|
417
|
+
viewer_0.removeEventListener("psv:view-rotated", reporter.viewChanged);
|
|
418
|
+
};
|
|
419
|
+
};
|
|
420
|
+
$[21] = emitViewerView;
|
|
421
|
+
$[22] = reportsView;
|
|
422
|
+
$[23] = t11;
|
|
423
|
+
} else {
|
|
424
|
+
t11 = $[23];
|
|
425
|
+
}
|
|
426
|
+
let t12;
|
|
427
|
+
if ($[24] !== reportsView) {
|
|
428
|
+
t12 = [reportsView];
|
|
429
|
+
$[24] = reportsView;
|
|
430
|
+
$[25] = t12;
|
|
431
|
+
} else {
|
|
432
|
+
t12 = $[25];
|
|
433
|
+
}
|
|
434
|
+
useEffect(t11, t12);
|
|
435
|
+
let t13;
|
|
436
|
+
let t14;
|
|
437
|
+
if ($[26] !== actions || $[27] !== photo.photoId || $[28] !== photo.sequenceId) {
|
|
438
|
+
t13 = function syncExternalPhotoSelection() {
|
|
439
|
+
const viewer_1 = viewerRef.current;
|
|
440
|
+
if (!viewer_1 || photo.photoId === lastViewerPhotoIdRef.current) {
|
|
379
441
|
return;
|
|
380
442
|
}
|
|
381
443
|
actions.reset();
|
|
@@ -387,70 +449,70 @@ var PanoramaxWebViewerPanel = (t0) => {
|
|
|
387
449
|
};
|
|
388
450
|
return;
|
|
389
451
|
}
|
|
390
|
-
if (typeof
|
|
391
|
-
|
|
452
|
+
if (typeof viewer_1.select === "function") {
|
|
453
|
+
viewer_1.select(photo.sequenceId ?? null, photo.photoId);
|
|
392
454
|
}
|
|
393
455
|
};
|
|
394
|
-
|
|
395
|
-
$[
|
|
396
|
-
$[
|
|
397
|
-
$[
|
|
398
|
-
$[
|
|
399
|
-
$[
|
|
456
|
+
t14 = [actions, photo.photoId, photo.sequenceId];
|
|
457
|
+
$[26] = actions;
|
|
458
|
+
$[27] = photo.photoId;
|
|
459
|
+
$[28] = photo.sequenceId;
|
|
460
|
+
$[29] = t13;
|
|
461
|
+
$[30] = t14;
|
|
400
462
|
} else {
|
|
401
|
-
|
|
402
|
-
|
|
463
|
+
t13 = $[29];
|
|
464
|
+
t14 = $[30];
|
|
403
465
|
}
|
|
404
|
-
useEffect(
|
|
405
|
-
let
|
|
406
|
-
if ($[
|
|
407
|
-
|
|
466
|
+
useEffect(t13, t14);
|
|
467
|
+
let t15;
|
|
468
|
+
if ($[31] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
|
|
469
|
+
t15 = {
|
|
408
470
|
aspectRatio: "4 / 3"
|
|
409
471
|
};
|
|
410
|
-
$[
|
|
472
|
+
$[31] = t15;
|
|
411
473
|
} else {
|
|
412
|
-
|
|
474
|
+
t15 = $[31];
|
|
413
475
|
}
|
|
414
|
-
let
|
|
415
|
-
if ($[
|
|
416
|
-
|
|
417
|
-
$[
|
|
418
|
-
$[
|
|
476
|
+
let t16;
|
|
477
|
+
if ($[32] !== hideLegend) {
|
|
478
|
+
t16 = hideLegend ? /* @__PURE__ */ jsx("style", { children: HIDE_LEGEND_CSS }) : null;
|
|
479
|
+
$[32] = hideLegend;
|
|
480
|
+
$[33] = t16;
|
|
419
481
|
} else {
|
|
420
|
-
|
|
482
|
+
t16 = $[33];
|
|
421
483
|
}
|
|
422
|
-
let
|
|
423
|
-
if ($[
|
|
424
|
-
|
|
425
|
-
$[
|
|
484
|
+
let t17;
|
|
485
|
+
if ($[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
|
|
486
|
+
t17 = panoramaxApiEndpoint();
|
|
487
|
+
$[34] = t17;
|
|
426
488
|
} else {
|
|
427
|
-
|
|
489
|
+
t17 = $[34];
|
|
428
490
|
}
|
|
429
|
-
const
|
|
430
|
-
const
|
|
431
|
-
let
|
|
432
|
-
if ($[
|
|
433
|
-
|
|
434
|
-
$[
|
|
435
|
-
$[
|
|
436
|
-
$[
|
|
437
|
-
$[
|
|
491
|
+
const t18 = hideLegend ? "false" : void 0;
|
|
492
|
+
const t19 = photo.sequenceId ?? void 0;
|
|
493
|
+
let t20;
|
|
494
|
+
if ($[35] !== photo.photoId || $[36] !== t18 || $[37] !== t19) {
|
|
495
|
+
t20 = /* @__PURE__ */ jsx("pnx-photo-viewer", { ref: viewerRef, className: "block h-full w-full", endpoint: t17, "url-parameters": "false", widgets: t18, picture: photo.photoId, sequence: t19 });
|
|
496
|
+
$[35] = photo.photoId;
|
|
497
|
+
$[36] = t18;
|
|
498
|
+
$[37] = t19;
|
|
499
|
+
$[38] = t20;
|
|
438
500
|
} else {
|
|
439
|
-
|
|
501
|
+
t20 = $[38];
|
|
440
502
|
}
|
|
441
|
-
let
|
|
442
|
-
if ($[
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
503
|
+
let t21;
|
|
504
|
+
if ($[39] !== t16 || $[40] !== t20) {
|
|
505
|
+
t21 = /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: t15, children: [
|
|
506
|
+
t16,
|
|
507
|
+
t20
|
|
446
508
|
] });
|
|
447
|
-
$[
|
|
448
|
-
$[
|
|
449
|
-
$[
|
|
509
|
+
$[39] = t16;
|
|
510
|
+
$[40] = t20;
|
|
511
|
+
$[41] = t21;
|
|
450
512
|
} else {
|
|
451
|
-
|
|
513
|
+
t21 = $[41];
|
|
452
514
|
}
|
|
453
|
-
return
|
|
515
|
+
return t21;
|
|
454
516
|
};
|
|
455
517
|
|
|
456
518
|
export { PanoramaxWebViewerPanel };
|
package/dist/viewer-panels.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo } from './chunk-
|
|
2
|
-
export { PanoramaxDataProvider, PanoramaxPanel, panoramaxPhotoFromItem } from './chunk-
|
|
1
|
+
export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo } from './chunk-LZR5SZDS.js';
|
|
2
|
+
export { PanoramaxDataProvider, PanoramaxPanel, panoramaxPhotoFromItem } from './chunk-R6BDVYWM.js';
|
|
3
|
+
import './chunk-XLBFXACK.js';
|
|
3
4
|
import './chunk-GYUS2JVV.js';
|
|
@@ -7,16 +7,19 @@ export declare const FloatingViewerInfoButton: ({ label, onClick, }: {
|
|
|
7
7
|
}) => import("react").JSX.Element;
|
|
8
8
|
export type FloatingPhotoViewerProps = {
|
|
9
9
|
title: ReactNode;
|
|
10
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* Buttons or links right after the title, e.g. `<FloatingViewerInfoButton>` for the photo's
|
|
12
|
+
* details. They keep their size; a long title gives way.
|
|
13
|
+
*/
|
|
11
14
|
titleActions?: ReactNode;
|
|
12
|
-
/** Suggested views (viewpoint × direction); shown as chips. Empty hides the strip. */
|
|
13
|
-
suggestions
|
|
14
|
-
activeDirectionKey
|
|
15
|
+
/** Suggested views (viewpoint × direction); shown as chips. Empty or left out hides the strip. */
|
|
16
|
+
suggestions?: ViewSuggestion[];
|
|
17
|
+
activeDirectionKey?: string | null;
|
|
15
18
|
/**
|
|
16
19
|
* A view button was clicked. `candidate` is the photo to show: the view's best one, or the next
|
|
17
20
|
* one when the active view is clicked again.
|
|
18
21
|
*/
|
|
19
|
-
onSelectSuggestion
|
|
22
|
+
onSelectSuggestion?: (suggestion: ViewSuggestion, candidate: PhotoCandidate) => void;
|
|
20
23
|
/** The photo in the viewer, so the active view can show which of its photos that is. */
|
|
21
24
|
shownPhotoId?: string | null;
|
|
22
25
|
/**
|
|
@@ -64,10 +67,22 @@ export type FloatingPhotoViewerProps = {
|
|
|
64
67
|
left?: number;
|
|
65
68
|
top?: number;
|
|
66
69
|
};
|
|
70
|
+
/**
|
|
71
|
+
* What the box moves in: its positioned parent (`absolute`, default), or the viewport (`fixed`),
|
|
72
|
+
* for a box over the whole page. A `fixed` box needs an ancestor without `transform` or `filter`.
|
|
73
|
+
*/
|
|
74
|
+
position?: 'absolute' | 'fixed';
|
|
75
|
+
/**
|
|
76
|
+
* Lets the box leave its container until only this share (0–1) of its width and height shows,
|
|
77
|
+
* like a free window; never over the top, where the header is. It also stays that way when the
|
|
78
|
+
* container or the box changes size. Without it the box keeps 8px from the right and bottom edge.
|
|
79
|
+
*/
|
|
80
|
+
minVisibleShare?: number;
|
|
67
81
|
};
|
|
68
82
|
/**
|
|
69
|
-
* Photo viewer box floating over the map. Render inside a positioned (relative) map container
|
|
83
|
+
* Photo viewer box floating over the map. Render inside a positioned (relative) map container,
|
|
84
|
+
* or anywhere with `position="fixed"`.
|
|
70
85
|
* Drag the header to move, drag the left edge to resize. Keys: Esc closes, [ and ] step history,
|
|
71
86
|
* Alt + arrow left/right step along (`step`).
|
|
72
87
|
*/
|
|
73
|
-
export declare const FloatingPhotoViewer: ({ title, titleActions, suggestions, activeDirectionKey, onSelectSuggestion, shownPhotoId, canGoBack, canGoForward, onBack, onForward, onClose, step, toolbar, status, children, footer, drawer, storageKey, defaultPosition, }: FloatingPhotoViewerProps) => import("react").JSX.Element;
|
|
88
|
+
export declare const FloatingPhotoViewer: ({ title, titleActions, suggestions, activeDirectionKey, onSelectSuggestion, shownPhotoId, canGoBack, canGoForward, onBack, onForward, onClose, step, toolbar, status, children, footer, drawer, storageKey, defaultPosition, position, minVisibleShare, }: FloatingPhotoViewerProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
type Size = {
|
|
2
|
+
width: number;
|
|
3
|
+
height: number;
|
|
4
|
+
};
|
|
5
|
+
/** Offset of the box from the right and bottom edge of its container. */
|
|
6
|
+
export type FloatingViewerPosition = {
|
|
7
|
+
right: number;
|
|
8
|
+
bottom: number;
|
|
9
|
+
};
|
|
10
|
+
/** Distance the box keeps from the right and bottom edge without `minVisibleShare`. */
|
|
11
|
+
export declare const FLOATING_VIEWER_EDGE = 8;
|
|
12
|
+
/**
|
|
13
|
+
* Keeps the box in its container. With `minVisibleShare` (0–1) it may leave the container until
|
|
14
|
+
* only that share of its width and height shows, but never over the top: the header up there is
|
|
15
|
+
* what moves it, so the top limit wins when the box is taller than the container.
|
|
16
|
+
*/
|
|
17
|
+
export declare const clampFloatingViewerPosition: ({ right, bottom }: FloatingViewerPosition, box: Size, container: Size, minVisibleShare?: number) => FloatingViewerPosition;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { type LngLat, type NormalizedPhoto, type PhotoLookingAt, type PhotoTypeFilter, type ViewpointPhotoSource } from '@osm-editor-kit/street-imagery';
|
|
2
|
+
export type PhotosLookingAtOptions = {
|
|
3
|
+
/** Only photos from the last N years. */
|
|
4
|
+
maxAgeYears?: number;
|
|
5
|
+
photoTypes?: PhotoTypeFilter[];
|
|
6
|
+
/** Default 50; a source may not reach further (the Mapillary radius search ends at 50 m). */
|
|
7
|
+
maxDistanceMeters?: number;
|
|
8
|
+
/** A flat photo's heading must point within this many degrees of the place. Default 35. */
|
|
9
|
+
maxFlatAngleDeg?: number;
|
|
10
|
+
/** Candidates kept. Default 20. */
|
|
11
|
+
limit?: number;
|
|
12
|
+
/** Extra app filter (e.g. date range), applied before ranking. */
|
|
13
|
+
filterPhoto?: (photo: NormalizedPhoto) => boolean;
|
|
14
|
+
/** Where photos come from; default Mapillary. Pass several to rank across providers. */
|
|
15
|
+
sources?: ViewpointPhotoSource[];
|
|
16
|
+
/** Set after the click; nothing is requested before. */
|
|
17
|
+
enabled?: boolean;
|
|
18
|
+
};
|
|
19
|
+
export type PhotosLookingAtResult = {
|
|
20
|
+
/** Best first. */
|
|
21
|
+
candidates: PhotoLookingAt[];
|
|
22
|
+
isLoading: boolean;
|
|
23
|
+
isError: boolean;
|
|
24
|
+
};
|
|
25
|
+
/** The photos from all `sources` that see `place`, best first; `null` while there is no place. */
|
|
26
|
+
export declare const usePhotosLookingAt: (place: LngLat | null, { maxAgeYears, photoTypes, maxDistanceMeters, maxFlatAngleDeg, limit, filterPhoto, sources, enabled, }?: PhotosLookingAtOptions) => PhotosLookingAtResult;
|
package/package.json
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@osm-editor-kit/street-imagery-react",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.15",
|
|
4
4
|
"description": "React MapLibre layers and photo viewers for street-level imagery providers.",
|
|
5
|
-
"homepage": "https://github.
|
|
5
|
+
"homepage": "https://osm-editor-kit.github.io/street-imagery/",
|
|
6
|
+
"bugs": {
|
|
7
|
+
"url": "https://github.com/osm-editor-kit/street-imagery/issues"
|
|
8
|
+
},
|
|
6
9
|
"license": "MIT",
|
|
7
10
|
"author": "Tobias Jordans",
|
|
8
11
|
"repository": {
|
|
9
12
|
"type": "git",
|
|
10
|
-
"url": "git+https://github.com/
|
|
13
|
+
"url": "git+https://github.com/osm-editor-kit/street-imagery.git",
|
|
11
14
|
"directory": "packages/street-imagery-react"
|
|
12
15
|
},
|
|
13
16
|
"files": [
|
|
@@ -67,7 +70,7 @@
|
|
|
67
70
|
"zustand": "^5.0.7"
|
|
68
71
|
},
|
|
69
72
|
"peerDependencies": {
|
|
70
|
-
"@osm-editor-kit/street-imagery": "^0.1.0-alpha.
|
|
73
|
+
"@osm-editor-kit/street-imagery": "^0.1.0-alpha.12",
|
|
71
74
|
"@panoramax/web-viewer": "^5",
|
|
72
75
|
"@tanstack/react-query": "^5",
|
|
73
76
|
"mapillary-js": "^4",
|