Needle Engine 3.26.1-beta

Files changed (3) hide show

src/engine-components/ui/Button.ts +1 -1
src/engine-components/ui/EventSystem.ts +33 -14
src/engine-components/ui/PointerEvents.ts +15 -1

src/engine-components/ui/Button.ts CHANGED Viewed

@@ -118,7 +118,7 @@
     }
     onPointerClick(args: PointerEventData) {
-        if (!this.interactable || args.pointerId === undefined) return;
+        if (!this.interactable || args.pointerId !== 0) return;
         // Button clicks should only run with left mouse button while using mouse
         if(args.pointerId !== 0 && this.context.input.getIsMouse(args.pointerId)) return;

src/engine-components/ui/EventSystem.ts CHANGED Viewed

@@ -14,6 +14,7 @@
 import { $shadowDomOwner } from "./BaseUIComponent.js";
 import { isDevEnvironment, showBalloonMessage } from "../../engine/debug/index.js";
 import { Mathf } from "../../engine/engine_math.js";
+import { isUIObject } from "./Utils.js";
 const debug = getParam("debugeventsystem");
@@ -222,22 +223,22 @@
         // On mouse input has to be always 0 regardless of the button user pressed
         // because otherwise it would be taken as 3 unique pointers and create OnEnter and OnExit events which is not expected
-        const pointerId = pointerEvent.pointerType == PointerType.Touch ? pointerEvent.button : 0;
+        const id = pointerEvent.pointerType == PointerType.Touch ? pointerEvent.button : 0;
         const data = new PointerEventData(this.context.input, pointerEvent);
         data.inputSource = this.context.input;
-        data.pointerId = pointerId;
-        data.isClicked = pointerEvent.type == InputEvents.PointerUp && this.context.input.getPointerClicked(pointerId)
+        data.pointerId = pointerEvent.button;
+        data.isClicked = pointerEvent.type == InputEvents.PointerUp && this.context.input.getPointerClicked(pointerEvent.button)
         // using the input type directly instead of input API -> otherwise onMove events can sometimes be getPointerUp() == true
         data.isDown = pointerEvent.type == InputEvents.PointerDown;
         data.isUp = pointerEvent.type == InputEvents.PointerUp;
-        data.isPressed = this.context.input.getPointerPressed(pointerId);
+        data.isPressed = this.context.input.getPointerPressed(pointerEvent.button);
-        if (debug && data.isClicked) console.log("CLICK", pointerId);
+        if (debug && data.isClicked) console.log("CLICK", data.pointerId);
         // raycast
         const options = new RaycastOptions();
-        options.screenPoint = this.context.input.getPointerPositionRC(pointerId)!;
+        options.screenPoint = this.context.input.getPointerPositionRC(id)!;
         const hits = this.performRaycast(options);
         if (!hits) return;
@@ -259,17 +260,17 @@
             // pointer has not hit any object to handle
             // thus is not hovering over anything
-            const hoveredData = this.hoveredByID.get(pointerId);
+            const hoveredData = this.hoveredByID.get(id);
             if (hoveredData) {
                 this.triggerOnExit(hoveredData.obj, hoveredData.data);
             }
-            this.hoveredByID.delete(pointerId);
+            this.hoveredByID.delete(id);
             // if it was up, it means it doesn't should notify things that it down on before
             if (data.isUp) {
-                const pressedData = this.pressedByID.get(pointerId);
+                const pressedData = this.pressedByID.get(id);
                 pressedData?.handlers.forEach(h => h.onPointerUp?.call(h, data));
-                this.pressedByID.delete(pointerId);
+                this.pressedByID.delete(id);
             }
         }
@@ -293,19 +294,32 @@
      * For example if an event component has only an onPointerClick method we don't need to raycast during movement events
      * */
     private shouldRaycastObject = (obj: Object3D): RaycastTestObjectReturnType => {
+        // check if this object is actually a UI shadow hierarchy object
+        let shadowComponent: Object3D | null = null;
+        const isUI = isUIObject(obj);
+        // if yes we want to grab the actual object that is the owner of the shadow dom
+        // and check that object for the event component
+        if (isUI) {
+            shadowComponent = obj[$shadowDomOwner]?.gameObject;
+        }
         // check if the object was seen previously
-        if (this._testObjectsCache.has(obj)) {
+        if (this._testObjectsCache.has(obj) || (shadowComponent && this._testObjectsCache.has(shadowComponent))) {
             // if yes we check if it was previously stored as "YES WE NEED TO RAYCAST THIS"
             const prev = this._testObjectsCache.get(obj)!;
-            if (!prev) return "continue in children"
+            if (prev === false) return "continue in children"
             return true;
         }
         else {
             // the object was not yet seen so we test if it has an event component
-            const hasEventComponent = hasPointerEventComponent(obj);
+            let hasEventComponent = hasPointerEventComponent(obj);
+            if (!hasEventComponent && shadowComponent) hasEventComponent = hasPointerEventComponent(shadowComponent);
             if (hasEventComponent) {
-                // console.log("YES RAYCAST", obj.name)
                 // it has an event component: we add it and all its children to the cache
+                // we don't need to do the same for the shadow component hierarchy
+                // because the next object that will be detecting that the shadow owner was already seen
                 this._testObjectsCache.set(obj, true);
                 obj.traverse((o) => {
                     this._testObjectsCache.set(o, true);
@@ -353,6 +367,11 @@
         hits = this.sortCandidates(hits);
         for (const hit of hits) {
             const { object } = hit;
+            args.point = hit.point;
+            args.normal = hit.normal;
+            args.face = hit.face;
+            args.distance = hit.distance;
+            args.instanceId = hit.instanceId;
             if (this.handleEventOnObject(object, args)) {
                 return true;
             }

src/engine-components/ui/PointerEvents.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { GameObject } from "../Component.js";
 import { Input, NEPointerEvent } from "../../engine/engine_input.js";
-import { Object3D } from "three";
+import { Face, Object3D, Vector3 } from "three";
 export interface IInputEventArgs {
     get used(): boolean;
@@ -33,8 +33,18 @@
         this._event?.stopImmediatePropagation();
     }
+    /** Who initiated this event */
     inputSource: Input | any;
+    /** The object this event hit or interacted with */
     object!: THREE.Object3D;
+    /** The world position of this event */
+    point?: Vector3;
+    /** The world normal of this event */
+    normal?: Vector3;
+    face?: Face | null;
+    distance?: number;
+    instanceId?: number;
     pointerId: number | undefined;
     isDown: boolean | undefined;
@@ -42,6 +52,9 @@
     isPressed: boolean | undefined;
     isClicked: boolean | undefined;
+    /** mouse button 0 === LEFT, 1 === MIDDLE, 2 === RIGHT */
+    readonly button: number | string;
     private input: Input;
     private _event?: NEPointerEvent;
@@ -50,6 +63,7 @@
     constructor(input: Input, event?: NEPointerEvent) {
         this._event = event;
         this.input = input;
+        this.button = event?.button ?? 0;
     }
     clone() {