@terraware/web-components 4.2.18 → 4.2.19

package/components/VirtualWalkthrough/TfAnnotationManager.d.ts

@@ -8,6 +8,7 @@ import { AnnotationIconType } from './Annotation';
 export declare class TfAnnotationManager extends PcAnnotationManager {
     static scriptName: string;
     private _maxWorldSize;
+    private _scratchScale;
     private _customParentDom;
     private _clickHandlersAttached;
     private _hotspotBackgroundColor;
@@ -101,6 +102,12 @@ export declare class TfAnnotationManager extends PcAnnotationManager {
      * @private
      */
     _updateAnnotationRotationAndScale(annotation: any): void;
+    /**
+     * World-space uniform scale of the annotation entity's parent (e.g. a scaled
+     * content-root). Returns 1 when there is no parent or it has no scale.
+     * @private
+     */
+    _getParentWorldScale(entity: any): number;
     /**
      * Override to create hotspot texture with custom background color.
      * @private

package/components/VirtualWalkthrough/TfAnnotationManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TfAnnotationManager.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/TfAnnotationManager.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoC,OAAO,EAAE,MAAM,YAAY,CAAC;AACvE,OAAO,EAAE,iBAAiB,IAAI,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAIlG,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAelD;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,mBAAmB;IAC1D,MAAM,CAAC,UAAU,SAAyB;IAE1C,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,sBAAsB,CAAkB;IAChD,OAAO,CAAC,uBAAuB,CAAa;IAC5C,OAAO,CAAC,WAAW,CAAmD;IAEtE;;;;;;;;OAQG;IACH,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED,IAAI,YAAY,IAJQ,MAAM,CAM7B;IAED;;;;;;;;;;OAUG;IACH,IAAI,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAEvC;IAED,IAAI,sBAAsB,IAJQ,MAAM,CAMvC;IAED;;OAEG;IACH,UAAU;IAgBV;;;;OAIG;IACH,eAAe;IAiBf;;;;OAIG;IACH,YAAY,CAAC,QAAQ,EAAE,kBAAkB;IAazC;;OAEG;IACH,MAAM;IAmCN;;;;OAIG;IACH,mBAAmB,CAAC,UAAU,EAAE,GAAG;IAKnC;;;OAGG;IACH,oBAAoB,CAAC,UAAU,EAAE,GAAG;IAiBpC;;;;;OAKG;IACH,SAAS,CAAC,GAAG,EAAE,wBAAwB,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM;IAW/E;;;;OAIG;IACH,cAAc,CAAC,UAAU,EAAE,GAAG;IAI9B;;;;OAIG;IACH,sBAAsB,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,GAAG;IASlD,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO;IAKrD,0BAA0B;IAK1B,YAAY,CAAC,WAAW,EAAE,GAAG;IAK7B,aAAa,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM;IAI7C;;;OAGG;IACH,0BAA0B,CAAC,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IA6B1E;;;;OAIG;IACH,iCAAiC,CAAC,UAAU,EAAE,GAAG;IAmCjD;;;OAGG;IACH,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,SAAuB,EAAE,WAAW,SAAI,EAAE,IAAI,CAAC,EAAE,kBAAkB;CAyD7G"}
+{"version":3,"file":"TfAnnotationManager.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/TfAnnotationManager.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoC,OAAO,EAAQ,MAAM,YAAY,CAAC;AAC7E,OAAO,EAAE,iBAAiB,IAAI,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAIlG,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAelD;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,mBAAmB;IAC1D,MAAM,CAAC,UAAU,SAAyB;IAE1C,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,sBAAsB,CAAkB;IAChD,OAAO,CAAC,uBAAuB,CAAa;IAC5C,OAAO,CAAC,WAAW,CAAmD;IAEtE;;;;;;;;OAQG;IACH,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED,IAAI,YAAY,IAJQ,MAAM,CAM7B;IAED;;;;;;;;;;OAUG;IACH,IAAI,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAEvC;IAED,IAAI,sBAAsB,IAJQ,MAAM,CAMvC;IAED;;OAEG;IACH,UAAU;IAgBV;;;;OAIG;IACH,eAAe;IAiBf;;;;OAIG;IACH,YAAY,CAAC,QAAQ,EAAE,kBAAkB;IAazC;;OAEG;IACH,MAAM;IAmCN;;;;OAIG;IACH,mBAAmB,CAAC,UAAU,EAAE,GAAG;IAKnC;;;OAGG;IACH,oBAAoB,CAAC,UAAU,EAAE,GAAG;IAiBpC;;;;;OAKG;IACH,SAAS,CAAC,GAAG,EAAE,wBAAwB,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM;IAW/E;;;;OAIG;IACH,cAAc,CAAC,UAAU,EAAE,GAAG;IAI9B;;;;OAIG;IACH,sBAAsB,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,GAAG;IASlD,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO;IAKrD,0BAA0B;IAK1B,YAAY,CAAC,WAAW,EAAE,GAAG;IAK7B,aAAa,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM;IAI7C;;;OAGG;IACH,0BAA0B,CAAC,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IA6B1E;;;;OAIG;IACH,iCAAiC,CAAC,UAAU,EAAE,GAAG;IA2CjD;;;;OAIG;IACH,oBAAoB,CAAC,MAAM,EAAE,GAAG;IAUhC;;;OAGG;IACH,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,SAAuB,EAAE,WAAW,SAAI,EAAE,IAAI,CAAC,EAAE,kBAAkB;CAyD7G"}

package/components/VirtualWalkthrough/TfAnnotationManager.js

@@ -1,6 +1,6 @@
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { FILTER_LINEAR, PIXELFORMAT_RGBA8, Texture } from 'playcanvas';
+import { FILTER_LINEAR, PIXELFORMAT_RGBA8, Texture, Vec3 } from 'playcanvas';
 import { AnnotationManager as PcAnnotationManager } from 'playcanvas/scripts/esm/annotations.mjs';
 import Icon from '../Icon/Icon';
 // Maps each annotation icon type to a @terraware/web-components icon.
@@ -23,6 +23,7 @@ const HOTSPOT_HOVER_SCALE = 1.3;
 export class TfAnnotationManager extends PcAnnotationManager {
   static scriptName = 'tfAnnotationManager';
   _maxWorldSize = 1.0;
+  _scratchScale = new Vec3();
   _customParentDom = null;
   _clickHandlersAttached = new Set();
   _hotspotBackgroundColor = '#2C8658';
@@ -283,28 +284,50 @@ export class TfAnnotationManager extends PcAnnotationManager {
     const screenHeight = canvas.clientHeight;
     const projMatrix = this._camera.camera.projectionMatrix;
 
-    // Calculate world size based on screen size and distance
-    const unclamped = this._hotspotSize / screenHeight * (2 * distance / projMatrix.data[5]);
+    // The world size that projects to _hotspotSize screen pixels at this distance.
+    const targetWorldSize = this._hotspotSize / screenHeight * (2 * distance / projMatrix.data[5]);
 
-    // Clamp to maximum world size
-    const worldSize = Math.min(unclamped, this._maxWorldSize);
+    // setLocalScale is applied on top of the parent's world scale (e.g. a scaled
+    // content-root), so divide it out to keep the on-screen size independent of it.
+    const parentScale = this._getParentWorldScale(annotation.entity);
+    const unclampedScale = targetWorldSize / parentScale;
+
+    // Clamp in the annotation's own (parent-local) space so maxWorldSize keeps the
+    // same size relative to the model regardless of the content-root scale.
+    const clampedScale = Math.min(unclampedScale, this._maxWorldSize);
     const hovered = this._hoverAnnotation === annotation;
     const hoverScale = hovered ? HOTSPOT_HOVER_SCALE : 1;
-    const entityScale = worldSize * hoverScale;
+    const entityScale = clampedScale * hoverScale;
     annotation.entity.setLocalScale(entityScale, entityScale, entityScale);
 
     // Scale the hotspot DOM element proportionally when clamped, including the
-    // hover growth so it tracks the visible circle.
+    // hover growth so it tracks the visible circle. This is a pure screen-space
+    // size, so it uses the true _hotspotSize and the clamp ratio only (never the
+    // parent scale, which the DOM overlay does not inherit).
     const resources = this._annotationResources.get(annotation);
     if (resources && resources.hotspotDom) {
-      const scaleFactor = worldSize / unclamped;
+      const clampRatio = clampedScale / unclampedScale;
       const baseSize = this._hotspotSize + 5; // Match the +5 from the stylesheet
-      const scaledSize = baseSize * scaleFactor * hoverScale;
+      const scaledSize = baseSize * clampRatio * hoverScale;
       resources.hotspotDom.style.width = `${scaledSize}px`;
       resources.hotspotDom.style.height = `${scaledSize}px`;
     }
   }
 
+  /**
+   * World-space uniform scale of the annotation entity's parent (e.g. a scaled
+   * content-root). Returns 1 when there is no parent or it has no scale.
+   * @private
+   */
+  _getParentWorldScale(entity) {
+    const parent = entity.parent;
+    if (!parent) {
+      return 1;
+    }
+    parent.getWorldTransform().getScale(this._scratchScale);
+    return this._scratchScale.x || 1;
+  }
+
   /**
    * Override to create hotspot texture with custom background color.
    * @private

package/components/VirtualWalkthrough/VirtualWalkthroughViewer.d.ts

@@ -14,6 +14,7 @@ export interface VirtualWalkthroughViewerProps {
     skyColor?: string;
     groundColor?: string;
     averageCameraHeight?: number;
+    scaleFactor?: number;
     annotations: AnnotationProps[];
     onSaveAnnotations: (annotations: AnnotationProps[]) => void | Promise<void>;
     strings: SplatControlsStrings;
@@ -23,6 +24,6 @@ export interface VirtualWalkthroughViewerProps {
     onToggleFullScreen?: () => void;
     maxImagesPerAnnotation?: number;
 }
-declare const VirtualWalkthroughViewer: ({ splatSrc, origin, cameraPosition, sceneBounds, groundPlane: groundPlaneProp, skyColor, groundColor, averageCameraHeight, annotations, onSaveAnnotations, strings, editable, showFreeFly, isFullScreen, onToggleFullScreen, maxImagesPerAnnotation, }: VirtualWalkthroughViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const VirtualWalkthroughViewer: ({ splatSrc, origin, cameraPosition, sceneBounds, groundPlane: groundPlaneProp, skyColor, groundColor, averageCameraHeight, scaleFactor, annotations, onSaveAnnotations, strings, editable, showFreeFly, isFullScreen, onToggleFullScreen, maxImagesPerAnnotation, }: VirtualWalkthroughViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default VirtualWalkthroughViewer;
 //# sourceMappingURL=VirtualWalkthroughViewer.d.ts.map

package/components/VirtualWalkthrough/VirtualWalkthroughViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualWalkthroughViewer.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/VirtualWalkthroughViewer.tsx"],"names":[],"mappings":"AAWA,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK3D,OAAsB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAStE,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB,EAAE,CAAC,WAAW,EAAE,eAAe,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,OAAO,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,QAAA,MAAM,wBAAwB,GAAI,wPAiB/B,6BAA6B,4CAgS/B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"VirtualWalkthroughViewer.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/VirtualWalkthroughViewer.tsx"],"names":[],"mappings":"AAWA,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK3D,OAAsB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAUtE,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB,EAAE,CAAC,WAAW,EAAE,eAAe,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,OAAO,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,QAAA,MAAM,wBAAwB,GAAI,qQAkB/B,6BAA6B,4CAqT/B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/components/VirtualWalkthrough/VirtualWalkthroughViewer.js

@@ -16,6 +16,7 @@ import SplatControls from './SplatControls';
 import SplatModel from './SplatModel';
 import { TfAnnotationManager } from './TfAnnotationManager';
 import { TfXrNavigation } from './TfXrNavigation';
+import XrExitButton from './XrExitButton';
 import { WalkthroughCamera } from './walkthrough-camera';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const DEFAULT_FOCUS_POINT = [0, 0.1, 0];
@@ -29,6 +30,7 @@ const VirtualWalkthroughViewer = ({
   skyColor,
   groundColor,
   averageCameraHeight = 0,
+  scaleFactor = 1,
   annotations,
   onSaveAnnotations,
   strings,
@@ -66,21 +68,23 @@ const VirtualWalkthroughViewer = ({
     return Math.sqrt(dx * dx + dy * dy + dz * dz) * 0.5;
   }, [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 cameraBoundsCenter = useMemo(() => sceneBoundsCenter.clone().mulScalar(scaleFactor), [sceneBoundsCenter, scaleFactor]);
   const groundPlane = useMemo(() => groundPlaneProp?.length === 3 ? groundPlaneProp.map(p => new Vec3(p[0], p[1], p[2])) : [], [groundPlaneProp]);
+  const cameraGroundPlane = useMemo(() => groundPlane.map(p => p.clone().mulScalar(scaleFactor)), [groundPlane, scaleFactor]);
   useEffect(() => {
     setCamera(origin, cameraPosition);
   }, [origin, cameraPosition, setCamera]);
   useEffect(() => {
-    if (!groundPlane.length) {
+    if (!cameraGroundPlane.length) {
       return;
     }
     // @ts-expect-error - scripts are added dynamically to the camera entity
     const walkthroughCam = app.root.findByName('camera')?.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;
+      walkthroughCam.groundPlane = cameraGroundPlane;
     }
-  }, [groundPlane, app]);
+  }, [cameraGroundPlane, app]);
   const handleToggleFreeFly = useCallback(() => {
     const newFreeFly = !isFreeFly;
     // @ts-expect-error - scripts are added dynamically to the camera entity
@@ -204,12 +208,15 @@ const VirtualWalkthroughViewer = ({
           fov: 60
         }), /*#__PURE__*/_jsx(Script, {
           script: WalkthroughCamera,
-          boundsCenter: sceneBoundsCenter,
-          boundsRadius: sceneBoundsRadius,
+          boundsCenter: cameraBoundsCenter,
+          boundsRadius: sceneBoundsRadius * scaleFactor,
           enableFly: !isTextFieldFocused,
-          averageCameraHeight: averageCameraHeight
+          averageCameraHeight: scaleFactor * averageCameraHeight,
+          moveSpeed: 0.3 * scaleFactor,
+          moveFastSpeed: 0.5 * scaleFactor,
+          moveSlowSpeed: 0.15 * scaleFactor
         })]
-      }), /*#__PURE__*/_jsx(Script, {
+      }), /*#__PURE__*/_jsx(XrExitButton, {}), /*#__PURE__*/_jsx(Script, {
         script: XrControllers,
         enabled: !isEdit
       }), /*#__PURE__*/_jsx(Script, {
@@ -223,33 +230,37 @@ const VirtualWalkthroughViewer = ({
         restartDelay: 3,
         startFadeInTime: 0.5
       })]
-    }), 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: 0.05,
-        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}`))]
+    }), /*#__PURE__*/_jsxs(Entity, {
+      name: "content-root",
+      scale: [scaleFactor, scaleFactor, scaleFactor],
+      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: 0.05,
+          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}`))]
+      })]
     }), /*#__PURE__*/_jsx(SplatControls, {
       defaultCameraFocus: origin,
       defaultCameraPosition: cameraPosition,

package/components/VirtualWalkthrough/XrExitButton.d.ts

@@ -0,0 +1,3 @@
+declare const XrExitButton: () => import("react/jsx-runtime").JSX.Element;
+export default XrExitButton;
+//# sourceMappingURL=XrExitButton.d.ts.map

package/components/VirtualWalkthrough/XrExitButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XrExitButton.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/XrExitButton.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,YAAY,+CAIjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/VirtualWalkthrough/XrExitButton.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Entity } from '@playcanvas/react';
+import { Script } from '@playcanvas/react/components';
+import { XrExitButton as XrExitButtonScript } from './xr-exit-button';
+import { jsx as _jsx } from "react/jsx-runtime";
+const XrExitButton = () => /*#__PURE__*/_jsx(Entity, {
+  name: "xr-exit-button",
+  children: /*#__PURE__*/_jsx(Script, {
+    script: XrExitButtonScript
+  })
+});
+export default XrExitButton;

package/components/VirtualWalkthrough/xr-exit-button.d.ts

@@ -0,0 +1,42 @@
+import { Script, Vec3 } from 'playcanvas';
+/**
+ * Boolean ray-sphere hit test. Treats the ray as a half-line (t >= 0) and returns true when it
+ * intersects the sphere or starts inside it. `direction` is normalized internally.
+ */
+export declare const raySphereIntersect: (origin: Vec3, direction: Vec3, center: Vec3, radius: number) => boolean;
+export declare class XrExitButton extends Script {
+    static scriptName: string;
+    /** Offset from the head, in head space: right, up, and forward (-z) into the upper-right of the view. */
+    offset: Vec3;
+    /** Half-extent of the square button quad, in world units at the offset distance. */
+    halfSize: number;
+    /** World-space radius of the hover/hit sphere. Slightly larger than halfSize for easier targeting. */
+    hitRadius: number;
+    private _material?;
+    private _texture?;
+    private _mesh?;
+    private _hovered;
+    private _headPosition;
+    private _headRotation;
+    private _worldOffset;
+    private _faceButtonDown;
+    private _isVrActive;
+    private _onXrStart;
+    private _onXrEnd;
+    private _onSelect;
+    private _rayHitsButton;
+    private _faceButtonPressed;
+    private _createTexture;
+    private _createMesh;
+    initialize(): void;
+    update(): void;
+    /**
+     * Pin the button to the upper-right of the headset view. The camera entity's transform is
+     * overwritten every frame by WalkthroughCamera and is not the rendered head pose, so the head
+     * pose is read from the XR views (each view's inverse-view matrix is that eye's world transform)
+     * and the button places itself in world space, offset in head space.
+     */
+    private _trackHead;
+    destroy(): void;
+}
+//# sourceMappingURL=xr-exit-button.d.ts.map

package/components/VirtualWalkthrough/xr-exit-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xr-exit-button.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/xr-exit-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,MAAM,EAGN,IAAI,EAGL,MAAM,YAAY,CAAC;AAEpB;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,IAAI,EAAE,WAAW,IAAI,EAAE,QAAQ,IAAI,EAAE,QAAQ,MAAM,KAAG,OAUhG,CAAC;AAOF,qBAAa,YAAa,SAAQ,MAAM;IACtC,MAAM,CAAC,UAAU,SAAkB;IAEnC,yGAAyG;IACzG,MAAM,OAA8B;IAEpC,oFAAoF;IACpF,QAAQ,SAAQ;IAEhB,sGAAsG;IACtG,SAAS,SAAQ;IAEjB,OAAO,CAAC,SAAS,CAAC,CAAmB;IACrC,OAAO,CAAC,QAAQ,CAAC,CAAU;IAC3B,OAAO,CAAC,KAAK,CAAC,CAAO;IACrB,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,eAAe,CAAyC;IAEhE,OAAO,CAAC,WAAW,CAAyE;IAE5F,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,SAAS,CAOf;IAEF,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAyCtB,OAAO,CAAC,WAAW;IAYnB,UAAU;IA6BV,MAAM;IAqCN;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAuBlB,OAAO;CAcR"}

package/components/VirtualWalkthrough/xr-exit-button.js

@@ -0,0 +1,207 @@
+import { ADDRESS_CLAMP_TO_EDGE, BLEND_NORMAL, CULLFACE_NONE, Color, FILTER_LINEAR, LAYERID_IMMEDIATE, Mesh, MeshInstance, Quat, Script, StandardMaterial, Texture, Vec3, XRTYPE_VR } from 'playcanvas';
+
+/**
+ * Boolean ray-sphere hit test. Treats the ray as a half-line (t >= 0) and returns true when it
+ * intersects the sphere or starts inside it. `direction` is normalized internally.
+ */
+export const raySphereIntersect = (origin, direction, center, radius) => {
+  const dir = direction.clone().normalize();
+  const m = new Vec3().sub2(origin, center);
+  const b = m.dot(dir);
+  const c = m.dot(m) - radius * radius;
+  if (c > 0 && b > 0) {
+    return false;
+  }
+  return b * b - c >= 0;
+};
+const TEXTURE_SIZE = 256;
+
+/** xr-standard gamepad button indices for the face buttons: A/X (4) and B/Y (5). */
+const FACE_BUTTON_INDICES = [4, 5];
+export class XrExitButton extends Script {
+  static scriptName = 'xrExitButton';
+
+  /** Offset from the head, in head space: right, up, and forward (-z) into the upper-right of the view. */
+  offset = new Vec3(0.45, 0.35, -1.2);
+
+  /** Half-extent of the square button quad, in world units at the offset distance. */
+  halfSize = 0.12;
+
+  /** World-space radius of the hover/hit sphere. Slightly larger than halfSize for easier targeting. */
+  hitRadius = 0.15;
+  _hovered = false;
+  _headPosition = new Vec3();
+  _headRotation = new Quat();
+  _worldOffset = new Vec3();
+  _faceButtonDown = new WeakMap();
+  _isVrActive = () => this.app.xr?.active === true && this.app.xr?.type === XRTYPE_VR;
+  _onXrStart = () => {
+    this.entity.enabled = this._isVrActive();
+  };
+  _onXrEnd = () => {
+    this.entity.enabled = false;
+    this._hovered = false;
+    this.entity.setLocalScale(1, 1, 1);
+    if (this._material) {
+      this._material.opacity = 0.9;
+      this._material.update();
+    }
+  };
+  _onSelect = inputSource => {
+    if (!this.entity.enabled) {
+      return;
+    }
+    if (this._rayHitsButton(inputSource)) {
+      this.app.xr?.end();
+    }
+  };
+  _rayHitsButton(inputSource) {
+    return raySphereIntersect(inputSource.getOrigin(), inputSource.getDirection(), this.entity.getPosition(), this.hitRadius);
+  }
+  _faceButtonPressed(inputSource) {
+    const buttons = inputSource.gamepad?.buttons;
+    return buttons ? FACE_BUTTON_INDICES.some(index => buttons[index]?.pressed === true) : false;
+  }
+  _createTexture() {
+    const canvas = document.createElement('canvas');
+    canvas.width = TEXTURE_SIZE;
+    canvas.height = TEXTURE_SIZE;
+    const ctx = canvas.getContext('2d');
+    const c = TEXTURE_SIZE / 2;
+    if (ctx) {
+      ctx.clearRect(0, 0, TEXTURE_SIZE, TEXTURE_SIZE);
+      ctx.fillStyle = 'rgba(20, 20, 20, 0.75)';
+      ctx.beginPath();
+      ctx.arc(c, c, c * 0.92, 0, Math.PI * 2);
+      ctx.fill();
+      const arm = TEXTURE_SIZE * 0.24;
+      ctx.strokeStyle = '#ffffff';
+      ctx.lineWidth = TEXTURE_SIZE * 0.09;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.moveTo(c - arm, c - arm);
+      ctx.lineTo(c + arm, c + arm);
+      ctx.moveTo(c + arm, c - arm);
+      ctx.lineTo(c - arm, c + arm);
+      ctx.stroke();
+    }
+    const texture = new Texture(this.app.graphicsDevice, {
+      name: 'xr-exit-button',
+      width: TEXTURE_SIZE,
+      height: TEXTURE_SIZE,
+      addressU: ADDRESS_CLAMP_TO_EDGE,
+      addressV: ADDRESS_CLAMP_TO_EDGE,
+      minFilter: FILTER_LINEAR,
+      magFilter: FILTER_LINEAR,
+      mipmaps: true
+    });
+    texture.setSource(canvas);
+    return texture;
+  }
+  _createMesh() {
+    const h = this.halfSize;
+    const mesh = new Mesh(this.app.graphicsDevice);
+    mesh.setPositions([-h, -h, 0, h, -h, 0, h, h, 0, -h, h, 0]);
+    mesh.setNormals([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
+    mesh.setUvs(0, [0, 1, 1, 1, 1, 0, 0, 0]);
+    mesh.setIndices([0, 1, 2, 0, 2, 3]);
+    mesh.update();
+    return mesh;
+  }
+  initialize() {
+    this._texture = this._createTexture();
+    const material = new StandardMaterial();
+    material.useLighting = false;
+    material.emissive = new Color(1, 1, 1);
+    material.emissiveMap = this._texture;
+    material.opacityMap = this._texture;
+    material.opacityMapChannel = 'a';
+    material.blendType = BLEND_NORMAL;
+    material.depthTest = false;
+    material.depthWrite = false;
+    material.cull = CULLFACE_NONE;
+    material.update();
+    this._material = material;
+    this._mesh = this._createMesh();
+    const meshInstance = new MeshInstance(this._mesh, material);
+
+    // Immediate layer draws after the World layer (where the splats render) so the button is never
+    // composited behind them; depthTest:false keeps it on top within the layer.
+    this.entity.addComponent('render', {
+      meshInstances: [meshInstance],
+      layers: [LAYERID_IMMEDIATE]
+    });
+    this.entity.enabled = this._isVrActive();
+    this.app.xr?.on('start', this._onXrStart);
+    this.app.xr?.on('end', this._onXrEnd);
+    this.app.xr?.input?.on('select', this._onSelect);
+  }
+  update() {
+    if (!this.entity.enabled) {
+      return;
+    }
+    this._trackHead();
+    const sources = this.app.xr?.input?.inputSources ?? [];
+    let hovered = false;
+    for (const source of sources) {
+      const sourceHovers = this._rayHitsButton(source);
+      hovered = hovered || sourceHovers;
+
+      // A face-button press exits only while that controller is aimed at the button, matching the
+      // trigger. Edge-detected so holding a button and then aiming onto it doesn't fire.
+      const facePressed = this._faceButtonPressed(source);
+      const faceWasDown = this._faceButtonDown.get(source) ?? false;
+      this._faceButtonDown.set(source, facePressed);
+      if (sourceHovers && facePressed && !faceWasDown) {
+        this.app.xr?.end();
+        return;
+      }
+    }
+    if (hovered !== this._hovered) {
+      this._hovered = hovered;
+      const scale = hovered ? 1.15 : 1;
+      this.entity.setLocalScale(scale, scale, scale);
+      if (this._material) {
+        this._material.opacity = hovered ? 1 : 0.9;
+        this._material.update();
+      }
+    }
+  }
+
+  /**
+   * Pin the button to the upper-right of the headset view. The camera entity's transform is
+   * overwritten every frame by WalkthroughCamera and is not the rendered head pose, so the head
+   * pose is read from the XR views (each view's inverse-view matrix is that eye's world transform)
+   * and the button places itself in world space, offset in head space.
+   */
+  _trackHead() {
+    const views = this.app.xr?.views?.list;
+    if (!views || views.length === 0) {
+      return;
+    }
+    this._headPosition.set(0, 0, 0);
+    for (const view of views) {
+      view.viewInvOffMat.getTranslation(this._worldOffset);
+      this._headPosition.add(this._worldOffset);
+    }
+    this._headPosition.mulScalar(1 / views.length);
+    this._headRotation.setFromMat4(views[0].viewInvOffMat);
+    this._headRotation.transformVector(this.offset, this._worldOffset);
+    this.entity.setPosition(this._headPosition.x + this._worldOffset.x, this._headPosition.y + this._worldOffset.y, this._headPosition.z + this._worldOffset.z);
+    this.entity.setRotation(this._headRotation);
+  }
+  destroy() {
+    this.app.xr?.off('start', this._onXrStart);
+    this.app.xr?.off('end', this._onXrEnd);
+    this.app.xr?.input?.off('select', this._onSelect);
+    if (this.entity.render) {
+      this.entity.render.meshInstances = [];
+    }
+    this._mesh?.destroy();
+    this._material?.destroy();
+    this._texture?.destroy();
+    this._mesh = undefined;
+    this._material = undefined;
+    this._texture = undefined;
+  }
+}

package/components/VirtualWalkthrough/xr-exit-button.test.js

@@ -0,0 +1,23 @@
+import { Vec3 } from 'playcanvas';
+import { raySphereIntersect } from './xr-exit-button';
+describe('raySphereIntersect', () => {
+  const CENTER = new Vec3(0, 0, 0);
+  it('hits a sphere straight ahead of the ray', () => {
+    expect(raySphereIntersect(new Vec3(0, 0, 5), new Vec3(0, 0, -1), CENTER, 1)).toBe(true);
+  });
+  it('misses a sphere off to the side', () => {
+    expect(raySphereIntersect(new Vec3(0, 5, 5), new Vec3(0, 0, -1), CENTER, 1)).toBe(false);
+  });
+  it('misses when the sphere is behind the ray origin', () => {
+    expect(raySphereIntersect(new Vec3(0, 0, 5), new Vec3(0, 0, 1), CENTER, 1)).toBe(false);
+  });
+  it('hits when the ray origin is inside the sphere', () => {
+    expect(raySphereIntersect(new Vec3(0, 0, 0), new Vec3(1, 0, 0), CENTER, 1)).toBe(true);
+  });
+  it('normalizes a non-unit direction', () => {
+    expect(raySphereIntersect(new Vec3(0, 0, 5), new Vec3(0, 0, -3), CENTER, 1)).toBe(true);
+  });
+  it('grazes a tangent sphere', () => {
+    expect(raySphereIntersect(new Vec3(0, 1, 5), new Vec3(0, 0, -1), CENTER, 1)).toBe(true);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "4.2.18",
+  "version": "4.2.19",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {