Moved isEnabled to Control.

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

@@ -107,7 +107,7 @@ export class Checkbox extends Control {
                 context.shadowOffsetY = this.shadowOffsetY;
             }
 
-            context.fillStyle = this._background;
+            context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
             context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
 
             if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -117,7 +117,7 @@ export class Checkbox extends Control {
             }
 
             if (this._isChecked) {
-                context.fillStyle = this.color;
+                context.fillStyle = this._isEnabled ? this.color : this._disabledColor;
                 let offsetWidth = actualWidth * this._checkSizeRatio;
                 let offseHeight = actualHeight * this._checkSizeRatio;
 

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

@@ -76,7 +76,8 @@ export class Control {
     private _enterCount = -1;
     private _doNotRender = false;
     private _downPointerIds: { [id: number]: boolean } = {};
-
+    protected _isEnabled = true;
+    protected _disabledColor = "#9a9a9a";
     /** @hidden */
     public _tag: any;
 
@@ -696,6 +697,32 @@ export class Control {
         return this._currentMeasure.top + this._currentMeasure.height / 2;
     }
 
+    /** Gets or sets if control is Enabled*/
+    public get isEnabled(): boolean {
+        return this._isEnabled;
+    }
+
+    public set isEnabled(value: boolean) {
+        if(this._isEnabled === value){
+            return;
+        }
+
+        this._isEnabled = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets background color of control if it's disabled*/
+    public get disabledColor(): string {
+        return this._disabledColor;
+    }
+
+    public set disabledColor(value: string) {
+        if(this._disabledColor === value){
+            return;
+        }
+
+        this._disabledColor = value;
+        this._markAsDirty();
+    }
     // Functions
 
     /**
@@ -1153,6 +1180,9 @@ export class Control {
 
     /** @hidden */
     public _processPicking(x: number, y: number, type: number, pointerId: number, buttonIndex: number): boolean {
+        if(!this._isEnabled){
+            return false;
+        }
         if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
             return false;
         }
@@ -1175,6 +1205,9 @@ export class Control {
 
     /** @hidden */
     public _onPointerEnter(target: Control): boolean {
+        if(!this._isEnabled){
+            return false;
+        }
         if (this._enterCount > 0) {
             return false;
         }
@@ -1193,6 +1226,9 @@ export class Control {
 
     /** @hidden */
     public _onPointerOut(target: Control): void {
+        if(!this._isEnabled){
+            return;
+        }
         this._enterCount = 0;
 
         var canNotify: boolean = this.onPointerOutObservable.notifyObservers(this, -1, target, this);
@@ -1223,6 +1259,9 @@ export class Control {
 
     /** @hidden */
     public _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void {
+        if(!this._isEnabled){
+            return;
+        }
         this._downCount = 0;
 
         delete this._downPointerIds[pointerId];
@@ -1249,6 +1288,9 @@ export class Control {
 
     /** @hidden */
     public _processObservables(type: number, x: number, y: number, pointerId: number, buttonIndex: number): boolean {
+        if(!this._isEnabled){
+            return false;
+        }
         this._dummyVector2.copyFromFloats(x, y);
         if (type === PointerEventTypes.POINTERMOVE) {
             this._onPointerMove(this, this._dummyVector2);

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

@@ -152,7 +152,7 @@ export class DisplayGrid extends Control {
         
         this._applyStates(context);
 
-        if (this._processMeasures(parentMeasure, context)) {
+        if (this._isEnabled && this._processMeasures(parentMeasure, context)) {
 
             if (this._background) {
                 context.fillStyle = this._background;

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

@@ -27,7 +27,6 @@ export class InputText extends Control implements IFocusableControl {
     private _deadKey = false;
     private _addKey = true;
     private _currentKey = "";
-    private _isEnabled = true;
 
     /** Gets or sets a string representing the message displayed on mobile when the control gets the focus */
     public promptMessage = "Please enter text:";
@@ -222,19 +221,6 @@ export class InputText extends Control implements IFocusableControl {
 
         this.autoStretchWidth = false;
     }
-    /** Gets or sets if control is focusable / editable*/
-    public get isEnabled(): boolean {
-        return this._isEnabled;
-    }
-
-    public set isEnabled(value: boolean) {
-        if(this._isEnabled === value){
-            return;
-        }
-
-        this._isEnabled = value;
-        this._markAsDirty();
-    }
 
     /**
      * Creates a new InputText
@@ -391,12 +377,12 @@ export class InputText extends Control implements IFocusableControl {
             // Background
             if (this._isFocused) {
                 if (this._focusedBackground) {
-                    context.fillStyle = this._isEnabled ?  this._focusedBackground : "#9a9a9a";
+                    context.fillStyle = this._isEnabled ?  this._focusedBackground : this._disabledColor;
 
                     context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                 }
             } else if (this._background) {
-                context.fillStyle = this._isEnabled ? this._background : "#9a9a9a";
+                context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
 
                 context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
             }

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

@@ -128,7 +128,7 @@ export class RadioButton extends Control {
             Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2,
                 this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, context);
 
-            context.fillStyle = this._background;
+            context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
             context.fill();
 
             if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -144,7 +144,7 @@ export class RadioButton extends Control {
 
             // Inner
             if (this._isChecked) {
-                context.fillStyle = this.color;
+                context.fillStyle = this._isEnabled ? this.color : this._disabledColor;
                 let offsetWidth = actualWidth * this._checkSizeRatio;
                 let offseHeight = actualHeight * this._checkSizeRatio;
 

what's new.md

@@ -122,6 +122,9 @@
 - New `serialize` and `Parse` functions for SSAO2 Rendering Pipeline ([julien-moreau](https://github.com/julien-moreau))
 - Added `furOcclusion` property to FurMaterial to control the occlusion strength ([julien-moreau](https://github.com/julien-moreau))
 - Added `isEnabled` property to InputText to control if input can be focused ([barteq100](https://github.com/barteq100)) 
+- Moved `isEnabled` property to Control ([barteq100](https://github.com/barteq100))
+- Added `isEnabled` property handling to Checkbox, DisplayGrid, InputText and RadioButton ([barteq100](https://github.com/barteq100))
+- Added `disabledColor` property to Control to set color of disabled controls ([barteq100](https://github.com/barteq100))
 ## Bug fixes
 
 - `setPivotMatrix` was not setting pivot correctly. This is now fixed. We also introduced a new `setPreTransformMatrix` to reproduce the sometimes needed behavior of the previous `setPivotMatrix` function ([deltakosh](https://github.com/deltakosh))