gui: added checkbox (#2230)

Tools/Gulp/config.json

@@ -1305,6 +1305,7 @@
                     "../../gui/src/controls/ellipse.ts",
                     "../../gui/src/controls/line.ts",
                     "../../gui/src/controls/slider.ts",
+                    "../../gui/src/controls/checkbox.ts",
                     "../../gui/src/controls/textBlock.ts",
                     "../../gui/src/controls/image.ts",
                     "../../gui/src/controls/button.ts"

dist/preview release/gui/babylon.gui.d.ts

@@ -249,6 +249,10 @@ declare module BABYLON.GUI {
             height: number;
             descent: number;
         };
+        static AddHeader(control: Control, text: string, size: string | number, options: {
+            isHorizontal: boolean;
+            controlFirst: boolean;
+        }): StackPanel;
     }
 }
 
@@ -262,6 +266,7 @@ declare module BABYLON.GUI {
         background: string;
         readonly children: Control[];
         constructor(name?: string);
+        getChildByName(name: string): Control;
         containsControl(control: Control): boolean;
         addControl(control: Control): Container;
         removeControl(control: Control): Container;
@@ -383,6 +388,26 @@ declare module BABYLON.GUI {
 }
 
 
+declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
+declare module BABYLON.GUI {
+    class Checkbox extends Control {
+        name: string;
+        private _isChecked;
+        private _background;
+        private _checkSizeRatio;
+        private _thickness;
+        thickness: number;
+        onIsCheckedChangedObservable: Observable<boolean>;
+        checkSizeRatio: number;
+        background: string;
+        isChecked: boolean;
+        constructor(name?: string);
+        _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _onPointerDown(coordinates: Vector2): void;
+    }
+}
+
+
 declare module BABYLON.GUI {
     class TextBlock extends Control {
         name: string;

dist/preview release/gui/babylon.gui.js

@@ -553,6 +553,7 @@ var BABYLON;
                 this._fontSize = new GUI.ValueAndUnit(18, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
                 this._width = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
                 this._height = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
+                this._color = "white";
                 this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
                 this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
                 this._isDirty = true;
@@ -753,7 +754,6 @@ var BABYLON;
                     }
                     if (this._height.fromString(value)) {
                         this._markAsDirty();
-                        this._fontSet = true;
                     }
                 },
                 enumerable: true,
@@ -1330,6 +1330,32 @@ var BABYLON;
                 return result;
             };
             ;
+            Control.AddHeader = function (control, text, size, options) {
+                var panel = new BABYLON.GUI.StackPanel("panel");
+                var isHorizontal = options ? options.isHorizontal : true;
+                var controlFirst = options ? options.controlFirst : false;
+                panel.isVertical = !isHorizontal;
+                var header = new BABYLON.GUI.TextBlock("header");
+                header.text = text;
+                header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+                if (isHorizontal) {
+                    header.width = size;
+                }
+                else {
+                    header.height = size;
+                }
+                if (controlFirst) {
+                    panel.addControl(control);
+                    panel.addControl(header);
+                    header.marginLeft = "5px";
+                }
+                else {
+                    panel.addControl(header);
+                    panel.addControl(control);
+                    header.marginRight = "5px";
+                }
+                return panel;
+            };
             return Control;
         }());
         // Statics
@@ -1391,6 +1417,15 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Container.prototype.getChildByName = function (name) {
+                for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
+                    var child = _a[_i];
+                    if (child.name === name) {
+                        return child;
+                    }
+                }
+                return null;
+            };
             Container.prototype.containsControl = function (control) {
                 return this._children.indexOf(control) !== -1;
             };
@@ -2192,6 +2227,126 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var DOMImage = Image;
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var Checkbox = (function (_super) {
+            __extends(Checkbox, _super);
+            function Checkbox(name) {
+                var _this = _super.call(this, name) || this;
+                _this.name = name;
+                _this._isChecked = false;
+                _this._background = "black";
+                _this._checkSizeRatio = 0.8;
+                _this._thickness = 1;
+                _this.onIsCheckedChangedObservable = new BABYLON.Observable();
+                _this.isPointerBlocker = true;
+                return _this;
+            }
+            Object.defineProperty(Checkbox.prototype, "thickness", {
+                get: function () {
+                    return this._thickness;
+                },
+                set: function (value) {
+                    if (this._thickness === value) {
+                        return;
+                    }
+                    this._thickness = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Checkbox.prototype, "checkSizeRatio", {
+                get: function () {
+                    return this._checkSizeRatio;
+                },
+                set: function (value) {
+                    value = Math.max(Math.min(1, value), 0);
+                    if (this._checkSizeRatio === value) {
+                        return;
+                    }
+                    this._checkSizeRatio = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Checkbox.prototype, "background", {
+                get: function () {
+                    return this._background;
+                },
+                set: function (value) {
+                    if (this._background === value) {
+                        return;
+                    }
+                    this._background = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Checkbox.prototype, "isChecked", {
+                get: function () {
+                    return this._isChecked;
+                },
+                set: function (value) {
+                    if (this._isChecked === value) {
+                        return;
+                    }
+                    this._isChecked = value;
+                    this._markAsDirty();
+                    this.onIsCheckedChangedObservable.notifyObservers(value);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Checkbox.prototype._draw = function (parentMeasure, context) {
+                context.save();
+                this._applyStates(context);
+                if (this._processMeasures(parentMeasure, context)) {
+                    var actualWidth = this._currentMeasure.width - this._thickness;
+                    var actualHeight = this._currentMeasure.height - this._thickness;
+                    context.fillStyle = this._background;
+                    context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
+                    if (this._isChecked) {
+                        context.fillStyle = this.color;
+                        var offsetWidth = actualWidth * this._checkSizeRatio;
+                        var offseHeight = actualHeight * this._checkSizeRatio;
+                        context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offseHeight) / 2, offsetWidth, offseHeight);
+                    }
+                    context.strokeStyle = this.color;
+                    context.lineWidth = this._thickness;
+                    context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
+                }
+                context.restore();
+            };
+            // Events
+            Checkbox.prototype._onPointerDown = function (coordinates) {
+                this.isChecked = !this.isChecked;
+                _super.prototype._onPointerDown.call(this, coordinates);
+            };
+            return Checkbox;
+        }(GUI.Control));
+        GUI.Checkbox = Checkbox;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=checkbox.js.map
+
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 var BABYLON;
 (function (BABYLON) {
     var GUI;

gui/src/controls/checkbox.ts

@@ -0,0 +1,110 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+var DOMImage = Image;
+
+module BABYLON.GUI {
+    export class Checkbox extends Control {
+        private _isChecked = false;
+        private _background = "black";   
+        private _checkSizeRatio = 0.8;
+        private _thickness = 1;
+        
+        public get thickness(): number {
+            return this._thickness;
+        }
+
+        public set thickness(value: number) {
+            if (this._thickness === value) {
+                return;
+            }
+
+            this._thickness = value;
+            this._markAsDirty();
+        }           
+
+        public onIsCheckedChangedObservable = new Observable<boolean>();
+
+        public get checkSizeRatio(): number {
+            return this._checkSizeRatio;
+        }
+
+        public set checkSizeRatio(value: number) {
+            value = Math.max(Math.min(1, value), 0);
+
+            if (this._checkSizeRatio === value) {
+                return;
+            }
+
+            this._checkSizeRatio = value;
+            this._markAsDirty();
+        }             
+
+        public get background(): string {
+            return this._background;
+        }
+
+        public set background(value: string) {
+            if (this._background === value) {
+                return;
+            }
+
+            this._background = value;
+            this._markAsDirty();
+        }     
+
+        public get isChecked(): boolean {
+            return this._isChecked;
+        }
+
+        public set isChecked(value: boolean) {
+            if (this._isChecked === value) {
+                return;
+            }
+
+            this._isChecked = value;
+            this._markAsDirty();
+
+            this.onIsCheckedChangedObservable.notifyObservers(value);
+        }                             
+
+        constructor(public name?: string) {
+            super(name);
+
+            this.isPointerBlocker = true;
+        }
+
+        public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+            context.save();
+
+            this._applyStates(context);
+            if (this._processMeasures(parentMeasure, context)) {
+                let actualWidth = this._currentMeasure.width - this._thickness;
+                let actualHeight = this._currentMeasure.height - this._thickness;
+                
+                context.fillStyle = this._background;
+                context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);   
+
+                if (this._isChecked) {
+                    context.fillStyle = this.color;
+                    let offsetWidth = actualWidth * this._checkSizeRatio;
+                    let offseHeight = actualHeight * this._checkSizeRatio;
+
+                    context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offseHeight) / 2, offsetWidth, offseHeight);
+                }
+
+                context.strokeStyle = this.color;
+                context.lineWidth = this._thickness;
+
+                context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);                       
+            }
+            context.restore();
+        }
+
+        // Events
+        protected _onPointerDown(coordinates: Vector2): void {
+            this.isChecked = !this.isChecked;
+
+            super._onPointerDown(coordinates);
+        }
+    }    
+}

gui/src/controls/container.ts

@@ -27,6 +27,16 @@ module BABYLON.GUI {
             super(name);
         }
 
+        public getChildByName(name: string) {
+            for (var child of this._children) {
+                if (child.name === name) {
+                    return child;
+                }
+            }
+
+            return null;
+        }
+
         public containsControl(control: Control): boolean {
             return this._children.indexOf(control) !== -1;
         }

gui/src/controls/control.ts

@@ -14,7 +14,7 @@ module BABYLON.GUI {
         public _height = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
         private _lastMeasuredFont: string;
         protected _fontOffset: {ascent: number, height: number, descent: number};
-        private _color: string;
+        private _color = "white";
         protected _horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
         protected _verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
         private _isDirty = true;
@@ -219,7 +219,6 @@ module BABYLON.GUI {
 
             if (this._height.fromString(value)) {
                 this._markAsDirty();
-                this._fontSet = true;
             }
         }   
 
@@ -840,5 +839,34 @@ module BABYLON.GUI {
 
             return result;
         };
+
+        public static AddHeader(control: Control, text: string, size: string | number, options: { isHorizontal: boolean, controlFirst: boolean }): StackPanel {
+            let panel = new BABYLON.GUI.StackPanel("panel");        
+            let isHorizontal = options ? options.isHorizontal : true;
+            let controlFirst = options ? options.controlFirst : false;
+
+            panel.isVertical = !isHorizontal;
+
+            let header = new BABYLON.GUI.TextBlock("header");
+            header.text = text;
+            header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+            if (isHorizontal) {
+                header.width = size;
+            } else {
+                header.height = size;
+            }
+
+            if (controlFirst) {
+                panel.addControl(control);
+                panel.addControl(header); 
+                header.marginLeft = "5px";
+            } else {
+                panel.addControl(header); 
+                panel.addControl(control);
+                header.marginRight = "5px";
+            }
+
+            return panel;
+        }
     }    
 }