Fixed #2873

Playground/css/index.css

@@ -402,42 +402,6 @@ body {
     color:#999;
     display: inline-block;
 }
-
-/* MONACO */
-
-.monaco-editor .container:before,
-.monaco-editor .row:before {
-    content: "";
-    display: inherit;
-}
-.monaco-editor .container:after,
-.monaco-editor .row:after {
-    clear: inherit;
-}
-.monaco-editor .container {
-    width: auto;
-    margin: inherit;
-    padding: inherit;
-}
-.monaco-editor .close {
-    float: none;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-    text-shadow: inherit;
-    opacity: inherit;
-    filter: inherit;
-}
-.monaco-editor .row {
-    margin: inherit;
-}
-.monaco-editor .invisible {
-    visibility: visible;
-}
-.monaco-editor .view-lines {
-    font-family: 'Inconsolata' !important;
-}
 /* Save form & co */
 
 .save-message {
@@ -540,4 +504,5 @@ body {
     .navbar .select .toDisplayBig ul {
         column-count: 1;
     }
-}
+}
+

Playground/js/index.js

@@ -23,6 +23,21 @@
         });
     };
 
+    var editorOptions = {
+        value: "",
+        language: "javascript",
+        lineNumbers: true,
+        tabSize: "auto",
+        insertSpaces: "auto",
+        roundedSelection: true,
+        scrollBeyondLastLine: false,
+        readOnly: false,
+        theme: "vs",
+        contextmenu: false,
+        folding: true,
+        showFoldingControls: "always",
+        renderIndentGuides: true
+    };
 
     var fontSize = 14;
 
@@ -685,19 +700,7 @@
 
             var oldCode = jsEditor.getValue();
             jsEditor.dispose();
-            jsEditor = monaco.editor.create(document.getElementById('jsEditor'), {
-                value: "",
-                language: "javascript",
-                lineNumbers: true,
-                tabSize: "auto",
-                insertSpaces: "auto",
-                roundedSelection: true,
-                scrollBeyondLastLine: false,
-                automaticLayout: true,
-                readOnly: false,
-                theme: vsTheme,
-                contextmenu: false
-            });
+            jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions);
             jsEditor.setValue(oldCode);
             setFontSize(fontSize);
 
@@ -977,20 +980,7 @@
                 require(['vs/editor/editor.main'], function () {
                     monaco.languages.typescript.javascriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
 
-                    jsEditor = monaco.editor.create(document.getElementById('jsEditor'), {
-                        value: "",
-                        language: "javascript",
-                        lineNumbers: true,
-                        tabSize: "auto",
-                        insertSpaces: "auto",
-                        roundedSelection: true,
-                        scrollBeyondLastLine: false,
-                        automaticLayout: true,
-                        readOnly: false,
-                        theme: "vs",
-                        contextmenu: false,
-                        folding: true
-                    });
+                    jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions);
 
                     run();
                 });

Playground/package.json

@@ -9,7 +9,7 @@
   "readme": "https://github.com/BabylonJS/Babylon.js/blob/master/readme.md",
   "license": "(Apache-2.0)",
   "devDependencies": {
-    "monaco-editor": "~0.7.0"
+    "monaco-editor": "~0.10.0"
   },
   "scripts": {
     "test": "browser-sync start --server --files **/* --no-inject-changes --startPath index.html"

gui/src/controls/textBlock.ts

@@ -10,6 +10,20 @@ module BABYLON.GUI {
 
         private _lines: any[];
         private _totalHeight: number;
+        private _resizeToFit: boolean = false;
+
+        get resizeToFit(): boolean {
+            return this._resizeToFit;
+        }
+
+        set resizeToFit(value: boolean) {
+            this._resizeToFit = value;
+
+            if (this._resizeToFit) {
+                this._width.ignoreAdaptiveScaling = true;
+                this._height.ignoreAdaptiveScaling = true;
+            }
+        }
 
         public get textWrapping(): boolean {
             return this._textWrapping;
@@ -86,6 +100,7 @@ module BABYLON.GUI {
                     break;
             }
 
+
             context.fillText(text, this._currentMeasure.left + x, y);
         }
 
@@ -105,7 +120,7 @@ module BABYLON.GUI {
             this._lines = [];
             var _lines = this.text.split("\n");
 
-            if (this._textWrapping) {
+            if (this._textWrapping && !this._resizeToFit) {
                 for(var _line of _lines) {
                     this._lines.push(this._parseLineWithTextWrapping(_line, context));
                 }
@@ -165,10 +180,25 @@ module BABYLON.GUI {
 
             rootY += this._currentMeasure.top;
 
+            var maxLineWidth: number = 0;
+
             for (var line of this._lines) {
                 this._drawText(line.text, line.width, rootY, context);
                 rootY += this._fontOffset.height;
+
+                if (line.width > maxLineWidth) maxLineWidth = line.width;
+            }
+
+            if (this._resizeToFit) {
+                this.width = this.paddingLeftInPixels + this.paddingRightInPixels + maxLineWidth + 'px';
+                this.height = this.paddingTopInPixels + this.paddingBottomInPixels + this._fontOffset.height * this._lines.length + 'px';
             }
+
+            console.log('width', this.width);
+            console.log('height', this.height);
+
+            /*console.log('width', maxLineWidth);
+            console.log('height', this._fontOffset.height * this._lines.length);*/
         }
     }
-}
+}