Sometimes shapes in Palette do not fit as expected

I am encountering a weird situation that only happens once in a while, so it is hard to tell what is going on.

There is a palette with shapes, and usually the shapes in the palette grid come out as expected (good).

Yet once in a while, the result is that figures in the grid show up stacked, one by one (bad).

Now, I am also using angular-ui tabs (angularjs), and implementing the diagram.delayInitialization feature somewhat similar to the jquery ui tabs example in the gojs documentation.

Any idea why this might be happening only once in a while?

We have never seen that before. It is as if the layout thought that the viewport width were zero.

Why do you use delayInitialization?

…because of jquery ui tabs example.

In such cases was there a call to Diagram.requestUpdate after the HTML DIV element that is hosting the GoJS Diagram got the correct (non-zero, non-narrow) width and height?

The call to initialize the palaette is when the angular ui tab is selected.

After selection, if I wrap the call to initialize the palette inside an angular $timeout with a period of 100ms, seems to be OK. If maybe 30ms or less for the timeout (or no timeout), results are mixed. I am going to go with the timeout of 100ms.

If you’re satisfied, that’s great.

But it should be clear that we still do not understand the cause of the problem. That’s why I asked about whether or not there was a call to Diagram.requestUpdate after the HTML DIV gets the correct size and before the layout is performed assuming the wrong viewport size.