Merge pull request #6 from mqg734/GradientFix

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

4 files changed, 44 insertions, 12 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};
+        }
     }
 
 });
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 3e9167fd..61971c33 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -225,7 +225,7 @@ exports.LineTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
-                strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor;
+                strokeColor = ShapesController.getMaterialColor(strokeMaterial) || strokeColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index 6edec811..f06fadb9 100755
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -53,14 +53,14 @@ exports.OvalTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
-                strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor;
+                strokeColor = ShapesController.getMaterialColor(strokeMaterial) || strokeColor;
 
                 var fillM = this.options.fillMaterial;
                 if(fillM)
                 {
                     fillMaterial = Object.create(MaterialsModel.getMaterial(fillM));
                 }
-                fillColor = ShapesController.getMaterialColor(fillM) || fillColor;
+                fillColor = ShapesController.getMaterialColor(fillMaterial) || fillColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js
index 0c14a559..5865f00d 100755
--- a/js/tools/RectTool.js
+++ b/js/tools/RectTool.js
@@ -72,14 +72,14 @@ exports.RectTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
-                strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor;
+                strokeColor = ShapesController.getMaterialColor(strokeMaterial) || strokeColor;
 
                 var fillM = this.options.fillMaterial;
                 if(fillM)
                 {
                     fillMaterial = Object.create(MaterialsModel.getMaterial(fillM));
                 }
-                fillColor = ShapesController.getMaterialColor(fillM) || fillColor;
+                fillColor = ShapesController.getMaterialColor(fillMaterial) || fillColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);