Updating Shapes PI to support corner radii. Also fixed PI bug where we were always updating custom section 0.

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

4 files changed, 68 insertions, 17 deletions

diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js
index 8d0cd21f..1e717f88 100644
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.js
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js
@@ -113,7 +113,7 @@ exports.RectProperties = Montage.create(ToolProperties, {
 
     handleChange: {
         value: function(event) {
-            var hotTxt = event.currentTarget
+            var hotTxt = event.currentTarget;
             if(hotTxt.units === "%") {
                 if(hotTxt.value > 50) {
                     hotTxt.maxValue = 50;
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index d34644a7..c5f22138 100644
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -24,6 +24,26 @@ exports.ShapesController = Montage.create(CanvasController, {
                     el.elementModel.shapeModel.GLGeomObj.setInnerRadius(val/100);
                     el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                     break;
+                case "tlRadius":
+                    this.setShapeProperty(el, "tlRadius", value);
+                    el.elementModel.shapeModel.GLGeomObj.setTLRadius(val);
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    break;
+                case "trRadius":
+                    this.setShapeProperty(el, "trRadius", value);
+                    el.elementModel.shapeModel.GLGeomObj.setTRRadius(val);
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    break;
+                case "blRadius":
+                    this.setShapeProperty(el, "blRadius", value);
+                    el.elementModel.shapeModel.GLGeomObj.setBLRadius(val);
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    break;
+                case "brRadius":
+                    this.setShapeProperty(el, "brRadius", value);
+                    el.elementModel.shapeModel.GLGeomObj.setBRRadius(val);
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    break;
                 case "width":
                     el.elementModel.shapeModel.GLGeomObj.setWidth(val);
                     CanvasController.setProperty(el, p, value);
@@ -46,8 +66,16 @@ exports.ShapesController = Montage.create(CanvasController, {
     getProperty: {
         value: function(el, p) {
             switch(p) {
+                case "stroke":
+                case "fill":
                 case "strokeSize":
                 case "innerRadius":
+                case "tlRadius":
+                case "trRadius":
+                case "blRadius":
+                case "brRadius":
+                case "strokeMaterial":
+                case "fillMaterial":
                     return this.getShapeProperty(el, p);
                 default:
                     return CanvasController.getProperty(el, p);
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index f162e919..de5cd34d 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -279,11 +279,13 @@ exports.PiData = Montage.create( Montage, {
                     [
                         {
                             type : "color",
-                            id : "stroke"
+                            id : "stroke",
+                            prop : "stroke"
                         },
                         {
                             type : "color",
                             id : "fill",
+                            prop : "fill",
                             divider : true
                         }
                     ],
@@ -313,10 +315,11 @@ exports.PiData = Montage.create( Montage, {
                             id: "tlRadius",
                             prop : "tlRadius",
                             label: "TL",
+                            valueMutator: parseFloat,
                             value : 0,
                             min :   0,
                             max :   100,
-                            unit : "%",
+                            unit : "px",
                             acceptableUnits: ["px", "pt", "%"]
                         },
                         {
@@ -324,10 +327,12 @@ exports.PiData = Montage.create( Montage, {
                             id : "trRadius",
                             prop : "trRadius",
                             label : "TR",
+                            valueMutator: parseFloat,
                             min :   0,
                             max :   100,
-                            unit : "%",
-                            acceptableUnits: ["px", "pt", "%"]
+                            unit : "px",
+                            acceptableUnits: ["px", "pt", "%"],
+                            divider: true
                         }
                     ],
                     [
@@ -336,9 +341,10 @@ exports.PiData = Montage.create( Montage, {
                             id : "blRadius",
                             prop : "blRadius",
                             label : "BL",
+                            valueMutator: parseFloat,
                             min :   0,
                             max :   100,
-                            unit : "%",
+                            unit : "px",
                             acceptableUnits: ["px", "pt", "%"]
                         },
                         {
@@ -346,9 +352,10 @@ exports.PiData = Montage.create( Montage, {
                             id : "brRadius",
                             prop : "brRadius",
                             label : "BR",
+                            valueMutator: parseFloat,
                             min :   0,
                             max :   100,
-                            unit : "%",
+                            unit : "px",
                             acceptableUnits: ["px", "pt", "%"]
                         }
                     ]
@@ -362,13 +369,18 @@ exports.PiData = Montage.create( Montage, {
                         {
                             type: "dropdown",
                             id:   "strokeMaterial",
+                            prop:   "strokeMaterial",
                             label: "Stroke",
                             labelField: "_name",
-                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }
-                        },
+                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
+                            divider : true
+                        }
+                    ],
+                    [
                         {
                             type: "dropdown",
                             id:   "fillMaterial",
+                            prop:   "fillMaterial",
                             label: "Fill",
                             labelField: "_name",
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }
@@ -387,7 +399,8 @@ exports.PiData = Montage.create( Montage, {
                     [
                         {
                             type : "color",
-                            id : "stroke"
+                            id : "stroke",
+                            prop : "stroke"
                         },
                         {
                             type : "color",
@@ -438,11 +451,13 @@ exports.PiData = Montage.create( Montage, {
                     [
                         {
                             type : "color",
-                            id : "stroke"
+                            id : "stroke",
+                            prop : "stroke"
                         },
                         {
                             type : "color",
                             id : "fill",
+                            prop : "fill",
                             divider : true
                         }
                     ],
@@ -452,7 +467,6 @@ exports.PiData = Montage.create( Montage, {
                             id : "strokeSize",
                             prop : "strokeSize",
                             label : "Stroke",
-                            valueMutator: parseFloat,
                             min :   0,
                             max :   100,
                             value : 1,
@@ -471,7 +485,8 @@ exports.PiData = Montage.create( Montage, {
                             type: "hottext",
                             id: "innerRadius",