Add xr-active-switch.ts

Author: NSTCG

index.js

@@ -24,5 +24,6 @@ export * from './vrm.js';
 export * from './wasd-controls.js';
 export * from './input-profile.js';
 export * from './orbital-camera.js';
+export * from './xr-active-switch.js';
 
 export * from '@wonderlandengine/spatial-audio';

xr-active-switch.ts

@@ -0,0 +1,116 @@
+import {Component, Object3D} from '@wonderlandengine/api';
+import {property} from '@wonderlandengine/api/decorators.js';
+
+export enum SCOPE {
+    ThisObject = 'this object',
+    Children = 'children only',
+    ThisObjectAndChildren = 'this object & children',
+}
+
+export enum ACTION {
+    None = 'none',
+    Activate = 'activate',
+    Deactivate = 'deactivate',
+    Toggle = 'toggle',
+}
+
+/**
+ * XR Active Switch Component for controlling component activation states
+ * based on XR session status.
+ *
+ * This component allows toggling, activating, deactivating, or keeping the
+ * current state of components when entering or exiting XR sessions.
+ *
+ * The scope of affected components can be limited to the current object,
+ * its children, or both.
+ *
+ * Use this component to manage visibility, interactivity, or other properties
+ * that depend on XR session states.
+ *
+ */
+export class XrActiveSwitch extends Component {
+    static TypeName = 'xr-active-switch';
+
+    /** Action to perform when XR session starts */
+    @property.enum(Object.values(ACTION))
+    ifInXR!: number;
+
+    /** Action to perform when XR session ends */
+    @property.enum(Object.values(ACTION))
+    ifNotInXR!: number;
+
+    /** Scope of elements to affect */
+    @property.enum(Object.values(SCOPE))
+    scope!: number;
+
+    private components: Component[] = [];
+
+    start() {
+        // Initial state setup
+        this.applyAction(this.engine.xr?.session ? this.ifInXR : this.ifNotInXR);
+
+        // Bind event handlers
+        this.engine.onXRSessionStart.add(this.onSessionStart);
+        this.engine.onXRSessionEnd.add(this.onSessionEnd);
+    }
+
+    onActivate() {
+        this.engine.onXRSessionStart.add(this.onSessionStart);
+        this.engine.onXRSessionEnd.add(this.onSessionEnd);
+    }
+
+    onDeactivate() {
+        this.engine.onXRSessionStart.remove(this.onSessionStart);
+        this.engine.onXRSessionEnd.remove(this.onSessionEnd);
+    }
+
+    private collectComponents() {
+        const mode = Object.values(SCOPE)[this.scope];
+
+        // Handle current object
+        if (mode === SCOPE.ThisObject || mode === SCOPE.ThisObjectAndChildren) {
+            this.object
+                .getComponents()
+                .filter((c) => c.type !== XrActiveSwitch.TypeName)
+                .forEach((c) => this.components.push(c));
+        }
+
+        // Handle children
+        if (mode === SCOPE.Children || mode === SCOPE.ThisObjectAndChildren) {
+            this.processChildren(this.object);
+        }
+    }
+
+    private processChildren(obj: Object3D) {
+        for (const child of obj.children) {
+            child
+                .getComponents()
+                .filter((c) => c.type !== XrActiveSwitch.TypeName)
+                .forEach((c) => this.components.push(c));
+            this.processChildren(child); // Recurse through all descendants
+        }
+    }
+
+    private applyAction(action_index: number) {
+        const action = Object.values(ACTION)[action_index];
+        this.components = [];
+        this.collectComponents();
+        for (const comp of this.components) {
+            if (action === ACTION.Activate) {
+                comp.active = true;
+            } else if (action === ACTION.Deactivate) {
+                comp.active = false;
+            } else if (action === ACTION.Toggle) {
+                comp.active = !comp.active;
+            }
+        }
+    }
+
+    private onSessionStart = () => {
+        this.applyAction(this.ifInXR);
+    };
+
+    private onSessionEnd = () => {
+        this.applyAction(this.ifNotInXR);
+    };
+}