@babylonjs/gui 5.21.0 → 5.23.0

package/2D/controls/colorpicker.js

@@ -1,4 +1,4 @@
-import { __decorate, __extends } from "tslib";
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
 import { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Control } from "./control.js";
 import { InputText } from "./inputText.js";
@@ -11,173 +11,155 @@ import { Color3 } from "@babylonjs/core/Maths/math.color.js";
 import { serialize } from "@babylonjs/core/Misc/decorators.js";
 import { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
 /** Class used to create color pickers */
-var ColorPicker = /** @class */ (function (_super) {
-    __extends(ColorPicker, _super);
+export class ColorPicker extends Control {
     /**
      * Creates a new ColorPicker
      * @param name defines the control name
      */
-    function ColorPicker(name) {
-        var _this = _super.call(this, name) || this;
-        _this.name = name;
-        _this._value = Color3.Red();
-        _this._tmpColor = new Color3();
-        _this._pointerStartedOnSquare = false;
-        _this._pointerStartedOnWheel = false;
-        _this._squareLeft = 0;
-        _this._squareTop = 0;
-        _this._squareSize = 0;
-        _this._h = 360;
-        _this._s = 1;
-        _this._v = 1;
-        _this._lastPointerDownId = -1;
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._value = Color3.Red();
+        this._tmpColor = new Color3();
+        this._pointerStartedOnSquare = false;
+        this._pointerStartedOnWheel = false;
+        this._squareLeft = 0;
+        this._squareTop = 0;
+        this._squareSize = 0;
+        this._h = 360;
+        this._s = 1;
+        this._v = 1;
+        this._lastPointerDownId = -1;
         /**
          * Observable raised when the value changes
          */
-        _this.onValueChangedObservable = new Observable();
+        this.onValueChangedObservable = new Observable();
         // Events
-        _this._pointerIsDown = false;
-        _this.value = new Color3(0.88, 0.1, 0.1);
-        _this.size = "200px";
-        _this.isPointerBlocker = true;
-        return _this;
+        this._pointerIsDown = false;
+        this.value = new Color3(0.88, 0.1, 0.1);
+        this.size = "200px";
+        this.isPointerBlocker = true;
+    }
+    /** Gets or sets the color of the color picker */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (this._value.equals(value)) {
+            return;
+        }
+        this._value.copyFrom(value);
+        this._value.toHSVToRef(this._tmpColor);
+        this._h = this._tmpColor.r;
+        this._s = Math.max(this._tmpColor.g, 0.00001);
+        this._v = Math.max(this._tmpColor.b, 0.00001);
+        this._markAsDirty();
+        if (this._value.r <= ColorPicker._Epsilon) {
+            this._value.r = 0;
+        }
+        if (this._value.g <= ColorPicker._Epsilon) {
+            this._value.g = 0;
+        }
+        if (this._value.b <= ColorPicker._Epsilon) {
+            this._value.b = 0;
+        }
+        if (this._value.r >= 1.0 - ColorPicker._Epsilon) {
+            this._value.r = 1.0;
+        }
+        if (this._value.g >= 1.0 - ColorPicker._Epsilon) {
+            this._value.g = 1.0;
+        }
+        if (this._value.b >= 1.0 - ColorPicker._Epsilon) {
+            this._value.b = 1.0;
+        }
+        this.onValueChangedObservable.notifyObservers(this._value);
+    }
+    /**
+     * Gets or sets control width
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get width() {
+        return this._width.toString(this._host);
     }
-    Object.defineProperty(ColorPicker.prototype, "value", {
-        /** Gets or sets the color of the color picker */
-        get: function () {
-            return this._value;
-        },
-        set: function (value) {
-            if (this._value.equals(value)) {
-                return;
+    set width(value) {
+        if (this._width.toString(this._host) === value) {
+            return;
+        }
+        if (this._width.fromString(value)) {
+            if (this._width.getValue(this._host) === 0) {
+                value = "1px";
+                this._width.fromString(value);
             }
-            this._value.copyFrom(value);
-            this._value.toHSVToRef(this._tmpColor);
-            this._h = this._tmpColor.r;
-            this._s = Math.max(this._tmpColor.g, 0.00001);
-            this._v = Math.max(this._tmpColor.b, 0.00001);
+            this._height.fromString(value);
             this._markAsDirty();
-            if (this._value.r <= ColorPicker._Epsilon) {
-                this._value.r = 0;
-            }
-            if (this._value.g <= ColorPicker._Epsilon) {
-                this._value.g = 0;
-            }
-            if (this._value.b <= ColorPicker._Epsilon) {
-                this._value.b = 0;
-            }
-            if (this._value.r >= 1.0 - ColorPicker._Epsilon) {
-                this._value.r = 1.0;
-            }
-            if (this._value.g >= 1.0 - ColorPicker._Epsilon) {
-                this._value.g = 1.0;
-            }
-            if (this._value.b >= 1.0 - ColorPicker._Epsilon) {
-                this._value.b = 1.0;
-            }
-            this.onValueChangedObservable.notifyObservers(this._value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ColorPicker.prototype, "width", {
-        /**
-         * Gets or sets control width
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._width.toString(this._host);
-        },
-        set: function (value) {
-            if (this._width.toString(this._host) === value) {
-                return;
-            }
-            if (this._width.fromString(value)) {
-                if (this._width.getValue(this._host) === 0) {
-                    value = "1px";
-                    this._width.fromString(value);
-                }
+        }
+    }
+    /**
+     * Gets or sets control height
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get height() {
+        return this._height.toString(this._host);
+    }
+    /** Gets or sets control height */
+    set height(value) {
+        if (this._height.toString(this._host) === value) {
+            return;
+        }
+        if (this._height.fromString(value)) {
+            if (this._height.getValue(this._host) === 0) {
+                value = "1px";
                 this._height.fromString(value);
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ColorPicker.prototype, "height", {
-        /**
-         * Gets or sets control height
-         * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-         */
-        get: function () {
-            return this._height.toString(this._host);
-        },
-        /** Gets or sets control height */
-        set: function (value) {
-            if (this._height.toString(this._host) === value) {
-                return;
             }
-            if (this._height.fromString(value)) {
-                if (this._height.getValue(this._host) === 0) {
-                    value = "1px";
-                    this._height.fromString(value);
-                }
-                this._width.fromString(value);
-                this._markAsDirty();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ColorPicker.prototype, "size", {
-        /** Gets or sets control size */
-        get: function () {
-            return this.width;
-        },
-        set: function (value) {
-            this.width = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ColorPicker.prototype._getTypeName = function () {
+            this._width.fromString(value);
+            this._markAsDirty();
+        }
+    }
+    /** Gets or sets control size */
+    get size() {
+        return this.width;
+    }
+    set size(value) {
+        this.width = value;
+    }
+    _getTypeName() {
         return "ColorPicker";
-    };
+    }
     /**
      * @param parentMeasure
      * @hidden
      */
-    ColorPicker.prototype._preMeasure = function (parentMeasure) {
+    _preMeasure(parentMeasure) {
         if (parentMeasure.width < parentMeasure.height) {
             this._currentMeasure.height = parentMeasure.width;
         }
         else {
             this._currentMeasure.width = parentMeasure.height;
         }
-    };
-    ColorPicker.prototype._updateSquareProps = function () {
-        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
-        var wheelThickness = radius * 0.2;
-        var innerDiameter = (radius - wheelThickness) * 2;
-        var squareSize = innerDiameter / Math.sqrt(2);
-        var offset = radius - squareSize * 0.5;
+    }
+    _updateSquareProps() {
+        const radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
+        const wheelThickness = radius * 0.2;
+        const innerDiameter = (radius - wheelThickness) * 2;
+        const squareSize = innerDiameter / Math.sqrt(2);
+        const offset = radius - squareSize * 0.5;
         this._squareLeft = this._currentMeasure.left + offset;
         this._squareTop = this._currentMeasure.top + offset;
         this._squareSize = squareSize;
-    };
-    ColorPicker.prototype._drawGradientSquare = function (hueValue, left, top, width, height, context) {
-        var lgh = context.createLinearGradient(left, top, width + left, top);
+    }
+    _drawGradientSquare(hueValue, left, top, width, height, context) {
+        const lgh = context.createLinearGradient(left, top, width + left, top);
         lgh.addColorStop(0, "#fff");
         lgh.addColorStop(1, "hsl(" + hueValue + ", 100%, 50%)");
         context.fillStyle = lgh;
         context.fillRect(left, top, width, height);
-        var lgv = context.createLinearGradient(left, top, left, height + top);
+        const lgv = context.createLinearGradient(left, top, left, height + top);
         lgv.addColorStop(0, "rgba(0,0,0,0)");
         lgv.addColorStop(1, "#000");
         context.fillStyle = lgv;
         context.fillRect(left, top, width, height);
-    };
-    ColorPicker.prototype._drawCircle = function (centerX, centerY, radius, context) {
+    }
+    _drawCircle(centerX, centerY, radius, context) {
         context.beginPath();
         context.arc(centerX, centerY, radius + 1, 0, 2 * Math.PI, false);
         context.lineWidth = 3;
@@ -188,41 +170,41 @@ var ColorPicker = /** @class */ (function (_super) {
         context.lineWidth = 3;
         context.strokeStyle = "#ffffff";
         context.stroke();
-    };
-    ColorPicker.prototype._createColorWheelCanvas = function (radius, thickness) {
+    }
+    _createColorWheelCanvas(radius, thickness) {
         // Shoudl abstract platform instead of using LastCreatedEngine
-        var engine = EngineStore.LastCreatedEngine;
+        const engine = EngineStore.LastCreatedEngine;
         if (!engine) {
             throw new Error("Invalid engine. Unable to create a canvas.");
         }
-        var canvas = engine.createCanvas(radius * 2, radius * 2);
-        var context = canvas.getContext("2d");
-        var image = context.getImageData(0, 0, radius * 2, radius * 2);
-        var data = image.data;
-        var color = this._tmpColor;
-        var maxDistSq = radius * radius;
-        var innerRadius = radius - thickness;
-        var minDistSq = innerRadius * innerRadius;
-        for (var x = -radius; x < radius; x++) {
-            for (var y = -radius; y < radius; y++) {
-                var distSq = x * x + y * y;
+        const canvas = engine.createCanvas(radius * 2, radius * 2);
+        const context = canvas.getContext("2d");
+        const image = context.getImageData(0, 0, radius * 2, radius * 2);
+        const data = image.data;
+        const color = this._tmpColor;
+        const maxDistSq = radius * radius;
+        const innerRadius = radius - thickness;
+        const minDistSq = innerRadius * innerRadius;
+        for (let x = -radius; x < radius; x++) {
+            for (let y = -radius; y < radius; y++) {
+                const distSq = x * x + y * y;
                 if (distSq > maxDistSq || distSq < minDistSq) {
                     continue;
                 }
-                var dist = Math.sqrt(distSq);
-                var ang = Math.atan2(y, x);
+                const dist = Math.sqrt(distSq);
+                const ang = Math.atan2(y, x);
                 Color3.HSVtoRGBToRef((ang * 180) / Math.PI + 180, dist / radius, 1, color);
-                var index = (x + radius + (y + radius) * 2 * radius) * 4;
+                const index = (x + radius + (y + radius) * 2 * radius) * 4;
                 data[index] = color.r * 255;
                 data[index + 1] = color.g * 255;
                 data[index + 2] = color.b * 255;
-                var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
+                let alphaRatio = (dist - innerRadius) / (radius - innerRadius);
                 //apply less alpha to bigger color pickers
-                var alphaAmount = 0.2;
-                var maxAlpha = 0.2;
-                var minAlpha = 0.04;
-                var lowerRadius = 50;
-                var upperRadius = 150;
+                let alphaAmount = 0.2;
+                const maxAlpha = 0.2;
+                const minAlpha = 0.04;
+                const lowerRadius = 50;
+                const upperRadius = 150;
                 if (radius < lowerRadius) {
                     alphaAmount = maxAlpha;
                 }
@@ -246,18 +228,18 @@ var ColorPicker = /** @class */ (function (_super) {
         }
         context.putImageData(image, 0, 0);
         return canvas;
-    };
+    }
     /**
      * @param context
      * @hidden
      */
-    ColorPicker.prototype._draw = function (context) {
+    _draw(context) {
         context.save();
         this._applyStates(context);
-        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
-        var wheelThickness = radius * 0.2;
-        var left = this._currentMeasure.left;
-        var top = this._currentMeasure.top;
+        const radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
+        const wheelThickness = radius * 0.2;
+        const left = this._currentMeasure.left;
+        const top = this._currentMeasure.top;
         if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
             this._colorWheelCanvas = this._createColorWheelCanvas(radius, wheelThickness);
         }
@@ -276,20 +258,20 @@ var ColorPicker = /** @class */ (function (_super) {
             context.shadowOffsetY = 0;
         }
         this._drawGradientSquare(this._h, this._squareLeft, this._squareTop, this._squareSize, this._squareSize, context);
-        var cx = this._squareLeft + this._squareSize * this._s;
-        var cy = this._squareTop + this._squareSize * (1 - this._v);
+        let cx = this._squareLeft + this._squareSize * this._s;
+        let cy = this._squareTop + this._squareSize * (1 - this._v);
         this._drawCircle(cx, cy, radius * 0.04, context);
-        var dist = radius - wheelThickness * 0.5;
+        const dist = radius - wheelThickness * 0.5;
         cx = left + radius + Math.cos(((this._h - 180) * Math.PI) / 180) * dist;
         cy = top + radius + Math.sin(((this._h - 180) * Math.PI) / 180) * dist;
         this._drawCircle(cx, cy, wheelThickness * 0.35, context);
         context.restore();
-    };
-    ColorPicker.prototype._updateValueFromPointer = function (x, y) {
+    }
+    _updateValueFromPointer(x, y) {
         if (this._pointerStartedOnWheel) {
-            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
-            var centerX = radius + this._currentMeasure.left;
-            var centerY = radius + this._currentMeasure.top;
+            const radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
+            const centerX = radius + this._currentMeasure.left;
+            const centerY = radius + this._currentMeasure.top;
             this._h = (Math.atan2(y - centerY, x - centerX) * 180) / Math.PI + 180;
         }
         else if (this._pointerStartedOnSquare) {
@@ -303,35 +285,35 @@ var ColorPicker = /** @class */ (function (_super) {
         }
         Color3.HSVtoRGBToRef(this._h, this._s, this._v, this._tmpColor);
         this.value = this._tmpColor;
-    };
-    ColorPicker.prototype._isPointOnSquare = function (x, y) {
+    }
+    _isPointOnSquare(x, y) {
         this._updateSquareProps();
-        var left = this._squareLeft;
-        var top = this._squareTop;
-        var size = this._squareSize;
+        const left = this._squareLeft;
+        const top = this._squareTop;
+        const size = this._squareSize;
         if (x >= left && x <= left + size && y >= top && y <= top + size) {
             return true;
         }
         return false;
-    };
-    ColorPicker.prototype._isPointOnWheel = function (x, y) {
-        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
-        var centerX = radius + this._currentMeasure.left;
-        var centerY = radius + this._currentMeasure.top;
-        var wheelThickness = radius * 0.2;
-        var innerRadius = radius - wheelThickness;
-        var radiusSq = radius * radius;
-        var innerRadiusSq = innerRadius * innerRadius;
-        var dx = x - centerX;
-        var dy = y - centerY;
-        var distSq = dx * dx + dy * dy;
+    }
+    _isPointOnWheel(x, y) {
+        const radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
+        const centerX = radius + this._currentMeasure.left;
+        const centerY = radius + this._currentMeasure.top;
+        const wheelThickness = radius * 0.2;
+        const innerRadius = radius - wheelThickness;
+        const radiusSq = radius * radius;
+        const innerRadiusSq = innerRadius * innerRadius;
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distSq = dx * dx + dy * dy;
         if (distSq <= radiusSq && distSq >= innerRadiusSq) {
             return true;
         }
         return false;
-    };
-    ColorPicker.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
-        if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
+    }
+    _onPointerDown(target, coordinates, pointerId, buttonIndex, pi) {
+        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {
             return false;
         }
         if (this.isReadOnly) {
@@ -342,8 +324,8 @@ var ColorPicker = /** @class */ (function (_super) {
         this._pointerStartedOnWheel = false;
         // Invert transform
         this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
-        var x = this._transformedPosition.x;
-        var y = this._transformedPosition.y;
+        const x = this._transformedPosition.x;
+        const y = this._transformedPosition.y;
         if (this._isPointOnSquare(x, y)) {
             this._pointerStartedOnSquare = true;
         }
@@ -354,8 +336,8 @@ var ColorPicker = /** @class */ (function (_super) {
         this._host._capturingControl[pointerId] = this;
         this._lastPointerDownId = pointerId;
         return true;
-    };
-    ColorPicker.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
+    }
+    _onPointerMove(target, coordinates, pointerId, pi) {
         // Only listen to pointer move events coming from the last pointer to click on the element (To support dual vr controller interaction)
         if (pointerId != this._lastPointerDownId) {
             return;
@@ -363,23 +345,23 @@ var ColorPicker = /** @class */ (function (_super) {
         if (!this.isReadOnly) {
             // Invert transform
             this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
-            var x = this._transformedPosition.x;
-            var y = this._transformedPosition.y;
+            const x = this._transformedPosition.x;
+            const y = this._transformedPosition.y;
             if (this._pointerIsDown) {
                 this._updateValueFromPointer(x, y);
             }
         }
-        _super.prototype._onPointerMove.call(this, target, coordinates, pointerId, pi);
-    };
-    ColorPicker.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
+        super._onPointerMove(target, coordinates, pointerId, pi);
+    }
+    _onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick, pi) {
         this._pointerIsDown = false;
         delete this._host._capturingControl[pointerId];
-        _super.prototype._onPointerUp.call(this, target, coordinates, pointerId, buttonIndex, notifyClick, pi);
-    };
-    ColorPicker.prototype._onCanvasBlur = function () {
+        super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick, pi);
+    }
+    _onCanvasBlur() {
         this._forcePointerUp();
-        _super.prototype._onCanvasBlur.call(this);
-    };
+        super._onCanvasBlur();
+    }
     /**
      * This function expands the color picker by creating a color picker dialog with manual
      * color value input and the ability to save colors into an array to be used later in
@@ -395,8 +377,8 @@ var ColorPicker = /** @class */ (function (_super) {
      * @param options.savedColors
      * @returns picked color as a hex string and the saved colors array as hex strings.
      */
-    ColorPicker.ShowPickerDialogAsync = function (advancedTexture, options) {
-        return new Promise(function (resolve) {
+    static ShowPickerDialogAsync(advancedTexture, options) {
+        return new Promise((resolve) => {
             // Default options
             options.pickerWidth = options.pickerWidth || "640px";
             options.pickerHeight = options.pickerHeight || "400px";
@@ -405,48 +387,48 @@ var ColorPicker = /** @class */ (function (_super) {
             options.swatchLimit = options.swatchLimit || 20;
             options.numSwatchesPerLine = options.numSwatchesPerLine || 10;
             // Window size settings
-            var drawerMaxRows = options.swatchLimit / options.numSwatchesPerLine;
-            var rawSwatchSize = parseFloat(options.pickerWidth) / options.numSwatchesPerLine;
-            var gutterSize = Math.floor(rawSwatchSize * 0.25);
-            var colGutters = gutterSize * (options.numSwatchesPerLine + 1);
-            var swatchSize = Math.floor((parseFloat(options.pickerWidth) - colGutters) / options.numSwatchesPerLine);
-            var drawerMaxSize = swatchSize * drawerMaxRows + gutterSize * (drawerMaxRows + 1);
-            var containerSize = (parseInt(options.pickerHeight) + drawerMaxSize + Math.floor(swatchSize * 0.25)).toString() + "px";
+            const drawerMaxRows = options.swatchLimit / options.numSwatchesPerLine;
+            const rawSwatchSize = parseFloat(options.pickerWidth) / options.numSwatchesPerLine;
+            const gutterSize = Math.floor(rawSwatchSize * 0.25);
+            const colGutters = gutterSize * (options.numSwatchesPerLine + 1);
+            const swatchSize = Math.floor((parseFloat(options.pickerWidth) - colGutters) / options.numSwatchesPerLine);
+            const drawerMaxSize = swatchSize * drawerMaxRows + gutterSize * (drawerMaxRows + 1);
+            const containerSize = (parseInt(options.pickerHeight) + drawerMaxSize + Math.floor(swatchSize * 0.25)).toString() + "px";
             // Button Colors
-            var buttonColor = "#c0c0c0";
-            var buttonBackgroundColor = "#535353";
-            var buttonBackgroundHoverColor = "#414141";
-            var buttonBackgroundClickColor = "515151";
-            var buttonDisabledColor = "#555555";
-            var buttonDisabledBackgroundColor = "#454545";
-            var currentSwatchesOutlineColor = "#404040";
-            var luminanceLimitColor = Color3.FromHexString("#dddddd");
-            var luminanceLimit = luminanceLimitColor.r + luminanceLimitColor.g + luminanceLimitColor.b;
-            var iconColorDark = "#aaaaaa";
-            var iconColorLight = "#ffffff";
+            const buttonColor = "#c0c0c0";
+            const buttonBackgroundColor = "#535353";
+            const buttonBackgroundHoverColor = "#414141";
+            const buttonBackgroundClickColor = "515151";
+            const buttonDisabledColor = "#555555";
+            const buttonDisabledBackgroundColor = "#454545";
+            const currentSwatchesOutlineColor = "#404040";
+            const luminanceLimitColor = Color3.FromHexString("#dddddd");
+            const luminanceLimit = luminanceLimitColor.r + luminanceLimitColor.g + luminanceLimitColor.b;
+            const iconColorDark = "#aaaaaa";
+            const iconColorLight = "#ffffff";
             // Button settings
-            var buttonFontSize;
-            var butEdit;
+            let buttonFontSize;
+            let butEdit;
             // Input Text Colors
-            var inputFieldLabels = ["R", "G", "B"];
-            var inputTextBackgroundColor = "#454545";
-            var inputTextColor = "#f0f0f0";
+            const inputFieldLabels = ["R", "G", "B"];
+            const inputTextBackgroundColor = "#454545";
+            const inputTextColor = "#f0f0f0";
             // This int is used for naming swatches and serves as the index for calling them from the list
-            var swatchNumber;
+            let swatchNumber;
             // Menu Panel options. We need to know if the swatchDrawer exists so we can create it if needed.
-            var swatchDrawer;
-            var editSwatchMode = false;
+            let swatchDrawer;
+            let editSwatchMode = false;
             // Color InputText fields that will be updated upon value change
-            var butSave;
-            var lastVal;
-            var activeField;
+            let butSave;
+            let lastVal;
+            let activeField;
             // Dialog menu container which will contain both the main dialogue window and the swatch drawer which opens once a color is saved.
-            var dialogContainer = new Grid();
+            const dialogContainer = new Grid();
             dialogContainer.name = "Dialog Container";
             dialogContainer.width = options.pickerWidth;
             if (options.savedColors) {
                 dialogContainer.height = containerSize;
-                var topRow = parseInt(options.pickerHeight) / parseInt(containerSize);
+                const topRow = parseInt(options.pickerHeight) / parseInt(containerSize);
                 dialogContainer.addRowDefinition(topRow, false);
                 dialogContainer.addRowDefinition(1.0 - topRow, false);
             }
@@ -462,8 +444,8 @@ var ColorPicker = /** @class */ (function (_super) {
                 swatchDrawer.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
                 swatchDrawer.background = buttonBackgroundColor;
                 swatchDrawer.width = options.pickerWidth;
-                var initialRows = options.savedColors.length / options.numSwatchesPerLine;
-                var gutterCount = void 0;
+                const initialRows = options.savedColors.length / options.numSwatchesPerLine;
+                let gutterCount;
                 if (initialRows == 0) {
                     gutterCount = 0;
                 }
@@ -472,7 +454,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 }
                 swatchDrawer.height = (swatchSize * initialRows + gutterCount * gutterSize).toString() + "px";
                 swatchDrawer.top = Math.floor(swatchSize * 0.25).toString() + "px";
-                for (var i = 0; i < Math.ceil(options.savedColors.length / options.numSwatchesPerLine) * 2 + 1; i++) {
+                for (let i = 0; i < Math.ceil(options.savedColors.length / options.numSwatchesPerLine) * 2 + 1; i++) {
                     if (i % 2 != 0) {
                         swatchDrawer.addRowDefinition(swatchSize, true);
                     }
@@ -480,7 +462,7 @@ var ColorPicker = /** @class */ (function (_super) {
                         swatchDrawer.addRowDefinition(gutterSize, true);
                     }
                 }
-                for (var i = 0; i < options.numSwatchesPerLine * 2 + 1; i++) {
+                for (let i = 0; i < options.numSwatchesPerLine * 2 + 1; i++) {
                     if (i % 2 != 0) {
                         swatchDrawer.addColumnDefinition(swatchSize, true);
                     }
@@ -491,25 +473,25 @@ var ColorPicker = /** @class */ (function (_super) {
                 dialogContainer.addControl(swatchDrawer, 1, 0);
             }
             // Picker container
-            var pickerPanel = new Grid();
+            const pickerPanel = new Grid();
             pickerPanel.name = "Picker Panel";
             pickerPanel.height = options.pickerHeight;
-            var panelHead = parseInt(options.headerHeight) / parseInt(options.pickerHeight);
-            var pickerPanelRows = [panelHead, 1.0 - panelHead];
+            const panelHead = parseInt(options.headerHeight) / parseInt(options.pickerHeight);
+            const pickerPanelRows = [panelHead, 1.0 - panelHead];
             pickerPanel.addRowDefinition(pickerPanelRows[0], false);
             pickerPanel.addRowDefinition(pickerPanelRows[1], false);
             dialogContainer.addControl(pickerPanel, 0, 0);
             // Picker container header
-            var header = new Rectangle();
+            const header = new Rectangle();
             header.name = "Dialogue Header Bar";
             header.background = "#cccccc";
             header.thickness = 0;
             pickerPanel.addControl(header, 0, 0);
             // Header close button
-            var closeButton = Button.CreateSimpleButton("closeButton", "a");
+            const closeButton = Button.CreateSimpleButton("closeButton", "a");
             closeButton.fontFamily = "coreglyphs";
-            var headerColor3 = Color3.FromHexString(header.background);
-            var closeIconColor = new Color3(1.0 - headerColor3.r, 1.0 - headerColor3.g, 1.0 - headerColor3.b);
+            const headerColor3 = Color3.FromHexString(header.background);
+            const closeIconColor = new Color3(1.0 - headerColor3.r, 1.0 - headerColor3.g, 1.0 - headerColor3.b);
             closeButton.color = closeIconColor.toHexString();
             closeButton.fontSize = Math.floor(parseInt(options.headerHeight) * 0.6);
             closeButton.textBlock.textVerticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
@@ -517,39 +499,39 @@ var ColorPicker = /** @class */ (function (_super) {
             closeButton.height = closeButton.width = options.headerHeight;
             closeButton.background = header.background;
             closeButton.thickness = 0;
-            closeButton.pointerDownAnimation = function () { };
-            closeButton.pointerUpAnimation = function () {
+            closeButton.pointerDownAnimation = () => { };
+            closeButton.pointerUpAnimation = () => {
                 closeButton.background = header.background;
             };
-            closeButton.pointerEnterAnimation = function () {
+            closeButton.pointerEnterAnimation = () => {
                 closeButton.color = header.background;
                 closeButton.background = "red";
             };
-            closeButton.pointerOutAnimation = function () {
+            closeButton.pointerOutAnimation = () => {
                 closeButton.color = closeIconColor.toHexString();
                 closeButton.background = header.background;
             };
-            closeButton.onPointerClickObservable.add(function () {
+            closeButton.onPointerClickObservable.add(() => {
                 closePicker(currentSwatch.background);
             });
             pickerPanel.addControl(closeButton, 0, 0);
             // Dialog container body
-            var dialogBody = new Grid();
+            const dialogBody = new Grid();
             dialogBody.name = "Dialogue Body";
             dialogBody.background = buttonBackgroundColor;
-            var dialogBodyCols = [0.4375, 0.5625];
+            const dialogBodyCols = [0.4375, 0.5625];
             dialogBody.addRowDefinition(1.0, false);
             dialogBody.addColumnDefinition(dialogBodyCols[0], false);
             dialogBody.addColumnDefinition(dialogBodyCols[1], false);
             pickerPanel.addControl(dialogBody, 1, 0);
             // Picker grid
-            var pickerGrid = new Grid();
+            const pickerGrid = new Grid();
             pickerGrid.name = "Picker Grid";
             pickerGrid.addRowDefinition(0.85, false);
             pickerGrid.addRowDefinition(0.15, false);
             dialogBody.addControl(pickerGrid, 0, 0);
             //  Picker control
-            var picker = new ColorPicker();
+            const picker = new ColorPicker();
             picker.name = "GUI Color Picker";
             if (options.pickerHeight < options.pickerWidth) {
                 picker.width = 0.89;
@@ -560,7 +542,7 @@ var ColorPicker = /** @class */ (function (_super) {
             picker.value = Color3.FromHexString(options.lastColor);
             picker.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
             picker.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
-            picker.onPointerDownObservable.add(function () {
+            picker.onPointerDownObservable.add(() => {
                 activeField = picker.name;
                 lastVal = "";
                 editSwatches(false);
@@ -573,40 +555,40 @@ var ColorPicker = /** @class */ (function (_super) {
             });
             pickerGrid.addControl(picker, 0, 0);
             // Picker body right quarant
-            var pickerBodyRight = new Grid();
+            const pickerBodyRight = new Grid();
             pickerBodyRight.name = "Dialogue Right Half";
             pickerBodyRight.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-            var pickerBodyRightRows = [0.514, 0.486];
+            const pickerBodyRightRows = [0.514, 0.486];
             pickerBodyRight.addRowDefinition(pickerBodyRightRows[0], false);
             pickerBodyRight.addRowDefinition(pickerBodyRightRows[1], false);
             dialogBody.addControl(pickerBodyRight, 1, 1);
             // Picker container swatches and buttons
-            var pickerSwatchesButtons = new Grid();
+            const pickerSwatchesButtons = new Grid();
             pickerSwatchesButtons.name = "Swatches and Buttons";
-            var pickerButtonsCol = [0.417, 0.583];
+            const pickerButtonsCol = [0.417, 0.583];
             pickerSwatchesButtons.addRowDefinition(1.0, false);
             pickerSwatchesButtons.addColumnDefinition(pickerButtonsCol[0], false);
             pickerSwatchesButtons.addColumnDefinition(pickerButtonsCol[1], false);
             pickerBodyRight.addControl(pickerSwatchesButtons, 0, 0);
             // Picker Swatches quadrant
-            var pickerSwatches = new Grid();
+            const pickerSwatches = new Grid();
             pickerSwatches.name = "New and Current Swatches";
-            var pickeSwatchesRows = [0.04, 0.16, 0.64, 0.16];
+            const pickeSwatchesRows = [0.04, 0.16, 0.64, 0.16];
             pickerSwatches.addRowDefinition(pickeSwatchesRows[0], false);
             pickerSwatches.addRowDefinition(pickeSwatchesRows[1], false);
             pickerSwatches.addRowDefinition(pickeSwatchesRows[2], false);
             pickerSwatches.addRowDefinition(pickeSwatchesRows[3], false);
             pickerSwatchesButtons.addControl(pickerSwatches, 0, 0);
             // Active swatches
-            var activeSwatches = new Grid();
+            const activeSwatches = new Grid();
             activeSwatches.name = "Active Swatches";
             activeSwatches.width = 0.67;
             activeSwatches.addRowDefinition(0.5, false);
             activeSwatches.addRowDefinition(0.5, false);
             pickerSwatches.addControl(activeSwatches, 2, 0);
-            var labelWidth = Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[0] * 0.11);
-            var labelHeight = Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * pickeSwatchesRows[1] * 0.5);
-            var labelTextSize;
+            const labelWidth = Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[0] * 0.11);
+            const labelHeight = Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * pickeSwatchesRows[1] * 0.5);
+            let labelTextSize;
             if (options.pickerWidth > options.pickerHeight) {
                 labelTextSize = labelHeight;
             }
@@ -614,55 +596,55 @@ var ColorPicker = /** @class */ (function (_super) {
                 labelTextSize = labelWidth;
             }
             // New color swatch and previous color button
-            var newText = new TextBlock();
+            const newText = new TextBlock();
             newText.text = "new";
             newText.name = "New Color Label";
             newText.color = buttonColor;
             newText.fontSize = labelTextSize;
             pickerSwatches.addControl(newText, 1, 0);
-            var newSwatch = new Rectangle();
+            const newSwatch = new Rectangle();
             newSwatch.name = "New Color Swatch";
             newSwatch.background = options.lastColor;
             newSwatch.thickness = 0;
             activeSwatches.addControl(newSwatch, 0, 0);
-            var currentSwatch = Button.CreateSimpleButton("currentSwatch", "");
+            const currentSwatch = Button.CreateSimpleButton("currentSwatch", "");
             currentSwatch.background = options.lastColor;
             currentSwatch.thickness = 0;
-            currentSwatch.onPointerClickObservable.add(function () {
-                var revertColor = Color3.FromHexString(currentSwatch.background);
+            currentSwatch.onPointerClickObservable.add(() => {
+                const revertColor = Color3.FromHexString(currentSwatch.background);
                 updateValues(revertColor, currentSwatch.name);
                 editSwatches(false);
             });
-            currentSwatch.pointerDownAnimation = function () { };
-            currentSwatch.pointerUpAnimation = function () { };
-            currentSwatch.pointerEnterAnimation = function () { };
-            currentSwatch.pointerOutAnimation = function () { };
+            currentSwatch.pointerDownAnimation = () => { };
+            currentSwatch.pointerUpAnimation = () => { };
+            currentSwatch.pointerEnterAnimation = () => { };
+            currentSwatch.pointerOutAnimation = () => { };
             activeSwatches.addControl(currentSwatch, 1, 0);
-            var swatchOutline = new Rectangle();
+            const swatchOutline = new Rectangle();
             swatchOutline.name = "Swatch Outline";
             swatchOutline.width = 0.67;
             swatchOutline.thickness = 2;
             swatchOutline.color = currentSwatchesOutlineColor;
             swatchOutline.isHitTestVisible = false;
             pickerSwatches.addControl(swatchOutline, 2, 0);
-            var currentText = new TextBlock();
+            const currentText = new TextBlock();
             currentText.name = "Current Color Label";
             currentText.text = "current";
             currentText.color = buttonColor;
             currentText.fontSize = labelTextSize;
             pickerSwatches.addControl(currentText, 3, 0);
             // Buttons grid
-            var buttonGrid = new Grid();
+            const buttonGrid = new Grid();
             buttonGrid.name = "Button Grid";
             buttonGrid.height = 0.8;
-            var buttonGridRows = 1 / 3;
+            const buttonGridRows = 1 / 3;
             buttonGrid.addRowDefinition(buttonGridRows, false);
             buttonGrid.addRowDefinition(buttonGridRows, false);
             buttonGrid.addRowDefinition(buttonGridRows, false);
             pickerSwatchesButtons.addControl(buttonGrid, 0, 1);
             // Determine pixel width and height for all buttons from overall panel dimensions
-            var buttonWidth = Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[1] * 0.67).toString() + "px";
-            var buttonHeight = Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * (parseFloat(buttonGrid.height.toString()) / 100) * buttonGridRows * 0.7).toString() + "px";
+            const buttonWidth = Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[1] * 0.67).toString() + "px";
+            const buttonHeight = Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * (parseFloat(buttonGrid.height.toString()) / 100) * buttonGridRows * 0.7).toString() + "px";
             // Determine button type size
             if (parseFloat(buttonWidth) > parseFloat(buttonHeight)) {
                 buttonFontSize = Math.floor(parseFloat(buttonHeight) * 0.45);
@@ -671,7 +653,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 buttonFontSize = Math.floor(parseFloat(buttonWidth) * 0.11);
             }
             // Panel Buttons
-            var butOK = Button.CreateSimpleButton("butOK", "OK");
+            const butOK = Button.CreateSimpleButton("butOK", "OK");
             butOK.width = buttonWidth;
             butOK.height = buttonHeight;
             butOK.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
@@ -679,24 +661,24 @@ var ColorPicker = /** @class */ (function (_super) {
             butOK.color = buttonColor;
             butOK.fontSize = buttonFontSize;
             butOK.background = buttonBackgroundColor;
-            butOK.onPointerEnterObservable.add(function () {
+            butOK.onPointerEnterObservable.add(() => {
                 butOK.background = buttonBackgroundHoverColor;
             });
-            butOK.onPointerOutObservable.add(function () {
+            butOK.onPointerOutObservable.add(() => {
                 butOK.background = buttonBackgroundColor;
             });
-            butOK.pointerDownAnimation = function () {
+            butOK.pointerDownAnimation = () => {
                 butOK.background = buttonBackgroundClickColor;
             };
-            butOK.pointerUpAnimation = function () {
+            butOK.pointerUpAnimation = () => {
                 butOK.background = buttonBackgroundHoverColor;
             };
-            butOK.onPointerClickObservable.add(function () {
+            butOK.onPointerClickObservable.add(() => {
                 editSwatches(false);
                 closePicker(newSwatch.background);
             });
             buttonGrid.addControl(butOK, 0, 0);
-            var butCancel = Button.CreateSimpleButton("butCancel", "Cancel");
+            const butCancel = Button.CreateSimpleButton("butCancel", "Cancel");
             butCancel.width = buttonWidth;
             butCancel.height = buttonHeight;
             butCancel.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
@@ -704,19 +686,19 @@ var ColorPicker = /** @class */ (function (_super) {
             butCancel.color = buttonColor;
             butCancel.fontSize = buttonFontSize;
             butCancel.background = buttonBackgroundColor;
-            butCancel.onPointerEnterObservable.add(function () {
+            butCancel.onPointerEnterObservable.add(() => {
                 butCancel.background = buttonBackgroundHoverColor;
             });
-            butCancel.onPointerOutObservable.add(function () {
+            butCancel.onPointerOutObservable.add(() => {
                 butCancel.background = buttonBackgroundColor;
             });
-            butCancel.pointerDownAnimation = function () {
+            butCancel.pointerDownAnimation = () => {
                 butCancel.background = buttonBackgroundClickColor;
             };
-            butCancel.pointerUpAnimation = function () {
+            butCancel.pointerUpAnimation = () => {
                 butCancel.background = buttonBackgroundHoverColor;
             };
-            butCancel.onPointerClickObservable.add(function () {
+            butCancel.onPointerClickObservable.add(() => {
                 editSwatches(false);
                 closePicker(currentSwatch.background);
             });
@@ -735,35 +717,35 @@ var ColorPicker = /** @class */ (function (_super) {
                 else {
                     disableButton(butSave, true);
                 }
-                butSave.onPointerEnterObservable.add(function () {
+                butSave.onPointerEnterObservable.add(() => {
                     if (options.savedColors) {
                         if (options.savedColors.length < options.swatchLimit) {
                             butSave.background = buttonBackgroundHoverColor;
                         }
                     }
                 });
-                butSave.onPointerOutObservable.add(function () {
+                butSave.onPointerOutObservable.add(() => {
                     if (options.savedColors) {
                         if (options.savedColors.length < options.swatchLimit) {
                             butSave.background = buttonBackgroundColor;
                         }
                     }
                 });
-                butSave.pointerDownAnimation = function () {
+                butSave.pointerDownAnimation = () => {
                     if (options.savedColors) {
                         if (options.savedColors.length < options.swatchLimit) {
                             butSave.background = buttonBackgroundClickColor;
                         }
                     }
                 };
-                butSave.pointerUpAnimation = function () {
+                butSave.pointerUpAnimation = () => {
                     if (options.savedColors) {
                         if (options.savedColors.length < options.swatchLimit) {
                             butSave.background = buttonBackgroundHoverColor;
                         }
                     }
                 };
-                butSave.onPointerClickObservable.add(function () {
+                butSave.onPointerClickObservable.add(() => {
                     if (options.savedColors) {
                         if (options.savedColors.length == 0) {
                             setEditButtonVisibility(true);
@@ -780,7 +762,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 buttonGrid.addControl(butSave, 2, 0);
             }
             // Picker color values input
-            var pickerColorValues = new Grid();
+            const pickerColorValues = new Grid();
             pickerColorValues.name = "Dialog Lower Right";
             pickerColorValues.addRowDefinition(0.02, false);
             pickerColorValues.addRowDefinition(0.63, false);
@@ -788,8 +770,8 @@ var ColorPicker = /** @class */ (function (_super) {
             pickerColorValues.addRowDefinition(0.14, false);
             pickerBodyRight.addControl(pickerColorValues, 1, 0);
             // RGB values text boxes
-            var currentColor = Color3.FromHexString(options.lastColor);
-            var rgbValuesQuadrant = new Grid();
+            const currentColor = Color3.FromHexString(options.lastColor);
+            const rgbValuesQuadrant = new Grid();
             rgbValuesQuadrant.name = "RGB Values";
             rgbValuesQuadrant.width = 0.82;
             rgbValuesQuadrant.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
@@ -800,15 +782,15 @@ var ColorPicker = /** @class */ (function (_super) {
             rgbValuesQuadrant.addColumnDefinition(0.2, false);
             rgbValuesQuadrant.addColumnDefinition(0.7, false);
             pickerColorValues.addControl(rgbValuesQuadrant, 1, 0);
-            for (var i = 0; i < inputFieldLabels.length; i++) {
-                var labelText_1 = new TextBlock();
-                labelText_1.text = inputFieldLabels[i];
-                labelText_1.color = buttonColor;
-                labelText_1.fontSize = buttonFontSize;
-                rgbValuesQuadrant.addControl(labelText_1, i, 0);
+            for (let i = 0; i < inputFieldLabels.length; i++) {
+                const labelText = new TextBlock();
+                labelText.text = inputFieldLabels[i];
+                labelText.color = buttonColor;
+                labelText.fontSize = buttonFontSize;
+                rgbValuesQuadrant.addControl(labelText, i, 0);
             }
             // Input fields for RGB values
-            var rValInt = new InputText();
+            const rValInt = new InputText();
             rValInt.width = 0.83;
             rValInt.height = 0.72;
             rValInt.name = "rIntField";
@@ -816,12 +798,12 @@ var ColorPicker = /** @class */ (function (_super) {
             rValInt.text = (currentColor.r * 255).toString();
             rValInt.color = inputTextColor;
             rValInt.background = inputTextBackgroundColor;
-            rValInt.onFocusObservable.add(function () {
+            rValInt.onFocusObservable.add(() => {
                 activeField = rValInt.name;
                 lastVal = rValInt.text;
                 editSwatches(false);
             });
-            rValInt.onBlurObservable.add(function () {
+            rValInt.onBlurObservable.add(() => {
                 if (rValInt.text == "") {
                     rValInt.text = "0";
                 }
@@ -830,13 +812,13 @@ var ColorPicker = /** @class */ (function (_super) {
                     activeField = "";
                 }
             });
-            rValInt.onTextChangedObservable.add(function () {
+            rValInt.onTextChangedObservable.add(() => {
                 if (activeField == rValInt.name) {
                     updateInt(rValInt, "r");
                 }
             });
             rgbValuesQuadrant.addControl(rValInt, 0, 1);
-            var gValInt = new InputText();
+            const gValInt = new InputText();
             gValInt.width = 0.83;
             gValInt.height = 0.72;
             gValInt.name = "gIntField";
@@ -844,12 +826,12 @@ var ColorPicker = /** @class */ (function (_super) {
             gValInt.text = (currentColor.g * 255).toString();
             gValInt.color = inputTextColor;
             gValInt.background = inputTextBackgroundColor;
-            gValInt.onFocusObservable.add(function () {
+            gValInt.onFocusObservable.add(() => {
                 activeField = gValInt.name;
                 lastVal = gValInt.text;
                 editSwatches(false);
             });
-            gValInt.onBlurObservable.add(function () {
+            gValInt.onBlurObservable.add(() => {
                 if (gValInt.text == "") {
                     gValInt.text = "0";
                 }
@@ -858,13 +840,13 @@ var ColorPicker = /** @class */ (function (_super) {
                     activeField = "";
                 }
             });
-            gValInt.onTextChangedObservable.add(function () {
+            gValInt.onTextChangedObservable.add(() => {
                 if (activeField == gValInt.name) {
                     updateInt(gValInt, "g");
                 }
             });
             rgbValuesQuadrant.addControl(gValInt, 1, 1);
-            var bValInt = new InputText();
+            const bValInt = new InputText();
             bValInt.width = 0.83;
             bValInt.height = 0.72;
             bValInt.name = "bIntField";
@@ -872,12 +854,12 @@ var ColorPicker = /** @class */ (function (_super) {
             bValInt.text = (currentColor.b * 255).toString();
             bValInt.color = inputTextColor;
             bValInt.background = inputTextBackgroundColor;
-            bValInt.onFocusObservable.add(function () {
+            bValInt.onFocusObservable.add(() => {
                 activeField = bValInt.name;
                 lastVal = bValInt.text;
                 editSwatches(false);
             });
-            bValInt.onBlurObservable.add(function () {
+            bValInt.onBlurObservable.add(() => {
                 if (bValInt.text == "") {
                     bValInt.text = "0";
                 }
@@ -886,13 +868,13 @@ var ColorPicker = /** @class */ (function (_super) {
                     activeField = "";
                 }
             });
-            bValInt.onTextChangedObservable.add(function () {
+            bValInt.onTextChangedObservable.add(() => {
                 if (activeField == bValInt.name) {
                     updateInt(bValInt, "b");
                 }
             });
             rgbValuesQuadrant.addControl(bValInt, 2, 1);
-            var rValDec = new InputText();
+            const rValDec = new InputText();
             rValDec.width = 0.95;
             rValDec.height = 0.72;
             rValDec.name = "rDecField";
@@ -900,12 +882,12 @@ var ColorPicker = /** @class */ (function (_super) {
             rValDec.text = currentColor.r.toString();
             rValDec.color = inputTextColor;
             rValDec.background = inputTextBackgroundColor;
-            rValDec.onFocusObservable.add(function () {
+            rValDec.onFocusObservable.add(() => {
                 activeField = rValDec.name;
                 lastVal = rValDec.text;
                 editSwatches(false);
             });
-            rValDec.onBlurObservable.add(function () {
+            rValDec.onBlurObservable.add(() => {
                 if (parseFloat(rValDec.text) == 0 || rValDec.text == "") {
                     rValDec.text = "0";
                     updateFloat(rValDec, "r");
@@ -914,13 +896,13 @@ var ColorPicker = /** @class */ (function (_super) {
                     activeField = "";
                 }
             });
-            rValDec.onTextChangedObservable.add(function () {
+            rValDec.onTextChangedObservable.add(() => {
                 if (activeField == rValDec.name) {
                     updateFloat(rValDec, "r");
                 }
             });
             rgbValuesQuadrant.addControl(rValDec, 0, 2);
-            var gValDec = new InputText();
+            const gValDec = new InputText();
             gValDec.width = 0.95;
             gValDec.height = 0.72;
             gValDec.name = "gDecField";
@@ -928,12 +910,12 @@ var ColorPicker = /** @class */ (function (_super) {
             gValDec.text = currentColor.g.toString();
             gValDec.color = inputTextColor;
             gValDec.background = inputTextBackgroundColor;
-            gValDec.onFocusObservable.add(function () {
+            gValDec.onFocusObservable.add(() => {
                 activeField = gValDec.name;
                 lastVal = gValDec.text;
                 editSwatches(false);
             });
-            gValDec.onBlurObservable.add(function () {
+            gValDec.onBlurObservable.add(() => {
                 if (parseFloat(gValDec.text) == 0 || gValDec.text == "") {
                     gValDec.text = "0";
                     updateFloat(gValDec, "g");
@@ -942,13 +924,13 @@ var ColorPicker = /** @class */ (function (_super) {
                     activeField = "";
                 }
             });
-            gValDec.onTextChangedObservable.add(function () {
+            gValDec.onTextChangedObservable.add(() => {
                 if (activeField == gValDec.name) {
                     updateFloat(gValDec, "g");
                 }
             });
             rgbValuesQuadrant.addControl(gValDec, 1, 2);
-            var bValDec = new InputText();
+            const bValDec = new InputText();
             bValDec.width = 0.95;
             bValDec.height = 0.72;
             bValDec.name = "bDecField";
@@ -956,12 +938,12 @@ var ColorPicker = /** @class */ (function (_super) {
             bValDec.text = currentColor.b.toString();
             bValDec.color = inputTextColor;
             bValDec.background = inputTextBackgroundColor;
-            bValDec.onFocusObservable.add(function () {
+            bValDec.onFocusObservable.add(() => {
                 activeField = bValDec.name;
                 lastVal = bValDec.text;
                 editSwatches(false);
             });
-            bValDec.onBlurObservable.add(function () {
+            bValDec.onBlurObservable.add(() => {
                 if (parseFloat(bValDec.text) == 0 || bValDec.text == "") {
                     bValDec.text = "0";
                     updateFloat(bValDec, "b");
@@ -970,43 +952,43 @@ var ColorPicker = /** @class */ (function (_super) {
                     activeField = "";
                 }
             });
-            bValDec.onTextChangedObservable.add(function () {
+            bValDec.onTextChangedObservable.add(() => {
                 if (activeField == bValDec.name) {
                     updateFloat(bValDec, "b");
                 }
             });
             rgbValuesQuadrant.addControl(bValDec, 2, 2);
             // Hex value input
-            var hexValueQuadrant = new Grid();
+            const hexValueQuadrant = new Grid();
             hexValueQuadrant.name = "Hex Value";
             hexValueQuadrant.width = 0.82;
             hexValueQuadrant.addRowDefinition(1.0, false);
             hexValueQuadrant.addColumnDefinition(0.1, false);
             hexValueQuadrant.addColumnDefinition(0.9, false);
             pickerColorValues.addControl(hexValueQuadrant, 2, 0);
-            var labelText = new TextBlock();
+            const labelText = new TextBlock();
             labelText.text = "#";
             labelText.color = buttonColor;
             labelText.fontSize = buttonFontSize;
             hexValueQuadrant.addControl(labelText, 0, 0);
-            var hexVal = new InputText();
+            const hexVal = new InputText();
             hexVal.width = 0.96;
             hexVal.height = 0.72;
             hexVal.name = "hexField";
             hexVal.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
             hexVal.fontSize = buttonFontSize;
-            var minusPound = options.lastColor.split("#");
+            const minusPound = options.lastColor.split("#");
             hexVal.text = minusPound[1];
             hexVal.color = inputTextColor;
             hexVal.background = inputTextBackgroundColor;
-            hexVal.onFocusObservable.add(function () {
+            hexVal.onFocusObservable.add(() => {
                 activeField = hexVal.name;
                 lastVal = hexVal.text;
                 editSwatches(false);
             });
-            hexVal.onBlurObservable.add(function () {
+            hexVal.onBlurObservable.add(() => {
                 if (hexVal.text.length == 3) {
-                    var val = hexVal.text.split("");
+                    const val = hexVal.text.split("");
                     hexVal.text = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];
                 }
                 if (hexVal.text == "") {
@@ -1017,21 +999,21 @@ var ColorPicker = /** @class */ (function (_super) {
                     activeField = "";
                 }
             });
-            hexVal.onTextChangedObservable.add(function () {
-                var newHexValue = hexVal.text;
-                var checkHex = /[^0-9A-F]/i.test(newHexValue);
+            hexVal.onTextChangedObservable.add(() => {
+                let newHexValue = hexVal.text;
+                const checkHex = /[^0-9A-F]/i.test(newHexValue);
                 if ((hexVal.text.length > 6 || checkHex) && activeField == hexVal.name) {
                     hexVal.text = lastVal;
                 }
                 else {
                     if (hexVal.text.length < 6) {
-                        var leadingZero = 6 - hexVal.text.length;
-                        for (var i = 0; i < leadingZero; i++) {
+                        const leadingZero = 6 - hexVal.text.length;
+                        for (let i = 0; i < leadingZero; i++) {
                             newHexValue = "0" + newHexValue;
                         }
                     }
                     if (hexVal.text.length == 3) {
-                        var val = hexVal.text.split("");
+                        const val = hexVal.text.split("");
                         newHexValue = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];
                     }
                     newHexValue = "#" + newHexValue;
@@ -1054,7 +1036,7 @@ var ColorPicker = /** @class */ (function (_super) {
              */
             function updateValues(value, inputField) {
                 activeField = inputField;
-                var pickedColor = value.toHexString();
+                const pickedColor = value.toHexString();
                 newSwatch.background = pickedColor;
                 if (rValInt.name != activeField) {
                     rValInt.text = Math.floor(value.r * 255).toString();
@@ -1075,8 +1057,8 @@ var ColorPicker = /** @class */ (function (_super) {
                     bValDec.text = value.b.toString();
                 }
                 if (hexVal.name != activeField) {
-                    var minusPound_1 = pickedColor.split("#");
-                    hexVal.text = minusPound_1[1];
+                    const minusPound = pickedColor.split("#");
+                    hexVal.text = minusPound[1];
                 }
                 if (picker.name != activeField) {
                     picker.value = value;
@@ -1084,8 +1066,8 @@ var ColorPicker = /** @class */ (function (_super) {
             }
             // When the user enters an integer for R, G, or B we check to make sure it is a valid number and replace if not.
             function updateInt(field, channel) {
-                var newValue = field.text;
-                var checkVal = /[^0-9]/g.test(newValue);
+                let newValue = field.text;
+                const checkVal = /[^0-9]/g.test(newValue);
                 if (checkVal) {
                     field.text = lastVal;
                     return;
@@ -1109,7 +1091,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 if (newValue != "") {
                     newValue = parseInt(newValue).toString();
                     field.text = newValue;
-                    var newSwatchRGB = Color3.FromHexString(newSwatch.background);
+                    const newSwatchRGB = Color3.FromHexString(newSwatch.background);
                     if (activeField == field.name) {
                         if (channel == "r") {
                             updateValues(new Color3(parseInt(newValue) / 255, newSwatchRGB.g, newSwatchRGB.b), field.name);
@@ -1125,8 +1107,8 @@ var ColorPicker = /** @class */ (function (_super) {
             }
             // When the user enters a float for R, G, or B we check to make sure it is a valid number and replace if not.
             function updateFloat(field, channel) {
-                var newValue = field.text;
-                var checkVal = /[^0-9.]/g.test(newValue);
+                let newValue = field.text;
+                const checkVal = /[^0-9.]/g.test(newValue);
                 if (checkVal) {
                     field.text = lastVal;
                     return;
@@ -1154,7 +1136,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 else {
                     newValue = "0.0";
                 }
-                var newSwatchRGB = Color3.FromHexString(newSwatch.background);
+                const newSwatchRGB = Color3.FromHexString(newSwatch.background);
                 if (activeField == field.name) {
                     if (channel == "r") {
                         updateValues(new Color3(parseFloat(newValue), newSwatchRGB.g, newSwatchRGB.b), field.name);
@@ -1180,54 +1162,54 @@ var ColorPicker = /** @class */ (function (_super) {
             // Creates and styles an individual swatch when updateSwatches is called.
             function createSwatch() {
                 if (options.savedColors && options.savedColors[swatchNumber]) {
-                    var icon = void 0;
+                    let icon;
                     if (editSwatchMode) {
                         icon = "b";
                     }
                     else {
                         icon = "";
                     }
-                    var swatch_1 = Button.CreateSimpleButton("Swatch_" + swatchNumber, icon);
-                    swatch_1.fontFamily = "coreglyphs";
-                    var swatchColor = Color3.FromHexString(options.savedColors[swatchNumber]);
-                    var swatchLuminence = swatchColor.r + swatchColor.g + swatchColor.b;
+                    const swatch = Button.CreateSimpleButton("Swatch_" + swatchNumber, icon);
+                    swatch.fontFamily = "coreglyphs";
+                    const swatchColor = Color3.FromHexString(options.savedColors[swatchNumber]);
+                    const swatchLuminence = swatchColor.r + swatchColor.g + swatchColor.b;
                     // Set color of outline and textBlock based on luminance of the color swatch so feedback always visible
                     if (swatchLuminence > luminanceLimit) {
-                        swatch_1.color = iconColorDark;
+                        swatch.color = iconColorDark;
                     }
                     else {
-                        swatch_1.color = iconColorLight;
+                        swatch.color = iconColorLight;
                     }
-                    swatch_1.fontSize = Math.floor(swatchSize * 0.7);
-                    swatch_1.textBlock.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
-                    swatch_1.height = swatch_1.width = swatchSize.toString() + "px";
-                    swatch_1.background = options.savedColors[swatchNumber];
-                    swatch_1.thickness = 2;
-                    var metadata_1 = swatchNumber;
-                    swatch_1.pointerDownAnimation = function () {
-                        swatch_1.thickness = 4;
+                    swatch.fontSize = Math.floor(swatchSize * 0.7);
+                    swatch.textBlock.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+                    swatch.height = swatch.width = swatchSize.toString() + "px";
+                    swatch.background = options.savedColors[swatchNumber];
+                    swatch.thickness = 2;
+                    const metadata = swatchNumber;
+                    swatch.pointerDownAnimation = () => {
+                        swatch.thickness = 4;
                     };
-                    swatch_1.pointerUpAnimation = function () {
-                        swatch_1.thickness = 3;
+                    swatch.pointerUpAnimation = () => {
+                        swatch.thickness = 3;
                     };
-                    swatch_1.pointerEnterAnimation = function () {
-                        swatch_1.thickness = 3;
+                    swatch.pointerEnterAnimation = () => {
+                        swatch.thickness = 3;
                     };
-                    swatch_1.pointerOutAnimation = function () {
-                        swatch_1.thickness = 2;
+                    swatch.pointerOutAnimation = () => {
+                        swatch.thickness = 2;
                     };
-                    swatch_1.onPointerClickObservable.add(function () {
+                    swatch.onPointerClickObservable.add(() => {
                         if (!editSwatchMode) {
                             if (options.savedColors) {
-                                updateValues(Color3.FromHexString(options.savedColors[metadata_1]), swatch_1.name);
+                                updateValues(Color3.FromHexString(options.savedColors[metadata]), swatch.name);
                             }
                         }
                         else {
-                            deleteSwatch(metadata_1);
+                            deleteSwatch(metadata);
                             updateSwatches("", butSave);
                         }
                     });
-                    return swatch_1;
+                    return swatch;
                 }
                 else {
                     return null;
@@ -1238,9 +1220,9 @@ var ColorPicker = /** @class */ (function (_super) {
                 if (mode !== undefined) {
                     editSwatchMode = mode;
                 }
-                var thisButton;
+                let thisButton;
                 if (editSwatchMode) {
-                    for (var i = 0; i < swatchDrawer.children.length; i++) {
+                    for (let i = 0; i < swatchDrawer.children.length; i++) {
                         thisButton = swatchDrawer.children[i];
                         thisButton.textBlock.text = "b";
                     }
@@ -1249,7 +1231,7 @@ var ColorPicker = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    for (var i = 0; i < swatchDrawer.children.length; i++) {
+                    for (let i = 0; i < swatchDrawer.children.length; i++) {
                         thisButton = swatchDrawer.children[i];
                         thisButton.textBlock.text = "";
                     }
@@ -1273,8 +1255,8 @@ var ColorPicker = /** @class */ (function (_super) {
                     }
                     swatchNumber = 0;
                     swatchDrawer.clearControls();
-                    var rowCount = Math.ceil(options.savedColors.length / options.numSwatchesPerLine);
-                    var gutterCount = void 0;
+                    const rowCount = Math.ceil(options.savedColors.length / options.numSwatchesPerLine);
+                    let gutterCount;
                     if (rowCount == 0) {
                         gutterCount = 0;
                     }
@@ -1282,11 +1264,11 @@ var ColorPicker = /** @class */ (function (_super) {
                         gutterCount = rowCount + 1;
                     }
                     if (swatchDrawer.rowCount != rowCount + gutterCount) {
-                        var currentRows = swatchDrawer.rowCount;
-                        for (var i = 0; i < currentRows; i++) {
+                        const currentRows = swatchDrawer.rowCount;
+                        for (let i = 0; i < currentRows; i++) {
                             swatchDrawer.removeRowDefinition(0);
                         }
-                        for (var i = 0; i < rowCount + gutterCount; i++) {
+                        for (let i = 0; i < rowCount + gutterCount; i++) {
                             if (i % 2) {
                                 swatchDrawer.addRowDefinition(swatchSize, true);
                             }
@@ -1296,21 +1278,21 @@ var ColorPicker = /** @class */ (function (_super) {
                         }
                     }
                     swatchDrawer.height = (swatchSize * rowCount + gutterCount * gutterSize).toString() + "px";
-                    for (var y = 1, thisRow = 1; y < rowCount + gutterCount; y += 2, thisRow++) {
+                    for (let y = 1, thisRow = 1; y < rowCount + gutterCount; y += 2, thisRow++) {
                         // Determine number of buttons to create per row based on the button limit per row and number of saved colors
-                        var totalButtonsThisRow = void 0;
+                        let totalButtonsThisRow;
                         if (options.savedColors.length > thisRow * options.numSwatchesPerLine) {
                             totalButtonsThisRow = options.numSwatchesPerLine;
                         }
                         else {
                             totalButtonsThisRow = options.savedColors.length - (thisRow - 1) * options.numSwatchesPerLine;
                         }
-                        var buttonIterations = Math.min(Math.max(totalButtonsThisRow, 0), options.numSwatchesPerLine);
-                        for (var x = 0, w = 1; x < buttonIterations; x++) {
+                        const buttonIterations = Math.min(Math.max(totalButtonsThisRow, 0), options.numSwatchesPerLine);
+                        for (let x = 0, w = 1; x < buttonIterations; x++) {
                             if (x > options.numSwatchesPerLine) {
                                 continue;
                             }
-                            var swatch = createSwatch();
+                            const swatch = createSwatch();
                             if (swatch != null) {
                                 swatchDrawer.addControl(swatch, y, w);
                                 w += 2;
@@ -1343,19 +1325,19 @@ var ColorPicker = /** @class */ (function (_super) {
                     butEdit.color = buttonColor;
                     butEdit.fontSize = buttonFontSize;
                     butEdit.background = buttonBackgroundColor;
-                    butEdit.onPointerEnterObservable.add(function () {
+                    butEdit.onPointerEnterObservable.add(() => {
                         butEdit.background = buttonBackgroundHoverColor;
                     });
-                    butEdit.onPointerOutObservable.add(function () {
+                    butEdit.onPointerOutObservable.add(() => {
                         butEdit.background = buttonBackgroundColor;
                     });
-                    butEdit.pointerDownAnimation = function () {
+                    butEdit.pointerDownAnimation = () => {
                         butEdit.background = buttonBackgroundClickColor;
                     };
-                    butEdit.pointerUpAnimation = function () {
+                    butEdit.pointerUpAnimation = () => {
                         butEdit.background = buttonBackgroundHoverColor;
                     };
-                    butEdit.onPointerClickObservable.add(function () {
+                    butEdit.onPointerClickObservable.add(() => {
                         if (editSwatchMode) {
                             editSwatchMode = false;
                         }
@@ -1397,22 +1379,20 @@ var ColorPicker = /** @class */ (function (_super) {
                 advancedTexture.removeControl(dialogContainer);
             }
         });
-    };
-    ColorPicker._Epsilon = 0.000001;
-    __decorate([
-        serialize()
-    ], ColorPicker.prototype, "value", null);
-    __decorate([
-        serialize()
-    ], ColorPicker.prototype, "width", null);
-    __decorate([
-        serialize()
-    ], ColorPicker.prototype, "height", null);
-    __decorate([
-        serialize()
-    ], ColorPicker.prototype, "size", null);
-    return ColorPicker;
-}(Control));
-export { ColorPicker };
+    }
+}
+ColorPicker._Epsilon = 0.000001;
+__decorate([
+    serialize()
+], ColorPicker.prototype, "value", null);
+__decorate([
+    serialize()
+], ColorPicker.prototype, "width", null);
+__decorate([
+    serialize()
+], ColorPicker.prototype, "height", null);
+__decorate([
+    serialize()
+], ColorPicker.prototype, "size", null);
 RegisterClass("BABYLON.GUI.ColorPicker", ColorPicker);
 //# sourceMappingURL=colorpicker.js.map