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

package/components/ViewPhotosDialog/index.js

@@ -1,30 +1,37 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import DialogBox from "../DialogBox/DialogBox.js";
-import PhotosCarousel from "../PhotosCarousel/index.js";
+import { useState, useEffect } from 'react';
+import DialogBox from '../DialogBox/DialogBox.js';
+import PhotosCarousel from '../PhotosCarousel/index.js';
+import { jsx } from 'react/jsx-runtime';
+
 function ViewPhotosDialog(props) {
-    const { onClose, open, photos, initialSelectedSlide, title, numbered, dots } = props;
-    const [selectedSlide, setSelectedSlide] = useState(initialSelectedSlide);
-    useEffect(()=>{
-        setSelectedSlide(initialSelectedSlide);
-    }, [
-        initialSelectedSlide,
-        open
-    ]);
-    return /*#__PURE__*/ jsx(DialogBox, {
-        onClose: onClose,
-        open: open,
-        title: title,
-        size: "large",
-        scrolled: true,
-        children: /*#__PURE__*/ jsx(PhotosCarousel, {
-            photos: photos,
-            selectedSlide: selectedSlide,
-            onSlideChange: setSelectedSlide,
-            numbered: numbered,
-            dots: dots,
-            showArrows: true
-        })
-    });
+  const {
+    onClose,
+    open,
+    photos,
+    initialSelectedSlide,
+    title,
+    numbered,
+    dots
+  } = props;
+  const [selectedSlide, setSelectedSlide] = useState(initialSelectedSlide);
+  useEffect(() => {
+    setSelectedSlide(initialSelectedSlide);
+  }, [initialSelectedSlide, open]);
+  return /*#__PURE__*/jsx(DialogBox, {
+    onClose: onClose,
+    open: open,
+    title: title,
+    size: "large",
+    scrolled: true,
+    children: /*#__PURE__*/jsx(PhotosCarousel, {
+      photos: photos,
+      selectedSlide: selectedSlide,
+      onSlideChange: setSelectedSlide,
+      numbered: numbered,
+      dots: dots,
+      showArrows: true
+    })
+  });
 }
-export default ViewPhotosDialog;
+
+export { ViewPhotosDialog as default };

package/components/VirtualWalkthrough/Annotation.js

@@ -1,166 +1,210 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
-import { Entity } from "@playcanvas/react";
-import { Script } from "@playcanvas/react/components";
-import { useApp } from "@playcanvas/react/hooks";
-import { Gizmo, TranslateGizmo } from "playcanvas";
-import { Annotation } from "playcanvas/scripts/esm/annotations.mjs";
-import { CameraControls } from "playcanvas/scripts/esm/camera-controls.mjs";
-import { CameraEntityContext } from "../../hooks/cameraEntityContext.js";
-import { useCameraPosition } from "../../hooks/useCameraPosition.js";
-import "./annotation-styles.css";
+import { useContext, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Entity } from '@playcanvas/react';
+import { Script } from '@playcanvas/react/components';
+import { useApp } from '@playcanvas/react/hooks';
+import { Gizmo, TranslateGizmo } from 'playcanvas';
+import { Annotation as Annotation$1 } from 'playcanvas/scripts/esm/annotations.mjs';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { CameraEntityContext } from '../../hooks/cameraEntityContext.js';
+import { useCameraPosition } from '../../hooks/useCameraPosition.js';
+import './annotation-styles.css';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Target normalized-device x coordinate for a clicked annotation. +0.5 places
+ * the hotspot three quarters across the screen (25% from the right), leaving room
+ * for the annotation panel on the left without covering the hotspot.
+ */
 const VIEW_HORIZONTAL_NDC_BIAS = 0.5;
-const Annotation_Annotation = (props)=>{
-    const { position, cameraPosition, bodyText, imageUrls, icon, title, label, visible = true, isEdit = false, isSelected = false, isViewed = false, onSelect, onPositionChange, onView, onScreenPositionUpdate, index } = props;
-    const app = useApp();
-    const walkthroughCamera = useContext(CameraEntityContext);
-    const { setCamera } = useCameraPosition();
-    const gizmoRef = useRef(null);
-    const layerRef = useRef(null);
-    const isEditRef = useRef(isEdit);
-    const onSelectRef = useRef(onSelect);
-    const onViewRef = useRef(onView);
-    const onScreenPositionUpdateRef = useRef(onScreenPositionUpdate);
-    const positionRef = useRef(position);
-    const cameraPositionRef = useRef(cameraPosition);
-    const annotationForViewRef = useRef({
-        position,
-        title,
-        label,
-        bodyText,
-        imageUrls,
-        cameraPosition
-    });
-    useEffect(()=>{
-        isEditRef.current = isEdit;
-        onSelectRef.current = onSelect;
-        onViewRef.current = onView;
-        onScreenPositionUpdateRef.current = onScreenPositionUpdate;
-        positionRef.current = position;
-        cameraPositionRef.current = cameraPosition;
-        annotationForViewRef.current = {
-            position,
-            title,
-            label,
-            bodyText,
-            imageUrls,
-            cameraPosition
-        };
-    }, [
-        isEdit,
-        onSelect,
-        onView,
-        onScreenPositionUpdate,
-        position,
-        cameraPosition,
-        title,
-        label,
-        bodyText,
-        imageUrls
-    ]);
-    const handleClick = useCallback((screenX, screenY)=>{
-        if (isEditRef.current) onSelectRef.current?.();
-        else {
-            setCamera(positionRef.current, cameraPositionRef.current, VIEW_HORIZONTAL_NDC_BIAS);
-            if (onViewRef.current && void 0 !== screenX && void 0 !== screenY) onViewRef.current(annotationForViewRef.current, screenX, screenY);
+/**
+ * A 3D annotation component that displays a hotspot in the scene.
+ * When clicked, displays annotation text and moves the camera.
+ * In edit mode, shows a translate gizmo when selected.
+ *
+ * @param props.position - The world position of the annotation
+ * @param props.index - The index of the annotation, used as a unique identifier
+ * @param props.title - The title displayed in the annotation
+ * @param props.bodyText - Optional description displayed in the annotation
+ * @param props.label - Optional label displayed on the hotspot
+ * @param props.cameraPosition - Optional camera position to move to when clicked. If undefined, camera stays at current position
+ * @param props.visible - Optional flag to show/hide the annotation. Defaults to true
+ * @param props.isEdit - Optional flag for edit mode. Defaults to false
+ * @param props.isSelected - Optional flag indicating if this annotation is selected. Defaults to false
+ * @param props.onSelect - Optional callback when annotation is clicked in edit mode
+ * @param props.onPositionChange - Optional callback when annotation position changes
+ */
+const Annotation = props => {
+  const {
+    position,
+    cameraPosition,
+    bodyText,
+    imageUrls,
+    icon,
+    title,
+    label,
+    visible = true,
+    isEdit = false,
+    isSelected = false,
+    isViewed = false,
+    onSelect,
+    onPositionChange,
+    onView,
+    onScreenPositionUpdate,
+    index
+  } = props;
+  const app = useApp();
+  const walkthroughCamera = useContext(CameraEntityContext);
+  const {
+    setCamera
+  } = useCameraPosition();
+  const gizmoRef = useRef(null);
+  const layerRef = useRef(null);
+
+  // Use refs to always call the latest callback values
+  const isEditRef = useRef(isEdit);
+  const onSelectRef = useRef(onSelect);
+  const onViewRef = useRef(onView);
+  const onScreenPositionUpdateRef = useRef(onScreenPositionUpdate);
+  const positionRef = useRef(position);
+  const cameraPositionRef = useRef(cameraPosition);
+  const annotationForViewRef = useRef({
+    position,
+    title,
+    label,
+    bodyText,
+    imageUrls,
+    cameraPosition
+  });
+  useEffect(() => {
+    isEditRef.current = isEdit;
+    onSelectRef.current = onSelect;
+    onViewRef.current = onView;
+    onScreenPositionUpdateRef.current = onScreenPositionUpdate;
+    positionRef.current = position;
+    cameraPositionRef.current = cameraPosition;
+    annotationForViewRef.current = {
+      position,
+      title,
+      label,
+      bodyText,
+      imageUrls,
+      cameraPosition
+    };
+  }, [isEdit, onSelect, onView, onScreenPositionUpdate, position, cameraPosition, title, label, bodyText, imageUrls]);
+
+  // Create a stable callback that reads from refs, because this is read from TfAnnotationManager when the annotation is added to the scene
+  const handleClick = useCallback((screenX, screenY) => {
+    if (isEditRef.current) {
+      onSelectRef.current?.();
+    } else {
+      setCamera(positionRef.current, cameraPositionRef.current, VIEW_HORIZONTAL_NDC_BIAS);
+      if (onViewRef.current && screenX !== undefined && screenY !== undefined) {
+        onViewRef.current(annotationForViewRef.current, screenX, screenY);
+      }
+    }
+  }, [setCamera]);
+
+  // VR open path: shows the annotation without moving the camera (roomscale head pose
+  // comes from the XR views, so a camera move would be disorienting or a no-op).
+  const handleVrOpen = useCallback((screenX, screenY) => {
+    if (isEditRef.current) {
+      return;
+    }
+    onViewRef.current?.(annotationForViewRef.current, screenX, screenY);
+  }, []);
+
+  // Stable callback so its identity doesn't churn the underlying script prop each frame.
+  const handleScreenPositionUpdate = useCallback((screenX, screenY, size) => {
+    onScreenPositionUpdateRef.current?.(index, screenX, screenY, size);
+  }, [index]);
+  const entityName = useMemo(() => `annotation-${index}`, [index]);
+  useEffect(() => {
+    const shouldShowGizmo = isEdit && isSelected && visible;
+    const cleanupGizmo = () => {
+      if (gizmoRef.current) {
+        try {
+          gizmoRef.current.detach();
+          gizmoRef.current.destroy();
+        } catch (error) {
+          // Ignore cleanup errors
         }
-    }, [
-        setCamera
-    ]);
-    const handleVrOpen = useCallback((screenX, screenY)=>{
-        if (isEditRef.current) return;
-        onViewRef.current?.(annotationForViewRef.current, screenX, screenY);
-    }, []);
-    const handleScreenPositionUpdate = useCallback((screenX, screenY, size)=>{
-        onScreenPositionUpdateRef.current?.(index, screenX, screenY, size);
-    }, [
-        index
-    ]);
-    const entityName = useMemo(()=>`annotation-${index}`, [
-        index
-    ]);
-    useEffect(()=>{
-        const shouldShowGizmo = isEdit && isSelected && visible;
-        const cleanupGizmo = ()=>{
-            if (gizmoRef.current) {
-                try {
-                    gizmoRef.current.detach();
-                    gizmoRef.current.destroy();
-                } catch (error) {}
-                gizmoRef.current = null;
-            }
-            if (layerRef.current && app.scene?.layers) {
-                try {
-                    const layer = app.scene.layers.getLayerByName('Gizmo');
-                    if (layer) app.scene.layers.remove(layerRef.current);
-                } catch (error) {}
-                layerRef.current = null;
-            }
-        };
-        if (!shouldShowGizmo) return void cleanupGizmo();
-        const setupGizmo = ()=>{
-            const annotationEntity = app.root.findByName(entityName);
-            const cameraComponent = walkthroughCamera?.camera;
-            const cameraControls = walkthroughCamera?.script?.get(CameraControls.scriptName);
-            if (!annotationEntity || !cameraComponent) return false;
-            if (!gizmoRef.current) {
-                if (!layerRef.current) layerRef.current = Gizmo.createLayer(app);
-                const gizmo = new TranslateGizmo(cameraComponent, layerRef.current);
-                gizmo.size = 0.75;
-                gizmo.snapIncrement = 0.01;
-                gizmo.coordSpace = 'world';
-                gizmo.on('transform:start', ()=>{
-                    if (cameraControls) cameraControls.enabled = false;
-                });
-                gizmo.on('transform:end', ()=>{
-                    if (cameraControls) cameraControls.enabled = true;
-                    if (onPositionChange) {
-                        const pos = annotationEntity.getPosition();
-                        onPositionChange([
-                            pos.x,
-                            pos.y,
-                            pos.z
-                        ]);
-                    }
-                });
-                gizmo.attach([
-                    annotationEntity
-                ]);
-                gizmoRef.current = gizmo;
-            }
-            return true;
-        };
-        const intervalId = setInterval(()=>{
-            if (setupGizmo()) clearInterval(intervalId);
-        }, 100);
-        return ()=>{
-            clearInterval(intervalId);
-            cleanupGizmo();
-        };
-    }, [
-        app,
-        isEdit,
-        isSelected,
-        visible,
-        onPositionChange,
-        entityName,
-        walkthroughCamera
-    ]);
-    return /*#__PURE__*/ jsx(Entity, {
-        name: entityName,
-        position: position,
-        children: /*#__PURE__*/ jsx(Script, {
-            script: Annotation,
-            title: title,
-            label: label,
-            icon: icon,
-            text: bodyText,
-            enabled: visible,
-            onClickCallback: handleClick,
-            onVrOpenCallback: handleVrOpen,
-            onScreenPositionUpdateCallback: isViewed ? handleScreenPositionUpdate : void 0
-        })
-    });
+        gizmoRef.current = null;
+      }
+      if (layerRef.current && app.scene?.layers) {
+        try {
+          const layer = app.scene.layers.getLayerByName('Gizmo');
+          if (layer) {
+            app.scene.layers.remove(layerRef.current);
+          }
+        } catch (error) {
+          // Ignore cleanup errors
+        }
+        layerRef.current = null;
+      }
+    };
+    if (!shouldShowGizmo) {
+      cleanupGizmo();
+      return;
+    }
+    const setupGizmo = () => {
+      const annotationEntity = app.root.findByName(entityName);
+      const cameraComponent = walkthroughCamera?.camera;
+      const cameraControls = walkthroughCamera?.script?.get(CameraControls.scriptName);
+      if (!annotationEntity || !cameraComponent) {
+        return false;
+      }
+      if (!gizmoRef.current) {
+        if (!layerRef.current) {
+          layerRef.current = Gizmo.createLayer(app);
+        }
+        const gizmo = new TranslateGizmo(cameraComponent, layerRef.current);
+        gizmo.size = 0.75;
+        gizmo.snapIncrement = 0.01;
+        gizmo.coordSpace = 'world';
+        gizmo.on('transform:start', () => {
+          if (cameraControls) {
+            cameraControls.enabled = false;
+          }
+        });
+        gizmo.on('transform:end', () => {
+          if (cameraControls) {
+            cameraControls.enabled = true;
+          }
+          if (onPositionChange) {
+            const pos = annotationEntity.getPosition();
+            onPositionChange([pos.x, pos.y, pos.z]);
+          }
+        });
+        gizmo.attach([annotationEntity]);
+        gizmoRef.current = gizmo;
+      }
+      return true;
+    };
+    const intervalId = setInterval(() => {
+      if (setupGizmo()) {
+        clearInterval(intervalId);
+      }
+    }, 100);
+    return () => {
+      clearInterval(intervalId);
+      cleanupGizmo();
+    };
+  }, [app, isEdit, isSelected, visible, onPositionChange, entityName, walkthroughCamera]);
+  return /*#__PURE__*/jsx(Entity, {
+    name: entityName,
+    position: position,
+    children: /*#__PURE__*/jsx(Script, {
+      script: Annotation$1,
+      title: title,
+      label: label,
+      icon: icon,
+      text: bodyText,
+      enabled: visible,
+      onClickCallback: handleClick,
+      onVrOpenCallback: handleVrOpen,
+      onScreenPositionUpdateCallback: isViewed ? handleScreenPositionUpdate : undefined
+    })
+  });
 };
-const VirtualWalkthrough_Annotation = Annotation_Annotation;
-export default VirtualWalkthrough_Annotation;
+
+export { Annotation as default };