@needle-tools/engine 5.0.0-next.40cc839 → 5.1.0-experimental.0

package/lib/engine-components/ui/BaseUIComponent_Uikit.js

@@ -0,0 +1,114 @@
+import { Container } from "@pmndrs/uikit";
+import { Behaviour, GameObject } from "../Component.js";
+import { Canvas } from "./Canvas.js";
+/**
+ * Base class for all uikit-based UI components in needle-engine.
+ * This provides the foundation for creating UI elements using pmndrs/uikit.
+ *
+ * @category User Interface
+ * @group Components
+ */
+export class BaseUIComponent extends Behaviour {
+    /** The underlying uikit Container */
+    uikitElement = null;
+    _canvas = undefined;
+    _parentUikitComponent = undefined;
+    /**
+     * Get the parent Canvas component
+     */
+    get canvas() {
+        if (this._canvas === undefined) {
+            this._canvas = GameObject.getComponentInParent(this.gameObject, Canvas);
+        }
+        return this._canvas;
+    }
+    /**
+     * Get the parent uikit component
+     */
+    get parentUikitComponent() {
+        if (this._parentUikitComponent === undefined) {
+            const searchFrom = this.gameObject.parent;
+            this._parentUikitComponent = searchFrom ? GameObject.getComponentInParent(searchFrom, BaseUIComponent) : null;
+        }
+        return this._parentUikitComponent;
+    }
+    awake() {
+        // Reset cached references
+        this._canvas = undefined;
+        this._parentUikitComponent = undefined;
+    }
+    onEnable() {
+        super.onEnable();
+        this.createUikitElement();
+        this.addToParent();
+    }
+    onDisable() {
+        super.onDisable();
+        this.removeFromParent();
+    }
+    /**
+     * Create the uikit element for this component.
+     * Override this to create custom uikit elements.
+     */
+    createUikitElement() {
+        if (this.uikitElement)
+            return;
+        const properties = this.getUikitProperties();
+        this.uikitElement = new Container(properties);
+        this.uikitElement.name = this.name || this.constructor.name;
+    }
+    /**
+     * Get the properties to pass to the uikit element constructor.
+     * Override this to customize the uikit element properties.
+     */
+    getUikitProperties() {
+        return {};
+    }
+    /**
+     * Update the uikit element properties.
+     * Call this after changing properties to apply them to the uikit element.
+     */
+    updateUikitProperties(properties) {
+        if (this.uikitElement) {
+            this.uikitElement.setProperties(properties);
+        }
+    }
+    /**
+     * Add this component's uikit element to its parent
+     */
+    addToParent() {
+        if (!this.uikitElement)
+            return;
+        // Try to find parent uikit component
+        const parent = this.parentUikitComponent;
+        if (parent?.uikitElement) {
+            parent.uikitElement.add(this.uikitElement);
+            return;
+        }
+        // Try to add to canvas root
+        const canvas = this.canvas;
+        if (canvas?.uikitRoot) {
+            canvas.uikitRoot.add(this.uikitElement);
+            return;
+        }
+        console.warn(`BaseUIComponent "${this.name}": No parent uikit element or canvas found. Make sure this component is a child of a Canvas.`);
+    }
+    /**
+     * Remove this component's uikit element from its parent
+     */
+    removeFromParent() {
+        if (this.uikitElement) {
+            this.uikitElement.removeFromParent();
+        }
+    }
+    /**
+     * Called when the component is destroyed
+     */
+    onDestroy() {
+        if (this.uikitElement) {
+            this.uikitElement.removeFromParent();
+            this.uikitElement = null;
+        }
+    }
+}
+//# sourceMappingURL=BaseUIComponent_Uikit.js.map

package/lib/engine-components/ui/BaseUIComponent_Uikit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUIComponent_Uikit.js","sourceRoot":"","sources":["../../../src/engine-components/ui/BaseUIComponent_Uikit.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/ui/BaseUikitComponent.d.ts

@@ -0,0 +1,54 @@
+import { Container, type ContainerProperties } from "@pmndrs/uikit";
+import { Behaviour } from "../Component.js";
+import { CanvasUikit } from "./CanvasUikit.js";
+/**
+ * Base class for all uikit-based UI components in needle-engine.
+ * This provides the foundation for creating UI elements using pmndrs/uikit.
+ *
+ * @category User Interface
+ * @group Components
+ */
+export declare class BaseUikitComponent extends Behaviour {
+    /** The underlying uikit Container */
+    protected uikitElement: Container | null;
+    private _canvas?;
+    private _parentUikitComponent?;
+    /**
+     * Get the parent Canvas component
+     */
+    protected get canvas(): CanvasUikit | null;
+    /**
+     * Get the parent uikit component
+     */
+    protected get parentUikitComponent(): BaseUikitComponent | null;
+    awake(): void;
+    onEnable(): void;
+    onDisable(): void;
+    /**
+     * Create the uikit element for this component.
+     * Override this to create custom uikit elements.
+     */
+    protected createUikitElement(): void;
+    /**
+     * Get the properties to pass to the uikit element constructor.
+     * Override this to customize the uikit element properties.
+     */
+    protected getUikitProperties(): ContainerProperties;
+    /**
+     * Update the uikit element properties.
+     * Call this after changing properties to apply them to the uikit element.
+     */
+    protected updateUikitProperties(properties: Partial<ContainerProperties>): void;
+    /**
+     * Add this component's uikit element to its parent
+     */
+    private addToParent;
+    /**
+     * Remove this component's uikit element from its parent
+     */
+    private removeFromParent;
+    /**
+     * Called when the component is destroyed
+     */
+    onDestroy(): void;
+}

package/lib/engine-components/ui/BaseUikitComponent.js

@@ -0,0 +1,114 @@
+import { Container } from "@pmndrs/uikit";
+import { Behaviour, GameObject } from "../Component.js";
+import { CanvasUikit } from "./CanvasUikit.js";
+/**
+ * Base class for all uikit-based UI components in needle-engine.
+ * This provides the foundation for creating UI elements using pmndrs/uikit.
+ *
+ * @category User Interface
+ * @group Components
+ */
+export class BaseUikitComponent extends Behaviour {
+    /** The underlying uikit Container */
+    uikitElement = null;
+    _canvas = undefined;
+    _parentUikitComponent = undefined;
+    /**
+     * Get the parent Canvas component
+     */
+    get canvas() {
+        if (this._canvas === undefined) {
+            this._canvas = GameObject.getComponentInParent(this.gameObject, CanvasUikit);
+        }
+        return this._canvas;
+    }
+    /**
+     * Get the parent uikit component
+     */
+    get parentUikitComponent() {
+        if (this._parentUikitComponent === undefined) {
+            const searchFrom = this.gameObject.parent;
+            this._parentUikitComponent = searchFrom ? GameObject.getComponentInParent(searchFrom, BaseUikitComponent) : null;
+        }
+        return this._parentUikitComponent;
+    }
+    awake() {
+        // Reset cached references
+        this._canvas = undefined;
+        this._parentUikitComponent = undefined;
+    }
+    onEnable() {
+        super.onEnable();
+        this.createUikitElement();
+        this.addToParent();
+    }
+    onDisable() {
+        super.onDisable();
+        this.removeFromParent();
+    }
+    /**
+     * Create the uikit element for this component.
+     * Override this to create custom uikit elements.
+     */
+    createUikitElement() {
+        if (this.uikitElement)
+            return;
+        const properties = this.getUikitProperties();
+        this.uikitElement = new Container(properties);
+        this.uikitElement.name = this.name || this.constructor.name;
+    }
+    /**
+     * Get the properties to pass to the uikit element constructor.
+     * Override this to customize the uikit element properties.
+     */
+    getUikitProperties() {
+        return {};
+    }
+    /**
+     * Update the uikit element properties.
+     * Call this after changing properties to apply them to the uikit element.
+     */
+    updateUikitProperties(properties) {
+        if (this.uikitElement) {
+            this.uikitElement.setProperties(properties);
+        }
+    }
+    /**
+     * Add this component's uikit element to its parent
+     */
+    addToParent() {
+        if (!this.uikitElement)
+            return;
+        // Try to find parent uikit component
+        const parent = this.parentUikitComponent;
+        if (parent?.uikitElement) {
+            parent.uikitElement.add(this.uikitElement);
+            return;
+        }
+        // Try to add to canvas root
+        const canvas = this.canvas;
+        if (canvas?.uikitRoot) {
+            canvas.uikitRoot.add(this.uikitElement);
+            return;
+        }
+        console.warn(`BaseUikitComponent "${this.name}": No parent uikit element or canvas found. Make sure this component is a child of a CanvasUikit.`);
+    }
+    /**
+     * Remove this component's uikit element from its parent
+     */
+    removeFromParent() {
+        if (this.uikitElement) {
+            this.uikitElement.removeFromParent();
+        }
+    }
+    /**
+     * Called when the component is destroyed
+     */
+    onDestroy() {
+        if (this.uikitElement) {
+            this.uikitElement.removeFromParent();
+            this.uikitElement = null;
+        }
+    }
+}
+//# sourceMappingURL=BaseUikitComponent.js.map

package/lib/engine-components/ui/BaseUikitComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUikitComponent.js","sourceRoot":"","sources":["../../../src/engine-components/ui/BaseUikitComponent.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/ui/Button.legacy.d.ts

@@ -0,0 +1,68 @@
+import { RGBAColor } from "../../engine/js-extensions/index.js";
+import { Animator } from "../Animator.js";
+import { Behaviour } from "../Component.js";
+import { EventList } from "../EventList.js";
+import type { IPointerEventHandler, PointerEventData } from "./PointerEvents.js";
+export declare enum Transition {
+    None = 0,
+    ColorTint = 1,
+    SpriteSwap = 2,
+    Animation = 3
+}
+declare class ButtonColors {
+    colorMultiplier: 1;
+    disabledColor: RGBAColor;
+    fadeDuration: number;
+    highlightedColor: RGBAColor;
+    normalColor: RGBAColor;
+    pressedColor: RGBAColor;
+    selectedColor: RGBAColor;
+}
+declare class AnimationTriggers {
+    disabledTrigger: string;
+    highlightedTrigger: string;
+    normalTrigger: string;
+    pressedTrigger: string;
+    selectedTrigger: string;
+}
+/**
+ * Button is a UI component that can be clicked by the user to perform an action.
+ * It supports different visual states such as normal, highlighted, pressed, and disabled.
+ * You can customize the button's appearance using colors or animations for each state.
+ * @summary UI Button that can be clicked to perform actions
+ * @category User Interface
+ * @group Components
+ */
+export declare class Button extends Behaviour implements IPointerEventHandler {
+    /**
+     * Invokes the onClick event
+     */
+    click(): void;
+    onClick: EventList<void>;
+    private _isHovered;
+    onPointerEnter(evt: PointerEventData): void;
+    onPointerExit(): void;
+    onPointerDown(_: any): void;
+    onPointerUp(_: any): void;
+    onPointerClick(args: PointerEventData): void;
+    colors?: ButtonColors;
+    transition?: Transition;
+    animationTriggers?: AnimationTriggers;
+    animator?: Animator;
+    set interactable(value: boolean);
+    get interactable(): boolean;
+    private _interactable;
+    private set_interactable;
+    awake(): void;
+    start(): void;
+    onEnable(): void;
+    onDestroy(): void;
+    private _requestedAnimatorTrigger?;
+    private setAnimatorTriggerAtEndOfFrame;
+    private _isInit;
+    private _image?;
+    private init;
+    private stateSetup;
+    private getFinalColor;
+}
+export {};

package/lib/engine-components/ui/Button.legacy.js

@@ -0,0 +1,320 @@
+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 { showBalloonMessage } from "../../engine/debug/index.js";
+import { Gizmos } from "../../engine/engine_gizmos.js";
+import { PointerType } from "../../engine/engine_input.js";
+import { serializable } from "../../engine/engine_serialization_decorator.js";
+import { getParam } from "../../engine/engine_utils.js";
+import { RGBAColor } from "../../engine/js-extensions/index.js";
+import { Animator } from "../Animator.js";
+import { Behaviour, GameObject } from "../Component.js";
+import { EventList } from "../EventList.js";
+import { Image } from "./Image.js";
+import { GraphicRaycaster, Raycaster } from "./Raycaster.js";
+const debug = getParam("debugbutton");
+/// <summary>
+///Transition mode for a Selectable.
+/// </summary>
+export var Transition;
+(function (Transition) {
+    /// <summary>
+    /// No Transition.
+    /// </summary>
+    Transition[Transition["None"] = 0] = "None";
+    /// <summary>
+    /// Use an color tint transition.
+    /// </summary>
+    Transition[Transition["ColorTint"] = 1] = "ColorTint";
+    /// <summary>
+    /// Use a sprite swap transition.
+    /// </summary>
+    Transition[Transition["SpriteSwap"] = 2] = "SpriteSwap";
+    /// <summary>
+    /// Use an animation transition.
+    /// </summary>
+    Transition[Transition["Animation"] = 3] = "Animation";
+})(Transition || (Transition = {}));
+class ButtonColors {
+    colorMultiplier;
+    disabledColor;
+    fadeDuration;
+    highlightedColor;
+    normalColor;
+    pressedColor;
+    selectedColor;
+}
+__decorate([
+    serializable()
+], ButtonColors.prototype, "colorMultiplier", void 0);
+__decorate([
+    serializable(RGBAColor)
+], ButtonColors.prototype, "disabledColor", void 0);
+__decorate([
+    serializable()
+], ButtonColors.prototype, "fadeDuration", void 0);
+__decorate([
+    serializable(RGBAColor)
+], ButtonColors.prototype, "highlightedColor", void 0);
+__decorate([
+    serializable(RGBAColor)
+], ButtonColors.prototype, "normalColor", void 0);
+__decorate([
+    serializable(RGBAColor)
+], ButtonColors.prototype, "pressedColor", void 0);
+__decorate([
+    serializable(RGBAColor)
+], ButtonColors.prototype, "selectedColor", void 0);
+class AnimationTriggers {
+    disabledTrigger;
+    highlightedTrigger;
+    normalTrigger;
+    pressedTrigger;
+    selectedTrigger;
+}
+/**
+ * Button is a UI component that can be clicked by the user to perform an action.
+ * It supports different visual states such as normal, highlighted, pressed, and disabled.
+ * You can customize the button's appearance using colors or animations for each state.
+ * @summary UI Button that can be clicked to perform actions
+ * @category User Interface
+ * @group Components
+ */
+export class Button extends Behaviour {
+    /**
+     * Invokes the onClick event
+     */
+    click() {
+        this.onClick?.invoke();
+    }
+    onClick = new EventList();
+    _isHovered = 0;
+    onPointerEnter(evt) {
+        const canSetCursor = evt.event.pointerType === "mouse" && evt.button === 0;
+        if (canSetCursor)
+            this._isHovered += 1;
+        if (debug)
+            console.warn("Button Enter", canSetCursor, this._isHovered, this.animationTriggers?.highlightedTrigger, this.animator);
+        if (!this.interactable)
+            return;
+        if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
+            this.animator.setTrigger(this.animationTriggers.highlightedTrigger);
+        }
+        else if (this.transition === Transition.ColorTint && this.colors) {
+            this._image?.setState("hovered");
+        }
+        if (canSetCursor)
+            this.context.input.setCursor("pointer");
+    }
+    onPointerExit() {
+        this._isHovered -= 1;
+        if (this._isHovered < 0)
+            this._isHovered = 0;
+        if (debug)
+            console.log("Button Exit", this._isHovered, this.animationTriggers?.highlightedTrigger, this.animator);
+        if (!this.interactable)
+            return;
+        if (this._isHovered > 0)
+            return;
+        this._isHovered = 0;
+        if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
+            this.animator.setTrigger(this.animationTriggers.normalTrigger);
+        }
+        else if (this.transition === Transition.ColorTint && this.colors) {
+            this._image?.setState("normal");
+        }
+        this.context.input.unsetCursor("pointer");
+    }
+    onPointerDown(_) {
+        if (debug)
+            console.log("Button Down", this.animationTriggers?.highlightedTrigger, this.animator);
+        if (!this.interactable)
+            return;
+        if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
+            this.animator.setTrigger(this.animationTriggers.pressedTrigger);
+        }
+        else if (this.transition === Transition.ColorTint && this.colors) {
+            this._image?.setState("pressed");
+        }
+    }
+    onPointerUp(_) {
+        if (debug)
+            console.warn("Button Up", this.animationTriggers?.highlightedTrigger, this.animator, this._isHovered);
+        if (!this.interactable)
+            return;
+        if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
+            this.animator.setTrigger(this._isHovered ? this.animationTriggers.highlightedTrigger : this.animationTriggers.normalTrigger);
+        }
+        else if (this.transition === Transition.ColorTint && this.colors) {
+            this._image?.setState(this._isHovered ? "hovered" : "normal");
+        }
+    }
+    onPointerClick(args) {
+        if (!this.interactable)
+            return;
+        if (args.button !== 0 && args.event.pointerType === PointerType.Mouse)
+            return;
+        // Button clicks should only run with left mouse button while using mouse
+        if (debug) {
+            console.warn("Button Click", this.onClick);
+            showBalloonMessage("CLICKED button " + this.name + " at " + this.context.time.frameCount);
+        }
+        // TODO: we can not *always* use the event right now because the hotspot sample is relying on onPointerClick on a parent object
+        // and it's not using the button
+        if (this.onClick && this.onClick.listenerCount > 0) {
+            this.onClick.invoke();
+            args.use();
+            // debug clicks for WebXR
+            if (debug) {
+                const pos = this.gameObject.worldPosition;
+                pos.add(this.gameObject.worldUp.multiplyScalar(1 + Math.random() * .5));
+                Gizmos.DrawLabel(pos, "CLICK:" + Date.now(), .1, 1 + Math.random() * .5);
+            }
+        }
+    }
+    colors;
+    transition;
+    animationTriggers;
+    animator;
+    // @serializable(Image)
+    // image? : Image;
+    set interactable(value) {
+        this._interactable = value;
+        if (this._image) {
+            this._image.setInteractable(value);
+            if (value)
+                this._image.setState("normal");
+            else
+                this._image.setState("disabled");
+        }
+    }
+    get interactable() { return this._interactable; }
+    _interactable = true;
+    set_interactable(value) {
+        this.interactable = value;
+    }
+    awake() {
+        super.awake();
+        if (debug)
+            console.log(this);
+        this._isInit = false;
+        this.init();
+    }
+    start() {
+        this._image?.setInteractable(this.interactable);
+        if (!this.gameObject.getComponentInParent(Raycaster)) {
+            this.gameObject.addComponent(GraphicRaycaster);
+        }
+    }
+    onEnable() {
+        super.onEnable();
+    }
+    onDestroy() {
+        if (this._isHovered)
+            this.context.input.unsetCursor("pointer");
+    }
+    _requestedAnimatorTrigger;
+    *setAnimatorTriggerAtEndOfFrame(requestedTriggerId) {
+        this._requestedAnimatorTrigger = requestedTriggerId;
+        yield;
+        yield;
+        if (this._requestedAnimatorTrigger == requestedTriggerId) {
+            this.animator?.setTrigger(requestedTriggerId);
+        }
+    }
+    _isInit = false;
+    _image;
+    init() {
+        if (this._isInit)
+            return;
+        this._isInit = true;
+        this._image = GameObject.getComponent(this.gameObject, Image);
+        if (this._image) {
+            this.stateSetup(this._image);
+            if (this.interactable)
+                this._image.setState("normal");
+            else
+                this._image.setState("disabled");
+        }
+    }
+    stateSetup(image) {
+        image.setInteractable(this.interactable);
+        // @marwie :    If this piece of code could be moved to the SimpleStateBehavior instanciation location,
+        //              Its setup could be eased :
+        // @see https://github.com/felixmariotto/three-mesh-ui/blob/7.1.x/examples/ex__keyboard.js#L407
+        const normal = this.getFinalColor(image.color, this.colors?.normalColor);
+        const normalState = {
+            state: "normal",
+            attributes: {
+                backgroundColor: normal,
+                backgroundOpacity: normal.alpha,
+            },
+        };
+        image.setupState(normalState);
+        const hover = this.getFinalColor(image.color, this.colors?.highlightedColor);
+        const hoverState = {
+            state: "hovered",
+            attributes: {
+                backgroundColor: hover,
+                backgroundOpacity: hover.alpha,
+            },
+        };
+        image.setupState(hoverState);
+        const pressed = this.getFinalColor(image.color, this.colors?.pressedColor);
+        const pressedState = {
+            state: "pressed",
+            attributes: {
+                backgroundColor: pressed,
+                backgroundOpacity: pressed.alpha,
+            }
+        };
+        image.setupState(pressedState);
+        const selected = this.getFinalColor(image.color, this.colors?.selectedColor);
+        const selectedState = {
+            state: "selected",
+            attributes: {
+                backgroundColor: selected,
+                backgroundOpacity: selected.alpha,
+            }
+        };
+        image.setupState(selectedState);
+        const disabled = this.getFinalColor(image.color, this.colors?.disabledColor);
+        const disabledState = {
+            state: "disabled",
+            attributes: {
+                backgroundColor: disabled,
+                // @marwie, this disabled alpha property doesn't seem to have the opacity requested in unity
+                backgroundOpacity: disabled.alpha
+            }
+        };
+        image.setupState(disabledState);
+    }
+    getFinalColor(col, col2) {
+        if (col2) {
+            return col.clone().multiply(col2).convertLinearToSRGB();
+        }
+        return col.clone().convertLinearToSRGB();
+    }
+}
+__decorate([
+    serializable(EventList)
+], Button.prototype, "onClick", void 0);
+__decorate([
+    serializable(ButtonColors)
+], Button.prototype, "colors", void 0);
+__decorate([
+    serializable()
+], Button.prototype, "transition", void 0);
+__decorate([
+    serializable(AnimationTriggers)
+], Button.prototype, "animationTriggers", void 0);
+__decorate([
+    serializable(Animator)
+], Button.prototype, "animator", void 0);
+__decorate([
+    serializable()
+], Button.prototype, "interactable", null);
+//# sourceMappingURL=Button.legacy.js.map