PI, drawing and editing fixes for shapes and materials.

IKNinja-1841 - Cannot change webgl shape with LinearGradient and RadialGradient to solid color.

IKNINJA-1851 - Cannot draw webgl shapes with Linear/RadialGradient material.

IKNINJA-1864 - PI doesn't update the color of shape if WebGL material switches to Flat.

IKNINJA-1886 - Gradient edits not applied to WebGL Stage object.

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

2 files changed, 74 insertions, 12 deletions

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
index 2de03e91..b57d4a03 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.css
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -88,6 +88,16 @@
     position: relative;
 }
 
+.mp_property .gradientpicker
+{
+    top: 0;
+}
+
+.mp_property .gradientpicker .type
+{
+    display: none;
+}
+
 .mp_properties_list
 {
     padding-bottom: 8px;
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 9b7b031b..a1415343 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -9,7 +9,8 @@ var Montage = require("montage/core/core").Montage,
     MaterialsModel = require("js/models/materials-model").MaterialsModel,
     NJUtils = require("js/lib/NJUtils").NJUtils,
     World = require("js/lib/drawing/world").World,
-    Rectangle = require("js/lib/geom/rectangle").Rectangle;
+    Rectangle = require("js/lib/geom/rectangle").Rectangle,
+    ShapesController = require("js/controllers/elements/shapes-controller").ShapesController;
 
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
@@ -341,6 +342,10 @@ exports.MaterialsPopup = Montage.create(Component, {
                                         rtnValue = value;
                                         break;
 
+                case "gradient":
+                    rtnValue = value;
+                    break;
+
                                 default:
                                         console.log( "unrecognized material control type: " + type );
                                         break;
@@ -432,7 +437,11 @@ exports.MaterialsPopup = Montage.create(Component, {
                         {
                                 this._material = material;
                                 this._originalValues = material.exportJSON();
-                                this.materialsData = this.getMaterialData( material );
+                if((materialID === "Linear Gradient") || (materialID === "Radial Gradient")) {
+                    this.materialsData = this.getEditableProperties( material );
+                } else {
+                                    this.materialsData = this.getMaterialData( material );
+                }
                         }
                         else
                         {
@@ -442,6 +451,26 @@ exports.MaterialsPopup = Montage.create(Component, {
                 }
         },
 
+    getEditableProperties: {
+        value: function(material) {
+            // declare the array to hold the results
+            var rtnArray = [],
+                obj,
+                colorObj = ShapesController.getMaterialColor(material.getName());
+
+                this._propNames = ["gradient"];
+                this._propValues = ["gradient"];
+                this._propTypes = ["gradient"];
+                this._propLabels = ["gradient"];
+
+            obj = this.createGradientData("gradient", colorObj);
+
+            rtnArray.push(obj);
+
+            return rtnArray;
+        }
+    },
+
         getMaterialData:
         {
                 value: function( material )
@@ -489,17 +518,21 @@ exports.MaterialsPopup = Montage.create(Component, {
                                                 obj = this.createCheckboxData( propLabels[i], propValues[i] );
                                                 break;
 
-                                        default:
-                                                console.log( "unrecognized material control type: " + propType[i] );
-                                                break;
-                                }
+                    case "gradient":
+                        obj = this.createGradientData( propLabels[i], propValues[i] );
+                        break;
 
-                                if (obj)
-                                {
-                                        rtnArray.push( obj );
-                                        obj = null;
-                                }
-                        }
+                    default:
+                        console.log( "unrecognized material control type: " + propType[i] );
+                        break;
+                }
+
+                if (obj)
+                {
+                    rtnArray.push( obj );
+                    obj = null;
+                }
+            }
 
                         return rtnArray;
                 }
@@ -650,6 +683,25 @@ exports.MaterialsPopup = Montage.create(Component, {
                 }
         },
 
+    createGradientData:
+    {
+        value:  function( label,  colorObj )
+        {
+            var obj = {
+                "label":                label,
+                "description":  "a gradient",
+                "controlType":  "GradientPicker",
+                "defaults":
+                {
+                    "_mode":    colorObj.gradientMode,
+                    "value": colorObj.color
+                }
+            };
+
+            return obj;
+        }
+    },
+
     materialsProperties: {
         serializable: true,
         value: null