@babylonjs/gui 5.19.0 → 5.22.0

package/2D/controls/scrollViewers/scrollViewer.js

@@ -1,4 +1,4 @@
-import { __decorate, __extends } from "tslib";
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
 import { Rectangle } from "../rectangle.js";
 import { Grid } from "../grid.js";
 import { Control } from "../control.js";
@@ -10,165 +10,138 @@ import { serialize } from "@babylonjs/core/Misc/decorators.js";
 /**
  * Class used to hold a viewer window and sliders in a grid
  */
-var ScrollViewer = /** @class */ (function (_super) {
-    __extends(ScrollViewer, _super);
+export class ScrollViewer extends Rectangle {
     /**
      * Creates a new ScrollViewer
      * @param name of ScrollViewer
      * @param isImageBased
      */
-    function ScrollViewer(name, isImageBased) {
-        var _this = _super.call(this, name) || this;
-        _this._barSize = 20;
-        _this._pointerIsOver = false;
-        _this._wheelPrecision = 0.05;
-        _this._thumbLength = 0.5;
-        _this._thumbHeight = 1;
-        _this._barImageHeight = 1;
-        _this._horizontalBarImageHeight = 1;
-        _this._verticalBarImageHeight = 1;
-        _this._oldWindowContentsWidth = 0;
-        _this._oldWindowContentsHeight = 0;
-        _this._forceHorizontalBar = false;
-        _this._forceVerticalBar = false;
-        _this._useImageBar = isImageBased ? isImageBased : false;
-        _this.onDirtyObservable.add(function () {
-            _this._horizontalBarSpace.color = _this.color;
-            _this._verticalBarSpace.color = _this.color;
-            _this._dragSpace.color = _this.color;
+    constructor(name, isImageBased) {
+        super(name);
+        this._barSize = 20;
+        this._pointerIsOver = false;
+        this._wheelPrecision = 0.05;
+        this._thumbLength = 0.5;
+        this._thumbHeight = 1;
+        this._barImageHeight = 1;
+        this._horizontalBarImageHeight = 1;
+        this._verticalBarImageHeight = 1;
+        this._oldWindowContentsWidth = 0;
+        this._oldWindowContentsHeight = 0;
+        this._forceHorizontalBar = false;
+        this._forceVerticalBar = false;
+        this._useImageBar = isImageBased ? isImageBased : false;
+        this.onDirtyObservable.add(() => {
+            this._horizontalBarSpace.color = this.color;
+            this._verticalBarSpace.color = this.color;
+            this._dragSpace.color = this.color;
         });
-        _this.onPointerEnterObservable.add(function () {
-            _this._pointerIsOver = true;
+        this.onPointerEnterObservable.add(() => {
+            this._pointerIsOver = true;
         });
-        _this.onPointerOutObservable.add(function () {
-            _this._pointerIsOver = false;
+        this.onPointerOutObservable.add(() => {
+            this._pointerIsOver = false;
         });
-        _this._grid = new Grid();
-        if (_this._useImageBar) {
-            _this._horizontalBar = new ImageScrollBar();
-            _this._verticalBar = new ImageScrollBar();
+        this._grid = new Grid();
+        if (this._useImageBar) {
+            this._horizontalBar = new ImageScrollBar();
+            this._verticalBar = new ImageScrollBar();
         }
         else {
-            _this._horizontalBar = new ScrollBar();
-            _this._verticalBar = new ScrollBar();
-        }
-        _this._window = new _ScrollViewerWindow("scrollViewer_window");
-        _this._window.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        _this._window.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        _this._grid.addColumnDefinition(1);
-        _this._grid.addColumnDefinition(0, true);
-        _this._grid.addRowDefinition(1);
-        _this._grid.addRowDefinition(0, true);
-        _super.prototype.addControl.call(_this, _this._grid);
-        _this._grid.addControl(_this._window, 0, 0);
-        _this._verticalBarSpace = new Rectangle();
-        _this._verticalBarSpace.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        _this._verticalBarSpace.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        _this._verticalBarSpace.thickness = 1;
-        _this._grid.addControl(_this._verticalBarSpace, 0, 1);
-        _this._addBar(_this._verticalBar, _this._verticalBarSpace, true, Math.PI);
-        _this._horizontalBarSpace = new Rectangle();
-        _this._horizontalBarSpace.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        _this._horizontalBarSpace.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        _this._horizontalBarSpace.thickness = 1;
-        _this._grid.addControl(_this._horizontalBarSpace, 1, 0);
-        _this._addBar(_this._horizontalBar, _this._horizontalBarSpace, false, 0);
-        _this._dragSpace = new Rectangle();
-        _this._dragSpace.thickness = 1;
-        _this._grid.addControl(_this._dragSpace, 1, 1);
+            this._horizontalBar = new ScrollBar();
+            this._verticalBar = new ScrollBar();
+        }
+        this._window = new _ScrollViewerWindow("scrollViewer_window");
+        this._window.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._window.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        this._grid.addColumnDefinition(1);
+        this._grid.addColumnDefinition(0, true);
+        this._grid.addRowDefinition(1);
+        this._grid.addRowDefinition(0, true);
+        super.addControl(this._grid);
+        this._grid.addControl(this._window, 0, 0);
+        this._verticalBarSpace = new Rectangle();
+        this._verticalBarSpace.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._verticalBarSpace.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        this._verticalBarSpace.thickness = 1;
+        this._grid.addControl(this._verticalBarSpace, 0, 1);
+        this._addBar(this._verticalBar, this._verticalBarSpace, true, Math.PI);
+        this._horizontalBarSpace = new Rectangle();
+        this._horizontalBarSpace.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._horizontalBarSpace.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        this._horizontalBarSpace.thickness = 1;
+        this._grid.addControl(this._horizontalBarSpace, 1, 0);
+        this._addBar(this._horizontalBar, this._horizontalBarSpace, false, 0);
+        this._dragSpace = new Rectangle();
+        this._dragSpace.thickness = 1;
+        this._grid.addControl(this._dragSpace, 1, 1);
         // Colors
-        if (!_this._useImageBar) {
-            _this.barColor = "grey";
-            _this.barBackground = "transparent";
-        }
-        return _this;
-    }
-    Object.defineProperty(ScrollViewer.prototype, "horizontalBar", {
-        /**
-         * Gets the horizontal scrollbar
-         */
-        get: function () {
-            return this._horizontalBar;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "verticalBar", {
-        /**
-         * Gets the vertical scrollbar
-         */
-        get: function () {
-            return this._verticalBar;
-        },
-        enumerable: false,
-        configurable: true
-    });
+        if (!this._useImageBar) {
+            this.barColor = "grey";
+            this.barBackground = "transparent";
+        }
+    }
+    /**
+     * Gets the horizontal scrollbar
+     */
+    get horizontalBar() {
+        return this._horizontalBar;
+    }
+    /**
+     * Gets the vertical scrollbar
+     */
+    get verticalBar() {
+        return this._verticalBar;
+    }
     /**
      * Adds a new control to the current container
      * @param control defines the control to add
      * @returns the current container
      */
-    ScrollViewer.prototype.addControl = function (control) {
+    addControl(control) {
         if (!control) {
             return this;
         }
         this._window.addControl(control);
         return this;
-    };
+    }
     /**
      * Removes a control from the current container
      * @param control defines the control to remove
      * @returns the current container
      */
-    ScrollViewer.prototype.removeControl = function (control) {
+    removeControl(control) {
         this._window.removeControl(control);
         return this;
-    };
-    Object.defineProperty(ScrollViewer.prototype, "children", {
-        /** Gets the list of children */
-        get: function () {
-            return this._window.children;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ScrollViewer.prototype._flagDescendantsAsMatrixDirty = function () {
-        for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
-            var child = _a[_i];
+    }
+    /** Gets the list of children */
+    get children() {
+        return this._window.children;
+    }
+    _flagDescendantsAsMatrixDirty() {
+        for (const child of this._children) {
             child._markMatrixAsDirty();
         }
-    };
-    Object.defineProperty(ScrollViewer.prototype, "freezeControls", {
-        /**
-         * Freezes or unfreezes the controls in the window.
-         * When controls are frozen, the scroll viewer can render a lot more quickly but updates to positions/sizes of controls
-         * are not taken into account. If you want to change positions/sizes, unfreeze, perform the changes then freeze again
-         */
-        get: function () {
-            return this._window.freezeControls;
-        },
-        set: function (value) {
-            this._window.freezeControls = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "bucketWidth", {
-        /** Gets the bucket width */
-        get: function () {
-            return this._window.bucketWidth;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "bucketHeight", {
-        /** Gets the bucket height */
-        get: function () {
-            return this._window.bucketHeight;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    }
+    /**
+     * Freezes or unfreezes the controls in the window.
+     * When controls are frozen, the scroll viewer can render a lot more quickly but updates to positions/sizes of controls
+     * are not taken into account. If you want to change positions/sizes, unfreeze, perform the changes then freeze again
+     */
+    get freezeControls() {
+        return this._window.freezeControls;
+    }
+    set freezeControls(value) {
+        this._window.freezeControls = value;
+    }
+    /** Gets the bucket width */
+    get bucketWidth() {
+        return this._window.bucketWidth;
+    }
+    /** Gets the bucket height */
+    get bucketHeight() {
+        return this._window.bucketHeight;
+    }
     /**
      * Sets the bucket sizes.
      * When freezeControls is true, setting a non-zero bucket size will improve performances by updating only
@@ -180,383 +153,310 @@ var ScrollViewer = /** @class */ (function (_super) {
      * @param width width of the bucket
      * @param height height of the bucket
      */
-    ScrollViewer.prototype.setBucketSizes = function (width, height) {
+    setBucketSizes(width, height) {
         this._window.setBucketSizes(width, height);
-    };
-    Object.defineProperty(ScrollViewer.prototype, "forceHorizontalBar", {
-        /**
-         * Forces the horizontal scroll bar to be displayed
-         */
-        get: function () {
-            return this._forceHorizontalBar;
-        },
-        set: function (value) {
-            this._grid.setRowDefinition(1, value ? this._barSize : 0, true);
-            this._horizontalBar.isVisible = value;
-            this._forceHorizontalBar = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "forceVerticalBar", {
-        /**
-         * Forces the vertical scroll bar to be displayed
-         */
-        get: function () {
-            return this._forceVerticalBar;
-        },
-        set: function (value) {
-            this._grid.setColumnDefinition(1, value ? this._barSize : 0, true);
-            this._verticalBar.isVisible = value;
-            this._forceVerticalBar = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    }
+    /**
+     * Forces the horizontal scroll bar to be displayed
+     */
+    get forceHorizontalBar() {
+        return this._forceHorizontalBar;
+    }
+    set forceHorizontalBar(value) {
+        this._grid.setRowDefinition(1, value ? this._barSize : 0, true);
+        this._horizontalBar.isVisible = value;
+        this._forceHorizontalBar = value;
+    }
+    /**
+     * Forces the vertical scroll bar to be displayed
+     */
+    get forceVerticalBar() {
+        return this._forceVerticalBar;
+    }
+    set forceVerticalBar(value) {
+        this._grid.setColumnDefinition(1, value ? this._barSize : 0, true);
+        this._verticalBar.isVisible = value;
+        this._forceVerticalBar = value;
+    }
     /** Reset the scroll viewer window to initial size */
-    ScrollViewer.prototype.resetWindow = function () {
+    resetWindow() {
         this._window.width = "100%";
         this._window.height = "100%";
-    };
-    ScrollViewer.prototype._getTypeName = function () {
+    }
+    _getTypeName() {
         return "ScrollViewer";
-    };
-    ScrollViewer.prototype._buildClientSizes = function () {
-        var ratio = this.host.idealRatio;
+    }
+    _buildClientSizes() {
+        const ratio = this.host.idealRatio;
         this._window.parentClientWidth = this._currentMeasure.width - (this._verticalBar.isVisible || this.forceVerticalBar ? this._barSize * ratio : 0) - 2 * this.thickness;
         this._window.parentClientHeight = this._currentMeasure.height - (this._horizontalBar.isVisible || this.forceHorizontalBar ? this._barSize * ratio : 0) - 2 * this.thickness;
         this._clientWidth = this._window.parentClientWidth;
         this._clientHeight = this._window.parentClientHeight;
-    };
-    ScrollViewer.prototype._additionalProcessing = function (parentMeasure, context) {
-        _super.prototype._additionalProcessing.call(this, parentMeasure, context);
+    }
+    _additionalProcessing(parentMeasure, context) {
+        super._additionalProcessing(parentMeasure, context);
         this._buildClientSizes();
-    };
-    ScrollViewer.prototype._postMeasure = function () {
-        _super.prototype._postMeasure.call(this);
+    }
+    _postMeasure() {
+        super._postMeasure();
         this._updateScroller();
         this._setWindowPosition(false);
-    };
-    Object.defineProperty(ScrollViewer.prototype, "wheelPrecision", {
-        /**
-         * Gets or sets the mouse wheel precision
-         * from 0 to 1 with a default value of 0.05
-         * */
-        get: function () {
-            return this._wheelPrecision;
-        },
-        set: function (value) {
-            if (this._wheelPrecision === value) {
-                return;
-            }
-            if (value < 0) {
-                value = 0;
-            }
-            if (value > 1) {
-                value = 1;
-            }
-            this._wheelPrecision = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "scrollBackground", {
-        /** Gets or sets the scroll bar container background color */
-        get: function () {
-            return this._horizontalBarSpace.background;
-        },
-        set: function (color) {
-            if (this._horizontalBarSpace.background === color) {
-                return;
-            }
-            this._horizontalBarSpace.background = color;
-            this._verticalBarSpace.background = color;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "barColor", {
-        /** Gets or sets the bar color */
-        get: function () {
-            return this._barColor;
-        },
-        set: function (color) {
-            if (this._barColor === color) {
-                return;
-            }
-            this._barColor = color;
-            this._horizontalBar.color = color;
-            this._verticalBar.color = color;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "thumbImage", {
-        /** Gets or sets the bar image */
-        get: function () {
-            return this._barImage;
-        },
-        set: function (value) {
-            if (this._barImage === value) {
-                return;
-            }
-            this._barImage = value;
-            var hb = this._horizontalBar;
-            var vb = this._verticalBar;
-            hb.thumbImage = value;
-            vb.thumbImage = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "horizontalThumbImage", {
-        /** Gets or sets the horizontal bar image */
-        get: function () {
-            return this._horizontalBarImage;
-        },
-        set: function (value) {
-            if (this._horizontalBarImage === value) {
-                return;
-            }
-            this._horizontalBarImage = value;
-            var hb = this._horizontalBar;
-            hb.thumbImage = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "verticalThumbImage", {
-        /** Gets or sets the vertical bar image */
-        get: function () {
-            return this._verticalBarImage;
-        },
-        set: function (value) {
-            if (this._verticalBarImage === value) {
-                return;
-            }
-            this._verticalBarImage = value;
-            var vb = this._verticalBar;
-            vb.thumbImage = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "barSize", {
-        /** Gets or sets the size of the bar */
-        get: function () {
-            return this._barSize;
-        },
-        set: function (value) {
-            if (this._barSize === value) {
-                return;
-            }
-            this._barSize = value;
-            this._markAsDirty();
-            if (this._horizontalBar.isVisible) {
-                this._grid.setRowDefinition(1, this._barSize, true);
-            }
-            if (this._verticalBar.isVisible) {
-                this._grid.setColumnDefinition(1, this._barSize, true);
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "thumbLength", {
-        /** Gets or sets the length of the thumb */
-        get: function () {
-            return this._thumbLength;
-        },
-        set: function (value) {
-            if (this._thumbLength === value) {
-                return;
-            }
-            if (value <= 0) {
-                value = 0.1;
-            }
-            if (value > 1) {
-                value = 1;
-            }
-            this._thumbLength = value;
-            var hb = this._horizontalBar;
-            var vb = this._verticalBar;
-            hb.thumbLength = value;
-            vb.thumbLength = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "thumbHeight", {
-        /** Gets or sets the height of the thumb */
-        get: function () {
-            return this._thumbHeight;
-        },
-        set: function (value) {
-            if (this._thumbHeight === value) {
-                return;
-            }
-            if (value <= 0) {
-                value = 0.1;
-            }
-            if (value > 1) {
-                value = 1;
-            }
-            this._thumbHeight = value;
-            var hb = this._horizontalBar;
-            var vb = this._verticalBar;
-            hb.thumbHeight = value;
-            vb.thumbHeight = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "barImageHeight", {
-        /** Gets or sets the height of the bar image */
-        get: function () {
-            return this._barImageHeight;
-        },
-        set: function (value) {
-            if (this._barImageHeight === value) {
-                return;
-            }
-            if (value <= 0) {
-                value = 0.1;
-            }
-            if (value > 1) {
-                value = 1;
-            }
-            this._barImageHeight = value;
-            var hb = this._horizontalBar;
-            var vb = this._verticalBar;
-            hb.barImageHeight = value;
-            vb.barImageHeight = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "horizontalBarImageHeight", {
-        /** Gets or sets the height of the horizontal bar image */
-        get: function () {
-            return this._horizontalBarImageHeight;
-        },
-        set: function (value) {
-            if (this._horizontalBarImageHeight === value) {
-                return;
-            }
-            if (value <= 0) {
-                value = 0.1;
-            }
-            if (value > 1) {
-                value = 1;
-            }
-            this._horizontalBarImageHeight = value;
-            var hb = this._horizontalBar;
-            hb.barImageHeight = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "verticalBarImageHeight", {
-        /** Gets or sets the height of the vertical bar image */
-        get: function () {
-            return this._verticalBarImageHeight;
-        },
-        set: function (value) {
-            if (this._verticalBarImageHeight === value) {
-                return;
-            }
-            if (value <= 0) {
-                value = 0.1;
-            }
-            if (value > 1) {
-                value = 1;
-            }
-            this._verticalBarImageHeight = value;
-            var vb = this._verticalBar;
-            vb.barImageHeight = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "barBackground", {
-        /** Gets or sets the bar background */
-        get: function () {
-            return this._barBackground;
-        },
-        set: function (color) {
-            if (this._barBackground === color) {
-                return;
-            }
-            this._barBackground = color;
-            var hb = this._horizontalBar;
-            var vb = this._verticalBar;
-            hb.background = color;
-            vb.background = color;
-            this._dragSpace.background = color;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "barImage", {
-        /** Gets or sets the bar background image */
-        get: function () {
-            return this._barBackgroundImage;
-        },
-        set: function (value) {
-            this._barBackgroundImage = value;
-            var hb = this._horizontalBar;
-            var vb = this._verticalBar;
-            hb.backgroundImage = value;
-            vb.backgroundImage = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "horizontalBarImage", {
-        /** Gets or sets the horizontal bar background image */
-        get: function () {
-            return this._horizontalBarBackgroundImage;
-        },
-        set: function (value) {
-            this._horizontalBarBackgroundImage = value;
-            var hb = this._horizontalBar;
-            hb.backgroundImage = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewer.prototype, "verticalBarImage", {
-        /** Gets or sets the vertical bar background image */
-        get: function () {
-            return this._verticalBarBackgroundImage;
-        },
-        set: function (value) {
-            this._verticalBarBackgroundImage = value;
-            var vb = this._verticalBar;
-            vb.backgroundImage = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ScrollViewer.prototype._setWindowPosition = function (force) {
-        if (force === void 0) { force = true; }
-        var ratio = this.host.idealRatio;
-        var windowContentsWidth = this._window._currentMeasure.width;
-        var windowContentsHeight = this._window._currentMeasure.height;
+    }
+    /**
+     * Gets or sets the mouse wheel precision
+     * from 0 to 1 with a default value of 0.05
+     * */
+    get wheelPrecision() {
+        return this._wheelPrecision;
+    }
+    set wheelPrecision(value) {
+        if (this._wheelPrecision === value) {
+            return;
+        }
+        if (value < 0) {
+            value = 0;
+        }
+        if (value > 1) {
+            value = 1;
+        }
+        this._wheelPrecision = value;
+    }
+    /** Gets or sets the scroll bar container background color */
+    get scrollBackground() {
+        return this._horizontalBarSpace.background;
+    }
+    set scrollBackground(color) {
+        if (this._horizontalBarSpace.background === color) {
+            return;
+        }
+        this._horizontalBarSpace.background = color;
+        this._verticalBarSpace.background = color;
+    }
+    /** Gets or sets the bar color */
+    get barColor() {
+        return this._barColor;
+    }
+    set barColor(color) {
+        if (this._barColor === color) {
+            return;
+        }
+        this._barColor = color;
+        this._horizontalBar.color = color;
+        this._verticalBar.color = color;
+    }
+    /** Gets or sets the bar image */
+    get thumbImage() {
+        return this._barImage;
+    }
+    set thumbImage(value) {
+        if (this._barImage === value) {
+            return;
+        }
+        this._barImage = value;
+        const hb = this._horizontalBar;
+        const vb = this._verticalBar;
+        hb.thumbImage = value;
+        vb.thumbImage = value;
+    }
+    /** Gets or sets the horizontal bar image */
+    get horizontalThumbImage() {
+        return this._horizontalBarImage;
+    }
+    set horizontalThumbImage(value) {
+        if (this._horizontalBarImage === value) {
+            return;
+        }
+        this._horizontalBarImage = value;
+        const hb = this._horizontalBar;
+        hb.thumbImage = value;
+    }
+    /** Gets or sets the vertical bar image */
+    get verticalThumbImage() {
+        return this._verticalBarImage;
+    }
+    set verticalThumbImage(value) {
+        if (this._verticalBarImage === value) {
+            return;
+        }
+        this._verticalBarImage = value;
+        const vb = this._verticalBar;
+        vb.thumbImage = value;
+    }
+    /** Gets or sets the size of the bar */
+    get barSize() {
+        return this._barSize;
+    }
+    set barSize(value) {
+        if (this._barSize === value) {
+            return;
+        }
+        this._barSize = value;
+        this._markAsDirty();
+        if (this._horizontalBar.isVisible) {
+            this._grid.setRowDefinition(1, this._barSize, true);
+        }
+        if (this._verticalBar.isVisible) {
+            this._grid.setColumnDefinition(1, this._barSize, true);
+        }
+    }
+    /** Gets or sets the length of the thumb */
+    get thumbLength() {
+        return this._thumbLength;
+    }
+    set thumbLength(value) {
+        if (this._thumbLength === value) {
+            return;
+        }
+        if (value <= 0) {
+            value = 0.1;
+        }
+        if (value > 1) {
+            value = 1;
+        }
+        this._thumbLength = value;
+        const hb = this._horizontalBar;
+        const vb = this._verticalBar;
+        hb.thumbLength = value;
+        vb.thumbLength = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the height of the thumb */
+    get thumbHeight() {
+        return this._thumbHeight;
+    }
+    set thumbHeight(value) {
+        if (this._thumbHeight === value) {
+            return;
+        }
+        if (value <= 0) {
+            value = 0.1;
+        }
+        if (value > 1) {
+            value = 1;
+        }
+        this._thumbHeight = value;
+        const hb = this._horizontalBar;
+        const vb = this._verticalBar;
+        hb.thumbHeight = value;
+        vb.thumbHeight = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the height of the bar image */
+    get barImageHeight() {
+        return this._barImageHeight;
+    }
+    set barImageHeight(value) {
+        if (this._barImageHeight === value) {
+            return;
+        }
+        if (value <= 0) {
+            value = 0.1;
+        }
+        if (value > 1) {
+            value = 1;
+        }
+        this._barImageHeight = value;
+        const hb = this._horizontalBar;
+        const vb = this._verticalBar;
+        hb.barImageHeight = value;
+        vb.barImageHeight = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the height of the horizontal bar image */
+    get horizontalBarImageHeight() {
+        return this._horizontalBarImageHeight;
+    }
+    set horizontalBarImageHeight(value) {
+        if (this._horizontalBarImageHeight === value) {
+            return;
+        }
+        if (value <= 0) {
+            value = 0.1;
+        }
+        if (value > 1) {
+            value = 1;
+        }
+        this._horizontalBarImageHeight = value;
+        const hb = this._horizontalBar;
+        hb.barImageHeight = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the height of the vertical bar image */
+    get verticalBarImageHeight() {
+        return this._verticalBarImageHeight;
+    }
+    set verticalBarImageHeight(value) {
+        if (this._verticalBarImageHeight === value) {
+            return;
+        }
+        if (value <= 0) {
+            value = 0.1;
+        }
+        if (value > 1) {
+            value = 1;
+        }
+        this._verticalBarImageHeight = value;
+        const vb = this._verticalBar;
+        vb.barImageHeight = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the bar background */
+    get barBackground() {
+        return this._barBackground;
+    }
+    set barBackground(color) {
+        if (this._barBackground === color) {
+            return;
+        }
+        this._barBackground = color;
+        const hb = this._horizontalBar;
+        const vb = this._verticalBar;
+        hb.background = color;
+        vb.background = color;
+        this._dragSpace.background = color;
+    }
+    /** Gets or sets the bar background image */
+    get barImage() {
+        return this._barBackgroundImage;
+    }
+    set barImage(value) {
+        this._barBackgroundImage = value;
+        const hb = this._horizontalBar;
+        const vb = this._verticalBar;
+        hb.backgroundImage = value;
+        vb.backgroundImage = value;
+    }
+    /** Gets or sets the horizontal bar background image */
+    get horizontalBarImage() {
+        return this._horizontalBarBackgroundImage;
+    }
+    set horizontalBarImage(value) {
+        this._horizontalBarBackgroundImage = value;
+        const hb = this._horizontalBar;
+        hb.backgroundImage = value;
+    }
+    /** Gets or sets the vertical bar background image */
+    get verticalBarImage() {
+        return this._verticalBarBackgroundImage;
+    }
+    set verticalBarImage(value) {
+        this._verticalBarBackgroundImage = value;
+        const vb = this._verticalBar;
+        vb.backgroundImage = value;
+    }
+    _setWindowPosition(force = true) {
+        const ratio = this.host.idealRatio;
+        const windowContentsWidth = this._window._currentMeasure.width;
+        const windowContentsHeight = this._window._currentMeasure.height;
         if (!force && this._oldWindowContentsWidth === windowContentsWidth && this._oldWindowContentsHeight === windowContentsHeight) {
             return;
         }
         this._oldWindowContentsWidth = windowContentsWidth;
         this._oldWindowContentsHeight = windowContentsHeight;
-        var _endLeft = this._clientWidth - windowContentsWidth;
-        var _endTop = this._clientHeight - windowContentsHeight;
-        var newLeft = (this._horizontalBar.value / ratio) * _endLeft + "px";
-        var newTop = (this._verticalBar.value / ratio) * _endTop + "px";
+        const _endLeft = this._clientWidth - windowContentsWidth;
+        const _endTop = this._clientHeight - windowContentsHeight;
+        const newLeft = (this._horizontalBar.value / ratio) * _endLeft + "px";
+        const newTop = (this._verticalBar.value / ratio) * _endTop + "px";
         if (newLeft !== this._window.left) {
             this._window.left = newLeft;
             if (!this.freezeControls) {
@@ -569,11 +469,11 @@ var ScrollViewer = /** @class */ (function (_super) {
                 this._rebuildLayout = true;
             }
         }
-    };
+    }
     /** @hidden */
-    ScrollViewer.prototype._updateScroller = function () {
-        var windowContentsWidth = this._window._currentMeasure.width;
-        var windowContentsHeight = this._window._currentMeasure.height;
+    _updateScroller() {
+        const windowContentsWidth = this._window._currentMeasure.width;
+        const windowContentsHeight = this._window._currentMeasure.height;
         if (this._horizontalBar.isVisible && windowContentsWidth <= this._clientWidth && !this.forceHorizontalBar) {
             this._grid.setRowDefinition(1, 0, true);
             this._horizontalBar.isVisible = false;
@@ -597,14 +497,14 @@ var ScrollViewer = /** @class */ (function (_super) {
             this._rebuildLayout = true;
         }
         this._buildClientSizes();
-        var ratio = this.host.idealRatio;
+        const ratio = this.host.idealRatio;
         this._horizontalBar.thumbWidth = this._thumbLength * 0.9 * (this._clientWidth / ratio) + "px";
         this._verticalBar.thumbWidth = this._thumbLength * 0.9 * (this._clientHeight / ratio) + "px";
-    };
-    ScrollViewer.prototype._link = function (host) {
-        _super.prototype._link.call(this, host);
+    }
+    _link(host) {
+        super._link(host);
         this._attachWheel();
-    };
+    }
     /**
      * @param barControl
      * @param barContainer
@@ -612,8 +512,7 @@ var ScrollViewer = /** @class */ (function (_super) {
      * @param rotation
      * @hidden
      */
-    ScrollViewer.prototype._addBar = function (barControl, barContainer, isVertical, rotation) {
-        var _this = this;
+    _addBar(barControl, barContainer, isVertical, rotation) {
         barControl.paddingLeft = 0;
         barControl.width = "100%";
         barControl.height = "100%";
@@ -626,69 +525,66 @@ var ScrollViewer = /** @class */ (function (_super) {
         barControl.rotation = rotation;
         barControl.isVisible = false;
         barContainer.addControl(barControl);
-        barControl.onValueChangedObservable.add(function () {
-            _this._setWindowPosition();
+        barControl.onValueChangedObservable.add(() => {
+            this._setWindowPosition();
         });
-    };
+    }
     /** @hidden */
-    ScrollViewer.prototype._attachWheel = function () {
-        var _this = this;
+    _attachWheel() {
         if (!this._host || this._onWheelObserver) {
             return;
         }
-        this._onWheelObserver = this.onWheelObservable.add(function (pi) {
-            if (!_this._pointerIsOver || _this.isReadOnly) {
+        this._onWheelObserver = this.onWheelObservable.add((pi) => {
+            if (!this._pointerIsOver || this.isReadOnly) {
                 return;
             }
-            if (_this._verticalBar.isVisible == true) {
-                if (pi.y < 0 && _this._verticalBar.value > 0) {
-                    _this._verticalBar.value -= _this._wheelPrecision;
+            if (this._verticalBar.isVisible == true) {
+                if (pi.y < 0 && this._verticalBar.value > 0) {
+                    this._verticalBar.value -= this._wheelPrecision;
                 }
-                else if (pi.y > 0 && _this._verticalBar.value < _this._verticalBar.maximum) {
-                    _this._verticalBar.value += _this._wheelPrecision;
+                else if (pi.y > 0 && this._verticalBar.value < this._verticalBar.maximum) {
+                    this._verticalBar.value += this._wheelPrecision;
                 }
             }
-            if (_this._horizontalBar.isVisible == true) {
-                if (pi.x < 0 && _this._horizontalBar.value < _this._horizontalBar.maximum) {
-                    _this._horizontalBar.value += _this._wheelPrecision;
+            if (this._horizontalBar.isVisible == true) {
+                if (pi.x < 0 && this._horizontalBar.value < this._horizontalBar.maximum) {
+                    this._horizontalBar.value += this._wheelPrecision;
                 }
-                else if (pi.x > 0 && _this._horizontalBar.value > 0) {
-                    _this._horizontalBar.value -= _this._wheelPrecision;
+                else if (pi.x > 0 && this._horizontalBar.value > 0) {
+                    this._horizontalBar.value -= this._wheelPrecision;
                 }
             }
         });
-    };
-    ScrollViewer.prototype._renderHighlightSpecific = function (context) {
+    }
+    _renderHighlightSpecific(context) {
         if (!this.isHighlighted) {
             return;
         }
-        _super.prototype._renderHighlightSpecific.call(this, context);
+        super._renderHighlightSpecific(context);
         this._grid._renderHighlightSpecific(context);
         context.restore();
-    };
+    }
     /** Releases associated resources */
-    ScrollViewer.prototype.dispose = function () {
+    dispose() {
         this.onWheelObservable.remove(this._onWheelObserver);
         this._onWheelObserver = null;
-        _super.prototype.dispose.call(this);
-    };
-    __decorate([
-        serialize()
-    ], ScrollViewer.prototype, "wheelPrecision", null);
-    __decorate([
-        serialize()
-    ], ScrollViewer.prototype, "scrollBackground", null);
-    __decorate([
-        serialize()
-    ], ScrollViewer.prototype, "barColor", null);
-    __decorate([
-        serialize()
-    ], ScrollViewer.prototype, "barSize", null);
-    __decorate([
-        serialize()
-    ], ScrollViewer.prototype, "barBackground", null);
-    return ScrollViewer;
-}(Rectangle));
-export { ScrollViewer };
+        super.dispose();
+    }
+}
+__decorate([
+    serialize()
+], ScrollViewer.prototype, "wheelPrecision", null);
+__decorate([
+    serialize()
+], ScrollViewer.prototype, "scrollBackground", null);
+__decorate([
+    serialize()
+], ScrollViewer.prototype, "barColor", null);
+__decorate([
+    serialize()
+], ScrollViewer.prototype, "barSize", null);
+__decorate([
+    serialize()
+], ScrollViewer.prototype, "barBackground", null);
 RegisterClass("BABYLON.GUI.ScrollViewer", ScrollViewer);
 //# sourceMappingURL=scrollViewer.js.map