Is GUI3D StackPanel3D a "virtual container" with no events?

Questions
1

I have a couple of problems with StackPanel3D which leads me to think it is not a real container with function but more of a “virtual” container only involved in refreshing layout. Is this correct or am I doing something wrong?

See PG Babylon.js Playground

StackPanel3D.onPointerOutObservable never gets triggered (line 56).

Also setting StackPanel3D.isVisible has no effect on its children, I have to traverse the children and hide them too (see line 68). What about if there are nested panels? That could get quite messy.

2

Pointer out / hover events are handled with ray picking, so as the StackPanel3D has no geometry it won’t work. Maybe creating a fully transparent geometry for it would work…

Regarding the visibility, you can associate a mesh (even without geometry) with a StackPanel3D by overloading _createNode so that setting its visibility will also update its children visibility:

https://playground.babylonjs.com/#7UDAI2#1

3

Thanks that solves the visibility problem.

I changed the prototype to create a plane and now the pointer out observable gets fired but it also gets fired when entering the child controls. I found a similar question when using 2D GUI here … Child control triggers onPointerOutObservable [GUI] - Questions & Answers - HTML5 Game Devs Forum

As a workaround I tried to get the input manager to check if the pointer was over a child control but the input manager constructor is not recognised… https://playground.babylonjs.com/#7UDAI2#2

Is there a simple way around this? I could try adding pointer enter observables to the children to reverse the pointer out of the parent but it is getting messy.

4

I’m no expert in pointer control/managing, maybe @PolygonalSun or @Deltakosh will have some ideas.

5

can you repro what you need in a working PG? If I understand correctly you want the event to be bubble up to the container?

6

The PG with the situation was linked previously in the thread but strangley I have just gone back to that to post it here and it is now not working. This PG was working a few days ago but isn’t now. It gives some error about cannot read sideOrientation from undefined, I tried to fix that but no luck; https://playground.babylonjs.com/#7UDAI2#4

The behaviour I wanted was not a bubbling of events but rather to suppress onPointerExit from a container control when the pointer enters a child control. I wanted a way of knowing when I left the containers outer bounds (but not when on a child). Does that make sense? I have reworked my scene so I am no longer needing this but it would still be good to know how to do it.

7

I doubt this code was working:

BABYLON.GUI.StackPanel3D.prototype._createNode = function(scene) {
    return new BABYLON.MeshBuilder.CreatePlane("panel");
}

What I did in my PG that was working was:

BABYLON.GUI.StackPanel3D.prototype._createNode = function(scene) {
    return new BABYLON.Mesh("name", scene);
}

If you want to make your code work you should do something like this instead:

BABYLON.GUI.StackPanel3D.prototype._createNode = function(scene) {
    return BABYLON.MeshBuilder.CreatePlane("panel", { size: 2 }, scene);
}
8

Ah great, thank you. I thought I had tried it without that but obviously I didn’t.

I have adjusted the PG so it now runs. The menu pops up when pointer is over the sphere but then placing the pointer over one of the child buttons fires pointer exit on the plane - this is what I wanted to prevent. PG: https://playground.babylonjs.com/#7UDAI2#5

9

You could do smthg like this to ensure you are not over a button before closing ? https://playground.babylonjs.com/#7UDAI2#6

1 Like
10

Thanks that will work.