Merge pull request #6 from mqg734/GradientFix

Updated hard-coded linear and radial gradients to use the color values in Linear/RadialGradientMaterials.

1 files changed, 39 insertions, 7 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index acf3b63d..b2a7107b 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -142,7 +142,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                     if(m)
                     {
                         el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m);
-                        color = this.getMaterialColor(value);
+                        color = this.getMaterialColor(m);
                         if(color)
                         {
                             el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color);
@@ -156,7 +156,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                     if(m)
                     {
                         el.elementModel.shapeModel.GLGeomObj.setFillMaterial(m);
-                        color = this.getMaterialColor(value);
+                        color = this.getMaterialColor(m);
                         if(color)
                         {
                             el.elementModel.shapeModel.GLGeomObj.setFillColor(color);
@@ -750,14 +750,34 @@ exports.ShapesController = Montage.create(CanvasController, {
         value: function(m)
         {
             var css,
-                colorObj;
-            if(m === "LinearGradientMaterial")
+                colorObj,
+                c,
+                mName = m.getName();
+            if(mName === "LinearGradientMaterial")
             {
-                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)))";
+                css = "-webkit-gradient(linear, left top, right top, from(";
+                c = this.webGlColorToCss(m, 1);
+                css += c.rgb + ")";
+                c = this.webGlColorToCss(m, 2);
+                css += ", color-stop(" + c.stop + ", " + c.rgb + ")";
+                c = this.webGlColorToCss(m, 3);
+                css += ", color-stop(" + c.stop + ", " + c.rgb + ")";
+                c = this.webGlColorToCss(m, 4);
+                css += ", to(" + c.rgb + "))";
+//                console.log(css);
             }
-            else if(m === "RadialGradientMaterial")
+            else if(mName === "RadialGradientMaterial")
             {
-                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%)";
+                css = "-webkit-radial-gradient(50% 50%, ellipse cover, ";
+                c = this.webGlColorToCss(m, 1);
+                css += c.rgb + " " + c.stop*100 + "%";
+                c = this.webGlColorToCss(m, 2);
+                css += c.rgb + " " + c.stop*100 + "%";
+                c = this.webGlColorToCss(m, 3);
+                css += c.rgb + " " + c.stop*100 + "%";
+                c = this.webGlColorToCss(m, 4);
+                css += c.rgb + " " + c.stop*100 + "%)";
+//                console.log(css);
             }
 
             if(css)
@@ -771,6 +791,18 @@ exports.ShapesController = Montage.create(CanvasController, {
 
             return null;
         }
+    },
+
+    webGlColorToCss: {
+        value: function(m, index)
+        {
+            var color, rgba, cStop;
+            color = m["getColor" + index]();
+            rgba = 'rgba(' + color[0]*255 + ',' + color[1]*255 + ',' + color[2]*255 + ',' + color[3] + ')';
+            cStop = m["getColorStop" + index]();
+
+            return {rgb:rgba, stop: cStop};
+        }
     }
 
 });