@needle-tools/engine 2.61.0-pre → 2.62.2-pre

package/src/engine-components/timeline/PlayableDirector.ts

@@ -149,7 +149,11 @@ export class PlayableDirector extends Behaviour {
     }
 
     pause() {
+        if (!this.isValid()) return;
+        this._isPlaying = false;
+        if (this._isPaused) return;
         this._isPaused = true;
+        this.evaluate();
     }
 
     stop() {
@@ -267,8 +271,10 @@ export class PlayableDirector extends Behaviour {
         for (const handler of this._animationTracks) {
             handler.evaluate(time);
         }
-        for (const handler of this._audioTracks) {
-            handler.evaluate(time);
+        if (AudioSource.userInteractionRegistered) {
+            for (const handler of this._audioTracks) {
+                handler.evaluate(time);
+            }
         }
         for (const sig of this._signalTracks) {
             sig.evaluate(time);
@@ -279,7 +285,6 @@ export class PlayableDirector extends Behaviour {
         for (const cust of this._customTracks) {
             cust.evaluate(time);
         }
-
     }
 
     private resolveBindings() {
@@ -358,6 +363,7 @@ export class PlayableDirector extends Behaviour {
 
         if (!this.playableAsset) return;
         const audioTracks: Array<Models.TrackModel> = [];
+        const audioAllowedCallbacks : any = [];
         for (const track of this.playableAsset!.tracks) {
             const type = track.type;
             const registered = PlayableDirector.createTrackFunctions[type];
@@ -425,7 +431,20 @@ export class PlayableDirector extends Behaviour {
             }
             else if (track.type === Models.TrackType.Audio) {
                 if (track.clips.length <= 0) continue;
-                audioTracks.push(track);
+                const audio = new Tracks.AudioTrackHandler();
+                audio.director = this;
+                audio.track = track;
+                this._audioTracks.push(audio);
+
+                audioAllowedCallbacks.push(() => {
+                    const listener = GameObject.findObjectOfType(AudioListener, this.context) as AudioListener;
+                    if (!listener) return;
+                    audio.listener = listener.listener;
+                    for (let i = 0; i < track.clips.length; i++) {
+                        const clipModel = track.clips[i];
+                        audio.addModel(clipModel);
+                    }
+                });
             }
             else if (track.type === Models.TrackType.Marker) {
                 const signalHandler: Tracks.SignalTrackHandler = new Tracks.SignalTrackHandler();
@@ -473,19 +492,8 @@ export class PlayableDirector extends Behaviour {
         }
 
         AudioSource.registerWaitForAllowAudio(() => {
-            const listener = GameObject.findObjectOfType(AudioListener, this.context) as AudioListener;
-            if (!listener) return;
-            for (const track of audioTracks) {
-                const audio = new Tracks.AudioTrackHandler();
-                audio.director = this;
-                audio.track = track;
-                audio.listener = listener.listener;
-                for (let i = 0; i < track.clips.length; i++) {
-                    const clipModel = track.clips[i];
-                    audio.addModel(clipModel);
-                }
-                this._audioTracks.push(audio);
-            }
+            audioAllowedCallbacks.forEach((cb: any) => cb());
+            audioAllowedCallbacks.length = 0;
         });
     }
 

package/src/engine-components/timeline/TimelineTracks.ts

@@ -276,7 +276,7 @@ export class AnimationTrackHandler extends TrackHandler {
             const isInTimeRange = time >= model.start && time <= model.end;
             const postExtrapolation: Models.ClipExtrapolation = model.postExtrapolationMode;
             let isActive = isInTimeRange;
-            if (!isActive && !didPostExtrapolate && model.end < time && model.postExtrapolationMode !== Models.ClipExtrapolation.None) {
+            if (!isActive && !didPostExtrapolate && model.end < time && postExtrapolation !== Models.ClipExtrapolation.None) {
                 const nextClip = i < this.clips.length - 1 ? this.models[i + 1] : null;
                 // use post extrapolate if its the last clip of the next clip has not yet started
                 if (!nextClip || nextClip.start > time) {
@@ -284,6 +284,12 @@ export class AnimationTrackHandler extends TrackHandler {
                     didPostExtrapolate = true;
                 }
             }
+            const preExtrapolation: Models.ClipExtrapolation = model.preExtrapolationMode;
+            if (i == 0 && !isActive && !didPostExtrapolate && model.start > time && preExtrapolation !== Models.ClipExtrapolation.None) {
+                isActive = true;
+                if (preExtrapolation !== Models.ClipExtrapolation.Hold)
+                    time += model.start;
+            }
             if (isActive) {
                 // const clip = this.clips[i];
                 let weight = 1;
@@ -316,9 +322,9 @@ export class AnimationTrackHandler extends TrackHandler {
                     }
                 }
 
-                if(model.reversed === true) action.time = action.getClip().duration - t;
+                if (model.reversed === true) action.time = action.getClip().duration - t;
                 else action.time = t;
-                
+
                 action.timeScale = 0;
                 const effectiveWeight = weight * this.director.weight;
                 action.weight = effectiveWeight;

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

@@ -53,6 +53,13 @@ export class BaseUIComponent extends Behaviour {
     // private _intermediate?: Object3D;
     protected _parentComponent?: BaseUIComponent | null = undefined;
 
+    __internalNewInstanceCreated() {
+        super.__internalNewInstanceCreated();
+        this.shadowComponent = null;
+        this._root = undefined;
+        this._parentComponent = undefined;
+    }
+
     onEnable() {
         super.onEnable();
     }
@@ -79,17 +86,7 @@ export class BaseUIComponent extends Behaviour {
         // this.gameObject.layers.set(2)
 
 
-        // TODO: only traverse our own hierarchy, we can stop if we find another owner
-        container.traverse(c => {
-            if (c[$shadowDomOwner] === undefined) {
-                c[$shadowDomOwner] = this;
-            }
-
-            // // this makes text not render anymore when enabled again
-            // if (raycastTarget === false) {
-            //     c.layers.set(2);
-            // }
-        });
+        this.setShadowComponentOwner(container);
 
         let needsUpdate = false;
 
@@ -136,6 +133,19 @@ export class BaseUIComponent extends Behaviour {
         // })
     }
 
+    protected setShadowComponentOwner(current: Object3D | null | undefined) {
+        if (!current) return;
+        // TODO: only traverse our own hierarchy, we can stop if we find another owner
+        if (current[$shadowDomOwner] === undefined || current[$shadowDomOwner] === this) {
+            current[$shadowDomOwner] = this;
+            if (current.children) {
+                for (const ch of current.children) {
+                    this.setShadowComponentOwner(ch);
+                }
+            }
+        }
+    }
+
     private traverseOwnedShadowComponents(current: Object3D, owner: any, callback: (obj: any) => void) {
         if (!current) return;
         if (current[$shadowDomOwner] === owner) {

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

@@ -6,6 +6,7 @@ import { RGBAColor } from "../js-extensions/RGBAColor";
 import { serializable } from "../../engine/engine_serialization_decorator";
 import { Animator } from "../Animator";
 import { getParam } from "../../engine/engine_utils";
+import { showBalloonMessage } from "../../engine/debug";
 
 const debug = getParam("debugbutton");
 
@@ -102,7 +103,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
 
     onPointerUp(_) {
         if (debug)
-            console.log("Button Down", this.animationTriggers?.highlightedTrigger, this.animator);
+            console.warn("Button Up", this.animationTriggers?.highlightedTrigger, this.animator, this._isHovered);
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.SetTrigger(this._isHovered ? this.animationTriggers.highlightedTrigger : this.animationTriggers.normalTrigger);
         }
@@ -112,8 +113,10 @@ export class Button extends Behaviour implements IPointerEventHandler {
     }
 
     onPointerClick(_args: PointerEventData) {
-        if (debug)
-            console.trace("Button Click", this.onClick);
+        if (debug) {
+            console.warn("Button Click", this.onClick);
+            showBalloonMessage("CLICKED button " + this.name + " at " + this.context.time.frameCount);
+        }
         this.onClick?.invoke();
     }
 
@@ -153,6 +156,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
         super.awake();
         if (debug)
             console.log(this);
+        this._isInit = false;
         this.init();
     }
 

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

@@ -13,6 +13,7 @@ import { ICanvasGroup, IGraphic } from "./Interfaces";
 import { getParam } from "../../engine/engine_utils";
 import { UIRaycastUtils } from "./RaycastUtils";
 import { $shadowDomOwner } from "./BaseUIComponent";
+import { showBalloonMessage, showBalloonWarning } from "../../engine/debug";
 
 const debug = getParam("debugeventsystem");
 
@@ -248,6 +249,8 @@ export class EventSystem extends Behaviour {
             args: args,
             hasActiveUI: this.currentActiveMeshUIComponents.length > 0,
         }
+        if(debug && args.isClicked)
+            showBalloonMessage("EventSystem: " +  args.pointerId + " - " + this.context.time.frame + " - Up:" + args.isUp + ", Down:" + args.isDown)
         this.dispatchEvent(new CustomEvent(EventSystemEvents.BeforeHandleInput, { detail: evt }))
         this.handleIntersections(hits, args);
         this.dispatchEvent(new CustomEvent(EventSystemEvents.AfterHandleInput, { detail: evt }))
@@ -261,11 +264,11 @@ export class EventSystem extends Behaviour {
         else return;
 
         if (this.lastPointerEvent.isUp) {
-            for (const obj of this.raisedPointerDownEvents) {
-                if (obj.onPointerUp) {
-                    obj.onPointerUp(this.lastPointerEvent);
-                }
-            }
+            // for (const obj of this.raisedPointerDownEvents) {
+            //     if (obj.onPointerUp) {
+            //         obj.onPointerUp(this.lastPointerEvent);
+            //     }
+            // }
             this.raisedPointerDownEvents.length = 0;
             this.raisedPointerDownObjects.length = 0;
         }
@@ -398,8 +401,8 @@ export class EventSystem extends Behaviour {
             }
         }
 
-        // if (clicked)
-        //     console.log(this.context.time.frame, object);
+        if (clicked && debug)
+            console.log(this.context.time.frame, object);
         this.objectsHoveredThisFrame.push(object);
 
         if (canvasGroup === null || canvasGroup.interactable) {
@@ -488,7 +491,7 @@ export class EventSystem extends Behaviour {
 class MeshUIHelper {
 
     private static lastSelected: THREE.Object3D | null = null;
-    private static lastUpdateFrame: { context: Context, frame: number }[] = [];
+    private static lastUpdateFrame: { context: Context, frame: number, nextUpdate: number }[] = [];
     private static needsUpdate: boolean = false;
 
     static markDirty() {
@@ -496,22 +499,28 @@ class MeshUIHelper {
     }
 
     static update(threeMeshUI: any, context: Context) {
+        const currentFrame = context.time.frameCount;
         for (const lu of this.lastUpdateFrame) {
             if (lu.context === context) {
-                if (context.time.frameCount === lu.frame) return;
-                lu.frame = context.time.frameCount;
-                if (this.needsUpdate || context.time.frameCount < 30) {
+                if (currentFrame === lu.frame) return;
+                lu.frame = currentFrame;
+                let shouldUpdate = this.needsUpdate || currentFrame < 1;
+                if(lu.nextUpdate === context.time.frameCount) shouldUpdate = true;
+                if(this.needsUpdate) lu.nextUpdate = currentFrame + 3;
+                if (shouldUpdate) {
+                    if (debug)
+                        console.log("Update threemeshui");
                     this.needsUpdate = false;
                     threeMeshUI.update();
                 }
                 return;
             }
         }
-        this.lastUpdateFrame = [{ context, frame: context.time.frameCount }];
+        this.lastUpdateFrame = [{ context, frame: currentFrame, nextUpdate: currentFrame }];
         threeMeshUI.update();
     }
 
-    static updateState(intersect: THREE.Object3D, selectState: boolean): ThreeMeshUI.Block | null {
+    static updateState(intersect: THREE.Object3D, _selectState: boolean): ThreeMeshUI.Block | null {
         let foundBlock: ThreeMeshUI.Block | null = null;
 
         if (intersect) {
@@ -520,30 +529,10 @@ class MeshUIHelper {
             if (foundBlock && foundBlock !== this.lastSelected) {
                 const interactable = foundBlock["interactable"];
                 if (interactable === false) return null;
-                if (selectState) {
-                    this.lastSelected = foundBlock;
-                    //@ts-ignore
-                    if (foundBlock.states["pressed"])
-                        //@ts-ignore
-                        foundBlock.setState("pressed");
-
-                } else {
-                    //@ts-ignore
-                    if (foundBlock.states["hovered"])
-                        //@ts-ignore
-                        foundBlock.setState("hovered");
-                };
                 this.needsUpdate = true;
             }
         }
 
-        // Update non-targeted buttons state
-        // MeshUIBaseComponent.objectsWithState.forEach((obj) => {
-        //     if ((!intersect || obj !== foundBlock) && obj.isUI) {
-        //         obj.setState('idle');
-        //     };
-        // });
-
         return foundBlock;
     }
 
@@ -556,15 +545,6 @@ class MeshUIHelper {
 
     static resetState(obj: any) {
         if (!obj) return;
-        const interactable = obj["interactable"];
-        if (interactable === false) {
-            if (obj.states["disabled"])
-                obj.setState("disabled");
-        }
-        else if (obj === this.lastSelected && obj.states["selected"]) {
-            obj.setState("selected");
-        }
-        else obj.setState('normal');
         this.needsUpdate = true;
     }
 

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

@@ -51,6 +51,13 @@ export class Graphic extends BaseUIComponent implements IGraphic {
         return this._rect!;
     }
 
+    __internalNewInstanceCreated(): void {
+        super.__internalNewInstanceCreated();
+        this._rect = null;
+        this.uiObject = null;
+        if(this._color) this._color = this._color.clone();
+    }
+
     setState(state: string) {
         this.makePanel();
         if (this.uiObject) {

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

@@ -1,10 +1,12 @@
+import { IComponent } from "../../engine/engine_types";
+
 export interface ICanvasGroup {
     get isCanvasGroup() : boolean;
     blocksRaycasts: boolean;
     interactable: boolean;
 }
 
-export interface IGraphic {
+export interface IGraphic extends IComponent {
     get isGraphic() : boolean;
     raycastTarget: boolean;
 }

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

@@ -33,7 +33,7 @@ export class UIRaycastUtils {
             if (canvasGroup.interactable === false) return false;
         }
         // handle Graphic Raycast target
-        const graphic = foreachComponent(obj, c => {
+        const graphic : IGraphic | undefined = foreachComponent(obj, c => {
             if ((c as unknown as IGraphic).isGraphic === true) return c;
             return undefined;
         }, false);
@@ -43,6 +43,7 @@ export class UIRaycastUtils {
                 out.graphic = graphic as IGraphic;
         }
         if (graphic?.raycastTarget === false) return false;
+        if (graphic?.layer === 2) return false;
 
         return true;
     }

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

@@ -160,7 +160,7 @@ export class Text extends Graphic {
     private _text: string = "";
     private _fontSize: number = 12;
     private _textMeshUi: Array<ThreeMeshUI.Text> | null = null;
-    private _textContainer: any = null;
+    private _textContainer: ThreeMeshUI.Block | null = null;
 
     private getTextOpts(): object {
         let fontSize = this.fontSize;
@@ -185,8 +185,19 @@ export class Text extends Graphic {
         this._didHandleTextRenderOnTop = false;
         if (this.uiObject) {
             // @ts-ignore
-            this.uiObject.onAfterUpdate = this.updateWidth.bind(this);
+            this.uiObject.onAfterUpdate = () => {
+                this.updateWidth();
+                // We need to update the shadow owner when the text updates
+                // because once the font has loaded we get new children (a new mesh)
+                // which is the text, it needs to be linked back to this component 
+                // to be properly handled by the EventSystem
+                // since the EventSystem looks for shadow component owners to handle events
+                this.setShadowComponentOwner(this.uiObject);
+                this.markDirty();
+            };
         }
+
+        setTimeout(()=> this.markDirty(), 10);
     }
 
     private createBlock(rt: RectTransform, hideOverflow: boolean, content: THREE.Object3D | Array<THREE.Object3D> | null, isTextIntermediate: boolean = false): ThreeMeshUI.Block | null {

package/src/needle-engine.ts

@@ -3,8 +3,8 @@ makeErrorsVisibleForDevelopment();
 
 import "./engine/engine_element";
 import "./engine/engine_setup";
-// import "./engine/engine_mainloop";
-// import "./engine-components/DomOverlay";
+
+import "./engine-components/CameraUtils"
 
 
 export { GameObject, Behaviour } from "./engine-components/Component";