Merge pull request #5358 from BabylonJS/imagebasedslider

Imagebasedslider

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

@@ -34,6 +34,27 @@ export class ImageBasedSlider extends BaseSlider {
     }
 
     /**
+     * Gets or sets the image used to render the value bar
+     */
+    public get valueBarImage(): Image {
+        return this._valueBarImage;
+    }
+
+    public set valueBarImage(value: Image) {
+        if (this._valueBarImage === value) {
+            return;
+        }
+
+        this._valueBarImage = value;
+
+        if (value && !value.isLoaded) {
+            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());
+        }
+
+        this._markAsDirty();
+    }
+
+    /**
      * Gets or sets the image used to render the thumb
      */
     public get thumbImage(): Image {
@@ -82,12 +103,30 @@ export class ImageBasedSlider extends BaseSlider {
             // Background
             if (this._backgroundImage) {
                 this._tempMeasure.copyFromFloats(left, top, width, height);
+                if (this.isThumbClamped) {
+                    if (this.isVertical) {
+                        this._tempMeasure.height += this._effectiveThumbThickness;
+                    } else {
+                        this._tempMeasure.width += this._effectiveThumbThickness;
+                    }
+
+                }
                 this._backgroundImage._draw(this._tempMeasure, context);
             }
 
             // Bar
             if (this._valueBarImage) {
-
+                if (this.isVertical) {
+                    this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition);
+                    if (this.isThumbClamped) {
+                        this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, this._currentMeasure.height - thumbPosition);
+                    } else {
+                        this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition);
+                    }
+                } else {
+                    this._tempMeasure.copyFromFloats(left, top, thumbPosition, height);
+                }
+                this._valueBarImage._draw(this._tempMeasure, context);
             }
 
             // Thumb

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

@@ -1,24 +1,24 @@
-export * from "./button";
-export * from "./checkbox";
-export * from "./colorpicker";
-export * from "./container";
-export * from "./control";
-export * from "./ellipse";
-export * from "./grid";
-export * from "./image";
-export * from "./inputText";
-export * from "./inputPassword";
-export * from "./line";
-export * from "./multiLine";
-export * from "./radioButton";
-export * from "./stackPanel";
-export * from "./selector";
-export * from "./textBlock";
-export * from "./baseSlider";
-export * from "./slider";
-export * from "./imageBasedSlider";
-export * from "./virtualKeyboard";
-export * from "./rectangle";
-export * from "./displayGrid";
-
+export * from "./button";
+export * from "./checkbox";
+export * from "./colorpicker";
+export * from "./container";
+export * from "./control";
+export * from "./ellipse";
+export * from "./grid";
+export * from "./image";
+export * from "./inputText";
+export * from "./inputPassword";
+export * from "./line";
+export * from "./multiLine";
+export * from "./radioButton";
+export * from "./stackPanel";
+export * from "./selector";
+export * from "./textBlock";
+export * from "./virtualKeyboard";
+export * from "./rectangle";
+export * from "./displayGrid";
+export * from "./baseSlider";
+export * from "./slider";
+export * from "./imageBasedSlider";
+
 export * from "./statics";