solved [Solved] mousedown action sticks on canvas after mouseout

[Juncheng]

Hi guys,

I have a problem when I use pep and arcRotateCamera. I found when I accidentally move my mouse out of the canvas while rotating the camera and then release the left mouse click down outside the canvas, the canvas still register the mouse down action.  So at this time, I can rotate the camera without click any mouse button.

I tried on ArcRotateCamera tutorial playground https://www.babylonjs-playground.com/#GH5SVN#1. I got the same problem.

Can anyone tell me how to solve this problem?

Best,

Jason

[GameMonetize]

Hum..I cannot repro..which browser are you using?

[Wingnut]

Hi guys!  I see this too, Firefox.  Not a problem in IE.

Step by step, in playground, in Firefox.

1.  Depress left mouse button on canvas
2.  Still depressed, "drag" left... until arrow is atop editor area
3.  Lift mouse button
4.  Mouse-over the canvas again (with no buttons depressed).  The canvas thinks the button is still depressed (it pans the camera)

There is something strange... regarding mouseOut of canvas... while a mouse button is still pressed. 

It ALSO happens when canvas-dragging onto the top or bottom menu bars, and releasing the drag... atop those.   The canvas thinks the mouse button is still pressed, even though it was lifted when pointer was atop the editor/menu areas. 

I think the effect is called "pointerLock" and it is seen/normal when playground is in full-screen mode.  It is not normal when using split-screen mode.

It is somewhat annoying for Firefox pilots, but I have always "worked-around it"... re-clicking/releasing over the canvas... to stop the un-clicked camera panning  (pointerLock).  It has been this way for quite a long time, afaik.  It is likely a Firefox bug or anomaly.  Possibly, a point of disagreement between browser makers - about Events Specification interpretation, legacy-honoring, or compliance-with new ways.

I have no solution... but perhaps I have verified it, and provided a step-by-step way to repro.  Again, I see this in FF only, not in IE.  Not tested in Opera, Chrome, Safari, Amaya, etc.

[aWeirdo]

@Wingnut is correct  

A solution could be to check the pointerup event globally, on the window or document.

Example; 
https://www.babylonjs-playground.com/#GH5SVN#4


Using the mouseout event on the canvas is also possible, but could result in a very interruptive experience for the end-user.
imagine panning the camera and the mouse very briefly exits then returns to the canvas without any actual input changes made,
mouse inputs are still reset by mouseout event,
and the end-user now has to release and re-click his mouse to continue panning.

[GameMonetize]

We could do that but this seems for a lot of situation as we will receive pointer up even when the pointer is NOT on the canvas. Like when you click in the code editor for instance in the PG

[aWeirdo]

@Deltakosh True,
it could interfere with onPointerUp functions,

Perhaps if a boolean was added on pointerDown?
It could be set true on canvas pointerDown
and pointerUp would then only run if the boolean is true + reset boolean to false.

That way pointerUp's outside the canvas would only run if the pointerDown happend inside the canvas element.. 

I hope that makes sense, but just a thought though.

 

Edit:

I just saw that BJS 3 has such a boolean, "scene._isButtonPressed"

Right now onPointerUp just resets it to false,
can you think of any instances where adding a "if false return" check to the _onPointerUp function would be bad?

if(!_this._isButtonPressed) return;

This should allow setting the pointerUp as a window event with minimal impact..
such an annoying FF bug though  

 

[GameMonetize]

I think it could work

fancy doing a PR?

[aWeirdo]

done
https://github.com/BabylonJS/Babylon.js/pull/2838

 

[Juncheng]

@aWeirdo @Deltakosh  Wow, cool! It works great, thank you so much.