Three object event propagation to DOM?

[andrewthebold]

I've been trying to implement a custom "orbit controls", and found myself a bit confused by event propagation/bubbling. My goal is to 1) allow the user to drag the html canvas to "orbit" around the scene, and 2) allow the user to drag a mesh within the scene without triggering the orbit behavior.

My approach:

1. Add a drag event listener on the dom canvas element (used to control the camera pos/rot)
2. Add a drag event listener on the mesh (used to control the mesh pos)
3. Stop the event propagation on the mesh's callback
4. (Goal) Only the mesh's event listener callback gets called

Demos:

1. Basic click event: Trying to stop a click event from propagating to the canvas.
2. use-gesture drag gesture: Trying to stop a drag event (use-gesture) from propagating to the canvas.

Result:

Neither demo succeeds in stopping the canvas's event callback.

My current guess is that this is intended behavior because the separate reconciler for r3f makes it so that these event "stacks" are isolated. While this makes sense, it's also a bit non-intuitive because there are still DOM events happening (as seen with the sourceEvent property) which I also can't seem to affect.

Assuming this is working as intended, would the best way to handle "syncing" these separate event callbacks be to use some global state? Or am I missing something with how events propagate (or don't) between r3f and the dom? Thanks for any help!