container.clipChildren is not working for grid?

Bugs
1

Hello,

I’m using a grid to make my menu. It seems that the shadow of my controls is cropped by the cell of the grid, even thought I changed grid.clipChildren to false.

See my code here:
image

Here the results:
chrome_2019-04-26_11-26-42

I tried to make a playground but for some reason my function createGrid does not work in the playground :confused:

2

We are almost done with 4.0 but if you can share a repro ASAP I will fix it for you
drop your code in a PG even if it is not working

3

Hello!
thank you very much for replying so quickly.

Here is the PG:
https://playground.babylonjs.com/ts.html#DK7M9T#10

It seems that my GridHelper is not working anymore with the new release candidate… is this due to the ValueAndUnit type? I don’t know, but my code should be creating a 5 by 5 grid with alternating dark/white rectangles.

Although the GridHelper is not working, we can still see the shadow issue: the shadow of the black rectangle is clipped.

4

Ok so the TypeScript Playground has a bug with the GUI definition but your code compiles (The errors are wrongly reported)

But your main problem is that you are adding the rectangles in more than one cell. A control can only belong to one single cell (I will add a warning).
I gave them name and you can see that they are in half of the cells:

image
image.png875×649 49.8 KB

5

Oh, I see, I think it was working some time ago but it makes sense that it should not…

Is it possible to clone a Control/Container? so that I can use rect1 and rect2 as template and I would clone them when I add them to the grid. Something like that:

let cellObject = [rect1, rect2]
let index = 0;
for (row = 0; row < nrow; row++){
      for (col = 0; col < ncol; col++){
            index = (row*ncol+col%ncol) % cellObject.length;
            grid.addControl(cellObject[index].clone(), row, col);     
      }
}
6

It seems that you actually get the behaviour I was expecting (even if it is “wrong”): to have the same object in several cells.

On my side the inspector looks like that:
image

But anyway we are drifting away from the main issue of the thread which is: Can we deactivate shadow/object clipping within the grid cells :smiley: ?!

8

it works now because I pushed my fix (check your console to see the warning message)

9

and here we are:
https://playground.babylonjs.com/ts.html#DK7M9T#12

I’ve added clipContent for you :slight_smile:

1 Like
10

That is amazingly useful :smiley: We can now organise GUI elements with a grid without worrying too much about the grid!

1 Like