14 files changed, 293 insertions, 83 deletions

diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
index 20ec173e..cd684168 100755
--- a/js/components/ui/property-control.reel/property-control.js
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -15,7 +15,8 @@ var Montage = require("montage/core/core").Montage,
     TextField = require("js/components/TextField.reel").TextField,
     ColorChip = require("js/components/ui/color-chip.reel").ColorChip,
     FileInput = require("js/components/ui/file-input.reel").FileInput,
-    InputGroup = require("js/components/ui/input-group.reel").InputGroup;
+    InputGroup = require("js/components/ui/input-group.reel").InputGroup,
+    GradientPicker = require("js/components/gradientpicker.reel").GradientPicker;
 
 var PropertyControl = exports.PropertyControl = Montage.create(Component, {
 
@@ -237,6 +238,11 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, {
                     this._control.addEventListener("changing", this, false);
                     this._prop = "value";
                     break;
+                case "GradientPicker":
+                    this._control = GradientPicker.create();
+                    this._control.addEventListener("change", this, false);
+                    this._prop = "value";
+                    break;
                 default:
                     break;
             }
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index c3099459..636482f5 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -858,15 +858,12 @@ exports.ShapesController = Montage.create(CanvasController, {
         value: function(m)
         {
             var css,
-                colorObj;
-            if(m === "Linear Gradient")
-            {
-                css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))";
-            }
-            else if(m === "Radial Gradient")
-            {
-                css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)";
-            }
+                colorObj,
+                material;
+
+            material = MaterialsModel.getMaterial(m);
+
+            css = material.getGradientData();
 
             if(css)
             {
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';
+