@babylonjs/gui 5.0.0-alpha.7 → 5.0.0-beta.2

package/2D/controls/checkbox.js

@@ -1,10 +1,10 @@
 import { __decorate, __extends } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Control } from "./control";
-import { StackPanel } from "./stackPanel";
-import { TextBlock } from "./textBlock";
-import { _TypeStore } from '@babylonjs/core/Misc/typeStore';
-import { serialize } from '@babylonjs/core/Misc/decorators';
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Control } from "./control.js";
+import { StackPanel } from "./stackPanel.js";
+import { TextBlock } from "./textBlock.js";
+import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
+import { serialize } from '@babylonjs/core/Misc/decorators.js';
 /**
  * Class used to represent a 2D checkbox
  */
@@ -129,7 +129,9 @@ var Checkbox = /** @class */ (function (_super) {
         if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
             return false;
         }
-        this.isChecked = !this.isChecked;
+        if (!this.isReadOnly) {
+            this.isChecked = !this.isChecked;
+        }
         return true;
     };
     /**
@@ -173,5 +175,5 @@ var Checkbox = /** @class */ (function (_super) {
     return Checkbox;
 }(Control));
 export { Checkbox };
-_TypeStore.RegisteredTypes["BABYLON.GUI.Checkbox"] = Checkbox;
+RegisterClass("BABYLON.GUI.Checkbox", Checkbox);
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAG7D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAI5D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D;;GAEG;AACH;IAA8B,4BAAO;IA2EjC;;;OAGG;IACH,kBAAmB,IAAa;QAAhC,YACI,kBAAM,IAAI,CAAC,SAEd;QAHkB,UAAI,GAAJ,IAAI,CAAS;QA9ExB,gBAAU,GAAG,KAAK,CAAC;QACnB,iBAAW,GAAG,OAAO,CAAC;QACtB,qBAAe,GAAG,GAAG,CAAC;QACtB,gBAAU,GAAG,CAAC,CAAC;QAiBvB;;WAEG;QACI,kCAA4B,GAAG,IAAI,UAAU,EAAW,CAAC;QAyD5D,KAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;;IACjC,CAAC;IA1ED,sBAAW,+BAAS;QAFpB,qCAAqC;aAErC;YACI,OAAO,IAAI,CAAC,UAAU,CAAC;QAC3B,CAAC;aAED,UAAqB,KAAa;YAC9B,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;gBAC3B,OAAO;aACV;YAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;;;OATA;IAkBD,sBAAW,oCAAc;QAFzB,oFAAoF;aAEpF;YACI,OAAO,IAAI,CAAC,eAAe,CAAC;QAChC,CAAC;aAED,UAA0B,KAAa;YACnC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;YAExC,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,EAAE;gBAChC,OAAO;aACV;YAED,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;;;OAXA;IAeD,sBAAW,gCAAU;QAFrB,oCAAoC;aAEpC;YACI,OAAO,IAAI,CAAC,WAAW,CAAC;QAC5B,CAAC;aAED,UAAsB,KAAa;YAC/B,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;gBAC5B,OAAO;aACV;YAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;;;OATA;IAaD,sBAAW,+BAAS;QAFpB,0EAA0E;aAE1E;YACI,OAAO,IAAI,CAAC,UAAU,CAAC;QAC3B,CAAC;aAED,UAAqB,KAAc;YAC/B,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;gBAC3B,OAAO;aACV;YAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,YAAY,EAAE,CAAC;YAEpB,IAAI,CAAC,4BAA4B,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC7D,CAAC;;;OAXA;IAsBS,+BAAY,GAAtB;QACI,OAAO,UAAU,CAAC;IACtB,CAAC;IAED,cAAc;IACP,wBAAK,GAAZ,UAAa,OAAiC,EAAE,oBAAwC;QACpF,OAAO,CAAC,IAAI,EAAE,CAAC;QAEf,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC3B,IAAI,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;QAC/D,IAAI,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;QAEjE,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE;YAC7D,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YACvC,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YACrC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;YAC3C,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;SAC9C;QAED,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;QAC7E,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAE7I,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE;YAC7D,OAAO,CAAC,UAAU,GAAG,CAAC,CAAC;YACvB,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC;YAC1B,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC;SAC7B;QAED,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC;YAC3E,IAAI,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC;YACrD,IAAI,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC;YAEtD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;SACpN;QAED,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;QAEpC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAE/I,OAAO,CAAC,OAAO,EAAE,CAAC;IACtB,CAAC;IAED,SAAS;IAET,cAAc;IACP,iCAAc,GAArB,UAAsB,MAAe,EAAE,WAAoB,EAAE,SAAiB,EAAE,WAAmB,EAAE,EAAmB;QACpH,IAAI,CAAC,iBAAM,cAAc,YAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE;YACxE,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QAEjC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;;;OAKG;IACW,8BAAqB,GAAnC,UAAoC,KAAa,EAAE,cAAwC;QACvF,IAAI,KAAK,GAAG,IAAI,UAAU,EAAE,CAAC;QAC7B,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC;QACzB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAEtB,IAAI,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC9B,QAAQ,CAAC,KAAK,GAAG,MAAM,CAAC;QACxB,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QACzB,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC;QAC1B,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC;QACzB,QAAQ,CAAC,4BAA4B,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC1D,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAE3B,IAAI,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;QAC7B,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC;QACvB,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,MAAM,CAAC,uBAAuB,GAAG,OAAO,CAAC,yBAAyB,CAAC;QACnE,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC;QACvB,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAEzB,OAAO,KAAK,CAAC;IACjB,CAAC;IAjKD;QADC,SAAS,EAAE;6CAGX;IAkBD;QADC,SAAS,EAAE;kDAGX;IAeD;QADC,SAAS,EAAE;8CAGX;IAaD;QADC,SAAS,EAAE;6CAGX;IA4GL,eAAC;CAAA,AA1KD,CAA8B,OAAO,GA0KpC;SA1KY,QAAQ;AA2KrB,UAAU,CAAC,eAAe,CAAC,sBAAsB,CAAC,GAAG,QAAQ,CAAC","sourcesContent":["import { Observable } from \"@babylonjs/core/Misc/observable\";\r\nimport { Vector2 } from \"@babylonjs/core/Maths/math.vector\";\r\n\r\nimport { Control } from \"./control\";\r\nimport { StackPanel } from \"./stackPanel\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { _TypeStore } from '@babylonjs/core/Misc/typeStore';\r\nimport { Nullable } from '@babylonjs/core/types';\r\nimport { Measure } from '../measure';\r\nimport { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';\r\nimport { serialize } from '@babylonjs/core/Misc/decorators';\r\n\r\n/**\r\n * Class used to represent a 2D checkbox\r\n */\r\nexport class Checkbox extends Control {\r\n    private _isChecked = false;\r\n    private _background = \"black\";\r\n    private _checkSizeRatio = 0.8;\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     * Observable raised when isChecked property changes\r\n     */\r\n    public onIsCheckedChangedObservable = new Observable<boolean>();\r\n\r\n    /** Gets or sets a value indicating the ratio between overall size and check size */\r\n    @serialize()\r\n    public get checkSizeRatio(): number {\r\n        return this._checkSizeRatio;\r\n    }\r\n\r\n    public set checkSizeRatio(value: number) {\r\n        value = Math.max(Math.min(1, value), 0);\r\n\r\n        if (this._checkSizeRatio === value) {\r\n            return;\r\n        }\r\n\r\n        this._checkSizeRatio = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color */\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 a boolean indicating if the checkbox is checked or not */\r\n    @serialize()\r\n    public get isChecked(): boolean {\r\n        return this._isChecked;\r\n    }\r\n\r\n    public set isChecked(value: boolean) {\r\n        if (this._isChecked === value) {\r\n            return;\r\n        }\r\n\r\n        this._isChecked = value;\r\n        this._markAsDirty();\r\n\r\n        this.onIsCheckedChangedObservable.notifyObservers(value);\r\n    }\r\n\r\n    /**\r\n     * Creates a new CheckBox\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n        this.isPointerBlocker = true;\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Checkbox\";\r\n    }\r\n\r\n    /** @hidden */\r\n    public _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n        let actualWidth = this._currentMeasure.width - this._thickness;\r\n        let actualHeight = this._currentMeasure.height - this._thickness;\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        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;\r\n        context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\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._isChecked) {\r\n            context.fillStyle = this._isEnabled ? this.color : this._disabledColorItem;\r\n            let offsetWidth = actualWidth * this._checkSizeRatio;\r\n            let offseHeight = actualHeight * this._checkSizeRatio;\r\n\r\n            context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offseHeight) / 2, offsetWidth, offseHeight);\r\n        }\r\n\r\n        context.strokeStyle = this.color;\r\n        context.lineWidth = this._thickness;\r\n\r\n        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n        context.restore();\r\n    }\r\n\r\n    // Events\r\n\r\n    /** @hidden */\r\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n            return false;\r\n        }\r\n\r\n        this.isChecked = !this.isChecked;\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * Utility function to easily create a checkbox with a header\r\n     * @param title defines the label to use for the header\r\n     * @param onValueChanged defines the callback to call when value changes\r\n     * @returns a StackPanel containing the checkbox and a textBlock\r\n     */\r\n    public static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel {\r\n        var panel = new StackPanel();\r\n        panel.isVertical = false;\r\n        panel.height = \"30px\";\r\n\r\n        var checkbox = new Checkbox();\r\n        checkbox.width = \"20px\";\r\n        checkbox.height = \"20px\";\r\n        checkbox.isChecked = true;\r\n        checkbox.color = \"green\";\r\n        checkbox.onIsCheckedChangedObservable.add(onValueChanged);\r\n        panel.addControl(checkbox);\r\n\r\n        var header = new TextBlock();\r\n        header.text = title;\r\n        header.width = \"180px\";\r\n        header.paddingLeft = \"5px\";\r\n        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        header.color = \"white\";\r\n        panel.addControl(header);\r\n\r\n        return panel;\r\n    }\r\n}\r\n_TypeStore.RegisteredTypes[\"BABYLON.GUI.Checkbox\"] = Checkbox;\r\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { Observable } from \"@babylonjs/core/Misc/observable\";\r\nimport { Vector2 } from \"@babylonjs/core/Maths/math.vector\";\r\n\r\nimport { Control } from \"./control\";\r\nimport { StackPanel } from \"./stackPanel\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { RegisterClass } from '@babylonjs/core/Misc/typeStore';\r\nimport { Nullable } from '@babylonjs/core/types';\r\nimport { Measure } from '../measure';\r\nimport { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';\r\nimport { serialize } from '@babylonjs/core/Misc/decorators';\r\nimport { ICanvasRenderingContext } from '@babylonjs/core/Engines/ICanvas';\r\n\r\n/**\r\n * Class used to represent a 2D checkbox\r\n */\r\nexport class Checkbox extends Control {\r\n    private _isChecked = false;\r\n    private _background = \"black\";\r\n    private _checkSizeRatio = 0.8;\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     * Observable raised when isChecked property changes\r\n     */\r\n    public onIsCheckedChangedObservable = new Observable<boolean>();\r\n\r\n    /** Gets or sets a value indicating the ratio between overall size and check size */\r\n    @serialize()\r\n    public get checkSizeRatio(): number {\r\n        return this._checkSizeRatio;\r\n    }\r\n\r\n    public set checkSizeRatio(value: number) {\r\n        value = Math.max(Math.min(1, value), 0);\r\n\r\n        if (this._checkSizeRatio === value) {\r\n            return;\r\n        }\r\n\r\n        this._checkSizeRatio = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color */\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 a boolean indicating if the checkbox is checked or not */\r\n    @serialize()\r\n    public get isChecked(): boolean {\r\n        return this._isChecked;\r\n    }\r\n\r\n    public set isChecked(value: boolean) {\r\n        if (this._isChecked === value) {\r\n            return;\r\n        }\r\n\r\n        this._isChecked = value;\r\n        this._markAsDirty();\r\n\r\n        this.onIsCheckedChangedObservable.notifyObservers(value);\r\n    }\r\n\r\n    /**\r\n     * Creates a new CheckBox\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n        this.isPointerBlocker = true;\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Checkbox\";\r\n    }\r\n\r\n    /** @hidden */\r\n    public _draw(context: ICanvasRenderingContext, invalidatedRectangle?: Nullable<Measure>): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n        let actualWidth = this._currentMeasure.width - this._thickness;\r\n        let actualHeight = this._currentMeasure.height - this._thickness;\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        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;\r\n        context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\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._isChecked) {\r\n            context.fillStyle = this._isEnabled ? this.color : this._disabledColorItem;\r\n            let offsetWidth = actualWidth * this._checkSizeRatio;\r\n            let offseHeight = actualHeight * this._checkSizeRatio;\r\n\r\n            context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offseHeight) / 2, offsetWidth, offseHeight);\r\n        }\r\n\r\n        context.strokeStyle = this.color;\r\n        context.lineWidth = this._thickness;\r\n\r\n        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n        context.restore();\r\n    }\r\n\r\n    // Events\r\n\r\n    /** @hidden */\r\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (!this.isReadOnly) {\r\n            this.isChecked = !this.isChecked;\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * Utility function to easily create a checkbox with a header\r\n     * @param title defines the label to use for the header\r\n     * @param onValueChanged defines the callback to call when value changes\r\n     * @returns a StackPanel containing the checkbox and a textBlock\r\n     */\r\n    public static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel {\r\n        var panel = new StackPanel();\r\n        panel.isVertical = false;\r\n        panel.height = \"30px\";\r\n\r\n        var checkbox = new Checkbox();\r\n        checkbox.width = \"20px\";\r\n        checkbox.height = \"20px\";\r\n        checkbox.isChecked = true;\r\n        checkbox.color = \"green\";\r\n        checkbox.onIsCheckedChangedObservable.add(onValueChanged);\r\n        panel.addControl(checkbox);\r\n\r\n        var header = new TextBlock();\r\n        header.text = title;\r\n        header.width = \"180px\";\r\n        header.paddingLeft = \"5px\";\r\n        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        header.color = \"white\";\r\n        panel.addControl(header);\r\n\r\n        return panel;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Checkbox\", Checkbox);\r\n"]}

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

@@ -5,6 +5,7 @@ import { Measure } from "../measure";
 import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
 import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';
+import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas";
 /** Class used to create color pickers */
 export declare class ColorPicker extends Control {
     name?: string | undefined;
@@ -20,7 +21,7 @@ export declare class ColorPicker extends Control {
     private _h;
     private _s;
     private _v;
-    private _lastPointerDownID;
+    private _lastPointerDownId;
     /**
      * Observable raised when the value changes
      */
@@ -51,13 +52,13 @@ export declare class ColorPicker extends Control {
     constructor(name?: string | undefined);
     protected _getTypeName(): string;
     /** @hidden */
-    protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    protected _preMeasure(parentMeasure: Measure, context: ICanvasRenderingContext): void;
     private _updateSquareProps;
     private _drawGradientSquare;
     private _drawCircle;
     private _createColorWheelCanvas;
     /** @hidden */
-    _draw(context: CanvasRenderingContext2D): void;
+    _draw(context: ICanvasRenderingContext): void;
     private _pointerIsDown;
     private _updateValueFromPointer;
     private _isPointOnSquare;

package/2D/controls/colorpicker.js

@@ -1,14 +1,15 @@
 import { __decorate, __extends } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Control } from "./control";
-import { InputText } from "./inputText";
-import { Rectangle } from "./rectangle";
-import { Button } from "./button";
-import { Grid } from "./grid";
-import { TextBlock } from "../controls/textBlock";
-import { _TypeStore } from '@babylonjs/core/Misc/typeStore';
-import { Color3 } from '@babylonjs/core/Maths/math.color';
-import { serialize } from '@babylonjs/core/Misc/decorators';
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Control } from "./control.js";
+import { InputText } from "./inputText.js";
+import { Rectangle } from "./rectangle.js";
+import { Button } from "./button.js";
+import { Grid } from "./grid.js";
+import { TextBlock } from "../controls/textBlock.js";
+import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
+import { Color3 } from '@babylonjs/core/Maths/math.color.js';
+import { serialize } from '@babylonjs/core/Misc/decorators.js';
+import { Engine } from "@babylonjs/core/Engines/engine.js";
 /** Class used to create color pickers */
 var ColorPicker = /** @class */ (function (_super) {
     __extends(ColorPicker, _super);
@@ -29,7 +30,7 @@ var ColorPicker = /** @class */ (function (_super) {
         _this._h = 360;
         _this._s = 1;
         _this._v = 1;
-        _this._lastPointerDownID = -1;
+        _this._lastPointerDownId = -1;
         /**
          * Observable raised when the value changes
          */
@@ -92,6 +93,10 @@ var ColorPicker = /** @class */ (function (_super) {
                 return;
             }
             if (this._width.fromString(value)) {
+                if (this._width.getValue(this._host) === 0) {
+                    value = '1px';
+                    this._width.fromString(value);
+                }
                 this._height.fromString(value);
                 this._markAsDirty();
             }
@@ -113,6 +118,10 @@ var ColorPicker = /** @class */ (function (_super) {
                 return;
             }
             if (this._height.fromString(value)) {
+                if (this._height.getValue(this._host) === 0) {
+                    value = '1px';
+                    this._height.fromString(value);
+                }
                 this._width.fromString(value);
                 this._markAsDirty();
             }
@@ -178,9 +187,12 @@ var ColorPicker = /** @class */ (function (_super) {
         context.stroke();
     };
     ColorPicker.prototype._createColorWheelCanvas = function (radius, thickness) {
-        var canvas = document.createElement("canvas");
-        canvas.width = radius * 2;
-        canvas.height = radius * 2;
+        // Shoudl abstract platform instead of using LastCreatedEngine
+        var engine = Engine.LastCreatedEngine;
+        if (!engine) {
+            throw new Error("Invalid engine. Unable to create a canvas.");
+        }
+        var canvas = engine.createCanvas(radius * 2, radius * 2);
         var context = canvas.getContext("2d");
         var image = context.getImageData(0, 0, radius * 2, radius * 2);
         var data = image.data;
@@ -317,6 +329,9 @@ var ColorPicker = /** @class */ (function (_super) {
         if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
             return false;
         }
+        if (this.isReadOnly) {
+            return true;
+        }
         this._pointerIsDown = true;
         this._pointerStartedOnSquare = false;
         this._pointerStartedOnWheel = false;
@@ -332,20 +347,22 @@ var ColorPicker = /** @class */ (function (_super) {
         }
         this._updateValueFromPointer(x, y);
         this._host._capturingControl[pointerId] = this;
-        this._lastPointerDownID = pointerId;
+        this._lastPointerDownId = pointerId;
         return true;
     };
     ColorPicker.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
         // Only listen to pointer move events coming from the last pointer to click on the element (To support dual vr controller interaction)
-        if (pointerId != this._lastPointerDownID) {
+        if (pointerId != this._lastPointerDownId) {
             return;
         }
-        // Invert transform
-        this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
-        var x = this._transformedPosition.x;
-        var y = this._transformedPosition.y;
-        if (this._pointerIsDown) {
-            this._updateValueFromPointer(x, y);
+        if (!this.isReadOnly) {
+            // Invert transform
+            this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
+            var x = this._transformedPosition.x;
+            var y = this._transformedPosition.y;
+            if (this._pointerIsDown) {
+                this._updateValueFromPointer(x, y);
+            }
         }
         _super.prototype._onPointerMove.call(this, target, coordinates, pointerId, pi);
     };
@@ -1380,5 +1397,5 @@ var ColorPicker = /** @class */ (function (_super) {
     return ColorPicker;
 }(Control));
 export { ColorPicker };
-_TypeStore.RegisteredTypes["BABYLON.GUI.ColorPicker"] = ColorPicker;
+RegisterClass("BABYLON.GUI.ColorPicker", ColorPicker);
 //# sourceMappingURL=colorpicker.js.map