@babylonjs/gui 5.0.0-rc.3 → 5.0.0-rc.6

package/2D/controls/colorpicker.js

@@ -6,9 +6,9 @@ import { Rectangle } from "./rectangle.js";
 import { Button } from "./button.js";
 import { Grid } from "./grid.js";
 import { TextBlock } from "../controls/textBlock.js";
-import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
-import { Color3 } from '@babylonjs/core/Maths/math.color.js';
-import { serialize } from '@babylonjs/core/Misc/decorators.js';
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+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) {
@@ -37,7 +37,7 @@ var ColorPicker = /** @class */ (function (_super) {
         _this.onValueChangedObservable = new Observable();
         // Events
         _this._pointerIsDown = false;
-        _this.value = new Color3(.88, .1, .1);
+        _this.value = new Color3(0.88, 0.1, 0.1);
         _this.size = "200px";
         _this.isPointerBlocker = true;
         return _this;
@@ -94,7 +94,7 @@ var ColorPicker = /** @class */ (function (_super) {
             }
             if (this._width.fromString(value)) {
                 if (this._width.getValue(this._host) === 0) {
-                    value = '1px';
+                    value = "1px";
                     this._width.fromString(value);
                 }
                 this._height.fromString(value);
@@ -119,7 +119,7 @@ var ColorPicker = /** @class */ (function (_super) {
             }
             if (this._height.fromString(value)) {
                 if (this._height.getValue(this._host) === 0) {
-                    value = '1px';
+                    value = "1px";
                     this._height.fromString(value);
                 }
                 this._width.fromString(value);
@@ -143,8 +143,11 @@ var ColorPicker = /** @class */ (function (_super) {
     ColorPicker.prototype._getTypeName = function () {
         return "ColorPicker";
     };
-    /** @hidden */
-    ColorPicker.prototype._preMeasure = function (parentMeasure, context) {
+    /**
+     * @param parentMeasure
+     * @hidden
+     */
+    ColorPicker.prototype._preMeasure = function (parentMeasure) {
         if (parentMeasure.width < parentMeasure.height) {
             this._currentMeasure.height = parentMeasure.width;
         }
@@ -153,24 +156,24 @@ var ColorPicker = /** @class */ (function (_super) {
         }
     };
     ColorPicker.prototype._updateSquareProps = function () {
-        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
-        var wheelThickness = radius * .2;
+        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 * .5;
+        var squareSize = innerDiameter / Math.sqrt(2);
+        var 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);
-        lgh.addColorStop(0, '#fff');
-        lgh.addColorStop(1, 'hsl(' + hueValue + ', 100%, 50%)');
+        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);
-        lgv.addColorStop(0, 'rgba(0,0,0,0)');
-        lgv.addColorStop(1, '#000');
+        lgv.addColorStop(0, "rgba(0,0,0,0)");
+        lgv.addColorStop(1, "#000");
         context.fillStyle = lgv;
         context.fillRect(left, top, width, height);
     };
@@ -178,12 +181,12 @@ var ColorPicker = /** @class */ (function (_super) {
         context.beginPath();
         context.arc(centerX, centerY, radius + 1, 0, 2 * Math.PI, false);
         context.lineWidth = 3;
-        context.strokeStyle = '#333333';
+        context.strokeStyle = "#333333";
         context.stroke();
         context.beginPath();
         context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
         context.lineWidth = 3;
-        context.strokeStyle = '#ffffff';
+        context.strokeStyle = "#ffffff";
         context.stroke();
     };
     ColorPicker.prototype._createColorWheelCanvas = function (radius, thickness) {
@@ -208,16 +211,16 @@ var ColorPicker = /** @class */ (function (_super) {
                 }
                 var dist = Math.sqrt(distSq);
                 var 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;
+                Color3.HSVtoRGBToRef((ang * 180) / Math.PI + 180, dist / radius, 1, color);
+                var 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);
                 //apply less alpha to bigger color pickers
-                var alphaAmount = .2;
-                var maxAlpha = .2;
-                var minAlpha = .04;
+                var alphaAmount = 0.2;
+                var maxAlpha = 0.2;
+                var minAlpha = 0.04;
                 var lowerRadius = 50;
                 var upperRadius = 150;
                 if (radius < lowerRadius) {
@@ -227,14 +230,14 @@ var ColorPicker = /** @class */ (function (_super) {
                     alphaAmount = minAlpha;
                 }
                 else {
-                    alphaAmount = (minAlpha - maxAlpha) * (radius - lowerRadius) / (upperRadius - lowerRadius) + maxAlpha;
+                    alphaAmount = ((minAlpha - maxAlpha) * (radius - lowerRadius)) / (upperRadius - lowerRadius) + maxAlpha;
                 }
-                var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
+                alphaRatio = (dist - innerRadius) / (radius - innerRadius);
                 if (alphaRatio < alphaAmount) {
                     data[index + 3] = 255 * (alphaRatio / alphaAmount);
                 }
                 else if (alphaRatio > 1 - alphaAmount) {
-                    data[index + 3] = 255 * (1.0 - ((alphaRatio - (1 - alphaAmount)) / alphaAmount));
+                    data[index + 3] = 255 * (1.0 - (alphaRatio - (1 - alphaAmount)) / alphaAmount);
                 }
                 else {
                     data[index + 3] = 255;
@@ -244,12 +247,15 @@ var ColorPicker = /** @class */ (function (_super) {
         context.putImageData(image, 0, 0);
         return canvas;
     };
-    /** @hidden */
+    /**
+     * @param context
+     * @hidden
+     */
     ColorPicker.prototype._draw = function (context) {
         context.save();
         this._applyStates(context);
-        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
-        var wheelThickness = radius * .2;
+        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;
         if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
@@ -272,19 +278,19 @@ var ColorPicker = /** @class */ (function (_super) {
         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);
-        this._drawCircle(cx, cy, radius * .04, context);
-        var dist = radius - wheelThickness * .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 * .35, context);
+        this._drawCircle(cx, cy, radius * 0.04, context);
+        var 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) {
         if (this._pointerStartedOnWheel) {
-            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
+            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
             var centerX = radius + this._currentMeasure.left;
             var centerY = radius + this._currentMeasure.top;
-            this._h = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI + 180;
+            this._h = (Math.atan2(y - centerY, x - centerX) * 180) / Math.PI + 180;
         }
         else if (this._pointerStartedOnSquare) {
             this._updateSquareProps();
@@ -303,17 +309,16 @@ var ColorPicker = /** @class */ (function (_super) {
         var left = this._squareLeft;
         var top = this._squareTop;
         var size = this._squareSize;
-        if (x >= left && x <= left + size &&
-            y >= top && y <= top + size) {
+        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) * .5;
+        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 * .2;
+        var wheelThickness = radius * 0.2;
         var innerRadius = radius - wheelThickness;
         var radiusSq = radius * radius;
         var innerRadiusSq = innerRadius * innerRadius;
@@ -381,10 +386,17 @@ var ColorPicker = /** @class */ (function (_super) {
      * subsequent launches of the dialogue.
      * @param advancedTexture defines the AdvancedDynamicTexture the dialog is assigned to
      * @param options defines size for dialog and options for saved colors. Also accepts last color picked as hex string and saved colors array as hex strings.
+     * @param options.pickerWidth
+     * @param options.pickerHeight
+     * @param options.headerHeight
+     * @param options.lastColor
+     * @param options.swatchLimit
+     * @param options.numSwatchesPerLine
+     * @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, reject) {
+        return new Promise(function (resolve) {
             // Default options
             options.pickerWidth = options.pickerWidth || "640px";
             options.pickerHeight = options.pickerHeight || "400px";
@@ -398,7 +410,7 @@ var ColorPicker = /** @class */ (function (_super) {
             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 drawerMaxSize = swatchSize * drawerMaxRows + gutterSize * (drawerMaxRows + 1);
             var containerSize = (parseInt(options.pickerHeight) + drawerMaxSize + Math.floor(swatchSize * 0.25)).toString() + "px";
             // Button Colors
             var buttonColor = "#c0c0c0";
@@ -412,491 +424,135 @@ var ColorPicker = /** @class */ (function (_super) {
             var luminanceLimit = luminanceLimitColor.r + luminanceLimitColor.g + luminanceLimitColor.b;
             var iconColorDark = "#aaaaaa";
             var iconColorLight = "#ffffff";
-            var closeIconColor;
             // Button settings
             var buttonFontSize;
             var butEdit;
-            var buttonWidth;
-            var buttonHeight;
             // Input Text Colors
             var inputFieldLabels = ["R", "G", "B"];
             var inputTextBackgroundColor = "#454545";
             var inputTextColor = "#f0f0f0";
-            // This is the current color as set by either the picker or by entering a value
-            var currentColor;
             // This int is used for naming swatches and serves as the index for calling them from the list
             var swatchNumber;
             // Menu Panel options. We need to know if the swatchDrawer exists so we can create it if needed.
             var swatchDrawer;
             var editSwatchMode = false;
             // Color InputText fields that will be updated upon value change
-            var picker;
-            var rValInt;
-            var gValInt;
-            var bValInt;
-            var rValDec;
-            var gValDec;
-            var bValDec;
-            var hexVal;
-            var newSwatch;
+            var butSave;
             var lastVal;
             var activeField;
-            /**
-            * Will update all values for InputText and ColorPicker controls based on the BABYLON.Color3 passed to this function.
-            * Each InputText control and the ColorPicker control will be tested to see if they are the activeField and if they
-            * are will receive no update. This is to prevent the input from the user being overwritten.
-            */
-            function updateValues(value, inputField) {
-                activeField = inputField;
-                var pickedColor = value.toHexString();
-                newSwatch.background = pickedColor;
-                if (rValInt.name != activeField) {
-                    rValInt.text = Math.floor(value.r * 255).toString();
-                }
-                if (gValInt.name != activeField) {
-                    gValInt.text = Math.floor(value.g * 255).toString();
-                }
-                if (bValInt.name != activeField) {
-                    bValInt.text = Math.floor(value.b * 255).toString();
-                }
-                if (rValDec.name != activeField) {
-                    rValDec.text = value.r.toString();
-                }
-                if (gValDec.name != activeField) {
-                    gValDec.text = value.g.toString();
-                }
-                if (bValDec.name != activeField) {
-                    bValDec.text = value.b.toString();
-                }
-                if (hexVal.name != activeField) {
-                    var minusPound = pickedColor.split("#");
-                    hexVal.text = minusPound[1];
-                }
-                if (picker.name != activeField) {
-                    picker.value = value;
-                }
+            // 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();
+            dialogContainer.name = "Dialog Container";
+            dialogContainer.width = options.pickerWidth;
+            if (options.savedColors) {
+                dialogContainer.height = containerSize;
+                var topRow = parseInt(options.pickerHeight) / parseInt(containerSize);
+                dialogContainer.addRowDefinition(topRow, false);
+                dialogContainer.addRowDefinition(1.0 - topRow, false);
             }
-            // 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);
-                if (checkVal) {
-                    field.text = lastVal;
-                    return;
-                }
-                else {
-                    if (newValue != "") {
-                        if (Math.floor(parseInt(newValue)) < 0) {
-                            newValue = "0";
-                        }
-                        else if (Math.floor(parseInt(newValue)) > 255) {
-                            newValue = "255";
-                        }
-                        else if (isNaN(parseInt(newValue))) {
-                            newValue = "0";
-                        }
-                    }
-                    if (activeField == field.name) {
-                        lastVal = newValue;
-                    }
-                }
-                if (newValue != "") {
-                    newValue = parseInt(newValue).toString();
-                    field.text = newValue;
-                    var newSwatchRGB = Color3.FromHexString(newSwatch.background);
-                    if (activeField == field.name) {
-                        if (channel == "r") {
-                            updateValues(new Color3((parseInt(newValue)) / 255, newSwatchRGB.g, newSwatchRGB.b), field.name);
-                        }
-                        else if (channel == "g") {
-                            updateValues(new Color3(newSwatchRGB.r, (parseInt(newValue)) / 255, newSwatchRGB.b), field.name);
-                        }
-                        else {
-                            updateValues(new Color3(newSwatchRGB.r, newSwatchRGB.g, (parseInt(newValue)) / 255), field.name);
-                        }
-                    }
-                }
+            else {
+                dialogContainer.height = options.pickerHeight;
+                dialogContainer.addRowDefinition(1.0, false);
             }
-            // 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);
-                if (checkVal) {
-                    field.text = lastVal;
-                    return;
-                }
-                else {
-                    if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
-                        if (parseFloat(newValue) < 0.0) {
-                            newValue = "0.0";
-                        }
-                        else if (parseFloat(newValue) > 1.0) {
-                            newValue = "1.0";
-                        }
-                        else if (isNaN(parseFloat(newValue))) {
-                            newValue = "0.0";
-                        }
-                    }
-                    if (activeField == field.name) {
-                        lastVal = newValue;
-                    }
-                }
-                if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
-                    newValue = parseFloat(newValue).toString();
-                    field.text = newValue;
+            advancedTexture.addControl(dialogContainer);
+            // Swatch drawer which contains all saved color buttons
+            if (options.savedColors) {
+                swatchDrawer = new Grid();
+                swatchDrawer.name = "Swatch Drawer";
+                swatchDrawer.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+                swatchDrawer.background = buttonBackgroundColor;
+                swatchDrawer.width = options.pickerWidth;
+                var initialRows = options.savedColors.length / options.numSwatchesPerLine;
+                var gutterCount = void 0;
+                if (initialRows == 0) {
+                    gutterCount = 0;
                 }
                 else {
-                    newValue = "0.0";
+                    gutterCount = initialRows + 1;
                 }
-                var newSwatchRGB = Color3.FromHexString(newSwatch.background);
-                if (activeField == field.name) {
-                    if (channel == "r") {
-                        updateValues(new Color3(parseFloat(newValue), newSwatchRGB.g, newSwatchRGB.b), field.name);
-                    }
-                    else if (channel == "g") {
-                        updateValues(new Color3(newSwatchRGB.r, parseFloat(newValue), newSwatchRGB.b), field.name);
+                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++) {
+                    if (i % 2 != 0) {
+                        swatchDrawer.addRowDefinition(swatchSize, true);
                     }
                     else {
-                        updateValues(new Color3(newSwatchRGB.r, newSwatchRGB.g, parseFloat(newValue)), field.name);
+                        swatchDrawer.addRowDefinition(gutterSize, true);
                     }
                 }
-            }
-            // Removes the current index from the savedColors array. Drawer can then be regenerated.
-            function deleteSwatch(index) {
-                if (options.savedColors) {
-                    options.savedColors.splice(index, 1);
-                }
-                if (options.savedColors && options.savedColors.length == 0) {
-                    setEditButtonVisibility(false);
-                    editSwatchMode = false;
-                }
-            }
-            // Creates and styles an individual swatch when updateSwatches is called.
-            function createSwatch() {
-                if (options.savedColors && options.savedColors[swatchNumber]) {
-                    if (editSwatchMode) {
-                        var icon = "b";
-                    }
-                    else {
-                        var icon = "";
-                    }
-                    var swatch = Button.CreateSimpleButton("Swatch_" + swatchNumber, icon);
-                    swatch.fontFamily = "BabylonJSglyphs";
-                    var swatchColor = Color3.FromHexString(options.savedColors[swatchNumber]);
-                    var 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.color = iconColorDark;
+                for (var i = 0; i < options.numSwatchesPerLine * 2 + 1; i++) {
+                    if (i % 2 != 0) {
+                        swatchDrawer.addColumnDefinition(swatchSize, true);
                     }
                     else {
-                        swatch.color = iconColorLight;
+                        swatchDrawer.addColumnDefinition(gutterSize, true);
                     }
-                    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;
-                    var metadata_1 = swatchNumber;
-                    swatch.pointerDownAnimation = function () {
-                        swatch.thickness = 4;
-                    };
-                    swatch.pointerUpAnimation = function () {
-                        swatch.thickness = 3;
-                    };
-                    swatch.pointerEnterAnimation = function () {
-                        swatch.thickness = 3;
-                    };
-                    swatch.pointerOutAnimation = function () {
-                        swatch.thickness = 2;
-                    };
-                    swatch.onPointerClickObservable.add(function () {
-                        if (!editSwatchMode) {
-                            if (options.savedColors) {
-                                updateValues(Color3.FromHexString(options.savedColors[metadata_1]), swatch.name);
-                            }
-                        }
-                        else {
-                            deleteSwatch(metadata_1);
-                            updateSwatches("", butSave);
-                        }
-                    });
-                    return swatch;
-                }
-                else {
-                    return null;
                 }
+                dialogContainer.addControl(swatchDrawer, 1, 0);
             }
-            // Mode switch to render button text and close symbols on swatch controls
-            function editSwatches(mode) {
-                if (mode !== undefined) {
-                    editSwatchMode = mode;
-                }
-                if (editSwatchMode) {
-                    for (var i = 0; i < swatchDrawer.children.length; i++) {
-                        var thisButton = swatchDrawer.children[i];
-                        thisButton.textBlock.text = "b";
-                    }
-                    if (butEdit !== undefined) {
-                        butEdit.textBlock.text = "Done";
-                    }
-                }
-                else {
-                    for (var i = 0; i < swatchDrawer.children.length; i++) {
-                        var thisButton = swatchDrawer.children[i];
-                        thisButton.textBlock.text = "";
-                    }
-                    if (butEdit !== undefined) {
-                        butEdit.textBlock.text = "Edit";
-                    }
-                }
-            }
-            /**
-             * When Save Color button is pressed this function will first create a swatch drawer if one is not already
-             * made. Then all controls are removed from the drawer and we step through the savedColors array and
-             * creates one swatch per color. It will also set the height of the drawer control based on how many
-             * saved colors there are and how many can be stored per row.
-             */
-            function updateSwatches(color, button) {
-                if (options.savedColors) {
-                    if (color != "") {
-                        options.savedColors.push(color);
-                    }
-                    swatchNumber = 0;
-                    swatchDrawer.clearControls();
-                    var rowCount = Math.ceil(options.savedColors.length / options.numSwatchesPerLine);
-                    if (rowCount == 0) {
-                        var gutterCount = 0;
-                    }
-                    else {
-                        var gutterCount = rowCount + 1;
-                    }
-                    if (swatchDrawer.rowCount != rowCount + gutterCount) {
-                        var currentRows = swatchDrawer.rowCount;
-                        for (var i = 0; i < currentRows; i++) {
-                            swatchDrawer.removeRowDefinition(0);
-                        }
-                        for (var i = 0; i < rowCount + gutterCount; i++) {
-                            if (i % 2) {
-                                swatchDrawer.addRowDefinition(swatchSize, true);
-                            }
-                            else {
-                                swatchDrawer.addRowDefinition(gutterSize, true);
-                            }
-                        }
-                    }
-                    swatchDrawer.height = ((swatchSize * rowCount) + (gutterCount * gutterSize)).toString() + "px";
-                    for (var 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
-                        if (options.savedColors.length > thisRow * options.numSwatchesPerLine) {
-                            var totalButtonsThisRow = options.numSwatchesPerLine;
-                        }
-                        else {
-                            var 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++) {
-                            if (x > options.numSwatchesPerLine) {
-                                continue;
-                            }
-                            var swatch = createSwatch();
-                            if (swatch != null) {
-                                swatchDrawer.addControl(swatch, y, w);
-                                w += 2;
-                                swatchNumber++;
-                            }
-                            else {
-                                continue;
-                            }
-                        }
-                    }
-                    if (options.savedColors.length >= options.swatchLimit) {
-                        disableButton(button, true);
-                    }
-                    else {
-                        disableButton(button, false);
-                    }
-                }
-            }
-            // Shows or hides edit swatches button depending on if there are saved swatches
-            function setEditButtonVisibility(enableButton) {
-                if (enableButton) {
-                    butEdit = Button.CreateSimpleButton("butEdit", "Edit");
-                    butEdit.width = buttonWidth;
-                    butEdit.height = buttonHeight;
-                    butEdit.left = (Math.floor(parseInt(buttonWidth) * 0.1)).toString() + "px";
-                    butEdit.top = (parseFloat(butEdit.left) * -1).toString() + "px";
-                    butEdit.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
-                    butEdit.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-                    butEdit.thickness = 2;
-                    butEdit.color = buttonColor;
-                    butEdit.fontSize = buttonFontSize;
-                    butEdit.background = buttonBackgroundColor;
-                    butEdit.onPointerEnterObservable.add(function () {
-                        butEdit.background = buttonBackgroundHoverColor;
-                    });
-                    butEdit.onPointerOutObservable.add(function () {
-                        butEdit.background = buttonBackgroundColor;
-                    });
-                    butEdit.pointerDownAnimation = function () {
-                        butEdit.background = buttonBackgroundClickColor;
-                    };
-                    butEdit.pointerUpAnimation = function () {
-                        butEdit.background = buttonBackgroundHoverColor;
-                    };
-                    butEdit.onPointerClickObservable.add(function () {
-                        if (editSwatchMode) {
-                            editSwatchMode = false;
-                        }
-                        else {
-                            editSwatchMode = true;
-                        }
-                        editSwatches();
-                    });
-                    pickerGrid.addControl(butEdit, 1, 0);
-                }
-                else {
-                    pickerGrid.removeControl(butEdit);
-                }
-            }
-            // Called when the user hits the limit of saved colors in the drawer.
-            function disableButton(button, disabled) {
-                if (disabled) {
-                    button.color = buttonDisabledColor;
-                    button.background = buttonDisabledBackgroundColor;
-                }
-                else {
-                    button.color = buttonColor;
-                    button.background = buttonBackgroundColor;
-                }
-            }
-            // Passes last chosen color back to scene and kills dialog by removing from AdvancedDynamicTexture
-            function closePicker(color) {
-                if (options.savedColors && options.savedColors.length > 0) {
-                    resolve({
-                        savedColors: options.savedColors,
-                        pickedColor: color
-                    });
-                }
-                else {
-                    resolve({
-                        pickedColor: color
-                    });
-                }
-                advancedTexture.removeControl(dialogContainer);
-            }
-            // Dialogue 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();
-            dialogContainer.name = "Dialog Container";
-            dialogContainer.width = options.pickerWidth;
-            if (options.savedColors) {
-                dialogContainer.height = containerSize;
-                var topRow = parseInt(options.pickerHeight) / parseInt(containerSize);
-                dialogContainer.addRowDefinition(topRow, false);
-                dialogContainer.addRowDefinition(1.0 - topRow, false);
-            }
-            else {
-                dialogContainer.height = options.pickerHeight;
-                dialogContainer.addRowDefinition(1.0, false);
-            }
-            advancedTexture.addControl(dialogContainer);
-            // Swatch drawer which contains all saved color buttons
-            if (options.savedColors) {
-                swatchDrawer = new Grid();
-                swatchDrawer.name = "Swatch Drawer";
-                swatchDrawer.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-                swatchDrawer.background = buttonBackgroundColor;
-                swatchDrawer.width = options.pickerWidth;
-                var initialRows = options.savedColors.length / options.numSwatchesPerLine;
-                if (initialRows == 0) {
-                    var gutterCount = 0;
-                }
-                else {
-                    var gutterCount = initialRows + 1;
-                }
-                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++) {
-                    if (i % 2 != 0) {
-                        swatchDrawer.addRowDefinition(swatchSize, true);
-                    }
-                    else {
-                        swatchDrawer.addRowDefinition(gutterSize, true);
-                    }
-                }
-                for (var i = 0; i < options.numSwatchesPerLine * 2 + 1; i++) {
-                    if (i % 2 != 0) {
-                        swatchDrawer.addColumnDefinition(swatchSize, true);
-                    }
-                    else {
-                        swatchDrawer.addColumnDefinition(gutterSize, true);
-                    }
-                }
-                dialogContainer.addControl(swatchDrawer, 1, 0);
-            }
-            // Picker container
-            var 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];
-            pickerPanel.addRowDefinition(pickerPanelRows[0], false);
-            pickerPanel.addRowDefinition(pickerPanelRows[1], false);
-            dialogContainer.addControl(pickerPanel, 0, 0);
-            // Picker container header
-            var 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");
-            closeButton.fontFamily = "BabylonJSglyphs";
-            var headerColor3 = Color3.FromHexString(header.background);
-            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;
-            closeButton.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
-            closeButton.height = closeButton.width = options.headerHeight;
-            closeButton.background = header.background;
-            closeButton.thickness = 0;
-            closeButton.pointerDownAnimation = function () {
-            };
-            closeButton.pointerUpAnimation = function () {
-                closeButton.background = header.background;
-            };
-            closeButton.pointerEnterAnimation = function () {
-                closeButton.color = header.background;
-                closeButton.background = "red";
-            };
-            closeButton.pointerOutAnimation = function () {
-                closeButton.color = closeIconColor.toHexString();
-                closeButton.background = header.background;
-            };
-            closeButton.onPointerClickObservable.add(function () {
-                closePicker(currentSwatch.background);
-            });
-            pickerPanel.addControl(closeButton, 0, 0);
-            // Dialog container body
-            var dialogBody = new Grid();
-            dialogBody.name = "Dialogue Body";
-            dialogBody.background = buttonBackgroundColor;
-            var 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();
-            pickerGrid.name = "Picker Grid";
-            pickerGrid.addRowDefinition(0.85, false);
-            pickerGrid.addRowDefinition(0.15, false);
-            dialogBody.addControl(pickerGrid, 0, 0);
-            //  Picker control
-            picker = new ColorPicker();
-            picker.name = "GUI Color Picker";
-            if (options.pickerHeight < options.pickerWidth) {
-                picker.width = 0.89;
+            // Picker container
+            var 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];
+            pickerPanel.addRowDefinition(pickerPanelRows[0], false);
+            pickerPanel.addRowDefinition(pickerPanelRows[1], false);
+            dialogContainer.addControl(pickerPanel, 0, 0);
+            // Picker container header
+            var 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");
+            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);
+            closeButton.color = closeIconColor.toHexString();
+            closeButton.fontSize = Math.floor(parseInt(options.headerHeight) * 0.6);
+            closeButton.textBlock.textVerticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+            closeButton.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
+            closeButton.height = closeButton.width = options.headerHeight;
+            closeButton.background = header.background;
+            closeButton.thickness = 0;
+            closeButton.pointerDownAnimation = function () { };
+            closeButton.pointerUpAnimation = function () {
+                closeButton.background = header.background;
+            };
+            closeButton.pointerEnterAnimation = function () {
+                closeButton.color = header.background;
+                closeButton.background = "red";
+            };
+            closeButton.pointerOutAnimation = function () {
+                closeButton.color = closeIconColor.toHexString();
+                closeButton.background = header.background;
+            };
+            closeButton.onPointerClickObservable.add(function () {
+                closePicker(currentSwatch.background);
+            });
+            pickerPanel.addControl(closeButton, 0, 0);
+            // Dialog container body
+            var dialogBody = new Grid();
+            dialogBody.name = "Dialogue Body";
+            dialogBody.background = buttonBackgroundColor;
+            var 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();
+            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();
+            picker.name = "GUI Color Picker";
+            if (options.pickerHeight < options.pickerWidth) {
+                picker.width = 0.89;
             }
             else {
                 picker.height = 0.89;
@@ -910,6 +566,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 editSwatches(false);
             });
             picker.onValueChangedObservable.add(function (value) {
+                // value is a color3
                 if (activeField == picker.name) {
                     updateValues(value, picker.name);
                 }
@@ -947,13 +604,14 @@ var ColorPicker = /** @class */ (function (_super) {
             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 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;
             if (options.pickerWidth > options.pickerHeight) {
-                var labelTextSize = labelHeight;
+                labelTextSize = labelHeight;
             }
             else {
-                var labelTextSize = labelWidth;
+                labelTextSize = labelWidth;
             }
             // New color swatch and previous color button
             var newText = new TextBlock();
@@ -962,7 +620,7 @@ var ColorPicker = /** @class */ (function (_super) {
             newText.color = buttonColor;
             newText.fontSize = labelTextSize;
             pickerSwatches.addControl(newText, 1, 0);
-            newSwatch = new Rectangle();
+            var newSwatch = new Rectangle();
             newSwatch.name = "New Color Swatch";
             newSwatch.background = options.lastColor;
             newSwatch.thickness = 0;
@@ -1003,8 +661,8 @@ var ColorPicker = /** @class */ (function (_super) {
             buttonGrid.addRowDefinition(buttonGridRows, false);
             pickerSwatchesButtons.addControl(buttonGrid, 0, 1);
             // Determine pixel width and height for all buttons from overall panel dimensions
-            buttonWidth = (Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[1] * 0.67)).toString() + "px";
-            buttonHeight = (Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * (parseFloat(buttonGrid.height.toString()) / 100) * buttonGridRows * 0.7)).toString() + "px";
+            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";
             // Determine button type size
             if (parseFloat(buttonWidth) > parseFloat(buttonHeight)) {
                 buttonFontSize = Math.floor(parseFloat(buttonHeight) * 0.45);
@@ -1021,8 +679,12 @@ var ColorPicker = /** @class */ (function (_super) {
             butOK.color = buttonColor;
             butOK.fontSize = buttonFontSize;
             butOK.background = buttonBackgroundColor;
-            butOK.onPointerEnterObservable.add(function () { butOK.background = buttonBackgroundHoverColor; });
-            butOK.onPointerOutObservable.add(function () { butOK.background = buttonBackgroundColor; });
+            butOK.onPointerEnterObservable.add(function () {
+                butOK.background = buttonBackgroundHoverColor;
+            });
+            butOK.onPointerOutObservable.add(function () {
+                butOK.background = buttonBackgroundColor;
+            });
             butOK.pointerDownAnimation = function () {
                 butOK.background = buttonBackgroundClickColor;
             };
@@ -1042,8 +704,12 @@ var ColorPicker = /** @class */ (function (_super) {
             butCancel.color = buttonColor;
             butCancel.fontSize = buttonFontSize;
             butCancel.background = buttonBackgroundColor;
-            butCancel.onPointerEnterObservable.add(function () { butCancel.background = buttonBackgroundHoverColor; });
-            butCancel.onPointerOutObservable.add(function () { butCancel.background = buttonBackgroundColor; });
+            butCancel.onPointerEnterObservable.add(function () {
+                butCancel.background = buttonBackgroundHoverColor;
+            });
+            butCancel.onPointerOutObservable.add(function () {
+                butCancel.background = buttonBackgroundColor;
+            });
             butCancel.pointerDownAnimation = function () {
                 butCancel.background = buttonBackgroundClickColor;
             };
@@ -1056,7 +722,7 @@ var ColorPicker = /** @class */ (function (_super) {
             });
             buttonGrid.addControl(butCancel, 1, 0);
             if (options.savedColors) {
-                var butSave = Button.CreateSimpleButton("butSave", "Save");
+                butSave = Button.CreateSimpleButton("butSave", "Save");
                 butSave.width = buttonWidth;
                 butSave.height = buttonHeight;
                 butSave.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
@@ -1122,7 +788,7 @@ var ColorPicker = /** @class */ (function (_super) {
             pickerColorValues.addRowDefinition(0.14, false);
             pickerBodyRight.addControl(pickerColorValues, 1, 0);
             // RGB values text boxes
-            currentColor = Color3.FromHexString(options.lastColor);
+            var currentColor = Color3.FromHexString(options.lastColor);
             var rgbValuesQuadrant = new Grid();
             rgbValuesQuadrant.name = "RGB Values";
             rgbValuesQuadrant.width = 0.82;
@@ -1135,14 +801,14 @@ var ColorPicker = /** @class */ (function (_super) {
             rgbValuesQuadrant.addColumnDefinition(0.7, false);
             pickerColorValues.addControl(rgbValuesQuadrant, 1, 0);
             for (var i = 0; i < inputFieldLabels.length; i++) {
-                var labelText = new TextBlock();
-                labelText.text = inputFieldLabels[i];
-                labelText.color = buttonColor;
-                labelText.fontSize = buttonFontSize;
-                rgbValuesQuadrant.addControl(labelText, i, 0);
+                var labelText_1 = new TextBlock();
+                labelText_1.text = inputFieldLabels[i];
+                labelText_1.color = buttonColor;
+                labelText_1.fontSize = buttonFontSize;
+                rgbValuesQuadrant.addControl(labelText_1, i, 0);
             }
             // Input fields for RGB values
-            rValInt = new InputText();
+            var rValInt = new InputText();
             rValInt.width = 0.83;
             rValInt.height = 0.72;
             rValInt.name = "rIntField";
@@ -1170,7 +836,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 }
             });
             rgbValuesQuadrant.addControl(rValInt, 0, 1);
-            gValInt = new InputText();
+            var gValInt = new InputText();
             gValInt.width = 0.83;
             gValInt.height = 0.72;
             gValInt.name = "gIntField";
@@ -1198,7 +864,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 }
             });
             rgbValuesQuadrant.addControl(gValInt, 1, 1);
-            bValInt = new InputText();
+            var bValInt = new InputText();
             bValInt.width = 0.83;
             bValInt.height = 0.72;
             bValInt.name = "bIntField";
@@ -1226,7 +892,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 }
             });
             rgbValuesQuadrant.addControl(bValInt, 2, 1);
-            rValDec = new InputText();
+            var rValDec = new InputText();
             rValDec.width = 0.95;
             rValDec.height = 0.72;
             rValDec.name = "rDecField";
@@ -1254,7 +920,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 }
             });
             rgbValuesQuadrant.addControl(rValDec, 0, 2);
-            gValDec = new InputText();
+            var gValDec = new InputText();
             gValDec.width = 0.95;
             gValDec.height = 0.72;
             gValDec.name = "gDecField";
@@ -1282,7 +948,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 }
             });
             rgbValuesQuadrant.addControl(gValDec, 1, 2);
-            bValDec = new InputText();
+            var bValDec = new InputText();
             bValDec.width = 0.95;
             bValDec.height = 0.72;
             bValDec.name = "bDecField";
@@ -1323,7 +989,7 @@ var ColorPicker = /** @class */ (function (_super) {
             labelText.color = buttonColor;
             labelText.fontSize = buttonFontSize;
             hexValueQuadrant.addControl(labelText, 0, 0);
-            hexVal = new InputText();
+            var hexVal = new InputText();
             hexVal.width = 0.96;
             hexVal.height = 0.72;
             hexVal.name = "hexField";
@@ -1379,6 +1045,357 @@ var ColorPicker = /** @class */ (function (_super) {
             if (options.savedColors && options.savedColors.length > 0) {
                 updateSwatches("", butSave);
             }
+            /**
+             * Will update all values for InputText and ColorPicker controls based on the BABYLON.Color3 passed to this function.
+             * Each InputText control and the ColorPicker control will be tested to see if they are the activeField and if they
+             * are will receive no update. This is to prevent the input from the user being overwritten.
+             * @param value
+             * @param inputField
+             */
+            function updateValues(value, inputField) {
+                activeField = inputField;
+                var pickedColor = value.toHexString();
+                newSwatch.background = pickedColor;
+                if (rValInt.name != activeField) {
+                    rValInt.text = Math.floor(value.r * 255).toString();
+                }
+                if (gValInt.name != activeField) {
+                    gValInt.text = Math.floor(value.g * 255).toString();
+                }
+                if (bValInt.name != activeField) {
+                    bValInt.text = Math.floor(value.b * 255).toString();
+                }
+                if (rValDec.name != activeField) {
+                    rValDec.text = value.r.toString();
+                }
+                if (gValDec.name != activeField) {
+                    gValDec.text = value.g.toString();
+                }
+                if (bValDec.name != activeField) {
+                    bValDec.text = value.b.toString();
+                }
+                if (hexVal.name != activeField) {
+                    var minusPound_1 = pickedColor.split("#");
+                    hexVal.text = minusPound_1[1];
+                }
+                if (picker.name != activeField) {
+                    picker.value = value;
+                }
+            }
+            // 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);
+                if (checkVal) {
+                    field.text = lastVal;
+                    return;
+                }
+                else {
+                    if (newValue != "") {
+                        if (Math.floor(parseInt(newValue)) < 0) {
+                            newValue = "0";
+                        }
+                        else if (Math.floor(parseInt(newValue)) > 255) {
+                            newValue = "255";
+                        }
+                        else if (isNaN(parseInt(newValue))) {
+                            newValue = "0";
+                        }
+                    }
+                    if (activeField == field.name) {
+                        lastVal = newValue;
+                    }
+                }
+                if (newValue != "") {
+                    newValue = parseInt(newValue).toString();
+                    field.text = newValue;
+                    var newSwatchRGB = Color3.FromHexString(newSwatch.background);
+                    if (activeField == field.name) {
+                        if (channel == "r") {
+                            updateValues(new Color3(parseInt(newValue) / 255, newSwatchRGB.g, newSwatchRGB.b), field.name);
+                        }
+                        else if (channel == "g") {
+                            updateValues(new Color3(newSwatchRGB.r, parseInt(newValue) / 255, newSwatchRGB.b), field.name);
+                        }
+                        else {
+                            updateValues(new Color3(newSwatchRGB.r, newSwatchRGB.g, parseInt(newValue) / 255), field.name);
+                        }
+                    }
+                }
+            }
+            // 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);
+                if (checkVal) {
+                    field.text = lastVal;
+                    return;
+                }
+                else {
+                    if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
+                        if (parseFloat(newValue) < 0.0) {
+                            newValue = "0.0";
+                        }
+                        else if (parseFloat(newValue) > 1.0) {
+                            newValue = "1.0";
+                        }
+                        else if (isNaN(parseFloat(newValue))) {
+                            newValue = "0.0";
+                        }
+                    }
+                    if (activeField == field.name) {
+                        lastVal = newValue;
+                    }
+                }
+                if (newValue != "" && newValue != "." && parseFloat(newValue) != 0) {
+                    newValue = parseFloat(newValue).toString();
+                    field.text = newValue;
+                }
+                else {
+                    newValue = "0.0";
+                }
+                var newSwatchRGB = Color3.FromHexString(newSwatch.background);
+                if (activeField == field.name) {
+                    if (channel == "r") {
+                        updateValues(new Color3(parseFloat(newValue), newSwatchRGB.g, newSwatchRGB.b), field.name);
+                    }
+                    else if (channel == "g") {
+                        updateValues(new Color3(newSwatchRGB.r, parseFloat(newValue), newSwatchRGB.b), field.name);
+                    }
+                    else {
+                        updateValues(new Color3(newSwatchRGB.r, newSwatchRGB.g, parseFloat(newValue)), field.name);
+                    }
+                }
+            }
+            // Removes the current index from the savedColors array. Drawer can then be regenerated.
+            function deleteSwatch(index) {
+                if (options.savedColors) {
+                    options.savedColors.splice(index, 1);
+                }
+                if (options.savedColors && options.savedColors.length == 0) {
+                    setEditButtonVisibility(false);
+                    editSwatchMode = false;
+                }
+            }
+            // Creates and styles an individual swatch when updateSwatches is called.
+            function createSwatch() {
+                if (options.savedColors && options.savedColors[swatchNumber]) {
+                    var icon = void 0;
+                    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;
+                    // Set color of outline and textBlock based on luminance of the color swatch so feedback always visible
+                    if (swatchLuminence > luminanceLimit) {
+                        swatch_1.color = iconColorDark;
+                    }
+                    else {
+                        swatch_1.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_1.pointerUpAnimation = function () {
+                        swatch_1.thickness = 3;
+                    };
+                    swatch_1.pointerEnterAnimation = function () {
+                        swatch_1.thickness = 3;
+                    };
+                    swatch_1.pointerOutAnimation = function () {
+                        swatch_1.thickness = 2;
+                    };
+                    swatch_1.onPointerClickObservable.add(function () {
+                        if (!editSwatchMode) {
+                            if (options.savedColors) {
+                                updateValues(Color3.FromHexString(options.savedColors[metadata_1]), swatch_1.name);
+                            }
+                        }
+                        else {
+                            deleteSwatch(metadata_1);
+                            updateSwatches("", butSave);
+                        }
+                    });
+                    return swatch_1;
+                }
+                else {
+                    return null;
+                }
+            }
+            // Mode switch to render button text and close symbols on swatch controls
+            function editSwatches(mode) {
+                if (mode !== undefined) {
+                    editSwatchMode = mode;
+                }
+                var thisButton;
+                if (editSwatchMode) {
+                    for (var i = 0; i < swatchDrawer.children.length; i++) {
+                        thisButton = swatchDrawer.children[i];
+                        thisButton.textBlock.text = "b";
+                    }
+                    if (butEdit !== undefined) {
+                        butEdit.textBlock.text = "Done";
+                    }
+                }
+                else {
+                    for (var i = 0; i < swatchDrawer.children.length; i++) {
+                        thisButton = swatchDrawer.children[i];
+                        thisButton.textBlock.text = "";
+                    }
+                    if (butEdit !== undefined) {
+                        butEdit.textBlock.text = "Edit";
+                    }
+                }
+            }
+            /**
+             * When Save Color button is pressed this function will first create a swatch drawer if one is not already
+             * made. Then all controls are removed from the drawer and we step through the savedColors array and
+             * creates one swatch per color. It will also set the height of the drawer control based on how many
+             * saved colors there are and how many can be stored per row.
+             * @param color
+             * @param button
+             */
+            function updateSwatches(color, button) {
+                if (options.savedColors) {
+                    if (color != "") {
+                        options.savedColors.push(color);
+                    }
+                    swatchNumber = 0;
+                    swatchDrawer.clearControls();
+                    var rowCount = Math.ceil(options.savedColors.length / options.numSwatchesPerLine);
+                    var gutterCount = void 0;
+                    if (rowCount == 0) {
+                        gutterCount = 0;
+                    }
+                    else {
+                        gutterCount = rowCount + 1;
+                    }
+                    if (swatchDrawer.rowCount != rowCount + gutterCount) {
+                        var currentRows = swatchDrawer.rowCount;
+                        for (var i = 0; i < currentRows; i++) {
+                            swatchDrawer.removeRowDefinition(0);
+                        }
+                        for (var i = 0; i < rowCount + gutterCount; i++) {
+                            if (i % 2) {
+                                swatchDrawer.addRowDefinition(swatchSize, true);
+                            }
+                            else {
+                                swatchDrawer.addRowDefinition(gutterSize, true);
+                            }
+                        }
+                    }
+                    swatchDrawer.height = (swatchSize * rowCount + gutterCount * gutterSize).toString() + "px";
+                    for (var 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;
+                        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++) {
+                            if (x > options.numSwatchesPerLine) {
+                                continue;
+                            }
+                            var swatch = createSwatch();
+                            if (swatch != null) {
+                                swatchDrawer.addControl(swatch, y, w);
+                                w += 2;
+                                swatchNumber++;
+                            }
+                            else {
+                                continue;
+                            }
+                        }
+                    }
+                    if (options.savedColors.length >= options.swatchLimit) {
+                        disableButton(button, true);
+                    }
+                    else {
+                        disableButton(button, false);
+                    }
+                }
+            }
+            // Shows or hides edit swatches button depending on if there are saved swatches
+            function setEditButtonVisibility(enableButton) {
+                if (enableButton) {
+                    butEdit = Button.CreateSimpleButton("butEdit", "Edit");
+                    butEdit.width = buttonWidth;
+                    butEdit.height = buttonHeight;
+                    butEdit.left = Math.floor(parseInt(buttonWidth) * 0.1).toString() + "px";
+                    butEdit.top = (parseFloat(butEdit.left) * -1).toString() + "px";
+                    butEdit.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
+                    butEdit.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+                    butEdit.thickness = 2;
+                    butEdit.color = buttonColor;
+                    butEdit.fontSize = buttonFontSize;
+                    butEdit.background = buttonBackgroundColor;
+                    butEdit.onPointerEnterObservable.add(function () {
+                        butEdit.background = buttonBackgroundHoverColor;
+                    });
+                    butEdit.onPointerOutObservable.add(function () {
+                        butEdit.background = buttonBackgroundColor;
+                    });
+                    butEdit.pointerDownAnimation = function () {
+                        butEdit.background = buttonBackgroundClickColor;
+                    };
+                    butEdit.pointerUpAnimation = function () {
+                        butEdit.background = buttonBackgroundHoverColor;
+                    };
+                    butEdit.onPointerClickObservable.add(function () {
+                        if (editSwatchMode) {
+                            editSwatchMode = false;
+                        }
+                        else {
+                            editSwatchMode = true;
+                        }
+                        editSwatches();
+                    });
+                    pickerGrid.addControl(butEdit, 1, 0);
+                }
+                else {
+                    pickerGrid.removeControl(butEdit);
+                }
+            }
+            // Called when the user hits the limit of saved colors in the drawer.
+            function disableButton(button, disabled) {
+                if (disabled) {
+                    button.color = buttonDisabledColor;
+                    button.background = buttonDisabledBackgroundColor;
+                }
+                else {
+                    button.color = buttonColor;
+                    button.background = buttonBackgroundColor;
+                }
+            }
+            // Passes last chosen color back to scene and kills dialog by removing from AdvancedDynamicTexture
+            function closePicker(color) {
+                if (options.savedColors && options.savedColors.length > 0) {
+                    resolve({
+                        savedColors: options.savedColors,
+                        pickedColor: color,
+                    });
+                }
+                else {
+                    resolve({
+                        pickedColor: color,
+                    });
+                }
+                advancedTexture.removeControl(dialogContainer);
+            }
         });
     };
     ColorPicker._Epsilon = 0.000001;