refactored GUI

gui/src/2D/controls/button.ts

@@ -5,6 +5,7 @@ import { Rectangle } from "./rectangle";
 import { Control } from "./control";
 import { TextBlock } from "./textBlock";
 import { Image } from "./image";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create 2D buttons
@@ -262,4 +263,5 @@ export class Button extends Rectangle {
 
         return result;
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Button"] = Button;

gui/src/2D/controls/checkbox.ts

@@ -4,6 +4,7 @@ import { Vector2 } from "babylonjs/Maths/math";
 import { Control } from "./control";
 import { StackPanel } from "./stackPanel";
 import { TextBlock } from "./textBlock";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to represent a 2D checkbox
@@ -175,3 +176,4 @@ export class Checkbox extends Control {
         return panel;
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.Checkbox"] = Checkbox;

gui/src/2D/controls/colorpicker.ts

@@ -9,6 +9,7 @@ import { Button } from "./button";
 import { Grid } from "./grid";
 import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
 import { TextBlock } from "../controls/textBlock";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to create color pickers */
 export class ColorPicker extends Control {
@@ -1512,4 +1513,5 @@ export class ColorPicker extends Control {
             }
         });
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.ColorPicker"] = ColorPicker;

gui/src/2D/controls/container.ts

@@ -4,6 +4,7 @@ import { Logger } from "babylonjs/Misc/logger";
 import { Control } from "./control";
 import { Measure } from "../measure";
 import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Root class for 2D containers
@@ -456,4 +457,5 @@ export class Container extends Control {
             this.children[index].dispose();
         }
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Container"] = Container;

gui/src/2D/controls/control.ts

@@ -13,6 +13,7 @@ import { ValueAndUnit } from "../valueAndUnit";
 import { Measure } from "../measure";
 import { Style } from "../style";
 import { Matrix2D, Vector2WithInfo } from "../math2D";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Root class used for all 2D controls
@@ -1833,6 +1834,60 @@ export class Control {
         this._fontOffset = Control._GetFontOffset(this._font);
     }
 
+    public _parseFromXml(node : any, parent: any, linkParent: any) {
+        if (parent && linkParent) {
+            parent.addControl(guiNode);
+        }
+
+        for (let i = 0; i < node.attributes.length; i++) {
+
+            if (node.attributes[i].name.toLowerCase().includes("datasource")) {
+                continue;
+            }
+
+            if (node.attributes[i].name.toLowerCase().includes("observable")) {
+
+                let element = this._getChainElement(node.attributes[i].value);
+                guiNode[node.attributes[i].name].add(element);
+
+                continue;
+            } else if (node.attributes[i].name == "linkWithMesh") {
+                if (this._parentClass) {
+                    guiNode.linkWithMesh(this._parentClass[node.attributes[i].value]);
+                } else {
+                    guiNode.linkWithMesh(window[node.attributes[i].value]);
+                }
+            } else if (node.attributes[i].value.startsWith("{{") && node.attributes[i].value.endsWith("}}")) {
+                let element = this._getChainElement(node.attributes[i].value.substring(2, node.attributes[i].value.length - 2));
+                guiNode[node.attributes[i].name] = element;
+            } else if (!this._objectAttributes[node.attributes[i].name]) {
+                if (node.attributes[i].value == "true" || node.attributes[i].value == "false") {
+                    guiNode[node.attributes[i].name] = (node.attributes[i].value == 'true');
+                } else {
+                    guiNode[node.attributes[i].name] = !isNaN(Number(node.attributes[i].value)) ? Number(node.attributes[i].value) : node.attributes[i].value;
+                }
+            } else {
+                guiNode[node.attributes[i].name] = this._getClassAttribute(node.attributes[i].value);
+            }
+        }
+
+        if (!node.attributes.getNamedItem("id")) {
+            this._nodes[node.nodeName + Object.keys(this._nodes).length + "_gen"] = guiNode;
+            return guiNode;
+        }
+
+        if (!this._nodes[node.attributes.getNamedItem("id").nodeValue]) {
+            this._nodes[node.attributes.getNamedItem("id").nodeValue] = guiNode;
+        } else {
+            throw "XmlLoader Exception : Duplicate ID, every element should have an unique ID attribute";
+        }
+        return guiNode;
+
+    } catch (e) {
+        throw "XmlLoader Exception : Error parsing Control " + node.nodeName + "," + e + ".";
+    }
+    }
+
     /** Releases associated resources */
     public dispose() {
         this.onDirtyObservable.clear();
@@ -1967,3 +2022,4 @@ export class Control {
         context.translate(-x, -y);
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.Control"] = Control;

gui/src/2D/controls/displayGrid.ts

@@ -1,4 +1,5 @@
 import { Control } from "./control";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to render a grid  */
 export class DisplayGrid extends Control {
@@ -218,4 +219,5 @@ export class DisplayGrid extends Control {
     protected _getTypeName(): string {
         return "DisplayGrid";
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.DisplayGrid"] = DisplayGrid;

gui/src/2D/controls/ellipse.ts

@@ -1,6 +1,7 @@
 import { Container } from "./container";
 import { Control } from "./control";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to create 2D ellipse containers */
 export class Ellipse extends Container {
@@ -84,4 +85,5 @@ export class Ellipse extends Container {
 
         context.clip();
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Ellipse"] = Ellipse;

gui/src/2D/controls/grid.ts

@@ -5,6 +5,7 @@ import { ValueAndUnit } from "../valueAndUnit";
 import { Control } from "./control";
 import { Measure } from "../measure";
 import { Tools } from 'babylonjs/Misc/tools';
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create a 2D grid container
@@ -488,4 +489,5 @@ export class Grid extends Container {
 
         this._childControls = [];
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Grid"] = Grid;

gui/src/2D/controls/image.ts

@@ -4,6 +4,7 @@ import { Tools } from "babylonjs/Misc/tools";
 
 import { Control } from "./control";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create 2D images
@@ -749,4 +750,5 @@ export class Image extends Control {
     public static readonly STRETCH_EXTEND = 3;
     /** NINE_PATCH */
     public static readonly STRETCH_NINE_PATCH = 4;
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Image"] = Image;

gui/src/2D/controls/inputPassword.ts

@@ -1,4 +1,5 @@
 import { InputText } from "./inputText";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create a password control
@@ -12,3 +13,4 @@ export class InputPassword extends InputText {
         return txt;
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.InputPassword"] = InputPassword;

gui/src/2D/controls/inputText.ts

@@ -8,6 +8,7 @@ import { Control } from "./control";
 import { IFocusableControl } from "../advancedDynamicTexture";
 import { ValueAndUnit } from "../valueAndUnit";
 import { VirtualKeyboard } from "./virtualKeyboard";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create input text control
@@ -1028,3 +1029,4 @@ export class InputText extends Control implements IFocusableControl {
         this.onKeyboardEventProcessedObservable.clear();
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.InputText"] = InputText;

gui/src/2D/controls/line.ts

@@ -7,6 +7,7 @@ import { Scene } from "babylonjs/scene";
 import { Control } from "./control";
 import { ValueAndUnit } from "../valueAndUnit";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to render 2D lines */
 export class Line extends Control {
@@ -245,3 +246,4 @@ export class Line extends Control {
         }
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.Line"] = Line;

gui/src/2D/controls/multiLine.ts

@@ -4,6 +4,7 @@ import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
 import { Control } from "./control";
 import { MultiLinePoint } from "../multiLinePoint";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create multi line control
@@ -260,5 +261,5 @@ export class MultiLine extends Control {
 
         super.dispose();
     }
-
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.MultiLine"] = MultiLine;

gui/src/2D/controls/radioButton.ts

@@ -4,6 +4,7 @@ import { Vector2 } from "babylonjs/Maths/math";
 import { Control } from "./control";
 import { StackPanel } from "./stackPanel";
 import { TextBlock } from "./textBlock";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create radio button controls
@@ -203,3 +204,4 @@ export class RadioButton extends Control {
         return panel;
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.RadioButton"] = RadioButton;

gui/src/2D/controls/rectangle.ts

@@ -1,5 +1,6 @@
 import { Container } from "./container";
 import { Measure } from "../measure";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /** Class used to create rectangle container */
 export class Rectangle extends Container {
@@ -132,4 +133,5 @@ export class Rectangle extends Container {
             context.clip();
         }
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.Rectangle"] = Rectangle;

gui/src/2D/controls/scrollViewers/scrollViewer.ts

@@ -10,6 +10,7 @@ import { Measure } from "../../measure";
 import { AdvancedDynamicTexture } from "../../advancedDynamicTexture";
 import { _ScrollViewerWindow } from "./scrollViewerWindow";
 import { ScrollBar } from "../sliders/scrollBar";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to hold a viewer window and sliders in a grid
@@ -387,4 +388,5 @@ export class ScrollViewer extends Rectangle {
         }
         super.dispose();
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.ScrollViewer"] = ScrollViewer;

gui/src/2D/controls/sliders/imageBasedSlider.ts

@@ -1,6 +1,7 @@
 import { BaseSlider } from "./baseSlider";
 import { Measure } from "../../measure";
 import { Image } from "../image";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create slider controls based on images
@@ -160,4 +161,5 @@ export class ImageBasedSlider extends BaseSlider {
 
         context.restore();
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.ImageBasedSlider"] = ImageBasedSlider;

gui/src/2D/controls/sliders/slider.ts

@@ -1,4 +1,5 @@
 import { BaseSlider } from "./baseSlider";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create slider controls
@@ -238,3 +239,4 @@ export class Slider extends BaseSlider {
         context.restore();
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.Slider"] = Slider;

gui/src/2D/controls/stackPanel.ts

@@ -3,6 +3,7 @@ import { Tools } from "babylonjs/Misc/tools";
 import { Container } from "./container";
 import { Measure } from "../measure";
 import { Control } from "./control";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Class used to create a 2D stack panel container
@@ -192,4 +193,5 @@ export class StackPanel extends Container {
 
         super._postMeasure();
     }
-}
+}
+_TypeStore.RegisteredTypes["BABYLON.GUI.StackPanel"] = StackPanel;

gui/src/2D/controls/textBlock.ts

@@ -2,6 +2,7 @@ import { Observable } from "babylonjs/Misc/observable";
 import { Measure } from "../measure";
 import { ValueAndUnit } from "../valueAndUnit";
 import { Control } from "./control";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 /**
  * Enum that determines the text-wrapping mode to use.
@@ -462,3 +463,4 @@ export class TextBlock extends Control {
         this.onTextChangedObservable.clear();
     }
 }
+_TypeStore.RegisteredTypes["BABYLON.GUI.TextBlock"] = TextBlock;

gui/src/2D/controls/virtualKeyboard.ts

@@ -6,6 +6,8 @@ import { Button } from "./button";
 import { Container } from "./container";
 import { TextBlock } from "./textBlock";
 import { InputText } from "./inputText";
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
+
 
 /**
  * Class used to store key control properties
@@ -308,3 +310,5 @@ export class VirtualKeyboard extends StackPanel {
         return returnValue;
     }
 }
+
+_TypeStore.RegisteredTypes["BABYLON.GUI.VirtualKeyboard"] = VirtualKeyboard;

gui/src/2D/xmlLoader.ts

@@ -1,6 +1,7 @@
 /**
 * Class used to load GUI via XML.
 */
+import { _TypeStore } from 'babylonjs/Misc/typeStore';
 
 export class XmlLoader {
     private _nodes: any = {};
@@ -33,10 +34,10 @@ export class XmlLoader {
         }
     }
 
-    private _getChainElement(attributeValue: any, isGlobal: boolean = false): any {
+    private _getChainElement(attributeValue: any): any {
         let element = window;
 
-        if (this._parentClass && !isGlobal) {
+        if (this._parentClass) {
             element = this._parentClass;
         }
         let value = attributeValue;
@@ -49,9 +50,15 @@ export class XmlLoader {
 
     }
 
+    private _getClassAttribute(attributeName : string) : any {
+        const attribute = attributeName.split(".");
+        const className = _TypeStore.GetClass("BABYLON.GUI." + attribute[0]);
+        return className[attribute[1]];
+    }
+
     private _createGuiElement(node: any, parent: any, linkParent: boolean = true): void {
         try {
-            let className = this._getChainElement("BABYLON.GUI." + node.nodeName, true);
+            let className = _TypeStore.GetClass("BABYLON.GUI." + node.nodeName);
             let guiNode = new className();
 
             if (parent && linkParent) {
@@ -86,7 +93,7 @@ export class XmlLoader {
                         guiNode[node.attributes[i].name] = !isNaN(Number(node.attributes[i].value)) ? Number(node.attributes[i].value) : node.attributes[i].value;
                     }
                 } else {
-                    guiNode[node.attributes[i].name] = this._getChainElement("BABYLON.GUI." + node.attributes[i].value, true);
+                    guiNode[node.attributes[i].name] = this._getClassAttribute(node.attributes[i].value);
                 }
             }
 
@@ -98,12 +105,12 @@ export class XmlLoader {
             if (!this._nodes[node.attributes.getNamedItem("id").nodeValue]) {
                 this._nodes[node.attributes.getNamedItem("id").nodeValue] = guiNode;
             } else {
-                throw "GUILoader Exception : Duplicate ID, every element should have an unique ID attribute";
+                throw "XmlLoader Exception : Duplicate ID, every element should have an unique ID attribute";
             }
             return guiNode;
 
         } catch (e) {
-            throw "GUILoader Exception : Error parsing Control " + node.nodeName + "," + e + ".";
+            throw "XmlLoader Exception : Error parsing Control " + node.nodeName + "," + e + ".";
         }
     }
 
@@ -124,13 +131,13 @@ export class XmlLoader {
                 continue;
             }
             if (rows[i].nodeName != "Row") {
-                throw "GUILoader Exception : Expecting Row node, received " + rows[i].nodeName;
+                throw "XmlLoader Exception : Expecting Row node, received " + rows[i].nodeName;
             }
             rowNumber += 1;
             columns = rows[i].children;
 
             if (!rows[i].attributes.getNamedItem("height")) {
-                throw "GUILoader Exception : Height must be defined for grid rows";
+                throw "XmlLoader Exception : Height must be defined for grid rows";
             }
             height = Number(rows[i].attributes.getNamedItem("height").nodeValue);
             isPixel = rows[i].attributes.getNamedItem("isPixel") ? JSON.parse(rows[i].attributes.getNamedItem("isPixel").nodeValue) : false;
@@ -141,16 +148,16 @@ export class XmlLoader {
                     continue;
                 }
                 if (columns[j].nodeName != "Column") {
-                    throw "GUILoader Exception : Expecting Column node, received " + columns[j].nodeName;
+                    throw "XmlLoader Exception : Expecting Column node, received " + columns[j].nodeName;
                 }
                 columnNumber += 1;
                 if (rowNumber > 0 && columnNumber > totalColumnsNumber) {
-                    throw "GUILoader Exception : In the Grid element, the number of columns is defined in the first row, do not add more columns in the subsequent rows.";
+                    throw "XmlLoader Exception : In the Grid element, the number of columns is defined in the first row, do not add more columns in the subsequent rows.";
                 }
 
                 if (rowNumber == 0) {
                     if (!columns[j].attributes.getNamedItem("width")) {
-                        throw "GUILoader Exception : Width must be defined for all the grid columns in the first row";
+                        throw "XmlLoader Exception : Width must be defined for all the grid columns in the first row";
                     }
                     width = Number(columns[j].attributes.getNamedItem("width").nodeValue);
                     isPixel = columns[j].attributes.getNamedItem("isPixel") ? JSON.parse(columns[j].attributes.getNamedItem("isPixel").nodeValue) : false;
@@ -207,12 +214,12 @@ export class XmlLoader {
     private _parseElementsFromSource(node: any, guiNode: any, parent: any): void {
         let dataSource = node.attributes.getNamedItem("dataSource").value;
         if (!dataSource.includes(" in ")) {
-            throw "GUILoader Exception : Malformed XML, Data Source must include an in";
+            throw "XmlLoader Exception : Malformed XML, Data Source must include an in";
         } else {
             let isArray = true;
             let splittedSource = dataSource.split(" in ");
             if (splittedSource.length < 2) {
-                throw "GUILoader Exception : Malformed XML, Data Source must an iterator and a source";
+                throw "XmlLoader Exception : Malformed XML, Data Source must an iterator and a source";
             }
             let source = splittedSource[1];
             if (source.startsWith("{") && source.endsWith("}")) {
@@ -305,7 +312,7 @@ export class XmlLoader {
         xhttp.onreadystatechange = function(this: XmlLoader) {
             if (xhttp.readyState == 4 && xhttp.status == 200) {
                 if (!xhttp.responseXML) {
-                    throw "GUILoader Exception : XML file is malformed or corrupted.";
+                    throw "XmlLoader Exception : XML file is malformed or corrupted.";
                 }
 
                 let xmlDoc = xhttp.responseXML.documentElement;