Fixing properties panel to support px and % for body and other elements.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

8 files changed, 151 insertions, 65 deletions

diff --git a/js/components/hottext.reel/hottext.js b/js/components/hottext.reel/hottext.js
index 0480597a..93e6e745 100755
--- a/js/components/hottext.reel/hottext.js
+++ b/js/components/hottext.reel/hottext.js
@@ -121,13 +121,19 @@ var HotText = exports.HotText = Montage.create(SliderBase, {
         value: 2000
     },
 
+    // Flag used to dispatch a single change event if either or both of value and units are changed
+    _unitsModified: {
+        enumerable: false,
+        value: false
+    },
+
     value: {
         serializable: true,
         enumerable: true,
         get: function() {
             return this._value;
         },
-        set: function(value, fromInput) {
+        set: function(value) {
             if (isNaN(value)) {
                 this._valueSyncedWithInputField = false;
                 this.needsDraw = true;
@@ -149,6 +155,9 @@ var HotText = exports.HotText = Montage.create(SliderBase, {
                 this._valueSyncedWithInputField = false;
                 this.needsDraw = true;
                 this._dispatchActionEvent();
+            } else if(this._unitsModified) {
+                // Need to dispatch change event if units changed
+                this._dispatchActionEvent();
             }
         }
     },
@@ -164,7 +173,7 @@ var HotText = exports.HotText = Montage.create(SliderBase, {
         enumerable: false,
         value: function() {
             this._setEventFlags("change", false);
-            Object.getPropertyDescriptor(this, "value").set.call(this, this.inputFunction(this.element.value), true);
+            this.value = this.inputFunction(this.element.value);
         }
     },
 
diff --git a/js/components/hottextunit.reel/hottextunit.js b/js/components/hottextunit.reel/hottextunit.js
index 448eb9d7..2a89db03 100755
--- a/js/components/hottextunit.reel/hottextunit.js
+++ b/js/components/hottextunit.reel/hottextunit.js
@@ -40,11 +40,14 @@ var HotTextUnit = exports.HotTextUnit = Montage.create(HotText, {
                 if(this._acceptableUnits.indexOf(value) !== -1)
                 {
                     this._units = value;
+                    this._unitsModified = true;
                     this.needsDraw = true;
 
-                    this._setEventFlags("change", false);
+                    this._setEventFlags("change", true);
                     this._dispatchActionEvent();
                 }
+            } else {
+                this._unitsModified = false;
             }
         }
     },
@@ -89,13 +92,13 @@ var HotTextUnit = exports.HotTextUnit = Montage.create(HotText, {
                 var match = (unitsString.replace(noSpaces, "$2")).toLowerCase();
                 if(match)
                 {
-                    Object.getPropertyDescriptor(this, "units").set.call(this, match);
+                    this.units = match;
                 }
             }
 
             this._setEventFlags("change", false);
             // Moving this call to after setting the value since value changes are dispatching events before units are set
-            Object.getPropertyDescriptor(this, "value").set.call(this, this.inputFunction(inputString), false);
+            this.value = this.inputFunction(inputString);
         }
     },
 
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index 0dc11b82..27989c65 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -37,7 +37,7 @@ exports.BodyController = Montage.create(ElementController, {
                 case "height":
                 case "width":
                 case "-webkit-transform-style":
-                    return this.application.ninja.stylesController.getElementStyle(el, p, true, true);
+                    return this.application.ninja.stylesController.getElementStyle(el, p);
                 default:
                     return ElementController.getProperty(el, p, true, true);
                     //console.log("Undefined Stage property ", p);
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 92d70141..e3e1de15 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -52,8 +52,8 @@ exports.PiData = Montage.create( Montage, {
                             type : "hottext",
                             id : "borderWidth",
                             prop : "border-width",
-                            defaultValue: 0,
-                            valueMutator: parseFloat,
+                            defaultValue: "0 px",
+                            inputFunction: parseFloat,
                             label : "Border",
                             min :   0,
                             max :   100,
@@ -131,8 +131,8 @@ exports.PiData = Montage.create( Montage, {
                             type : "hottext",
                             id : "borderWidth",
                             prop : "border-width",
-                            defaultValue: 0,
-                            valueMutator: parseFloat,
+                            defaultValue: "0 px",
+                            inputFunction: parseFloat,
                             label : "Border",
                             min :   0,
                             max :   100,
@@ -254,8 +254,8 @@ exports.PiData = Montage.create( Montage, {
                             type : "hottext",
                             id : "borderWidth",
                             prop : "border-width",
-                            defaultValue: 0,
-                            valueMutator: parseFloat,
+                            defaultValue: "0 px",
+                            inputFunction: parseFloat,
                             label : "Border",
                             min :   0,
                             max :   100,
@@ -313,7 +313,7 @@ exports.PiData = Montage.create( Montage, {
                             id : "strokeSize",
                             prop : "strokeSize",
                             label : "Stroke",
-                            valueMutator: parseFloat,
+                            inputFunction: parseFloat,
                             min :   0,
                             max :   100,
                             value : 1,
@@ -333,23 +333,23 @@ exports.PiData = Montage.create( Montage, {
                             id: "tlRadius",
                             prop : "tlRadius",
                             label: "TL",
-                            valueMutator: parseFloat,
+                            inputFunction: parseFloat,
                             value : 0,
                             min :   0,
-                            max :   100,
-                            unit : "px",
-                            acceptableUnits: ["px", "pt", "%"]
+                            max :   1000,
+                            acceptableUnits: ["px", "pt", "%"],
+                            unit : "px"
                         },
                         {
                             type : "hottext",
                             id : "trRadius",
                             prop : "trRadius",
                             label : "TR",
-                            valueMutator: parseFloat,
+                            inputFunction: parseFloat,
                             min :   0,
-                            max :   100,
-                            unit : "px",
+                            max :   1000,
                             acceptableUnits: ["px", "pt", "%"],
+                            unit : "px",
                             divider: true
                         }
                     ],
@@ -359,22 +359,22 @@ exports.PiData = Montage.create( Montage, {
                             id : "blRadius",
                             prop : "blRadius",
                             label : "BL",
-                            valueMutator: parseFloat,
+                            inputFunction: parseFloat,
                             min :   0,
-                            max :   100,
-                            unit : "px",
+                            max :   1000,
+                            acceptableUnits: ["px", "pt", "%"],