@iwer/devui 1.1.0 → 1.1.1

package/build/iwer-devui.js

@@ -5068,6 +5068,11 @@
 	  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',
@@ -6600,13 +6605,32 @@
 	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',
@@ -6622,6 +6646,8 @@
 	                                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');
@@ -6631,7 +6657,7 @@
 	                                    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: () => {
@@ -6674,7 +6700,18 @@
 	                            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 `
@@ -42619,7 +42656,7 @@ void main() {
 	    }
 	}
 
-	const VERSION = "1.1.0";
+	const VERSION = "1.1.1";
 
 	var client = {};