How to bubble up babylon canvas events?

Hey,
i have this basic playground, where mouse move event is added to the body. It works fine until you press and hold the mouse. At that point no event is fired. Is there a way to receive those events?

I’ve tried to listen to onPointerObservable and dispatch those events to my part of the code that handles the logic outside the babylon scene, but it seems too inconsistent and requires a lot of adjustments and a lot of additional code - so i consider this as my last option.

Hi @tarasus and welcome to the forum!

I think @PolygonalSun can be a great help here

2 Likes

AFAIK, the only reason why the event isn’t bubbling up is because the Playground code must have some kind of stopPropagation() call. If you want to define the event callback in document.body, you might have some success with replacing onmousemove with onpointermove because I think that the document will process it’s onpointermove callback before the canvas’ listeners get the event. Failing that, you could also try forwarding the event by wrapping the current one in a new event and dispatching it:

// Example
scene.onPointerMove = (evt) => {
const mouseEvt = new MouseEvent("mousemove", evt); // You can also use PointerEvent here
document.body.dispatch(mouseEvt);
};

I would be careful with this solution as it creates new objects and can add to garbage collection. Just out of curiosity, is there a particular why you’re listening for move events at the level?

5 Likes

Thanks for the response, @PolygonalSun , it helped a lot :heart:
For your question, it was a quickest way to set up a playground to show the problem, i am not actually doing that.
I am rendering annotations on top of the babylon scene. So user picks a point on the babylon scene, and then annotations canvas takes over. It was working perfectly fine, but now i need click and drag in single action, and since click event starts in babylon scene, annotations canvas isn’t receiving any events, once it’s rendered.