@needle-tools/engine 2.34.0-pre → 2.35.0-pre

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

@@ -5,6 +5,7 @@ import { EventSystem } from "./EventSystem";
 import { showGizmos } from '../../engine/engine_default_parameters';
 import { AxesHelper, Object3D } from 'three';
 import { IGraphic } from './Interfaces';
+import { ShadowCastingMode } from '../Renderer';
 export const includesDir = "./include";
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
@@ -19,6 +20,8 @@ ThreeMeshUI.Block.prototype["interactable"] = {
     }
 }
 
+export const $shadowDomOwner = Symbol("shadowDomOwner");
+
 export class BaseUIComponent extends Behaviour {
 
     isRoot() { return this.Root?.gameObject === this.gameObject; }
@@ -69,7 +72,7 @@ export class BaseUIComponent extends Behaviour {
 
         container.name = this.name + " (" + (this.constructor.name ?? "UI") + ")";
         container.autoLayout = this._parentComponent.controlsChildLayout;
-        container.shadowComponentOwner = this;
+        container[$shadowDomOwner] = this;
 
         // TODO: raycastTarget doesnt work anymore -> i think we need to set the gameObject layer and then check in the raycaster if the shadowComponentOwner is on the correct layer?!
         // const raycastTarget = (this as unknown as IGraphic).raycastTarget;
@@ -78,14 +81,17 @@ export class BaseUIComponent extends Behaviour {
 
         // 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 (c[$shadowDomOwner] === undefined) {
+                c[$shadowDomOwner] = this;
             }
+
             // // this makes text not render anymore when enabled again
             // if (raycastTarget === false) {
             //     c.layers.set(2);
             // }
-        })
+        });
+
+        let needsUpdate = false;
 
         if (this.Root?.gameObject === this.gameObject) {
             this.gameObject.add(container);
@@ -95,6 +101,7 @@ export class BaseUIComponent extends Behaviour {
             if (targetShadowComponent) {
                 // console.log("ADD", this.name, "to", this._parentComponent.name, targetShadowComponent);
                 targetShadowComponent?.add(container);
+                needsUpdate = true;
             }
         }
         this.shadowComponent = container;
@@ -108,7 +115,11 @@ export class BaseUIComponent extends Behaviour {
         }
 
         this.onAfterAddedToScene();
-        // this.startCoroutine(this._updateRenderSettingsDelayed(), FrameEvent.OnBeforeRender);
+
+        // make sure to update the layout when adding content
+        // otherwise it will fail when object are enabled at runtime
+        if (needsUpdate)
+            ThreeMeshUI.update();
     }
 
 
@@ -127,7 +138,7 @@ export class BaseUIComponent extends Behaviour {
 
     private traverseOwnedShadowComponents(current: Object3D, owner: any, callback: (obj: any) => void) {
         if (!current) return;
-        if (current["shadowComponentOwner"] === owner) {
+        if (current[$shadowDomOwner] === owner) {
             callback(current);
             for (const ch of current.children) {
                 this.traverseOwnedShadowComponents(ch, owner, callback);

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

@@ -4,6 +4,9 @@ import { FrameEvent } from "../../engine/engine_setup";
 import { BaseUIComponent, UIRootComponent } from "./BaseUIComponent";
 import { Mathf } from "../../engine/engine_math";
 import * as THREE from "three";
+import { getComponentsInChildren } from "../../engine/engine_components";
+import { IComponent } from "../../engine/engine_types";
+import { GameObject } from "../Component";
 
 export enum RenderMode {
     ScreenSpaceOverlay = 0,
@@ -84,6 +87,15 @@ export class Canvas extends UIRootComponent {
         return this._rootCanvas;
     }
 
+    private _scaleFactor: number = 1;
+    @serializeable()
+    get scaleFactor(): number {
+        return this._scaleFactor;
+    }
+    private set scaleFactor(val: number) {
+        this._scaleFactor = val;
+    }
+
     awake() {
         this.shadowComponent = this.gameObject;
         super.awake();
@@ -118,7 +130,7 @@ export class Canvas extends UIRootComponent {
             this.updateRenderMode();
             // this.onWillUpdateRenderSettings();
             updateRenderSettingsRecursive(this.shadowComponent, this);
-            for (const ch of this.gameObject.getComponentsInChildren(BaseUIComponent)) {
+            for (const ch of GameObject.getComponentsInChildren(this.gameObject, BaseUIComponent)) {
                 updateRenderSettingsRecursive(ch.shadowComponent!, this);
             }
         }
@@ -126,7 +138,7 @@ export class Canvas extends UIRootComponent {
 
     private _activeRenderMode: RenderMode = -1;
 
-    private get isScreenSpace() : boolean {
+    private get isScreenSpace(): boolean {
         return this._activeRenderMode === RenderMode.ScreenSpaceCamera || this._activeRenderMode === RenderMode.ScreenSpaceOverlay;
     }
 

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

@@ -0,0 +1,21 @@
+// import { serializeable } from "../../engine/engine_serialization";
+// import { Behaviour } from "../Component";
+
+
+// export class CanvasScaler extends Behaviour {
+
+//     private _dynamicPixelsPerUnit: number = 1;
+
+//     @serializeable()
+//     get dynamicPixelsPerUnit(): number {
+//         return this._dynamicPixelsPerUnit;
+//     }
+
+//     private set dynamicPixelsPerUnit(val: number) {
+//         this._dynamicPixelsPerUnit = val;
+//     }
+
+//     awake() {
+//         console.log(this);
+//     }
+// }

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

@@ -11,6 +11,8 @@ import { InputEvents, KeyCode } from "../../engine/engine_input";
 import { Object3D } from "three";
 import { ICanvasGroup, IGraphic } from "./Interfaces";
 import { getParam } from "../../engine/engine_utils";
+import { UIRaycastUtils } from "./RaycastUtils";
+import { $shadowDomOwner } from "./BaseUIComponent";
 
 const debug = getParam("debugeventsystem");
 
@@ -298,6 +300,8 @@ export class EventSystem extends Behaviour {
     }
 
     private handleEventsArray: Array<Behaviour> = [];
+    private out: { canvasGroup?: ICanvasGroup } = {};
+
     private handleEvents(object: THREE.Object3D, args: PointerEventData): boolean {
 
         if (!this.testIsVisible(object)) {
@@ -318,20 +322,12 @@ export class EventSystem extends Behaviour {
         // handle potential shadow dom built from three mesh ui
         if (parent && parent.isUI) {
             const pressedOrClicked = (args.isPressed || args.isClicked) ?? false;
-            if (parent.shadowComponentOwner) {
-                const actualGo = parent.shadowComponentOwner.gameObject;
+            if (parent[$shadowDomOwner]) {
+                const actualGo = parent[$shadowDomOwner].gameObject;
                 if (actualGo) {
-                    canvasGroup = this.tryFindCanvasGroup(actualGo);
-                    if (canvasGroup?.isCanvasGroup === true) {
-                        if (canvasGroup.blocksRaycasts === false) return false;
-                        if (canvasGroup.interactable === false) return true;
-                    }
-                    // handle Graphic Raycast target
-                    const graphic = GameObject.foreachComponent(actualGo, c => {
-                        if (typeof (c as unknown as IGraphic).raycastTarget === "boolean") return c;
-                        return undefined;
-                    }, false);
-                    if (graphic?.raycastTarget === false) return false;
+                    const res = UIRaycastUtils.isInteractable(actualGo, this.out);
+                    if(!res) return this.out.canvasGroup?.interactable ?? false;
+                    canvasGroup = this.out.canvasGroup ?? null;
 
                     const handled = this.handleMeshUIIntersection(object, pressedOrClicked);
                     if (!clicked && handled) {
@@ -348,6 +344,8 @@ export class EventSystem extends Behaviour {
             }
         }
 
+        if (clicked)
+            console.log(this.context.time.frame, object);
         this.objectsHoveredThisFrame.push(object);
 
         if (canvasGroup === null || canvasGroup.interactable) {
@@ -429,18 +427,6 @@ export class EventSystem extends Behaviour {
         if (!GameObject.isActiveSelf(obj)) return false;
         return this.testIsVisible(obj.parent);
     }
-
-    private tryFindCanvasGroup(obj: THREE.Object3D | null): ICanvasGroup | null {
-        if (!obj) return null;
-        // test for canvas groups
-        const res = GameObject.foreachComponent(obj, c => {
-            const gr = c as unknown as ICanvasGroup;
-            if (gr.blocksRaycasts !== undefined && gr.interactable !== undefined) return gr;
-            return undefined;
-        }, false);
-        if (res !== undefined) return res;
-        return this.tryFindCanvasGroup(obj.parent);
-    }
 }
 
 

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

@@ -6,6 +6,7 @@ import { serializeable } from '../../engine/engine_serialization_decorator';
 import { Color, Texture } from 'three';
 import { RectTransform } from './RectTransform';
 import { onChange, scheduleAction } from "./Utils"
+import { GameObject } from '../Component';
 
 
 export class Graphic extends BaseUIComponent implements IGraphic {
@@ -45,7 +46,7 @@ export class Graphic extends BaseUIComponent implements IGraphic {
     private _rect: RectTransform | null = null;
     protected get rectTransform(): RectTransform {
         if (!this._rect) {
-            this._rect = this.gameObject.getComponent(RectTransform);
+            this._rect = GameObject.getComponent(this.gameObject, RectTransform);
         }
         return this._rect!;
     }

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

@@ -4,6 +4,7 @@ import { BaseUIComponent, includesDir } from './BaseUIComponent';
 import { Text } from './Text';
 import { getWorldScale } from '../../engine/engine_three_utils';
 import { RectTransform } from './RectTransform';
+import { GameObject } from '../Component';
 
 
 enum KeymapOption {
@@ -63,7 +64,7 @@ export class Keyboard extends BaseUIComponent {
 
         const fontName = this.font ? this.font : "arial";
 
-        const rt = this.gameObject.getComponent(RectTransform);
+        const rt = GameObject.getComponent(this.gameObject, RectTransform);
         if(!rt){
             console.error("Missing rect transform, please add this component inside a canvas");
             return;

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

@@ -0,0 +1,64 @@
+import { foreachComponent } from "../../engine/engine_gameobject";
+import { objectSerializer } from "../../engine/engine_serialization_builtin_serializer";
+import { IComponent } from "../../engine/engine_types";
+import { $shadowDomOwner } from "./BaseUIComponent";
+import { ICanvasGroup, IGraphic } from "./Interfaces";
+import { Object3D } from "three";
+
+
+export class UIRaycastUtils {
+
+    /** returns the real object when dealing with shadow UI */
+    static getObject(obj: Object3D): Object3D {
+        const shadowOwner = obj[$shadowDomOwner];
+        if(shadowOwner) 
+        {
+            if((shadowOwner as IComponent).isComponent === true) obj = (shadowOwner as IComponent).gameObject;
+            else obj = shadowOwner;
+        }
+        return obj;
+    };
+
+    static isInteractable(obj: THREE.Object3D, out?: { canvasGroup?: ICanvasGroup, graphic?: IGraphic }): boolean {
+        if(obj === null || obj === undefined || !obj.visible) return false;
+
+        obj = this.getObject(obj);
+
+        if(!obj.visible) return false;
+        
+        const canvasGroup = this.tryFindCanvasGroup(obj);
+        if (canvasGroup?.isCanvasGroup === true) {
+            if (out) out.canvasGroup = canvasGroup as ICanvasGroup;
+            if (canvasGroup.blocksRaycasts === false) return false;
+            if (canvasGroup.interactable === false) return false;
+        }
+        // handle Graphic Raycast target
+        const graphic = foreachComponent(obj, c => {
+            if ((c as unknown as IGraphic).isGraphic === true) return c;
+            return undefined;
+        }, false);
+        // console.log(obj, graphic?.raycastTarget);
+        if (out) {
+            if (graphic?.isGraphic === true)
+                out.graphic = graphic as IGraphic;
+        }
+        if (graphic?.raycastTarget === false) return false;
+
+        console.log(graphic);
+        return true;
+    }
+
+
+    private static tryFindCanvasGroup(obj: THREE.Object3D | null): ICanvasGroup | null {
+        if (!obj) return null;
+        // test for canvas groups
+        const res = foreachComponent(obj, c => {
+            const gr = c as unknown as ICanvasGroup;
+            if (gr.blocksRaycasts !== undefined && gr.interactable !== undefined) return gr;
+            return undefined;
+        }, false);
+        if (res !== undefined) return res;
+        return this.tryFindCanvasGroup(obj.parent);
+    }
+}
+

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

@@ -44,4 +44,6 @@ export class GraphicRaycaster extends ObjectRaycaster {
     eventCamera: Camera | null = null;
     ignoreReversedGraphics: boolean = false;
     rootRaycaster: GraphicRaycaster | null = null;
+
+
 }

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

@@ -1,6 +1,6 @@
 import { Graphic } from './Graphic';
 import * as ThreeMeshUI from 'three-mesh-ui'
-import { includesDir } from "./BaseUIComponent";
+import { $shadowDomOwner, includesDir } from "./BaseUIComponent";
 import { RectTransform } from './RectTransform';
 import { Color } from 'three';
 import { FrameEvent } from '../../engine/engine_setup';
@@ -163,11 +163,15 @@ export class Text extends Graphic {
     private _textContainer: any = null;
 
     private getTextOpts(): object {
+        let fontSize = this.fontSize;
+        // if (this.canvas) {
+        //     fontSize /= this.canvas?.scaleFactor;
+        // }
         const textOpts = {
             content: this.text,
             fontColor: this.color,
             fontOpacity: this.color.alpha,
-            fontSize: this.fontSize,
+            fontSize: fontSize,
             fontKerning: "normal",
         };
         this.font = this.font?.toLocaleLowerCase();
@@ -274,8 +278,8 @@ export class Text extends Graphic {
     private ensureShadowComponentOwner() {
         if (this.shadowComponent) {
             this.shadowComponent.traverse(c => {
-                if (c["shadowComponentOwner"] === undefined)
-                    c["shadowComponentOwner"] = this;
+                if (c[$shadowDomOwner] === undefined)
+                    c[$shadowDomOwner] = this;
             });
         }
     }

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

@@ -2,6 +2,7 @@
 import { FrontSide, DoubleSide, BackSide, TetrahedronGeometry } from "three"
 import { FrameEvent } from "../../engine/engine_setup";
 import { Behaviour, GameObject } from "../Component";
+import { $shadowDomOwner } from "./BaseUIComponent";
 
 // export function makeNonRaycastable(obj: THREE.Object3D | null | undefined, recursive: boolean = false) {
 //     if (!obj) return;
@@ -14,7 +15,7 @@ import { Behaviour, GameObject } from "../Component";
 // }
 
 export function isUIObject(obj: THREE.Object3D) {
-    return obj["isUI"] === true || typeof obj["shadowComponentOwner"] === "object";
+    return obj["isUI"] === true || typeof obj[$shadowDomOwner] === "object";
 }
 
 export type RenderSettings = {
@@ -27,7 +28,7 @@ export type RenderSettings = {
 
 export function updateRenderSettings(shadowComponent: THREE.Object3D, settings: RenderSettings) {
     if (!shadowComponent) return;
-    // const owner = shadowComponent["shadowComponentOwner"];
+    // const owner = shadowComponent[$shadowDomOwner];
     // if (!owner)
     //     console.log(shadowComponent)
     const mat = shadowComponent["material"];

package/src/needle-engine.ts

@@ -1,17 +1,20 @@
 import "./engine/engine_element";
 import "./engine/engine_setup";
-import * as Components from "./engine-components/codegen/components";
+import "./engine/codegen/register_types";
 // import "./engine/engine_mainloop";
 // import "./engine-components/DomOverlay";
 
+
 export { GameObject, Behaviour } from "./engine-components/Component";
 export { serializeable } from "./engine/engine_serialization_decorator";
-export { Collision } from "./engine/engine_physics";
+export { Collision } from "./engine/engine_types";
+export * from "./engine/api";
 export * from "./engine-components/codegen/components";
 
 
 export * from "./engine-components/js-extensions/Object3D";
 
+
 // make accessible for external javascript
 import { Context } from "./engine/engine_setup";
 const Needle = { Context: Context };
@@ -23,6 +26,8 @@ function registerGlobal(obj: object) {
 }
 import * as Component from "./engine-components/Component";
 registerGlobal(Component);
+
+import * as Components from "./engine-components/codegen/components";
 registerGlobal(Components);
 
 import { GameObject } from "./engine-components/Component";