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

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,11 +499,15 @@ 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 < 1) {
+                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;
@@ -509,11 +516,11 @@ class MeshUIHelper {
                 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) {
@@ -522,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;
     }
 
@@ -558,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,7 +185,16 @@ 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);

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";