@needle-tools/engine/lib/engine-components/DeviceFlag.js

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { serializable } from "../engine/engine_serialization_decorator.js";
import { DeviceUtilities } from "../engine/engine_utils.js";
import { Behaviour, GameObject } from "./Component.js";
export var DeviceType;
(function (DeviceType) {
    DeviceType[DeviceType["Never"] = 0] = "Never";
    DeviceType[DeviceType["Desktop"] = 1] = "Desktop";
    DeviceType[DeviceType["Mobile"] = 2] = "Mobile";
})(DeviceType || (DeviceType = {}));
/**
 * DeviceFlag shows or hides GameObjects based on device type.
 * Use for responsive 3D content - show different UI, models, or interactions
 * depending on mobile vs desktop.
 *
 * **Device types:**
 * - `Desktop` - Traditional computers with mouse/keyboard
 * - `Mobile` - Phones and tablets with touch input
 * - Combine with bitwise OR for multiple: `Desktop | Mobile`
 *
 * @example Show only on desktop
 * ```ts
 * const flag = myObject.addComponent(DeviceFlag);
 * flag.visibleOn = DeviceType.Desktop;
 * ```
 *
 * @example Show on both mobile and desktop
 * ```ts
 * flag.visibleOn = DeviceType.Desktop | DeviceType.Mobile;
 * ```
 *
 * @summary Show or hide GameObject based on device type
 * @category Utilities
 * @group Components
 * @see {@link DeviceType} for device options
 * @see {@link XRFlag} for XR-based visibility
 */
export class DeviceFlag extends Behaviour {
    visibleOn;
    onEnable() {
        this.apply();
    }
    apply() {
        if (!this.test()) {
            GameObject.setActive(this.gameObject, false);
        }
    }
    test() {
        if (this.visibleOn < 0)
            return true;
        if (DeviceUtilities.isMobileDevice()) {
            return (this.visibleOn & (DeviceType.Mobile)) !== 0;
        }
        const allowDesktop = (this.visibleOn & (DeviceType.Desktop)) !== 0;
        return allowDesktop;
    }
}
__decorate([
    serializable()
], DeviceFlag.prototype, "visibleOn", void 0);
/**@deprecated use isMobileDevice() */
function isMobile() {
    return DeviceUtilities.isMobileDevice();
}
;
//# sourceMappingURL=DeviceFlag.js.map