Fixes color formatting bug. Closes #81. (#83)

* Fixes color formatting bug. Closes #81.

* Update comment.

* Fixes return type.

src/core/Remixer.ts

@@ -307,6 +307,9 @@ class Remixer {
    * @param {any} selectedValue The new selected value.
    */
   static cloneAndUpdateVariable(variable: Variable, selectedValue: any): void {
+    // First make sure selected value is in proper format.
+    selectedValue = variable.formatValue(selectedValue);
+
     if (variable.selectedValue !== selectedValue) {
       let clonedVariable = variable.clone();
       this.attachedInstance._variables[variable.key] = clonedVariable;

src/core/variables/ColorVariable.ts

@@ -120,4 +120,17 @@ export class ColorVariable extends Variable implements IColorVariableParams {
     variable.title = data.title;
     return variable;
   }
+
+  /**
+   * Returns color value formatted as string if not already.
+   * @override
+   * @param  {any} value The value that should be formatted.
+   * @return {string}    Return the original string or formatted string value.
+   */
+  formatValue(value: any): string {
+    if (typeof value === "object") {
+      return ColorUtils.toRgbaString(value);
+    }
+    return value;
+  }
 }

src/core/variables/Variable.ts

@@ -254,4 +254,15 @@ export class Variable implements IVariableParams {
   private sanitizeKey(key: string): string {
     return key.split(" ").join("_");
   }
+
+  /**
+   * Subclass should override this method and return a properly formatted value.
+   * For example, a ColorVariable may choose to return an rgba string when
+   * provided an RgbaColor object.
+   * @param  {any} value The value that should be formatted.
+   * @return {any}       Return either the original or formatted value.
+   */
+  formatValue(value: any): any {
+    return value;
+  }
 }