@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/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, CSSProperties, ComponentPropsWithoutRef } from 'react';
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 PanoView from `controls.fovSpeed`.
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 PanoView. PanoView mounts a default
117
- * instance; render your own to customize bindings or scene callbacks. Hold
118
- * movement/zoom keys for continuous motion; scene and reset bindings fire once
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 PanoViewState = {
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 SetPanoViewOptions = {
160
+ type SetPanoViewerOptions = {
132
161
  /** Apply the new view immediately instead of preserving current inertia. */
133
162
  immediate?: boolean;
134
163
  };
135
- type PanoViewHandle = {
136
- getView: () => PanoViewState;
137
- setView: (view: Partial<PanoViewState>, options?: SetPanoViewOptions) => void;
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 PanoView still disables all user input.
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 PanoView instead. */
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` skips the default
226
- * instance (render a custom MouseControls child); an object merges with
227
- * defaults and supports `enabled`.
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`. Set to false when providing a
236
- * custom KeyboardControls child.
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: PanoViewState;
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: PanoViewState;
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 PanoView. Prefer
345
- * PanoView's `contextMenu` prop for the default menu; use this component
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 `PanoView`; use this helper when assembling items manually.
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
- type PanoViewProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange" | "contextMenu"> & {
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<PanoViewState>;
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: PanoViewState) => void;
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 PanoView: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "contextMenu" | "onChange"> & {
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<PanoViewState>;
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: PanoViewState) => void;
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<PanoViewHandle>>;
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 PanoView. Render one instance as a
436
- * child of PanoView, alongside its panorama source.
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: PanoViewState;
455
- viewsettled: PanoViewState;
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: PanoViewState) => void;
488
- onViewSettled?: (view: PanoViewState) => void;
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 PanoView.
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 PanoView.
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 PanoView from
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 PanoView.
528
- * PanoView mounts a default instance; render your own only to override.
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 PanoView.
535
- * PanoView mounts a default instance; render your own only to override.
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 PanoramaTransitionPreset = "none" | "crossfade" | "zoom" | "blackout" | "whiteFlash" | "slideRightToLeft" | "slideTopToBottom" | "slideDiagonal" | "circleOpen" | "verticalOpen" | "horizontalOpen" | "ellipticZoomOpen";
616
- type PanoramaTransition = PanoramaTransitionPreset | {
617
- preset: PanoramaTransitionPreset;
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 SpherePanoramaScene = {
677
+ type SphereScene = {
622
678
  id: string;
623
679
  type: "sphere";
624
680
  src: string;
625
681
  yawOffset?: number;
626
682
  };
627
- type TilePanoramaScene = Omit<TileProps, "loadMode" | "visible" | "onReady" | "onPreviewError" | "onLoadProgress" | "onTileError" | "onLevelChange"> & {
683
+ type TileScene = Omit<TileProps, "loadMode" | "visible" | "onReady" | "onPreviewError" | "onLoadProgress" | "onTileError" | "onLevelChange"> & {
628
684
  id: string;
629
685
  type: "tile";
630
686
  };
631
- type PanoramaScene = SpherePanoramaScene | TilePanoramaScene;
632
- type PanoramaTransitionEndEvent = {
687
+ type Scene = SphereScene | TileScene;
688
+ type SceneTransitionEndEvent = {
633
689
  previousSceneId: string;
634
690
  sceneId: string;
635
- preset: PanoramaTransitionPreset;
691
+ preset: SceneTransitionPreset;
636
692
  };
637
- type PanoramaTransitionErrorEvent = {
693
+ type SceneTransitionErrorEvent = {
638
694
  sceneId: string;
639
695
  error: unknown;
640
696
  };
641
- type PanoramaScenesProps = {
642
- scenes: readonly PanoramaScene[];
697
+ type ScenesProps = {
698
+ scenes: readonly Scene[];
643
699
  activeSceneId: string;
644
- transition?: PanoramaTransition;
700
+ transition?: SceneTransition;
645
701
  /** Rendered only after a scene has finished transitioning in. */
646
- renderHotspots?: (scene: PanoramaScene) => ReactNode;
647
- onTransitionEnd?: (event: PanoramaTransitionEndEvent) => void;
648
- onTransitionError?: (event: PanoramaTransitionErrorEvent) => void;
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 PanoramaScenes({ maxTextureMemoryMb, maxConcurrentTileLoads, ...props }: PanoramaScenesProps): react.JSX.Element;
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 five hotspot categories. */
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, PanoView, type PanoViewHandle, type PanoViewProps, type PanoViewState, type PanoWheelEvent, type PanoramaControlsOptions, type PanoramaPointerEvent, type PanoramaScene, PanoramaScenes, type PanoramaScenesProps, type PanoramaTransition, type PanoramaTransitionEndEvent, type PanoramaTransitionErrorEvent, type PanoramaTransitionPreset, 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 SequenceFrameDirection, type SequenceFrameEvent, SequenceHotspot, type SequenceHotspotDefinition, type SequenceHotspotErrorEvent, type SequenceHotspotProps, type SequenceLoadProgress, type SequencePlaybackState, type SetPanoViewOptions, Sphere, type SpherePanoramaScene, type SphereProps, type StarGraphic, type SvgGraphic, type SvgPathGraphic, Tile, type TileAddress, type TileLoadError, type TileLoadProgress, type TileMultiresConfig, type TilePanoramaScene, type TileProps, 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 };
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 };