@terraware/web-components 4.2.13 → 4.2.14-rc.1

package/components/ViewPhotosDialog/index.js

@@ -1,20 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ViewPhotosDialog;
-var _react = _interopRequireWildcard(require("react"));
-var _reactMultiCarousel = _interopRequireDefault(require("react-multi-carousel"));
-require("react-multi-carousel/lib/styles.css");
-var _material = require("@mui/material");
-var _BusySpinner = _interopRequireDefault(require("../BusySpinner"));
-var _Button = _interopRequireDefault(require("../Button/Button"));
-var _DialogBox = _interopRequireDefault(require("../DialogBox/DialogBox"));
-require("./styles.scss");
-function ViewPhotosDialog(props) {
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+import { Box, Typography } from '@mui/material';
+import BusySpinner from '../BusySpinner';
+import Button from '../Button/Button';
+import DialogBox from '../DialogBox/DialogBox';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ViewPhotosDialog(props) {
   const {
     onClose,
     open,
@@ -26,11 +19,11 @@ function ViewPhotosDialog(props) {
     numbered,
     dots
   } = props;
-  const [isPreviousDisabled, setIsPreviousDisabled] = (0, _react.useState)(false);
-  const [isNextDisabled, setIsNextDisabled] = (0, _react.useState)(false);
-  const [isLoading, setIsLoading] = (0, _react.useState)([]);
-  const [selectedSlide, setSelectedSlide] = (0, _react.useState)(initialSelectedSlide);
-  const myCarousel = (0, _react.useRef)(null);
+  const [isPreviousDisabled, setIsPreviousDisabled] = useState(false);
+  const [isNextDisabled, setIsNextDisabled] = useState(false);
+  const [isLoading, setIsLoading] = useState([]);
+  const [selectedSlide, setSelectedSlide] = useState(initialSelectedSlide);
+  const myCarousel = useRef(null);
   const responsive = {
     mobile: {
       breakpoint: {
@@ -40,7 +33,7 @@ function ViewPhotosDialog(props) {
       items: 1
     }
   };
-  const handleChange = (0, _react.useCallback)(args => {
+  const handleChange = useCallback(args => {
     if (myCarousel.current) {
       if (myCarousel.current.state.currentSlide + 1 >= photos.length) {
         setIsNextDisabled(true);
@@ -65,16 +58,16 @@ function ViewPhotosDialog(props) {
       }
     }
   }, [photos.length, selectedSlide, initialSelectedSlide, selectedSlide]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     setIsLoading(new Array(photos.length).fill(true));
   }, [photos.length]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     setSelectedSlide(initialSelectedSlide);
   }, [initialSelectedSlide]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     handleChange();
   }, [open, handleChange]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (myCarousel.current) {
       myCarousel.current.goToSlide(selectedSlide);
     }
@@ -84,53 +77,56 @@ function ViewPhotosDialog(props) {
     newIsLoading[index] = false;
     setIsLoading(newIsLoading);
   };
-  return /*#__PURE__*/_react.default.createElement(_DialogBox.default, {
+  return /*#__PURE__*/_jsx(DialogBox, {
     onClose: onClose,
     open: open,
     title: title,
     size: "large",
     scrolled: true,
-    middleButtons: [/*#__PURE__*/_react.default.createElement(_Button.default, {
+    middleButtons: [/*#__PURE__*/_jsx(Button, {
       label: prevButtonLabel,
       priority: "secondary",
       onClick: () => setSelectedSlide(slide => Math.max(0, slide - 1)),
-      key: "button-1",
       disabled: isPreviousDisabled,
       icon: "caretLeft"
-    }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    }, 'button-1'), /*#__PURE__*/_jsx(Button, {
       label: nextButtonLabel,
       onClick: () => setSelectedSlide(slide => Math.min(photos.length - 1, slide + 1)),
-      key: "button-2",
       disabled: isNextDisabled,
       rightIcon: "caretRight"
-    })]
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    sx: {
-      '& .react-multi-carousel-list': {
-        paddingBottom: '20px'
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactMultiCarousel.default, {
-    responsive: responsive,
-    ref: myCarousel,
-    showDots: dots !== null && dots !== void 0 ? dots : true,
-    arrows: false,
-    ssr: true,
-    afterChange: handleChange
-  }, photos.map((p, i) => /*#__PURE__*/_react.default.createElement("div", {
-    key: "photo-".concat(i, "-container"),
-    className: "view-photos-dialog-container"
-  }, isLoading[i] ? /*#__PURE__*/_react.default.createElement(_BusySpinner.default, {
-    noBackground: true
-  }) : undefined, /*#__PURE__*/_react.default.createElement("a", {
-    href: p.url,
-    target: "blank"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    className: "view-photos-dialog-image",
-    src: p.url,
-    alt: p.alt,
-    onLoad: () => finishLoading(i)
-  }))))), numbered ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    className: "photo-numbering"
-  }, "".concat(selectedSlide + 1, "/").concat(photos.length)) : undefined, photos[selectedSlide] && photos[selectedSlide].decoration));
+    }, 'button-2')],
+    children: /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        '& .react-multi-carousel-list': {
+          paddingBottom: '20px'
+        }
+      },
+      children: [/*#__PURE__*/_jsx(Carousel, {
+        responsive: responsive,
+        ref: myCarousel,
+        showDots: dots ?? true,
+        arrows: false,
+        ssr: true,
+        afterChange: handleChange,
+        children: photos.map((p, i) => /*#__PURE__*/_jsxs("div", {
+          className: "view-photos-dialog-container",
+          children: [isLoading[i] ? /*#__PURE__*/_jsx(BusySpinner, {
+            noBackground: true
+          }) : undefined, /*#__PURE__*/_jsx("a", {
+            href: p.url,
+            target: "blank",
+            children: /*#__PURE__*/_jsx("img", {
+              className: "view-photos-dialog-image",
+              src: p.url,
+              alt: p.alt,
+              onLoad: () => finishLoading(i)
+            })
+          })]
+        }, `photo-${i}-container`))
+      }), numbered ? /*#__PURE__*/_jsx(Typography, {
+        className: "photo-numbering",
+        children: `${selectedSlide + 1}/${photos.length}`
+      }) : undefined, photos[selectedSlide] && photos[selectedSlide].decoration]
+    })
+  });
 }

package/components/VirtualWalkthrough/Annotation.d.ts

@@ -0,0 +1,41 @@
+import './annotation-styles.css';
+export type AnnotationIconType = 'text' | 'image' | 'video';
+export interface AnnotationProps {
+    position: [number, number, number];
+    title: string;
+    bodyText?: string;
+    label?: string;
+    imageUrl?: string;
+    icon?: AnnotationIconType;
+    cameraPosition?: [number, number, number];
+    visible?: boolean;
+    isEdit?: boolean;
+    isSelected?: boolean;
+    isViewed?: boolean;
+    onSelect?: () => void;
+    onPositionChange?: (position: [number, number, number]) => void;
+    onView?: (annotation: AnnotationProps, screenX: number, screenY: number) => void;
+    onScreenPositionUpdate?: (index: number, screenX: number, screenY: number, size?: number) => void;
+}
+/**
+ * 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
+ */
+declare const Annotation: (props: AnnotationProps & {
+    index: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Annotation;
+//# sourceMappingURL=Annotation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Annotation.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/Annotation.tsx"],"names":[],"mappings":"AAUA,OAAO,yBAAyB,CAAC;AAEjC,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAS5D,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChE,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACnG;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,4CAiL7D,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/VirtualWalkthrough/Annotation.js

@@ -0,0 +1,197 @@
+import React, { useCallback, 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 as PcAnnotation } from 'playcanvas/scripts/esm/annotations.mjs';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { useCameraPosition } from '../../hooks/useCameraPosition';
+import './annotation-styles.css';
+import { jsx as _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;
+/**
+ * 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,
+    imageUrl,
+    icon,
+    title,
+    label,
+    visible = true,
+    isEdit = false,
+    isSelected = false,
+    isViewed = false,
+    onSelect,
+    onPositionChange,
+    onView,
+    onScreenPositionUpdate,
+    index
+  } = props;
+  const app = useApp();
+  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,
+    imageUrl,
+    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,
+      imageUrl,
+      cameraPosition
+    };
+  }, [isEdit, onSelect, onView, onScreenPositionUpdate, position, cameraPosition, title, label, bodyText, imageUrl]);
+
+  // 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]);
+
+  // 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
+        }
+        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 cameraEntity = app.root.findByName('camera');
+      const cameraComponent = cameraEntity?.camera;
+      const cameraControls = cameraEntity?.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]);
+  return /*#__PURE__*/_jsx(Entity, {
+    name: entityName,
+    position: position,
+    children: /*#__PURE__*/_jsx(Script, {
+      script: PcAnnotation,
+      title: title,
+      label: label,
+      icon: icon,
+      text: bodyText,
+      enabled: visible,
+      onClickCallback: handleClick,
+      onScreenPositionUpdateCallback: isViewed ? handleScreenPositionUpdate : undefined
+    })
+  });
+};
+export default Annotation;

package/components/VirtualWalkthrough/AnnotationEditPane.d.ts

@@ -0,0 +1,20 @@
+import { AnnotationProps } from './Annotation';
+export interface AnnotationEditPaneStrings {
+    editAnnotation: string;
+    title: string;
+    titleTooltip: string;
+    description: string;
+    descriptionTooltip: string;
+    label: string;
+    labelTooltip: string;
+}
+interface AnnotationEditPaneProps {
+    visible: boolean;
+    annotation: AnnotationProps | null;
+    strings: AnnotationEditPaneStrings;
+    onUpdate: (updates: Partial<AnnotationProps>) => void;
+    onTextFieldFocus?: (isFocused: boolean) => void;
+}
+declare const AnnotationEditPane: ({ visible, annotation, strings, onUpdate, onTextFieldFocus }: AnnotationEditPaneProps) => import("react/jsx-runtime").JSX.Element | null;
+export default AnnotationEditPane;
+//# sourceMappingURL=AnnotationEditPane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationEditPane.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationEditPane.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,OAAO,EAAE,yBAAyB,CAAC;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACtD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,kBAAkB,GAAI,8DAA8D,uBAAuB,mDA+HhH,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/VirtualWalkthrough/AnnotationEditPane.js

@@ -0,0 +1,136 @@
+import React, { useCallback, useMemo } from 'react';
+import { Box, Fade, Tooltip, Typography, useTheme } from '@mui/material';
+import Textfield from '../Textfield/Textfield';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnnotationEditPane = ({
+  visible,
+  annotation,
+  strings,
+  onUpdate,
+  onTextFieldFocus
+}) => {
+  const theme = useTheme();
+  const textFieldSx = useMemo(() => ({
+    '& .textfield-label': {
+      color: `${theme.palette.grey[400]} !important`
+    },
+    '& .textfield-value': {
+      backgroundColor: `${theme.palette.grey[800]} !important`,
+      borderColor: `${theme.palette.grey[700]} !important`
+    },
+    '& input': {
+      color: `${theme.palette.common.white} !important`
+    }
+  }), [theme]);
+  const handleTitleChange = useCallback(value => {
+    onUpdate({
+      title: value
+    });
+  }, [onUpdate]);
+  const handleBodyTextChange = useCallback(value => {
+    onUpdate({
+      bodyText: value
+    });
+  }, [onUpdate]);
+  const handleLabelChange = useCallback(value => {
+    onUpdate({
+      label: value
+    });
+  }, [onUpdate]);
+  const handleFocus = useCallback(() => {
+    onTextFieldFocus?.(true);
+  }, [onTextFieldFocus]);
+  const handleBlur = useCallback(() => {
+    onTextFieldFocus?.(false);
+  }, [onTextFieldFocus]);
+  if (!annotation) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: 'none',
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      padding: 2,
+      zIndex: 1001
+    },
+    children: /*#__PURE__*/_jsx(Fade, {
+      in: visible,
+      timeout: 500,
+      children: /*#__PURE__*/_jsx(Box, {
+        sx: {
+          backgroundColor: theme.palette.grey[900],
+          color: theme.palette.common.white,
+          borderRadius: 2,
+          padding: 3,
+          minWidth: 320,
+          maxWidth: 400,
+          pointerEvents: 'auto'
+        },
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontWeight: 600
+            },
+            children: strings.editAnnotation
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: strings.titleTooltip,
+            placement: "top",
+            disableFocusListener: true,
+            children: /*#__PURE__*/_jsx(Textfield, {
+              id: "annotation-title",
+              label: strings.title,
+              type: "text",
+              value: annotation.title,
+              onChange: handleTitleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              sx: textFieldSx,
+              required: true
+            })
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: strings.descriptionTooltip,
+            placement: "top",
+            disableFocusListener: true,
+            children: /*#__PURE__*/_jsx(Textfield, {
+              id: "annotation-body",
+              label: strings.description,
+              type: "text",
+              value: annotation.bodyText ?? '',
+              onChange: handleBodyTextChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              sx: textFieldSx
+            })
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: strings.labelTooltip,
+            placement: "top",
+            disableFocusListener: true,
+            children: /*#__PURE__*/_jsx(Textfield, {
+              id: "annotation-label",
+              label: strings.label,
+              type: "text",
+              value: annotation.label ?? '',
+              onChange: handleLabelChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              sx: textFieldSx
+            })
+          })]
+        })
+      })
+    })
+  });
+};
+export default AnnotationEditPane;

package/components/VirtualWalkthrough/AnnotationPanel.d.ts

@@ -0,0 +1,13 @@
+import { AnnotationProps } from './Annotation';
+interface AnnotationPanelProps {
+    annotation: AnnotationProps | null;
+    hotspotPosition?: {
+        x: number;
+        y: number;
+        size?: number;
+    } | null;
+    onClose: () => void;
+}
+declare const AnnotationPanel: ({ annotation, hotspotPosition, onClose }: AnnotationPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default AnnotationPanel;
+//# sourceMappingURL=AnnotationPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,UAAU,oBAAoB;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IAInC,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjE,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAuDD,QAAA,MAAM,eAAe,GAAI,0CAA0C,oBAAoB,mDAoItF,CAAC;AAEF,eAAe,eAAe,CAAC"}