Variable.clone() wrongly sets selectedValue to initialValue. Closes #71…

…. (#72)

src/core/Remixer.ts

@@ -81,7 +81,7 @@ class Remixer {
     if (!this._frameElement) {
       let frame = document.createElement("IFRAME") as HTMLFrameElement;
       frame.id = CSS.RMX_OVERLAY_FRAME;
-      frame.setAttribute("sandbox", "allow-scripts allow-same-origin");
+      frame.setAttribute("sandbox", "allow-scripts allow-same-origin allow-popups");
       document.getElementsByTagName("body")[0].appendChild(frame);
 
       // Until `srcdoc` is fully compatible with all browsers, lets simply
@@ -238,7 +238,7 @@ class Remixer {
     let existingVariable = this.getVariable(key);
     if (existingVariable) {
       // Variable with key already exists, so only add callback.
-      // TODO(cjcox:) Determin what to do if variable key already exists.
+      // TODO(cjcox:) Determine what to do if variable key already exists.
     } else {
       this._sharedInstance._variables[key] = variable;
       let storedVariable = LocalStorage.getVariable(key);
@@ -281,13 +281,31 @@ class Remixer {
   }
 
   /**
-   * Updates the selected value of a given Variable from the Remixer shared instance.
+   * Updates the selected value of a given Variable from the Remixer shared
+   * instance.
    * @static
    * @param {Variable} variable      The Variable to update.
    * @param {any}      selectedValue The new selected value.
    */
   static updateVariable(variable: Variable, selectedValue: any): void {
-    variable.selectedValue = selectedValue;
+    if (variable.selectedValue !== selectedValue) {
+      variable.selectedValue = selectedValue;
+    }
+  }
+
+  /**
+   * Clones and updates the selected value of a given Variable from the Remixer
+   * shared instance. Allows immutability update required for React rendering.
+   * @static
+   * @param {Variable} variable The variable to clone and update.
+   * @param {any} selectedValue The new selected value.
+   */
+  static cloneAndUpdateVariable(variable: Variable, selectedValue: any): void {
+    if (variable.selectedValue !== selectedValue) {
+      let clonedVariable = variable.clone();
+      this.attachedInstance._variables[variable.key] = clonedVariable;
+      this.updateVariable(clonedVariable, selectedValue);
+    }
   }
 
   /**

src/core/variables/BooleanVariable.ts

@@ -58,7 +58,7 @@ export class BooleanVariable extends Variable implements IBooleanVariableParams
    * @return {BooleanVariable} Returns the cloned variable.
    */
   clone() {
-    let cloned = new BooleanVariable(this.key, this.initialValue, null);
+    let cloned = new BooleanVariable(this.key, this.selectedValue, null);
     cloned.title = this.title;
     cloned._callbacks = this._callbacks.slice();
     return cloned;

src/core/variables/ColorVariable.ts

@@ -77,7 +77,7 @@ export class ColorVariable extends Variable implements IColorVariableParams {
   clone() {
     let cloned = new ColorVariable(
       this.key,
-      this.initialValue,
+      this.selectedValue,
       this.limitedToValues,
     );
     cloned.title = this.title;

src/core/variables/NumberVariable.ts

@@ -80,7 +80,7 @@ export class NumberVariable extends Variable implements INumberVariableParams {
   clone() {
     let cloned = new NumberVariable(
       this.key,
-      this.initialValue,
+      this.selectedValue,
       this.limitedToValues,
     );
     cloned.title = this.title;

src/core/variables/RangeVariable.ts

@@ -82,7 +82,7 @@ export class RangeVariable extends Variable implements IRangeVariableParams {
   clone() {
     let cloned = new RangeVariable(
       this.key,
-      this.initialValue,
+      this.selectedValue,
       this.minValue,
       this.maxValue,
       this.increment,
@@ -120,7 +120,7 @@ export class RangeVariable extends Variable implements IRangeVariableParams {
    */
   serialize(): ISerializableData {
     let data = super.serialize();
-    data.selectedValue = this.selectedValue.toString();
+    data.selectedValue = this.selectedValue;
     data.minValue = this.minValue;
     data.maxValue = this.maxValue;
     data.increment = this.increment;
@@ -134,7 +134,7 @@ export class RangeVariable extends Variable implements IRangeVariableParams {
    * @return {RangeVariable}          A new initialized RangeVariable.
    */
   static deserialize(data: ISerializableData): Variable {
-    let selectedValue: number = parseFloat(data.selectedValue);
+    let selectedValue: number = data.selectedValue;
     let minValue: number = data.minValue;
     let maxValue: number = data.maxValue;
     let increment: number = data.increment;

src/core/variables/StringVariable.ts

@@ -80,7 +80,7 @@ export class StringVariable extends Variable implements IStringVariableParams {
   clone() {
     let cloned = new StringVariable(
       this.key,
-      this.initialValue,
+      this.selectedValue,
       this.limitedToValues,
     );
     cloned.title = this.title;

src/core/variables/Variable.ts

@@ -100,7 +100,7 @@ export class Variable implements IVariableParams {
     let cloned = new Variable(
       this.key,
       this.dataType,
-      this.initialValue,
+      this.selectedValue,
       null,
     );
     cloned.title = this.title;

src/ui/controls/SliderControl.tsx

@@ -30,7 +30,7 @@ export class SliderControl extends React.Component<IRangeControlProps, void> {
   onChange = (event: React.FormEvent<HTMLInputElement>): void => {
     this.props.updateVariable(
       this.props.variable,
-      (event.target as HTMLInputElement).value,
+      parseFloat((event.target as HTMLInputElement).value),
     );
   }
 

src/ui/render.tsx

@@ -39,15 +39,14 @@ let variables = remixer.attachedInstance.variablesArray;
  * @param {any} selectedValue The new selected value.
  */
 function updateVariable(variable: Variable, selectedValue: any): void {
-  const index = variables.indexOf(variable);
-  let clonedVariable = variable.clone();
-  clonedVariable.selectedValue = selectedValue;
-  variables[index] = clonedVariable;
+  remixer.cloneAndUpdateVariable(variable, selectedValue);
 }
 
 // Renders the OverlayController component to the overlay wrapper element.
 const overlayWrapper = document.getElementById(CSS.RMX_OVERLAY_WRAPPER);
 function redraw(): void {
+  variables = remixer.attachedInstance.variablesArray;
+
   ReactDOM.render(
     <OverlayController
       wrapperElement={overlayWrapper}