@needle-tools/engine 3.28.7-beta → 3.28.7-beta.1

package/lib/engine-components/ui/EventSystem.js

@@ -1,642 +1,642 @@
-import { RaycastOptions } from "../../engine/engine_physics.js";
-import { Behaviour, GameObject } from "../Component.js";
-import { ControllerEvents, WebXRController } from "../webxr/WebXRController.js";
-import { Context } from "../../engine/engine_setup.js";
-import { PointerEventData, hasPointerEventComponent } from "./PointerEvents.js";
-import { ObjectRaycaster, Raycaster } from "./Raycaster.js";
-import { InputEvents, PointerType } from "../../engine/engine_input.js";
-import { Object3D } from "three";
-import { getParam } from "../../engine/engine_utils.js";
-import { UIRaycastUtils } from "./RaycastUtils.js";
-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");
-export var EventSystemEvents;
-(function (EventSystemEvents) {
-    EventSystemEvents["BeforeHandleInput"] = "BeforeHandleInput";
-    EventSystemEvents["AfterHandleInput"] = "AfterHandleInput";
-})(EventSystemEvents || (EventSystemEvents = {}));
-export class EventSystem extends Behaviour {
-    static _eventSystemMap = new Map();
-    static didSearchEventSystem = false;
-    static createIfNoneExists(context) {
-        if (!this.didSearchEventSystem) {
-            this.didSearchEventSystem = true;
-            if (EventSystem.systems.length <= 0) {
-                EventSystem.systems.push(...GameObject.findObjectsOfType(EventSystem, context));
-            }
-        }
-        for (const sys of EventSystem.systems) {
-            if (sys.context === context)
-                return; // exists
-        }
-        const go = new Object3D();
-        GameObject.addNewComponent(go, EventSystem);
-        context.scene.add(go);
-    }
-    static get systems() {
-        const context = Context.Current;
-        if (!this._eventSystemMap.has(context)) {
-            this._eventSystemMap.set(context, []);
-        }
-        return this._eventSystemMap.get(context);
-    }
-    static get(ctx) {
-        const systems = this._eventSystemMap.get(ctx);
-        if (systems && systems.length > 0)
-            return systems[0];
-        return null;
-    }
-    static get instance() {
-        return this.systems[0];
-    }
-    //@ts-ignore
-    static ensureUpdateMeshUI(instance, context, force = false) {
-        MeshUIHelper.update(instance, context, force);
-    }
-    static markUIDirty(_context) {
-        MeshUIHelper.markDirty();
-    }
-    raycaster = [];
-    constructor() {
-        super();
-        EventSystem.systems.push(this);
-    }
-    get hasActiveUI() { return this.currentActiveMeshUIComponents.length > 0; }
-    get isHoveringObjects() { return this.hoveredByID.size > 0; }
-    onDestroy() {
-        EventSystem.systems.splice(EventSystem.systems.indexOf(this), 1);
-    }
-    start() {
-        if (this.raycaster.length <= 0) {
-            const res = GameObject.findObjectOfType(Raycaster, this.context);
-            if (!res) {
-                const rc = GameObject.addNewComponent(this.context.scene, ObjectRaycaster);
-                rc.ignoreSkinnedMeshes = true;
-                this.raycaster.push(rc);
-                if (isDevEnvironment() || debug)
-                    console.warn("Added an ObjectRaycaster to the scene because no raycaster was found. Skinnedmeshes will be ignored for better performance");
-            }
-        }
-    }
-    register(rc) {
-        if (rc && this.raycaster && !this.raycaster.includes(rc))
-            this.raycaster?.push(rc);
-    }
-    unregister(rc) {
-        const i = this.raycaster?.indexOf(rc);
-        if (i !== undefined && i !== -1) {
-            this.raycaster?.splice(i, 1);
-        }
-    }
-    _selectStartFn;
-    _selectEndFn;
-    _selectUpdateFn;
-    _handleEventCycleFn;
-    _handleInputFn;
-    onEnable() {
-        const grabbed = new Map();
-        this._selectStartFn ??= (ctrl, args) => {
-            if (!args.grab)
-                return;
-            MeshUIHelper.resetLastSelected();
-            const opts = new PointerEventData(this.context.input);
-            opts.inputSource = ctrl;
-            opts.pointerId = 0;
-            opts.isDown = ctrl.selectionDown;
-            opts.isUp = ctrl.selectionUp;
-            opts.isPressed = ctrl.selectionPressed;
-            opts.isClicked = false;
-            grabbed.set(ctrl, args.grab);
-            if (args.grab && !this.handleEventOnObject(args.grab, opts)) {
-                args.grab = null;
-            }
-            ;
-        };
-        this._selectEndFn ??= (ctrl, args) => {
-            if (!args.grab)
-                return;
-            const opts = new PointerEventData(this.context.input);
-            opts.inputSource = ctrl;
-            opts.pointerId = 0;
-            opts.isDown = ctrl.selectionDown;
-            opts.isUp = ctrl.selectionUp;
-            opts.isPressed = ctrl.selectionPressed;
-            opts.isClicked = ctrl.selectionClick;
-            this.handleEventOnObject(args.grab, opts);
-            const prevGrabbed = grabbed.get(ctrl);
-            grabbed.set(ctrl, null);
-            if (prevGrabbed) {
-                for (const key of this.pressedByID.keys()) {
-                    const e = this.pressedByID[key];
-                    if (e && e.obj === prevGrabbed && e.handler) {
-                        e.handler.onPointerUp?.call(e.handler, opts);
-                        this.pressedByID.delete(key);
-                    }
-                }
-            }
-        };
-        const controllerRcOpts = new RaycastOptions();
-        this._selectUpdateFn ??= (_ctrl) => {
-            controllerRcOpts.ray = _ctrl.getRay();
-            const rc = this.performRaycast(controllerRcOpts) ?? [];
-            const opts = new PointerEventData(this.context.input);
-            opts.inputSource = _ctrl;
-            opts.pointerId = _ctrl.input?.handedness === "right" ? 0 : 1;
-            opts.isDown = _ctrl.selectionDown;
-            opts.isUp = _ctrl.selectionUp;
-            opts.isPressed = _ctrl.selectionPressed;
-            opts.isClicked = false;
-            this.handleIntersections(opts.pointerId, rc, opts);
-        };
-        WebXRController.addEventListener(ControllerEvents.SelectStart, this._selectStartFn);
-        WebXRController.addEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
-        WebXRController.addEventListener(ControllerEvents.Update, this._selectUpdateFn);
-        this._handleInputFn = this.onPointerEvent.bind(this);
-        this.context.input.addEventListener(InputEvents.PointerDown, this._handleInputFn);
-        this.context.input.addEventListener(InputEvents.PointerUp, this._handleInputFn);
-        this.context.input.addEventListener(InputEvents.PointerMove, this._handleInputFn);
-    }
-    onDisable() {
-        WebXRController.removeEventListener(ControllerEvents.SelectStart, this._selectStartFn);
-        WebXRController.removeEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
-        WebXRController.removeEventListener(ControllerEvents.Update, this._selectUpdateFn);
-        this.context.input.removeEventListener(InputEvents.PointerDown, this._handleInputFn);
-        this.context.input.removeEventListener(InputEvents.PointerUp, this._handleInputFn);
-        this.context.input.removeEventListener(InputEvents.PointerMove, this._handleInputFn);
-    }
-    /**
-     * all pointers that have pressed something
-     *
-     * key: pointerId
-     * value: object that was pressed, data of the pointer event, handlers that are releavant to the event
-    */
-    pressedByID = new Map();
-    /**
-     * all hovered objects
-     *
-     * key: pointerId
-     * value: object that is hovered, data of the pointer event
-     */
-    hoveredByID = new Map();
-    onBeforeRender() {
-        this.resetMeshUIStates();
-    }
-    /**
-     * Handle an pointer event from the input system
-     */
-    onPointerEvent(pointerEvent) {
-        if (pointerEvent === undefined)
-            return;
-        // 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 id = pointerEvent.pointerType == PointerType.Touch ? pointerEvent.button : 0;
-        const data = new PointerEventData(this.context.input, pointerEvent);
-        data.inputSource = this.context.input;
-        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(pointerEvent.button);
-        if (debug && data.isClicked)
-            console.log("CLICK", data.pointerId);
-        // raycast
-        const options = new RaycastOptions();
-        options.screenPoint = this.context.input.getPointerPositionRC(id);
-        const hits = this.performRaycast(options);
-        if (!hits)
-            return;
-        if (debug && data.isClicked) {
-            showBalloonMessage("EventSystem: " + data.pointerId + " - " + this.context.time.frame + " - Up:" + data.isUp + ", Down:" + data.isDown);
-        }
-        const evt = {
-            sender: this,
-            args: data,
-            hasActiveUI: this.currentActiveMeshUIComponents.length > 0,
-        };
-        this.dispatchEvent(new CustomEvent(EventSystemEvents.BeforeHandleInput, { detail: evt }));
-        // handle hit objects
-        this.handleIntersections(id, hits, data);
-        this.dispatchEvent(new CustomEvent(EventSystemEvents.AfterHandleInput, { detail: evt }));
-    }
-    _sortedHits = [];
-    /**
-     * cache for objects that we want to raycast against. It's cleared before each call to performRaycast invoking raycasters
-     */
-    _testObjectsCache = new Map();
-    /**
-     * Checks if an object that we encounter has an event component and if it does, we add it to our objects cache
-     * If it doesnt we tell our raycasting system to ignore it and continue in the child hierarchy
-     * We do this to avoid raycasts against objects that are not going to be used by the event system
-     * Because there's no component callback to be invoked anyways.
-     * This is especially important to avoid expensive raycasts against SkinnedMeshes
-     *
-     * Further optimizations would be to check what type of event we're dealing with
-     * For example if an event component has only an onPointerClick method we don't need to raycast during movement events
-     * */
-    shouldRaycastObject = (obj) => {
-        // check if this object is actually a UI shadow hierarchy object
-        let shadowComponent = 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) || (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 === false)
-                return "continue in children";
-            return true;
-        }
-        else {
-            // the object was not yet seen so we test if it has an event component
-            let hasEventComponent = hasPointerEventComponent(obj);
-            if (!hasEventComponent && shadowComponent)
-                hasEventComponent = hasPointerEventComponent(shadowComponent);
-            if (hasEventComponent) {
-                // 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);
-                });
-                return true;
-            }
-            this._testObjectsCache.set(obj, false);
-            return "continue in children";
-        }
-    };
-    /** the raycast filter is always overriden */
-    performRaycast(opts) {
-        if (!this.raycaster)
-            return null;
-        this._sortedHits.length = 0;
-        if (!opts)
-            opts = new RaycastOptions();
-        // we clear the cache of previously seen objects
-        this._testObjectsCache.clear();
-        opts.testObject = this.shouldRaycastObject;
-        for (const rc of this.raycaster) {
-            if (!rc.activeAndEnabled)
-                continue;
-            const res = rc.performRaycast(opts);
-            if (res && res.length > 0) {
-                // console.log(res.length, res.map(r => r.object.name));
-                this._sortedHits.push(...res);
-            }
-        }
-        this._sortedHits.sort((a, b) => {
-            return a.distance - b.distance;
-        });
-        return this._sortedHits;
-    }
-    handleIntersections(id, hits, args) {
-        if (hits?.length) {
-            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;
-                }
-            }
-        }
-        // pointer has not hit any object to handle
-        // thus is not hovering over anything
-        const hoveredData = this.hoveredByID.get(id);
-        if (hoveredData) {
-            this.triggerOnExit(hoveredData.obj, hoveredData.data);
-        }
-        this.hoveredByID.delete(id);
-        // if it was up, it means it doesn't should notify things that it down on before
-        if (args.isUp) {
-            const pressedData = this.pressedByID.get(id);
-            pressedData?.handlers.forEach(h => h.onPointerUp?.call(h, args));
-            this.pressedByID.delete(id);
-        }
-        return false;
-    }
-    _sortingBuffer = [];
-    _noDepthTestingResults = [];
-    sortCandidates(hits) {
-        // iterate over all hits and filter for nodepth objects and normal hit objects
-        // the no-depth objects will be handled first starting from the closest
-        // assuming the hits array is sorted by distance (closest > furthest)
-        this._sortingBuffer.length = 0;
-        this._noDepthTestingResults.length = 0;
-        for (let i = 0; i < hits.length; i++) {
-            const hit = hits[i];
-            const object = hit.object;
-            if (object.material) {
-                if (object.material["depthTest"] === false) {
-                    this._noDepthTestingResults.push(hit);
-                    continue;
-                }
-            }
-            this._sortingBuffer.push(hit);
-        }
-        for (const obj of this._sortingBuffer) {
-            this._noDepthTestingResults.push(obj);
-        }
-        return this._noDepthTestingResults;
-    }
-    out = {};
-    /**
-     * Handle hit result by preparing all needed information before propagation.
-     * Then calling propagate.
-     */
-    handleEventOnObject(object, args) {
-        // ensures that invisible objects are ignored
-        if (!this.testIsVisible(object)) {
-            if (args.isClicked && debug)
-                console.log("not allowed", object);
-            return false;
-        }
-        // Event without pointer can't be handled
-        if (args.pointerId === undefined) {
-            if (debug)
-                console.warn("Event without pointer can't be handled", args);
-            return false;
-        }
-        // We want to call all event methods even if the event was used
-        // Used event can't be handled
-        // if (args.used) return false;
-        // Correct the handled object to match the relevant object in shadow dom (?)
-        const originalObject = object;
-        args.object = object;
-        const parent = object.parent;
-        let isShadow = false;
-        const clicked = args.isClicked ?? false;
-        let canvasGroup = null;
-        // handle potential shadow dom built from three mesh ui
-        if (parent && parent.isUI) {
-            const pressedOrClicked = (args.isPressed || args.isClicked) ?? false;
-            if (parent[$shadowDomOwner]) {
-                const actualGo = parent[$shadowDomOwner].gameObject;
-                if (actualGo) {
-                    const res = UIRaycastUtils.isInteractable(actualGo, this.out);
-                    if (!res)
-                        return false;
-                    canvasGroup = this.out.canvasGroup ?? null;
-                    const handled = this.handleMeshUIIntersection(object, pressedOrClicked);
-                    if (!clicked && handled) {
-                        // return true;
-                    }
-                    object = actualGo;
-                    isShadow = true;
-                }
-            }
-            if (!isShadow) {
-                const obj = this.handleMeshUiObjectWithoutShadowDom(parent, pressedOrClicked);
-                if (obj)
-                    return true;
-            }
-        }
-        if (clicked && debug)
-            console.log(this.context.time.frame, object);
-        // Handle OnPointerExit -> in case when we are about to hover something new
-        // TODO: we need to keep track of the components that already received a PointerEnterEvent -> we can have a hierarchy where the hovered object changes but the component is on the parent and should not receive a PointerExit event because it's still hovered (just another child object)
-        const hovering = this.hoveredByID.get(args.pointerId);
-        const isNewlyHovering = hovering?.obj !== object;
-        // trigger onPointerExit
-        if (isNewlyHovering && hovering?.obj) {
-            this.triggerOnExit(hovering.obj, hovering.data);
-        }
-        // save hovered object
-        const entry = this.hoveredByID.get(args.pointerId);
-        if (!entry)
-            this.hoveredByID.set(args.pointerId, { obj: object, data: args });
-        else {
-            entry.obj = object;
-            entry.data = args;
-        }
-        // create / update pressed entry
-        if (args.isDown) {
-            const data = this.pressedByID.get(args.pointerId);
-            if (!data)
-                this.pressedByID.set(args.pointerId, { obj: object, data: args, handlers: new Set() });
-            else {
-                data.obj = object;
-                data.data = args;
-            }
-        }
-        if (canvasGroup === null || canvasGroup.interactable) {
-            this.handleMainInteraction(object, args, isNewlyHovering);
-        }
-        return true;
-    }
-    /**
-     * Propagate up in hiearchy and call the callback for each component that is possibly a handler
-     */
-    propagate(object, _args, onComponent) {
-        while (true) {
-            // Propagate up the hierarchy
-            if (_args.used)
-                return;
-            GameObject.foreachComponent(object, comp => {
-                // TODO: implement Stop Immediate Propagation
-                onComponent(comp);
-                // return undefined to continue iterating
-                return undefined;
-            }, false);
-            if (!object.parent)
-                break;
-            // walk up
-            object = object.parent;
-        }
-    }
-    /**
-     * Propagate up in hiearchy and call handlers based on the pointer event data
-     */
-    handleMainInteraction(object, args, isNewlyHovering) {
-        if (args.pointerId === undefined)
-            return;
-        const pressedEvent = this.pressedByID.get(args.pointerId);
-        this.propagate(object, args, (behaviour) => {
-            const comp = behaviour;
-            if (comp.interactable === false)
-                return;
-            if (comp.onPointerEnter) {
-                if (isNewlyHovering) {
-                    comp.onPointerEnter(args);
-                }
-            }
-            if (args.isDown) {
-                if (comp.onPointerDown) {
-                    comp.onPointerDown(args);
-                    // Set the handler that we called the down event on
-                    // So we can call the up event on the same handler 
-                    // In a scenario where we Down on one object and Up on another
-                    pressedEvent?.handlers.add(comp);
-                }
-            }
-            const posLastFrame = this.context.input.getPointerPositionLastFrame(args.pointerId);
-            const posThisFrame = this.context.input.getPointerPosition(args.pointerId);
-            const isMoving = posLastFrame && !Mathf.approximately(posLastFrame, posThisFrame);
-            if (isMoving && comp.onPointerMove) {
-                comp.onPointerMove(args);
-            }
-            if (args.isUp) {
-                if (comp.onPointerUp) {
-                    comp.onPointerUp(args);
-                    // We don't want to call Up twice if we Down and Up on the same object
-                    // But if we Down on one and Up on another we want to call Up on the first one as well
-                    // For example if the object was cloned by the Duplicatable
-                    // The original component that received the down event SHOULD also receive the up event
-                    pressedEvent?.handlers.delete(comp);
-                }
-                // handle onExit on touchUp
-                // onExit on mouse is handled when we hover over something else / on nothing
-                if (comp.onPointerExit && args.event?.pointerType === PointerType.Touch) {
-                    comp.onPointerExit(args);
-                    this.hoveredByID.delete(args.pointerId);
-                }
-            }
-            if (args.isClicked) {
-                if (comp.onPointerClick) {
-                    comp.onPointerClick(args);
-                }
-            }
-        });
-        // after the propagation end, call UP on any objects that were DOWNED and didn't recieve an UP while propagating
-        // If user drags away from the object, then it doesn't get the UP event
-        if (args.isUp) {
-            pressedEvent?.handlers.forEach((handler) => {
-                if (handler.onPointerUp) {
-                    handler.onPointerUp(args);
-                }
-            });
-            this.pressedByID.delete(args.pointerId);
-        }
-    }
-    /**
-     * Propagate up in hiearchy and call OnExit regardless of the pointer event data
-     */
-    triggerOnExit(object, args) {
-        args.used = false;
-        this.propagate(object, args, (behaviour) => {
-            if (!behaviour.gameObject || behaviour.destroyed)
-                return;
-            const inst = behaviour;
-            if (inst.onPointerExit) {
-                inst.onPointerExit(args);
-            }
-        });
-    }
-    handleMeshUiObjectWithoutShadowDom(obj, pressed) {
-        if (!obj || !obj.isUI)
-            return true;
-        const hit = this.handleMeshUIIntersection(obj, pressed);
-        return hit;
-    }
-    currentActiveMeshUIComponents = [];
-    handleMeshUIIntersection(meshUiObject, pressed) {
-        const res = MeshUIHelper.updateState(meshUiObject, pressed);
-        if (res) {
-            this.currentActiveMeshUIComponents.push(res);
-        }
-        return res !== null;
-    }
-    resetMeshUIStates() {
-        if (this.context.input.getPointerPressedCount() > 0) {
-            MeshUIHelper.resetLastSelected();
-        }
-        if (!this.currentActiveMeshUIComponents || this.currentActiveMeshUIComponents.length <= 0)
-            return;
-        for (let i = 0; i < this.currentActiveMeshUIComponents.length; i++) {
-            const comp = this.currentActiveMeshUIComponents[i];
-            MeshUIHelper.resetState(comp);
-        }
-        this.currentActiveMeshUIComponents.length = 0;
-    }
-    testIsVisible(obj) {
-        if (!obj)
-            return true;
-        if (!GameObject.isActiveSelf(obj))
-            return false;
-        return this.testIsVisible(obj.parent);
-    }
-}
-class MeshUIHelper {
-    static lastSelected = null;
-    static lastUpdateFrame = [];
-    static needsUpdate = false;
-    static markDirty() {
-        this.needsUpdate = true;
-    }
-    static update(threeMeshUI, context, force = false) {
-        if (force) {
-            threeMeshUI.update();
-            return;
-        }
-        const currentFrame = context.time.frameCount;
-        for (const lu of this.lastUpdateFrame) {
-            if (lu.context === context) {
-                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;
-                    threeMeshUI.update();
-                }
-                return;
-            }
-        }
-        this.lastUpdateFrame = [{ context, frame: currentFrame, nextUpdate: currentFrame }];
-        threeMeshUI.update();
-    }
-    static updateState(intersect, _selectState) {
-        let foundBlock = null;
-        if (intersect) {
-            foundBlock = this.findBlockInParent(intersect);
-            // console.log(intersect, "-- found block:", foundBlock)
-            if (foundBlock && foundBlock !== this.lastSelected) {
-                const interactable = foundBlock["interactable"];
-                if (interactable === false)
-                    return null;
-                this.needsUpdate = true;
-            }
-        }
-        return foundBlock;
-    }
-    static resetLastSelected() {
-        const last = this.lastSelected;
-        if (!last)
-            return;
-        this.lastSelected = null;
-        this.resetState(last);
-    }
-    static resetState(obj) {
-        if (!obj)
-            return;
-        this.needsUpdate = true;
-    }
-    static findBlockInParent(elem) {
-        if (!elem)
-            return null;
-        if (elem.isBlock) {
-            // @TODO : Replace states managements
-            // if (Object.keys(elem.states).length > 0)
-            return elem;
-        }
-        return this.findBlockInParent(elem.parent);
-    }
-}
+import { RaycastOptions } from "../../engine/engine_physics.js";
+import { Behaviour, GameObject } from "../Component.js";
+import { ControllerEvents, WebXRController } from "../webxr/WebXRController.js";
+import { Context } from "../../engine/engine_setup.js";
+import { PointerEventData, hasPointerEventComponent } from "./PointerEvents.js";
+import { ObjectRaycaster, Raycaster } from "./Raycaster.js";
+import { InputEvents, PointerType } from "../../engine/engine_input.js";
+import { Object3D } from "three";
+import { getParam } from "../../engine/engine_utils.js";
+import { UIRaycastUtils } from "./RaycastUtils.js";
+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");
+export var EventSystemEvents;
+(function (EventSystemEvents) {
+    EventSystemEvents["BeforeHandleInput"] = "BeforeHandleInput";
+    EventSystemEvents["AfterHandleInput"] = "AfterHandleInput";
+})(EventSystemEvents || (EventSystemEvents = {}));
+export class EventSystem extends Behaviour {
+    static _eventSystemMap = new Map();
+    static didSearchEventSystem = false;
+    static createIfNoneExists(context) {
+        if (!this.didSearchEventSystem) {
+            this.didSearchEventSystem = true;
+            if (EventSystem.systems.length <= 0) {
+                EventSystem.systems.push(...GameObject.findObjectsOfType(EventSystem, context));
+            }
+        }
+        for (const sys of EventSystem.systems) {
+            if (sys.context === context)
+                return; // exists
+        }
+        const go = new Object3D();
+        GameObject.addNewComponent(go, EventSystem);
+        context.scene.add(go);
+    }
+    static get systems() {
+        const context = Context.Current;
+        if (!this._eventSystemMap.has(context)) {
+            this._eventSystemMap.set(context, []);
+        }
+        return this._eventSystemMap.get(context);
+    }
+    static get(ctx) {
+        const systems = this._eventSystemMap.get(ctx);
+        if (systems && systems.length > 0)
+            return systems[0];
+        return null;
+    }
+    static get instance() {
+        return this.systems[0];
+    }
+    //@ts-ignore
+    static ensureUpdateMeshUI(instance, context, force = false) {
+        MeshUIHelper.update(instance, context, force);
+    }
+    static markUIDirty(_context) {
+        MeshUIHelper.markDirty();
+    }
+    raycaster = [];
+    constructor() {
+        super();
+        EventSystem.systems.push(this);
+    }
+    get hasActiveUI() { return this.currentActiveMeshUIComponents.length > 0; }
+    get isHoveringObjects() { return this.hoveredByID.size > 0; }
+    onDestroy() {
+        EventSystem.systems.splice(EventSystem.systems.indexOf(this), 1);
+    }
+    start() {
+        if (this.raycaster.length <= 0) {
+            const res = GameObject.findObjectOfType(Raycaster, this.context);
+            if (!res) {
+                const rc = GameObject.addNewComponent(this.context.scene, ObjectRaycaster);
+                rc.ignoreSkinnedMeshes = true;
+                this.raycaster.push(rc);
+                if (isDevEnvironment() || debug)
+                    console.warn("Added an ObjectRaycaster to the scene because no raycaster was found. Skinnedmeshes will be ignored for better performance");
+            }
+        }
+    }
+    register(rc) {
+        if (rc && this.raycaster && !this.raycaster.includes(rc))
+            this.raycaster?.push(rc);
+    }
+    unregister(rc) {
+        const i = this.raycaster?.indexOf(rc);
+        if (i !== undefined && i !== -1) {
+            this.raycaster?.splice(i, 1);
+        }
+    }
+    _selectStartFn;
+    _selectEndFn;
+    _selectUpdateFn;
+    _handleEventCycleFn;
+    _handleInputFn;
+    onEnable() {
+        const grabbed = new Map();
+        this._selectStartFn ??= (ctrl, args) => {
+            if (!args.grab)
+                return;
+            MeshUIHelper.resetLastSelected();
+            const opts = new PointerEventData(this.context.input);
+            opts.inputSource = ctrl;
+            opts.pointerId = 0;
+            opts.isDown = ctrl.selectionDown;
+            opts.isUp = ctrl.selectionUp;
+            opts.isPressed = ctrl.selectionPressed;
+            opts.isClicked = false;
+            grabbed.set(ctrl, args.grab);
+            if (args.grab && !this.handleEventOnObject(args.grab, opts)) {
+                args.grab = null;
+            }
+            ;
+        };
+        this._selectEndFn ??= (ctrl, args) => {
+            if (!args.grab)
+                return;
+            const opts = new PointerEventData(this.context.input);
+            opts.inputSource = ctrl;
+            opts.pointerId = 0;
+            opts.isDown = ctrl.selectionDown;
+            opts.isUp = ctrl.selectionUp;
+            opts.isPressed = ctrl.selectionPressed;
+            opts.isClicked = ctrl.selectionClick;
+            this.handleEventOnObject(args.grab, opts);
+            const prevGrabbed = grabbed.get(ctrl);
+            grabbed.set(ctrl, null);
+            if (prevGrabbed) {
+                for (const key of this.pressedByID.keys()) {
+                    const e = this.pressedByID[key];
+                    if (e && e.obj === prevGrabbed && e.handler) {
+                        e.handler.onPointerUp?.call(e.handler, opts);
+                        this.pressedByID.delete(key);
+                    }
+                }
+            }
+        };
+        const controllerRcOpts = new RaycastOptions();
+        this._selectUpdateFn ??= (_ctrl) => {
+            controllerRcOpts.ray = _ctrl.getRay();
+            const rc = this.performRaycast(controllerRcOpts) ?? [];
+            const opts = new PointerEventData(this.context.input);
+            opts.inputSource = _ctrl;
+            opts.pointerId = _ctrl.input?.handedness === "right" ? 0 : 1;
+            opts.isDown = _ctrl.selectionDown;
+            opts.isUp = _ctrl.selectionUp;
+            opts.isPressed = _ctrl.selectionPressed;
+            opts.isClicked = false;
+            this.handleIntersections(opts.pointerId, rc, opts);
+        };
+        WebXRController.addEventListener(ControllerEvents.SelectStart, this._selectStartFn);
+        WebXRController.addEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
+        WebXRController.addEventListener(ControllerEvents.Update, this._selectUpdateFn);
+        this._handleInputFn = this.onPointerEvent.bind(this);
+        this.context.input.addEventListener(InputEvents.PointerDown, this._handleInputFn);
+        this.context.input.addEventListener(InputEvents.PointerUp, this._handleInputFn);
+        this.context.input.addEventListener(InputEvents.PointerMove, this._handleInputFn);
+    }
+    onDisable() {
+        WebXRController.removeEventListener(ControllerEvents.SelectStart, this._selectStartFn);
+        WebXRController.removeEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
+        WebXRController.removeEventListener(ControllerEvents.Update, this._selectUpdateFn);
+        this.context.input.removeEventListener(InputEvents.PointerDown, this._handleInputFn);
+        this.context.input.removeEventListener(InputEvents.PointerUp, this._handleInputFn);
+        this.context.input.removeEventListener(InputEvents.PointerMove, this._handleInputFn);
+    }
+    /**
+     * all pointers that have pressed something
+     *
+     * key: pointerId
+     * value: object that was pressed, data of the pointer event, handlers that are releavant to the event
+    */
+    pressedByID = new Map();
+    /**
+     * all hovered objects
+     *
+     * key: pointerId
+     * value: object that is hovered, data of the pointer event
+     */
+    hoveredByID = new Map();
+    onBeforeRender() {
+        this.resetMeshUIStates();
+    }
+    /**
+     * Handle an pointer event from the input system
+     */
+    onPointerEvent(pointerEvent) {
+        if (pointerEvent === undefined)
+            return;
+        // 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 id = pointerEvent.pointerType == PointerType.Touch ? pointerEvent.button : 0;
+        const data = new PointerEventData(this.context.input, pointerEvent);
+        data.inputSource = this.context.input;
+        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(pointerEvent.button);
+        if (debug && data.isClicked)
+            console.log("CLICK", data.pointerId);
+        // raycast
+        const options = new RaycastOptions();
+        options.screenPoint = this.context.input.getPointerPositionRC(id);
+        const hits = this.performRaycast(options);
+        if (!hits)
+            return;
+        if (debug && data.isClicked) {
+            showBalloonMessage("EventSystem: " + data.pointerId + " - " + this.context.time.frame + " - Up:" + data.isUp + ", Down:" + data.isDown);
+        }
+        const evt = {
+            sender: this,
+            args: data,
+            hasActiveUI: this.currentActiveMeshUIComponents.length > 0,
+        };
+        this.dispatchEvent(new CustomEvent(EventSystemEvents.BeforeHandleInput, { detail: evt }));
+        // handle hit objects
+        this.handleIntersections(id, hits, data);
+        this.dispatchEvent(new CustomEvent(EventSystemEvents.AfterHandleInput, { detail: evt }));
+    }
+    _sortedHits = [];
+    /**
+     * cache for objects that we want to raycast against. It's cleared before each call to performRaycast invoking raycasters
+     */
+    _testObjectsCache = new Map();
+    /**
+     * Checks if an object that we encounter has an event component and if it does, we add it to our objects cache
+     * If it doesnt we tell our raycasting system to ignore it and continue in the child hierarchy
+     * We do this to avoid raycasts against objects that are not going to be used by the event system
+     * Because there's no component callback to be invoked anyways.
+     * This is especially important to avoid expensive raycasts against SkinnedMeshes
+     *
+     * Further optimizations would be to check what type of event we're dealing with
+     * For example if an event component has only an onPointerClick method we don't need to raycast during movement events
+     * */
+    shouldRaycastObject = (obj) => {
+        // check if this object is actually a UI shadow hierarchy object
+        let shadowComponent = 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) || (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 === false)
+                return "continue in children";
+            return true;
+        }
+        else {
+            // the object was not yet seen so we test if it has an event component
+            let hasEventComponent = hasPointerEventComponent(obj);
+            if (!hasEventComponent && shadowComponent)
+                hasEventComponent = hasPointerEventComponent(shadowComponent);
+            if (hasEventComponent) {
+                // 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);
+                });
+                return true;
+            }
+            this._testObjectsCache.set(obj, false);
+            return "continue in children";
+        }
+    };
+    /** the raycast filter is always overriden */
+    performRaycast(opts) {
+        if (!this.raycaster)
+            return null;
+        this._sortedHits.length = 0;
+        if (!opts)
+            opts = new RaycastOptions();
+        // we clear the cache of previously seen objects
+        this._testObjectsCache.clear();
+        opts.testObject = this.shouldRaycastObject;
+        for (const rc of this.raycaster) {
+            if (!rc.activeAndEnabled)
+                continue;
+            const res = rc.performRaycast(opts);
+            if (res && res.length > 0) {
+                // console.log(res.length, res.map(r => r.object.name));
+                this._sortedHits.push(...res);
+            }
+        }
+        this._sortedHits.sort((a, b) => {
+            return a.distance - b.distance;
+        });
+        return this._sortedHits;
+    }
+    handleIntersections(id, hits, args) {
+        if (hits?.length) {
+            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;
+                }
+            }
+        }
+        // pointer has not hit any object to handle
+        // thus is not hovering over anything
+        const hoveredData = this.hoveredByID.get(id);
+        if (hoveredData) {
+            this.triggerOnExit(hoveredData.obj, hoveredData.data);
+        }
+        this.hoveredByID.delete(id);
+        // if it was up, it means it doesn't should notify things that it down on before
+        if (args.isUp) {
+            const pressedData = this.pressedByID.get(id);
+            pressedData?.handlers.forEach(h => h.onPointerUp?.call(h, args));
+            this.pressedByID.delete(id);
+        }
+        return false;
+    }
+    _sortingBuffer = [];
+    _noDepthTestingResults = [];
+    sortCandidates(hits) {
+        // iterate over all hits and filter for nodepth objects and normal hit objects
+        // the no-depth objects will be handled first starting from the closest
+        // assuming the hits array is sorted by distance (closest > furthest)
+        this._sortingBuffer.length = 0;
+        this._noDepthTestingResults.length = 0;
+        for (let i = 0; i < hits.length; i++) {
+            const hit = hits[i];
+            const object = hit.object;
+            if (object.material) {
+                if (object.material["depthTest"] === false) {
+                    this._noDepthTestingResults.push(hit);
+                    continue;
+                }
+            }
+            this._sortingBuffer.push(hit);
+        }
+        for (const obj of this._sortingBuffer) {
+            this._noDepthTestingResults.push(obj);
+        }
+        return this._noDepthTestingResults;
+    }
+    out = {};
+    /**
+     * Handle hit result by preparing all needed information before propagation.
+     * Then calling propagate.
+     */
+    handleEventOnObject(object, args) {
+        // ensures that invisible objects are ignored
+        if (!this.testIsVisible(object)) {
+            if (args.isClicked && debug)
+                console.log("not allowed", object);
+            return false;
+        }
+        // Event without pointer can't be handled
+        if (args.pointerId === undefined) {
+            if (debug)
+                console.warn("Event without pointer can't be handled", args);
+            return false;
+        }
+        // We want to call all event methods even if the event was used
+        // Used event can't be handled
+        // if (args.used) return false;
+        // Correct the handled object to match the relevant object in shadow dom (?)
+        const originalObject = object;
+        args.object = object;
+        const parent = object.parent;
+        let isShadow = false;
+        const clicked = args.isClicked ?? false;
+        let canvasGroup = null;
+        // handle potential shadow dom built from three mesh ui
+        if (parent && parent.isUI) {
+            const pressedOrClicked = (args.isPressed || args.isClicked) ?? false;
+            if (parent[$shadowDomOwner]) {
+                const actualGo = parent[$shadowDomOwner].gameObject;
+                if (actualGo) {
+                    const res = UIRaycastUtils.isInteractable(actualGo, this.out);
+                    if (!res)
+                        return false;
+                    canvasGroup = this.out.canvasGroup ?? null;
+                    const handled = this.handleMeshUIIntersection(object, pressedOrClicked);
+                    if (!clicked && handled) {
+                        // return true;
+                    }
+                    object = actualGo;
+                    isShadow = true;
+                }
+            }
+            if (!isShadow) {
+                const obj = this.handleMeshUiObjectWithoutShadowDom(parent, pressedOrClicked);
+                if (obj)
+                    return true;
+            }
+        }
+        if (clicked && debug)
+            console.log(this.context.time.frame, object);
+        // Handle OnPointerExit -> in case when we are about to hover something new
+        // TODO: we need to keep track of the components that already received a PointerEnterEvent -> we can have a hierarchy where the hovered object changes but the component is on the parent and should not receive a PointerExit event because it's still hovered (just another child object)
+        const hovering = this.hoveredByID.get(args.pointerId);
+        const isNewlyHovering = hovering?.obj !== object;
+        // trigger onPointerExit
+        if (isNewlyHovering && hovering?.obj) {
+            this.triggerOnExit(hovering.obj, hovering.data);
+        }
+        // save hovered object
+        const entry = this.hoveredByID.get(args.pointerId);
+        if (!entry)
+            this.hoveredByID.set(args.pointerId, { obj: object, data: args });
+        else {
+            entry.obj = object;
+            entry.data = args;
+        }
+        // create / update pressed entry
+        if (args.isDown) {
+            const data = this.pressedByID.get(args.pointerId);
+            if (!data)
+                this.pressedByID.set(args.pointerId, { obj: object, data: args, handlers: new Set() });
+            else {
+                data.obj = object;
+                data.data = args;
+            }
+        }
+        if (canvasGroup === null || canvasGroup.interactable) {
+            this.handleMainInteraction(object, args, isNewlyHovering);
+        }
+        return true;
+    }
+    /**
+     * Propagate up in hiearchy and call the callback for each component that is possibly a handler
+     */
+    propagate(object, _args, onComponent) {
+        while (true) {
+            // Propagate up the hierarchy
+            if (_args.used)
+                return;
+            GameObject.foreachComponent(object, comp => {
+                // TODO: implement Stop Immediate Propagation
+                onComponent(comp);
+                // return undefined to continue iterating
+                return undefined;
+            }, false);
+            if (!object.parent)
+                break;
+            // walk up
+            object = object.parent;
+        }
+    }
+    /**
+     * Propagate up in hiearchy and call handlers based on the pointer event data
+     */
+    handleMainInteraction(object, args, isNewlyHovering) {
+        if (args.pointerId === undefined)
+            return;
+        const pressedEvent = this.pressedByID.get(args.pointerId);
+        this.propagate(object, args, (behaviour) => {
+            const comp = behaviour;
+            if (comp.interactable === false)
+                return;
+            if (comp.onPointerEnter) {
+                if (isNewlyHovering) {
+                    comp.onPointerEnter(args);
+                }
+            }
+            if (args.isDown) {
+                if (comp.onPointerDown) {
+                    comp.onPointerDown(args);
+                    // Set the handler that we called the down event on
+                    // So we can call the up event on the same handler 
+                    // In a scenario where we Down on one object and Up on another
+                    pressedEvent?.handlers.add(comp);
+                }
+            }
+            const posLastFrame = this.context.input.getPointerPositionLastFrame(args.pointerId);
+            const posThisFrame = this.context.input.getPointerPosition(args.pointerId);
+            const isMoving = posLastFrame && !Mathf.approximately(posLastFrame, posThisFrame);
+            if (isMoving && comp.onPointerMove) {
+                comp.onPointerMove(args);
+            }
+            if (args.isUp) {
+                if (comp.onPointerUp) {
+                    comp.onPointerUp(args);
+                    // We don't want to call Up twice if we Down and Up on the same object
+                    // But if we Down on one and Up on another we want to call Up on the first one as well
+                    // For example if the object was cloned by the Duplicatable
+                    // The original component that received the down event SHOULD also receive the up event
+                    pressedEvent?.handlers.delete(comp);
+                }
+                // handle onExit on touchUp
+                // onExit on mouse is handled when we hover over something else / on nothing
+                if (comp.onPointerExit && args.event?.pointerType === PointerType.Touch) {
+                    comp.onPointerExit(args);
+                    this.hoveredByID.delete(args.pointerId);
+                }
+            }
+            if (args.isClicked) {
+                if (comp.onPointerClick) {
+                    comp.onPointerClick(args);
+                }
+            }
+        });
+        // after the propagation end, call UP on any objects that were DOWNED and didn't recieve an UP while propagating
+        // If user drags away from the object, then it doesn't get the UP event
+        if (args.isUp) {
+            pressedEvent?.handlers.forEach((handler) => {
+                if (handler.onPointerUp) {
+                    handler.onPointerUp(args);
+                }
+            });
+            this.pressedByID.delete(args.pointerId);
+        }
+    }
+    /**
+     * Propagate up in hiearchy and call OnExit regardless of the pointer event data
+     */
+    triggerOnExit(object, args) {
+        args.used = false;
+        this.propagate(object, args, (behaviour) => {
+            if (!behaviour.gameObject || behaviour.destroyed)
+                return;
+            const inst = behaviour;
+            if (inst.onPointerExit) {
+                inst.onPointerExit(args);
+            }
+        });
+    }
+    handleMeshUiObjectWithoutShadowDom(obj, pressed) {
+        if (!obj || !obj.isUI)
+            return true;
+        const hit = this.handleMeshUIIntersection(obj, pressed);
+        return hit;
+    }
+    currentActiveMeshUIComponents = [];
+    handleMeshUIIntersection(meshUiObject, pressed) {
+        const res = MeshUIHelper.updateState(meshUiObject, pressed);
+        if (res) {
+            this.currentActiveMeshUIComponents.push(res);
+        }
+        return res !== null;
+    }
+    resetMeshUIStates() {
+        if (this.context.input.getPointerPressedCount() > 0) {
+            MeshUIHelper.resetLastSelected();
+        }
+        if (!this.currentActiveMeshUIComponents || this.currentActiveMeshUIComponents.length <= 0)
+            return;
+        for (let i = 0; i < this.currentActiveMeshUIComponents.length; i++) {
+            const comp = this.currentActiveMeshUIComponents[i];
+            MeshUIHelper.resetState(comp);
+        }
+        this.currentActiveMeshUIComponents.length = 0;
+    }
+    testIsVisible(obj) {
+        if (!obj)
+            return true;
+        if (!GameObject.isActiveSelf(obj))
+            return false;
+        return this.testIsVisible(obj.parent);
+    }
+}
+class MeshUIHelper {
+    static lastSelected = null;
+    static lastUpdateFrame = [];
+    static needsUpdate = false;
+    static markDirty() {
+        this.needsUpdate = true;
+    }
+    static update(threeMeshUI, context, force = false) {
+        if (force) {
+            threeMeshUI.update();
+            return;
+        }
+        const currentFrame = context.time.frameCount;
+        for (const lu of this.lastUpdateFrame) {
+            if (lu.context === context) {
+                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;
+                    threeMeshUI.update();
+                }
+                return;
+            }
+        }
+        this.lastUpdateFrame = [{ context, frame: currentFrame, nextUpdate: currentFrame }];
+        threeMeshUI.update();
+    }
+    static updateState(intersect, _selectState) {
+        let foundBlock = null;
+        if (intersect) {
+            foundBlock = this.findBlockInParent(intersect);
+            // console.log(intersect, "-- found block:", foundBlock)
+            if (foundBlock && foundBlock !== this.lastSelected) {
+                const interactable = foundBlock["interactable"];
+                if (interactable === false)
+                    return null;
+                this.needsUpdate = true;
+            }
+        }
+        return foundBlock;
+    }
+    static resetLastSelected() {
+        const last = this.lastSelected;
+        if (!last)
+            return;
+        this.lastSelected = null;
+        this.resetState(last);
+    }
+    static resetState(obj) {
+        if (!obj)
+            return;
+        this.needsUpdate = true;
+    }
+    static findBlockInParent(elem) {
+        if (!elem)
+            return null;
+        if (elem.isBlock) {
+            // @TODO : Replace states managements
+            // if (Object.keys(elem.states).length > 0)
+            return elem;
+        }
+        return this.findBlockInParent(elem.parent);
+    }
+}
 //# sourceMappingURL=EventSystem.js.map