babylon GUI - missing button event "click"

[jpdev]

Hi,

I am using the great babylon gui for my latest project - just some simple buttons for level select so far.

I noticed that there is no event that functions exactly as a button "click" event should behave.

There are up and down events, but they don't quite hit the mark for the event that should trigger when you "click" a button.

Most GUI trigger a button on the "up" event, but only if the cursor is still over the element.
(Try it with any button element for example in the post editor of this forum, or any windows button - if you press the mouse button down but only release after moving the mouse outside of the element, it won't trigger)

So my fix so far is (pure js):

button.onPointerUpObservable.add(
  function() {
    if (this.btn._enterCount === 0) {
      return;
    }
    //Do "click" stuff
  }.bind({btn: button})
);

But this accesses a private variable (_enterCount).

So I think there should either be a getter function to access _enterCount or there should be a onPointerClickObservable.

Any thoughts?

[Wingnut]

Hiya JPdev... good to see you again.  I don't know if we can expect that BabylonJS GUI would be as power-fleshed as DOM form controls.  DOM events have had 100,000 developers and 20 years of time.  BabylonJS GUI has had, primarily, one developer and about 1.5 years of growth-time.   

Still, I know what you are saying, and you make an interesting and pertinent point.  Your idea/need is potentially a fine BJS GUI feature request/idea, in my opinion.  @Deltakosh and others will want to see this use-case/issue.  

Meantime, I decided to go experimenting:   https://www.babylonjs-playground.com/#XCPP9Y#431

Surely a bad approach (I'm famous for my bad approaches.  I code JS... like an infant uses industrial power tools.  heh.)

Lines 36-38... my onClick eventHandler.  It only dumps the clicked control to console.

Line 47... I overloaded the button object... by adding my own button.isPointerOver = false;

That new property is used as a filter/discriminator in the UP observer... lines 54/55.

That property is toggled in the ENTER and OUT observers... lines 60 and 64.

I think this playground demo is "acting" with your wanted-functionality.  Be sure to correct me if I am wrong about that.

But, I needed to take "the long trail" to get here, didn't I?  *nod*  hmm.  This is an interesting topic, for sure.

Anyway, we have a playground demo to do tests-upon.   Likely, smarter people than I... will have more/better ideas and will comment soon.  Stay tuned.

[Guest]

As @Wingnut mentioned we do not want the GUI to be like DOM (mostly because of lack of resoruces :))

But anyway,  I'll be happy to add OnPointerClick for you. My question will be: when should the PointerClick raised? only if down then up without any move?

[jpdev]

Hi @Deltakosh & @Wingnut thanks for the replys.

I found this definition that matches what I experience with buttons across all software (web & desktop):

Quote

The click event is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a single element.

(from https://developer.mozilla.org/en-US/docs/Web/Events/click)

My code from the first posting (checking the enterCount) does achieve that.

If you agree that the event should fire when "Up" is fired and the cursor is still over the button, and that the enterCount check is the way to go, I'll try and create a pull request on github.

 

 

[Guest]

Of course. I'll be honored to merge it

[jpdev]

I tried to integrate it, here is a link to the pr: https://github.com/BabylonJS/Babylon.js/pull/3816

[Guest]

Congrats it is merged