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

package/components/VirtualWalkthrough/CameraInfo.js

@@ -1,102 +1,91 @@
-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";
+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';
+
 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
+      })]
+    })]
+  });
 };
-const VirtualWalkthrough_CameraInfo = CameraInfo;
-export default VirtualWalkthrough_CameraInfo;
+
+export { CameraInfo as default };

package/components/VirtualWalkthrough/ControlsInfoPane.js

@@ -1,258 +1,199 @@
-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, {
+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,
         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
+          backgroundColor: theme.palette.grey[900],
+          color: theme.palette.common.white,
+          borderRadius: 2,
+          padding: 3,
+          minWidth: 320,
+          maxWidth: 400,
+          pointerEvents: 'auto'
         },
-        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
-                        })
-                    ]
-                })
-            })
+        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
+          })]
         })
-    });
+      })
+    })
+  });
 };
-const VirtualWalkthrough_ControlsInfoPane = ControlsInfoPane;
-export default VirtualWalkthrough_ControlsInfoPane;
+
+export { ControlsInfoPane as default };