@terraware/web-components 4.2.19 → 4.2.20

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

@@ -1 +1 @@
-{"version":3,"file":"SplatControls.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/SplatControls.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAA2B,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAmB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAyB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,uBAAuB,CAAC;IAC1C,UAAU,EAAE,iBAAiB,CAAC;IAC9B,kBAAkB,EAAE,yBAAyB,CAAC;CAC/C;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACjD,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,kBAAkB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC5C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAChE,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,aAAa,GAAI,2dA8BpB,kBAAkB,4CA8NpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SplatControls.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/SplatControls.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAA2B,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAmB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAyB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,uBAAuB,CAAC;IAC1C,UAAU,EAAE,iBAAiB,CAAC;IAC9B,kBAAkB,EAAE,yBAAyB,CAAC;CAC/C;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACjD,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,kBAAkB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC5C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAChE,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,aAAa,GAAI,2dA8BpB,kBAAkB,4CAwKpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/VirtualWalkthrough/SplatControls.js

@@ -1,10 +1,9 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Fullscreen, FullscreenExit } from '@mui/icons-material';
 import { Box, IconButton, useTheme } from '@mui/material';
-import { useApp } from '@playcanvas/react/hooks';
-import { XRSPACE_LOCAL, XRTYPE_AR, XRTYPE_VR } from 'playcanvas';
 import useBoolean from '../../hooks/useBoolean';
 import { useCameraPosition } from '../../hooks/useCameraPosition';
+import { useXr } from '../../hooks/useXr';
 import { getRgbaFromHex } from '../../utils/color';
 import useDeviceInfo from '../../utils/useDeviceInfo';
 import Button from '../Button/Button';
@@ -48,51 +47,19 @@ const SplatControls = ({
   const {
     isDesktop
   } = useDeviceInfo();
-  const app = useApp();
   const {
     setCamera,
     getCameraState
   } = useCameraPosition();
-  const [isArAvailable, setIsArAvailable] = useState(false);
-  const [isVrAvailable, setIsVrAvailable] = useState(false);
+  const {
+    isXrAvailable,
+    startXr
+  } = useXr({
+    onError
+  });
   const [isInfoVisible, setIsInfoVisible] = useBoolean(true);
   const paneRef = useRef(null);
   const infoButtonRef = useRef(null);
-  const errorCallback = useCallback(err => {
-    if (err) {
-      onError?.(err);
-      app.xr?.end();
-    }
-  }, [app, onError]);
-  const handleAr = useCallback(() => app.xr?.start(app.root.findComponent('camera'), XRTYPE_AR, XRSPACE_LOCAL, {
-    callback: errorCallback
-  }), [app, errorCallback]);
-  const handleVr = useCallback(() => app.xr?.start(app.root.findComponent('camera'), XRTYPE_VR, XRSPACE_LOCAL, {
-    callback: errorCallback
-  }), [app, errorCallback]);
-  useEffect(() => {
-    // this can't be changed to `useMemo(() => app.xr?.isAvailable(XRTYPE_AR), [app])` because `app` doesn't update when
-    // XR's availability is updated
-    const handleAvailable = (type, available) => {
-      if (type === XRTYPE_VR) {
-        setIsVrAvailable(available);
-      } else if (type === XRTYPE_AR) {
-        setIsArAvailable(available);
-      }
-    };
-
-    // Check current availability state on mount
-    if (app.xr?.isAvailable(XRTYPE_VR)) {
-      setIsVrAvailable(true);
-    }
-    if (app.xr?.isAvailable(XRTYPE_AR)) {
-      setIsArAvailable(true);
-    }
-    app.xr?.on('available', handleAvailable);
-    return () => {
-      app.xr?.off('available', handleAvailable);
-    };
-  }, [app]);
   useEffect(() => {
     const handleKeyPress = event => {
       if (event.key === 'r' || event.key === 'R') {
@@ -171,12 +138,12 @@ const SplatControls = ({
         gap: 1,
         pointerEvents: 'auto'
       },
-      children: [isArAvailable && !isEdit && /*#__PURE__*/_jsx(Button, {
+      children: [isXrAvailable('AR') && !isEdit && /*#__PURE__*/_jsx(Button, {
         label: strings.ar,
-        onClick: handleAr
-      }), isVrAvailable && !isEdit && /*#__PURE__*/_jsx(Button, {
+        onClick: () => startXr('AR')
+      }), isXrAvailable('VR') && !isEdit && /*#__PURE__*/_jsx(Button, {
         label: strings.vr,
-        onClick: handleVr
+        onClick: () => startXr('VR')
       }), isDesktop && editable && !isEdit && onToggleEdit && /*#__PURE__*/_jsx(Button, {
         label: strings.edit,
         onClick: handleEdit

package/components/VirtualWalkthrough/TfAnnotationManager.d.ts

@@ -96,6 +96,13 @@ export declare class TfAnnotationManager extends PcAnnotationManager {
      * @private
      */
     _updateAnnotationPositions(annotation: any, resources: any, screenPos: any): void;
+    /**
+     * Override to also disable the hotspot mesh (not just the DOM) when the annotation is behind the
+     * camera. The base implementation leaves the mesh enabled, so a not-yet-scaled plane under a
+     * scaled content-root would stay huge in view until the camera moves the anchor in front.
+     * @private
+     */
+    _hideAnnotationElements(annotation: any, resources: any): void;
     /**
      * Override the scale update to clamp the world size to a maximum value.
      * Also scales the hotspot DOM element to match.

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,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"}
+{"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;IAcnC;;;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;;;;;OAKG;IACH,uBAAuB,CAAC,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAMvD;;;;OAIG;IACH,iCAAiC,CAAC,UAAU,EAAE,GAAG;IAiDjD;;;;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

@@ -161,6 +161,15 @@ export class TfAnnotationManager extends PcAnnotationManager {
   _registerAnnotation(annotation) {
     super._registerAnnotation(annotation);
     this._applyAnnotationIcon(annotation);
+
+    // Keep the hotspot mesh hidden until the first scale pass clamps it. The annotation entity
+    // starts at unit local scale, so under a scaled content-root the plane would render many world
+    // units across for the frames before _updateAnnotationRotationAndScale runs.
+    const resources = this._annotationResources.get(annotation);
+    if (resources) {
+      resources.baseEntity.enabled = false;
+      resources.overlayEntity.enabled = false;
+    }
   }
 
   /**
@@ -269,6 +278,18 @@ export class TfAnnotationManager extends PcAnnotationManager {
     }
   }
 
+  /**
+   * Override to also disable the hotspot mesh (not just the DOM) when the annotation is behind the
+   * camera. The base implementation leaves the mesh enabled, so a not-yet-scaled plane under a
+   * scaled content-root would stay huge in view until the camera moves the anchor in front.
+   * @private
+   */
+  _hideAnnotationElements(annotation, resources) {
+    super._hideAnnotationElements(annotation, resources);
+    resources.baseEntity.enabled = false;
+    resources.overlayEntity.enabled = false;
+  }
+
   /**
    * Override the scale update to clamp the world size to a maximum value.
    * Also scales the hotspot DOM element to match.
@@ -305,6 +326,12 @@ export class TfAnnotationManager extends PcAnnotationManager {
     // 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) {
+      // This branch only runs for annotations in front of the camera, and the scale above is now
+      // clamped, so it is safe to reveal the mesh (hidden on register / when behind the camera).
+      resources.baseEntity.enabled = true;
+      resources.overlayEntity.enabled = true;
+    }
     if (resources && resources.hotspotDom) {
       const clampRatio = clampedScale / unclampedScale;
       const baseSize = this._hotspotSize + 5; // Match the +5 from the stylesheet

package/hooks/useXr.d.ts

@@ -0,0 +1,12 @@
+export type XrType = 'VR' | 'AR';
+interface UseXrOptions {
+    onError?: (error: Error) => void;
+}
+export declare const useXr: ({ onError }?: UseXrOptions) => {
+    isXrAvailable: (type: XrType) => boolean;
+    startXr: (type: XrType) => void;
+    endXr: () => void;
+    isCurrentlyInXr: boolean;
+};
+export default useXr;
+//# sourceMappingURL=useXr.d.ts.map

package/hooks/useXr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useXr.d.ts","sourceRoot":"","sources":["../../src/hooks/useXr.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjC,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAOD,eAAO,MAAM,KAAK,GAAI,cAAa,YAAiB;0BA0CT,MAAM;oBAGtC,MAAM;;;CAsBhB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/hooks/useXr.js

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useApp } from '@playcanvas/react/hooks';
+import { XRSPACE_LOCALFLOOR, XRTYPE_AR, XRTYPE_VR } from 'playcanvas';
+const XR_TYPES = {
+  VR: XRTYPE_VR,
+  AR: XRTYPE_AR
+};
+export const useXr = ({
+  onError
+} = {}) => {
+  const app = useApp();
+  const [available, setAvailable] = useState({
+    VR: false,
+    AR: false
+  });
+  const [isCurrentlyInXr, setIsCurrentlyInXr] = useState(app.xr?.active ?? false);
+  useEffect(() => {
+    // We subscribe to the manager directly because `app` doesn't update when XR's availability changes.
+    const handleAvailable = (type, isAvailable) => {
+      if (type === XRTYPE_VR) {
+        setAvailable(prev => ({
+          ...prev,
+          VR: isAvailable
+        }));
+      } else if (type === XRTYPE_AR) {
+        setAvailable(prev => ({
+          ...prev,
+          AR: isAvailable
+        }));
+      }
+    };
+    setAvailable({
+      VR: app.xr?.isAvailable(XRTYPE_VR) ?? false,
+      AR: app.xr?.isAvailable(XRTYPE_AR) ?? false
+    });
+    app.xr?.on('available', handleAvailable);
+    return () => {
+      app.xr?.off('available', handleAvailable);
+    };
+  }, [app]);
+  useEffect(() => {
+    const handleStart = () => setIsCurrentlyInXr(true);
+    const handleEnd = () => setIsCurrentlyInXr(false);
+    setIsCurrentlyInXr(app.xr?.active ?? false);
+    app.xr?.on('start', handleStart);
+    app.xr?.on('end', handleEnd);
+    return () => {
+      app.xr?.off('start', handleStart);
+      app.xr?.off('end', handleEnd);
+    };
+  }, [app]);
+  const isXrAvailable = useCallback(type => available[type], [available]);
+  const startXr = useCallback(type => {
+    const camera = app.root.findComponent('camera');
+    app.xr?.start(camera, XR_TYPES[type], XRSPACE_LOCALFLOOR, {
+      callback: err => {
+        if (err) {
+          onError?.(err);
+          app.xr?.end();
+        }
+      }
+    });
+  }, [app, onError]);
+  const endXr = useCallback(() => {
+    app.xr?.end();
+  }, [app]);
+  return useMemo(() => ({
+    isXrAvailable,
+    startXr,
+    endXr,
+    isCurrentlyInXr
+  }), [isXrAvailable, startXr, endXr, isCurrentlyInXr]);
+};
+export default useXr;

package/package.json

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