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

package/components/VirtualWalkthrough/CameraInfo.js

@@ -1,91 +1,102 @@
-import { useState, useEffect } from 'react';
-import { useTheme, Box, Typography } from '@mui/material';
-import { useStrings } from '../../strings/index.js';
-import { getRgbaFromHex } from '../../utils/color.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Typography, useTheme } from "@mui/material";
+import { useStrings } from "../../strings/index.js";
+import { getRgbaFromHex } from "../../utils/color.js";
 const UPDATE_FREQUENCY_MS = 200;
-const COORDINATE_LABELS = ['X', 'Y', 'Z'];
-const formatNumber = num => num.toFixed(6);
-const CoordinateDisplay = ({
-  label,
-  coordinates,
-  textColor
-}) => /*#__PURE__*/jsxs(Box, {
-  children: [/*#__PURE__*/jsxs(Typography, {
-    variant: "caption",
-    sx: {
-      color: textColor,
-      fontWeight: 'bold'
-    },
-    children: [label, ":"]
-  }), coordinates.map((value, index) => /*#__PURE__*/jsxs(Typography, {
-    variant: "caption",
-    sx: {
-      color: textColor,
-      display: 'block',
-      fontFamily: 'monospace'
-    },
-    children: [COORDINATE_LABELS[index], ": ", formatNumber(value)]
-  }, COORDINATE_LABELS[index]))]
-});
-const CameraInfo = ({
-  getCameraState
-}) => {
-  const theme = useTheme();
-  const strings = useStrings();
-  const [cameraState, setCameraState] = useState(null);
-  useEffect(() => {
-    const updateCameraState = () => {
-      const state = getCameraState();
-      if (state) {
-        setCameraState(state);
-      }
-    };
-    updateCameraState();
-    const intervalId = setInterval(updateCameraState, UPDATE_FREQUENCY_MS);
-    return () => clearInterval(intervalId);
-  }, [getCameraState]);
-  if (!cameraState) {
-    return null;
-  }
-  const textColor = theme.palette.TwClrIcnInfo;
-  return /*#__PURE__*/jsxs(Box, {
-    sx: {
-      position: 'absolute',
-      bottom: 16,
-      left: 16,
-      backgroundColor: getRgbaFromHex(theme.palette.TwClrIcnOnBrand, 0.9),
-      padding: 2,
-      borderRadius: 1,
-      pointerEvents: 'auto',
-      minWidth: 220
-    },
-    children: [/*#__PURE__*/jsx(Typography, {
-      variant: "body2",
-      sx: {
-        color: textColor,
-        fontWeight: 'bold',
-        marginBottom: 1
-      },
-      children: strings.CAMERA_INFO
-    }), /*#__PURE__*/jsxs(Box, {
-      sx: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1
-      },
-      children: [/*#__PURE__*/jsx(CoordinateDisplay, {
-        label: strings.CAMERA_POSITION,
-        coordinates: cameraState.position,
-        textColor: textColor
-      }), /*#__PURE__*/jsx(CoordinateDisplay, {
-        label: strings.CAMERA_FOCUS_POINT,
-        coordinates: cameraState.focus,
-        textColor: textColor
-      })]
-    })]
-  });
+const COORDINATE_LABELS = [
+    'X',
+    'Y',
+    'Z'
+];
+const formatNumber = (num)=>num.toFixed(6);
+const CoordinateDisplay = ({ label, coordinates, textColor })=>/*#__PURE__*/ jsxs(Box, {
+        children: [
+            /*#__PURE__*/ jsxs(Typography, {
+                variant: "caption",
+                sx: {
+                    color: textColor,
+                    fontWeight: 'bold'
+                },
+                children: [
+                    label,
+                    ":"
+                ]
+            }),
+            coordinates.map((value, index)=>/*#__PURE__*/ jsxs(Typography, {
+                    variant: "caption",
+                    sx: {
+                        color: textColor,
+                        display: 'block',
+                        fontFamily: 'monospace'
+                    },
+                    children: [
+                        COORDINATE_LABELS[index],
+                        ": ",
+                        formatNumber(value)
+                    ]
+                }, COORDINATE_LABELS[index]))
+        ]
+    });
+const CameraInfo = ({ getCameraState })=>{
+    const theme = useTheme();
+    const strings = useStrings();
+    const [cameraState, setCameraState] = useState(null);
+    useEffect(()=>{
+        const updateCameraState = ()=>{
+            const state = getCameraState();
+            if (state) setCameraState(state);
+        };
+        updateCameraState();
+        const intervalId = setInterval(updateCameraState, UPDATE_FREQUENCY_MS);
+        return ()=>clearInterval(intervalId);
+    }, [
+        getCameraState
+    ]);
+    if (!cameraState) return null;
+    const textColor = theme.palette.TwClrIcnInfo;
+    return /*#__PURE__*/ jsxs(Box, {
+        sx: {
+            position: 'absolute',
+            bottom: 16,
+            left: 16,
+            backgroundColor: getRgbaFromHex(theme.palette.TwClrIcnOnBrand, 0.9),
+            padding: 2,
+            borderRadius: 1,
+            pointerEvents: 'auto',
+            minWidth: 220
+        },
+        children: [
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "body2",
+                sx: {
+                    color: textColor,
+                    fontWeight: 'bold',
+                    marginBottom: 1
+                },
+                children: strings.CAMERA_INFO
+            }),
+            /*#__PURE__*/ jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 1
+                },
+                children: [
+                    /*#__PURE__*/ jsx(CoordinateDisplay, {
+                        label: strings.CAMERA_POSITION,
+                        coordinates: cameraState.position,
+                        textColor: textColor
+                    }),
+                    /*#__PURE__*/ jsx(CoordinateDisplay, {
+                        label: strings.CAMERA_FOCUS_POINT,
+                        coordinates: cameraState.focus,
+                        textColor: textColor
+                    })
+                ]
+            })
+        ]
+    });
 };
-
-export { CameraInfo as default };
+const VirtualWalkthrough_CameraInfo = CameraInfo;
+export default VirtualWalkthrough_CameraInfo;

package/components/VirtualWalkthrough/ControlsInfoPane.js

@@ -1,199 +1,258 @@
-import { useCallback } from 'react';
-import { useTheme, Box, Fade, Typography, Checkbox, Divider } from '@mui/material';
-import { useStrings } from '../../strings/index.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-const ControlsInfoPane = ({
-  visible,
-  paneRef,
-  showAnnotations,
-  onToggleAnnotations,
-  autoRotate,
-  onToggleAutoRotate,
-  isFullScreen = false
-}) => {
-  const theme = useTheme();
-  const strings = useStrings();
-  const handleAnnotationsChange = useCallback(e => {
-    onToggleAnnotations?.(e.target.checked);
-  }, [onToggleAnnotations]);
-  const handleAutoRotateChange = useCallback(e => {
-    onToggleAutoRotate?.(e.target.checked);
-  }, [onToggleAutoRotate]);
-  const controlRowSx = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  };
-  const rightAlignedTextSx = {
-    textAlign: 'right'
-  };
-  const dividerSx = {
-    backgroundColor: theme.palette.TwClrBrdrTertiary
-  };
-  return /*#__PURE__*/jsx(Box, {
-    sx: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      pointerEvents: 'none',
-      display: 'flex',
-      justifyContent: 'flex-end',
-      alignItems: 'flex-start',
-      paddingX: 2,
-      paddingTop: isFullScreen ? 8 : 2,
-      zIndex: 1001
-    },
-    children: /*#__PURE__*/jsx(Fade, {
-      in: visible,
-      timeout: 500,
-      children: /*#__PURE__*/jsx(Box, {
-        ref: paneRef,
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Box, Checkbox, Divider, Fade, Typography, useTheme } from "@mui/material";
+import { useStrings } from "../../strings/index.js";
+const ControlsInfoPane = ({ visible, paneRef, showAnnotations, onToggleAnnotations, autoRotate, onToggleAutoRotate, isFullScreen = false })=>{
+    const theme = useTheme();
+    const strings = useStrings();
+    const handleAnnotationsChange = useCallback((e)=>{
+        onToggleAnnotations?.(e.target.checked);
+    }, [
+        onToggleAnnotations
+    ]);
+    const handleAutoRotateChange = useCallback((e)=>{
+        onToggleAutoRotate?.(e.target.checked);
+    }, [
+        onToggleAutoRotate
+    ]);
+    const controlRowSx = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+    };
+    const rightAlignedTextSx = {
+        textAlign: 'right'
+    };
+    const dividerSx = {
+        backgroundColor: theme.palette.TwClrBrdrTertiary
+    };
+    return /*#__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: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            pointerEvents: 'none',
             display: 'flex',
-            flexDirection: 'column',
-            gap: 1
-          },
-          children: [/*#__PURE__*/jsx(Typography, {
-            sx: {
-              fontWeight: 600
-            },
-            children: strings.CONTROLS
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.ANNOTATIONS
-            }), /*#__PURE__*/jsx(Checkbox, {
-              checked: showAnnotations ?? true,
-              onChange: handleAnnotationsChange,
-              sx: {
-                color: theme.palette.primary.main
-              }
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.AUTO_ROTATE
-            }), /*#__PURE__*/jsx(Checkbox, {
-              checked: autoRotate ?? true,
-              onChange: handleAutoRotateChange,
-              sx: {
-                color: theme.palette.primary.main
-              }
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.ORBIT
-            }), /*#__PURE__*/jsxs(Box, {
-              sx: rightAlignedTextSx,
-              children: [/*#__PURE__*/jsx(Typography, {
-                children: strings.LEFT_MOUSE
-              }), /*#__PURE__*/jsx(Typography, {
-                children: strings.TOUCH_DRAG
-              })]
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.PAN
-            }), /*#__PURE__*/jsxs(Box, {
-              sx: rightAlignedTextSx,
-              children: [/*#__PURE__*/jsx(Typography, {
-                children: strings.MIDDLE_MOUSE
-              }), /*#__PURE__*/jsx(Typography, {
-                children: strings.SWIPE
-              })]
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.LOOK
-            }), /*#__PURE__*/jsx(Typography, {
-              children: strings.RIGHT_MOUSE
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.ZOOM
-            }), /*#__PURE__*/jsxs(Box, {
-              sx: rightAlignedTextSx,
-              children: [/*#__PURE__*/jsx(Typography, {
-                children: strings.MOUSE_WHEEL
-              }), /*#__PURE__*/jsx(Typography, {
-                children: strings.PINCH
-              })]
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.FLY
-            }), /*#__PURE__*/jsxs(Box, {
-              sx: rightAlignedTextSx,
-              children: [/*#__PURE__*/jsx(Typography, {
-                children: "WASD"
-              }), /*#__PURE__*/jsx(Typography, {
-                children: strings.ARROW_KEYS
-              })]
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.FLY_FASTER
-            }), /*#__PURE__*/jsx(Typography, {
-              children: strings.SHIFT
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.FLY_SLOWER
-            }), /*#__PURE__*/jsx(Typography, {
-              children: strings.CTRL
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          }), /*#__PURE__*/jsxs(Box, {
-            sx: controlRowSx,
-            children: [/*#__PURE__*/jsx(Typography, {
-              children: strings.RESET_CAMERA
-            }), /*#__PURE__*/jsx(Typography, {
-              children: "R"
-            })]
-          }), /*#__PURE__*/jsx(Divider, {
-            sx: dividerSx
-          })]
+            justifyContent: 'flex-end',
+            alignItems: 'flex-start',
+            paddingX: 2,
+            paddingTop: isFullScreen ? 8 : 2,
+            zIndex: 1001
+        },
+        children: /*#__PURE__*/ jsx(Fade, {
+            in: visible,
+            timeout: 500,
+            children: /*#__PURE__*/ jsx(Box, {
+                ref: paneRef,
+                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: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Typography, {
+                            sx: {
+                                fontWeight: 600
+                            },
+                            children: strings.CONTROLS
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.ANNOTATIONS
+                                }),
+                                /*#__PURE__*/ jsx(Checkbox, {
+                                    checked: showAnnotations ?? true,
+                                    onChange: handleAnnotationsChange,
+                                    sx: {
+                                        color: theme.palette.primary.main
+                                    }
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.AUTO_ROTATE
+                                }),
+                                /*#__PURE__*/ jsx(Checkbox, {
+                                    checked: autoRotate ?? true,
+                                    onChange: handleAutoRotateChange,
+                                    sx: {
+                                        color: theme.palette.primary.main
+                                    }
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.ORBIT
+                                }),
+                                /*#__PURE__*/ jsxs(Box, {
+                                    sx: rightAlignedTextSx,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            children: strings.LEFT_MOUSE
+                                        }),
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            children: strings.TOUCH_DRAG
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.PAN
+                                }),
+                                /*#__PURE__*/ jsxs(Box, {
+                                    sx: rightAlignedTextSx,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            children: strings.MIDDLE_MOUSE
+                                        }),
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            children: strings.SWIPE
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.LOOK
+                                }),
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.RIGHT_MOUSE
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.ZOOM
+                                }),
+                                /*#__PURE__*/ jsxs(Box, {
+                                    sx: rightAlignedTextSx,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            children: strings.MOUSE_WHEEL
+                                        }),
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            children: strings.PINCH
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.FLY
+                                }),
+                                /*#__PURE__*/ jsxs(Box, {
+                                    sx: rightAlignedTextSx,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            children: "WASD"
+                                        }),
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            children: strings.ARROW_KEYS
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.FLY_FASTER
+                                }),
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.SHIFT
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.FLY_SLOWER
+                                }),
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.CTRL
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        }),
+                        /*#__PURE__*/ jsxs(Box, {
+                            sx: controlRowSx,
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: strings.RESET_CAMERA
+                                }),
+                                /*#__PURE__*/ jsx(Typography, {
+                                    children: "R"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Divider, {
+                            sx: dividerSx
+                        })
+                    ]
+                })
+            })
         })
-      })
-    })
-  });
+    });
 };
-
-export { ControlsInfoPane as default };
+const VirtualWalkthrough_ControlsInfoPane = ControlsInfoPane;
+export default VirtualWalkthrough_ControlsInfoPane;