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>

7 files changed, 181 insertions, 56 deletions

diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 086c1058..848ae10d 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -61,14 +61,28 @@ exports.Circle = Object.create(GeomObj, {
             } else {
                 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
             }
-                        if (strokeColor && this._strokeMaterial.hasProperty( "color" ))  this._strokeMaterial.setProperty( "color",  this._strokeColor );
+
+            if(strokeColor) {
+                if(this._strokeMaterial.hasProperty("color")) {
+                    this._strokeMaterial.setProperty( "color",  this._strokeColor );
+                } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
+                    this._strokeMaterial.setGradientData(this._strokeColor.color);
+                }
+            }
 
             if(fillMaterial) {
                 this._fillMaterial = fillMaterial.dup();
             } else {
-                this._fillMaterial = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() ).dup();
+                this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
+            }
+
+            if(fillColor) {
+                if(this._fillMaterial.hasProperty("color")) {
+                    this._fillMaterial.setProperty( "color",  this._fillColor );
+                } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) {
+                    this._fillMaterial.setGradientData(this._fillColor.color);
+                }
             }
-                        if (fillColor && this._fillMaterial.hasProperty( "color" ))  this._fillMaterial.setProperty( "color",  this._fillColor );
         }
     },
 
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 3a7a5619..66f557dd 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -191,27 +191,10 @@ exports.GeomObj = Object.create(Object.prototype, {
                         nMats = this._materialArray.length;
                     }
 
-                    var stops = [],
-                        colors = c.color;
-
-                    var len = colors.length;
-                    // TODO - Current shaders only support 4 color stops
-                    if (len > 4) {
-                        len = 4;
-                    }
-
-                    for (var n = 0; n < len; n++) {
-                        var position = colors[n].position / 100;
-                        var cs = colors[n].value;
-                        var stop = [cs.r / 255, cs.g / 255, cs.b / 255, cs.a];
-                        stops.push(stop);
-
-                        if (nMats === this._materialTypeArray.length) {
-                            for (i = 0; i < nMats; i++) {
-                                if (this._materialTypeArray[i] == type) {
-                                    this._materialArray[i].setProperty("color" + (n + 1), stop.slice(0));
-                                    this._materialArray[i].setProperty("colorStop" + (n + 1), position);
-                                }
+                    if (nMats === this._materialTypeArray.length) {
+                        for (i = 0; i < nMats; i++) {
+                            if (this._materialTypeArray[i] == type) {
+                                this._materialArray[i].setGradientData(c.color);
                             }
                         }
                     }
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index a016d7a3..f782f2a8 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -63,8 +63,17 @@ exports.Line = Object.create(GeomObj, {
             this._materialSpecular = [0.4, 0.4, 0.4,  1.0];
 
             if(strokeMaterial) {
-                this._strokeMaterial = strokeMaterial;
-                                if (strokeColor && this._strokeMaterial.hasProperty( "color" ))  this._strokeMaterial.setProperty( "color",  this._strokeColor );
+                this._strokeMaterial = strokeMaterial.dup();
+            } else {
+                this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
+            }
+
+            if(strokeColor) {
+                if(this._strokeMaterial.hasProperty("color")) {
+                    this._strokeMaterial.setProperty( "color",  this._strokeColor );
+                } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
+                    this._strokeMaterial.setGradientData(this._strokeColor.color);
+                }
             }
         }
     },
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 81a8556d..3e4c469a 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -77,15 +77,28 @@ exports.Rectangle = Object.create(GeomObj, {
             } else {
                 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
             }
-                        if (strokeColor && this._strokeMaterial.hasProperty( "color" ))  this._strokeMaterial.setProperty( "color",  this._strokeColor );
 
+            if(strokeColor) {
+                if(this._strokeMaterial.hasProperty("color")) {
+                    this._strokeMaterial.setProperty( "color",  this._strokeColor );
+                } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
+                    this._strokeMaterial.setGradientData(this._strokeColor.color);
+                }
+            }
 
             if(fillMaterial) {
                 this._fillMaterial = fillMaterial.dup();
             } else {
                 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
             }
-                        if (fillColor && this._fillMaterial.hasProperty( "color" ))  this._fillMaterial.setProperty( "color",  this._fillColor );
+
+                        if(fillColor) {
+                if(this._fillMaterial.hasProperty("color")) {
+                    this._fillMaterial.setProperty( "color",  this._fillColor );
+                } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) {
+                    this._fillMaterial.setGradientData(this._fillColor.color);
+                }
+            }
         }
     },
 
diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js
index 7e53db84..d26143de 100755
--- a/js/lib/rdge/materials/linear-gradient-material.js
+++ b/js/lib/rdge/materials/linear-gradient-material.js
@@ -79,6 +79,56 @@ var LinearGradientMaterial = function LinearGradientMaterial() {
         this.setShaderValues();
                 this.update( 0 );
     };
+
+    // Only Linear Gradient and Radial Gradients support gradients;
+    this.gradientType = "linear";
+
+    this.getGradientData = function() {
+        var angle = Math.round(this._angle*180/Math.PI),
+            color,
+            colorStr,
+            css = "-webkit-gradient(linear, " + angle + "deg";
+
+        // TODO - Angle is not supported in -webkit-gradient syntax, so just default to across:
+        css = '-webkit-gradient(linear, left top, right top';
+
+        // TODO - Also, Color Model requires from and to in the gradient string
+        color = this.getProperty('u_color1');
+        colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100);
+        css += ', from(rgba(' + colorStr + '))';
+
+        for (var i=2; i < 4; i++) {
+            color = this.getProperty('u_color'+i);
+            colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100);
+            css += ', color-stop(' + this.getProperty('u_colorStop'+i) + ', rgba(' + colorStr + '))';
+        }
+
+        color = this.getProperty('u_color4');
+        colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100);
+        css += ', to(rgba(' + colorStr + '))';
+
+        css += ')';
+
+        return css;
+    };
+
+    // Only Linear Gradient and Radial Gradient have gradient data.
+    this.setGradientData = function(colors) {
+        var len = colors.length;
+        // TODO - Current shaders only support 4 color stops
+        if (len > 4) {
+            len = 4;
+        }
+
+        for (var n = 0; n < len; n++) {
+            var position = colors[n].position/100;
+            var cs = colors[n].value;
+            var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a];
+
+            this.setProperty("u_color" + (n + 1), stop.slice(0));
+            this.setProperty("u_colorStop" + (n + 1), position);
+        }
+    };
 };
 
 ///////////////////////////////////////////////////////////////////////////////////////
diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js
index 65448c0c..1864b84e 100755
--- a/js/lib/rdge/materials/material.js
+++ b/js/lib/rdge/materials/material.js
@@ -177,6 +177,8 @@ var Material = function GLMaterial( world ) {
     };
 
         this.validateProperty = function( prop, value ) {
+        if(prop === "gradient") return true;
+
                 var rtnVal = false;
                 try
                 {
@@ -240,33 +242,37 @@ var Material = function GLMaterial( world ) {
                 var material = this._materialNode;