Fixes colorVariable bug when changed remotely. Closes #77 (#78)

* Fixes colorVariable bug when changed remotely. Closes #77.

* Cleanup.

src/core/variables/ColorVariable.ts

@@ -70,6 +70,16 @@ export class ColorVariable extends Variable implements IColorVariableParams {
         ConstraintType.LIST : ConstraintType.NONE;
   }
 
+  /**
+   * Updates the selected value.
+   * @override
+   * @param {any} value The selected value.
+   */
+  updateValue(value: any): void {
+    let hexColorValue = TinyColor(value).toHexString();
+    super.updateValue(hexColorValue);
+  }
+
   /**
    * Clones the variable.
    * @return {ColorVariable} Returns the cloned variable.

src/core/variables/Variable.ts

@@ -165,6 +165,17 @@ export class Variable implements IVariableParams {
   }
 
   set selectedValue(value: any) {
+    this.updateValue(value);
+  }
+
+  /**
+   * Updates the selected value, saves, and executes callbacks.
+   *
+   * Subclasses should override this method if any transformations are
+   * required on the selected value.
+   * @param {any} value The selected value.
+   */
+  updateValue(value: any): void {
     this._selectedValue = value;
     this.save();
     if (this._initialized) {

src/ui/controls/ColorSwatchControl.tsx

@@ -30,10 +30,10 @@ export class ColorSwatchControl extends React.Component<IColorControlProps, void
 
   /** Handles the update event for this control. */
   onClick = (event: React.FormEvent<HTMLElement>): void => {
-    this.props.updateVariable(
-      this.props.variable,
-      (event.target as HTMLElement).dataset["value"],
-    );
+    let value = (event.target as HTMLElement).dataset["value"];
+    if (value) {
+      this.props.updateVariable(this.props.variable, value);
+    }
   }
 
   /** @override */