search

BabylonJS / Editor

Community managed visual editor for Babylon.js
http://editor.babylonjs.com/
845 stars 237 forks source link

Gui Editor not Writing Font Properties to .gui file #453

Open lewis-cortright opened 1 year ago

lewis-cortright commented 1 year ago

Issue: after saving (ctrl + s) or (file > save) .gui file does not contain the following properties :

After more debugging I noticed that the properties are actually being deleted when I click run in the editor.

The last property in the textBlock object is className

From Editor => GUI Editor

{
    "root": {
        "tags": null,
        "renderToIntermediateTexture": false,
        "maxLayoutCycle": 3,
        "adaptHeightToChildren": false,
        "adaptWidthToChildren": false,
        "background": "",
        "isHitTestVisible": true,
        "isPointerBlocker": false,
        "isFocusInvisible": false,
        "clipChildren": true,
        "clipContent": true,
        "useBitmapCache": false,
        "shadowOffsetX": 0,
        "shadowOffsetY": 0,
        "shadowBlur": 0,
        "shadowColor": "black",
        "hoverCursor": "",
        "alpha": 1,
        "scaleX": 1,
        "scaleY": 1,
        "rotation": 0,
        "transformCenterY": 0.5,
        "transformCenterX": 0.5,
        "horizontalAlignment": 2,
        "verticalAlignment": 2,
        "fixedRatio": 0,
        "width": "100%",
        "height": "100%",
        "color": "",
        "zIndex": 0,
        "notRenderable": false,
        "isVisible": true,
        "descendantsOnlyPadding": false,
        "paddingLeft": "0px",
        "paddingRight": "0px",
        "paddingTop": "0px",
        "paddingBottom": "0px",
        "left": "0px",
        "top": "0px",
        "linkOffsetX": "0px",
        "linkOffsetY": "0px",
        "isEnabled": true,
        "disabledColor": "#9a9a9a",
        "disabledColorItem": "#6a6a6a",
        "name": "root",
        "className": "Container",
        "children": [
            {
                "tags": null,
                "thickness": 1,
                "cornerRadius": 0,
                "renderToIntermediateTexture": false,
                "maxLayoutCycle": 3,
                "adaptHeightToChildren": false,
                "adaptWidthToChildren": false,
                "background": "#424242FF",
                "isHitTestVisible": true,
                "isPointerBlocker": true,
                "isFocusInvisible": false,
                "clipChildren": false,
                "clipContent": false,
                "useBitmapCache": false,
                "shadowOffsetX": 0,
                "shadowOffsetY": 0,
                "shadowBlur": 0,
                "shadowColor": "black",
                "hoverCursor": "",
                "fontOffset": {
                    "ascent": 16,
                    "height": 21,
                    "descent": 5
                },
                "alpha": 1,
                "scaleX": 1,
                "scaleY": 1,
                "rotation": 0.0016197038003364916,
                "transformCenterY": 0.5,
                "transformCenterX": 0.5,
                "horizontalAlignment": 2,
                "verticalAlignment": 2,
                "fixedRatio": 0,
                "width": "100.64%",
                "height": "102.53000000000002%",
                "color": "#00000014",
                "zIndex": 0,
                "notRenderable": false,
                "isVisible": true,
                "descendantsOnlyPadding": false,
                "paddingLeft": "0px",
                "paddingRight": "0px",
                "paddingTop": "0px",
                "paddingBottom": "0px",
                "left": "0px",
                "top": "0px",
                "linkOffsetX": "0px",
                "linkOffsetY": "0px",
                "isEnabled": true,
                "disabledColor": "#9a9a9a",
                "disabledColorItem": "#6a6a6a",
                "name": "Root",
                "className": "Rectangle",
                "children": [
                    {
                        "tags": null,
                        "thickness": 1,
                        "cornerRadius": 0,
                        "renderToIntermediateTexture": false,
                        "maxLayoutCycle": 3,
                        "adaptHeightToChildren": false,
                        "adaptWidthToChildren": false,
                        "background": "#333333",
                        "isHitTestVisible": true,
                        "isPointerBlocker": true,
                        "isFocusInvisible": false,
                        "clipChildren": true,
                        "clipContent": true,
                        "useBitmapCache": false,
                        "shadowOffsetX": 0,
                        "shadowOffsetY": 0,
                        "shadowBlur": 0,
                        "shadowColor": "black",
                        "hoverCursor": "",
                        "alpha": 0.8,
                        "scaleX": 1,
                        "scaleY": 1,
                        "rotation": 0,
                        "transformCenterY": 0.5,
                        "transformCenterX": 0.5,
                        "horizontalAlignment": 2,
                        "verticalAlignment": 2,
                        "fixedRatio": 0,
                        "width": "239.61px",
                        "height": "79.87px",
                        "color": "#ffffff",
                        "zIndex": 0,
                        "notRenderable": false,
                        "isVisible": true,
                        "descendantsOnlyPadding": false,
                        "paddingLeft": "0px",
                        "paddingRight": "0px",
                        "paddingTop": "0px",
                        "paddingBottom": "0px",
                        "left": "-0.39508368847588915px",
                        "top": "29.460000000000004%",
                        "linkOffsetX": "0px",
                        "linkOffsetY": "0px",
                        "isEnabled": true,
                        "disabledColor": "#9a9a9a",
                        "disabledColorItem": "#6a6a6a",
                        "name": "PlayButton",
                        "className": "Button",
                        "children": [
                            {
                                "tags": null,
                                "resizeToFit": false,
                                "textWrapping": 1,
                                "text": "Play",
                                "textHorizontalAlignment": 2,
                                "textVerticalAlignment": 2,
                                "lineSpacing": "0px",
                                "outlineWidth": 0,
                                "underline": false,
                                "lineThrough": false,
                                "outlineColor": "white",
                                "wordDivider": " ",
                                "forceResizeWidth": false,
                                "isHitTestVisible": true,
                                "isPointerBlocker": false,
                                "isFocusInvisible": false,
                                "clipChildren": true,
                                "clipContent": true,
                                "useBitmapCache": false,
                                "shadowOffsetX": 0,
                                "shadowOffsetY": 0,
                                "shadowBlur": 0,
                                "shadowColor": "#FF0000",
                                "hoverCursor": "",
                                "fontOffset": {
                                    "ascent": 56,
                                    "height": 70,
                                    "descent": 14
                                },
                                "alpha": 1,
                                "scaleX": 1,
                                "scaleY": 1,
                                "rotation": 0,
                                "transformCenterY": 0.5,
                                "transformCenterX": 0.5,
                                "horizontalAlignment": 2,
                                "verticalAlignment": 2,
                                "fixedRatio": 0,
                                "width": "100%",
                                "height": "139px",
                                "color": "",
                                "zIndex": 0,
                                "notRenderable": false,
                                "isVisible": true,
                                "descendantsOnlyPadding": false,
                                "paddingLeft": "0px",
                                "paddingRight": "0px",
                                "paddingTop": "0px",
                                "paddingBottom": "0px",
                                "left": "0px",
                                "top": "0px",
                                "linkOffsetX": "0px",
                                "linkOffsetY": "0px",
                                "isEnabled": true,
                                "disabledColor": "#9a9a9a",
                                "disabledColorItem": "#6a6a6a",
                                "name": "Button_button",
                                "className": "TextBlock"
                            }
                        ],
                        "textBlockName": "Button_button"
                    },
                    {
                        "tags": null,
                        "resizeToFit": true,
                        "textWrapping": 0,
                        "text": "Pandas",
                        "textHorizontalAlignment": 2,
                        "textVerticalAlignment": 2,
                        "lineSpacing": "0px",
                        "outlineWidth": 0,
                        "underline": false,
                        "lineThrough": false,
                        "outlineColor": "white",
                        "wordDivider": " ",
                        "forceResizeWidth": false,
                        "isHitTestVisible": true,
                        "isPointerBlocker": true,
                        "isFocusInvisible": false,
                        "clipChildren": true,
                        "clipContent": true,
                        "useBitmapCache": false,
                        "shadowOffsetX": 0,
                        "shadowOffsetY": 0,
                        "shadowBlur": 0,
                        "shadowColor": "black",
                        "hoverCursor": "",
                        "fontOffset": {
                            "ascent": 116,
                            "height": 145,
                            "descent": 29
                        },
                        "alpha": 1,
                        "scaleX": 2,
                        "scaleY": 2,
                        "rotation": 0,
                        "transformCenterY": 0.5,
                        "transformCenterX": 0.5,
                        "horizontalAlignment": 2,
                        "verticalAlignment": 2,
                        "fixedRatio": 0,
                        "width": "440px",
                        "height": "145px",
                        "color": "#FF0000FF",
                        "zIndex": 0,
                        "notRenderable": false,
                        "isVisible": true,
                        "descendantsOnlyPadding": false,
                        "paddingLeft": "0px",
                        "paddingRight": "0px",
                        "paddingTop": "0px",
                        "paddingBottom": "0px",
                        "left": "0.7175809593296187px",
                        "top": "-33.86%",
                        "linkOffsetX": "0px",
                        "linkOffsetY": "0px",
                        "isEnabled": true,
                        "disabledColor": "#9a9a9a",
                        "disabledColorItem": "#6a6a6a",
                        "name": "Title",
                        "className": "TextBlock"
                    }
                ]
            }
        ]
    },
    "width": 1920,
    "height": 1080
}

Test Example Created from (https://gui.babylonjs.com/)

{
    "root": {
        "tags": null,
        "renderToIntermediateTexture": false,
        "maxLayoutCycle": 3,
        "adaptHeightToChildren": false,
        "adaptWidthToChildren": false,
        "background": "",
        "metadata": {
            "_previousCenter": {
                "x": 1,
                "y": 1
            }
        },
        "isHitTestVisible": true,
        "isPointerBlocker": false,
        "isFocusInvisible": false,
        "clipChildren": true,
        "clipContent": true,
        "useBitmapCache": false,
        "shadowOffsetX": 0,
        "shadowOffsetY": 0,
        "shadowBlur": 0,
        "shadowColor": "black",
        "hoverCursor": "",
        "alpha": 1,
        "scaleX": 1,
        "scaleY": 1,
        "rotation": 0,
        "transformCenterY": 0.5,
        "transformCenterX": 0.5,
        "horizontalAlignment": 2,
        "verticalAlignment": 2,
        "fixedRatio": 0,
        "fixedRatioMasterIsWidth": true,
        "width": "100%",
        "height": "100%",
        "color": "",
        "zIndex": 0,
        "notRenderable": false,
        "isVisible": true,
        "descendantsOnlyPadding": false,
        "paddingLeft": "0px",
        "paddingRight": "0px",
        "paddingTop": "0px",
        "paddingBottom": "0px",
        "left": "0px",
        "top": "0px",
        "linkOffsetX": "0px",
        "linkOffsetY": "0px",
        "isEnabled": true,
        "disabledColor": "#9a9a9a",
        "disabledColorItem": "#6a6a6a",
        "name": "root",
        "className": "Container",
        "children": [
            {
                "tags": null,
                "thickness": 1,
                "cornerRadius": 0,
                "cornerRadiusX": 0,
                "cornerRadiusY": 0,
                "cornerRadiusZ": 0,
                "cornerRadiusW": 0,
                "renderToIntermediateTexture": false,
                "maxLayoutCycle": 3,
                "adaptHeightToChildren": false,
                "adaptWidthToChildren": false,
                "background": "#cccccc",
                "metadata": {
                    "_previousCenter": {
                        "x": 1,
                        "y": 1
                    }
                },
                "isHitTestVisible": true,
                "isPointerBlocker": true,
                "isFocusInvisible": false,
                "clipChildren": true,
                "clipContent": true,
                "useBitmapCache": false,
                "shadowOffsetX": 0,
                "shadowOffsetY": 0,
                "shadowBlur": 0,
                "shadowColor": "black",
                "hoverCursor": "",
                "alpha": 1,
                "scaleX": 1,
                "scaleY": 1,
                "rotation": 0,
                "transformCenterY": 0.5,
                "transformCenterX": 0.5,
                "horizontalAlignment": 2,
                "verticalAlignment": 2,
                "fixedRatio": 0,
                "fixedRatioMasterIsWidth": true,
                "width": "100%",
                "height": "100%",
                "color": "#000000",
                "zIndex": 0,
                "notRenderable": false,
                "isVisible": true,
                "descendantsOnlyPadding": false,
                "paddingLeft": "0px",
                "paddingRight": "0px",
                "paddingTop": "0px",
                "paddingBottom": "0px",
                "left": "0px",
                "top": "0px",
                "linkOffsetX": "0px",
                "linkOffsetY": "0px",
                "isEnabled": true,
                "disabledColor": "#9a9a9a",
                "disabledColorItem": "#6a6a6a",
                "name": "root",
                "className": "Rectangle",
                "children": [
                    {
                        "tags": null,
                        "resizeToFit": true,
                        "textWrapping": 0,
                        "text": "Test",
                        "textHorizontalAlignment": 2,
                        "textVerticalAlignment": 2,
                        "lineSpacing": "0px",
                        "outlineWidth": 0,
                        "underline": false,
                        "lineThrough": false,
                        "applyOutlineToUnderline": false,
                        "outlineColor": "white",
                        "wordDivider": " ",
                        "forceResizeWidth": false,
                        "metadata": {
                            "_previousCenter": {
                                "x": 1,
                                "y": 1
                            }
                        },
                        "isHitTestVisible": true,
                        "isPointerBlocker": true,
                        "isFocusInvisible": false,
                        "clipChildren": true,
                        "clipContent": true,
                        "useBitmapCache": false,
                        "shadowOffsetX": 0,
                        "shadowOffsetY": 0,
                        "shadowBlur": 0,
                        "shadowColor": "black",
                        "hoverCursor": "",
                        "fontOffset": {
                            "ascent": 64,
                            "height": 80,
                            "descent": 16
                        },
                        "alpha": 1,
                        "scaleX": 1,
                        "scaleY": 1,
                        "rotation": 0,
                        "transformCenterY": 0.5,
                        "transformCenterX": 0.5,
                        "horizontalAlignment": 2,
                        "verticalAlignment": 2,
                        "fixedRatio": 0,
                        "fixedRatioMasterIsWidth": true,
                        "width": "132px",
                        "height": "80px",
                        "color": "#000000",
                        "zIndex": 0,
                        "notRenderable": false,
                        "isVisible": true,
                        "descendantsOnlyPadding": false,
                        "paddingLeft": "0px",
                        "paddingRight": "0px",
                        "paddingTop": "0px",
                        "paddingBottom": "0px",
                        "left": "0px",
                        "top": "0px",
                        "linkOffsetX": "0px",
                        "linkOffsetY": "0px",
                        "isEnabled": true,
                        "disabledColor": "#9a9a9a",
                        "disabledColorItem": "#6a6a6a",
                        "name": "Textblock",
                        "className": "TextBlock",
                        "fontFamily": "Arial",
                        "fontSize": "71px",
                        "fontWeight": "",
                        "fontStyle": ""
                    }
                ]
            }
        ]
    },
    "width": 1024,
    "height": 1024
}
dezashibi commented 8 months ago

Yes I'm facing similar problem with the GUI Editor, here is what happened:

  1. added a font familly in the css
  2. in GUI editor tried to add custom font
  3. when I typed the font family the textbox remains red and I cannot save it
  4. I've tested with any other fonts, the save button works
  5. but no changed font whether the accepted custom font or default fonts are not saved to the GUI file
joewashek commented 8 months ago

I am also having this issue. Editor v4.7.0

I'm trying to change the font size of a textblock in the GUI editor.

  1. add text block (default font size is 18)
  2. change text block font size to 50px
  3. File > Save
  4. Close GUI editor dialog
  5. Open the GUI file changed previously, font size is reset back to default 18
  6. Inspect JSON file, no properties exist for font family, size, etc.