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

package/components/VirtualWalkthrough/AnnotationPanel.js

@@ -1,216 +1,204 @@
-import { useRef, useState, useEffect, useLayoutEffect } from 'react';
-import { useTheme, Box } from '@mui/material';
-import PhotosCarousel from '../PhotosCarousel/index.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-// Fallback hotspot diameter (px) when the rendered size isn't reported yet.
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Box, useTheme } from "@mui/material";
+import PhotosCarousel from "../PhotosCarousel/index.js";
 const DEFAULT_HOTSPOT_DIAMETER = 35;
-
-// Horizontal gap (px) kept between the panel's right edge and the hotspot so
-// the connector line stays visible.
 const PANEL_HOTSPOT_GAP = 48;
-
-// Minimum distance from the left edge of the viewer, as a fraction of its
-// width, so the panel never drifts further left than this.
 const MIN_LEFT_FRACTION = 0.02;
 const CONNECTOR_STYLE = {
-  position: 'absolute',
-  inset: 0,
-  width: '100%',
-  height: '100%',
-  pointerEvents: 'none',
-  overflow: 'visible',
-  zIndex: 5002
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+    overflow: 'visible',
+    zIndex: 5002
 };
 const PANEL_STYLE = {
-  position: 'absolute',
-  left: '2%',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  maxHeight: '80vh',
-  zIndex: 5003,
-  backgroundColor: '#ffffff',
-  borderRadius: 12,
-  boxShadow: '0 8px 32px rgba(0,0,0,0.32)',
-  overflowY: 'auto',
-  display: 'flex',
-  flexDirection: 'column'
+    position: 'absolute',
+    left: '2%',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    maxHeight: '80vh',
+    zIndex: 5003,
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    boxShadow: '0 8px 32px rgba(0,0,0,0.32)',
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column'
 };
 const CAROUSEL_SX = {
-  width: 'min(60vw, 640px)',
-  borderRadius: '12px 12px 0 0',
-  overflow: 'hidden',
-  flexShrink: 0,
-  '& .embla__slide__img': {
-    height: 'min(400px, 40vh)'
-  },
-  '& .embla__slide': {
-    minHeight: 'min(200px, 20vh)'
-  }
+    width: 'min(60vw, 640px)',
+    borderRadius: '12px 12px 0 0',
+    overflow: 'hidden',
+    flexShrink: 0,
+    '& .embla__slide__img': {
+        height: 'min(400px, 40vh)'
+    },
+    '& .embla__slide': {
+        minHeight: 'min(200px, 20vh)'
+    }
 };
 const TEXT_BLOCK_STYLE = {
-  padding: '24px',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 8,
-  minHeight: 0
+    padding: '24px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    minHeight: 0
 };
 const BODY_STYLE = {
-  fontSize: 16,
-  lineHeight: '24px',
-  margin: 0,
-  minHeight: 0,
-  overflowY: 'auto',
-  overscrollBehavior: 'contain',
-  scrollbarWidth: 'thin'
+    fontSize: 16,
+    lineHeight: '24px',
+    margin: 0,
+    minHeight: 0,
+    overflowY: 'auto',
+    overscrollBehavior: 'contain',
+    scrollbarWidth: 'thin'
 };
-const AnnotationPanel = ({
-  annotation,
-  hotspotPosition,
-  onClose
-}) => {
-  const theme = useTheme();
-  const panelRef = useRef(null);
-  const connectorRef = useRef(null);
-  const [lineStart, setLineStart] = useState(null);
-  const [panelLeft, setPanelLeft] = useState(null);
-  useEffect(() => {
-    if (!annotation) {
-      return;
-    }
-    const handleKeyDown = e => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-    const handlePointerDown = e => {
-      if (panelRef.current && !panelRef.current.contains(e.target)) {
-        onClose();
-      }
+const AnnotationPanel = ({ annotation, hotspotPosition, onClose })=>{
+    const theme = useTheme();
+    const panelRef = useRef(null);
+    const connectorRef = useRef(null);
+    const [lineStart, setLineStart] = useState(null);
+    const [panelLeft, setPanelLeft] = useState(null);
+    useEffect(()=>{
+        if (!annotation) return;
+        const handleKeyDown = (e)=>{
+            if ('Escape' === e.key) onClose();
+        };
+        const handlePointerDown = (e)=>{
+            if (panelRef.current && !panelRef.current.contains(e.target)) onClose();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('pointerdown', handlePointerDown);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('pointerdown', handlePointerDown);
+        };
+    }, [
+        annotation,
+        onClose
+    ]);
+    useLayoutEffect(()=>{
+        if (!annotation || !hotspotPosition || !panelRef.current || !connectorRef.current) {
+            setPanelLeft(null);
+            setLineStart(null);
+            return;
+        }
+        const panelWidth = panelRef.current.getBoundingClientRect().width;
+        const connectorRect = connectorRef.current.getBoundingClientRect();
+        const minLeft = connectorRect.width * MIN_LEFT_FRACTION;
+        const desiredLeft = hotspotPosition.x - PANEL_HOTSPOT_GAP - panelWidth;
+        const left = Math.max(desiredLeft, minLeft);
+        setPanelLeft(left);
+        setLineStart({
+            x: left + panelWidth,
+            y: connectorRect.height / 2
+        });
+    }, [
+        annotation,
+        hotspotPosition
+    ]);
+    if (!annotation) return null;
+    const panelStyle = {
+        ...PANEL_STYLE,
+        ...annotation.imageUrls?.[0] ? {
+            width: 'min(60vw, 640px)',
+            maxWidth: '60vw'
+        } : {
+            width: 'fit-content',
+            maxWidth: '50vw'
+        },
+        ...null !== panelLeft ? {
+            left: `${panelLeft}px`
+        } : {}
     };
-    document.addEventListener('keydown', handleKeyDown);
-    document.addEventListener('pointerdown', handlePointerDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('pointerdown', handlePointerDown);
-    };
-  }, [annotation, onClose]);
-
-  // Position the panel just to the left of the hotspot (clamped so it never
-  // goes further left than MIN_LEFT_FRACTION of the viewer) and anchor the
-  // connector line at the vertical center of the panel's right edge, in the
-  // connector SVG's coordinate space.
-  useLayoutEffect(() => {
-    if (!annotation || !hotspotPosition || !panelRef.current || !connectorRef.current) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setPanelLeft(null);
-      setLineStart(null);
-      return;
+    let lineEnd = null;
+    if (lineStart && hotspotPosition) {
+        const dx = hotspotPosition.x - lineStart.x;
+        const dy = hotspotPosition.y - lineStart.y;
+        const dist = Math.hypot(dx, dy);
+        const radius = (hotspotPosition.size ?? DEFAULT_HOTSPOT_DIAMETER) / 2;
+        const t = dist > radius ? (dist - radius) / dist : 0;
+        lineEnd = {
+            x: lineStart.x + dx * t,
+            y: lineStart.y + dy * t
+        };
     }
-    const panelWidth = panelRef.current.getBoundingClientRect().width;
-    const connectorRect = connectorRef.current.getBoundingClientRect();
-    const minLeft = connectorRect.width * MIN_LEFT_FRACTION;
-    const desiredLeft = hotspotPosition.x - PANEL_HOTSPOT_GAP - panelWidth;
-    const left = Math.max(desiredLeft, minLeft);
-    setPanelLeft(left);
-    setLineStart({
-      x: left + panelWidth,
-      y: connectorRect.height / 2
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("svg", {
+                ref: connectorRef,
+                "data-testid": "annotation-panel-connector",
+                style: CONNECTOR_STYLE,
+                children: lineStart && lineEnd && /*#__PURE__*/ jsx("line", {
+                    x1: lineStart.x,
+                    y1: lineStart.y,
+                    x2: lineEnd.x,
+                    y2: lineEnd.y,
+                    stroke: "#ffffff",
+                    strokeWidth: 2
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                ref: panelRef,
+                "data-testid": "annotation-panel",
+                style: panelStyle,
+                children: [
+                    annotation.imageUrls && annotation.imageUrls.length > 0 && /*#__PURE__*/ jsx(Box, {
+                        sx: CAROUSEL_SX,
+                        children: /*#__PURE__*/ jsx(PhotosCarousel, {
+                            photos: annotation.imageUrls.map((url)=>({
+                                    url,
+                                    alt: annotation.title
+                                })),
+                            showArrows: true,
+                            dots: false
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        style: TEXT_BLOCK_STYLE,
+                        children: [
+                            annotation.label && /*#__PURE__*/ jsx("span", {
+                                "data-testid": "annotation-panel-label",
+                                style: {
+                                    alignSelf: 'flex-start',
+                                    fontSize: 14,
+                                    fontWeight: 500,
+                                    color: theme.palette.TwClrTxtSuccess,
+                                    margin: 0,
+                                    padding: theme.spacing(0.5, 1),
+                                    backgroundColor: theme.palette.TwClrBgSuccessTertiary,
+                                    border: `1px solid ${theme.palette.TwClrBrdrSuccess}`,
+                                    borderRadius: theme.spacing(1)
+                                },
+                                children: annotation.label
+                            }),
+                            /*#__PURE__*/ jsx("h2", {
+                                "data-testid": "annotation-panel-title",
+                                style: {
+                                    fontSize: 32,
+                                    fontWeight: 600,
+                                    color: theme.palette.TwClrTxt,
+                                    margin: 0
+                                },
+                                children: annotation.title
+                            }),
+                            annotation.bodyText && /*#__PURE__*/ jsx("p", {
+                                "data-testid": "annotation-panel-description",
+                                style: {
+                                    ...BODY_STYLE,
+                                    color: theme.palette.TwClrTxt
+                                },
+                                children: annotation.bodyText
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
     });
-  }, [annotation, hotspotPosition]);
-  if (!annotation) {
-    return null;
-  }
-  const panelStyle = {
-    ...PANEL_STYLE,
-    ...(annotation.imageUrls?.[0] ? {
-      width: 'min(60vw, 640px)',
-      maxWidth: '60vw'
-    } : {
-      width: 'fit-content',
-      maxWidth: '50vw'
-    }),
-    ...(panelLeft !== null ? {
-      left: `${panelLeft}px`
-    } : {})
-  };
-
-  // Stop the line at the edge of the hotspot circle
-  let lineEnd = null;
-  if (lineStart && hotspotPosition) {
-    const dx = hotspotPosition.x - lineStart.x;
-    const dy = hotspotPosition.y - lineStart.y;
-    const dist = Math.hypot(dx, dy);
-    const radius = (hotspotPosition.size ?? DEFAULT_HOTSPOT_DIAMETER) / 2;
-    const t = dist > radius ? (dist - radius) / dist : 0;
-    lineEnd = {
-      x: lineStart.x + dx * t,
-      y: lineStart.y + dy * t
-    };
-  }
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("svg", {
-      ref: connectorRef,
-      "data-testid": "annotation-panel-connector",
-      style: CONNECTOR_STYLE,
-      children: lineStart && lineEnd && /*#__PURE__*/jsx("line", {
-        x1: lineStart.x,
-        y1: lineStart.y,
-        x2: lineEnd.x,
-        y2: lineEnd.y,
-        stroke: "#ffffff",
-        strokeWidth: 2
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      ref: panelRef,
-      "data-testid": "annotation-panel",
-      style: panelStyle,
-      children: [annotation.imageUrls && annotation.imageUrls.length > 0 && /*#__PURE__*/jsx(Box, {
-        sx: CAROUSEL_SX,
-        children: /*#__PURE__*/jsx(PhotosCarousel, {
-          photos: annotation.imageUrls.map(url => ({
-            url,
-            alt: annotation.title
-          })),
-          showArrows: true,
-          dots: false
-        })
-      }), /*#__PURE__*/jsxs("div", {
-        style: TEXT_BLOCK_STYLE,
-        children: [annotation.label && /*#__PURE__*/jsx("span", {
-          "data-testid": "annotation-panel-label",
-          style: {
-            alignSelf: 'flex-start',
-            fontSize: 14,
-            fontWeight: 500,
-            color: theme.palette.TwClrTxtSuccess,
-            margin: 0,
-            padding: theme.spacing(0.5, 1),
-            backgroundColor: theme.palette.TwClrBgSuccessTertiary,
-            border: `1px solid ${theme.palette.TwClrBrdrSuccess}`,
-            borderRadius: theme.spacing(1)
-          },
-          children: annotation.label
-        }), /*#__PURE__*/jsx("h2", {
-          "data-testid": "annotation-panel-title",
-          style: {
-            fontSize: 32,
-            fontWeight: 600,
-            color: theme.palette.TwClrTxt,
-            margin: 0
-          },
-          children: annotation.title
-        }), annotation.bodyText && /*#__PURE__*/jsx("p", {
-          "data-testid": "annotation-panel-description",
-          style: {
-            ...BODY_STYLE,
-            color: theme.palette.TwClrTxt
-          },
-          children: annotation.bodyText
-        })]
-      })]
-    })]
-  });
 };
-
-export { AnnotationPanel as default };
+const VirtualWalkthrough_AnnotationPanel = AnnotationPanel;
+export default VirtualWalkthrough_AnnotationPanel;

package/components/VirtualWalkthrough/Application.js

@@ -1,34 +1,31 @@
-import 'react';
-import { Application as Application$1 } from '@playcanvas/react';
-import './application-styles.css';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-const Application = ({
-  children,
-  style
-}) => {
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Application$1, {
-      style: style,
-      graphicsDeviceOptions: {
-        antialias: false,
-        xrCompatible: true
-      },
-      children: children
-    }), /*#__PURE__*/jsx("div", {
-      "data-annotation-container": true,
-      className: "annotation-container",
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
-        zIndex: 1000
-      }
-    })]
-  });
-};
-
-export { Application as default };
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Application } from "@playcanvas/react";
+import "./application-styles.css";
+const Application_Application = ({ children, style })=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Application, {
+                style: style,
+                graphicsDeviceOptions: {
+                    antialias: false,
+                    xrCompatible: true
+                },
+                children: children
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "data-annotation-container": true,
+                className: "annotation-container",
+                style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                    zIndex: 1000
+                }
+            })
+        ]
+    });
+const VirtualWalkthrough_Application = Application_Application;
+export default VirtualWalkthrough_Application;