import { onStart } from "../../engine/engine_lifecycle_api.js";
import { addAttributeChangeCallback } from "../../engine/engine_utils.js";
import { Behaviour } from "../Component.js";
// Automatically add ClickThrough component if "clickthrough" attribute is present on the needle-engine element
onStart(ctx => {
    const attribute = ctx.domElement.getAttribute("clickthrough");
    if (clickthroughEnabled(attribute)) {
        const comp = ctx.scene.addComponent(ClickThrough);
        addAttributeChangeCallback(ctx.domElement, "clickthrough", () => {
            const attribute = ctx.domElement.getAttribute("clickthrough");
            comp.enabled = clickthroughEnabled(attribute);
        });
    }
    function clickthroughEnabled(val) {
        return val !== null && val !== "0" && val !== "false";
    }
});
/**
 * ClickThrough component allows pointer events to "click through" the 3D canvas to HTML elements behind it.
 *
 * This is useful if you have a transparent canvas overlaying HTML content and want to interact with the HTML content through the transparent areas of the canvas.
 *
 * Usage Options:
 * - Add the ClickThrough component to any GameObject in your scene.
 * - Alternatively, add the `clickthrough` attribute to the `<needle-engine>` HTML element (e.g. `<needle-engine clickthrough></needle-engine>`).
 *
 * - Example https://stackblitz.com/~/github.com/needle-engine/sample-3d-over-html
 *
 * @category Web
 * @group Components
 * @component
 */
export class ClickThrough extends Behaviour {
    _previousPointerEvents = 'all';
    onEnable() {
        // Register for pointer down and pointer move event
        this.context.input.addEventListener('pointerdown', this.onPointerEvent);
        this.context.input.addEventListener('pointermove', this.onPointerEvent, {
            queue: 100,
        });
        window.addEventListener("touchend", this.onTouchEnd, { passive: true });
        this._previousPointerEvents = this.context.domElement.style.pointerEvents;
    }
    onDisable() {
        this.context.input.removeEventListener('pointerdown', this.onPointerEvent);
        this.context.input.removeEventListener('pointermove', this.onPointerEvent);
        window.removeEventListener("touchend", this.onTouchEnd);
        this.context.domElement.style.pointerEvents = this._previousPointerEvents;
    }
    onPointerEnter() {
        /** do nothing, necessary to raycast children */
    }
    onPointerEvent = (evt) => {
        if (evt.pointerId > 0)
            return;
        const intersections = evt.intersections;
        // If we don't had any intersections during the 3D raycasting then we disable pointer events for the needle-engine element so that content BEHIND the 3D element can receive pointer events
        if (intersections?.length <= 0) {
            this.context.domElement.style.pointerEvents = 'none';
        }
        else {
            this.context.domElement.style.pointerEvents = 'all';
        }
    };
    onTouchEnd = (_evt) => {
        setTimeout(() => {
            this.context.domElement.style.pointerEvents = 'all';
        }, 100);
    };
}
//# sourceMappingURL=Clickthrough.js.map