@ericchen1990/pano-view 0.2.0 → 1.0.0
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/README.md +304 -130
- package/dist/index.cjs +1587 -630
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +194 -62
- package/dist/index.d.ts +194 -62
- package/dist/index.mjs +1472 -502
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { CSSProperties, ReactNode, ComponentPropsWithoutRef, IframeHTMLAttributes } from 'react';
|
|
3
3
|
import { Texture, ColorRepresentation, Vector3 } from 'three';
|
|
4
4
|
|
|
5
5
|
declare const MAX_HOTSPOT_PITCH = 90;
|
|
@@ -29,9 +29,33 @@ type HotspotDragEvent = HotspotInteractionEvent & {
|
|
|
29
29
|
source: "pointer";
|
|
30
30
|
startPosition: HotspotPosition;
|
|
31
31
|
};
|
|
32
|
+
/** When a hotspot tooltip is shown. Defaults to `"always"`. */
|
|
33
|
+
type HotspotTooltipTrigger = "always" | "hover" | "click";
|
|
34
|
+
/** Where the tooltip sits relative to the hotspot. Defaults to `"top"`. */
|
|
35
|
+
type HotspotTooltipPlacement = "top" | "bottom" | "left" | "right";
|
|
36
|
+
/** Plain-text and/or image content for a hotspot tooltip. */
|
|
37
|
+
type HotspotTooltipContent = {
|
|
38
|
+
text?: string;
|
|
39
|
+
image?: string;
|
|
40
|
+
imageAlt?: string;
|
|
41
|
+
};
|
|
32
42
|
type HotspotCommonProps = {
|
|
33
43
|
id: string;
|
|
34
44
|
position: HotspotPosition;
|
|
45
|
+
/**
|
|
46
|
+
* Tooltip shown at the hotspot anchor. A string is treated as `{ text }`.
|
|
47
|
+
* Defaults to always visible when content is present.
|
|
48
|
+
*/
|
|
49
|
+
tooltip?: string | HotspotTooltipContent;
|
|
50
|
+
/** Defaults to `"always"`. `"hover"` and `"click"` require `interactive`. */
|
|
51
|
+
tooltipTrigger?: HotspotTooltipTrigger;
|
|
52
|
+
/** Defaults to `"top"`. */
|
|
53
|
+
tooltipPlacement?: HotspotTooltipPlacement;
|
|
54
|
+
/**
|
|
55
|
+
* Screen-space gap in CSS pixels between the hotspot edge and the tooltip.
|
|
56
|
+
* Defaults to 12.
|
|
57
|
+
*/
|
|
58
|
+
tooltipOffset?: number;
|
|
35
59
|
/** Angular width in degrees. Defaults to 12. */
|
|
36
60
|
width?: number;
|
|
37
61
|
/** Angular height in degrees. Defaults to 8. */
|
|
@@ -56,6 +80,11 @@ type HotspotCommonProps = {
|
|
|
56
80
|
visible?: boolean;
|
|
57
81
|
/** Whether the hotspot accepts pointer and keyboard interaction. Defaults to true. */
|
|
58
82
|
interactive?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Canvas cursor while this hotspot is hovered. Defaults to the viewer's
|
|
85
|
+
* `cursors.hotspot` value (`"pointer"`).
|
|
86
|
+
*/
|
|
87
|
+
cursor?: CSSProperties["cursor"];
|
|
59
88
|
draggable?: boolean;
|
|
60
89
|
/** Required for keyboard-accessible clickable hotspots. */
|
|
61
90
|
ariaLabel?: string;
|
|
@@ -96,7 +125,7 @@ type KeyboardControlsProps = {
|
|
|
96
125
|
invert?: boolean;
|
|
97
126
|
/**
|
|
98
127
|
* Maximum FOV change rate in degrees per second. When omitted, no extra
|
|
99
|
-
* rate cap is applied. Usually supplied by
|
|
128
|
+
* rate cap is applied. Usually supplied by PanoViewer from `controls.fovSpeed`.
|
|
100
129
|
*/
|
|
101
130
|
fovSpeed?: number;
|
|
102
131
|
/** Called once when the previous-scene binding is pressed. */
|
|
@@ -113,14 +142,14 @@ declare function cycleSceneId(scenes: readonly {
|
|
|
113
142
|
id: string;
|
|
114
143
|
}[], activeSceneId: string, step: 1 | -1): string | null;
|
|
115
144
|
/**
|
|
116
|
-
* Adds keyboard navigation to the nearest
|
|
117
|
-
*
|
|
118
|
-
* movement/zoom keys for continuous motion; scene and reset
|
|
119
|
-
* per key press.
|
|
145
|
+
* Adds keyboard navigation to the nearest PanoViewer. Enabled by default;
|
|
146
|
+
* render this component only to override properties, bindings, or scene
|
|
147
|
+
* callbacks. Hold movement/zoom keys for continuous motion; scene and reset
|
|
148
|
+
* bindings fire once per key press.
|
|
120
149
|
*/
|
|
121
150
|
declare function KeyboardControls({ enabled, keys, rotateSpeed, zoomSpeed, shiftMultiplier, invert, fovSpeed, onPreviousScene, onNextScene, }: KeyboardControlsProps): null;
|
|
122
151
|
|
|
123
|
-
type
|
|
152
|
+
type PanoViewerState = {
|
|
124
153
|
/** Horizontal look angle in degrees. Positive values look right. */
|
|
125
154
|
yaw: number;
|
|
126
155
|
/** Vertical look angle in degrees. Positive values look up. */
|
|
@@ -128,13 +157,13 @@ type PanoViewState = {
|
|
|
128
157
|
/** Vertical perspective field of view in degrees. */
|
|
129
158
|
fov: number;
|
|
130
159
|
};
|
|
131
|
-
type
|
|
160
|
+
type SetPanoViewerOptions = {
|
|
132
161
|
/** Apply the new view immediately instead of preserving current inertia. */
|
|
133
162
|
immediate?: boolean;
|
|
134
163
|
};
|
|
135
|
-
type
|
|
136
|
-
getView: () =>
|
|
137
|
-
setView: (view: Partial<
|
|
164
|
+
type PanoViewerHandle = {
|
|
165
|
+
getView: () => PanoViewerState;
|
|
166
|
+
setView: (view: Partial<PanoViewerState>, options?: SetPanoViewerOptions) => void;
|
|
138
167
|
reset: () => void;
|
|
139
168
|
/** @deprecated Control an AutoRotate component's enabled prop instead. */
|
|
140
169
|
startAutoRotate: () => void;
|
|
@@ -172,12 +201,12 @@ type TouchControlsOptions = {
|
|
|
172
201
|
type PanoramaControlsOptions = {
|
|
173
202
|
/**
|
|
174
203
|
* Master switch for user view controls. Defaults to true. Setting
|
|
175
|
-
* `controls={false}` on
|
|
204
|
+
* `controls={false}` on PanoViewer still disables all user input.
|
|
176
205
|
*/
|
|
177
206
|
enabled?: boolean;
|
|
178
207
|
/** Enables drag and zoom inertia. Defaults to true. */
|
|
179
208
|
inertia?: boolean;
|
|
180
|
-
/** @deprecated Render <AutoRotate enabled /> inside
|
|
209
|
+
/** @deprecated Render <AutoRotate enabled /> inside PanoViewer instead. */
|
|
181
210
|
autoRotate?: boolean;
|
|
182
211
|
/** @deprecated Use AutoRotate's speed prop instead. */
|
|
183
212
|
autoRotateSpeed?: number;
|
|
@@ -222,9 +251,9 @@ type PanoramaControlsOptions = {
|
|
|
222
251
|
*/
|
|
223
252
|
zoomDamping?: number;
|
|
224
253
|
/**
|
|
225
|
-
* Mouse channel. `true` / omit mounts defaults; `false`
|
|
226
|
-
* instance
|
|
227
|
-
*
|
|
254
|
+
* Mouse channel. `true` / omit mounts defaults; `false` disables the
|
|
255
|
+
* default instance; an object merges with defaults and supports `enabled`.
|
|
256
|
+
* Rendering `<MouseControls />` as a child also replaces the default.
|
|
228
257
|
*/
|
|
229
258
|
mouse?: boolean | MouseControlsOptions;
|
|
230
259
|
/**
|
|
@@ -232,8 +261,8 @@ type PanoramaControlsOptions = {
|
|
|
232
261
|
*/
|
|
233
262
|
touch?: boolean | TouchControlsOptions;
|
|
234
263
|
/**
|
|
235
|
-
* Keyboard channel. Same shape as `mouse`.
|
|
236
|
-
*
|
|
264
|
+
* Keyboard channel. Same shape as `mouse`. Rendering `<KeyboardControls />`
|
|
265
|
+
* as a child replaces the default (no need to set this to false).
|
|
237
266
|
*/
|
|
238
267
|
keyboard?: boolean | KeyboardControlsProps;
|
|
239
268
|
};
|
|
@@ -242,7 +271,7 @@ type PanoramaControlsOptions = {
|
|
|
242
271
|
declare const MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
|
|
243
272
|
type PanoContextMenuSelectContext = {
|
|
244
273
|
position: PanoramaPointerEvent["position"];
|
|
245
|
-
view:
|
|
274
|
+
view: PanoViewerState;
|
|
246
275
|
nativeEvent: MouseEvent | PointerEvent;
|
|
247
276
|
close: () => void;
|
|
248
277
|
};
|
|
@@ -308,7 +337,7 @@ type PanoContextMenuAppearance = {
|
|
|
308
337
|
};
|
|
309
338
|
type PanoContextMenuRenderProps = {
|
|
310
339
|
event: PanoramaPointerEvent;
|
|
311
|
-
view:
|
|
340
|
+
view: PanoViewerState;
|
|
312
341
|
close: () => void;
|
|
313
342
|
};
|
|
314
343
|
type PanoContextMenuProps = {
|
|
@@ -341,8 +370,8 @@ type PanoContextMenuProps = {
|
|
|
341
370
|
children?: (props: PanoContextMenuRenderProps) => ReactNode;
|
|
342
371
|
};
|
|
343
372
|
/**
|
|
344
|
-
* Custom panorama context menu. Must render inside
|
|
345
|
-
*
|
|
373
|
+
* Custom panorama context menu. Must render inside PanoViewer. Prefer
|
|
374
|
+
* PanoViewer's `contextMenu` prop for the default menu; use this component
|
|
346
375
|
* when replacing the default instance (`contextMenu={false}`).
|
|
347
376
|
*/
|
|
348
377
|
declare function PanoContextMenu({ items, prepend, append, appearance, className, style, itemClassName, separatorClassName, children, }: PanoContextMenuProps): null;
|
|
@@ -362,7 +391,7 @@ type PanoContextMenuPresets = {
|
|
|
362
391
|
/**
|
|
363
392
|
* Builds reusable built-in context-menu items. Prefer preset id strings
|
|
364
393
|
* (`"resetView"`, `"fullscreen"`) in `items` / `append` / `prepend` when
|
|
365
|
-
* configuring `
|
|
394
|
+
* configuring `PanoViewer`; use this helper when assembling items manually.
|
|
366
395
|
*/
|
|
367
396
|
declare function createPanoContextMenuPresets(actions: PanoContextMenuPresetActions): PanoContextMenuPresets;
|
|
368
397
|
/** Alias for `createPanoContextMenuPresets(actions).defaults`. */
|
|
@@ -376,12 +405,33 @@ declare function resolvePanoContextMenuEntries(entries: readonly PanoContextMenu
|
|
|
376
405
|
*/
|
|
377
406
|
declare function composePanoContextMenuItems(props: Pick<PanoContextMenuProps, "items" | "prepend" | "append">, presets: PanoContextMenuPresets): PanoContextMenuItem[];
|
|
378
407
|
|
|
379
|
-
|
|
408
|
+
/** A CSS `cursor` value applied to the panorama canvas. */
|
|
409
|
+
type PanoCursor = NonNullable<CSSProperties["cursor"]>;
|
|
410
|
+
/** Canvas cursor values for viewer idle, drag, and hotspot interaction. */
|
|
411
|
+
type PanoCursors = {
|
|
412
|
+
/** Idle canvas cursor. Defaults to `"grab"`. */
|
|
413
|
+
default?: PanoCursor;
|
|
414
|
+
/** Cursor while dragging the panorama with the mouse. Defaults to `"grabbing"`. */
|
|
415
|
+
dragging?: PanoCursor;
|
|
416
|
+
/** Cursor while hovering an interactive hotspot. Defaults to `"pointer"`. */
|
|
417
|
+
hotspot?: PanoCursor;
|
|
418
|
+
/** Cursor while dragging a hotspot. Defaults to `"move"`. */
|
|
419
|
+
hotspotDragging?: PanoCursor;
|
|
420
|
+
};
|
|
421
|
+
declare const DEFAULT_PANO_CURSORS: Required<PanoCursors>;
|
|
422
|
+
|
|
423
|
+
type PanoViewerProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange" | "contextMenu"> & {
|
|
380
424
|
children?: ReactNode;
|
|
381
|
-
initialView?: Partial<
|
|
425
|
+
initialView?: Partial<PanoViewerState>;
|
|
382
426
|
minFov?: number;
|
|
383
427
|
maxFov?: number;
|
|
384
428
|
controls?: boolean | PanoramaControlsOptions;
|
|
429
|
+
/**
|
|
430
|
+
* Canvas cursor. `true` / omit uses grab / grabbing / pointer / move;
|
|
431
|
+
* `false` leaves the canvas cursor unchanged; an object merges with the
|
|
432
|
+
* defaults (`default`, `dragging`, `hotspot`, `hotspotDragging`).
|
|
433
|
+
*/
|
|
434
|
+
cursors?: boolean | PanoCursors;
|
|
385
435
|
/**
|
|
386
436
|
* Default context menu. `true` / omit mounts Reset view + Fullscreen;
|
|
387
437
|
* `false` skips the default instance; an object merges appearance and
|
|
@@ -389,19 +439,25 @@ type PanoViewProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChang
|
|
|
389
439
|
* `append` to keep the defaults and add entries.
|
|
390
440
|
*/
|
|
391
441
|
contextMenu?: boolean | PanoContextMenuProps;
|
|
392
|
-
onViewChange?: (view:
|
|
442
|
+
onViewChange?: (view: PanoViewerState) => void;
|
|
393
443
|
onPanoramaClick?: (event: PanoramaPointerEvent) => void;
|
|
394
444
|
onPanoramaDoubleClick?: (event: PanoramaPointerEvent) => void;
|
|
395
445
|
onPanoramaPointerMove?: (event: PanoramaPointerEvent) => void;
|
|
396
446
|
/** Canvas pixel ratio. Defaults to a capped range of 1–2. */
|
|
397
447
|
dpr?: number | [number, number];
|
|
398
448
|
};
|
|
399
|
-
declare const
|
|
449
|
+
declare const PanoViewer: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "contextMenu" | "onChange"> & {
|
|
400
450
|
children?: ReactNode;
|
|
401
|
-
initialView?: Partial<
|
|
451
|
+
initialView?: Partial<PanoViewerState>;
|
|
402
452
|
minFov?: number;
|
|
403
453
|
maxFov?: number;
|
|
404
454
|
controls?: boolean | PanoramaControlsOptions;
|
|
455
|
+
/**
|
|
456
|
+
* Canvas cursor. `true` / omit uses grab / grabbing / pointer / move;
|
|
457
|
+
* `false` leaves the canvas cursor unchanged; an object merges with the
|
|
458
|
+
* defaults (`default`, `dragging`, `hotspot`, `hotspotDragging`).
|
|
459
|
+
*/
|
|
460
|
+
cursors?: boolean | PanoCursors;
|
|
405
461
|
/**
|
|
406
462
|
* Default context menu. `true` / omit mounts Reset view + Fullscreen;
|
|
407
463
|
* `false` skips the default instance; an object merges appearance and
|
|
@@ -409,13 +465,13 @@ declare const PanoView: react.ForwardRefExoticComponent<Omit<Omit<react.Detailed
|
|
|
409
465
|
* `append` to keep the defaults and add entries.
|
|
410
466
|
*/
|
|
411
467
|
contextMenu?: boolean | PanoContextMenuProps;
|
|
412
|
-
onViewChange?: (view:
|
|
468
|
+
onViewChange?: (view: PanoViewerState) => void;
|
|
413
469
|
onPanoramaClick?: (event: PanoramaPointerEvent) => void;
|
|
414
470
|
onPanoramaDoubleClick?: (event: PanoramaPointerEvent) => void;
|
|
415
471
|
onPanoramaPointerMove?: (event: PanoramaPointerEvent) => void;
|
|
416
472
|
/** Canvas pixel ratio. Defaults to a capped range of 1–2. */
|
|
417
473
|
dpr?: number | [number, number];
|
|
418
|
-
} & react.RefAttributes<
|
|
474
|
+
} & react.RefAttributes<PanoViewerHandle>>;
|
|
419
475
|
|
|
420
476
|
/** Options for automatic horizontal panorama rotation. */
|
|
421
477
|
type AutoRotateProps = {
|
|
@@ -432,8 +488,8 @@ type AutoRotateProps = {
|
|
|
432
488
|
startDelay?: number;
|
|
433
489
|
};
|
|
434
490
|
/**
|
|
435
|
-
* Adds automatic rotation to the nearest
|
|
436
|
-
* child of
|
|
491
|
+
* Adds automatic rotation to the nearest PanoViewer. Render one instance as a
|
|
492
|
+
* child of PanoViewer, alongside its panorama source.
|
|
437
493
|
*/
|
|
438
494
|
declare function AutoRotate({ enabled, speed, acceleration, startDelay, }: AutoRotateProps): null;
|
|
439
495
|
|
|
@@ -451,8 +507,8 @@ type ViewInteractionEvent = {
|
|
|
451
507
|
source: ViewInteractionSource;
|
|
452
508
|
};
|
|
453
509
|
type PanoEventMap = {
|
|
454
|
-
viewchange:
|
|
455
|
-
viewsettled:
|
|
510
|
+
viewchange: PanoViewerState;
|
|
511
|
+
viewsettled: PanoViewerState;
|
|
456
512
|
viewinteractionstart: ViewInteractionEvent;
|
|
457
513
|
viewinteractionend: ViewInteractionEvent;
|
|
458
514
|
click: PanoramaPointerEvent;
|
|
@@ -484,8 +540,8 @@ type PanoEventsProps = {
|
|
|
484
540
|
* Each PanoEvents instance tracks idle independently.
|
|
485
541
|
*/
|
|
486
542
|
idleTime?: number;
|
|
487
|
-
onViewChange?: (view:
|
|
488
|
-
onViewSettled?: (view:
|
|
543
|
+
onViewChange?: (view: PanoViewerState) => void;
|
|
544
|
+
onViewSettled?: (view: PanoViewerState) => void;
|
|
489
545
|
onViewInteractionStart?: (event: ViewInteractionEvent) => void;
|
|
490
546
|
onViewInteractionEnd?: (event: ViewInteractionEvent) => void;
|
|
491
547
|
onClick?: (event: PanoramaPointerEvent) => void;
|
|
@@ -505,12 +561,12 @@ type PanoEventsProps = {
|
|
|
505
561
|
onAutoRotateOneRound?: () => void;
|
|
506
562
|
};
|
|
507
563
|
/**
|
|
508
|
-
* Subscribes to viewer-level panorama events. Must run inside
|
|
564
|
+
* Subscribes to viewer-level panorama events. Must run inside PanoViewer.
|
|
509
565
|
* Prefer the {@link PanoEvents} component for declarative usage.
|
|
510
566
|
*/
|
|
511
567
|
declare function usePanoEvents({ idleTime, onViewChange, onViewSettled, onViewInteractionStart, onViewInteractionEnd, onClick, onDoubleClick, onPointerDown, onPointerUp, onPointerMove, onContextMenu, onWheel, onIdle, onIdleEnd, onEnterFullscreen, onExitFullscreen, onResize, onAutoRotateStart, onAutoRotateStop, onAutoRotateOneRound, }: PanoEventsProps): void;
|
|
512
568
|
/**
|
|
513
|
-
* Declarative viewer-level event listeners for the nearest
|
|
569
|
+
* Declarative viewer-level event listeners for the nearest PanoViewer.
|
|
514
570
|
* Multiple instances may coexist; each tracks its own idle timer.
|
|
515
571
|
*/
|
|
516
572
|
declare function PanoEvents(props: PanoEventsProps): null;
|
|
@@ -518,21 +574,21 @@ declare function PanoEvents(props: PanoEventsProps): null;
|
|
|
518
574
|
type MouseControlsProps = MouseControlsOptions & {
|
|
519
575
|
/**
|
|
520
576
|
* Maximum FOV change rate in degrees per second for wheel zoom. When
|
|
521
|
-
* omitted, no extra rate cap is applied. Usually supplied by
|
|
577
|
+
* omitted, no extra rate cap is applied. Usually supplied by PanoViewer from
|
|
522
578
|
* `controls.fovSpeed`.
|
|
523
579
|
*/
|
|
524
580
|
fovSpeed?: number;
|
|
525
581
|
};
|
|
526
582
|
/**
|
|
527
|
-
* Adds mouse (and pen) drag / wheel navigation to the nearest
|
|
528
|
-
*
|
|
583
|
+
* Adds mouse (and pen) drag / wheel navigation to the nearest PanoViewer.
|
|
584
|
+
* Enabled by default; render this component only to override properties.
|
|
529
585
|
*/
|
|
530
586
|
declare function MouseControls({ enabled, rotateSpeed, zoomSpeed, wheel, invert, buttons, fovSpeed, }: MouseControlsProps): null;
|
|
531
587
|
|
|
532
588
|
type TouchControlsProps = TouchControlsOptions;
|
|
533
589
|
/**
|
|
534
|
-
* Adds touch drag and pinch-zoom navigation to the nearest
|
|
535
|
-
*
|
|
590
|
+
* Adds touch drag and pinch-zoom navigation to the nearest PanoViewer.
|
|
591
|
+
* Enabled by default; render this component only to override properties.
|
|
536
592
|
*/
|
|
537
593
|
declare function TouchControls({ enabled, rotateSpeed, invert, pinchZoom, }: TouchControlsProps): null;
|
|
538
594
|
|
|
@@ -612,40 +668,40 @@ type TileProps = {
|
|
|
612
668
|
onLevelChange?: (level: number) => void;
|
|
613
669
|
};
|
|
614
670
|
|
|
615
|
-
type
|
|
616
|
-
type
|
|
617
|
-
preset:
|
|
671
|
+
type SceneTransitionPreset = "none" | "crossfade" | "zoom" | "blackout" | "whiteFlash" | "slideRightToLeft" | "slideTopToBottom" | "slideDiagonal" | "circleOpen" | "verticalOpen" | "horizontalOpen" | "ellipticZoomOpen";
|
|
672
|
+
type SceneTransition = SceneTransitionPreset | {
|
|
673
|
+
preset: SceneTransitionPreset;
|
|
618
674
|
/** Overrides the KRpano-compatible default duration in seconds. */
|
|
619
675
|
duration?: number;
|
|
620
676
|
};
|
|
621
|
-
type
|
|
677
|
+
type SphereScene = {
|
|
622
678
|
id: string;
|
|
623
679
|
type: "sphere";
|
|
624
680
|
src: string;
|
|
625
681
|
yawOffset?: number;
|
|
626
682
|
};
|
|
627
|
-
type
|
|
683
|
+
type TileScene = Omit<TileProps, "loadMode" | "visible" | "onReady" | "onPreviewError" | "onLoadProgress" | "onTileError" | "onLevelChange"> & {
|
|
628
684
|
id: string;
|
|
629
685
|
type: "tile";
|
|
630
686
|
};
|
|
631
|
-
type
|
|
632
|
-
type
|
|
687
|
+
type Scene = SphereScene | TileScene;
|
|
688
|
+
type SceneTransitionEndEvent = {
|
|
633
689
|
previousSceneId: string;
|
|
634
690
|
sceneId: string;
|
|
635
|
-
preset:
|
|
691
|
+
preset: SceneTransitionPreset;
|
|
636
692
|
};
|
|
637
|
-
type
|
|
693
|
+
type SceneTransitionErrorEvent = {
|
|
638
694
|
sceneId: string;
|
|
639
695
|
error: unknown;
|
|
640
696
|
};
|
|
641
|
-
type
|
|
642
|
-
scenes: readonly
|
|
697
|
+
type ScenesProps = {
|
|
698
|
+
scenes: readonly Scene[];
|
|
643
699
|
activeSceneId: string;
|
|
644
|
-
transition?:
|
|
700
|
+
transition?: SceneTransition;
|
|
645
701
|
/** Rendered only after a scene has finished transitioning in. */
|
|
646
|
-
renderHotspots?: (scene:
|
|
647
|
-
onTransitionEnd?: (event:
|
|
648
|
-
onTransitionError?: (event:
|
|
702
|
+
renderHotspots?: (scene: Scene) => ReactNode;
|
|
703
|
+
onTransitionEnd?: (event: SceneTransitionEndEvent) => void;
|
|
704
|
+
onTransitionError?: (event: SceneTransitionErrorEvent) => void;
|
|
649
705
|
/** Viewer-wide budget shared by every tile scene. Defaults to 128 MiB. */
|
|
650
706
|
maxTextureMemoryMb?: number;
|
|
651
707
|
/** Viewer-wide tile request limit. Defaults to 4. */
|
|
@@ -653,7 +709,7 @@ type PanoramaScenesProps = {
|
|
|
653
709
|
/** Maximum physical-pixel area of the outgoing GPU snapshot. */
|
|
654
710
|
snapshotMaxPixels?: number;
|
|
655
711
|
};
|
|
656
|
-
declare function
|
|
712
|
+
declare function Scenes({ maxTextureMemoryMb, maxConcurrentTileLoads, ...props }: ScenesProps): react.JSX.Element;
|
|
657
713
|
|
|
658
714
|
type ImageHotspotProps = HotspotCommonProps & {
|
|
659
715
|
src: string;
|
|
@@ -824,6 +880,59 @@ type VideoHotspotProps = HotspotCommonProps & {
|
|
|
824
880
|
};
|
|
825
881
|
declare function VideoHotspot({ id, src, playing, poster, loop, muted, volume, playsInline, preload, crossOrigin, width, height, opacity, onPlaybackStateChange, onPlaybackError, onEnded, onError, ...anchorProps }: VideoHotspotProps): react.JSX.Element;
|
|
826
882
|
|
|
883
|
+
type TextHotspotAlign = "left" | "center" | "right";
|
|
884
|
+
type TextHotspotVerticalAlign = "top" | "middle" | "bottom";
|
|
885
|
+
type TextHotspotWhiteSpace = "normal" | "nowrap";
|
|
886
|
+
type TextHotspotFontStyle = "normal" | "italic";
|
|
887
|
+
/** Serializable typography and panel paint for a text hotspot. */
|
|
888
|
+
type TextHotspotStyle = {
|
|
889
|
+
fontFamily?: string;
|
|
890
|
+
/** Fraction of the texture height. Defaults to 0.18. */
|
|
891
|
+
fontSize?: number;
|
|
892
|
+
fontWeight?: number | string;
|
|
893
|
+
fontStyle?: TextHotspotFontStyle;
|
|
894
|
+
color?: string;
|
|
895
|
+
/** CSS color. An empty string skips the panel fill. */
|
|
896
|
+
background?: string;
|
|
897
|
+
backgroundOpacity?: number;
|
|
898
|
+
/** Fraction of the texture's shorter side. */
|
|
899
|
+
padding?: number;
|
|
900
|
+
align?: TextHotspotAlign;
|
|
901
|
+
verticalAlign?: TextHotspotVerticalAlign;
|
|
902
|
+
lineHeight?: number;
|
|
903
|
+
whiteSpace?: TextHotspotWhiteSpace;
|
|
904
|
+
/** Fraction of the texture's shorter side, from 0 to 0.5. */
|
|
905
|
+
borderRadius?: number;
|
|
906
|
+
stroke?: string;
|
|
907
|
+
strokeWidth?: number;
|
|
908
|
+
};
|
|
909
|
+
type TextHotspotProps = HotspotCommonProps & TextHotspotStyle & {
|
|
910
|
+
text: string;
|
|
911
|
+
onLoad?: (texture: Texture) => void;
|
|
912
|
+
onError?: (error: unknown) => void;
|
|
913
|
+
};
|
|
914
|
+
declare function TextHotspot({ text, width, height, opacity, fontFamily, fontSize, fontWeight, fontStyle, color, background, backgroundOpacity, padding, align, verticalAlign, lineHeight, whiteSpace, borderRadius, stroke, strokeWidth, onLoad, onError, ...anchorProps }: TextHotspotProps): react.JSX.Element;
|
|
915
|
+
|
|
916
|
+
type IframePointerPolicy = "hotspot" | "content";
|
|
917
|
+
type IframeHotspotProps = HotspotCommonProps & {
|
|
918
|
+
src: string;
|
|
919
|
+
/** Accessible iframe title. Falls back to ariaLabel. */
|
|
920
|
+
title?: string;
|
|
921
|
+
sandbox?: string;
|
|
922
|
+
allow?: string;
|
|
923
|
+
referrerPolicy?: IframeHTMLAttributes<HTMLIFrameElement>["referrerPolicy"];
|
|
924
|
+
loading?: "eager" | "lazy";
|
|
925
|
+
/**
|
|
926
|
+
* `hotspot` lets panorama pointer events hit the WebGL plane.
|
|
927
|
+
* `content` makes the embedded page interactive.
|
|
928
|
+
*/
|
|
929
|
+
pointerPolicy?: IframePointerPolicy;
|
|
930
|
+
background?: string;
|
|
931
|
+
onLoad?: () => void;
|
|
932
|
+
onError?: (error: unknown) => void;
|
|
933
|
+
};
|
|
934
|
+
declare function IframeHotspot({ src, title, sandbox, allow, referrerPolicy, loading, pointerPolicy, background, opacity, width, height, onLoad, onError, ...anchorProps }: IframeHotspotProps): react.JSX.Element;
|
|
935
|
+
|
|
827
936
|
declare function Tile({ baseUrl, multires, previewUrl, previewFaceOrder, urlTemplate, resolveTileUrl, maxTextureMemoryMb, maxConcurrentLoads, retryCount, loadMode, visible, onReady, onPreviewError, onLoadProgress, onTileError, onLevelChange, }: TileProps): react.JSX.Element;
|
|
828
937
|
|
|
829
938
|
declare function normalizePanoYaw(yaw: number): number;
|
|
@@ -832,6 +941,8 @@ declare function normalizePanoPosition(position: HotspotPosition): HotspotPositi
|
|
|
832
941
|
declare function panoPositionToVector3(position: HotspotPosition, radius?: number): Vector3;
|
|
833
942
|
declare function vector3ToPanoPosition(vector: Pick<Vector3, "x" | "y" | "z">): HotspotPosition;
|
|
834
943
|
|
|
944
|
+
declare const DEFAULT_HOTSPOT_TOOLTIP_OFFSET = 12;
|
|
945
|
+
|
|
835
946
|
/** Shared serializable fields for every saved hotspot definition. */
|
|
836
947
|
type HotspotDefinitionBase = {
|
|
837
948
|
id: string;
|
|
@@ -839,7 +950,13 @@ type HotspotDefinitionBase = {
|
|
|
839
950
|
label?: string;
|
|
840
951
|
visible?: boolean;
|
|
841
952
|
interactive?: boolean;
|
|
953
|
+
/** Canvas cursor while this hotspot is hovered. */
|
|
954
|
+
cursor?: CSSProperties["cursor"];
|
|
842
955
|
renderOrder?: number;
|
|
956
|
+
tooltip?: string | HotspotTooltipContent;
|
|
957
|
+
tooltipTrigger?: HotspotTooltipTrigger;
|
|
958
|
+
tooltipPlacement?: HotspotTooltipPlacement;
|
|
959
|
+
tooltipOffset?: number;
|
|
843
960
|
};
|
|
844
961
|
/** Shared serializable fields for a hotspot anchored at one yaw/pitch point. */
|
|
845
962
|
type PointHotspotDefinitionBase = HotspotDefinitionBase & {
|
|
@@ -883,6 +1000,21 @@ type VideoHotspotDefinition = PointHotspotDefinitionBase & {
|
|
|
883
1000
|
preload?: "none" | "metadata" | "auto";
|
|
884
1001
|
crossOrigin?: "" | "anonymous" | "use-credentials";
|
|
885
1002
|
};
|
|
1003
|
+
type TextHotspotDefinition = PointHotspotDefinitionBase & TextHotspotStyle & {
|
|
1004
|
+
type: "text";
|
|
1005
|
+
text: string;
|
|
1006
|
+
};
|
|
1007
|
+
type IframeHotspotDefinition = PointHotspotDefinitionBase & {
|
|
1008
|
+
type: "iframe";
|
|
1009
|
+
src: string;
|
|
1010
|
+
title?: string;
|
|
1011
|
+
sandbox?: string;
|
|
1012
|
+
allow?: string;
|
|
1013
|
+
referrerPolicy?: string;
|
|
1014
|
+
loading?: "eager" | "lazy";
|
|
1015
|
+
pointerPolicy?: IframePointerPolicy;
|
|
1016
|
+
background?: string;
|
|
1017
|
+
};
|
|
886
1018
|
type PolygonHotspotDefinition = HotspotDefinitionBase & {
|
|
887
1019
|
type: "polygon";
|
|
888
1020
|
vertices: HotspotPosition[];
|
|
@@ -892,7 +1024,7 @@ type PolygonHotspotDefinition = HotspotDefinitionBase & {
|
|
|
892
1024
|
strokeWidth?: number;
|
|
893
1025
|
strokeOpacity?: number;
|
|
894
1026
|
};
|
|
895
|
-
/** An open path. This extends the original
|
|
1027
|
+
/** An open path. This extends the original point and polygon hotspot categories. */
|
|
896
1028
|
type PolylineHotspotDefinition = HotspotDefinitionBase & {
|
|
897
1029
|
type: "polyline";
|
|
898
1030
|
vertices: HotspotPosition[];
|
|
@@ -900,8 +1032,8 @@ type PolylineHotspotDefinition = HotspotDefinitionBase & {
|
|
|
900
1032
|
strokeWidth?: number;
|
|
901
1033
|
strokeOpacity?: number;
|
|
902
1034
|
};
|
|
903
|
-
type PointHotspotDefinition = ImageHotspotDefinition | GraphicHotspotDefinition | SequenceHotspotDefinition | VideoHotspotDefinition;
|
|
1035
|
+
type PointHotspotDefinition = ImageHotspotDefinition | GraphicHotspotDefinition | SequenceHotspotDefinition | VideoHotspotDefinition | TextHotspotDefinition | IframeHotspotDefinition;
|
|
904
1036
|
/** A serializable, discriminated hotspot collection item. */
|
|
905
1037
|
type HotspotDefinition = PointHotspotDefinition | PolygonHotspotDefinition | PolylineHotspotDefinition;
|
|
906
1038
|
|
|
907
|
-
export { type ArrowGraphic, AutoRotate, type AutoRotateProps, type CircleGraphic, type CubeFaceCode, type DiamondGraphic, type GraphicDefinition, GraphicHotspot, type GraphicHotspotDefinition, type GraphicHotspotProps, type HotspotCommonProps, type HotspotDefinition, type HotspotDefinitionBase, type HotspotDragEvent, type HotspotInputSource, type HotspotInteractionEvent, type HotspotMode, type HotspotPosition, type HotspotScaleMode, ImageHotspot, type ImageHotspotDefinition, type ImageHotspotProps, type KeyboardControlAction, type KeyboardControlKeys, KeyboardControls, type KeyboardControlsProps, MAX_HOTSPOT_PITCH, MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY, type MouseControlButton, MouseControls, type MouseControlsOptions, type MouseControlsProps, PanoContextMenu, type PanoContextMenuActionItem, type PanoContextMenuAppearance, type PanoContextMenuEntry, type PanoContextMenuItem, type PanoContextMenuPresetActions, type PanoContextMenuPresetId, type PanoContextMenuPresetRef, type PanoContextMenuPresets, type PanoContextMenuProps, type PanoContextMenuRenderProps, type PanoContextMenuSelectContext, type PanoContextMenuSeparatorItem, type PanoEventBus, type PanoEventListener, type PanoEventMap, type PanoEventType, PanoEvents, type PanoEventsProps, type PanoResizeEvent,
|
|
1039
|
+
export { type ArrowGraphic, AutoRotate, type AutoRotateProps, type CircleGraphic, type CubeFaceCode, DEFAULT_HOTSPOT_TOOLTIP_OFFSET, DEFAULT_PANO_CURSORS, type DiamondGraphic, type GraphicDefinition, GraphicHotspot, type GraphicHotspotDefinition, type GraphicHotspotProps, type HotspotCommonProps, type HotspotDefinition, type HotspotDefinitionBase, type HotspotDragEvent, type HotspotInputSource, type HotspotInteractionEvent, type HotspotMode, type HotspotPosition, type HotspotScaleMode, type HotspotTooltipContent, type HotspotTooltipPlacement, type HotspotTooltipTrigger, IframeHotspot, type IframeHotspotDefinition, type IframeHotspotProps, type IframePointerPolicy, ImageHotspot, type ImageHotspotDefinition, type ImageHotspotProps, type KeyboardControlAction, type KeyboardControlKeys, KeyboardControls, type KeyboardControlsProps, MAX_HOTSPOT_PITCH, MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY, type MouseControlButton, MouseControls, type MouseControlsOptions, type MouseControlsProps, PanoContextMenu, type PanoContextMenuActionItem, type PanoContextMenuAppearance, type PanoContextMenuEntry, type PanoContextMenuItem, type PanoContextMenuPresetActions, type PanoContextMenuPresetId, type PanoContextMenuPresetRef, type PanoContextMenuPresets, type PanoContextMenuProps, type PanoContextMenuRenderProps, type PanoContextMenuSelectContext, type PanoContextMenuSeparatorItem, type PanoCursor, type PanoCursors, type PanoEventBus, type PanoEventListener, type PanoEventMap, type PanoEventType, PanoEvents, type PanoEventsProps, type PanoResizeEvent, PanoViewer, type PanoViewerHandle, type PanoViewerProps, type PanoViewerState, type PanoWheelEvent, type PanoramaControlsOptions, type PanoramaPointerEvent, type PointHotspotDefinition, type PointHotspotDefinitionBase, PolygonHotspot, type PolygonHotspotDefinition, type PolygonHotspotProps, type PolygonValidationCode, type PolygonValidationIssue, type PolygonVerticesChangeEvent, PolylineHotspot, type PolylineHotspotDefinition, type PolylineHotspotProps, type PolylineValidationIssue, type PolylineVerticesChangeEvent, type RectangleGraphic, type RingGraphic, type Scene, type SceneTransition, type SceneTransitionEndEvent, type SceneTransitionErrorEvent, type SceneTransitionPreset, Scenes, type ScenesProps, type SequenceFrameDirection, type SequenceFrameEvent, SequenceHotspot, type SequenceHotspotDefinition, type SequenceHotspotErrorEvent, type SequenceHotspotProps, type SequenceLoadProgress, type SequencePlaybackState, type SetPanoViewerOptions, Sphere, type SphereProps, type SphereScene, type StarGraphic, type SvgGraphic, type SvgPathGraphic, TextHotspot, type TextHotspotAlign, type TextHotspotDefinition, type TextHotspotFontStyle, type TextHotspotProps, type TextHotspotStyle, type TextHotspotVerticalAlign, type TextHotspotWhiteSpace, Tile, type TileAddress, type TileLoadError, type TileLoadProgress, type TileMultiresConfig, type TileProps, type TileScene, TouchControls, type TouchControlsOptions, type TouchControlsProps, type TriangleGraphic, VideoHotspot, type VideoHotspotDefinition, type VideoHotspotErrorEvent, type VideoHotspotProps, type VideoPlaybackState, type ViewInteractionEvent, type ViewInteractionSource, clampPanoPitch, composePanoContextMenuItems, createDefaultPanoContextMenuItems, createPanoContextMenuPresets, cycleSceneId, normalizePanoPosition, normalizePanoYaw, panoPositionToVector3, resolvePanoContextMenuEntries, unwrapPolygonVertices, usePanoEvents, validatePolygonVertices, validatePolylineVertices, vector3ToPanoPosition };
|