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

package/src/engine-components/WebXRController.ts

@@ -11,9 +11,11 @@ import { XRInputSource, XRSession } from "three";
 import { Mathf } from "../engine/engine_math";
 import * as utils from "../engine/engine_three_utils"
 import { Interactable, UsageMarker } from "./Interactable";
-import { InstancingUtil } from "./Renderer";
+import { InstancingUtil } from "../engine/engine_instancing";
 import { Rigidbody } from "./RigidBody";
-import { getParam } from "../engine/engine_utils";
+import { delay, getParam } from "../engine/engine_utils";
+import { UIRaycastUtils } from "./ui/RaycastUtils";
+import { RaycastResult } from "cannon-es";
 
 const debug = getParam("debugwebxrcontroller");
 
@@ -119,12 +121,22 @@ export class WebXRController extends Behaviour {
         return ctrl;
     }
 
+    // TODO: replace with component events
     public static addEventListener(evt: ControllerEvents, callback: (controller: WebXRController, args: any) => void) {
         const list = this.eventSubs[evt] ?? [];
         list.push(callback);
         this.eventSubs[evt] = list;
     }
 
+    // TODO: replace with component events
+    public static removeEventListener(evt: ControllerEvents, callback: (controller: WebXRController, args: any) => void) {
+        if (!callback) return;
+        const list = this.eventSubs[evt] ?? [];
+        const idx = list.indexOf(callback);
+        if (idx >= 0) list.splice(idx, 1);
+        this.eventSubs[evt] = list;
+    }
+
     private static eventSubs: { [key: string]: Function[] } = {};
 
     public webXR!: WebXR;
@@ -558,6 +570,7 @@ export class WebXRController extends Behaviour {
         if (this.webXR.Rig) {
             factor /= this.webXR.Rig.scale.x;
         }
+        // if (!hit) factor = 0;
 
         if (this.raycastLine) {
             this.raycastLine.scale.z = factor * (this.lastHit?.distance ?? 9999);
@@ -615,11 +628,11 @@ export class WebXRController extends Behaviour {
         if (intersections && intersections.length > 0) {
             for (const intersection of intersections) {
                 const object = intersection.object;
-                if (!this.testIsVisible(object)) {
-                    if (debug)
-                        console.log("not visible");
-                    continue;
-                }
+                // if (!this.testIsVisible(object)) {
+                //     if (debug)
+                //         console.log("not visible");
+                //     continue;
+                // }
                 this.lastSelectStartObject = object;
                 const args = { selected: object, grab: object };
                 const subs = WebXRController.eventSubs[ControllerEvents.SelectStart];
@@ -677,8 +690,12 @@ export class WebXRController extends Behaviour {
     }
 
     private testIsVisible(obj: THREE.Object3D | null): boolean {
-        if (!obj) return true;
-        return GameObject.isActiveInHierarchy(obj);
+        if (!obj) return false;
+        if (GameObject.isActiveInHierarchy(obj) === false) return false;
+        if (UIRaycastUtils.isInteractable(obj) === false) {
+            return false;
+        }
+        return true;
         // if (!obj.visible) return false;
         // return this.testIsVisible(obj.parent);
     }
@@ -719,7 +736,20 @@ export class WebXRController extends Behaviour {
         opts.layerMask = new THREE.Layers();
         opts.layerMask.set(0);
         opts.ray = this.getRay();
-        return this.context.physics.raycast(opts);
+        const hits = this.context.physics.raycast(opts);
+        for (let i = 0; i < hits.length; i++) {
+            const hit = hits[i];
+            const obj = hit.object;
+            if (!this.testIsVisible(obj)) {
+                hits.splice(i, 1);
+                i--;
+                continue;
+            }
+            hit.object = UIRaycastUtils.getObject(obj);
+            break;
+        }
+        // console.log(...hits);
+        return hits;
     }
 }
 

package/src/engine-components/WebXRGrabRendering.ts

@@ -1,10 +1,10 @@
-import { IModel, SendQueue } from "../engine/engine_networking";
 import { getWorldPosition, setWorldPosition, setWorldPositionXYZ } from "../engine/engine_three_utils";
 import { Behaviour, GameObject } from "./Component";
 import { AttachedObject, AttachedObjectEvents } from "./WebXRController";
 import * as THREE from "three";
 import { PlayerColor } from "./PlayerColor";
 import { Context } from "../engine/engine_setup";
+import { IModel, SendQueue } from "../engine/engine_networking_types";
 
 enum XRGrabEvent {
     StartOrUpdate = "xr-grab-visual-start-or-update",

package/src/engine-components/WebXRSync.ts

@@ -182,7 +182,7 @@ export class WebXRSync extends Behaviour {
 
     async awake() {
 
-        if(!this.webXR) this.webXR = this.gameObject.getComponent(WebXR);
+        if(!this.webXR) this.webXR = GameObject.getComponent(this.gameObject, WebXR);
         if(!this.webXR) this.webXR = GameObject.findObjectOfType(WebXR, this.context);
 
         if(!this.webXR) 

package/src/engine-components/avatar/Avatar_Brain_LookAt.ts

@@ -3,9 +3,10 @@ import { TypeStore } from "../../engine/engine_typestore";
 import { Behaviour, GameObject } from "../Component";
 import { AvatarMarker } from "../WebXRAvatar";
 import * as utils from "../../engine/engine_three_utils";
-import { IModel, OwnershipModel } from "../../engine/engine_networking";
+import { OwnershipModel } from "../../engine/engine_networking";
 import { Int8BufferAttribute } from "three";
 import { Context } from "../../engine/engine_setup";
+import { IModel } from "../../engine/engine_networking_types";
 
 export class Avatar_POI {
 

package/src/engine-components/codegen/components.ts

@@ -16,7 +16,6 @@ export { Camera } from "../Camera";
 export { Collider } from "../Collider";
 export { SphereCollider } from "../Collider";
 export { BoxCollider } from "../Collider";
-export { InstantiateOptions } from "../Component";
 export { DeleteBox } from "../DeleteBox";
 export { Deletable } from "../DeleteBox";
 export { DeviceFlag } from "../DeviceFlag";
@@ -55,7 +54,6 @@ export { FieldWithDefault } from "../Renderer";
 export { Renderer } from "../Renderer";
 export { MeshRenderer } from "../Renderer";
 export { SkinnedMeshRenderer } from "../Renderer";
-export { InstancingUtil } from "../Renderer";
 export { RendererLightmap } from "../RendererLightmap";
 export { Rigidbody } from "../RigidBody";
 export { ScreenCapture } from "../ScreenCapture";
@@ -133,6 +131,7 @@ export { PointerEventData } from "../ui/PointerEvents";
 export { Raycaster } from "../ui/Raycaster";
 export { ObjectRaycaster } from "../ui/Raycaster";
 export { GraphicRaycaster } from "../ui/Raycaster";
+export { UIRaycastUtils } from "../ui/RaycastUtils";
 export { Size } from "../ui/RectTransform";
 export { Rect } from "../ui/RectTransform";
 export { RectTransform } from "../ui/RectTransform";

package/src/engine-components/js-extensions/ExtensionUtils.ts

@@ -0,0 +1,66 @@
+
+const handlers : Map<any, ApplyPrototypeExtension> = new Map();
+
+export function applyPrototypeExtensions(obj : any){
+    if(!obj) return;
+    const prototype = obj.prototype;
+    if(!prototype) return;
+    let handler = handlers.get(prototype);
+    if(!handler){
+        handler = createPrototypeExtensionHandler(prototype);
+        handlers.set(prototype, handler);
+    }
+    handler.apply(obj);
+}
+
+function createPrototypeExtensionHandler(prototype: any) { 
+    return new ApplyPrototypeExtension(prototype);
+}
+
+export interface IApplyPrototypeExtension {
+    apply(object: object): void;
+}
+
+class ApplyPrototypeExtension implements IApplyPrototypeExtension {
+
+    private readonly $symbol: symbol;
+    private readonly extensions: string[];
+    private readonly descriptors: Array<PropertyDescriptor | undefined>;
+
+    constructor(prototype: object) {
+        this.$symbol = Symbol("prototype-extension");
+        // used to decorate cloned object3D objects with the same added components defined above
+        this.extensions = Object.keys(prototype);
+        this.descriptors = new Array<PropertyDescriptor | undefined>();
+        for (let i = 0; i < this.extensions.length; i++) {
+            const key = this.extensions[i];
+            const descriptor = Object.getOwnPropertyDescriptor(prototype, key);
+            if (descriptor) {
+                this.descriptors.push(descriptor);
+            }
+        }
+    }
+
+    apply(object: object): void {
+
+        if (object[this.$symbol]) return;
+        object[this.$symbol] = true;
+
+        // const prototype = object.constructor.prototype;
+
+        for (let i = 0; i < this.extensions.length; i++) {
+            const key = this.extensions[i];
+            const desc = this.descriptors[i];
+            if (desc) {
+                // if (prototype) {
+                //     const exists = Object.getOwnPropertyDescriptor(prototype, key);
+                //     if (exists) {
+                //         continue;
+                //     }
+                // }
+                // console.trace("DEFINE", object.name, key);
+                Object.defineProperty(object, key, desc);
+            }
+        }
+    }
+}

package/src/engine-components/js-extensions/Object3D.ts

@@ -1,7 +1,15 @@
+import { applyPrototypeExtensions } from "./ExtensionUtils";
 import { Object3D } from "three";
-import { Behaviour, Component, Constructor, ConstructorConcrete, GameObject } from "../Component";
+import { Constructor, ConstructorConcrete, IComponent } from "../../engine/engine_types"
+import { IComponent as Component } from "../../engine/engine_types";
+import { addNewComponentInstance, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components";
+
+// used to decorate cloned object3D objects with the same added components defined above
+export function apply(object: Object3D) {
+    if (object && object.isObject3D === true)
+        applyPrototypeExtensions(object);
+}
 
-const decorated = Symbol("GameObject.decorated");
 
 // this is a fix to allow gameObject active animation be applied to a three object
 Object.defineProperty(Object3D.prototype, "activeSelf", {
@@ -20,72 +28,38 @@ Object3D.prototype["SetActive"] = function (active: boolean) {
     this.visible = active;
 }
 
-Object3D.prototype["addNewComponent"] = function <T extends Behaviour>(type: ConstructorConcrete<T>) {
-    return GameObject.addNewComponent(this, type);
+Object3D.prototype["addNewComponent"] = function <T extends Component>(type: ConstructorConcrete<T>) {
+    return addNewComponentInstance(this, new type());
 }
 
 Object3D.prototype["removeComponent"] = function (inst: Component) {
-    return GameObject.removeComponent(inst);
+    return removeComponent(this, inst);
 }
 
-Object3D.prototype["getOrAddComponent"] = function <T>(typeName: Constructor<T> | null): T {
-    return GameObject.getOrAddComponent(this, typeName);
+Object3D.prototype["getOrAddComponent"] = function <T extends IComponent>(typeName: ConstructorConcrete<T>): T {
+    return getOrAddComponent<T>(this, typeName);
 }
 
 Object3D.prototype["getComponent"] = function <T>(type: Constructor<T>) {
-    return GameObject.getComponent(this, type);
+    return getComponent(type, this);
 }
 
 Object3D.prototype["getComponents"] = function <T>(type: Constructor<T>, arr?: []) {
-    return GameObject.getComponents(this, type, arr);
+    return getComponents(this, type, arr);
 }
 
 Object3D.prototype["getComponentInChildren"] = function <T>(type: Constructor<T>) {
-    return GameObject.getComponentInChildren(this, type);
+    return getComponentInChildren(this, type);
 }
 
-Object3D.prototype["getComponentsInChildren"] = function <T>(type: Constructor<T>, arr?: []) {
-    return GameObject.getComponentsInChildren(this, type, arr);
+Object3D.prototype["getComponentsInChildren"] = function <T extends IComponent>(type: Constructor<T>, arr?: []) {
+    return getComponentsInChildren(type, this, arr);
 }
 
 Object3D.prototype["getComponentInParent"] = function <T>(type: Constructor<T>) {
-    return GameObject.getComponentInParent(this, type);
+    return getComponentInParent(this, type);
 }
 
 Object3D.prototype["getComponentsInParent"] = function <T>(type: Constructor<T>, arr?: []) {
-    return GameObject.getComponentsInParent(this, type, arr);
-}
-
-
-// used to decorate cloned object3D objects with the same added components defined above
-const extensions = Object.keys(Object3D.prototype);
-const descriptors = new Array<PropertyDescriptor | undefined>();
-for (let i = 0; i < extensions.length; i++) {
-    const key = extensions[i];
-    const descriptor = Object.getOwnPropertyDescriptor(Object3D.prototype, key);
-    if (descriptor) {
-        descriptors.push(descriptor);
-    }
+    return getComponentsInParent(this, type, arr);
 }
-
-export function apply(object: Object3D) {
-    if (object[decorated]) return;
-    object[decorated] = true;
-
-    // const prototype = object.constructor.prototype;
-
-    for (let i = 0; i < extensions.length; i++) {
-        const key = extensions[i];
-        const desc = descriptors[i];
-        if (desc) {
-            // if (prototype) {
-            //     const exists = Object.getOwnPropertyDescriptor(prototype, key);
-            //     if (exists) {
-            //         continue;
-            //     }
-            // }
-            // console.trace("DEFINE", object.name, key);
-            Object.defineProperty(object, key, desc);
-        }
-    }
-}

package/src/engine-components/js-extensions/Vector.ts

@@ -0,0 +1,17 @@
+import { applyPrototypeExtensions } from "./ExtensionUtils";
+import { Mathf } from "../../engine/engine_math";
+import { Vector3 } from "three";
+
+export function apply(object: Vector3) {
+    if (object && object.isVector3 === true) {
+        console.log(object);
+        applyPrototypeExtensions(object);
+    }
+}
+
+Vector3.prototype["slerp"] = function (end: Vector3, t: number) {
+    const len1 = this.length();
+    const len2 = end.length();
+    const targetLen = Mathf.lerp(len1, len2, t);
+    return this.lerp(end, t).normalize().multiplyScalar(targetLen);
+}

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

@@ -1,5 +1,5 @@
 import { Animator } from '../Animator';
-import { Behaviour, GameObject, GuidsMap } from '../Component';
+import { Behaviour, GameObject } from '../Component';
 import * as THREE from 'three';
 import { AudioListener } from '../AudioListener';
 import { AudioSource } from '../AudioSource';
@@ -7,6 +7,7 @@ import { SignalReceiver } from './SignalAsset';
 import * as Models from "./TimelineModels";
 import * as Tracks from "./TimelineTracks";
 import { deepClone, getParam } from '../../engine/engine_utils';
+import { GuidsMap } from '../../engine/engine_types';
 
 const debug = getParam("debugtimeline");
 

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");
 
@@ -75,9 +77,13 @@ export class EventSystem extends Behaviour {
         }
     }
 
+    private _selectStartFn?: any;
+    private _selectEndFn?: any;
+    private _selectUpdateFn?: any;
+
     onEnable(): void {
 
-        WebXRController.addEventListener(ControllerEvents.SelectStart, (ctrl, args: { grab: THREE.Object3D | null }) => {
+        this._selectStartFn ??= (ctrl, args: { grab: THREE.Object3D | null }) => {
             if (!args.grab) return;
             MeshUIHelper.resetLastSelected();
             const opts = new PointerEventData();
@@ -88,11 +94,9 @@ export class EventSystem extends Behaviour {
             opts.isClicked = false;
             if (args.grab && !this.handleEvents(args.grab, opts)) {
                 args.grab = null;
-            }
-        });
-
-        const controllerRcOpts = new RaycastOptions();
-        WebXRController.addEventListener(ControllerEvents.SelectEnd, (ctrl, args: { grab: THREE.Object3D }) => {
+            };
+        }
+        this._selectEndFn ??= (ctrl, args: { grab: THREE.Object3D }) => {
             if (!args.grab) return;
             const opts = new PointerEventData();
             opts.inputSource = ctrl;
@@ -101,23 +105,30 @@ export class EventSystem extends Behaviour {
             opts.isPressed = ctrl.selectionPressed;
             opts.isClicked = ctrl.selectionClick;
             this.handleEvents(args.grab, opts);
-        });
+        };
 
-        WebXRController.addEventListener(ControllerEvents.Update, (_ctrl: WebXRController) => {
+        const controllerRcOpts = new RaycastOptions();
+        this._selectUpdateFn ??= (_ctrl: WebXRController) => {
             controllerRcOpts.ray = _ctrl.getRay();
             const rc = this.performRaycast(controllerRcOpts);
             if (!rc) return;
             const opts = new PointerEventData();
             opts.inputSource = _ctrl;
             this.handleIntersections(rc, opts);
-        });
+        };
+
+        WebXRController.addEventListener(ControllerEvents.SelectStart, this._selectStartFn);
+        WebXRController.addEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
+        WebXRController.addEventListener(ControllerEvents.Update, this._selectUpdateFn);
 
         this.context.pre_update_callbacks.push(this.onBeforeUpdate.bind(this));
         this.context.input.addEventListener(InputEvents.PointerDown, this.onPointerDown.bind(this));
     }
 
     onDisable(): void {
-        // TODO: unsubscribe from controller events
+        WebXRController.removeEventListener(ControllerEvents.SelectStart, this._selectStartFn);
+        WebXRController.removeEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
+        WebXRController.removeEventListener(ControllerEvents.Update, this._selectUpdateFn);
     }
 
     onPointerDown() {
@@ -289,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)) {
@@ -309,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) {
@@ -339,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) {
@@ -420,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!;
     }