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

gui/src/controls/checkbox.ts

@@ -81,10 +81,23 @@ module BABYLON.GUI {
             if (this._processMeasures(parentMeasure, context)) {
                 let actualWidth = this._currentMeasure.width - this._thickness;
                 let actualHeight = this._currentMeasure.height - this._thickness;
+
+                if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                    context.shadowColor = this.shadowColor;
+                    context.shadowBlur = this.shadowBlur;
+                    context.shadowOffsetX = this.shadowOffsetX;
+                    context.shadowOffsetY = this.shadowOffsetY;
+                }
                 
                 context.fillStyle = this._background;
                 context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);   
 
+                if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                    context.shadowBlur = 0;
+                    context.shadowOffsetX = 0;
+                    context.shadowOffsetY = 0;
+                }
+
                 if (this._isChecked) {
                     context.fillStyle = this.color;
                     let offsetWidth = actualWidth * this._checkSizeRatio;

gui/src/controls/colorpicker.ts

@@ -274,9 +274,24 @@ module BABYLON.GUI {
                     this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
                 }
 
+                this._updateSquareProps();
+
+                if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){                
+                    context.shadowColor = this.shadowColor;
+                    context.shadowBlur = this.shadowBlur;
+                    context.shadowOffsetX = this.shadowOffsetX;
+                    context.shadowOffsetY = this.shadowOffsetY; 
+                    
+                    context.fillRect(this._squareLeft, this._squareTop, this._squareSize, this._squareSize);
+                }
+
                 context.drawImage(this._colorWheelCanvas, left, top);
 
-                this._updateSquareProps();
+                if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                    context.shadowBlur = 0;
+                    context.shadowOffsetX = 0;
+                    context.shadowOffsetY = 0;
+                }
 
                 this._drawGradientSquare(this._h, 
                                         this._squareLeft,

gui/src/controls/container.ts

@@ -119,8 +119,21 @@ module BABYLON.GUI {
 
         protected _localDraw(context: CanvasRenderingContext2D): void {
             if (this._background) {
+                if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                    context.shadowColor = this.shadowColor;
+                    context.shadowBlur = this.shadowBlur;
+                    context.shadowOffsetX = this.shadowOffsetX;
+                    context.shadowOffsetY = this.shadowOffsetY;
+                }
+                
                 context.fillStyle = this._background;
                 context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                
+                if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                    context.shadowBlur = 0;
+                    context.shadowOffsetX = 0;
+                    context.shadowOffsetY = 0;
+                }
             }
         }
 

gui/src/controls/control.ts

@@ -49,6 +49,11 @@ module BABYLON.GUI {
         public isHitTestVisible = true;
         public isPointerBlocker = false;
         public isFocusInvisible = false;
+ 
+        public shadowOffsetX = 0;
+        public shadowOffsetY = 0;
+        public shadowBlur = 0;
+        public shadowColor = '#000'; 
 
         protected _linkOffsetX = new ValueAndUnit(0);
         protected _linkOffsetY = new ValueAndUnit(0);
@@ -683,7 +688,24 @@ module BABYLON.GUI {
 
         protected _clip( context: CanvasRenderingContext2D) {
             context.beginPath();
-            context.rect(this._currentMeasure.left ,this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+            
+            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                var shadowOffsetX = this.shadowOffsetX;
+                var shadowOffsetY = this.shadowOffsetY;
+                var shadowBlur = this.shadowBlur;
+                
+                var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur*2, 0);
+                var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur*2, 0);
+                var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur*2, 0);
+                var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur*2, 0);
+
+                context.rect(this._currentMeasure.left + leftShadowOffset, 
+                            this._currentMeasure.top + topShadowOffset, 
+                            this._currentMeasure.width + rightShadowOffset - leftShadowOffset, 
+                            this._currentMeasure.height + bottomShadowOffset - topShadowOffset);
+            } else {
+                context.rect(this._currentMeasure.left ,this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+            }
         }
 
         public _measure(): void {  
@@ -1032,7 +1054,7 @@ module BABYLON.GUI {
             let panel = new BABYLON.GUI.StackPanel("panel");        
             let isHorizontal = options ? options.isHorizontal : true;
             let controlFirst = options ? options.controlFirst : true;
-
+            
             panel.isVertical = !isHorizontal;
 
             let header = new BABYLON.GUI.TextBlock("header");
@@ -1053,6 +1075,11 @@ module BABYLON.GUI {
                 panel.addControl(control);
                 header.paddingRight = "5px";
             }
+            
+            header.shadowBlur = control.shadowBlur;
+            header.shadowColor = control.shadowColor;
+            header.shadowOffsetX = control.shadowOffsetX;
+            header.shadowOffsetY = control.shadowOffsetY;
 
             return panel;
         }

gui/src/controls/ellipse.ts

@@ -28,6 +28,13 @@ module BABYLON.GUI {
         protected _localDraw(context: CanvasRenderingContext2D): void {
             context.save();
 
+            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                context.shadowColor = this.shadowColor;
+                context.shadowBlur = this.shadowBlur;
+                context.shadowOffsetX = this.shadowOffsetX;
+                context.shadowOffsetY = this.shadowOffsetY;
+            }
+
             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);
 
@@ -37,6 +44,12 @@ module BABYLON.GUI {
                 context.fill();
             }
 
+            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                context.shadowBlur = 0;
+                context.shadowOffsetX = 0;
+                context.shadowOffsetY = 0;
+            }
+
             if (this._thickness) {
                 if (this.color) {
                     context.strokeStyle = this.color;

gui/src/controls/image.ts

@@ -198,6 +198,13 @@ module BABYLON.GUI {
         public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
             context.save();
 
+            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                context.shadowColor = this.shadowColor;
+                context.shadowBlur = this.shadowBlur;
+                context.shadowOffsetX = this.shadowOffsetX;
+                context.shadowOffsetY = this.shadowOffsetY;
+            }
+
             let x, y, width, height;
             if (this.cellId == -1) {
                 x = this._sourceLeft;

gui/src/controls/inputText.ts

@@ -274,6 +274,11 @@ module BABYLON.GUI {
             this._applyStates(context);
             if (this._processMeasures(parentMeasure, context)) {
                 
+                context.shadowColor = this.shadowColor;
+                context.shadowBlur = this.shadowBlur;
+                context.shadowOffsetX = this.shadowOffsetX;
+                context.shadowOffsetY = this.shadowOffsetY;
+
                 // Background
                 if (this._isFocused) {
                     if (this._focusedBackground) {
@@ -286,6 +291,10 @@ module BABYLON.GUI {
 
                     context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                 }
+                
+                context.shadowBlur = 0;
+                context.shadowOffsetX = 0;
+                context.shadowOffsetY = 0;
 
                 if (!this._fontOffset) {
                     this._fontOffset = Control._GetFontOffset(context.font);

gui/src/controls/line.ts

@@ -146,6 +146,13 @@ module BABYLON.GUI {
         public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
             context.save();
 
+            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                context.shadowColor = this.shadowColor;
+                context.shadowBlur = this.shadowBlur;
+                context.shadowOffsetX = this.shadowOffsetX;
+                context.shadowOffsetY = this.shadowOffsetY;
+            }
+
             this._applyStates(context);
             if (this._processMeasures(parentMeasure, context)) {
                 context.strokeStyle = this.color;

gui/src/controls/radioButton.ts

@@ -102,6 +102,13 @@ module BABYLON.GUI {
                 let actualWidth = this._currentMeasure.width - this._thickness;
                 let actualHeight = this._currentMeasure.height - this._thickness;
 
+                if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                    context.shadowColor = this.shadowColor;
+                    context.shadowBlur = this.shadowBlur;
+                    context.shadowOffsetX = this.shadowOffsetX;
+                    context.shadowOffsetY = this.shadowOffsetY;
+                }
+                
                 // Outer
                 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);
@@ -109,6 +116,12 @@ module BABYLON.GUI {
                 context.fillStyle = this._background;
                 context.fill();
 
+                if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                    context.shadowBlur = 0;
+                    context.shadowOffsetX = 0;
+                    context.shadowOffsetY = 0;
+                }
+
                 context.strokeStyle = this.color;
                 context.lineWidth = this._thickness;
 

gui/src/controls/rectangle.ts

@@ -45,6 +45,13 @@ module BABYLON.GUI {
 
         protected _localDraw(context: CanvasRenderingContext2D): void {
             context.save();
+            
+            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                context.shadowColor = this.shadowColor;
+                context.shadowBlur = this.shadowBlur;
+                context.shadowOffsetX = this.shadowOffsetX;
+                context.shadowOffsetY = this.shadowOffsetY;
+            }
 
             if (this._background) {
                 context.fillStyle = this._background;
@@ -58,6 +65,13 @@ module BABYLON.GUI {
             }
 
             if (this._thickness) {
+
+                if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                    context.shadowBlur = 0;
+                    context.shadowOffsetX = 0;
+                    context.shadowOffsetY = 0;
+                }
+
                 if (this.color) {
                     context.strokeStyle = this.color;
                 }
@@ -71,7 +85,7 @@ module BABYLON.GUI {
                                        this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
                 }
             }
-        
+
             context.restore();
         }
 

gui/src/controls/slider.ts

@@ -147,6 +147,11 @@ module BABYLON.GUI {
         public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
             context.save();
 
+            context.shadowColor = this.shadowColor;
+            context.shadowBlur = this.shadowBlur;
+            context.shadowOffsetX = this.shadowOffsetX;
+            context.shadowOffsetY = this.shadowOffsetY;
+
             this._applyStates(context);
             if (this._processMeasures(parentMeasure, context)) {
                 // Main bar
@@ -183,12 +188,20 @@ module BABYLON.GUI {
                     context.arc(left + thumbPosition, this._currentMeasure.top + this._currentMeasure.height / 2, effectiveThumbWidth / 2, 0, 2 * Math.PI);
                     context.fill();
 
+                    context.shadowBlur = 0;
+                    context.shadowOffsetX = 0;
+                    context.shadowOffsetY = 0;
+
                     context.strokeStyle = this._borderColor;
                     context.stroke();
                 }
                 else {
                     context.fillRect(left + thumbPosition - effectiveThumbWidth / 2, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
                     
+                    context.shadowBlur = 0;
+                    context.shadowOffsetX = 0;
+                    context.shadowOffsetY = 0;
+
                     context.strokeStyle = this._borderColor;
                     context.strokeRect(left + thumbPosition - effectiveThumbWidth / 2, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
                 }

gui/src/controls/textBlock.ts

@@ -106,6 +106,12 @@ module BABYLON.GUI {
                     break;
             }
 
+            if(this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY){
+                context.shadowColor = this.shadowColor;
+                context.shadowBlur = this.shadowBlur;
+                context.shadowOffsetX = this.shadowOffsetX;
+                context.shadowOffsetY = this.shadowOffsetY;
+            }
 
             context.fillText(text, this._currentMeasure.left + x, y);
         }

gui/src/controls/virtualKeyboard.ts

@@ -33,7 +33,6 @@ module BABYLON.GUI {
 
         private _createKey(key: string, propertySet: Nullable<KeyPropertySet>) {
             var button = Button.CreateSimpleButton(key, key);
-            
            
             button.width = propertySet && propertySet.width ? propertySet.width : this.defaultButtonWidth;
             button.height = propertySet && propertySet.height ? propertySet.height : this.defaultButtonHeight;
@@ -46,6 +45,11 @@ module BABYLON.GUI {
         
             button.thickness = 0;
             button.isFocusInvisible = true;
+
+            button.shadowColor = this.shadowColor;
+            button.shadowBlur = this.shadowBlur;
+            button.shadowOffsetX = this.shadowOffsetX;
+            button.shadowOffsetY = this.shadowOffsetY;
         
             button.onPointerUpObservable.add(() => {
                 this.onKeyPressObservable.notifyObservers(key);