Skip canvas being used during Control.serialize()?

Questions
1

So this is a strange one and I understand that this is not really a common use case.

For my Figma to BabylonJS Figma plug-in. I have decided to rewrite it to use actual BabylonJS controls from NPM rather than just using my own custom-made psedo-controls. This is worked very well for things like containers, lines, rectangle etc… however when I am on font I have noticed that my plug-in is crashing, showing the error message if I try to give it a new font size, style or weight.

Invalid engine. Unable to create a canvas.

Again, other controls will Serialize fine, however, when I try to serialise a text block that I have tried to change its font size or its weight or its style. I get that error.

The error message suggests that Babylon.js is trying to create a canvas to measure the text metrics (fontWeight/Stlye/Size, in this case). I think this is likely happening during the serialization process, as i assume Babylon.js needs to calculate these metrics to accurately serialize the TextBlock control?

My question is, is there a way that I could simply skip this?
I think it’s quite strange behaviour since this isn’t required for other elements. I understand that a lot of the text stuff reflects real world CSS. Just wanted to ask if it’s possible that I skip the creating a fake canvas.

2

The real question is: why does it fail to create it?

3

Figma plugins don’t have a canvas to access.

4

ooh I see! Please create an issue for me on the repo: I will add an option for you :slight_smile:

5
1 Like
6

hi @Deltakosh

I got the latest version with this new change, but it only works for controls. I try to add the AllowCanvas to Containers it wont work as containers dont have it.

I add all the controls to a container then run the seralize once on a container. Not sure how to achive this with just controls as controls cant have children added to them. Is there some Typescipt namespace issue I am not seeing?

7

nope sorry this is my bad :wink:

Here is the missing part:
Add allowCanvas to GUI Containers by deltakosh · Pull Request #15028 · BabylonJS/Babylon.js (github.com)

1 Like
8

Hello @Deltakosh , sorry i feel like the most annoying person right now…

The allowCanvas = false works in that I don’t get an error on canvas-less environments. However, anything to do with font size, fontweight, and fontfamily is completely omitted from the serialization output. I need a playground here (you need to use the console to see the output) https://playground.babylonjs.com/#XJC2MY#1

The expected output is that whenever I set the font, size too, should still be in the serialzed output, even if it skips the canvas.

9

ok now with a PG it is clearer :smiley:
Final fix for allowCanvas by deltakosh · Pull Request #15033 · BabylonJS/Babylon.js (github.com)

1 Like