@iwer/devui 1.1.0 → 1.1.1

package/build/iwer-devui.module.js

@@ -5062,6 +5062,11 @@ const faCirclePlay = {
   iconName: 'circle-play',
   icon: [512, 512, [61469, "play-circle"], "f144", "M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"]
 };
+const faPersonShelter = {
+  prefix: 'fas',
+  iconName: 'person-shelter',
+  icon: [512, 512, [], "e54f", "M271.9 4.2c-9.8-5.6-21.9-5.6-31.8 0l-224 128C6.2 137.9 0 148.5 0 160L0 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-301.4L256 68.9 448 178.6 448 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-320c0-11.5-6.2-22.1-16.1-27.8l-224-128zM256 208a40 40 0 1 0 0-80 40 40 0 1 0 0 80zm-8 280l0-88 16 0 0 88c0 13.3 10.7 24 24 24s24-10.7 24-24l0-174.5 26.9 49.9c6.3 11.7 20.8 16 32.5 9.8s16-20.8 9.8-32.5l-37.9-70.3c-15.3-28.5-45.1-46.3-77.5-46.3l-19.5 0c-32.4 0-62.1 17.8-77.5 46.3l-37.9 70.3c-6.3 11.7-1.9 26.2 9.8 32.5s26.2 1.9 32.5-9.8L200 313.5 200 488c0 13.3 10.7 24 24 24s24-10.7 24-24z"]
+};
 const faHandScissors = {
   prefix: 'fas',
   iconName: 'hand-scissors',
@@ -6594,13 +6599,32 @@ const VersionTableCol2 = dt.td `
 	color: ${Colors.textGrey};
 	padding: 0;
 `;
+const envNames = [
+    'meeting_room',
+    'living_room',
+    'music_room',
+    'office_large',
+    'office_small',
+];
+const useHeaderStateStore = create((set) => ({
+    infoPanelOpen: false,
+    envDropDownOpen: false,
+    setInfoPanelOpen: (open) => set(() => ({ infoPanelOpen: open })),
+    setEnvDropDownOpen: (open) => set(() => ({ envDropDownOpen: open })),
+}));
+function underscoreToTitleCase(str) {
+    return str
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
 const HeaderUI = ({ xrDevice, inputLayer }) => {
     var _a, _b, _c;
     const [planesVisible, setPlanesVisible] = React.useState(Boolean((_a = xrDevice.sem) === null || _a === void 0 ? void 0 : _a.planesVisible));
     const [boxesVisible, setBoxesVisible] = React.useState(Boolean((_b = xrDevice.sem) === null || _b === void 0 ? void 0 : _b.boundingBoxesVisible));
     const [meshesVisible, setMeshesVisible] = React.useState(Boolean((_c = xrDevice.sem) === null || _c === void 0 ? void 0 : _c.meshesVisible));
-    const [infoPanelOpen, setInfoPanelOpen] = React.useState(false);
     const { inputMode, setInputMode } = useInputModeStore();
+    const { infoPanelOpen, setInfoPanelOpen, envDropDownOpen, setEnvDropDownOpen, } = useHeaderStateStore();
     return (jsxRuntimeExports.jsxs("div", { style: {
             display: 'flex',
             justifyContent: 'center',
@@ -6616,6 +6640,8 @@ const HeaderUI = ({ xrDevice, inputLayer }) => {
                                 inputLayer.resetDeviceTransforms();
                             }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faRotateLeft, "$size": 16 }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to activate play mode", onClick: () => {
                                 inputLayer.lockPointer();
+                                setEnvDropDownOpen(false);
+                                setInfoPanelOpen(false);
                             }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faCirclePlay, "$size": 16 }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle input mode", onClick: () => {
                                 if (inputMode === 'controller') {
                                     setInputMode('hand');
@@ -6625,7 +6651,7 @@ const HeaderUI = ({ xrDevice, inputLayer }) => {
                                     setInputMode('controller');
                                     xrDevice.primaryInputMode = 'controller';
                                 }
-                            }, children: jsxRuntimeExports.jsx(FAIcon, { icon: inputMode === 'controller' ? faGamepad : faHand, "$size": 16 }) }), xrDevice.sem && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionBreak, { "$horizontal": false }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle visibility of planes", onClick: () => {
+                            }, children: jsxRuntimeExports.jsx(FAIcon, { icon: inputMode === 'controller' ? faGamepad : faHand, "$size": 16 }) }), xrDevice.sem && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionBreak, { "$horizontal": false }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to select/change emulated environment", onClick: () => setEnvDropDownOpen(!envDropDownOpen), children: jsxRuntimeExports.jsx(FAIcon, { icon: faPersonShelter, "$size": 16 }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle visibility of planes", onClick: () => {
                                         xrDevice.sem.planesVisible = !planesVisible;
                                         setPlanesVisible(!planesVisible);
                                     }, children: jsxRuntimeExports.jsx(PlaneIcon, { size: 16, color: planesVisible ? Colors.textWhite : Colors.textGrey }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle visibility of bounding boxes", onClick: () => {
@@ -6668,7 +6694,18 @@ const HeaderUI = ({ xrDevice, inputLayer }) => {
                             borderRadius: ControlButtonStyles.radiusSolo,
                         }, onClick: () => {
                             window.open('https://github.com/meta-quest/immersive-web-emulation-runtime', '_blank');
-                        }, children: "View Source on GitHub" })] }))] }));
+                        }, children: "View Source on GitHub" })] })), envDropDownOpen && (jsxRuntimeExports.jsx(ControlPanel, { style: {
+                    position: 'absolute',
+                    top: '40px',
+                }, children: envNames.map((name) => (jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx(HeaderButton, { style: {
+                            fontSize: '12px',
+                            width: '100%',
+                            justifyContent: 'start',
+                            borderRadius: '8px',
+                        }, onClick: () => {
+                            // @ts-ignore
+                            xrDevice.sem.loadDefaultEnvironment(name);
+                        }, children: underscoreToTitleCase(name) }) }, name))) }))] }));
 };
 
 const HeadsetOptionContainer = dt.div `
@@ -42613,7 +42650,7 @@ class InputLayer {
     }
 }
 
-const VERSION = "1.1.0";
+const VERSION = "1.1.1";
 
 var client = {};