@babylonjs/gui 5.0.0-alpha.9 → 5.0.0-beta.11

package/2D/controls/displayGrid.d.ts

@@ -1,6 +1,7 @@
 import { Control } from "./control";
 import { Nullable } from '@babylonjs/core/types';
 import { Measure } from '../measure';
+import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas";
 /** Class used to render a grid  */
 export declare class DisplayGrid extends Control {
     name?: string | undefined;
@@ -49,6 +50,6 @@ export declare class DisplayGrid extends Control {
      * @param name defines the control name
      */
     constructor(name?: string | undefined);
-    _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): void;
+    _draw(context: ICanvasRenderingContext, invalidatedRectangle?: Nullable<Measure>): void;
     protected _getTypeName(): string;
 }

package/2D/controls/displayGrid.js

@@ -1,7 +1,7 @@
 import { __decorate, __extends } from "tslib";
-import { Control } from "./control";
-import { _TypeStore } from '@babylonjs/core/Misc/typeStore';
-import { serialize } from '@babylonjs/core/Misc/decorators';
+import { Control } from "./control.js";
+import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
+import { serialize } from '@babylonjs/core/Misc/decorators.js';
 /** Class used to render a grid  */
 var DisplayGrid = /** @class */ (function (_super) {
     __extends(DisplayGrid, _super);
@@ -169,14 +169,14 @@ var DisplayGrid = /** @class */ (function (_super) {
             if (this._displayMinorLines) {
                 context.strokeStyle = this._minorLineColor;
                 context.lineWidth = this._minorLineTickness;
-                for (var x = -cellCountX / 2; x < cellCountX / 2; x++) {
+                for (var x = -cellCountX / 2 + 1; x < cellCountX / 2; x++) {
                     var cellX = left + x * this.cellWidth;
                     context.beginPath();
                     context.moveTo(cellX, this._currentMeasure.top);
                     context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
                     context.stroke();
                 }
-                for (var y = -cellCountY / 2; y < cellCountY / 2; y++) {
+                for (var y = -cellCountY / 2 + 1; y < cellCountY / 2; y++) {
                     var cellY = top_1 + y * this.cellHeight;
                     context.beginPath();
                     context.moveTo(this._currentMeasure.left, cellY);
@@ -242,5 +242,5 @@ var DisplayGrid = /** @class */ (function (_super) {
     return DisplayGrid;
 }(Control));
 export { DisplayGrid };
-_TypeStore.RegisteredTypes["BABYLON.GUI.DisplayGrid"] = DisplayGrid;
+RegisterClass("BABYLON.GUI.DisplayGrid", DisplayGrid);
 //# sourceMappingURL=displayGrid.js.map

package/2D/controls/displayGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"displayGrid.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/displayGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { Control } from \"./control\";\r\nimport { _TypeStore } from '@babylonjs/core/Misc/typeStore';\r\nimport { Nullable } from '@babylonjs/core/types';\r\nimport { Measure } from '../measure';\r\nimport { serialize } from '@babylonjs/core/Misc/decorators';\r\n\r\n/** Class used to render a grid  */\r\nexport class DisplayGrid extends Control {\r\n    private _cellWidth = 20;\r\n    private _cellHeight = 20;\r\n\r\n    private _minorLineTickness = 1;\r\n    private _minorLineColor = \"DarkGray\";\r\n\r\n    private _majorLineTickness = 2;\r\n    private _majorLineColor = \"White\";\r\n\r\n    private _majorLineFrequency = 5;\r\n\r\n    private _background = \"Black\";\r\n\r\n    private _displayMajorLines = true;\r\n    private _displayMinorLines = true;\r\n\r\n    /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */\r\n    @serialize()\r\n    public get displayMinorLines(): boolean {\r\n        return this._displayMinorLines;\r\n    }\r\n\r\n    public set displayMinorLines(value: boolean) {\r\n        if (this._displayMinorLines === value) {\r\n            return;\r\n        }\r\n\r\n        this._displayMinorLines = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */\r\n    @serialize()\r\n    public get displayMajorLines(): boolean {\r\n        return this._displayMajorLines;\r\n    }\r\n\r\n    public set displayMajorLines(value: boolean) {\r\n        if (this._displayMajorLines === value) {\r\n            return;\r\n        }\r\n\r\n        this._displayMajorLines = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color (Black by default) */\r\n    @serialize()\r\n    public get background(): string {\r\n        return this._background;\r\n    }\r\n\r\n    public set background(value: string) {\r\n        if (this._background === value) {\r\n            return;\r\n        }\r\n\r\n        this._background = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the width of each cell (20 by default) */\r\n    @serialize()\r\n    public get cellWidth(): number {\r\n        return this._cellWidth;\r\n    }\r\n\r\n    public set cellWidth(value: number) {\r\n        this._cellWidth = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the height of each cell (20 by default) */\r\n    @serialize()\r\n    public get cellHeight(): number {\r\n        return this._cellHeight;\r\n    }\r\n\r\n    public set cellHeight(value: number) {\r\n        this._cellHeight = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the tickness of minor lines (1 by default) */\r\n    @serialize()\r\n    public get minorLineTickness(): number {\r\n        return this._minorLineTickness;\r\n    }\r\n\r\n    public set minorLineTickness(value: number) {\r\n        this._minorLineTickness = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the color of minor lines (DarkGray by default) */\r\n    @serialize()\r\n    public get minorLineColor(): string {\r\n        return this._minorLineColor;\r\n    }\r\n\r\n    public set minorLineColor(value: string) {\r\n        this._minorLineColor = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the tickness of major lines (2 by default) */\r\n    @serialize()\r\n    public get majorLineTickness(): number {\r\n        return this._majorLineTickness;\r\n    }\r\n\r\n    public set majorLineTickness(value: number) {\r\n        this._majorLineTickness = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the color of major lines (White by default) */\r\n    @serialize()\r\n    public get majorLineColor(): string {\r\n        return this._majorLineColor;\r\n    }\r\n\r\n    public set majorLineColor(value: string) {\r\n        this._majorLineColor = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the frequency of major lines (default is 1 every 5 minor lines)*/\r\n    @serialize()\r\n    public get majorLineFrequency(): number {\r\n        return this._majorLineFrequency;\r\n    }\r\n\r\n    public set majorLineFrequency(value: number) {\r\n        this._majorLineFrequency = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new GridDisplayRectangle\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    public _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n\r\n        if (this._isEnabled) {\r\n\r\n            if (this._background) {\r\n                context.fillStyle = this._background;\r\n                context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);\r\n            }\r\n\r\n            let cellCountX = this._currentMeasure.width / this._cellWidth;\r\n            let cellCountY = this._currentMeasure.height / this._cellHeight;\r\n\r\n            // Minor lines\r\n            const left = this._currentMeasure.left + this._currentMeasure.width / 2;\r\n            const top = this._currentMeasure.top + this._currentMeasure.height / 2;\r\n\r\n            if (this._displayMinorLines) {\r\n                context.strokeStyle = this._minorLineColor;\r\n                context.lineWidth = this._minorLineTickness;\r\n\r\n                for (var x = -cellCountX / 2; x < cellCountX / 2; x++) {\r\n                    const cellX = left + x * this.cellWidth;\r\n\r\n                    context.beginPath();\r\n                    context.moveTo(cellX, this._currentMeasure.top);\r\n                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);\r\n\r\n                    context.stroke();\r\n                }\r\n\r\n                for (var y = -cellCountY / 2; y < cellCountY / 2; y++) {\r\n                    const cellY = top + y * this.cellHeight;\r\n\r\n                    context.beginPath();\r\n                    context.moveTo(this._currentMeasure.left, cellY);\r\n                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);\r\n                    context.stroke();\r\n                }\r\n            }\r\n\r\n            // Major lines\r\n            if (this._displayMajorLines) {\r\n                context.strokeStyle = this._majorLineColor;\r\n                context.lineWidth = this._majorLineTickness;\r\n\r\n                for (var x = -cellCountX / 2 + this._majorLineFrequency; x < cellCountX / 2; x += this._majorLineFrequency) {\r\n                    let cellX = left + x * this.cellWidth;\r\n\r\n                    context.beginPath();\r\n                    context.moveTo(cellX, this._currentMeasure.top);\r\n                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);\r\n                    context.stroke();\r\n                }\r\n\r\n                for (var y = -cellCountY / 2 + this._majorLineFrequency; y < cellCountY / 2; y += this._majorLineFrequency) {\r\n                    let cellY = top + y * this.cellHeight;\r\n                    context.moveTo(this._currentMeasure.left, cellY);\r\n                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);\r\n                    context.closePath();\r\n                    context.stroke();\r\n                }\r\n            }\r\n        }\r\n\r\n        context.restore();\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"DisplayGrid\";\r\n    }\r\n}\r\n_TypeStore.RegisteredTypes[\"BABYLON.GUI.DisplayGrid\"] = DisplayGrid;"]}
+{"version":3,"file":"displayGrid.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/displayGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { Control } from \"./control\";\r\nimport { RegisterClass } from '@babylonjs/core/Misc/typeStore';\r\nimport { Nullable } from '@babylonjs/core/types';\r\nimport { Measure } from '../measure';\r\nimport { serialize } from '@babylonjs/core/Misc/decorators';\r\nimport { ICanvasRenderingContext } from \"@babylonjs/core/Engines/ICanvas\";\r\n\r\n/** Class used to render a grid  */\r\nexport class DisplayGrid extends Control {\r\n    private _cellWidth = 20;\r\n    private _cellHeight = 20;\r\n\r\n    private _minorLineTickness = 1;\r\n    private _minorLineColor = \"DarkGray\";\r\n\r\n    private _majorLineTickness = 2;\r\n    private _majorLineColor = \"White\";\r\n\r\n    private _majorLineFrequency = 5;\r\n\r\n    private _background = \"Black\";\r\n\r\n    private _displayMajorLines = true;\r\n    private _displayMinorLines = true;\r\n\r\n    /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */\r\n    @serialize()\r\n    public get displayMinorLines(): boolean {\r\n        return this._displayMinorLines;\r\n    }\r\n\r\n    public set displayMinorLines(value: boolean) {\r\n        if (this._displayMinorLines === value) {\r\n            return;\r\n        }\r\n\r\n        this._displayMinorLines = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */\r\n    @serialize()\r\n    public get displayMajorLines(): boolean {\r\n        return this._displayMajorLines;\r\n    }\r\n\r\n    public set displayMajorLines(value: boolean) {\r\n        if (this._displayMajorLines === value) {\r\n            return;\r\n        }\r\n\r\n        this._displayMajorLines = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color (Black by default) */\r\n    @serialize()\r\n    public get background(): string {\r\n        return this._background;\r\n    }\r\n\r\n    public set background(value: string) {\r\n        if (this._background === value) {\r\n            return;\r\n        }\r\n\r\n        this._background = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the width of each cell (20 by default) */\r\n    @serialize()\r\n    public get cellWidth(): number {\r\n        return this._cellWidth;\r\n    }\r\n\r\n    public set cellWidth(value: number) {\r\n        this._cellWidth = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the height of each cell (20 by default) */\r\n    @serialize()\r\n    public get cellHeight(): number {\r\n        return this._cellHeight;\r\n    }\r\n\r\n    public set cellHeight(value: number) {\r\n        this._cellHeight = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the tickness of minor lines (1 by default) */\r\n    @serialize()\r\n    public get minorLineTickness(): number {\r\n        return this._minorLineTickness;\r\n    }\r\n\r\n    public set minorLineTickness(value: number) {\r\n        this._minorLineTickness = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the color of minor lines (DarkGray by default) */\r\n    @serialize()\r\n    public get minorLineColor(): string {\r\n        return this._minorLineColor;\r\n    }\r\n\r\n    public set minorLineColor(value: string) {\r\n        this._minorLineColor = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the tickness of major lines (2 by default) */\r\n    @serialize()\r\n    public get majorLineTickness(): number {\r\n        return this._majorLineTickness;\r\n    }\r\n\r\n    public set majorLineTickness(value: number) {\r\n        this._majorLineTickness = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the color of major lines (White by default) */\r\n    @serialize()\r\n    public get majorLineColor(): string {\r\n        return this._majorLineColor;\r\n    }\r\n\r\n    public set majorLineColor(value: string) {\r\n        this._majorLineColor = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the frequency of major lines (default is 1 every 5 minor lines)*/\r\n    @serialize()\r\n    public get majorLineFrequency(): number {\r\n        return this._majorLineFrequency;\r\n    }\r\n\r\n    public set majorLineFrequency(value: number) {\r\n        this._majorLineFrequency = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new GridDisplayRectangle\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    public _draw(context: ICanvasRenderingContext, invalidatedRectangle?: Nullable<Measure>): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n\r\n        if (this._isEnabled) {\r\n\r\n            if (this._background) {\r\n                context.fillStyle = this._background;\r\n                context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);\r\n            }\r\n\r\n            let cellCountX = this._currentMeasure.width / this._cellWidth;\r\n            let cellCountY = this._currentMeasure.height / this._cellHeight;\r\n\r\n            // Minor lines\r\n            const left = this._currentMeasure.left + this._currentMeasure.width / 2;\r\n            const top = this._currentMeasure.top + this._currentMeasure.height / 2;\r\n\r\n            if (this._displayMinorLines) {\r\n                context.strokeStyle = this._minorLineColor;\r\n                context.lineWidth = this._minorLineTickness;\r\n\r\n                for (var x = -cellCountX / 2 + 1; x < cellCountX / 2; x++) {\r\n                    const cellX = left + x * this.cellWidth;\r\n\r\n                    context.beginPath();\r\n                    context.moveTo(cellX, this._currentMeasure.top);\r\n                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);\r\n\r\n                    context.stroke();\r\n                }\r\n\r\n                for (var y = -cellCountY / 2 + 1; y < cellCountY / 2; y++) {\r\n                    const cellY = top + y * this.cellHeight;\r\n\r\n                    context.beginPath();\r\n                    context.moveTo(this._currentMeasure.left, cellY);\r\n                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);\r\n                    context.stroke();\r\n                }\r\n            }\r\n\r\n            // Major lines\r\n            if (this._displayMajorLines) {\r\n                context.strokeStyle = this._majorLineColor;\r\n                context.lineWidth = this._majorLineTickness;\r\n\r\n                for (var x = -cellCountX / 2 + this._majorLineFrequency; x < cellCountX / 2; x += this._majorLineFrequency) {\r\n                    let cellX = left + x * this.cellWidth;\r\n\r\n                    context.beginPath();\r\n                    context.moveTo(cellX, this._currentMeasure.top);\r\n                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);\r\n                    context.stroke();\r\n                }\r\n\r\n                for (var y = -cellCountY / 2 + this._majorLineFrequency; y < cellCountY / 2; y += this._majorLineFrequency) {\r\n                    let cellY = top + y * this.cellHeight;\r\n                    context.moveTo(this._currentMeasure.left, cellY);\r\n                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);\r\n                    context.closePath();\r\n                    context.stroke();\r\n                }\r\n            }\r\n        }\r\n\r\n        context.restore();\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"DisplayGrid\";\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.DisplayGrid\", DisplayGrid);"]}

package/2D/controls/ellipse.d.ts

@@ -1,5 +1,6 @@
 import { Container } from "./container";
 import { Measure } from "../measure";
+import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas";
 /** Class used to create 2D ellipse containers */
 export declare class Ellipse extends Container {
     name?: string | undefined;
@@ -13,7 +14,8 @@ export declare class Ellipse extends Container {
      */
     constructor(name?: string | undefined);
     protected _getTypeName(): string;
-    protected _localDraw(context: CanvasRenderingContext2D): void;
-    protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
-    protected _clipForChildren(context: CanvasRenderingContext2D): void;
+    protected _localDraw(context: ICanvasRenderingContext): void;
+    protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void;
+    protected _clipForChildren(context: ICanvasRenderingContext): void;
+    _renderHighlightSpecific(context: ICanvasRenderingContext): void;
 }

package/2D/controls/ellipse.js

@@ -1,8 +1,8 @@
 import { __decorate, __extends } from "tslib";
-import { Container } from "./container";
-import { Control } from "./control";
-import { _TypeStore } from '@babylonjs/core/Misc/typeStore';
-import { serialize } from '@babylonjs/core/Misc/decorators';
+import { Container } from "./container.js";
+import { Control } from "./control.js";
+import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
+import { serialize } from '@babylonjs/core/Misc/decorators.js';
 /** Class used to create 2D ellipse containers */
 var Ellipse = /** @class */ (function (_super) {
     __extends(Ellipse, _super);
@@ -72,11 +72,15 @@ var Ellipse = /** @class */ (function (_super) {
         Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2, this._currentMeasure.height / 2, context);
         context.clip();
     };
+    Ellipse.prototype._renderHighlightSpecific = function (context) {
+        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2 - this._highlightLineWidth / 2, this._currentMeasure.height / 2 - this._highlightLineWidth / 2, context);
+        context.stroke();
+    };
     __decorate([
         serialize()
     ], Ellipse.prototype, "thickness", null);
     return Ellipse;
 }(Container));
 export { Ellipse };
-_TypeStore.RegisteredTypes["BABYLON.GUI.Ellipse"] = Ellipse;
+RegisterClass("BABYLON.GUI.Ellipse", Ellipse);
 //# sourceMappingURL=ellipse.js.map

package/2D/controls/ellipse.js.map

@@ -1 +1 @@
-{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/ellipse.ts"],"names":[],"mappings":"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","sourcesContent":["import { Container } from \"./container\";\r\nimport { Control } from \"./control\";\r\nimport { Measure } from \"../measure\";\r\nimport { _TypeStore } from '@babylonjs/core/Misc/typeStore';\r\nimport { serialize } from '@babylonjs/core/Misc/decorators';\r\n\r\n/** Class used to create 2D ellipse containers */\r\nexport class Ellipse extends Container {\r\n    private _thickness = 1;\r\n\r\n    /** Gets or sets border thickness */\r\n    @serialize()\r\n    public get thickness(): number {\r\n        return this._thickness;\r\n    }\r\n\r\n    public set thickness(value: number) {\r\n        if (this._thickness === value) {\r\n            return;\r\n        }\r\n\r\n        this._thickness = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new Ellipse\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Ellipse\";\r\n    }\r\n\r\n    protected _localDraw(context: CanvasRenderingContext2D): void {\r\n        context.save();\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowColor = this.shadowColor;\r\n            context.shadowBlur = this.shadowBlur;\r\n            context.shadowOffsetX = this.shadowOffsetX;\r\n            context.shadowOffsetY = this.shadowOffsetY;\r\n        }\r\n\r\n        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, context);\r\n\r\n        if (this._background) {\r\n            context.fillStyle = this._background;\r\n\r\n            context.fill();\r\n        }\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowBlur = 0;\r\n            context.shadowOffsetX = 0;\r\n            context.shadowOffsetY = 0;\r\n        }\r\n\r\n        if (this._thickness) {\r\n            if (this.color) {\r\n                context.strokeStyle = this.color;\r\n            }\r\n            context.lineWidth = this._thickness;\r\n\r\n            context.stroke();\r\n        }\r\n\r\n        context.restore();\r\n    }\r\n\r\n    protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {\r\n        super._additionalProcessing(parentMeasure, context);\r\n\r\n        this._measureForChildren.width -= 2 * this._thickness;\r\n        this._measureForChildren.height -= 2 * this._thickness;\r\n        this._measureForChildren.left += this._thickness;\r\n        this._measureForChildren.top += this._thickness;\r\n    }\r\n\r\n    protected _clipForChildren(context: CanvasRenderingContext2D) {\r\n\r\n        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2, this._currentMeasure.height / 2, context);\r\n\r\n        context.clip();\r\n    }\r\n}\r\n_TypeStore.RegisteredTypes[\"BABYLON.GUI.Ellipse\"] = Ellipse;"]}
+{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/ellipse.ts"],"names":[],"mappings":"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","sourcesContent":["import { Container } from \"./container\";\r\nimport { Control } from \"./control\";\r\nimport { Measure } from \"../measure\";\r\nimport { RegisterClass } from '@babylonjs/core/Misc/typeStore';\r\nimport { serialize } from '@babylonjs/core/Misc/decorators';\r\nimport { ICanvasRenderingContext } from \"@babylonjs/core/Engines/ICanvas\";\r\n\r\n/** Class used to create 2D ellipse containers */\r\nexport class Ellipse extends Container {\r\n    private _thickness = 1;\r\n\r\n    /** Gets or sets border thickness */\r\n    @serialize()\r\n    public get thickness(): number {\r\n        return this._thickness;\r\n    }\r\n\r\n    public set thickness(value: number) {\r\n        if (this._thickness === value) {\r\n            return;\r\n        }\r\n\r\n        this._thickness = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new Ellipse\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Ellipse\";\r\n    }\r\n\r\n    protected _localDraw(context: ICanvasRenderingContext): void {\r\n        context.save();\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowColor = this.shadowColor;\r\n            context.shadowBlur = this.shadowBlur;\r\n            context.shadowOffsetX = this.shadowOffsetX;\r\n            context.shadowOffsetY = this.shadowOffsetY;\r\n        }\r\n\r\n        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, context);\r\n\r\n        if (this._background) {\r\n            context.fillStyle = this._background;\r\n\r\n            context.fill();\r\n        }\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowBlur = 0;\r\n            context.shadowOffsetX = 0;\r\n            context.shadowOffsetY = 0;\r\n        }\r\n\r\n        if (this._thickness) {\r\n            if (this.color) {\r\n                context.strokeStyle = this.color;\r\n            }\r\n            context.lineWidth = this._thickness;\r\n\r\n            context.stroke();\r\n        }\r\n\r\n        context.restore();\r\n    }\r\n\r\n    protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void {\r\n        super._additionalProcessing(parentMeasure, context);\r\n\r\n        this._measureForChildren.width -= 2 * this._thickness;\r\n        this._measureForChildren.height -= 2 * this._thickness;\r\n        this._measureForChildren.left += this._thickness;\r\n        this._measureForChildren.top += this._thickness;\r\n    }\r\n\r\n    protected _clipForChildren(context: ICanvasRenderingContext) {\r\n\r\n        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2, this._currentMeasure.height / 2, context);\r\n\r\n        context.clip();\r\n    }\r\n\r\n    public _renderHighlightSpecific(context: ICanvasRenderingContext): void {\r\n        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2 - this._highlightLineWidth / 2, this._currentMeasure.height / 2 - this._highlightLineWidth / 2, context);\r\n        context.stroke();\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Ellipse\", Ellipse);"]}

package/2D/controls/focusableButton.d.ts

@@ -8,6 +8,7 @@ import { Observable } from '@babylonjs/core/Misc/observable';
 import { IKeyboardEvent } from "@babylonjs/core/Events/deviceInputEvents";
 /**
  * Class used to create a focusable button that can easily handle keyboard events
+ * @since 5.0.0
  */
 export declare class FocusableButton extends Button implements IFocusableControl {
     name?: string | undefined;

package/2D/controls/focusableButton.js

@@ -1,9 +1,10 @@
 import { __extends } from "tslib";
-import { Button } from "./button";
-import { _TypeStore } from '@babylonjs/core/Misc/typeStore';
-import { Observable } from '@babylonjs/core/Misc/observable';
+import { Button } from "./button.js";
+import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
+import { Observable } from '@babylonjs/core/Misc/observable.js';
 /**
  * Class used to create a focusable button that can easily handle keyboard events
+ * @since 5.0.0
  */
 var FocusableButton = /** @class */ (function (_super) {
     __extends(FocusableButton, _super);
@@ -72,8 +73,10 @@ var FocusableButton = /** @class */ (function (_super) {
     };
     /** @hidden */
     FocusableButton.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
-        // Clicking on button should focus
-        this.focus();
+        if (!this.isReadOnly) {
+            // Clicking on button should focus
+            this.focus();
+        }
         return _super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi);
     };
     /** @hidden */
@@ -86,5 +89,5 @@ var FocusableButton = /** @class */ (function (_super) {
     return FocusableButton;
 }(Button));
 export { FocusableButton };
-_TypeStore.RegisteredTypes["BABYLON.GUI.FocusableButton"] = FocusableButton;
+RegisterClass("BABYLON.GUI.FocusableButton", FocusableButton);
 //# sourceMappingURL=focusableButton.js.map

package/2D/controls/focusableButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusableButton.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/focusableButton.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAG7D;;GAEG;AACH;IAAqC,mCAAM;IAavC,yBAAmB,IAAa;QAAhC,YACI,kBAAM,IAAI,CAAC,SAGd;QAJkB,UAAI,GAAJ,IAAI,CAAS;QAZhC,6CAA6C;QACtC,kBAAY,GAAqB,IAAI,CAAC;QACrC,gBAAU,GAAG,KAAK,CAAC;QACnB,qBAAe,GAAqB,IAAI,CAAC;QAEjD,wDAAwD;QACjD,uBAAiB,GAAG,IAAI,UAAU,EAAU,CAAC;QACpD,yDAAyD;QAClD,sBAAgB,GAAG,IAAI,UAAU,EAAU,CAAC;QACnD,uDAAuD;QAChD,wCAAkC,GAAG,IAAI,UAAU,EAAkB,CAAC;QAKzE,KAAI,CAAC,eAAe,GAAG,KAAI,CAAC,KAAK,CAAC;;IACtC,CAAC;IAED,cAAc;IACP,gCAAM,GAAb;QACI,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,EAAE;gBACnD,0CAA0C;gBAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;aACrC;YACD,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;SAC/C;IACL,CAAC;IAED,cAAc;IACP,iCAAO,GAAd;QACI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAEvB,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,2BAA2B;YAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;YAClC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;SAClC;QACD,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC;IAED;;;OAGG;IACI,wCAAc,GAArB;QACI,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACI,+BAAK,GAAZ;QACI,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAED;;OAEG;IACI,8BAAI,GAAX;QACI,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC;IACrC,CAAC;IAED;;;OAGG;IACI,yCAAe,GAAtB,UAAuB,GAAmB;QACtC,IAAI,CAAC,kCAAkC,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3E,CAAC;IAED,cAAc;IACP,wCAAc,GAArB,UAAsB,MAAe,EAAE,WAAoB,EAAE,SAAiB,EAAE,WAAmB,EAAE,EAAmB;QACpH,kCAAkC;QAClC,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,OAAO,iBAAM,cAAc,YAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC;IACjF,CAAC;IAED,cAAc;IACP,kCAAQ,GAAf;QACI,iBAAM,OAAO,WAAE,CAAC;QAEhB,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAC9B,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,kCAAkC,CAAC,KAAK,EAAE,CAAC;IACpD,CAAC;IACL,sBAAC;AAAD,CAAC,AAzFD,CAAqC,MAAM,GAyF1C;;AACD,UAAU,CAAC,eAAe,CAAC,6BAA6B,CAAC,GAAG,eAAe,CAAC","sourcesContent":["import { Nullable } from \"@babylonjs/core/types\";\nimport { Vector2 } from \"@babylonjs/core/Maths/math.vector\";\n\nimport { Button } from \"./button\";\nimport { Control } from \"./control\";\nimport { _TypeStore } from '@babylonjs/core/Misc/typeStore';\nimport { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';\nimport { IFocusableControl } from \"./focusableControl\";\nimport { Observable } from '@babylonjs/core/Misc/observable';\nimport { IKeyboardEvent } from \"@babylonjs/core/Events/deviceInputEvents\";\n\n/**\n * Class used to create a focusable button that can easily handle keyboard events\n */\nexport class FocusableButton extends Button implements IFocusableControl {\n    /** Highlight color when button is focused */\n    public focusedColor: Nullable<string> = null;\n    private _isFocused = false;\n    private _unfocusedColor: Nullable<string> = null;\n\n    /** Observable raised when the control gets the focus */\n    public onFocusObservable = new Observable<Button>();\n    /** Observable raised when the control loses the focus */\n    public onBlurObservable = new Observable<Button>();\n    /** Observable raised when a key event was processed */\n    public onKeyboardEventProcessedObservable = new Observable<IKeyboardEvent>();\n\n    constructor(public name?: string) {\n        super(name);\n\n        this._unfocusedColor = this.color;\n    }\n\n    /** @hidden */\n    public onBlur(): void {\n        if (this._isFocused) {\n            this._isFocused = false;\n            if (this.focusedColor && this._unfocusedColor != null) {\n                // Set color back to saved unfocused color\n                this.color = this._unfocusedColor;\n            }\n            this.onBlurObservable.notifyObservers(this);\n        }\n    }\n\n    /** @hidden */\n    public onFocus(): void {\n        this._isFocused = true;\n\n        if (this.focusedColor) {\n            // Save the unfocused color\n            this._unfocusedColor = this.color;\n            this.color = this.focusedColor;\n        }\n        this.onFocusObservable.notifyObservers(this);\n    }\n\n    /**\n     * Function called to get the list of controls that should not steal the focus from this control\n     * @returns an array of controls\n     */\n    public keepsFocusWith(): Nullable<Control[]> {\n        return null;\n    }\n\n    /**\n     * Function to focus a button programmatically\n     */\n    public focus() {\n        this._host.moveFocusToControl(this);\n    }\n\n    /**\n     * Function to unfocus a button programmatically\n     */\n    public blur() {\n        this._host.focusedControl = null;\n    }\n\n    /**\n     * Handles the keyboard event\n     * @param evt Defines the KeyboardEvent\n     */\n    public processKeyboard(evt: IKeyboardEvent): void {\n        this.onKeyboardEventProcessedObservable.notifyObservers(evt, -1, this);\n    }\n\n    /** @hidden */\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\n        // Clicking on button should focus\n        this.focus();\n\n        return super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);\n    }\n\n    /** @hidden */\n    public displose() {\n        super.dispose();\n\n        this.onBlurObservable.clear();\n        this.onFocusObservable.clear();\n        this.onKeyboardEventProcessedObservable.clear();\n    }\n}\n_TypeStore.RegisteredTypes[\"BABYLON.GUI.FocusableButton\"] = FocusableButton;"]}
+{"version":3,"file":"focusableButton.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/focusableButton.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAG7D;;;GAGG;AACH;IAAqC,mCAAM;IAavC,yBAAmB,IAAa;QAAhC,YACI,kBAAM,IAAI,CAAC,SAGd;QAJkB,UAAI,GAAJ,IAAI,CAAS;QAZhC,6CAA6C;QACtC,kBAAY,GAAqB,IAAI,CAAC;QACrC,gBAAU,GAAG,KAAK,CAAC;QACnB,qBAAe,GAAqB,IAAI,CAAC;QAEjD,wDAAwD;QACjD,uBAAiB,GAAG,IAAI,UAAU,EAAU,CAAC;QACpD,yDAAyD;QAClD,sBAAgB,GAAG,IAAI,UAAU,EAAU,CAAC;QACnD,uDAAuD;QAChD,wCAAkC,GAAG,IAAI,UAAU,EAAkB,CAAC;QAKzE,KAAI,CAAC,eAAe,GAAG,KAAI,CAAC,KAAK,CAAC;;IACtC,CAAC;IAED,cAAc;IACP,gCAAM,GAAb;QACI,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,EAAE;gBACnD,0CAA0C;gBAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;aACrC;YACD,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;SAC/C;IACL,CAAC;IAED,cAAc;IACP,iCAAO,GAAd;QACI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAEvB,IAAI,IAAI,CAAC,YAAY,EAAE;YACnB,2BAA2B;YAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;YAClC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;SAClC;QACD,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC;IAED;;;OAGG;IACI,wCAAc,GAArB;QACI,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACI,+BAAK,GAAZ;QACI,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAED;;OAEG;IACI,8BAAI,GAAX;QACI,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC;IACrC,CAAC;IAED;;;OAGG;IACI,yCAAe,GAAtB,UAAuB,GAAmB;QACtC,IAAI,CAAC,kCAAkC,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3E,CAAC;IAED,cAAc;IACP,wCAAc,GAArB,UAAsB,MAAe,EAAE,WAAoB,EAAE,SAAiB,EAAE,WAAmB,EAAE,EAAmB;QACpH,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,kCAAkC;YAClC,IAAI,CAAC,KAAK,EAAE,CAAC;SAChB;QAED,OAAO,iBAAM,cAAc,YAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC;IACjF,CAAC;IAED,cAAc;IACP,kCAAQ,GAAf;QACI,iBAAM,OAAO,WAAE,CAAC;QAEhB,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAC9B,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,kCAAkC,CAAC,KAAK,EAAE,CAAC;IACpD,CAAC;IACL,sBAAC;AAAD,CAAC,AA3FD,CAAqC,MAAM,GA2F1C;;AACD,aAAa,CAAC,6BAA6B,EAAE,eAAe,CAAC,CAAC","sourcesContent":["import { Nullable } from \"@babylonjs/core/types\";\nimport { Vector2 } from \"@babylonjs/core/Maths/math.vector\";\n\nimport { Button } from \"./button\";\nimport { Control } from \"./control\";\nimport { RegisterClass } from '@babylonjs/core/Misc/typeStore';\nimport { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';\nimport { IFocusableControl } from \"./focusableControl\";\nimport { Observable } from '@babylonjs/core/Misc/observable';\nimport { IKeyboardEvent } from \"@babylonjs/core/Events/deviceInputEvents\";\n\n/**\n * Class used to create a focusable button that can easily handle keyboard events\n * @since 5.0.0\n */\nexport class FocusableButton extends Button implements IFocusableControl {\n    /** Highlight color when button is focused */\n    public focusedColor: Nullable<string> = null;\n    private _isFocused = false;\n    private _unfocusedColor: Nullable<string> = null;\n\n    /** Observable raised when the control gets the focus */\n    public onFocusObservable = new Observable<Button>();\n    /** Observable raised when the control loses the focus */\n    public onBlurObservable = new Observable<Button>();\n    /** Observable raised when a key event was processed */\n    public onKeyboardEventProcessedObservable = new Observable<IKeyboardEvent>();\n\n    constructor(public name?: string) {\n        super(name);\n\n        this._unfocusedColor = this.color;\n    }\n\n    /** @hidden */\n    public onBlur(): void {\n        if (this._isFocused) {\n            this._isFocused = false;\n            if (this.focusedColor && this._unfocusedColor != null) {\n                // Set color back to saved unfocused color\n                this.color = this._unfocusedColor;\n            }\n            this.onBlurObservable.notifyObservers(this);\n        }\n    }\n\n    /** @hidden */\n    public onFocus(): void {\n        this._isFocused = true;\n\n        if (this.focusedColor) {\n            // Save the unfocused color\n            this._unfocusedColor = this.color;\n            this.color = this.focusedColor;\n        }\n        this.onFocusObservable.notifyObservers(this);\n    }\n\n    /**\n     * Function called to get the list of controls that should not steal the focus from this control\n     * @returns an array of controls\n     */\n    public keepsFocusWith(): Nullable<Control[]> {\n        return null;\n    }\n\n    /**\n     * Function to focus a button programmatically\n     */\n    public focus() {\n        this._host.moveFocusToControl(this);\n    }\n\n    /**\n     * Function to unfocus a button programmatically\n     */\n    public blur() {\n        this._host.focusedControl = null;\n    }\n\n    /**\n     * Handles the keyboard event\n     * @param evt Defines the KeyboardEvent\n     */\n    public processKeyboard(evt: IKeyboardEvent): void {\n        this.onKeyboardEventProcessedObservable.notifyObservers(evt, -1, this);\n    }\n\n    /** @hidden */\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\n        if (!this.isReadOnly) {\n            // Clicking on button should focus\n            this.focus();\n        }\n\n        return super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);\n    }\n\n    /** @hidden */\n    public displose() {\n        super.dispose();\n\n        this.onBlurObservable.clear();\n        this.onFocusObservable.clear();\n        this.onKeyboardEventProcessedObservable.clear();\n    }\n}\nRegisterClass(\"BABYLON.GUI.FocusableButton\", FocusableButton);"]}

package/2D/controls/grid.d.ts

@@ -3,13 +3,17 @@ import { Container } from "./container";
 import { ValueAndUnit } from "../valueAndUnit";
 import { Control } from "./control";
 import { Measure } from "../measure";
+import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas";
+import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
 /**
  * Class used to create a 2D grid container
  */
 export declare class Grid extends Container {
     name?: string | undefined;
     private _rowDefinitions;
+    private _rowDefinitionObservers;
     private _columnDefinitions;
+    private _columnDefinitionObservers;
     private _cells;
     private _childControls;
     /**
@@ -116,9 +120,16 @@ export declare class Grid extends Container {
     constructor(name?: string | undefined);
     protected _getTypeName(): string;
     protected _getGridDefinitions(definitionCallback: (lefts: number[], tops: number[], widths: number[], heights: number[]) => void): void;
-    protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void;
     _flagDescendantsAsMatrixDirty(): void;
-    _renderHighlightSpecific(context: CanvasRenderingContext2D): void;
+    _renderHighlightSpecific(context: ICanvasRenderingContext): void;
     /** Releases associated resources */
     dispose(): void;
+    /**
+     * Serializes the current control
+     * @param serializationObject defined the JSON serialized object
+     */
+    serialize(serializationObject: any): void;
+    /** @hidden */
+    _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture): void;
 }

package/2D/controls/grid.js

@@ -1,9 +1,9 @@
 import { __extends } from "tslib";
-import { Container } from "./container";
-import { ValueAndUnit } from "../valueAndUnit";
-import { Control } from "./control";
-import { Tools } from '@babylonjs/core/Misc/tools';
-import { _TypeStore } from '@babylonjs/core/Misc/typeStore';
+import { Container } from "./container.js";
+import { ValueAndUnit } from "../valueAndUnit.js";
+import { Control } from "./control.js";
+import { Tools } from '@babylonjs/core/Misc/tools.js';
+import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
 /**
  * Class used to create a 2D grid container
  */
@@ -17,7 +17,9 @@ var Grid = /** @class */ (function (_super) {
         var _this = _super.call(this, name) || this;
         _this.name = name;
         _this._rowDefinitions = new Array();
+        _this._rowDefinitionObservers = [];
         _this._columnDefinitions = new Array();
+        _this._columnDefinitionObservers = [];
         _this._cells = {};
         _this._childControls = new Array();
         return _this;
@@ -87,8 +89,10 @@ var Grid = /** @class */ (function (_super) {
      * @returns the current grid
      */
     Grid.prototype.addRowDefinition = function (height, isPixel) {
+        var _this = this;
         if (isPixel === void 0) { isPixel = false; }
         this._rowDefinitions.push(new ValueAndUnit(height, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE));
+        this._rowDefinitionObservers.push(this._rowDefinitions[this.rowCount - 1].onChangedObservable.add(function () { return _this._markAsDirty(); }));
         this._markAsDirty();
         return this;
     };
@@ -99,8 +103,10 @@ var Grid = /** @class */ (function (_super) {
      * @returns the current grid
      */
     Grid.prototype.addColumnDefinition = function (width, isPixel) {
+        var _this = this;
         if (isPixel === void 0) { isPixel = false; }
         this._columnDefinitions.push(new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE));
+        this._columnDefinitionObservers.push(this._columnDefinitions[this.columnCount - 1].onChangedObservable.add(function () { return _this._markAsDirty(); }));
         this._markAsDirty();
         return this;
     };
@@ -112,15 +118,18 @@ var Grid = /** @class */ (function (_super) {
      * @returns the current grid
      */
     Grid.prototype.setRowDefinition = function (index, height, isPixel) {
+        var _this = this;
         if (isPixel === void 0) { isPixel = false; }
         if (index < 0 || index >= this._rowDefinitions.length) {
             return this;
         }
         var current = this._rowDefinitions[index];
-        if (current && current.isPixel === isPixel && current.internalValue === height) {
+        if (current && current.isPixel === isPixel && current.value === height) {
             return this;
         }
+        this._rowDefinitions[index].onChangedObservable.remove(this._rowDefinitionObservers[index]);
         this._rowDefinitions[index] = new ValueAndUnit(height, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE);
+        this._rowDefinitionObservers[index] = this._rowDefinitions[index].onChangedObservable.add(function () { return _this._markAsDirty(); });
         this._markAsDirty();
         return this;
     };
@@ -132,15 +141,18 @@ var Grid = /** @class */ (function (_super) {
      * @returns the current grid
      */
     Grid.prototype.setColumnDefinition = function (index, width, isPixel) {
+        var _this = this;
         if (isPixel === void 0) { isPixel = false; }
         if (index < 0 || index >= this._columnDefinitions.length) {
             return this;
         }
         var current = this._columnDefinitions[index];
-        if (current && current.isPixel === isPixel && current.internalValue === width) {
+        if (current && current.isPixel === isPixel && current.value === width) {
             return this;
         }
+        this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
         this._columnDefinitions[index] = new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE);
+        this._columnDefinitionObservers[index] = this._columnDefinitions[index].onChangedObservable.add(function () { return _this._markAsDirty(); });
         this._markAsDirty();
         return this;
     };
@@ -151,7 +163,7 @@ var Grid = /** @class */ (function (_super) {
      * @returns the list of controls
      */
     Grid.prototype.getChildrenAt = function (row, column) {
-        var cell = this._cells[row + ":" + column];
+        var cell = this._cells["".concat(row, ":").concat(column)];
         if (!cell) {
             return null;
         }
@@ -200,18 +212,20 @@ var Grid = /** @class */ (function (_super) {
             return this;
         }
         for (var x = 0; x < this._rowDefinitions.length; x++) {
-            var key = x + ":" + index;
+            var key = "".concat(x, ":").concat(index);
             var cell = this._cells[key];
             this._removeCell(cell, key);
         }
         for (var x = 0; x < this._rowDefinitions.length; x++) {
             for (var y = index + 1; y < this._columnDefinitions.length; y++) {
-                var previousKey = x + ":" + (y - 1);
-                var key = x + ":" + y;
+                var previousKey = "".concat(x, ":").concat(y - 1);
+                var key = "".concat(x, ":").concat(y);
                 this._offsetCell(previousKey, key);
             }
         }
+        this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
         this._columnDefinitions.splice(index, 1);
+        this._columnDefinitionObservers.splice(index, 1);
         this._markAsDirty();
         return this;
     };
@@ -225,18 +239,20 @@ var Grid = /** @class */ (function (_super) {
             return this;
         }
         for (var y = 0; y < this._columnDefinitions.length; y++) {
-            var key = index + ":" + y;
+            var key = "".concat(index, ":").concat(y);
             var cell = this._cells[key];
             this._removeCell(cell, key);
         }
         for (var y = 0; y < this._columnDefinitions.length; y++) {
             for (var x = index + 1; x < this._rowDefinitions.length; x++) {
-                var previousKey = x - 1 + ":" + y;
-                var key = x + ":" + y;
+                var previousKey = "".concat(x - 1, ":").concat(y);
+                var key = "".concat(x, ":").concat(y);
                 this._offsetCell(previousKey, key);
             }
         }
+        this._rowDefinitions[index].onChangedObservable.remove(this._rowDefinitionObservers[index]);
         this._rowDefinitions.splice(index, 1);
+        this._rowDefinitionObservers.splice(index, 1);
         this._markAsDirty();
         return this;
     };
@@ -259,12 +275,12 @@ var Grid = /** @class */ (function (_super) {
             this.addColumnDefinition(1, false);
         }
         if (this._childControls.indexOf(control) !== -1) {
-            Tools.Warn("Control (Name:" + control.name + ", UniqueId:" + control.uniqueId + ") is already associated with this grid. You must remove it before reattaching it");
+            Tools.Warn("Control (Name:".concat(control.name, ", UniqueId:").concat(control.uniqueId, ") is already associated with this grid. You must remove it before reattaching it"));
             return this;
         }
         var x = Math.min(row, this._rowDefinitions.length - 1);
         var y = Math.min(column, this._columnDefinitions.length - 1);
-        var key = x + ":" + y;
+        var key = "".concat(x, ":").concat(y);
         var goodContainer = this._cells[key];
         if (!goodContainer) {
             goodContainer = new Container(key);
@@ -313,58 +329,58 @@ var Grid = /** @class */ (function (_super) {
         // Heights
         var index = 0;
         for (var _i = 0, _a = this._rowDefinitions; _i < _a.length; _i++) {
-            var value = _a[_i];
-            if (value.isPixel) {
-                var height = value.getValue(this._host);
+            var rowDefinition = _a[_i];
+            if (rowDefinition.isPixel) {
+                var height = rowDefinition.getValue(this._host);
                 availableHeight -= height;
                 heights[index] = height;
             }
             else {
-                globalHeightPercentage += value.internalValue;
+                globalHeightPercentage += rowDefinition.value;
             }
             index++;
         }
         var top = 0;
         index = 0;
         for (var _b = 0, _c = this._rowDefinitions; _b < _c.length; _b++) {
-            var value = _c[_b];
+            var rowDefinition = _c[_b];
             tops.push(top);
-            if (!value.isPixel) {
-                var height = (value.internalValue / globalHeightPercentage) * availableHeight;
+            if (!rowDefinition.isPixel) {
+                var height = (rowDefinition.value / globalHeightPercentage) * availableHeight;
                 top += height;
                 heights[index] = height;
             }
             else {
-                top += value.getValue(this._host);
+                top += rowDefinition.getValue(this._host);
             }
             index++;
         }
         // Widths
         index = 0;
         for (var _d = 0, _e = this._columnDefinitions; _d < _e.length; _d++) {
-            var value = _e[_d];
-            if (value.isPixel) {
-                var width = value.getValue(this._host);
+            var columnDefinition = _e[_d];
+            if (columnDefinition.isPixel) {
+                var width = columnDefinition.getValue(this._host);
                 availableWidth -= width;
                 widths[index] = width;
             }
             else {
-                globalWidthPercentage += value.internalValue;
+                globalWidthPercentage += columnDefinition.value;
             }
             index++;
         }
         var left = 0;
         index = 0;
         for (var _f = 0, _g = this._columnDefinitions; _f < _g.length; _f++) {
-            var value = _g[_f];
+            var columnDefinition = _g[_f];
             lefts.push(left);
-            if (!value.isPixel) {
-                var width = (value.internalValue / globalWidthPercentage) * availableWidth;
+            if (!columnDefinition.isPixel) {
+                var width = (columnDefinition.value / globalWidthPercentage) * availableWidth;
                 left += width;
                 widths[index] = width;
             }
             else {
-                left += value.getValue(this._host);
+                left += columnDefinition.getValue(this._host);
             }
             index++;
         }
@@ -433,10 +449,78 @@ var Grid = /** @class */ (function (_super) {
             var control = _a[_i];
             control.dispose();
         }
+        for (var index = 0; index < this._rowDefinitions.length; index++) {
+            this._rowDefinitions[index].onChangedObservable.remove(this._rowDefinitionObservers[index]);
+        }
+        for (var index = 0; index < this._columnDefinitions.length; index++) {
+            this._columnDefinitions[index].onChangedObservable.remove(this._columnDefinitionObservers[index]);
+        }
+        this._rowDefinitionObservers = [];
+        this._rowDefinitions = [];
+        this._columnDefinitionObservers = [];
+        this._columnDefinitions = [];
+        this._cells = {};
         this._childControls = [];
     };
+    /**
+     * Serializes the current control
+     * @param serializationObject defined the JSON serialized object
+     */
+    Grid.prototype.serialize = function (serializationObject) {
+        _super.prototype.serialize.call(this, serializationObject);
+        serializationObject.columnCount = this.columnCount;
+        serializationObject.rowCount = this.rowCount;
+        serializationObject.columns = [];
+        serializationObject.rows = [];
+        serializationObject.tags = [];
+        for (var i = 0; i < this.columnCount; ++i) {
+            var cd = this.getColumnDefinition(i);
+            var childSerializationObject = { value: cd === null || cd === void 0 ? void 0 : cd.getValue(this.host), unit: cd === null || cd === void 0 ? void 0 : cd.unit };
+            serializationObject.columns.push(childSerializationObject);
+        }
+        for (var i = 0; i < this.rowCount; ++i) {
+            var rd = this.getRowDefinition(i);
+            var childSerializationObject = { value: rd === null || rd === void 0 ? void 0 : rd.getValue(this.host), unit: rd === null || rd === void 0 ? void 0 : rd.unit };
+            serializationObject.rows.push(childSerializationObject);
+        }
+        this.children.forEach(function (child) {
+            serializationObject.tags.push(child._tag);
+        });
+    };
+    /** @hidden */
+    Grid.prototype._parseFromContent = function (serializedObject, host) {
+        _super.prototype._parseFromContent.call(this, serializedObject, host);
+        var children = [];
+        this.children.forEach(function (child) {
+            children.push(child);
+        });
+        this.removeRowDefinition(0);
+        this.removeColumnDefinition(0);
+        for (var i = 0; i < serializedObject.columnCount; ++i) {
+            var columnValue = serializedObject.columns[i].value;
+            var unit = serializedObject.columns[i].unit;
+            this.addColumnDefinition(columnValue, unit === 1 ? true : false);
+        }
+        for (var i = 0; i < serializedObject.rowCount; ++i) {
+            var rowValue = serializedObject.rows[i].value;
+            var unit = serializedObject.rows[i].unit;
+            this.addRowDefinition(rowValue, unit === 1 ? true : false);
+        }
+        for (var i = 0; i < children.length; ++i) {
+            var cellInfo = serializedObject.tags[i];
+            var rowNumber = parseInt(cellInfo.substring(0, cellInfo.search(":")));
+            if (isNaN(rowNumber)) {
+                rowNumber = 0;
+            }
+            var columnNumber = parseInt(cellInfo.substring(cellInfo.search(":") + 1));
+            if (isNaN(columnNumber)) {
+                columnNumber = 0;
+            }
+            this.addControl(children[i], rowNumber, columnNumber);
+        }
+    };
     return Grid;
 }(Container));
 export { Grid };
-_TypeStore.RegisteredTypes["BABYLON.GUI.Grid"] = Grid;
+RegisterClass("BABYLON.GUI.Grid", Grid);
 //# sourceMappingURL=grid.js.map