@iwer/devui 0.2.1 → 1.0.1

package/lib/index.js

@@ -5,66 +5,60 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { DEFAULT_KEYMAP, KeyMapMenu } from './components/mapper.js';
-import { createContext, useContext, useEffect, useState } from 'react';
+import { HeaderButton, HeaderButtonsContainer } from './components/styled.js';
+import React, { useEffect, useState } from 'react';
 import { ControlsUI } from './components/controls.js';
-import { FOVMenu } from './components/fov.js';
 import { HeaderUI } from './components/header.js';
+import { HeadsetUI } from './components/headset.js';
+import { IWERIcon } from './components/icons.js';
 import { InputLayer } from './scene.js';
+import { StyleSheetManager } from 'styled-components';
+import { VERSION } from './version.js';
 import { createRoot } from 'react-dom/client';
-const PRIVATE = Symbol('@@iwer/devui/devui');
-const DefaultConfig = {
-    buttonPressDuration: 250,
-};
-const DevUIConfigContext = createContext(DefaultConfig);
-export const useDevUIConfig = () => {
-    return useContext(DevUIConfigContext);
-};
 export class DevUI {
-    constructor(xrDevice, options = {}) {
+    constructor(xrDevice) {
+        this.version = VERSION;
         xrDevice.ipd = 0;
-        const canvasContainer = xrDevice.canvasContainer;
-        const devuiContainer = document.createElement('div');
-        devuiContainer.style.position = 'fixed';
-        devuiContainer.style.width = '100%';
-        devuiContainer.style.height = '100%';
-        devuiContainer.style.top = '0';
-        devuiContainer.style.left = '0';
-        devuiContainer.style.display = 'flex';
-        devuiContainer.style.justifyContent = 'center';
-        devuiContainer.style.alignItems = 'center';
-        devuiContainer.style.overflow = 'hidden';
-        devuiContainer.style.pointerEvents = 'none';
-        devuiContainer.style.zIndex = '3';
-        canvasContainer.appendChild(devuiContainer);
-        const inputLayer = new InputLayer(xrDevice);
-        const inputLayerElement = inputLayer.domElement;
-        inputLayerElement.style.position = 'fixed';
-        inputLayerElement.style.width = '100%';
-        inputLayerElement.style.height = '100%';
-        inputLayerElement.style.top = '0';
-        inputLayerElement.style.left = '0';
-        inputLayerElement.style.zIndex = '2';
-        canvasContainer.appendChild(inputLayerElement);
-        const root = createRoot(devuiContainer);
-        root.render(_jsx(Overlay, { xrDevice: xrDevice, inputLayer: inputLayer, options: options }));
-        this[PRIVATE] = {
-            xrDevice,
-            inputLayer,
+        this.devUIContainer = document.createElement('div');
+        this.devUIContainer.style.position = 'fixed';
+        this.devUIContainer.style.width = '100vw';
+        this.devUIContainer.style.height = '100vh';
+        this.devUIContainer.style.top = '50vh';
+        this.devUIContainer.style.left = '50vw';
+        this.devUIContainer.style.transform = 'translate(-50%, -50%)';
+        this.devUIContainer.style.pointerEvents = 'none';
+        const devUIShadowRoot = this.devUIContainer.attachShadow({
+            mode: 'open',
+        });
+        this.inputLayer = new InputLayer(xrDevice);
+        const root = createRoot(devUIShadowRoot);
+        root.render(_jsx(Overlay, { xrDevice: xrDevice, inputLayer: this.inputLayer, shadowRoot: devUIShadowRoot }));
+        const installOfferSessionUI = () => {
+            const offerSessionUIContainer = document.createElement('div');
+            document.body.appendChild(offerSessionUIContainer);
+            const offerSessionShadowRoot = offerSessionUIContainer.attachShadow({
+                mode: 'open',
+            });
+            const offerSessionRoot = createRoot(offerSessionShadowRoot);
+            offerSessionRoot.render(_jsx(OfferSessionUI, { xrDevice: xrDevice, shadowRoot: offerSessionShadowRoot }));
         };
+        if (document.body) {
+            installOfferSessionUI();
+        }
+        else {
+            window.onload = installOfferSessionUI;
+        }
+    }
+    render(time) {
+        this.inputLayer.renderScene(time);
+    }
+    get devUICanvas() {
+        return this.inputLayer.domElement;
     }
 }
-const Overlay = ({ xrDevice, inputLayer, options }) => {
+const Overlay = ({ xrDevice, inputLayer, shadowRoot, }) => {
     const [pointerLocked, setPointerLocked] = useState(false);
-    const [keyMap, setKeyMap] = useState(DEFAULT_KEYMAP);
-    const [keyMapOpen, setKeyMapOpen] = useState(false);
-    const [fovSettingOpen, setFovSettingOpen] = useState(false);
-    const [devuiConfig, setConfig] = useState(DefaultConfig);
     useEffect(() => {
-        var _a;
-        setConfig({
-            buttonPressDuration: (_a = options.buttonPressDuration) !== null && _a !== void 0 ? _a : DefaultConfig.buttonPressDuration,
-        });
         const pointerLockChangeHandler = () => {
             const locked = document.pointerLockElement ||
                 // @ts-ignore
@@ -82,12 +76,40 @@ const Overlay = ({ xrDevice, inputLayer, options }) => {
             document.removeEventListener('webkitpointerlockchange', pointerLockChangeHandler, false);
         };
     }, []);
-    return (_jsx(DevUIConfigContext.Provider, { value: devuiConfig, children: _jsxs("div", { style: {
+    return (_jsx(StyleSheetManager, { target: shadowRoot, disableCSSOMInjection: true, children: _jsxs("div", { style: {
                 width: '100vw',
                 height: '100vh',
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'space-between',
-            }, children: [_jsx(HeaderUI, { xrDevice: xrDevice, inputLayer: inputLayer, keyMapOpen: keyMapOpen, setKeyMapOpen: setKeyMapOpen, fovSettingOpen: fovSettingOpen, setFovSettingOpen: setFovSettingOpen }), keyMapOpen && _jsx(KeyMapMenu, { keyMap: keyMap, setKeyMap: setKeyMap }), fovSettingOpen && (_jsx(FOVMenu, { xrDevice: xrDevice, inputLayer: inputLayer })), _jsx(ControlsUI, { xrDevice: xrDevice, keyMap: keyMap, pointerLocked: pointerLocked })] }) }));
+                pointerEvents: 'none',
+            }, children: [_jsx(HeaderUI, { xrDevice: xrDevice, inputLayer: inputLayer }), _jsx(HeadsetUI, { xrDevice: xrDevice, inputLayer: inputLayer, pointerLocked: pointerLocked }), _jsx(ControlsUI, { xrDevice: xrDevice, inputLayer: inputLayer, pointerLocked: pointerLocked })] }) }));
+};
+const OfferSessionUI = ({ xrDevice, shadowRoot, }) => {
+    const [showOffer, setShowOffer] = React.useState(xrDevice.sessionOffered && !xrDevice.activeSession);
+    React.useEffect(() => {
+        setInterval(() => {
+            setShowOffer(xrDevice.sessionOffered && !xrDevice.activeSession);
+        }, 1000);
+    }, []);
+    return (_jsx(StyleSheetManager, { target: shadowRoot, disableCSSOMInjection: true, children: _jsxs(HeaderButtonsContainer, { style: {
+                zIndex: 899,
+                position: 'fixed',
+                top: showOffer ? '8px' : '-30px',
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyItems: 'space-between',
+                left: '50vw',
+                transform: 'translateX(-50%)',
+                transition: 'all 0.2s ease-in-out',
+                paddingLeft: '5px',
+                gap: '3px',
+            }, children: [_jsx(IWERIcon, { size: 24 }), _jsx(HeaderButton, { onClick: () => {
+                        xrDevice.grantOfferedSession();
+                    }, style: {
+                        fontSize: '16px',
+                    }, children: "Enter XR" })] }) }));
 };
+export { VERSION };
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/lib/package.json

@@ -0,0 +1,55 @@
+{
+    "name": "@iwer/devui",
+    "version": "0.2.1",
+    "description": "Dev UI for IWER",
+    "type": "module",
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "files": [
+        "build",
+        "lib"
+    ],
+    "scripts": {
+        "build": "tsc && rollup -c"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/meta-quest/immersive-web-emulation-runtime.git"
+    },
+    "keywords": [],
+    "author": "Felix Zhang <fe1ix@meta.com>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/meta-quest/immersive-web-emulation-runtime/issues"
+    },
+    "homepage": "https://github.com/meta-quest/immersive-web-emulation-runtime#readme",
+    "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "6.6.0",
+        "@fortawesome/free-solid-svg-icons": "6.6.0",
+        "@fortawesome/react-fontawesome": "0.2.2",
+        "@pmndrs/handle": "^6.5.2",
+        "@pmndrs/pointer-events": "^6.5.2",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "styled-components": "6.1.13",
+        "three": "0.172.0",
+        "zustand": "^5.0.3"
+    },
+    "peerDependencies": {
+        "iwer": "^1.0.3"
+    },
+    "devDependencies": {
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^28.0.1",
+        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-replace": "^6.0.1",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "@types/styled-components": "^5.1.34",
+        "@types/three": "^0.172.0",
+        "rollup": "^4.24.3",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "typescript": "^5.6.3"
+    }
+}

package/lib/scene.d.ts

@@ -4,56 +4,39 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Group, Mesh, PerspectiveCamera, Quaternion, Scene, Vector3, WebGLRenderer } from 'three';
-import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
+import { Vector3 } from 'three';
+import { TransformHandles } from '@pmndrs/handle';
 import { XRDevice } from 'iwer';
-declare const PRIVATE: unique symbol;
+export declare const PRIVATE: unique symbol;
+type Handedness = 'left' | 'right';
 export declare class InputLayer {
-    [PRIVATE]: {
-        canvasContainer: HTMLDivElement;
-        renderer: WebGLRenderer;
-        scene: Scene;
-        camera: PerspectiveCamera;
-        playerRig: Group;
-        cameraRig: Group;
-        resizeObserver: ResizeObserver;
-        xrDevice: XRDevice;
-        controllerIndicators: {
-            [key in 'left' | 'right']: Mesh;
-        };
-        transformControls: {
-            [key in 'left' | 'right']: TransformControls;
-        };
-        isPointerLocked: boolean;
-        vec3: Vector3;
-        quat: Quaternion;
-        mouseMoveHandler: (event: MouseEvent) => void;
-        headsetDefaultPosition: Vector3;
-        headsetDefaultQuaternion: Quaternion;
-        controllerDefaultPositions: {
-            [key in 'left' | 'right']: Vector3;
-        };
-        controllerDefaultQuaternions: {
-            [key in 'left' | 'right']: Quaternion;
-        };
-        keyState: {
-            [key: string]: boolean;
-        };
-        movePlayerRig: () => void;
-        moveInterval: number | null;
-    };
+    private xrDevice;
+    transformHandles: Map<Handedness, TransformHandles>;
+    combinedCameraPosition: Vector3;
+    private renderer;
+    private scene;
+    private camera;
+    private playerRig;
+    private cameraRig;
+    private isPointerLocked;
+    private vec3;
+    private quat;
+    private mouseMoveHandler;
+    private headsetDefaultPosition;
+    private headsetDefaultQuaternion;
+    private keyState;
+    private forwardHtmlEvents;
+    private lastTime;
     constructor(xrDevice: XRDevice);
     lockPointer(): void;
     pointerLockChangeHandler(): void;
     keyDownHandler(event: KeyboardEvent): void;
     keyUpHandler(event: KeyboardEvent): void;
-    movePlayerRig(): void;
-    syncFovy(): void;
+    movePlayerRig(delta: number): void;
     resetDeviceTransforms(): void;
     syncDeviceTransforms(): void;
-    renderScene(): void;
+    renderScene(time: number): void;
     get domElement(): HTMLCanvasElement;
-    resize(): void;
     dispose(): void;
 }
 export {};

package/lib/scene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../src/scene.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAGN,KAAK,EACL,IAAI,EAEJ,iBAAiB,EACjB,UAAU,EAEV,KAAK,EACL,OAAO,EACP,aAAa,EACb,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAEhC,QAAA,MAAM,OAAO,eAAqC,CAAC;AAGnD,qBAAa,UAAU;IACtB,CAAC,OAAO,CAAC,EAAE;QACV,eAAe,EAAE,cAAc,CAAC;QAChC,QAAQ,EAAE,aAAa,CAAC;QACxB,KAAK,EAAE,KAAK,CAAC;QACb,MAAM,EAAE,iBAAiB,CAAC;QAC1B,SAAS,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,KAAK,CAAC;QACjB,cAAc,EAAE,cAAc,CAAC;QAC/B,QAAQ,EAAE,QAAQ,CAAC;QACnB,oBAAoB,EAAE;aAAG,GAAG,IAAI,MAAM,GAAG,OAAO,GAAG,IAAI;SAAE,CAAC;QAC1D,iBAAiB,EAAE;aAAG,GAAG,IAAI,MAAM,GAAG,OAAO,GAAG,iBAAiB;SAAE,CAAC;QACpE,eAAe,EAAE,OAAO,CAAC;QACzB,IAAI,EAAE,OAAO,CAAC;QACd,IAAI,EAAE,UAAU,CAAC;QACjB,gBAAgB,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;QAC9C,sBAAsB,EAAE,OAAO,CAAC;QAChC,wBAAwB,EAAE,UAAU,CAAC;QACrC,0BAA0B,EAAE;aAAG,GAAG,IAAI,MAAM,GAAG,OAAO,GAAG,OAAO;SAAE,CAAC;QACnE,4BAA4B,EAAE;aAAG,GAAG,IAAI,MAAM,GAAG,OAAO,GAAG,UAAU;SAAE,CAAC;QACxE,QAAQ,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;SAAE,CAAC;QACrC,aAAa,EAAE,MAAM,IAAI,CAAC;QAC1B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;KAC5B,CAAC;gBAEU,QAAQ,EAAE,QAAQ;IAqL9B,WAAW;IAUX,wBAAwB;IAmCxB,cAAc,CAAC,KAAK,EAAE,aAAa;IA2BnC,YAAY,CAAC,KAAK,EAAE,aAAa;IAkBjC,aAAa;IAkBb,QAAQ;IAKR,qBAAqB;IAsBrB,oBAAoB;IAsBpB,WAAW;IAKX,IAAI,UAAU,sBAEb;IAED,MAAM;IASN,OAAO;CA8BP"}
+{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../src/scene.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EASN,OAAO,EAEP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAwB,MAAM,gBAAgB,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAGhC,eAAO,MAAM,OAAO,eAAqC,CAAC;AAG1D,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnC,qBAAa,UAAU;IA2BV,OAAO,CAAC,QAAQ;IA1BrB,gBAAgB,EAAE,GAAG,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;IACpD,sBAAsB,EAAE,OAAO,CAAiB;IAEvD,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,IAAI,CAA0B;IACtC,OAAO,CAAC,IAAI,CAAgC;IAC5C,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,sBAAsB,CAAU;IACxC,OAAO,CAAC,wBAAwB,CAAa;IAC7C,OAAO,CAAC,QAAQ,CAQd;IACF,OAAO,CAAC,iBAAiB,CAAa;IACtC,OAAO,CAAC,QAAQ,CAAa;gBAET,QAAQ,EAAE,QAAQ;IAwHtC,WAAW;IAUX,wBAAwB;IAqBxB,cAAc,CAAC,KAAK,EAAE,aAAa;IAgBnC,YAAY,CAAC,KAAK,EAAE,aAAa;IAQjC,aAAa,CAAC,KAAK,EAAE,MAAM;IAgB3B,qBAAqB;IAgBrB,oBAAoB;IAcpB,WAAW,CAAC,IAAI,EAAE,MAAM;IAkDxB,IAAI,UAAU,sBAEb;IAED,OAAO;CAyBP"}