@needle-tools/engine 2.24.0-pre

package/src/engine-components/ui/BaseUIComponent.ts

@@ -0,0 +1,153 @@
+// import { Canvas } from './Canvas';
+import * as ThreeMeshUI from 'three-mesh-ui';
+import { Behaviour, GameObject } from "../Component";
+import { EventSystem } from "./EventSystem";
+import { showGizmos } from '../../engine/engine_default_parameters';
+import { AxesHelper, Object3D } from 'three';
+import { IGraphic } from './Interfaces';
+export const includesDir = "./include";
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
+
+
+ThreeMeshUI.Block.prototype["interactable"] = {
+    get() {
+        return this.interactive;
+    },
+    set(value) {
+        this.interactable = value;
+    }
+}
+
+export class BaseUIComponent extends Behaviour {
+
+    isRoot() { return this.Root?.gameObject === this.gameObject; }
+
+    markDirty() {
+        EventSystem.markUIDirty(this.context);
+    }
+
+    shadowComponent: ThreeMeshUI.Block | null = null;
+
+    private _controlsChildLayout = true;
+    get controlsChildLayout(): boolean { return this._controlsChildLayout; }
+    set controlsChildLayout(val: boolean) {
+        this._controlsChildLayout = val;
+        if (this.shadowComponent) {
+            //@ts-ignore
+            (this.shadowComponent as ThreeMeshUI.MeshUIComponent).autoLayout = val;
+        }
+    }
+
+    private _root?: UIRootComponent | null = undefined;
+    protected get Root(): UIRootComponent | null {
+        if (this._root === undefined) {
+            this._root = GameObject.getComponentInParent(this.gameObject, UIRootComponent);
+        }
+        return this._root;
+    }
+
+    // private _intermediate?: Object3D;
+    protected _parentComponent?: BaseUIComponent | null = undefined;
+
+    onEnable() {
+        super.onEnable();
+    }
+
+    //@ts-ignore
+    protected addShadowComponent(container: any, parent?: BaseUIComponent) {
+
+        this.removeShadowComponent();
+
+        // instead of inserting here, we attach to the matching shadow hierarchy starting with the Canvas component.
+        const searchFrom = this.isRoot() ? this.gameObject : this.gameObject.parent;
+        this._parentComponent = GameObject.getComponentInParent(searchFrom!, BaseUIComponent);
+        if (!this._parentComponent) {
+            console.warn(`Component \"${this.name}\" doesn't have a UI parent anywhere. Do you have a UI element outside a Canvas?`, this);
+            return;
+        }
+
+        // console.trace(container);
+        container.name = this.name + " (" + (this.constructor.name ?? "UI") + ")";
+        container.autoLayout = this._parentComponent.controlsChildLayout;
+        container.shadowComponentOwner = this;
+        const raycastTarget = (this as unknown as IGraphic).raycastTarget;
+        // TODO: only traverse our own hierarchy, we can stop if we find another owner
+        container.traverse(c => {
+            if (c.shadowComponentOwner === undefined)
+                c.shadowComponentOwner = this;
+            if (raycastTarget === false) {
+                c.layers.set(2);
+            }
+        })
+        if (this.Root?.gameObject === this.gameObject) {
+            this.gameObject.add(container);
+        }
+        else {
+            let targetShadowComponent = this._parentComponent.shadowComponent;
+            if (targetShadowComponent) {
+                // console.log("ADD", this.name, "to", this._parentComponent.name, targetShadowComponent);
+                targetShadowComponent?.add(container);
+            }
+        }
+        this.shadowComponent = container;
+        if (parent && parent.shadowComponent && this.shadowComponent) {
+            parent.shadowComponent.add(this.shadowComponent);
+        }
+        // this.applyTransform();
+
+        if (showGizmos) {
+            container.add(new AxesHelper(.5));
+        }
+
+        this.onAfterAddedToScene();
+        // this.startCoroutine(this._updateRenderSettingsDelayed(), FrameEvent.OnBeforeRender);
+    }
+
+
+    set(_state: object) {
+        // if (!this.shadowComponent) return;
+        // this.traverseOwnedShadowComponents(this.shadowComponent, this, o => {
+        //     for (const ch of o.children) {
+        //         console.log(this, ch);
+        //         if (ch.isUI && typeof ch.set === "function") {
+        //             // ch.set(state);
+        //             // ch.update(true, true, true);
+        //         }
+        //     }
+        // })
+    }
+
+    private traverseOwnedShadowComponents(current: Object3D, owner: any, callback: (obj: any) => void) {
+        if (!current) return;
+        if (current["shadowComponentOwner"] === owner) {
+            callback(current);
+            for (const ch of current.children) {
+                this.traverseOwnedShadowComponents(ch, owner, callback);
+            }
+        }
+    }
+
+    protected removeShadowComponent() {
+        if (this.shadowComponent) {
+            this.shadowComponent.removeFromParent();
+        }
+    }
+
+    protected onAfterAddedToScene() {
+
+    }
+
+    setInteractable(value: boolean) {
+        if (this.shadowComponent) {
+            //@ts-ignore
+            this.shadowComponent.interactable = value;
+        }
+    }
+}
+
+export class UIRootComponent extends BaseUIComponent {
+    awake() {
+        super.awake();
+    }
+}

package/src/engine-components/ui/Button.ts

@@ -0,0 +1,251 @@
+import { Behaviour, GameObject } from "../Component";
+import { EventList } from "../EventList";
+import { IPointerClickHandler, IPointerEnterHandler, IPointerEventHandler, IPointerExitHandler, PointerEventData } from "./PointerEvents";
+import { Image } from "./Image";
+import { RGBAColor } from "../js-extensions/RGBAColor";
+import { serializeable } from "../../engine/engine_serialization_decorator";
+import { Animator } from "../Animator";
+import { getParam } from "../../engine/engine_utils";
+
+const debug = getParam("debugbutton");
+
+/// <summary>
+///Transition mode for a Selectable.
+/// </summary>
+export enum Transition {
+    /// <summary>
+    /// No Transition.
+    /// </summary>
+    None,
+    /// <summary>
+    /// Use an color tint transition.
+    /// </summary>
+    ColorTint,
+    /// <summary>
+    /// Use a sprite swap transition.
+    /// </summary>
+    SpriteSwap,
+    /// <summary>
+    /// Use an animation transition.
+    /// </summary>
+    Animation
+}
+
+declare class ButtonColors {
+    @serializeable()
+    colorMultiplier: 1;
+    @serializeable(RGBAColor)
+    disabledColor: RGBAColor;
+    @serializeable()
+    fadeDuration: number;
+    @serializeable(RGBAColor)
+    highlightedColor: RGBAColor;
+    @serializeable(RGBAColor)
+    normalColor: RGBAColor;
+    @serializeable(RGBAColor)
+    pressedColor: RGBAColor;
+    @serializeable(RGBAColor)
+    selectedColor: RGBAColor;
+}
+
+declare type AnimationTriggers = {
+    disabledTrigger: string,
+    highlightedTrigger: string,
+    normalTrigger: string,
+    pressedTrigger: string,
+    selectedTrigger: string,
+}
+
+export class Button extends Behaviour implements IPointerEventHandler {
+
+    @serializeable(EventList)
+    onClick?: EventList;
+
+    private _isHovered: boolean = false;
+
+    onPointerEnter(_) {
+        if (debug)
+            console.log("Button Enter", this.animationTriggers?.highlightedTrigger, this.animator);
+        this._isHovered = true;
+        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");
+        }
+    }
+
+    onPointerExit() {
+        if (debug)
+            console.log("Button Exit", this.animationTriggers?.highlightedTrigger, this.animator);
+        this._isHovered = false;
+        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");
+        }
+    }
+
+    onPointerDown(_) {
+        if (debug)
+            console.log("Button Down", this.animationTriggers?.highlightedTrigger, this.animator);
+        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.log("Button Down", this.animationTriggers?.highlightedTrigger, this.animator);
+        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: PointerEventData) {
+        if (debug)
+            console.trace("Button Click", this.onClick);
+        this.onClick?.invoke();
+    }
+
+    @serializeable()
+    colors?: ButtonColors;
+    @serializeable()
+    transition?: Transition;
+
+    @serializeable()
+    animationTriggers?: AnimationTriggers;
+
+    @serializeable(Animator)
+    animator?: Animator;
+
+    // @serializeable(Image)
+    // image? : Image;
+
+    @serializeable()
+    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(): boolean { return this._interactable; }
+
+    private _interactable: boolean = true;
+    private set_interactable(value: boolean) {
+        this.interactable = value;
+    }
+
+    awake(): void {
+        super.awake();
+        if (debug)
+            console.log(this);
+        this.init();
+    }
+
+    start() {
+        this._image?.setInteractable(this.interactable);
+    }
+
+    onEnable() {
+        super.onEnable();
+    }
+
+    private _requestedAnimatorTrigger?: string;
+    private *setAnimatorTriggerAtEndOfFrame(requestedTriggerId: string) {
+        this._requestedAnimatorTrigger = requestedTriggerId;
+        yield;
+        yield;
+        if (this._requestedAnimatorTrigger == requestedTriggerId) {
+            this.animator?.SetTrigger(requestedTriggerId);
+        }
+    }
+
+    private _isInit: boolean = false;
+    private _image?: Image;
+
+    private init() {
+        if (this._isInit) return;
+        this._isInit = true;
+        this._image = GameObject.getComponent(this.gameObject, Image) as Image;
+        if (this._image) {
+            this.stateSetup(this._image);
+            if (this.interactable)
+                this._image.setState("normal");
+            else
+                this._image.setState("disabled");
+        }
+    }
+
+    private stateSetup(image: Image) {
+        image.setInteractable(this.interactable);
+
+        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,
+                backgroundOpacity: disabled.alpha,
+            }
+        };
+        image.setupState(disabledState);
+    }
+
+    private getFinalColor(col: RGBAColor, col2?: RGBAColor) {
+        if (col2) {
+            return col.clone().multiply(col2);
+        }
+        return col.clone();
+    }
+}

package/src/engine-components/ui/Canvas.ts

@@ -0,0 +1,166 @@
+import { onChange, updateRenderSettings as updateRenderSettingsRecursive } from "./Utils";
+import { serializeable } from "../../engine/engine_serialization_decorator";
+import { FrameEvent } from "../../engine/engine_setup";
+import { BaseUIComponent, UIRootComponent } from "./BaseUIComponent";
+import { Mathf } from "../../engine/engine_math";
+import * as THREE from "three";
+
+export enum RenderMode {
+    ScreenSpaceOverlay = 0,
+    ScreenSpaceCamera = 1,
+    WorldSpace = 2,
+}
+
+export class Canvas extends UIRootComponent {
+
+    @serializeable()
+    set renderOnTop(val: boolean) {
+        if (val === this._renderOnTop) {
+            return;
+        }
+        this._renderOnTop = val;
+        this.onRenderSettingsChanged();
+    }
+    get renderOnTop() { return this._renderOnTop; }
+    private _renderOnTop: boolean = false;
+
+    @serializeable()
+    set depthWrite(val: boolean) {
+        if (this._depthWrite === val) return;
+        this._depthWrite = val;
+        this.onRenderSettingsChanged();
+    }
+    get depthWrite() { return this._depthWrite; }
+    private _depthWrite: boolean = false;
+
+    @serializeable()
+    set doubleSided(val: boolean) {
+        if (this._doubleSided === val) return;
+        this._doubleSided = val;
+        this.onRenderSettingsChanged();
+    }
+    get doubleSided() { return this._doubleSided; }
+    private _doubleSided: boolean = true;
+
+    @serializeable()
+    set castShadows(val: boolean) {
+        if (this._castShadows === val) return;
+        this._castShadows = val;
+        this.onRenderSettingsChanged();
+    }
+    get castShadows() { return this._castShadows; }
+    private _castShadows: boolean = true;
+
+    @serializeable()
+    set receiveShadows(val: boolean) {
+        if (this._receiveShadows === val) return;
+        this._receiveShadows = val;
+        this.onRenderSettingsChanged();
+    }
+    get receiveShadows() { return this._receiveShadows; }
+    private _receiveShadows: boolean = true;
+
+
+    @serializeable()
+    get renderMode(): RenderMode {
+        return this._renderMode;
+    }
+    set renderMode(val: RenderMode) {
+        if (this._renderMode === val) return;
+        this._renderMode = val;
+        this.onRenderSettingsChanged();
+    }
+    private _renderMode: RenderMode = -1;
+
+    private _rootCanvas!: Canvas;
+
+    @serializeable(Canvas)
+    set rootCanvas(val: Canvas) {
+        if (this._rootCanvas instanceof Canvas) return;
+        this._rootCanvas = val;
+    }
+
+    get rootCanvas(): Canvas {
+        return this._rootCanvas;
+    }
+
+    awake() {
+        this.shadowComponent = this.gameObject;
+        super.awake();
+    }
+
+    onEnable() {
+        super.onEnable();
+        this._updateRenderSettingsRoutine = undefined;
+        this.onRenderSettingsChanged();
+    }
+
+    private previousAspect: number = -1;
+
+    onBeforeRender() {
+        if (this.isScreenSpace && this.context.mainCameraComponent && this.context.mainCameraComponent.aspect !== this.previousAspect) {
+            this.previousAspect = this.context.mainCameraComponent.aspect;
+            this.updateRenderMode();
+        }
+    }
+
+
+    private _updateRenderSettingsRoutine?: Generator;
+    private onRenderSettingsChanged() {
+        if (this._updateRenderSettingsRoutine) return;
+        this._updateRenderSettingsRoutine = this.startCoroutine(this._updateRenderSettingsDelayed(), FrameEvent.OnBeforeRender);
+    }
+
+    private *_updateRenderSettingsDelayed() {
+        yield;
+        this._updateRenderSettingsRoutine = undefined;
+        if (this.shadowComponent) {
+            this.updateRenderMode();
+            // this.onWillUpdateRenderSettings();
+            updateRenderSettingsRecursive(this.shadowComponent, this);
+            for (const ch of this.gameObject.getComponentsInChildren(BaseUIComponent)) {
+                updateRenderSettingsRecursive(ch.shadowComponent!, this);
+            }
+        }
+    }
+
+    private _activeRenderMode: RenderMode = -1;
+
+    private get isScreenSpace() : boolean {
+        return this._activeRenderMode === RenderMode.ScreenSpaceCamera || this._activeRenderMode === RenderMode.ScreenSpaceOverlay;
+    }
+
+    private updateRenderMode() {
+        if (this.renderMode === this._activeRenderMode) return;
+        switch (this.renderMode) {
+            case RenderMode.ScreenSpaceOverlay:
+            case RenderMode.ScreenSpaceCamera:
+                const camera = this.context.mainCameraComponent;
+                if (!camera) return;
+                const canvas = this.gameObject;
+                const camObj = camera.gameObject;
+                camObj?.add(canvas);
+                const pos = camera.farClipPlane;
+                canvas.position.x = 0;
+                canvas.position.y = 0;
+                canvas.position.z = -pos;
+
+                // console.log(this.shadowComponent)
+
+                const w = Math.tan(Mathf.toRadians(camera.fieldOfView) * pos) * (camera.aspect * 1.333333);
+                const h = w * (this.context.domHeight / this.context.domWidth);
+                canvas.scale.x = -w;
+                canvas.scale.y = h;
+
+                // const rects = this.gameObject.getComponentsInChildren(BaseUIComponent);
+                // for (const rect of rects) {
+                //     rect.set({ width: this.context.domWidth * .5, height: 100 })
+                // }
+
+                break;
+            case RenderMode.WorldSpace:
+
+                break;
+        }
+    }
+}

package/src/engine-components/ui/CanvasGroup.ts

@@ -0,0 +1,47 @@
+import { Graphic } from "./Graphic";
+import { FrameEvent } from "../../engine/engine_setup";
+import { Behaviour, GameObject } from "../Component";
+import { ICanvasGroup } from "./Interfaces";
+import { serializeable } from "../../engine/engine_serialization_decorator";
+
+
+export class CanvasGroup extends Behaviour implements ICanvasGroup {
+    @serializeable()
+    get alpha(): number {
+        return this._alpha;
+    }
+    set alpha(val: number) {
+        if (val === this._alpha) return;
+        this._alpha = val;
+        this.markDirty();
+    }
+
+    private _alpha: number = 1;
+
+    @serializeable()
+    interactable: boolean = true;
+    @serializeable()
+    blocksRaycasts: boolean = true;
+
+
+    private _isDirty: boolean = false;
+    private markDirty() {
+        if (this._isDirty) return;
+        this._isDirty = true;
+        this.startCoroutine(this.applyChangesDelayed(), FrameEvent.OnBeforeRender);
+    }
+
+    private *applyChangesDelayed() {
+        this._isDirty = false;
+        this.applyChangesNow();
+    }
+
+    private _buffer : Graphic[] = [];
+    private applyChangesNow() {
+        for (const ch of GameObject.getComponentsInChildren(this.gameObject, Graphic, this._buffer)) {
+            const col = ch.color;
+            col.alpha = this._alpha;
+            ch.color = col;
+        }
+    }
+}