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

package/components/ViewPhotosDialog/index.js

@@ -1,37 +1,30 @@
-import { useState, useEffect } from 'react';
-import DialogBox from '../DialogBox/DialogBox.js';
-import PhotosCarousel from '../PhotosCarousel/index.js';
-import { jsx } from 'react/jsx-runtime';
-
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import DialogBox from "../DialogBox/DialogBox.js";
+import PhotosCarousel from "../PhotosCarousel/index.js";
 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 { ViewPhotosDialog as default };
+export default ViewPhotosDialog;

package/components/VirtualWalkthrough/Annotation.js

@@ -1,210 +1,166 @@
-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.
- */
+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";
 const VIEW_HORIZONTAL_NDC_BIAS = 0.5;
-/**
- * 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
+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);
         }
-        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
-    })
-  });
+    }, [
+        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
+        })
+    });
 };
-
-export { Annotation as default };
+const VirtualWalkthrough_Annotation = Annotation_Annotation;
+export default VirtualWalkthrough_Annotation;