Adds readonly controlType to variables. Closes #4 and #10. (#56)

Adds controlType to variables. Closes #4 and #10.

src/core/__tests__/BooleanVariable_test.ts

@@ -4,7 +4,7 @@ import * as sinonChai from "sinon-chai";
 
 import { remixer } from "../Remixer";
 import { BooleanVariable } from "../variables/BooleanVariable";
-import { ConstraintType, DataType } from "../../lib/Constants";
+import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { Variable } from "../variables/Variable";
 
 const expect = chai.expect;
@@ -34,6 +34,10 @@ describe("BooleanVariable", () => {
     expect(variable.constraintType).to.equal(ConstraintType.NONE);
   });
 
+  it("have the correct controlType", () => {
+    expect(variable.controlType).to.equal(ControlType.SWITCH);
+  });
+
   it("have the correct title", () => {
     expect(variable.title).to.equal(key);
   });

src/core/__tests__/ColorVariable_test.ts

@@ -4,7 +4,7 @@ import * as sinonChai from "sinon-chai";
 
 import { remixer } from "../Remixer";
 import { ColorVariable } from "../variables/ColorVariable";
-import { ConstraintType, DataType } from "../../lib/Constants";
+import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { Variable } from "../variables/Variable";
 
 const expect = chai.expect;
@@ -40,6 +40,19 @@ describe("ColorVariable", () => {
     expect(variable.constraintType).to.equal(ConstraintType.LIST);
   });
 
+  it("have the correct controlType", () => {
+    expect(variable.controlType).to.equal(ControlType.COLOR_LIST);
+  });
+
+  it("should have correct controlType based on number of allowed values", () => {
+    // List control.
+    expect(variable.controlType).to.equal(ControlType.COLOR_LIST);
+
+    // Input control.
+    let var1 = remixer.addColorVariable("test_key", "#4285F4");
+    expect(var1.controlType).to.equal(ControlType.COLOR_INPUT);
+  });
+
   it("have the correct title", () => {
     expect(variable.title).to.equal(key);
   });

src/core/__tests__/NumberVariable_test.ts

@@ -3,7 +3,7 @@ import * as sinon from "sinon";
 import * as sinonChai from "sinon-chai";
 
 import { remixer } from "../Remixer";
-import { ConstraintType, DataType } from "../../lib/Constants";
+import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { NumberVariable } from "../variables/NumberVariable";
 import { Variable } from "../variables/Variable";
 
@@ -40,6 +40,19 @@ describe("NumberVariable", () => {
     expect(variable.constraintType).to.equal(ConstraintType.LIST);
   });
 
+  it("should have correct controlType based on number of allowed values", () => {
+    // List control.
+    expect(variable.controlType).to.equal(ControlType.TEXT_LIST);
+
+    // Segmented control.
+    let var1 = remixer.addNumberVariable("test_key1", 1, [1, 2]);
+    expect(var1.controlType).to.equal(ControlType.SEGMENTED);
+
+    // Text input control.
+    let var2 = remixer.addNumberVariable("test_key2", 1);
+    expect(var2.controlType).to.equal(ControlType.TEXT_INPUT);
+  });
+
   it("have the correct title", () => {
     expect(variable.title).to.equal(key);
   });

src/core/__tests__/RangeVariable_test.ts

@@ -3,7 +3,7 @@ import * as sinon from "sinon";
 import * as sinonChai from "sinon-chai";
 
 import { remixer } from "../Remixer";
-import { ConstraintType, DataType } from "../../lib/Constants";
+import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { RangeVariable } from "../variables/RangeVariable";
 import { Variable } from "../variables/Variable";
 
@@ -44,6 +44,10 @@ describe("RangeVariable", () => {
     expect(variable.constraintType).to.equal(ConstraintType.RANGE);
   });
 
+  it("have the correct controlType", () => {
+    expect(variable.controlType).to.equal(ControlType.SLIDER);
+  });
+
   it("have the correct title", () => {
     expect(variable.title).to.equal(key);
   });

src/core/__tests__/StringVariable_test.ts

@@ -3,7 +3,7 @@ import * as sinon from "sinon";
 import * as sinonChai from "sinon-chai";
 
 import { remixer } from "../Remixer";
-import { ConstraintType, DataType } from "../../lib/Constants";
+import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { StringVariable } from "../variables/StringVariable";
 import { Variable } from "../variables/Variable";
 
@@ -40,6 +40,19 @@ describe("StringVariable", () => {
     expect(variable.constraintType).to.equal(ConstraintType.LIST);
   });
 
+  it("should have correct controlType based on number of allowed values", () => {
+    // List control.
+    expect(variable.controlType).to.equal(ControlType.TEXT_LIST);
+
+    // Segmented control.
+    let var1 = remixer.addStringVariable("test_key1", "a", ["a", "b"]);
+    expect(var1.controlType).to.equal(ControlType.SEGMENTED);
+
+    // Text input control.
+    let var2 = remixer.addStringVariable("test_key2", "a");
+    expect(var2.controlType).to.equal(ControlType.TEXT_INPUT);
+  });
+
   it("have the correct title", () => {
     expect(variable.title).to.equal(key);
   });

src/core/variables/BooleanVariable.ts

@@ -14,7 +14,7 @@
  *  under the License.
  */
 
-import { DataType } from "../../lib/Constants";
+import { ControlType, DataType } from "../../lib/Constants";
 import { ISerializableData } from "../../lib/LocalStorage";
 import { IVariableCallback, IVariableParams, Variable } from "./Variable";
 
@@ -50,6 +50,7 @@ export class BooleanVariable extends Variable implements IBooleanVariableParams
     callback?: IVariableCallback,
   ) {
     super(key, DataType.BOOLEAN, defaultValue, callback);
+    this.controlType = ControlType.SWITCH;
   }
 
   /**

src/core/variables/ColorVariable.ts

@@ -14,7 +14,7 @@
  *  under the License.
  */
 
-import { ConstraintType, DataType } from "../../lib/Constants";
+import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { ISerializableData } from "../../lib/LocalStorage";
 import { IVariableCallback, IVariableListParams, Variable } from "./Variable";
 
@@ -54,6 +54,8 @@ export class ColorVariable extends Variable implements IColorVariableParams {
   ) {
     super(key, DataType.COLOR, defaultValue, callback);
     this.limitedToValues = limitedToValues ? limitedToValues : [];
+    this.controlType = (this.limitedToValues.length > 0) ?
+        ControlType.COLOR_LIST : ControlType.COLOR_INPUT;
   }
 
   /**

src/core/variables/NumberVariable.ts

@@ -14,7 +14,7 @@
  *  under the License.
  */
 
-import { ConstraintType, DataType } from "../../lib/Constants";
+import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { ISerializableData } from "../../lib/LocalStorage";
 import { IVariableCallback, IVariableListParams, Variable } from "./Variable";
 
@@ -54,6 +54,23 @@ export class NumberVariable extends Variable implements INumberVariableParams {
   ) {
     super(key, DataType.NUMBER, defaultValue, callback);
     this.limitedToValues = limitedToValues ? limitedToValues : [];
+    if (this.limitedToValues.length === 0) {
+      this.controlType = ControlType.TEXT_INPUT;
+    } else if (this.limitedToValues.length <= 2) {
+      this.controlType = ControlType.SEGMENTED;
+    } else {
+      this.controlType = ControlType.TEXT_LIST;
+    }
+  }
+
+  /**
+   * The data constraint type for this Variable.
+   * @type {string}
+   * @readonly
+   */
+  get constraintType(): string {
+    return this.limitedToValues.length > 0 ?
+        ConstraintType.LIST : ConstraintType.NONE;
   }
 
   /**
@@ -71,16 +88,6 @@ export class NumberVariable extends Variable implements INumberVariableParams {
     return cloned;
   }
 
-  /**
-   * The data constraint type for this Variable.
-   * @type {string}
-   * @readonly
-   */
-  get constraintType(): string {
-    return this.limitedToValues.length > 0 ?
-        ConstraintType.LIST : ConstraintType.NONE;
-  }
-
   /**
    * The array of allowed values for this Variable.
    * @override

src/core/variables/RangeVariable.ts

@@ -14,7 +14,7 @@
  *  under the License.
  */
 
-import { ConstraintType, DataType } from "../../lib/Constants";
+import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { ISerializableData } from "../../lib/LocalStorage";
 import { IVariableCallback, IVariableParams, Variable } from "./Variable";
 
@@ -63,6 +63,7 @@ export class RangeVariable extends Variable implements IRangeVariableParams {
     this.minValue = minValue;
     this.maxValue = maxValue;
     this.increment = increment;
+    this.controlType = ControlType.SLIDER;
   }
 
   /**

src/core/variables/StringVariable.ts

@@ -14,7 +14,7 @@
  *  under the License.
  */
 
-import { ConstraintType, DataType } from "../../lib/Constants";
+import { ConstraintType, ControlType, DataType } from "../../lib/Constants";
 import { ISerializableData } from "../../lib/LocalStorage";
 import { IVariableCallback, IVariableListParams, Variable } from "./Variable";
 
@@ -54,6 +54,13 @@ export class StringVariable extends Variable implements IStringVariableParams {
   ) {
     super(key, DataType.STRING, defaultValue, callback);
     this.limitedToValues = limitedToValues ? limitedToValues : [];
+    if (this.limitedToValues.length === 0) {
+      this.controlType = ControlType.TEXT_INPUT;
+    } else if (this.limitedToValues.length <= 2) {
+      this.controlType = ControlType.SEGMENTED;
+    } else {
+      this.controlType = ControlType.TEXT_LIST;
+    }
   }
 
   /**

src/core/variables/Variable.ts

@@ -26,6 +26,7 @@ export interface IVariableParams {
   key: string;
   title: string;
   constraintType: string;
+  controlType: string;
   dataType: string;
   defaultValue: any;
   selectedValue: any;
@@ -116,6 +117,12 @@ export class Variable implements IVariableParams {
     return ConstraintType.NONE;
   }
 
+  /**
+   * The rendered control type for this Variable.
+   * @type {string}
+   */
+  controlType: string;
+
   /**
    * The data type represented by this Variable.
    * @type {string}
@@ -225,6 +232,7 @@ export class Variable implements IVariableParams {
     let data = <ISerializableData>{};
     data.key = this.key;
     data.constraintType = this.constraintType;
+    data.controlType = this.controlType;
     data.dataType = this.dataType;
     data.title = this.title;
     return data;

src/lib/Constants.ts

@@ -36,6 +36,19 @@ export const ConstraintType = {
   RANGE: "__ConstraintTypeRange__",
 };
 
+/** Rendered variable control types. */
+export const ControlType = {
+  BUTTON: "__ControlTypeButton__",
+  COLOR_INPUT: "__ControlTypeColorInput__",
+  COLOR_LIST: "__ControlTypeColorList__",
+  SEGMENTED: "__ControlTypeSegmented__",
+  SLIDER: "__ControlTypeSlider__",
+  STEPPER: "__ControlTypeStepper__",
+  SWITCH: "__ControlTypeSwitch__",
+  TEXT_INPUT: "__ControlTypeTextInput__",
+  TEXT_LIST: "__ControlTypeTextList__",
+};
+
 /** Variable data types. */
 export const DataType = {
   BOOLEAN: "__DataTypeBoolean__",

src/lib/LocalStorage.ts

@@ -29,6 +29,7 @@ import { Variable } from "../core/variables/Variable";
 export interface ISerializableData {
   key: string;
   constraintType: string;
+  controlType: string;
   dataType: string;
   title: string;
   defaultValue: any;

src/lib/__tests__/LocalStorage_test.ts

@@ -3,7 +3,7 @@ import * as sinon from "sinon";
 import * as sinonChai from "sinon-chai";
 
 import { remixer } from "../../core/Remixer";
-import { DataType } from "../Constants";
+import { ConstraintType, ControlType, DataType } from "../Constants";
 import { LocalStorage } from "../LocalStorage";
 
 const expect = chai.expect;
@@ -12,9 +12,9 @@ chai.use(sinonChai);
 describe("LocalStorage", () => {
 
   function addVariables() {
-    remixer.addBooleanVariable("key1", true);
-    remixer.addStringVariable("key2", "testString");
-    remixer.addNumberVariable("key3", 40);
+    remixer.addBooleanVariable("test_key1", true);
+    remixer.addStringVariable("test_key2", "testString");
+    remixer.addNumberVariable("test_key3", 40);
   }
 
   it("should call saveVariable method", () => {
@@ -27,9 +27,11 @@ describe("LocalStorage", () => {
 
   it("should retrieve correct variable from storage", () => {
     addVariables();
-    let stringVariable = LocalStorage.getVariable("key2");
+    let stringVariable = LocalStorage.getVariable("test_key2");
 
     expect(stringVariable.dataType).to.equal(DataType.STRING);
+    expect(stringVariable.constraintType).to.equal(ConstraintType.NONE);
+    expect(stringVariable.controlType).to.equal(ControlType.TEXT_INPUT);
     expect(stringVariable.selectedValue).to.equal("testString");
   });
 });