Add option to adjust for Event.target / Event.currentTarget offset for Canvas' events parameter

[dantaeusb]

I've been using R3F to create a background for a website, where the content in front is intractable, but the canvas on the background is aware of pointer position too.

As one cannot rely on <canvas> element event handling in such situation (it simply does not recieve events as it's overlapped with other elements on top), I used <Canvas eventSource={RefObject<HTMLDivElement>} />, where RefObject is the root element that contains canvas (which has no pointer events and negative z-index) and page contents. This works fine unless the root element that is used as source has child elements. When the eventSource element has children, the events are fired with the measurements of children, or, in other words, with Event.targetelement (which, by the way, might not be HTMLElement, but later about that). But we surely would like to expect the measurements from Event.currentTarget, aren't we? That way so all measurements, like clientX, offsetX, and others, are calculated from the top left bounding rect of the element we are listening to, not the children elements.

My sleepy mind came with a solution of extending the "events" parameter, using <Canvas eventSource={wrapper} events={createNonBubblingPointerEvents}, where createNonBubblingPointerEvents uses the following code:

compute(event: DomEvent, state: RootState, previous?: RootState) {
    const currentTargetOffset = {
        x: 0,
        y: 0,
    };

    if (
        event.target !== event.currentTarget &&
        event.target instanceof Element &&
        event.currentTarget instanceof Element
    ) {
        currentTargetOffset.x = event.currentTarget.getBoundingClientRect().x - event.target.getBoundingClientRect().x;
        currentTargetOffset.y = event.currentTarget.getBoundingClientRect().y - event.target.getBoundingClientRect().y;
    }

    // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
    state.pointer.set((
        (event.offsetX - currentTargetOffset.x) / state.size.width) * 2 - 1,
        -((event.offsetY - currentTargetOffset.y) / state.size.height) * 2 + 1
    )
    state.raycaster.setFromCamera(state.pointer, state.camera)
},

It's quite a quick and dirty solution, and I'm completely not sure if it's the best one. But I wonder why there are no parameters (or at least I did not find those) to take that into account for eventSource.

If I'm not, maybe it's worth adding something like this?