Merge pull request #3445 from JeanPhilippeKernel/master

Fixed slider thumbWith, #3359

gui/src/controls/slider.ts

@@ -10,6 +10,7 @@ module BABYLON.GUI {
         private _borderColor = "white";
         private _barOffset = new ValueAndUnit(5, ValueAndUnit.UNITMODE_PIXEL, false);
         private _isThumbCircle = false;
+        private _isThumbClamped = false;
 
         public onValueChangedObservable = new Observable<number>();
 
@@ -111,13 +112,13 @@ module BABYLON.GUI {
 
         public set value(value: number) {
             value = Math.max(Math.min(value, this._maximum), this._minimum);
+
             if (this._value === value) {
                 return;
             }
 
             this._value = value;
             this._markAsDirty();
-
             this.onValueChangedObservable.notifyObservers(this._value);
         }
 
@@ -134,6 +135,22 @@ module BABYLON.GUI {
             this._markAsDirty();
         }
 
+
+        public get isThumbClamped(): boolean {
+            return this._isThumbClamped;
+        }
+
+
+        public set isThumbClamped(value: boolean) {
+            if (this._isThumbClamped === value) {
+                return;
+            }
+
+            this._isThumbClamped = value;
+            this._markAsDirty();
+        }
+
+
         constructor(public name?: string) {
             super(name);
 
@@ -153,33 +170,38 @@ module BABYLON.GUI {
                 var effectiveThumbWidth;
                 var effectiveBarOffset;
 
-                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._thumbWidth.isPixel) {
                     effectiveThumbWidth = Math.min(this._thumbWidth.getValue(this._host), this._currentMeasure.width);
-                } else {
+                }
+                else {
                     effectiveThumbWidth = this._currentMeasure.width * this._thumbWidth.getValue(this._host);
                 }
 
                 if (this._barOffset.isPixel) {
                     effectiveBarOffset = Math.min(this._barOffset.getValue(this._host), this._currentMeasure.height);
-                } else {
+                }
+                else {
                     effectiveBarOffset = this._currentMeasure.height * this._barOffset.getValue(this._host);
                 }
 
+                if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+                    context.shadowColor = this.shadowColor;
+                    context.shadowBlur = this.shadowBlur;
+                    context.shadowOffsetX = this.shadowOffsetX;
+                    context.shadowOffsetY = this.shadowOffsetY;
+                }
 
-                var left = this._currentMeasure.left + effectiveThumbWidth / 2;
+                var left = this._currentMeasure.left;
                 var width = this._currentMeasure.width - effectiveThumbWidth;
-                var thumbPosition = (this._value - this._minimum) / (this._maximum - this._minimum) * width;
-
-                // Bar
+                var thumbPosition = ((this._value - this._minimum) / (this._maximum - this._minimum)) * width;
+                
                 context.fillStyle = this._background;
-                context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, width, this._currentMeasure.height - effectiveBarOffset * 2);
+                if (this.isThumbClamped) {
+                    context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, width + effectiveThumbWidth, this._currentMeasure.height - effectiveBarOffset * 2);
+                }
+                else {
+                    context.fillRect(left + (effectiveThumbWidth / 2), this._currentMeasure.top + effectiveBarOffset, width, this._currentMeasure.height - effectiveBarOffset * 2);
+                }
 
                 if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                     context.shadowBlur = 0;
@@ -188,7 +210,12 @@ module BABYLON.GUI {
                 }
 
                 context.fillStyle = this.color;
-                context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, thumbPosition, this._currentMeasure.height - effectiveBarOffset * 2);
+                if (this.isThumbClamped) {
+                    context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, width + effectiveThumbWidth, this._currentMeasure.height - effectiveBarOffset * 2);
+                }
+                else {
+                    context.fillRect(left + (effectiveThumbWidth / 2), this._currentMeasure.top + effectiveBarOffset, width, this._currentMeasure.height - effectiveBarOffset * 2);
+                }
 
                 if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                     context.shadowColor = this.shadowColor;
@@ -197,10 +224,9 @@ module BABYLON.GUI {
                     context.shadowOffsetY = this.shadowOffsetY;
                 }
 
-                // Thumb
                 if (this._isThumbCircle) {
                     context.beginPath();
-                    context.arc(left + thumbPosition, this._currentMeasure.top + this._currentMeasure.height / 2, effectiveThumbWidth / 2, 0, 2 * Math.PI);
+                    context.arc(left + thumbPosition + (effectiveThumbWidth / 2), this._currentMeasure.top + this._currentMeasure.height / 2, effectiveThumbWidth / 2, 0, 2 * Math.PI);
                     context.fill();
 
                     if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -212,8 +238,9 @@ module BABYLON.GUI {
                     context.strokeStyle = this._borderColor;
                     context.stroke();
                 }
+
                 else {
-                    context.fillRect(left + thumbPosition - effectiveThumbWidth / 2, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
+                    context.fillRect(left + thumbPosition, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
 
                     if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                         context.shadowBlur = 0;
@@ -222,11 +249,12 @@ module BABYLON.GUI {
                     }
 
                     context.strokeStyle = this._borderColor;
-                    context.strokeRect(left + thumbPosition - effectiveThumbWidth / 2, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
+                    context.strokeRect(left + thumbPosition, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
                 }
             }
             context.restore();
         }
+       
 
         // Events
         private _pointerIsDown = false;