Convert colors to rgba during serialization. Closes #6. (#60)

* Initial check-in of color rgba conversion code.

* Updates color variable and rendering to use TinyColor library.

* Adds back missing controlType for color.

* Updates check for equal colors.

Author: chriscox

package.json

@@ -37,6 +37,7 @@
     "@types/react-dom": "^0.14.19",
     "@types/sinon": "^1.16.32",
     "@types/sinon-chai": "^2.7.27",
+    "@types/tinycolor2": "^1.1.0",
     "chai": "^3.5.0",
     "codecov.io": "^0.1.6",
     "copyfiles": "^1.0.0",
@@ -68,12 +69,13 @@
     "ts-loader": "^1.2.2",
     "tslint": "^4.0.2",
     "typescript": "^2.0.10",
-    "webpack": "^2.1.0-beta.27",
-    "webpack-dev-server": "^2.1.0-beta.12"
+    "webpack": "^2.2.0-rc.3",
+    "webpack-dev-server": "^2.2.0-rc.0"
   },
   "dependencies": {
     "material-design-lite": "^1.2.1",
     "react": "^15.4.0",
-    "react-dom": "^15.4.0"
+    "react-dom": "^15.4.0",
+    "tinycolor2": "^1.4.1"
   }
 }

src/core/variables/ColorVariable.ts

@@ -14,6 +14,8 @@
  *  under the License.
  */
 
+import * as TinyColor from "tinycolor2";
+
 import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { ISerializableData } from "../../lib/LocalStorage";
 import { IVariableCallback, IVariableListParams, Variable } from "./Variable";
@@ -40,10 +42,10 @@ export class ColorVariable extends Variable implements IColorVariableParams {
   /**
    * Creates an instance of a ColorVariable.
    * @constructor
-   * @param  {string}            key            A unique key for the Variable.
-   * @param  {string}            defaultValue   The default value.
+   * @param  {string}            key             A unique key for the Variable.
+   * @param  {string}            defaultValue    The default value.
    * @param  {string[]}          limitedToValues The array of allowed values.
-   * @param  {IVariableCallback} callback       The callback to invoke when updated.
+   * @param  {IVariableCallback} callback        The callback to invoke when updated.
    * @return {ColorVariable}
    */
   constructor(
@@ -97,8 +99,10 @@ export class ColorVariable extends Variable implements IColorVariableParams {
    */
   serialize(): ISerializableData {
     let data = super.serialize();
-    data.selectedValue = this.selectedValue;
-    data.limitedToValues = this.limitedToValues;
+    data.selectedValue = TinyColor(this.selectedValue).toRgb();
+    data.limitedToValues = this.limitedToValues.map((value: any) => {
+      return TinyColor(value).toRgb();
+    });
     return data;
   }
 
@@ -109,6 +113,10 @@ export class ColorVariable extends Variable implements IColorVariableParams {
    * @return {ColorVariable}          A new initialized ColorVariable.
    */
   static deserialize(data: ISerializableData): Variable {
-    return new ColorVariable(data.key, data.selectedValue, data.limitedToValues);
+    let selectedValue = TinyColor(data.selectedValue).toHexString();
+    let limitedToValues = data.limitedToValues.map((color: string) => {
+      return TinyColor(color).toHexString();
+    });
+    return new ColorVariable(data.key, selectedValue, limitedToValues);
   }
 }

src/ui/controls/ColorSwatchControl.tsx

@@ -15,6 +15,7 @@
  */
 
 import * as React from "react";
+import * as TinyColor from "tinycolor2";
 
 import { CSS } from "../../lib/Constants";
 import { IColorControlProps } from "./controlProps";
@@ -52,12 +53,17 @@ export class ColorSwatchControl extends React.Component<IColorControlProps, void
       <div className={`${CSS.RMX_COLOR_SWATCH} ${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE}`}>
         <span className={CSS.MDL_PRIMARY}>
           <span>{title}
-            <span className={CSS.RMX_SELECTED_VALUE}>{selectedValue}</span>
+            <span className={CSS.RMX_SELECTED_VALUE}>
+              {TinyColor(selectedValue).toString()}
+            </span>
           </span>
           <span className={CSS.MDL_SECONDARY}>
             {limitedToValues.map((value: string) => (
               <ColorSwatch color={value} key={value}
-                isSelected={selectedValue === value}
+                isSelected={
+                  TinyColor(selectedValue).toRgbString() ===
+                    TinyColor(value).toRgbString()
+                }
                 onClick={this.onClick}
               />
             ))}
@@ -88,14 +94,20 @@ function ColorSwatch(props: IColorSwatchProps) {
     isSelected,
     onClick,
   } = props;
+  // Determine a readable color to prevent a white checkmark on a light
+  // color swatch.
+  let readableCheckColors = [TinyColor("white"), TinyColor("gray")];
+  let checkColor = TinyColor.mostReadable(TinyColor(color), readableCheckColors);
   return (
     <div
       className={CSS.RMX_COLOR_SWATCH_ITEM}
       style={{backgroundColor: color}}
       data-value={color}
       onClick={onClick}
     >
-      {isSelected ? <i className="material-icons">check</i> : ""}
+      {
+        isSelected ? <i className="material-icons" style={{color: checkColor}}>check</i> : ""
+      }
     </div>
   );
 }

webpack.config.js

@@ -42,7 +42,7 @@ module.exports = {
     inline: true,
   },
   performance: {
-    hints: !IS_DEV
+    hints: IS_DEV ? false : "warning"
   },
   resolve: {
     extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']