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

package/components/VirtualWalkthrough/VirtualWalkthroughViewer.js

@@ -1,445 +1,438 @@
-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
-];
+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.
 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;
-const VirtualWalkthroughViewer = ({ splatSrc, splatFormat, camera = /*#__PURE__*/ jsx(Camera, {
+
+/**
+ * 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, {
     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();
-    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
+  }),
+  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;
     });
-    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
-            })
-        ]
+  }, [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
     });
+  }, [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
+    })]
+  });
 };
-const VirtualWalkthrough_VirtualWalkthroughViewer = VirtualWalkthroughViewer;
-export default VirtualWalkthrough_VirtualWalkthroughViewer;
+
+export { VirtualWalkthroughViewer as default };