@terraware/web-components 5.0.27 → 5.1.1-rc.0

package/components/VirtualWalkthrough/VirtualWalkthroughViewer.js

@@ -1,438 +1,445 @@
-import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import { useTheme } from '@mui/material';
-import { Entity } from '@playcanvas/react';
-import { Script, Camera } from '@playcanvas/react/components';
-import { useApp } from '@playcanvas/react/hooks';
-import { Vec3, Color } from 'playcanvas';
-import { XrControllers } from 'playcanvas/scripts/esm/xr/xr-controllers.mjs';
-import { CameraEntityContext } from '../../hooks/cameraEntityContext.js';
-import { useCameraPosition } from '../../hooks/useCameraPosition.js';
-import { useDevicePerformance } from '../../hooks/useDevicePerformance.js';
-import useXr from '../../hooks/useXr.js';
-import Annotation from './Annotation.js';
-import AnnotationPanel from './AnnotationPanel.js';
-import { AutoRotator } from './AutoRotator.js';
-import BoundaryRing from './BoundaryRing.js';
-import BoundaryWall from './BoundaryWall.js';
-import GradientSky from './GradientSky.js';
-import SplatControls from './SplatControls.js';
-import SplatModel from './SplatModel.js';
-import { TfAnnotationManager } from './TfAnnotationManager.js';
-import { TfXrNavigation } from './TfXrNavigation.js';
-import VrAnnotationPanel from './VrAnnotationPanel.js';
-import XrAnnotationInteraction from './XrAnnotationInteraction.js';
-import XrExitButton from './XrExitButton.js';
-import XrGazeDwell from './XrGazeDwell.js';
-import XrPointerRay from './XrPointerRay.js';
-import { XrStartPose } from './XrStartPose.js';
-import useAdoptedCamera from './useAdoptedCamera.js';
-import useXrRenderTuning from './useXrRenderTuning.js';
-import { WalkthroughCamera } from './walkthrough-camera.js';
-import { rayHitsInteractiveUi } from './xr-interactive-ui.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-const DEFAULT_FOCUS_POINT = [0, 0.1, 0];
-const DEFAULT_POSITION = [1, 0.1, 0];
-
-// How far outside the clamp radius the boundary wall stands. Without it the wall would be coplanar
-// with the surface the head is clamped to, so a pinned user would have it in their face and through
-// their near clip plane.
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTheme } from "@mui/material";
+import { Entity } from "@playcanvas/react";
+import { Camera, Script } from "@playcanvas/react/components";
+import { useApp } from "@playcanvas/react/hooks";
+import { Color, Vec3 } from "playcanvas";
+import { XrControllers } from "playcanvas/scripts/esm/xr/xr-controllers.mjs";
+import { CameraEntityContext } from "../../hooks/cameraEntityContext.js";
+import { useCameraPosition } from "../../hooks/useCameraPosition.js";
+import { useDevicePerformance } from "../../hooks/useDevicePerformance.js";
+import { useXr } from "../../hooks/useXr.js";
+import Annotation from "./Annotation.js";
+import AnnotationPanel from "./AnnotationPanel.js";
+import { AutoRotator } from "./AutoRotator.js";
+import BoundaryRing from "./BoundaryRing.js";
+import BoundaryWall from "./BoundaryWall.js";
+import GradientSky from "./GradientSky.js";
+import SplatControls from "./SplatControls.js";
+import SplatModel from "./SplatModel.js";
+import { TfAnnotationManager } from "./TfAnnotationManager.js";
+import { TfXrNavigation } from "./TfXrNavigation.js";
+import VrAnnotationPanel from "./VrAnnotationPanel.js";
+import XrAnnotationInteraction from "./XrAnnotationInteraction.js";
+import XrExitButton from "./XrExitButton.js";
+import XrGazeDwell from "./XrGazeDwell.js";
+import XrPointerRay from "./XrPointerRay.js";
+import { XrStartPose } from "./XrStartPose.js";
+import { useAdoptedCamera } from "./useAdoptedCamera.js";
+import { useXrRenderTuning } from "./useXrRenderTuning.js";
+import { WalkthroughCamera } from "./walkthrough-camera.js";
+import { rayHitsInteractiveUi } from "./xr-interactive-ui.js";
+const DEFAULT_FOCUS_POINT = [
+    0,
+    0.1,
+    0
+];
+const DEFAULT_POSITION = [
+    1,
+    0.1,
+    0
+];
 const WALL_INSET = 0.25;
-
-/**
- * Largest world size (metres) a hotspot is allowed to reach as the camera approaches it, so it
- * stops growing rather than filling the view from close up.
- */
 const MAX_HOTSPOT_WORLD_SIZE = 0.75;
-
-/**
- * Every coordinate, distance and size in this component is world-space, in the metres an XR
- * headset imposes on the scene: `scaleFactor` converts the splat's own arbitrary units to them,
- * and is applied to nothing but the splat itself.
- */
-
-const VirtualWalkthroughViewer = ({
-  splatSrc,
-  splatFormat,
-  camera = /*#__PURE__*/jsx(Camera, {
+const VirtualWalkthroughViewer = ({ splatSrc, splatFormat, camera = /*#__PURE__*/ jsx(Camera, {
     clearColor: "#EAF8FF",
     fov: 60
-  }),
-  origin = DEFAULT_FOCUS_POINT,
-  cameraPosition = DEFAULT_POSITION,
-  sceneBounds,
-  groundPlane: groundPlaneProp,
-  skyColor,
-  groundColor,
-  averageCameraHeight = 0,
-  scaleFactor = 1,
-  splatModelProps,
-  autoStartVr = false,
-  onXrExit,
-  onXrClose,
-  annotations,
-  onSaveAnnotations,
-  editable = false,
-  showFreeFly = false,
-  isFullScreen = false,
-  onToggleFullScreen,
-  maxImagesPerAnnotation
-}) => {
-  const theme = useTheme();
-  // Held as state so the effects and hooks that address these entities re-run once they
-  // exist. Addressed directly: a viewer mounted into a host's scene shares the graph
-  // with the host's entities, so the camera can be found by component type.
-  const [cameraRoot, setCameraRoot] = useState(null);
-  const [cameraEntity, setCameraEntity] = useState(null);
-  const adoptedCamera = useAdoptedCamera(cameraRoot, cameraEntity);
-  // The entity carrying the live camera component: the viewer's own, or the host's while adopted.
-  // Everything that poses the camera or projects through it addresses this rather than the entity
-  // the viewer mounts a camera of its own on, which holds nothing while a camera is adopted.
-  const activeCamera = adoptedCamera ?? cameraEntity;
-  const {
-    setCamera
-  } = useCameraPosition(activeCamera);
-  const {
-    isHighPerformance
-  } = useDevicePerformance();
-  const app = useApp();
-  const [showAnnotations, setShowAnnotations] = useState(true);
-  const [autoRotate, setAutoRotate] = useState(true);
-  const [isEdit, setIsEdit] = useState(false);
-  const [isFreeFly, setIsFreeFly] = useState(false);
-  const [selectedAnnotationIndex, setSelectedAnnotationIndex] = useState(-1);
-  const [localAnnotations, setLocalAnnotations] = useState(annotations);
-  const [isTextFieldFocused, setIsTextFieldFocused] = useState(false);
-  const [viewingAnnotation, setViewingAnnotation] = useState(null);
-  const [viewingAnnotationIndex, setViewingAnnotationIndex] = useState(-1);
-  const [viewedScreenPos, setViewedScreenPos] = useState(null);
-  const reportXrError = useCallback(error => {
-    console.warn(error.message, error);
-    onXrExit?.(error);
-  }, [onXrExit]);
-  const {
-    isCurrentlyInXr,
-    isCurrentlyInVr,
-    isCurrentlyInAr,
-    isXrAvailable,
-    startXr
-  } = useXr({
-    onError: reportXrError
-  });
-  useXrRenderTuning();
-  const autoStartRequested = useRef(false);
-
-  // Edge-triggered so that ending a session doesn't pull the user straight back into one. The ref
-  // is written before the early returns, so lowering the prop re-arms the next rising edge.
-  useEffect(() => {
-    const isRisingEdge = autoStartVr && !autoStartRequested.current;
-    autoStartRequested.current = autoStartVr;
-    if (!isRisingEdge || isCurrentlyInXr) {
-      return;
-    }
-    if (!isXrAvailable('VR')) {
-      reportXrError(new Error('A VR session was requested, but this device reports no immersive VR support'));
-      return;
-    }
-    startXr('VR');
-  }, [autoStartVr, isCurrentlyInXr, isXrAvailable, startXr, reportXrError]);
-  const wasInXr = useRef(false);
-
-  // Edge-detected rather than reported whenever the viewer is out of XR, which would fire on mount
-  // and tell a caller a session had ended before one ever began.
-  useEffect(() => {
-    if (wasInXr.current && !isCurrentlyInXr) {
-      onXrExit?.();
-    }
-    wasInXr.current = isCurrentlyInXr;
-  }, [isCurrentlyInXr, onXrExit]);
-  const sceneBoundsRadius = useMemo(() => {
-    if (sceneBounds?.m !== undefined) {
-      return sceneBounds.m;
-    }
-    const dx = cameraPosition[0] - origin[0];
-    const dy = cameraPosition[1] - origin[1];
-    const dz = cameraPosition[2] - origin[2];
-    return Math.sqrt(dx * dx + dy * dy + dz * dz);
-  }, [cameraPosition, sceneBounds, origin]);
-  const sceneBoundsCenter = useMemo(() => sceneBounds ? new Vec3(sceneBounds.x, sceneBounds.y, sceneBounds.z) : new Vec3(origin[0], cameraPosition[1], origin[2]), [sceneBounds, origin, cameraPosition]);
-  const groundPlane = useMemo(() => groundPlaneProp?.length === 3 ? groundPlaneProp.map(p => new Vec3(p[0], p[1], p[2])) : [], [groundPlaneProp]);
-
-  // Also runs when a session ends. WalkthroughCamera is unmounted for the duration of a session, so
-  // the camera entity is left holding the last head pose — an eye height above wherever in the rig
-  // the user was standing — which is neither where nor how high the walkthrough left off.
-  useEffect(() => {
-    if (isCurrentlyInXr) {
-      return;
-    }
-    setCamera(origin, cameraPosition);
-  }, [origin, cameraPosition, setCamera, isCurrentlyInXr]);
-
-  // Re-applied when a session ends for the same reason: the script that comes back is a new
-  // instance, and without the ground plane it walks the camera at the bounds centre's height
-  // instead of an eye height above the ground.
-  useEffect(() => {
-    if (!groundPlane.length || isCurrentlyInXr) {
-      return;
-    }
-    // @ts-expect-error - scripts are added dynamically to the entity
-    const walkthroughCam = cameraRoot?.script?.walkthroughCamera;
-    if (walkthroughCam) {
-      // Should be changed to a react prop if shallowEquals in playcanvas/react is fixed (see https://github.com/playcanvas/react/pull/298)
-      walkthroughCam.groundPlane = groundPlane;
-    }
-  }, [groundPlane, cameraRoot, isCurrentlyInXr]);
-  useEffect(() => {
-    // Set imperatively for the same reason as BoundaryRing: boundsCenter is a Vec3, and the
-    // @playcanvas/react memo() comparator stops at the first prop with an .equals() method.
-    // @ts-expect-error - scripts are added dynamically to the entity
-    const navigation = cameraRoot?.script?.tfXrNavigation;
-    if (navigation) {
-      navigation.boundsCenter = sceneBoundsCenter;
-      navigation.boundsRadius = sceneBoundsRadius;
-    }
-  }, [cameraRoot, sceneBoundsCenter, sceneBoundsRadius]);
-  const handleToggleFreeFly = useCallback(() => {
-    const newFreeFly = !isFreeFly;
-    // @ts-expect-error - scripts are added dynamically to the entity
-    const walkthroughCam = cameraRoot?.script?.walkthroughCamera;
-    if (walkthroughCam) {
-      walkthroughCam.freeFly = newFreeFly;
-    }
-    if (!newFreeFly) {
-      setCamera(origin, cameraPosition);
-    }
-    setIsFreeFly(newFreeFly);
-  }, [isFreeFly, cameraRoot, setCamera, origin, cameraPosition]);
-  useEffect(() => {
-    setLocalAnnotations(annotations);
-  }, [annotations]);
-  useEffect(() => {
-    if (!isEdit) {
-      setSelectedAnnotationIndex(-1);
-    }
-  }, [isEdit]);
-  const handleAnnotationPositionChange = useCallback(position => {
-    setLocalAnnotations(prev => {
-      if (selectedAnnotationIndex === -1) {
-        return prev;
-      }
-      const updated = [...prev];
-      updated[selectedAnnotationIndex] = {
-        ...updated[selectedAnnotationIndex],
-        position
-      };
-      return updated;
+}), origin = DEFAULT_FOCUS_POINT, cameraPosition = DEFAULT_POSITION, sceneBounds, groundPlane: groundPlaneProp, skyColor, groundColor, averageCameraHeight = 0, scaleFactor = 1, splatModelProps, autoStartVr = false, onXrExit, onXrClose, annotations, onSaveAnnotations, editable = false, showFreeFly = false, isFullScreen = false, onToggleFullScreen, maxImagesPerAnnotation })=>{
+    const theme = useTheme();
+    const [cameraRoot, setCameraRoot] = useState(null);
+    const [cameraEntity, setCameraEntity] = useState(null);
+    const adoptedCamera = useAdoptedCamera(cameraRoot, cameraEntity);
+    const activeCamera = adoptedCamera ?? cameraEntity;
+    const { setCamera } = useCameraPosition(activeCamera);
+    const { isHighPerformance } = useDevicePerformance();
+    const app = useApp();
+    const [showAnnotations, setShowAnnotations] = useState(true);
+    const [autoRotate, setAutoRotate] = useState(true);
+    const [isEdit, setIsEdit] = useState(false);
+    const [isFreeFly, setIsFreeFly] = useState(false);
+    const [selectedAnnotationIndex, setSelectedAnnotationIndex] = useState(-1);
+    const [localAnnotations, setLocalAnnotations] = useState(annotations);
+    const [isTextFieldFocused, setIsTextFieldFocused] = useState(false);
+    const [viewingAnnotation, setViewingAnnotation] = useState(null);
+    const [viewingAnnotationIndex, setViewingAnnotationIndex] = useState(-1);
+    const [viewedScreenPos, setViewedScreenPos] = useState(null);
+    const reportXrError = useCallback((error)=>{
+        console.warn(error.message, error);
+        onXrExit?.(error);
+    }, [
+        onXrExit
+    ]);
+    const { isCurrentlyInXr, isCurrentlyInVr, isCurrentlyInAr, isXrAvailable, startXr } = useXr({
+        onError: reportXrError
     });
-  }, [selectedAnnotationIndex]);
-  const handleSave = useCallback(() => {
-    const saveAndClose = async () => {
-      await onSaveAnnotations(localAnnotations);
-      setIsEdit(false);
-      setSelectedAnnotationIndex(-1);
-    };
-    void saveAndClose();
-  }, [onSaveAnnotations, localAnnotations]);
-  const handleCancel = useCallback(() => {
-    setLocalAnnotations(annotations);
-    setIsEdit(false);
-    setSelectedAnnotationIndex(-1);
-  }, [annotations]);
-  const handleAddAnnotation = useCallback(() => {
-    const newAnnotation = {
-      position: origin,
-      title: ''
-    };
-    setLocalAnnotations(prev => [...prev, newAnnotation]);
-    setSelectedAnnotationIndex(localAnnotations.length);
-  }, [origin, localAnnotations]);
-  const handleDeleteAnnotation = useCallback(() => {
-    if (selectedAnnotationIndex === -1) {
-      return;
-    }
-    setLocalAnnotations(prev => prev.filter((_, index) => index !== selectedAnnotationIndex));
-    setSelectedAnnotationIndex(-1);
-  }, [selectedAnnotationIndex]);
-  const handleDeselectAnnotation = useCallback(() => {
-    setSelectedAnnotationIndex(-1);
-  }, []);
-  const handleAnnotationView = useCallback(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (annotation, annotationIndex, screenX, screenY) => {
-    setViewingAnnotation(annotation);
-    setViewingAnnotationIndex(annotationIndex);
-    // Cleared so the connector line waits for the hotspot's post-aim position
-    // rather than briefly pointing at its old spot.
-    setViewedScreenPos(null);
-  }, []);
-  const handleAnnotationScreenPositionUpdate = useCallback((_index, screenX, screenY, size) => {
-    if (isCurrentlyInXr) {
-      return;
-    }
-    // The scene is frozen while the panel is open, so guard against redundant
-    // updates from the per-frame callback to avoid needless re-renders.
-    setViewedScreenPos(prev => prev && prev.x === screenX && prev.y === screenY && prev.size === size ? prev : {
-      x: screenX,
-      y: screenY,
-      size
+    useXrRenderTuning();
+    const autoStartRequested = useRef(false);
+    useEffect(()=>{
+        const isRisingEdge = autoStartVr && !autoStartRequested.current;
+        autoStartRequested.current = autoStartVr;
+        if (!isRisingEdge || isCurrentlyInXr) return;
+        if (!isXrAvailable('VR')) return void reportXrError(new Error('A VR session was requested, but this device reports no immersive VR support'));
+        startXr('VR');
+    }, [
+        autoStartVr,
+        isCurrentlyInXr,
+        isXrAvailable,
+        startXr,
+        reportXrError
+    ]);
+    const wasInXr = useRef(false);
+    useEffect(()=>{
+        if (wasInXr.current && !isCurrentlyInXr) onXrExit?.();
+        wasInXr.current = isCurrentlyInXr;
+    }, [
+        isCurrentlyInXr,
+        onXrExit
+    ]);
+    const sceneBoundsRadius = useMemo(()=>{
+        if (sceneBounds?.m !== void 0) return sceneBounds.m;
+        const dx = cameraPosition[0] - origin[0];
+        const dy = cameraPosition[1] - origin[1];
+        const dz = cameraPosition[2] - origin[2];
+        return Math.sqrt(dx * dx + dy * dy + dz * dz);
+    }, [
+        cameraPosition,
+        sceneBounds,
+        origin
+    ]);
+    const sceneBoundsCenter = useMemo(()=>sceneBounds ? new Vec3(sceneBounds.x, sceneBounds.y, sceneBounds.z) : new Vec3(origin[0], cameraPosition[1], origin[2]), [
+        sceneBounds,
+        origin,
+        cameraPosition
+    ]);
+    const groundPlane = useMemo(()=>groundPlaneProp?.length === 3 ? groundPlaneProp.map((p)=>new Vec3(p[0], p[1], p[2])) : [], [
+        groundPlaneProp
+    ]);
+    useEffect(()=>{
+        if (isCurrentlyInXr) return;
+        setCamera(origin, cameraPosition);
+    }, [
+        origin,
+        cameraPosition,
+        setCamera,
+        isCurrentlyInXr
+    ]);
+    useEffect(()=>{
+        if (!groundPlane.length || isCurrentlyInXr) return;
+        const walkthroughCam = cameraRoot?.script?.walkthroughCamera;
+        if (walkthroughCam) walkthroughCam.groundPlane = groundPlane;
+    }, [
+        groundPlane,
+        cameraRoot,
+        isCurrentlyInXr
+    ]);
+    useEffect(()=>{
+        const navigation = cameraRoot?.script?.tfXrNavigation;
+        if (navigation) {
+            navigation.boundsCenter = sceneBoundsCenter;
+            navigation.boundsRadius = sceneBoundsRadius;
+        }
+    }, [
+        cameraRoot,
+        sceneBoundsCenter,
+        sceneBoundsRadius
+    ]);
+    const handleToggleFreeFly = useCallback(()=>{
+        const newFreeFly = !isFreeFly;
+        const walkthroughCam = cameraRoot?.script?.walkthroughCamera;
+        if (walkthroughCam) walkthroughCam.freeFly = newFreeFly;
+        if (!newFreeFly) setCamera(origin, cameraPosition);
+        setIsFreeFly(newFreeFly);
+    }, [
+        isFreeFly,
+        cameraRoot,
+        setCamera,
+        origin,
+        cameraPosition
+    ]);
+    useEffect(()=>{
+        setLocalAnnotations(annotations);
+    }, [
+        annotations
+    ]);
+    useEffect(()=>{
+        if (!isEdit) setSelectedAnnotationIndex(-1);
+    }, [
+        isEdit
+    ]);
+    const handleAnnotationPositionChange = useCallback((position)=>{
+        setLocalAnnotations((prev)=>{
+            if (-1 === selectedAnnotationIndex) return prev;
+            const updated = [
+                ...prev
+            ];
+            updated[selectedAnnotationIndex] = {
+                ...updated[selectedAnnotationIndex],
+                position
+            };
+            return updated;
+        });
+    }, [
+        selectedAnnotationIndex
+    ]);
+    const handleSave = useCallback(()=>{
+        const saveAndClose = async ()=>{
+            await onSaveAnnotations(localAnnotations);
+            setIsEdit(false);
+            setSelectedAnnotationIndex(-1);
+        };
+        saveAndClose();
+    }, [
+        onSaveAnnotations,
+        localAnnotations
+    ]);
+    const handleCancel = useCallback(()=>{
+        setLocalAnnotations(annotations);
+        setIsEdit(false);
+        setSelectedAnnotationIndex(-1);
+    }, [
+        annotations
+    ]);
+    const handleAddAnnotation = useCallback(()=>{
+        const newAnnotation = {
+            position: origin,
+            title: ''
+        };
+        setLocalAnnotations((prev)=>[
+                ...prev,
+                newAnnotation
+            ]);
+        setSelectedAnnotationIndex(localAnnotations.length);
+    }, [
+        origin,
+        localAnnotations
+    ]);
+    const handleDeleteAnnotation = useCallback(()=>{
+        if (-1 === selectedAnnotationIndex) return;
+        setLocalAnnotations((prev)=>prev.filter((_, index)=>index !== selectedAnnotationIndex));
+        setSelectedAnnotationIndex(-1);
+    }, [
+        selectedAnnotationIndex
+    ]);
+    const handleDeselectAnnotation = useCallback(()=>{
+        setSelectedAnnotationIndex(-1);
+    }, []);
+    const handleAnnotationView = useCallback((annotation, annotationIndex, screenX, screenY)=>{
+        setViewingAnnotation(annotation);
+        setViewingAnnotationIndex(annotationIndex);
+        setViewedScreenPos(null);
+    }, []);
+    const handleAnnotationScreenPositionUpdate = useCallback((_index, screenX, screenY, size)=>{
+        if (isCurrentlyInXr) return;
+        setViewedScreenPos((prev)=>prev && prev.x === screenX && prev.y === screenY && prev.size === size ? prev : {
+                x: screenX,
+                y: screenY,
+                size
+            });
+    }, [
+        isCurrentlyInXr
+    ]);
+    const handleCloseAnnotation = useCallback(()=>{
+        setViewingAnnotation(null);
+        setViewingAnnotationIndex(-1);
+        setViewedScreenPos(null);
+    }, []);
+    const isTeleportBlocked = useCallback((inputSource)=>rayHitsInteractiveUi(app, inputSource.getOrigin(), inputSource.getDirection()), [
+        app
+    ]);
+    useEffect(()=>{
+        if (!isCurrentlyInXr) handleCloseAnnotation();
+    }, [
+        isCurrentlyInXr,
+        handleCloseAnnotation
+    ]);
+    const handleAnnotationUpdate = useCallback((updates)=>{
+        if (-1 === selectedAnnotationIndex) return;
+        setLocalAnnotations((prev)=>{
+            const updated = [
+                ...prev
+            ];
+            updated[selectedAnnotationIndex] = {
+                ...updated[selectedAnnotationIndex],
+                ...updates
+            };
+            return updated;
+        });
+    }, [
+        selectedAnnotationIndex
+    ]);
+    const handleImagesChange = useCallback((files)=>handleAnnotationUpdate({
+            images: files
+        }), [
+        handleAnnotationUpdate
+    ]);
+    const canSave = useMemo(()=>localAnnotations.every((annotation)=>annotation.title && '' !== annotation.title.trim()), [
+        localAnnotations
+    ]);
+    const splatModel = useMemo(()=>/*#__PURE__*/ jsx(SplatModel, {
+            ...splatModelProps,
+            splatSrc: splatSrc,
+            splatFormat: splatFormat,
+            rotation: [
+                -180,
+                0,
+                0
+            ],
+            scaleFactor: scaleFactor,
+            revealRain: isHighPerformance
+        }, "splat"), [
+        isHighPerformance,
+        splatSrc,
+        splatFormat,
+        scaleFactor,
+        splatModelProps
+    ]);
+    return /*#__PURE__*/ jsxs(CameraEntityContext.Provider, {
+        value: activeCamera,
+        children: [
+            /*#__PURE__*/ jsx(GradientSky, {
+                topColor: skyColor || '#FFFFFF',
+                horizonColor: skyColor || '#EAF8FF',
+                groundColor: groundColor || '#C3BDB7'
+            }),
+            /*#__PURE__*/ jsxs(Entity, {
+                name: "camera-root",
+                ref: setCameraRoot,
+                children: [
+                    /*#__PURE__*/ jsx(Entity, {
+                        name: "camera",
+                        ref: setCameraEntity,
+                        children: camera
+                    }),
+                    !isCurrentlyInXr && /*#__PURE__*/ jsx(Script, {
+                        script: WalkthroughCamera,
+                        boundsCenter: sceneBoundsCenter,
+                        boundsRadius: sceneBoundsRadius,
+                        enableFly: !isTextFieldFocused,
+                        averageCameraHeight: averageCameraHeight
+                    }),
+                    /*#__PURE__*/ jsx(XrExitButton, {
+                        onClose: onXrClose
+                    }),
+                    /*#__PURE__*/ jsx(Script, {
+                        script: XrControllers,
+                        enabled: !isEdit
+                    }),
+                    /*#__PURE__*/ jsx(XrAnnotationInteraction, {
+                        onDismiss: handleCloseAnnotation
+                    }),
+                    /*#__PURE__*/ jsx(XrPointerRay, {}),
+                    isCurrentlyInVr && viewingAnnotation && /*#__PURE__*/ jsx(VrAnnotationPanel, {
+                        annotation: viewingAnnotation,
+                        annotationIndex: viewingAnnotationIndex
+                    }, viewingAnnotationIndex),
+                    /*#__PURE__*/ jsx(XrGazeDwell, {
+                        activeIndex: viewingAnnotationIndex
+                    }),
+                    /*#__PURE__*/ jsx(Script, {
+                        script: XrStartPose,
+                        targetX: cameraPosition[0],
+                        targetZ: cameraPosition[2],
+                        focusX: origin[0],
+                        focusZ: origin[2]
+                    }),
+                    /*#__PURE__*/ jsx(Script, {
+                        script: TfXrNavigation,
+                        enabled: !isEdit,
+                        enableTeleport: !isCurrentlyInAr && !viewingAnnotation,
+                        enableSnapVertical: false,
+                        isTeleportBlocked: isTeleportBlocked
+                    }),
+                    !isCurrentlyInXr && /*#__PURE__*/ jsx(Script, {
+                        script: AutoRotator,
+                        enabled: !isEdit && autoRotate && !viewingAnnotation,
+                        startDelay: 0.5,
+                        restartDelay: 3,
+                        startFadeInTime: 0.5
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Entity, {
+                name: "content-root",
+                children: [
+                    splatModel,
+                    sceneBounds?.m !== void 0 && 3 === groundPlane.length && /*#__PURE__*/ jsx(BoundaryRing, {
+                        center: sceneBoundsCenter,
+                        radius: sceneBoundsRadius,
+                        groundPlane: groundPlane
+                    }),
+                    localAnnotations.length > 0 && /*#__PURE__*/ jsxs(Entity, {
+                        name: "annotations-root",
+                        children: [
+                            /*#__PURE__*/ jsx(Script, {
+                                script: TfAnnotationManager,
+                                enabled: true,
+                                hotspotSize: 30,
+                                maxWorldSize: MAX_HOTSPOT_WORLD_SIZE,
+                                opacity: 1,
+                                hotspotColor: new Color().fromString(theme.palette.TwClrIcnBrand),
+                                hoverColor: new Color().fromString('#ffffff'),
+                                hotspotBackgroundColor: theme.palette.TwClrBaseWhite
+                            }),
+                            localAnnotations.map((annotation, index)=>/*#__PURE__*/ jsx(Annotation, {
+                                    ...annotation,
+                                    index: index,
+                                    visible: showAnnotations,
+                                    isEdit: isEdit,
+                                    isSelected: selectedAnnotationIndex === index,
+                                    isViewed: viewingAnnotationIndex === index,
+                                    onSelect: ()=>setSelectedAnnotationIndex(index),
+                                    onPositionChange: handleAnnotationPositionChange,
+                                    onView: (anno, screenX, screenY)=>handleAnnotationView(anno, index, screenX, screenY),
+                                    onScreenPositionUpdate: handleAnnotationScreenPositionUpdate
+                                }, `annotation-${index}`))
+                        ]
+                    })
+                ]
+            }),
+            isCurrentlyInXr && sceneBoundsRadius > 0 && /*#__PURE__*/ jsx(BoundaryWall, {
+                center: sceneBoundsCenter,
+                radius: sceneBoundsRadius + WALL_INSET,
+                groundPlane: groundPlane,
+                baseY: 0
+            }),
+            /*#__PURE__*/ jsx(SplatControls, {
+                defaultCameraFocus: origin,
+                defaultCameraPosition: cameraPosition,
+                showAnnotations: showAnnotations,
+                onToggleAnnotations: setShowAnnotations,
+                autoRotate: autoRotate,
+                onToggleAutoRotate: setAutoRotate,
+                isEdit: isEdit,
+                onToggleEdit: setIsEdit,
+                onSave: handleSave,
+                onCancel: handleCancel,
+                onAddAnnotation: handleAddAnnotation,
+                onDeleteAnnotation: handleDeleteAnnotation,
+                onDeselectAnnotation: handleDeselectAnnotation,
+                hasSelectedAnnotation: selectedAnnotationIndex >= 0,
+                selectedAnnotation: selectedAnnotationIndex >= 0 ? localAnnotations[selectedAnnotationIndex] : null,
+                selectedAnnotationIndex: selectedAnnotationIndex,
+                onAnnotationUpdate: handleAnnotationUpdate,
+                onImagesChange: handleImagesChange,
+                maxImagesPerAnnotation: maxImagesPerAnnotation,
+                onTextFieldFocus: setIsTextFieldFocused,
+                canSave: canSave,
+                editable: editable,
+                isFullScreen: isFullScreen,
+                onToggleFullScreen: onToggleFullScreen,
+                isFreeFly: isFreeFly,
+                onToggleFreeFly: handleToggleFreeFly,
+                showFreeFly: showFreeFly,
+                onError: reportXrError
+            }),
+            /*#__PURE__*/ jsx(AnnotationPanel, {
+                annotation: viewingAnnotation,
+                hotspotPosition: viewedScreenPos,
+                onClose: handleCloseAnnotation
+            })
+        ]
     });
-  }, [isCurrentlyInXr]);
-  const handleCloseAnnotation = useCallback(() => {
-    setViewingAnnotation(null);
-    setViewingAnnotationIndex(-1);
-    setViewedScreenPos(null);
-  }, []);
-  const isTeleportBlocked = useCallback(inputSource => rayHitsInteractiveUi(app, inputSource.getOrigin(), inputSource.getDirection()), [app]);
-  useEffect(() => {
-    if (!isCurrentlyInXr) {
-      handleCloseAnnotation();
-    }
-  }, [isCurrentlyInXr, handleCloseAnnotation]);
-  const handleAnnotationUpdate = useCallback(updates => {
-    if (selectedAnnotationIndex === -1) {
-      return;
-    }
-    setLocalAnnotations(prev => {
-      const updated = [...prev];
-      updated[selectedAnnotationIndex] = {
-        ...updated[selectedAnnotationIndex],
-        ...updates
-      };
-      return updated;
-    });
-  }, [selectedAnnotationIndex]);
-  const handleImagesChange = useCallback(files => handleAnnotationUpdate({
-    images: files
-  }), [handleAnnotationUpdate]);
-  const canSave = useMemo(() => localAnnotations.every(annotation => annotation.title && annotation.title.trim() !== ''), [localAnnotations]);
-  const splatModel = useMemo(() => /*#__PURE__*/jsx(SplatModel, {
-    ...splatModelProps,
-    splatSrc: splatSrc,
-    splatFormat: splatFormat,
-    rotation: [-180, 0, 0],
-    scaleFactor: scaleFactor,
-    revealRain: isHighPerformance
-  }, 'splat'), [isHighPerformance, splatSrc, splatFormat, scaleFactor, splatModelProps]);
-  return /*#__PURE__*/jsxs(CameraEntityContext.Provider, {
-    value: activeCamera,
-    children: [/*#__PURE__*/jsx(GradientSky, {
-      topColor: skyColor || '#FFFFFF',
-      horizonColor: skyColor || '#EAF8FF',
-      groundColor: groundColor || '#C3BDB7'
-    }), /*#__PURE__*/jsxs(Entity, {
-      name: "camera-root",
-      ref: setCameraRoot,
-      children: [/*#__PURE__*/jsx(Entity, {
-        name: "camera",
-        ref: setCameraEntity,
-        children: camera
-      }), !isCurrentlyInXr && /*#__PURE__*/jsx(Script, {
-        script: WalkthroughCamera,
-        boundsCenter: sceneBoundsCenter,
-        boundsRadius: sceneBoundsRadius,
-        enableFly: !isTextFieldFocused,
-        averageCameraHeight: averageCameraHeight
-      }), /*#__PURE__*/jsx(XrExitButton, {
-        onClose: onXrClose
-      }), /*#__PURE__*/jsx(Script, {
-        script: XrControllers,
-        enabled: !isEdit
-      }), /*#__PURE__*/jsx(XrAnnotationInteraction, {
-        onDismiss: handleCloseAnnotation
-      }), /*#__PURE__*/jsx(XrPointerRay, {}), isCurrentlyInVr && viewingAnnotation && /*#__PURE__*/jsx(VrAnnotationPanel, {
-        annotation: viewingAnnotation,
-        annotationIndex: viewingAnnotationIndex
-      }, viewingAnnotationIndex), /*#__PURE__*/jsx(XrGazeDwell, {
-        activeIndex: viewingAnnotationIndex
-      }), /*#__PURE__*/jsx(Script, {
-        script: XrStartPose,
-        targetX: cameraPosition[0],
-        targetZ: cameraPosition[2],
-        focusX: origin[0],
-        focusZ: origin[2]
-      }), /*#__PURE__*/jsx(Script, {
-        script: TfXrNavigation,
-        enabled: !isEdit,
-        enableTeleport: !isCurrentlyInAr && !viewingAnnotation,
-        enableSnapVertical: false,
-        isTeleportBlocked: isTeleportBlocked
-      }), !isCurrentlyInXr && /*#__PURE__*/jsx(Script, {
-        script: AutoRotator,
-        enabled: !isEdit && autoRotate && !viewingAnnotation,
-        startDelay: 0.5,
-        restartDelay: 3,
-        startFadeInTime: 0.5
-      })]
-    }), /*#__PURE__*/jsxs(Entity, {
-      name: "content-root",
-      children: [splatModel, sceneBounds?.m !== undefined && groundPlane.length === 3 && /*#__PURE__*/jsx(BoundaryRing, {
-        center: sceneBoundsCenter,
-        radius: sceneBoundsRadius,
-        groundPlane: groundPlane
-      }), localAnnotations.length > 0 && /*#__PURE__*/jsxs(Entity, {
-        name: "annotations-root",
-        children: [/*#__PURE__*/jsx(Script, {
-          script: TfAnnotationManager,
-          enabled: true,
-          hotspotSize: 30,
-          maxWorldSize: MAX_HOTSPOT_WORLD_SIZE,
-          opacity: 1,
-          hotspotColor: new Color().fromString(theme.palette.TwClrIcnBrand),
-          hoverColor: new Color().fromString('#ffffff'),
-          hotspotBackgroundColor: theme.palette.TwClrBaseWhite
-        }), localAnnotations.map((annotation, index) => /*#__PURE__*/jsx(Annotation, {
-          ...annotation,
-          index: index,
-          visible: showAnnotations,
-          isEdit: isEdit,
-          isSelected: selectedAnnotationIndex === index,
-          isViewed: viewingAnnotationIndex === index,
-          onSelect: () => setSelectedAnnotationIndex(index),
-          onPositionChange: handleAnnotationPositionChange,
-          onView: (anno, screenX, screenY) => handleAnnotationView(anno, index, screenX, screenY),
-          onScreenPositionUpdate: handleAnnotationScreenPositionUpdate
-        }, `annotation-${index}`))]
-      })]
-    }), isCurrentlyInXr && sceneBoundsRadius > 0 && /*#__PURE__*/jsx(BoundaryWall, {
-      center: sceneBoundsCenter,
-      radius: sceneBoundsRadius + WALL_INSET,
-      groundPlane: groundPlane,
-      baseY: 0
-    }), /*#__PURE__*/jsx(SplatControls, {
-      defaultCameraFocus: origin,
-      defaultCameraPosition: cameraPosition,
-      showAnnotations: showAnnotations,
-      onToggleAnnotations: setShowAnnotations,
-      autoRotate: autoRotate,
-      onToggleAutoRotate: setAutoRotate,
-      isEdit: isEdit,
-      onToggleEdit: setIsEdit,
-      onSave: handleSave,
-      onCancel: handleCancel,
-      onAddAnnotation: handleAddAnnotation,
-      onDeleteAnnotation: handleDeleteAnnotation,
-      onDeselectAnnotation: handleDeselectAnnotation,
-      hasSelectedAnnotation: selectedAnnotationIndex >= 0,
-      selectedAnnotation: selectedAnnotationIndex >= 0 ? localAnnotations[selectedAnnotationIndex] : null,
-      selectedAnnotationIndex: selectedAnnotationIndex,
-      onAnnotationUpdate: handleAnnotationUpdate,
-      onImagesChange: handleImagesChange,
-      maxImagesPerAnnotation: maxImagesPerAnnotation,
-      onTextFieldFocus: setIsTextFieldFocused,
-      canSave: canSave,
-      editable: editable,
-      isFullScreen: isFullScreen,
-      onToggleFullScreen: onToggleFullScreen,
-      isFreeFly: isFreeFly,
-      onToggleFreeFly: handleToggleFreeFly,
-      showFreeFly: showFreeFly,
-      onError: reportXrError
-    }), /*#__PURE__*/jsx(AnnotationPanel, {
-      annotation: viewingAnnotation,
-      hotspotPosition: viewedScreenPos,
-      onClose: handleCloseAnnotation
-    })]
-  });
 };
-
-export { VirtualWalkthroughViewer as default };
+const VirtualWalkthrough_VirtualWalkthroughViewer = VirtualWalkthroughViewer;
+export default VirtualWalkthrough_VirtualWalkthroughViewer;