more controls

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

@@ -8,6 +8,7 @@ import { _TypeStore } from 'babylonjs/Misc/typeStore';
 import { Nullable } from 'babylonjs/types';
 import { Measure } from '../measure';
 import { PointerInfoBase } from 'babylonjs/Events/pointerEvents';
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /**
  * Class used to represent a 2D checkbox
@@ -19,6 +20,7 @@ export class Checkbox extends Control {
     private _thickness = 1;
 
     /** Gets or sets border thickness  */
+    @serialize()
     public get thickness(): number {
         return this._thickness;
     }
@@ -38,6 +40,7 @@ export class Checkbox extends Control {
     public onIsCheckedChangedObservable = new Observable<boolean>();
 
     /** Gets or sets a value indicating the ratio between overall size and check size */
+    @serialize()
     public get checkSizeRatio(): number {
         return this._checkSizeRatio;
     }
@@ -54,6 +57,7 @@ export class Checkbox extends Control {
     }
 
     /** Gets or sets background color */
+    @serialize()
     public get background(): string {
         return this._background;
     }
@@ -68,6 +72,7 @@ export class Checkbox extends Control {
     }
 
     /** Gets or sets a boolean indicating if the checkbox is checked or not */
+    @serialize()
     public get isChecked(): boolean {
         return this._isChecked;
     }

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

@@ -12,6 +12,7 @@ import { TextBlock } from "../controls/textBlock";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
 import { Color3 } from 'babylonjs/Maths/math.color';
 import { PointerInfoBase } from 'babylonjs/Events/pointerEvents';
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /** Class used to create color pickers */
 export class ColorPicker extends Control {
@@ -40,6 +41,7 @@ export class ColorPicker extends Control {
     public onValueChangedObservable = new Observable<Color3>();
 
     /** Gets or sets the color of the color picker */
+    @serialize()
     public get value(): Color3 {
         return this._value;
     }
@@ -90,6 +92,7 @@ export class ColorPicker extends Control {
      * Gets or sets control width
      * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
+    @serialize()
     public get width(): string | number {
         return this._width.toString(this._host);
     }
@@ -109,6 +112,7 @@ export class ColorPicker extends Control {
      * Gets or sets control height
      * @see https://doc.babylonjs.com/how_to/gui#position-and-size
      */
+    @serialize()
     public get height(): string | number {
         return this._height.toString(this._host);
     }
@@ -126,6 +130,7 @@ export class ColorPicker extends Control {
     }
 
     /** Gets or sets control size */
+    @serialize()
     public get size(): string | number {
         return this.width;
     }

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

@@ -2,6 +2,7 @@ import { Control } from "./control";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
 import { Nullable } from 'babylonjs/types';
 import { Measure } from '../measure';
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /** Class used to render a grid  */
 export class DisplayGrid extends Control {
@@ -22,6 +23,7 @@ export class DisplayGrid extends Control {
     private _displayMinorLines = true;
 
     /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */
+    @serialize()
     public get displayMinorLines(): boolean {
         return this._displayMinorLines;
     }
@@ -36,6 +38,7 @@ export class DisplayGrid extends Control {
     }
 
     /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */
+    @serialize()
     public get displayMajorLines(): boolean {
         return this._displayMajorLines;
     }
@@ -50,6 +53,7 @@ export class DisplayGrid extends Control {
     }
 
     /** Gets or sets background color (Black by default) */
+    @serialize()
     public get background(): string {
         return this._background;
     }
@@ -64,6 +68,7 @@ export class DisplayGrid extends Control {
     }
 
     /** Gets or sets the width of each cell (20 by default) */
+    @serialize()
     public get cellWidth(): number {
         return this._cellWidth;
     }
@@ -75,6 +80,7 @@ export class DisplayGrid extends Control {
     }
 
     /** Gets or sets the height of each cell (20 by default) */
+    @serialize()
     public get cellHeight(): number {
         return this._cellHeight;
     }
@@ -86,6 +92,7 @@ export class DisplayGrid extends Control {
     }
 
     /** Gets or sets the tickness of minor lines (1 by default) */
+    @serialize()
     public get minorLineTickness(): number {
         return this._minorLineTickness;
     }
@@ -97,6 +104,7 @@ export class DisplayGrid extends Control {
     }
 
     /** Gets or sets the color of minor lines (DarkGray by default) */
+    @serialize()
     public get minorLineColor(): string {
         return this._minorLineColor;
     }
@@ -108,6 +116,7 @@ export class DisplayGrid extends Control {
     }
 
     /** Gets or sets the tickness of major lines (2 by default) */
+    @serialize()
     public get majorLineTickness(): number {
         return this._majorLineTickness;
     }
@@ -119,6 +128,7 @@ export class DisplayGrid extends Control {
     }
 
     /** Gets or sets the color of major lines (White by default) */
+    @serialize()
     public get majorLineColor(): string {
         return this._majorLineColor;
     }
@@ -130,6 +140,7 @@ export class DisplayGrid extends Control {
     }
 
     /** Gets or sets the frequency of major lines (default is 1 every 5 minor lines)*/
+    @serialize()
     public get majorLineFrequency(): number {
         return this._majorLineFrequency;
     }

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

@@ -2,12 +2,14 @@ import { Container } from "./container";
 import { Control } from "./control";
 import { Measure } from "../measure";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /** Class used to create 2D ellipse containers */
 export class Ellipse extends Container {
     private _thickness = 1;
 
     /** Gets or sets border thickness */
+    @serialize()
     public get thickness(): number {
         return this._thickness;
     }

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

@@ -5,6 +5,7 @@ import { Tools } from "babylonjs/Misc/tools";
 import { Control } from "./control";
 import { Measure } from "../measure";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
+import { expandToProperty, serialize } from 'babylonjs/Misc/decorators';
 
 /**
  * Class used to create 2D images
@@ -17,6 +18,8 @@ export class Image extends Control {
     private _imageHeight: number;
     private _loaded = false;
     private _stretch = Image.STRETCH_FILL;
+    @serialize()
+    @expandToProperty("source")
     private _source: Nullable<string>;
     private _autoScale = false;
 
@@ -64,6 +67,7 @@ export class Image extends Control {
     /**
      * Gets or sets a boolean indicating if nine patch slices (left, top, right, bottom) should be read from image data
      */
+    @serialize()
     public get populateNinePatchSlicesFromImage(): boolean {
         return this._populateNinePatchSlicesFromImage;
     }
@@ -84,6 +88,7 @@ export class Image extends Control {
      * Gets or sets a boolean indicating if pointers should only be validated on pixels with alpha > 0.
      * Beware using this as this will comsume more memory as the image has to be stored twice
      */
+    @serialize()
     public get detectPointerOnOpaqueOnly(): boolean {
         return this._detectPointerOnOpaqueOnly;
     }
@@ -99,6 +104,7 @@ export class Image extends Control {
     /**
      * Gets or sets the left value for slicing (9-patch)
      */
+    @serialize()
     public get sliceLeft(): number {
         return this._sliceLeft;
     }
@@ -116,6 +122,7 @@ export class Image extends Control {
     /**
      * Gets or sets the right value for slicing (9-patch)
      */
+    @serialize()
     public get sliceRight(): number {
         return this._sliceRight;
     }
@@ -133,6 +140,7 @@ export class Image extends Control {
     /**
      * Gets or sets the top value for slicing (9-patch)
      */
+    @serialize()
     public get sliceTop(): number {
         return this._sliceTop;
     }
@@ -150,6 +158,7 @@ export class Image extends Control {
     /**
      * Gets or sets the bottom value for slicing (9-patch)
      */
+    @serialize()
     public get sliceBottom(): number {
         return this._sliceBottom;
     }
@@ -167,6 +176,7 @@ export class Image extends Control {
     /**
      * Gets or sets the left coordinate in the source image
      */
+    @serialize()
     public get sourceLeft(): number {
         return this._sourceLeft;
     }
@@ -184,6 +194,7 @@ export class Image extends Control {
     /**
      * Gets or sets the top coordinate in the source image
      */
+    @serialize()
     public get sourceTop(): number {
         return this._sourceTop;
     }
@@ -201,6 +212,7 @@ export class Image extends Control {
     /**
      * Gets or sets the width to capture in the source image
      */
+    @serialize()
     public get sourceWidth(): number {
         return this._sourceWidth;
     }
@@ -218,6 +230,7 @@ export class Image extends Control {
     /**
      * Gets or sets the height to capture in the source image
      */
+    @serialize()
     public get sourceHeight(): number {
         return this._sourceHeight;
     }
@@ -246,6 +259,7 @@ export class Image extends Control {
      * Gets or sets a boolean indicating if the image can force its container to adapt its size
      * @see https://doc.babylonjs.com/how_to/gui#image
      */
+    @serialize()
     public get autoScale(): boolean {
         return this._autoScale;
     }
@@ -263,6 +277,7 @@ export class Image extends Control {
     }
 
     /** Gets or sets the streching mode used by the image */
+    @serialize()
     public get stretch(): number {
         return this._stretch;
     }

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

@@ -11,6 +11,7 @@ import { VirtualKeyboard } from "./virtualKeyboard";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
 import { Measure } from '../measure';
 import { TextWrapper } from './textWrapper';
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /**
  * Class used to create input text control
@@ -52,8 +53,10 @@ export class InputText extends Control implements IFocusableControl {
     public _connectedVirtualKeyboard: Nullable<VirtualKeyboard>;
 
     /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
+    @serialize()
     public promptMessage = "Please enter text:";
     /** Force disable prompt on mobile device */
+    @serialize()
     public disableMobilePrompt = false;
 
     /** Observable raised when the text changes */
@@ -76,6 +79,7 @@ export class InputText extends Control implements IFocusableControl {
     public onKeyboardEventProcessedObservable = new Observable<KeyboardEvent>();
 
     /** Gets or sets the maximum width allowed by the control */
+    @serialize()
     public get maxWidth(): string | number {
         return this._maxWidth.toString(this._host);
     }
@@ -96,6 +100,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets the text highlighter transparency; default: 0.4 */
+    @serialize()
     public get highligherOpacity(): number {
         return this._highligherOpacity;
     }
@@ -108,6 +113,7 @@ export class InputText extends Control implements IFocusableControl {
         this._markAsDirty();
     }
     /** Gets or sets a boolean indicating whether to select complete text by default on input focus */
+    @serialize()
     public get onFocusSelectAll(): boolean {
         return this._onFocusSelectAll;
     }
@@ -122,6 +128,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets the text hightlight color */
+    @serialize()
     public get textHighlightColor(): string {
         return this._textHighlightColor;
     }
@@ -135,6 +142,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets control margin */
+    @serialize()
     public get margin(): string {
         return this._margin.toString(this._host);
     }
@@ -155,6 +163,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets a boolean indicating if the control can auto stretch its width to adapt to the text */
+    @serialize()
     public get autoStretchWidth(): boolean {
         return this._autoStretchWidth;
     }
@@ -169,6 +178,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets border thickness */
+    @serialize()
     public get thickness(): number {
         return this._thickness;
     }
@@ -183,6 +193,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets the background color when focused */
+    @serialize()
     public get focusedBackground(): string {
         return this._focusedBackground;
     }
@@ -197,6 +208,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets the background color when focused */
+    @serialize()
     public get focusedColor(): string {
         return this._focusedColor;
     }
@@ -211,6 +223,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets the background color */
+    @serialize()
     public get background(): string {
         return this._background;
     }
@@ -225,6 +238,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets the placeholder color */
+    @serialize()
     public get placeholderColor(): string {
         return this._placeholderColor;
     }
@@ -239,6 +253,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets the text displayed when the control is empty */
+    @serialize()
     public get placeholderText(): string {
         return this._placeholderText;
     }
@@ -252,6 +267,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets the dead key flag */
+    @serialize()
     public get deadKey(): boolean {
         return this._deadKey;
     }
@@ -291,6 +307,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets the text displayed in the control */
+    @serialize()
     public get text(): string {
         return this._textWrapper.text;
     }
@@ -315,6 +332,7 @@ export class InputText extends Control implements IFocusableControl {
     }
 
     /** Gets or sets control width */
+    @serialize()
     public get width(): string | number {
         return this._width.toString(this._host);
     }

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

@@ -8,6 +8,7 @@ import { Control } from "./control";
 import { ValueAndUnit } from "../valueAndUnit";
 import { Measure } from "../measure";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /** Class used to render 2D lines */
 export class Line extends Control {
@@ -21,6 +22,7 @@ export class Line extends Control {
     private _connectedControlDirtyObserver: Nullable<Observer<Control>>;
 
     /** Gets or sets the dash pattern */
+    @serialize()
     public get dash(): Array<number> {
         return this._dash;
     }
@@ -58,6 +60,7 @@ export class Line extends Control {
     }
 
     /** Gets or sets start coordinates on X axis */
+    @serialize()
     public get x1(): string | number {
         return this._x1.toString(this._host);
     }
@@ -73,6 +76,7 @@ export class Line extends Control {
     }
 
     /** Gets or sets start coordinates on Y axis */
+    @serialize()
     public get y1(): string | number {
         return this._y1.toString(this._host);
     }
@@ -88,6 +92,7 @@ export class Line extends Control {
     }
 
     /** Gets or sets end coordinates on X axis */
+    @serialize()
     public get x2(): string | number {
         return this._x2.toString(this._host);
     }
@@ -103,6 +108,7 @@ export class Line extends Control {
     }
 
     /** Gets or sets end coordinates on Y axis */
+    @serialize()
     public get y2(): string | number {
         return this._y2.toString(this._host);
     }
@@ -118,6 +124,7 @@ export class Line extends Control {
     }
 
     /** Gets or sets line width */
+    @serialize()
     public get lineWidth(): number {
         return this._lineWidth;
     }

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

@@ -6,6 +6,7 @@ import { MultiLinePoint } from "../multiLinePoint";
 import { Measure } from "../measure";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
 import { Vector3 } from "babylonjs/Maths/math.vector";
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /**
  * Class used to create multi line control
@@ -38,6 +39,7 @@ export class MultiLine extends Control {
     }
 
     /** Gets or sets dash pattern */
+    @serialize()
     public get dash(): Array<number> {
         return this._dash;
     }

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

@@ -6,6 +6,7 @@ import { StackPanel } from "./stackPanel";
 import { TextBlock } from "./textBlock";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
 import { PointerInfoBase } from 'babylonjs/Events/pointerEvents';
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /**
  * Class used to create radio button controls
@@ -17,6 +18,7 @@ export class RadioButton extends Control {
     private _thickness = 1;
 
     /** Gets or sets border thickness */
+    @serialize()
     public get thickness(): number {
         return this._thickness;
     }
@@ -31,12 +33,14 @@ export class RadioButton extends Control {
     }
 
     /** Gets or sets group name */
+    @serialize()
     public group = "";
 
     /** Observable raised when isChecked is changed */
     public onIsCheckedChangedObservable = new Observable<boolean>();
 
     /** Gets or sets a value indicating the ratio between overall size and check size */
+    @serialize()
     public get checkSizeRatio(): number {
         return this._checkSizeRatio;
     }
@@ -53,6 +57,7 @@ export class RadioButton extends Control {
     }
 
     /** Gets or sets background color */
+    @serialize()
     public get background(): string {
         return this._background;
     }
@@ -67,6 +72,7 @@ export class RadioButton extends Control {
     }
 
     /** Gets or sets a boolean indicating if the checkbox is checked or not */
+    @serialize()
     public get isChecked(): boolean {
         return this._isChecked;
     }

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

@@ -1,6 +1,7 @@
 import { Container } from "./container";
 import { Measure } from "../measure";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /** Class used to create rectangle container */
 export class Rectangle extends Container {
@@ -8,6 +9,7 @@ export class Rectangle extends Container {
     private _cornerRadius = 0;
 
     /** Gets or sets border thickness */
+    @serialize()
     public get thickness(): number {
         return this._thickness;
     }
@@ -22,6 +24,7 @@ export class Rectangle extends Container {
     }
 
     /** Gets or sets the corner radius angle */
+    @serialize()
     public get cornerRadius(): number {
         return this._cornerRadius;
     }

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

@@ -4,6 +4,7 @@ import { Container } from "./container";
 import { Measure } from "../measure";
 import { Control } from "./control";
 import { _TypeStore } from 'babylonjs/Misc/typeStore';
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /**
  * Class used to create a 2D stack panel container
@@ -17,9 +18,11 @@ export class StackPanel extends Container {
     /**
      * Gets or sets a boolean indicating that layou warnings should be ignored
      */
+    @serialize()
     public ignoreLayoutWarnings = false;
 
     /** Gets or sets a boolean indicating if the stack panel is vertical or horizontal*/
+    @serialize()
     public get isVertical(): boolean {
         return this._isVertical;
     }
@@ -37,6 +40,7 @@ export class StackPanel extends Container {
      * Gets or sets panel width.
      * This value should not be set when in horizontal mode as it will be computed automatically
      */
+    @serialize()
     public set width(value: string | number) {
         if (!this._doNotTrackManualChanges) {
             this._manualWidth = true;
@@ -59,6 +63,7 @@ export class StackPanel extends Container {
      * Gets or sets panel height.
      * This value should not be set when in vertical mode as it will be computed automatically
      */
+    @serialize()
     public set height(value: string | number) {
         if (!this._doNotTrackManualChanges) {
             this._manualHeight = true;

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

@@ -4,6 +4,7 @@ import { ValueAndUnit } from "../valueAndUnit";
 import { Control } from "./control";
 import { _TypeStore } from "babylonjs/Misc/typeStore";
 import { Nullable } from "babylonjs/types";
+import { serialize } from 'babylonjs/Misc/decorators';
 
 /**
  * Enum that determines the text-wrapping mode to use.
@@ -66,6 +67,7 @@ export class TextBlock extends Control {
     /**
      * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
      */
+    @serialize()
     public get resizeToFit(): boolean {
         return this._resizeToFit;
     }
@@ -90,6 +92,7 @@ export class TextBlock extends Control {
     /**
      * Gets or sets a boolean indicating if text must be wrapped
      */
+    @serialize()
     public get textWrapping(): TextWrapping | boolean {
         return this._textWrapping;
     }
@@ -108,6 +111,7 @@ export class TextBlock extends Control {
     /**
      * Gets or sets text to display
      */
+    @serialize()
     public get text(): string {
         return this._text;
     }
@@ -128,6 +132,7 @@ export class TextBlock extends Control {
     /**
      * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
      */
+    @serialize()
     public get textHorizontalAlignment(): number {
         return this._textHorizontalAlignment;
     }
@@ -147,6 +152,7 @@ export class TextBlock extends Control {
     /**
      * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
      */
+    @serialize()
     public get textVerticalAlignment(): number {
         return this._textVerticalAlignment;
     }
@@ -166,6 +172,7 @@ export class TextBlock extends Control {
     /**
      * Gets or sets line spacing value
      */
+    @serialize()
     public set lineSpacing(value: string | number) {
         if (this._lineSpacing.fromString(value)) {
             this._markAsDirty();
@@ -182,6 +189,7 @@ export class TextBlock extends Control {
     /**
      * Gets or sets outlineWidth of the text to display
      */
+    @serialize()
     public get outlineWidth(): number {
         return this._outlineWidth;
     }
@@ -200,6 +208,8 @@ export class TextBlock extends Control {
     /**
      * Gets or sets a boolean indicating that text must have underline
      */
+    @serialize()
+
     public get underline(): boolean {
         return this._underline;
     }
@@ -218,6 +228,7 @@ export class TextBlock extends Control {
     /**
      * Gets or sets an boolean indicating that text must be crossed out
      */
+    @serialize()
     public get lineThrough(): boolean {
         return this._lineThrough;
     }
@@ -236,6 +247,7 @@ export class TextBlock extends Control {
     /**
      * Gets or sets outlineColor of the text to display
      */
+    @serialize()
     public get outlineColor(): string {
         return this._outlineColor;
     }