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

package/components/VirtualWalkthrough/AnnotationPanel.js

@@ -1,204 +1,216 @@
-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";
+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.
 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 ('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`
-        } : {}
+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();
+      }
     };
-    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
-        };
+    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;
     }
-    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
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
+    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'
+    }),
+    ...(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
+        })]
+      })]
+    })]
+  });
 };
-const VirtualWalkthrough_AnnotationPanel = AnnotationPanel;
-export default VirtualWalkthrough_AnnotationPanel;
+
+export { AnnotationPanel as default };

package/components/VirtualWalkthrough/Application.js

@@ -1,31 +1,34 @@
-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;
+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 };