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

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