Merge branch 'master' of https://github.com/barteq100/Babylon.js

dist/preview release/what's new.md

@@ -50,6 +50,10 @@
 - Added New Tools Tab in the inspector (env texture and screenshot tools so far) ([sebavan](http://www.github.com/sebavan))
 - Moved to gulp 4, updated dependencies to latest ([RaananW](https://github.com/RaananW))
 - Added EdgesLineRenderer to address [#4919](https://github.com/BabylonJS/Babylon.js/pull/4919) ([barteq100](https://github.com/barteq100))
+- 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))
 
 ### GUI
 - Added dead key support and before key add observable to InputText. [Doc](https://doc.babylonjs.com/how_to/gui#using-onbeforekeyaddobservable-for-extended-keyboard-layouts-and-input-masks)([theom](https://github.com/theom))

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

@@ -246,6 +246,9 @@ export class InputText extends Control implements IFocusableControl {
 
     /** @hidden */
     public onFocus(): void {
+        if(!this._isEnabled) {
+            return;
+        }
         this._scrollLeft = null;
         this._isFocused = true;
         this._blinkIsEven = false;
@@ -374,12 +377,12 @@ export class InputText extends Control implements IFocusableControl {
             // Background
             if (this._isFocused) {
                 if (this._focusedBackground) {
-                    context.fillStyle = this._focusedBackground;
+                    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._background;
+                context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
 
                 context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
             }
@@ -515,6 +518,9 @@ export class InputText extends Control implements IFocusableControl {
             this._markAsDirty();
             return true;
         }
+        if(!this._isEnabled) {
+            return false;
+        }
         this._host.focusedControl = this;
 
         return true;

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

@@ -121,7 +121,6 @@
 - Added `alphaCutOff` support for StandardMaterial ([deltakosh](https://github.com/deltakosh))
 - 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))
-
 ## 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))