GUI, TextBlock disable Button events

Bugs
1

Hi, I think i found a bug.
How to reproduce. Please implement it on localhost for versions:
4.0.3
4.1.0-beta.20

  1. Create UI

             var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");

  2. Create a button

             var button = null;
         button = BABYLON.GUI.Button.CreateSimpleButton("but", "Click Me");
         button.width = 0.2;
         button.height = "40px";
         button.color = "white";
         button.background = "green";
         button.left = 200;
         button.top = 200;
         button.onPointerUpObservable.add(function() {
             alert("click on button working");
         });
         advancedTexture.addControl(button);

Test: The Button will work as expected.

The bug.
3. Add simple text after "advancedTexture.addControl(button); "

            var text = null;
            text = new BABYLON.GUI.TextBlock();
            text.text = "Hello world";
            text.color = "white";
            text.fontSize = 24;
            text.left = -200;
            text.top = -200;
            advancedTexture.addControl(text);

Now try to click the button, it will no longer work.

Testes with the stable version 4.0.3
And also tested with this beta version
“babylonjs”: “^4.1.0-beta.20”,
“babylonjs-gui”: “^4.1.0-beta.20”,
“babylonjs-materials”: “^4.1.0-beta.20”,

I have the code example in playground but the code runs fine on playground but not on local development.
https://www.babylonjs-playground.com/#AUXCUE

The bug is with NPM package 4.0.3 and 4.1.0-beta.20 of course on the localhost.

The curious thing is that if you switch the order, I mean, first add the text and second the button, everything works fine.

2

Hi R! Sorry for the slow replies. I have no solution, yet, but I DO see the issue… in the playground.

https://www.babylonjs-playground.com/#AUXCUE#1

For me, in Firefox esr… this playground shows the FAR RIGHT SIDE of the button… being hit-test-active (pickable). ONLY the right side… approx. the right-most 15% of the button.

Also, sliding the vertical divider between canvas and editor… affects the size of the button’s partial-hit-zone.

NOP-out line 44, and the button has a normal hit-test zone. Interesting and curious.

Other interesting notes: When…

    text.left = -300;
    text.top = -300;

…button works normal.

When…

    text.left = 100;
    text.top = 100;

…button fails completely.

Maybe our picker is bent or something. :slight_smile:

3

Adding @Deltakosh to the thread who should be in tomorrow if the snow around Seattle allows him :slight_smile:

I ll try to have a look as weel ASAP but I am pretty sure DK will beat me to it.

4

It is actually really strange it does not work locally I suspect some CSS or other local setup to break it as it is totally ok in the playground.

Maybe you could share a repro on github ?

5

Hi Bavs. Umm…

I see right-side of button ONLY… as hit-test-active (FF & GC). You see it working fine? (thx)

6

Yup all good for me both GC and FF :frowning: I bet DK will sort it in no time tomorrow

7

Your text has by default 100% width/height, so it covers the whole area <= that may be a bug in Babylon.js if it was not the case in earlier releases (?)

As it is displayed after the button and because they both have zIndex = 0, it will intercept all mouse events.

You can either:

4 Likes
8

LoL
You were right. I set the width, height and everything works as expected.
Thanks.