GUI TextBlock Lines

[Ericky14]

Hello,

I am trying to create a TextBlock with textwrapping and wait until the _lines property has been calculated. Is there any sure way of doing that? Maybe some function I can call to have it calculated instead of having to use an observable. (Also, the TextBlock is child to a StackPanel)

Right now I am creating the TextBlock and using TextBlock.onDirtyObservable and inside that I check TextBlock._lines. However, this value can sometimes be wrong as I have seen. This seems to be due to _context.measureText returning different values at times. I observed this behavior when I force reload the page, if I just reload it normally the _lines property is properly computed.

Maybe there is some kind of caching on the canvas context or something that makes it return different text widths?

Any help on this would be appreciated.

[Wingnut]

Hiya E.

    Let me imagine-up something...

scene.executeWhenReady(function(){
     myTextBlock.isVisible(false);
     var linesArray = myTextBlock._lines;
     [...demented before-textBlock-display experiments...]
     myTextBlock.isVisible(true);
});

Would THAT give you a solution?  You could do stuff to the _lines array... prior to textBlock display.

But don't expect the textBlock to update its measurements... AFTER you adjust stuff.  Babylon GUI doesn't enjoy trying automatic "late-measuring". 

If you really know what you are doing, you can tweak the measurement numbers manually, yourself.  The tweaks might not respond as you want, though.

But, again, it's better to dispose stale/unwanted textBlocks, and make new ones, whenever CERTAIN changes are wanted.  There is no HTML browser-like "automatic re-flow"... in BABYLON GUI.

I hope this helps.  I think you might be wishing-for GUI features... that are impossible, due to the way GUI operates.  Not sure, though.  If you can give us a few more details about what you wish to do, that might help.  Are you going to try re-wrapping, or maybe in-text font sizings/colorings?  Do tell more, if you would/can.  Thx.  Party on.

[Ericky14]

Sorry, that's not what I meant.

I meant I want to do something like this:

var panel = new StackPanel

var myTextBlock = new TextBlock

myTextBlock.fontSize = '20px'

myTextBlock.text = 'Testing text'

myTextBlock.textWrapping = true

var height = myTextBlock._lines.length * 20

panel.height = `${height}px`

panel.addControl(myTextBlock)

But this is not currently possible because the _lines property is not even set as soon as you create the TextBlock. You have to wait for the next few frames.

So, I was wondering if there is an internal function I can call to take the measurements as soon as I set all the TextBlock properties.

[brianzinn]

The internal function that initializes lines is _parseLineWithTextWrapping - it's protected, so API could change any time:
https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/controls/textBlock.ts#L160

The WebGL call to measure text only returns width, but you could write your own loop like that to measure height - just need width of container.

[GameMonetize]

We could imagine adding an observable that could be raised when the lines array is built?

[Ericky14]

That makes sense @brianzinn

@Deltakosh That would be very helpful

[GameMonetize]

It will be in next commit