@ericchen1990/pano-view 0.1.5 → 0.2.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 +276 -7
- package/dist/index.cjs +2410 -653
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +395 -12
- package/dist/index.d.ts +395 -12
- package/dist/index.mjs +2423 -671
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { ReactNode, CSSProperties, ComponentPropsWithoutRef } from 'react';
|
|
3
3
|
import { Texture, ColorRepresentation, Vector3 } from 'three';
|
|
4
4
|
|
|
5
|
-
declare const MAX_HOTSPOT_PITCH =
|
|
5
|
+
declare const MAX_HOTSPOT_PITCH = 90;
|
|
6
6
|
type HotspotPosition = {
|
|
7
7
|
/** Horizontal panorama angle in degrees. Positive values look right. */
|
|
8
8
|
yaw: number;
|
|
@@ -36,6 +36,8 @@ type HotspotCommonProps = {
|
|
|
36
36
|
width?: number;
|
|
37
37
|
/** Angular height in degrees. Defaults to 8. */
|
|
38
38
|
height?: number;
|
|
39
|
+
/** Overall multiplier for the hotspot's angular width and height. Defaults to 1. */
|
|
40
|
+
scale?: number;
|
|
39
41
|
/** Defaults to "billboard". */
|
|
40
42
|
mode?: HotspotMode;
|
|
41
43
|
/**
|
|
@@ -73,6 +75,51 @@ type PanoramaPointerEvent = {
|
|
|
73
75
|
clientY: number;
|
|
74
76
|
};
|
|
75
77
|
|
|
78
|
+
type KeyboardControlAction = "left" | "right" | "up" | "down" | "zoomIn" | "zoomOut" | "previousScene" | "nextScene" | "reset";
|
|
79
|
+
type KeyboardControlKeys = Partial<Record<KeyboardControlAction, string | readonly string[]>>;
|
|
80
|
+
/** Options for keyboard-driven panorama navigation. */
|
|
81
|
+
type KeyboardControlsProps = {
|
|
82
|
+
/** Whether keyboard handling is active. Defaults to true. */
|
|
83
|
+
enabled?: boolean;
|
|
84
|
+
/**
|
|
85
|
+
* Custom key bindings. Each action accepts a key, code, or list of either.
|
|
86
|
+
* Matching is case-insensitive for `event.key` and exact for `event.code`.
|
|
87
|
+
*/
|
|
88
|
+
keys?: KeyboardControlKeys;
|
|
89
|
+
/** Yaw/pitch change rate in degrees per second. Defaults to 60. */
|
|
90
|
+
rotateSpeed?: number;
|
|
91
|
+
/** FOV change rate in degrees per second. Defaults to 30. */
|
|
92
|
+
zoomSpeed?: number;
|
|
93
|
+
/** Speed multiplier while Shift is held. Defaults to 3. */
|
|
94
|
+
shiftMultiplier?: number;
|
|
95
|
+
/** Inverts up/down look direction. Defaults to false. */
|
|
96
|
+
invert?: boolean;
|
|
97
|
+
/**
|
|
98
|
+
* Maximum FOV change rate in degrees per second. When omitted, no extra
|
|
99
|
+
* rate cap is applied. Usually supplied by PanoView from `controls.fovSpeed`.
|
|
100
|
+
*/
|
|
101
|
+
fovSpeed?: number;
|
|
102
|
+
/** Called once when the previous-scene binding is pressed. */
|
|
103
|
+
onPreviousScene?: () => void;
|
|
104
|
+
/** Called once when the next-scene binding is pressed. */
|
|
105
|
+
onNextScene?: () => void;
|
|
106
|
+
};
|
|
107
|
+
/**
|
|
108
|
+
* Returns the scene id `step` positions away from `activeSceneId` in
|
|
109
|
+
* `scenes`, wrapping at both ends. Returns `null` when the list is empty or
|
|
110
|
+
* the active id is missing.
|
|
111
|
+
*/
|
|
112
|
+
declare function cycleSceneId(scenes: readonly {
|
|
113
|
+
id: string;
|
|
114
|
+
}[], activeSceneId: string, step: 1 | -1): string | null;
|
|
115
|
+
/**
|
|
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.
|
|
120
|
+
*/
|
|
121
|
+
declare function KeyboardControls({ enabled, keys, rotateSpeed, zoomSpeed, shiftMultiplier, invert, fovSpeed, onPreviousScene, onNextScene, }: KeyboardControlsProps): null;
|
|
122
|
+
|
|
76
123
|
type PanoViewState = {
|
|
77
124
|
/** Horizontal look angle in degrees. Positive values look right. */
|
|
78
125
|
yaw: number;
|
|
@@ -95,16 +142,74 @@ type PanoViewHandle = {
|
|
|
95
142
|
stopAutoRotate: () => void;
|
|
96
143
|
toggleFullscreen: () => Promise<void>;
|
|
97
144
|
};
|
|
145
|
+
type MouseControlButton = "left" | "middle" | "right";
|
|
146
|
+
/** Options for the default mouse control channel (also MouseControls props). */
|
|
147
|
+
type MouseControlsOptions = {
|
|
148
|
+
/** Whether mouse handling is active. Defaults to true. */
|
|
149
|
+
enabled?: boolean;
|
|
150
|
+
/** Pointer drag multiplier. Defaults to 0.35. */
|
|
151
|
+
rotateSpeed?: number;
|
|
152
|
+
/** Wheel zoom multiplier. Defaults to 0.08. */
|
|
153
|
+
zoomSpeed?: number;
|
|
154
|
+
/** Whether mouse-wheel zoom is enabled. Defaults to true. */
|
|
155
|
+
wheel?: boolean;
|
|
156
|
+
/** Inverts drag direction. Defaults to the all-mode `invert` value. */
|
|
157
|
+
invert?: boolean;
|
|
158
|
+
/** Mouse buttons that may drag the panorama. Defaults to `["left"]`. */
|
|
159
|
+
buttons?: readonly MouseControlButton[];
|
|
160
|
+
};
|
|
161
|
+
/** Options for the default touch control channel (also TouchControls props). */
|
|
162
|
+
type TouchControlsOptions = {
|
|
163
|
+
/** Whether touch handling is active. Defaults to true. */
|
|
164
|
+
enabled?: boolean;
|
|
165
|
+
/** Pointer drag multiplier. Defaults to 0.35. */
|
|
166
|
+
rotateSpeed?: number;
|
|
167
|
+
/** Inverts drag direction. Defaults to the all-mode `invert` value. */
|
|
168
|
+
invert?: boolean;
|
|
169
|
+
/** Whether two-finger pinch zoom is enabled. Defaults to true. */
|
|
170
|
+
pinchZoom?: boolean;
|
|
171
|
+
};
|
|
98
172
|
type PanoramaControlsOptions = {
|
|
173
|
+
/**
|
|
174
|
+
* Master switch for user view controls. Defaults to true. Setting
|
|
175
|
+
* `controls={false}` on PanoView still disables all user input.
|
|
176
|
+
*/
|
|
177
|
+
enabled?: boolean;
|
|
99
178
|
/** Enables drag and zoom inertia. Defaults to true. */
|
|
100
179
|
inertia?: boolean;
|
|
101
180
|
/** @deprecated Render <AutoRotate enabled /> inside PanoView instead. */
|
|
102
181
|
autoRotate?: boolean;
|
|
103
182
|
/** @deprecated Use AutoRotate's speed prop instead. */
|
|
104
183
|
autoRotateSpeed?: number;
|
|
105
|
-
/**
|
|
184
|
+
/**
|
|
185
|
+
* Inverts drag/pan direction for mouse and touch. Defaults to false.
|
|
186
|
+
* Per-channel `invert` on MouseControls / TouchControls overrides this.
|
|
187
|
+
*/
|
|
188
|
+
invert?: boolean;
|
|
189
|
+
/**
|
|
190
|
+
* Allows pitch and FOV to briefly overshoot hard limits while dragging,
|
|
191
|
+
* then spring back on release. Defaults to false.
|
|
192
|
+
*/
|
|
193
|
+
bouncingLimits?: boolean;
|
|
194
|
+
/**
|
|
195
|
+
* Maximum FOV change rate in degrees per second for wheel and keyboard
|
|
196
|
+
* zoom. When omitted, no extra rate cap is applied.
|
|
197
|
+
*/
|
|
198
|
+
fovSpeed?: number;
|
|
199
|
+
/**
|
|
200
|
+
* Relative factor for stopping inertia. Lower values fade out more
|
|
201
|
+
* smoothly. Defaults to 0.01.
|
|
202
|
+
*/
|
|
203
|
+
frictionStop?: number;
|
|
204
|
+
/**
|
|
205
|
+
* Default pointer drag multiplier for mouse and touch. Defaults to 0.35.
|
|
206
|
+
* Prefer `controls.mouse` / `controls.touch` for per-channel overrides.
|
|
207
|
+
*/
|
|
106
208
|
rotateSpeed?: number;
|
|
107
|
-
/**
|
|
209
|
+
/**
|
|
210
|
+
* Default wheel zoom multiplier for mouse. Defaults to 0.08.
|
|
211
|
+
* Prefer `controls.mouse.zoomSpeed` for overrides.
|
|
212
|
+
*/
|
|
108
213
|
zoomSpeed?: number;
|
|
109
214
|
/**
|
|
110
215
|
* Rotation target-following speed in seconds^-1. Defaults to 14; use 0 for
|
|
@@ -116,16 +221,174 @@ type PanoramaControlsOptions = {
|
|
|
116
221
|
* immediate response. Must be a non-negative finite number.
|
|
117
222
|
*/
|
|
118
223
|
zoomDamping?: number;
|
|
119
|
-
/**
|
|
120
|
-
|
|
224
|
+
/**
|
|
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`.
|
|
228
|
+
*/
|
|
229
|
+
mouse?: boolean | MouseControlsOptions;
|
|
230
|
+
/**
|
|
231
|
+
* Touch channel. Same shape as `mouse`.
|
|
232
|
+
*/
|
|
233
|
+
touch?: boolean | TouchControlsOptions;
|
|
234
|
+
/**
|
|
235
|
+
* Keyboard channel. Same shape as `mouse`. Set to false when providing a
|
|
236
|
+
* custom KeyboardControls child.
|
|
237
|
+
*/
|
|
238
|
+
keyboard?: boolean | KeyboardControlsProps;
|
|
239
|
+
};
|
|
240
|
+
|
|
241
|
+
/** Lowest allowed `appearance.opacity` (background only). */
|
|
242
|
+
declare const MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY = 0.4;
|
|
243
|
+
type PanoContextMenuSelectContext = {
|
|
244
|
+
position: PanoramaPointerEvent["position"];
|
|
245
|
+
view: PanoViewState;
|
|
246
|
+
nativeEvent: MouseEvent | PointerEvent;
|
|
247
|
+
close: () => void;
|
|
248
|
+
};
|
|
249
|
+
type PanoContextMenuActionItem = {
|
|
250
|
+
type?: "item";
|
|
251
|
+
id: string;
|
|
252
|
+
label: string;
|
|
253
|
+
/** React icon node (inline SVG, icon library component, emoji, etc.). */
|
|
254
|
+
icon?: ReactNode;
|
|
255
|
+
/** Image URL; ignored when `icon` is set. */
|
|
256
|
+
image?: string;
|
|
257
|
+
imageAlt?: string;
|
|
258
|
+
disabled?: boolean;
|
|
259
|
+
hidden?: boolean;
|
|
260
|
+
className?: string;
|
|
261
|
+
style?: CSSProperties;
|
|
262
|
+
onSelect: (context: PanoContextMenuSelectContext) => void;
|
|
263
|
+
};
|
|
264
|
+
type PanoContextMenuSeparatorItem = {
|
|
265
|
+
type: "separator";
|
|
266
|
+
id?: string;
|
|
267
|
+
className?: string;
|
|
268
|
+
style?: CSSProperties;
|
|
269
|
+
};
|
|
270
|
+
type PanoContextMenuItem = PanoContextMenuActionItem | PanoContextMenuSeparatorItem;
|
|
271
|
+
/** Built-in menu entries hosts can reuse without reimplementing behavior. */
|
|
272
|
+
type PanoContextMenuPresetId = "resetView" | "fullscreen" | "separator";
|
|
273
|
+
/**
|
|
274
|
+
* Reference a built-in preset, optionally overriding presentation fields.
|
|
275
|
+
* Action wiring (reset / fullscreen toggle and enter/exit label) stays built-in.
|
|
276
|
+
*/
|
|
277
|
+
type PanoContextMenuPresetRef = {
|
|
278
|
+
preset: PanoContextMenuPresetId;
|
|
279
|
+
id?: string;
|
|
280
|
+
label?: string;
|
|
281
|
+
className?: string;
|
|
282
|
+
style?: CSSProperties;
|
|
283
|
+
disabled?: boolean;
|
|
284
|
+
hidden?: boolean;
|
|
285
|
+
};
|
|
286
|
+
/** A custom action item, a preset id string, or a preset ref with overrides. */
|
|
287
|
+
type PanoContextMenuEntry = PanoContextMenuActionItem | PanoContextMenuPresetId | PanoContextMenuPresetRef;
|
|
288
|
+
type PanoContextMenuAppearance = {
|
|
289
|
+
background?: string;
|
|
290
|
+
color?: string;
|
|
291
|
+
border?: string;
|
|
292
|
+
borderRadius?: number | string;
|
|
293
|
+
shadow?: string;
|
|
294
|
+
/**
|
|
295
|
+
* Background-only opacity from {@link MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY}
|
|
296
|
+
* to 1. Defaults to 1. Text and icons stay fully opaque.
|
|
297
|
+
*/
|
|
298
|
+
opacity?: number;
|
|
299
|
+
fontSize?: number | string;
|
|
300
|
+
minWidth?: number | string;
|
|
301
|
+
padding?: number | string;
|
|
302
|
+
iconSize?: number;
|
|
303
|
+
itemPadding?: string;
|
|
304
|
+
itemHoverBackground?: string;
|
|
305
|
+
itemDisabledColor?: string;
|
|
306
|
+
separatorColor?: string;
|
|
307
|
+
separatorMargin?: string;
|
|
308
|
+
};
|
|
309
|
+
type PanoContextMenuRenderProps = {
|
|
310
|
+
event: PanoramaPointerEvent;
|
|
311
|
+
view: PanoViewState;
|
|
312
|
+
close: () => void;
|
|
313
|
+
};
|
|
314
|
+
type PanoContextMenuProps = {
|
|
315
|
+
/**
|
|
316
|
+
* Menu entries. May mix concrete items with built-in presets
|
|
317
|
+
* (`"resetView"`, `"fullscreen"`, `"separator"`). When omitted, the
|
|
318
|
+
* default Reset view / Fullscreen list is used (see also `prepend` /
|
|
319
|
+
* `append`).
|
|
320
|
+
*/
|
|
321
|
+
items?: readonly PanoContextMenuEntry[];
|
|
322
|
+
/**
|
|
323
|
+
* Entries placed before the default menu when `items` is omitted.
|
|
324
|
+
* Ignored when `items` is provided.
|
|
325
|
+
*/
|
|
326
|
+
prepend?: readonly PanoContextMenuEntry[];
|
|
327
|
+
/**
|
|
328
|
+
* Entries placed after the default menu when `items` is omitted.
|
|
329
|
+
* Ignored when `items` is provided.
|
|
330
|
+
*/
|
|
331
|
+
append?: readonly PanoContextMenuEntry[];
|
|
332
|
+
appearance?: PanoContextMenuAppearance;
|
|
333
|
+
className?: string;
|
|
334
|
+
style?: CSSProperties;
|
|
335
|
+
itemClassName?: string;
|
|
336
|
+
separatorClassName?: string;
|
|
337
|
+
/**
|
|
338
|
+
* Fully custom menu content. When provided, takes precedence over `items`.
|
|
339
|
+
* Opening, closing, and positioning remain handled by PanoContextMenu.
|
|
340
|
+
*/
|
|
341
|
+
children?: (props: PanoContextMenuRenderProps) => ReactNode;
|
|
121
342
|
};
|
|
343
|
+
/**
|
|
344
|
+
* Custom panorama context menu. Must render inside PanoView. Prefer
|
|
345
|
+
* PanoView's `contextMenu` prop for the default menu; use this component
|
|
346
|
+
* when replacing the default instance (`contextMenu={false}`).
|
|
347
|
+
*/
|
|
348
|
+
declare function PanoContextMenu({ items, prepend, append, appearance, className, style, itemClassName, separatorClassName, children, }: PanoContextMenuProps): null;
|
|
349
|
+
type PanoContextMenuPresetActions = {
|
|
350
|
+
reset: () => void;
|
|
351
|
+
toggleFullscreen: () => void;
|
|
352
|
+
/** When true, the fullscreen preset shows Exit fullscreen. */
|
|
353
|
+
isFullscreen?: boolean;
|
|
354
|
+
};
|
|
355
|
+
type PanoContextMenuPresets = {
|
|
356
|
+
resetView: PanoContextMenuActionItem;
|
|
357
|
+
fullscreen: PanoContextMenuActionItem;
|
|
358
|
+
separator: (id?: string) => PanoContextMenuSeparatorItem;
|
|
359
|
+
/** Default menu: Reset view, separator, Enter/Exit fullscreen. */
|
|
360
|
+
defaults: PanoContextMenuItem[];
|
|
361
|
+
};
|
|
362
|
+
/**
|
|
363
|
+
* Builds reusable built-in context-menu items. Prefer preset id strings
|
|
364
|
+
* (`"resetView"`, `"fullscreen"`) in `items` / `append` / `prepend` when
|
|
365
|
+
* configuring `PanoView`; use this helper when assembling items manually.
|
|
366
|
+
*/
|
|
367
|
+
declare function createPanoContextMenuPresets(actions: PanoContextMenuPresetActions): PanoContextMenuPresets;
|
|
368
|
+
/** Alias for `createPanoContextMenuPresets(actions).defaults`. */
|
|
369
|
+
declare function createDefaultPanoContextMenuItems(actions: PanoContextMenuPresetActions): PanoContextMenuItem[];
|
|
370
|
+
/**
|
|
371
|
+
* Expands preset ids / refs into concrete menu items using the given presets.
|
|
372
|
+
*/
|
|
373
|
+
declare function resolvePanoContextMenuEntries(entries: readonly PanoContextMenuEntry[], presets: PanoContextMenuPresets): PanoContextMenuItem[];
|
|
374
|
+
/**
|
|
375
|
+
* Resolves `items`, or `prepend` + defaults + `append` when `items` is omitted.
|
|
376
|
+
*/
|
|
377
|
+
declare function composePanoContextMenuItems(props: Pick<PanoContextMenuProps, "items" | "prepend" | "append">, presets: PanoContextMenuPresets): PanoContextMenuItem[];
|
|
122
378
|
|
|
123
|
-
type PanoViewProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange"> & {
|
|
379
|
+
type PanoViewProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange" | "contextMenu"> & {
|
|
124
380
|
children?: ReactNode;
|
|
125
381
|
initialView?: Partial<PanoViewState>;
|
|
126
382
|
minFov?: number;
|
|
127
383
|
maxFov?: number;
|
|
128
384
|
controls?: boolean | PanoramaControlsOptions;
|
|
385
|
+
/**
|
|
386
|
+
* Default context menu. `true` / omit mounts Reset view + Fullscreen;
|
|
387
|
+
* `false` skips the default instance; an object merges appearance and
|
|
388
|
+
* may use `items` (full replace, supports preset ids), or `prepend` /
|
|
389
|
+
* `append` to keep the defaults and add entries.
|
|
390
|
+
*/
|
|
391
|
+
contextMenu?: boolean | PanoContextMenuProps;
|
|
129
392
|
onViewChange?: (view: PanoViewState) => void;
|
|
130
393
|
onPanoramaClick?: (event: PanoramaPointerEvent) => void;
|
|
131
394
|
onPanoramaDoubleClick?: (event: PanoramaPointerEvent) => void;
|
|
@@ -133,12 +396,19 @@ type PanoViewProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "onChang
|
|
|
133
396
|
/** Canvas pixel ratio. Defaults to a capped range of 1–2. */
|
|
134
397
|
dpr?: number | [number, number];
|
|
135
398
|
};
|
|
136
|
-
declare const PanoView: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onChange"> & {
|
|
399
|
+
declare const PanoView: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "contextMenu" | "onChange"> & {
|
|
137
400
|
children?: ReactNode;
|
|
138
401
|
initialView?: Partial<PanoViewState>;
|
|
139
402
|
minFov?: number;
|
|
140
403
|
maxFov?: number;
|
|
141
404
|
controls?: boolean | PanoramaControlsOptions;
|
|
405
|
+
/**
|
|
406
|
+
* Default context menu. `true` / omit mounts Reset view + Fullscreen;
|
|
407
|
+
* `false` skips the default instance; an object merges appearance and
|
|
408
|
+
* may use `items` (full replace, supports preset ids), or `prepend` /
|
|
409
|
+
* `append` to keep the defaults and add entries.
|
|
410
|
+
*/
|
|
411
|
+
contextMenu?: boolean | PanoContextMenuProps;
|
|
142
412
|
onViewChange?: (view: PanoViewState) => void;
|
|
143
413
|
onPanoramaClick?: (event: PanoramaPointerEvent) => void;
|
|
144
414
|
onPanoramaDoubleClick?: (event: PanoramaPointerEvent) => void;
|
|
@@ -167,6 +437,105 @@ type AutoRotateProps = {
|
|
|
167
437
|
*/
|
|
168
438
|
declare function AutoRotate({ enabled, speed, acceleration, startDelay, }: AutoRotateProps): null;
|
|
169
439
|
|
|
440
|
+
type ViewInteractionSource = "mouse" | "touch" | "keyboard";
|
|
441
|
+
type PanoWheelEvent = {
|
|
442
|
+
/** Signed wheel delta (same sign convention as WheelEvent.deltaY). */
|
|
443
|
+
delta: number;
|
|
444
|
+
nativeEvent: WheelEvent;
|
|
445
|
+
};
|
|
446
|
+
type PanoResizeEvent = {
|
|
447
|
+
width: number;
|
|
448
|
+
height: number;
|
|
449
|
+
};
|
|
450
|
+
type ViewInteractionEvent = {
|
|
451
|
+
source: ViewInteractionSource;
|
|
452
|
+
};
|
|
453
|
+
type PanoEventMap = {
|
|
454
|
+
viewchange: PanoViewState;
|
|
455
|
+
viewsettled: PanoViewState;
|
|
456
|
+
viewinteractionstart: ViewInteractionEvent;
|
|
457
|
+
viewinteractionend: ViewInteractionEvent;
|
|
458
|
+
click: PanoramaPointerEvent;
|
|
459
|
+
doubleclick: PanoramaPointerEvent;
|
|
460
|
+
pointerdown: PanoramaPointerEvent;
|
|
461
|
+
pointerup: PanoramaPointerEvent;
|
|
462
|
+
pointermove: PanoramaPointerEvent;
|
|
463
|
+
contextmenu: PanoramaPointerEvent;
|
|
464
|
+
wheel: PanoWheelEvent;
|
|
465
|
+
idle: undefined;
|
|
466
|
+
idleend: undefined;
|
|
467
|
+
enterfullscreen: undefined;
|
|
468
|
+
exitfullscreen: undefined;
|
|
469
|
+
resize: PanoResizeEvent;
|
|
470
|
+
autorotatestart: undefined;
|
|
471
|
+
autorotatestop: undefined;
|
|
472
|
+
autorotateoneround: undefined;
|
|
473
|
+
};
|
|
474
|
+
type PanoEventType = keyof PanoEventMap;
|
|
475
|
+
type PanoEventListener<T extends PanoEventType> = (payload: PanoEventMap[T]) => void;
|
|
476
|
+
type PanoEventBus = {
|
|
477
|
+
subscribe: <T extends PanoEventType>(type: T, listener: PanoEventListener<T>) => () => void;
|
|
478
|
+
emit: <T extends PanoEventType>(type: T, payload: PanoEventMap[T]) => void;
|
|
479
|
+
};
|
|
480
|
+
|
|
481
|
+
type PanoEventsProps = {
|
|
482
|
+
/**
|
|
483
|
+
* Milliseconds without user interaction before `onIdle`. Defaults to 2000.
|
|
484
|
+
* Each PanoEvents instance tracks idle independently.
|
|
485
|
+
*/
|
|
486
|
+
idleTime?: number;
|
|
487
|
+
onViewChange?: (view: PanoViewState) => void;
|
|
488
|
+
onViewSettled?: (view: PanoViewState) => void;
|
|
489
|
+
onViewInteractionStart?: (event: ViewInteractionEvent) => void;
|
|
490
|
+
onViewInteractionEnd?: (event: ViewInteractionEvent) => void;
|
|
491
|
+
onClick?: (event: PanoramaPointerEvent) => void;
|
|
492
|
+
onDoubleClick?: (event: PanoramaPointerEvent) => void;
|
|
493
|
+
onPointerDown?: (event: PanoramaPointerEvent) => void;
|
|
494
|
+
onPointerUp?: (event: PanoramaPointerEvent) => void;
|
|
495
|
+
onPointerMove?: (event: PanoramaPointerEvent) => void;
|
|
496
|
+
onContextMenu?: (event: PanoramaPointerEvent) => void;
|
|
497
|
+
onWheel?: (event: PanoWheelEvent) => void;
|
|
498
|
+
onIdle?: () => void;
|
|
499
|
+
onIdleEnd?: () => void;
|
|
500
|
+
onEnterFullscreen?: () => void;
|
|
501
|
+
onExitFullscreen?: () => void;
|
|
502
|
+
onResize?: (event: PanoResizeEvent) => void;
|
|
503
|
+
onAutoRotateStart?: () => void;
|
|
504
|
+
onAutoRotateStop?: () => void;
|
|
505
|
+
onAutoRotateOneRound?: () => void;
|
|
506
|
+
};
|
|
507
|
+
/**
|
|
508
|
+
* Subscribes to viewer-level panorama events. Must run inside PanoView.
|
|
509
|
+
* Prefer the {@link PanoEvents} component for declarative usage.
|
|
510
|
+
*/
|
|
511
|
+
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
|
+
/**
|
|
513
|
+
* Declarative viewer-level event listeners for the nearest PanoView.
|
|
514
|
+
* Multiple instances may coexist; each tracks its own idle timer.
|
|
515
|
+
*/
|
|
516
|
+
declare function PanoEvents(props: PanoEventsProps): null;
|
|
517
|
+
|
|
518
|
+
type MouseControlsProps = MouseControlsOptions & {
|
|
519
|
+
/**
|
|
520
|
+
* 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
|
|
522
|
+
* `controls.fovSpeed`.
|
|
523
|
+
*/
|
|
524
|
+
fovSpeed?: number;
|
|
525
|
+
};
|
|
526
|
+
/**
|
|
527
|
+
* Adds mouse (and pen) drag / wheel navigation to the nearest PanoView.
|
|
528
|
+
* PanoView mounts a default instance; render your own only to override.
|
|
529
|
+
*/
|
|
530
|
+
declare function MouseControls({ enabled, rotateSpeed, zoomSpeed, wheel, invert, buttons, fovSpeed, }: MouseControlsProps): null;
|
|
531
|
+
|
|
532
|
+
type TouchControlsProps = TouchControlsOptions;
|
|
533
|
+
/**
|
|
534
|
+
* Adds touch drag and pinch-zoom navigation to the nearest PanoView.
|
|
535
|
+
* PanoView mounts a default instance; render your own only to override.
|
|
536
|
+
*/
|
|
537
|
+
declare function TouchControls({ enabled, rotateSpeed, invert, pinchZoom, }: TouchControlsProps): null;
|
|
538
|
+
|
|
170
539
|
type SphereProps = {
|
|
171
540
|
src: string;
|
|
172
541
|
/** Horizontal image offset in degrees. */
|
|
@@ -305,7 +674,7 @@ type PolygonVerticesChangeEvent = {
|
|
|
305
674
|
position: HotspotPosition;
|
|
306
675
|
startPosition: HotspotPosition;
|
|
307
676
|
};
|
|
308
|
-
type PolygonHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "mode" | "distance" | "scaleMode" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
|
|
677
|
+
type PolygonHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "scale" | "mode" | "distance" | "scaleMode" | "rotation" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
|
|
309
678
|
vertices: HotspotPosition[];
|
|
310
679
|
fill?: ColorRepresentation;
|
|
311
680
|
fillOpacity?: number;
|
|
@@ -337,7 +706,7 @@ type PolylineVerticesChangeEvent = {
|
|
|
337
706
|
position: HotspotPosition;
|
|
338
707
|
startPosition: HotspotPosition;
|
|
339
708
|
};
|
|
340
|
-
type PolylineHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "mode" | "distance" | "scaleMode" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
|
|
709
|
+
type PolylineHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "scale" | "mode" | "distance" | "scaleMode" | "rotation" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
|
|
341
710
|
vertices: HotspotPosition[];
|
|
342
711
|
stroke?: ColorRepresentation;
|
|
343
712
|
/** Screen-space line width in CSS pixels. Defaults to 2. */
|
|
@@ -359,8 +728,21 @@ type GraphicPaint = {
|
|
|
359
728
|
type CircleGraphic = GraphicPaint & {
|
|
360
729
|
kind: "circle";
|
|
361
730
|
};
|
|
731
|
+
type TriangleGraphic = GraphicPaint & {
|
|
732
|
+
kind: "triangle";
|
|
733
|
+
};
|
|
734
|
+
type DiamondGraphic = GraphicPaint & {
|
|
735
|
+
kind: "diamond";
|
|
736
|
+
};
|
|
737
|
+
type StarGraphic = GraphicPaint & {
|
|
738
|
+
kind: "star";
|
|
739
|
+
};
|
|
740
|
+
type ArrowGraphic = GraphicPaint & {
|
|
741
|
+
kind: "arrow";
|
|
742
|
+
};
|
|
362
743
|
type RectangleGraphic = GraphicPaint & {
|
|
363
744
|
kind: "rectangle";
|
|
745
|
+
/** Relative radius from 0 (square corners) to 0.5 (maximum rounded corners). */
|
|
364
746
|
cornerRadius?: number;
|
|
365
747
|
};
|
|
366
748
|
type RingGraphic = GraphicPaint & {
|
|
@@ -376,7 +758,7 @@ type SvgPathGraphic = GraphicPaint & {
|
|
|
376
758
|
path: string;
|
|
377
759
|
viewBox: [x: number, y: number, width: number, height: number];
|
|
378
760
|
};
|
|
379
|
-
type GraphicDefinition = CircleGraphic | RectangleGraphic | RingGraphic | SvgGraphic | SvgPathGraphic;
|
|
761
|
+
type GraphicDefinition = CircleGraphic | TriangleGraphic | DiamondGraphic | StarGraphic | ArrowGraphic | RectangleGraphic | RingGraphic | SvgGraphic | SvgPathGraphic;
|
|
380
762
|
type GraphicHotspotProps = HotspotCommonProps & {
|
|
381
763
|
graphic: GraphicDefinition;
|
|
382
764
|
onLoad?: (texture: Texture) => void;
|
|
@@ -464,6 +846,7 @@ type PointHotspotDefinitionBase = HotspotDefinitionBase & {
|
|
|
464
846
|
position: HotspotPosition;
|
|
465
847
|
width?: number;
|
|
466
848
|
height?: number;
|
|
849
|
+
scale?: number;
|
|
467
850
|
mode?: HotspotMode;
|
|
468
851
|
distance?: number;
|
|
469
852
|
scaleMode?: HotspotScaleMode;
|
|
@@ -521,4 +904,4 @@ type PointHotspotDefinition = ImageHotspotDefinition | GraphicHotspotDefinition
|
|
|
521
904
|
/** A serializable, discriminated hotspot collection item. */
|
|
522
905
|
type HotspotDefinition = PointHotspotDefinition | PolygonHotspotDefinition | PolylineHotspotDefinition;
|
|
523
906
|
|
|
524
|
-
export { AutoRotate, type AutoRotateProps, type CircleGraphic, type CubeFaceCode, 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, MAX_HOTSPOT_PITCH, PanoView, type PanoViewHandle, type PanoViewProps, type PanoViewState, 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 SvgGraphic, type SvgPathGraphic, Tile, type TileAddress, type TileLoadError, type TileLoadProgress, type TileMultiresConfig, type TilePanoramaScene, type TileProps, VideoHotspot, type VideoHotspotDefinition, type VideoHotspotErrorEvent, type VideoHotspotProps, type VideoPlaybackState, clampPanoPitch, normalizePanoPosition, normalizePanoYaw, panoPositionToVector3, unwrapPolygonVertices, validatePolygonVertices, validatePolylineVertices, vector3ToPanoPosition };
|
|
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 };
|