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

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

4 files changed, 103 insertions, 29 deletions

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index cc99ca6c..33e66515 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -143,6 +143,7 @@ exports.Properties = Montage.create(Component, {
 
     handleElementChange: {
         value: function(event) {
+            var l, t, h, w, lvu, tvu, hvu, wvu;
 //            console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
             if(event.detail.source && event.detail.source !== "pi") {
                 var el = this.application.ninja.currentDocument.model.documentRoot;
@@ -151,10 +152,24 @@ exports.Properties = Montage.create(Component, {
                 }
 
                 // TODO - This should only update the properties that were changed.
-                this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
-                this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
-                this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
-                this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
+                l = ElementsMediator.getProperty(el, "left");
+                t = ElementsMediator.getProperty(el, "top");
+                lvu = document.application.njUtils.getValueAndUnits(l);
+                tvu = document.application.njUtils.getValueAndUnits(t);
+                this.positionSize.leftUnits = lvu[1];
+                this.positionSize.leftPosition = lvu[0];
+                this.positionSize.topUnits = tvu[1];
+                this.positionSize.topPosition = tvu[0];
+
+                h = ElementsMediator.getProperty(el, "height");
+                w = ElementsMediator.getProperty(el, "width");
+                hvu = document.application.njUtils.getValueAndUnits(h);
+                wvu = document.application.njUtils.getValueAndUnits(w);
+
+                this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units.
+                this.positionSize.heightSize = hvu[0];
+                this.positionSize.widthUnits = wvu[1] || "px";
+                this.positionSize.widthSize = wvu[0];
 
                 if(this.threeD.inGlobalMode) {
                     this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
@@ -209,7 +224,8 @@ exports.Properties = Montage.create(Component, {
 
     displayElementProperties: {
         value: function (el) {
-            var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument;
+            var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument,
+                l, t, h, w, lvu, tvu, hvu, wvu;
 
             this.elementName.value = el.elementModel.selection;
             this.elementId.value = el.getAttribute("id") || "";
@@ -219,11 +235,24 @@ exports.Properties = Montage.create(Component, {
             this.threeD.disableTranslation = isRoot;
             this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d";
 
-            this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
-            this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
-            this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
-            this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
-//            this.positionSize.widthSize = ElementsMediator.getProperty(el, "width");
+            l = ElementsMediator.getProperty(el, "left");
+            t = ElementsMediator.getProperty(el, "top");
+            lvu = document.application.njUtils.getValueAndUnits(l);
+            tvu = document.application.njUtils.getValueAndUnits(t);
+            this.positionSize.leftUnits = lvu[1];
+            this.positionSize.leftPosition = lvu[0];
+            this.positionSize.topUnits = tvu[1];
+            this.positionSize.topPosition = tvu[0];
+
+            h = ElementsMediator.getProperty(el, "height");
+            w = ElementsMediator.getProperty(el, "width");
+            hvu = document.application.njUtils.getValueAndUnits(h);
+            wvu = document.application.njUtils.getValueAndUnits(w);
+
+            this.positionSize.heightUnits = hvu[1] || "px"; // canvas (and shapes) don't have units.
+            this.positionSize.heightSize = hvu[0];
+            this.positionSize.widthUnits = wvu[1] || "px";
+            this.positionSize.widthSize = wvu[0];
 
             if(this.threeD.inGlobalMode)
             {
@@ -277,10 +306,19 @@ exports.Properties = Montage.create(Component, {
 
                         if(control.type !== "color") {
                             currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
-                            if(currentValue === null) {
-                                currentValue = control.defaultValue;
+                            if(control.type === "hottext") {
+                                if(currentValue == null) {
+                                    currentValue = control.defaultValue;
+                                }
+                                currentValue = document.application.njUtils.getValueAndUnits(currentValue);
+                                this.customSections[i].content.controls[control.id + "Units"] = currentValue[1] || "px";
+                                this.customSections[i].content.controls[control.id] = currentValue[0];
+                            } else {
+                                if(currentValue === null) {
+                                    currentValue = control.defaultValue;
+                                }
+                                this.customSections[i].content.controls[control.id] = currentValue;
                             }
-                            this.customSections[i].content.controls[control.id] = currentValue;
                         } else {
                             if(control.prop === "border") {
                                 // TODO - For now, always return the top border if multiple border sides
@@ -402,7 +440,11 @@ exports.Properties = Montage.create(Component, {
         value: function(e) {
             if(e.wasSetByCode) return;
 
-            ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi");
+            var newValue;
+
+            e.units ? newValue = e.value + e.units : newValue = e.value;
+
+            ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Changing", "pi");
         }
     }
 
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 9df16112..c599dcb0 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -233,6 +233,12 @@ exports.CustomSection = Montage.create(Component, {
               boundObjectPropertyPath: "value"
             });
 
+            //Bind object value to controls list so it can be manipulated
+            Object.defineBinding(this.controls, aField.id + "Units", {
+              boundObject: obj,
+              boundObjectPropertyPath: "units"
+            });
+
             return obj;
         }
     },
diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.html b/js/panels/properties.reel/sections/position-size.reel/position-size.html
index 5d1a805a..bc93da33 100755
--- a/js/panels/properties.reel/sections/position-size.reel/position-size.html
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.html
@@ -29,9 +29,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "properties": {
                 "element": {"#": "PosX"},
                 "maxValue": 10000,
-                "minValue": -10000
+                "minValue": -10000,
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
+                "units": {"<<->": "@owner.leftUnits"},
                 "value": {"<<->": "@owner.leftPosition"}
             }
         },
@@ -40,9 +43,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "properties": {
                 "element": {"#": "PosY"},
                 "maxValue": 10000,
-                "minValue": -10000
+                "minValue": -10000,
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
+                "units": {"<<->": "@owner.topUnits"},
                 "value": {"<<->": "@owner.topPosition"}
             }
         },
@@ -50,9 +56,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
         "PosH": {
             "prototype": "js/components/hottextunit.reel[HotTextUnit]",
             "properties": {
-                "element": {"#": "PosH"}
+                "element": {"#": "PosH"},
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
+                "units": {"<<->": "@owner.heightUnits"},
                 "value": {"<<->": "@owner.heightSize"}
             }
         },
@@ -65,6 +74,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "units": "px"