Support pre-flighting of gradients for shape tools - rect, line, oval, brush and pen. Note that WebGL shapes are not supported yet.

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

7 files changed, 82 insertions, 40 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index e62af921..74353454 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -278,7 +278,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                     }
                     else
                     {
-                        return "FlatMaterial";
+                        return "Flat";
                     }
                 case "fillMaterial":
                     var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
@@ -288,7 +288,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                     }
                     else
                     {
-                        return "FlatMaterial";
+                        return "Flat";
                     }
                 default:
                     return CanvasController.getProperty(el, p);
@@ -430,16 +430,16 @@ exports.ShapesController = Montage.create(CanvasController, {
 
             if(gradientMode === "radial")
             {
-                if( !m || (m.getName() !== "RadialGradientMaterial") )
+                if( !m || (m.getName() !== "Radial Gradient") )
                 {
-                    gradientM = Object.create(MaterialsModel.getMaterial("RadialGradientMaterial"));
+                    gradientM = Object.create(MaterialsModel.getMaterial("Radial Gradient"));
             }
             }
             else
             {
-                if( !m || (m.getName() !== "LinearGradientMaterial") )
+                if( !m || (m.getName() !== "Linear Gradient") )
                 {
-                    gradientM = Object.create(MaterialsModel.getMaterial("LinearGradientMaterial"));
+                    gradientM = Object.create(MaterialsModel.getMaterial("Linear Gradient"));
                 }
             }
 
@@ -471,9 +471,9 @@ exports.ShapesController = Montage.create(CanvasController, {
                 m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
             }
 
-            if(!m || ((m.getName() === "LinearGradientMaterial") || m.getName() === "RadialGradientMaterial") )
+            if(!m || ((m.getName() === "Linear Gradient") || m.getName() === "Radial Gradient") )
                 {
-                flatM = Object.create(MaterialsModel.getMaterial("FlatMaterial"));
+                flatM = Object.create(MaterialsModel.getMaterial("Flat"));
                 if(flatM)
                     {
                     if(isFill)
@@ -764,18 +764,18 @@ exports.ShapesController = Montage.create(CanvasController, {
                                     // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient
                                     if(child.strokeColor.gradientMode === "radial")
                                     {
-                                        child.strokeMat = "RadialGradientMaterial";
+                                        child.strokeMat = "Radial Gradient";
                                     }
                                     else
                                     {
-                                        child.strokeMat = "LinearGradientMaterial";
+                                        child.strokeMat = "Linear Gradient";
                                     }
                                 }
-                                else if( (child.strokeMat === "RadialGradientMaterial") ||
-                                         (child.strokeMat === "LinearGradientMaterial") )
+                                else if( (child.strokeMat === "Radial Gradient") ||
+                                         (child.strokeMat === "Linear Gradient") )
                                 {
                                     // Set Flat Material for children geometry if color has been changed to solid
-                                    child.strokeMat = "FlatMaterial";
+                                    child.strokeMat = "Flat";
                                 }
                             }
 
@@ -786,18 +786,18 @@ exports.ShapesController = Montage.create(CanvasController, {
                                     // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient
                                     if(child.fillColor.gradientMode === "radial")
                                     {
-                                        child.fillMat = "RadialGradientMaterial";
+                                        child.fillMat = "Radial Gradient";
                                     }
                                     else
                                     {
-                                        child.fillMat = "LinearGradientMaterial";
+                                        child.fillMat = "Linear Gradient";
                                     }
                                 }
-                                else if( (child.fillMat === "RadialGradientMaterial") ||
-                                         (child.fillMat === "LinearGradientMaterial") )
+                                else if( (child.fillMat === "Radial Gradient") ||
+                                         (child.fillMat === "Linear Gradient") )
                                 {
                                     // Set Flat Material for children geometry if color has been changed to solid
-                                    child.fillMat = "FlatMaterial";
+                                    child.fillMat = "Flat";
                                 }
                             }
                         }
@@ -814,11 +814,11 @@ exports.ShapesController = Montage.create(CanvasController, {
         {
             var css,
                 colorObj;
-            if(m === "LinearGradientMaterial")
+            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 === "RadialGradientMaterial")
+            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%)";
             }
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 5d983a93..85a9e963 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -131,14 +131,17 @@ exports.BrushTool = Montage.create(ShapeTool, {
              //start a new brush stroke
              if (this._selectedBrushStroke === null){
                  this._selectedBrushStroke = new BrushStroke();
-                 var colorArray=[0,0,0,0];
-                 var color = this.options.fill.color;
-                 if (color){
-                     colorArray = [color.r/255, color.g/255, color.b/255, color.a];
+                 var colorObj;
+                 var fill = this.options.fill;
+                 var color = fill.color;
+                 if(fill.colorMode === "gradient") {
+                     colorObj = {gradientMode:fill.color.gradientMode, color:fill.color.stops};
+                 } else if (color) {
+                     colorObj = [color.r/255, color.g/255, color.b/255, color.a];
                  } else {
-                     colorArray = [1,1,1,0];
+                     colorObj = [1,1,1,0];
                  }
-                 this._selectedBrushStroke.setFillColor(colorArray);
+                 this._selectedBrushStroke.setFillColor(colorObj);
 
                  //add this point to the brush stroke in case the user does a mouse up before doing a mouse move
                  var currMousePos = hitRec.calculateStageWorldPoint();
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 07429bc0..fde09959 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -270,6 +270,9 @@ exports.LineTool = Montage.create(ShapeTool, {
                 // TODO - update the shape's info only.  shapeModel will likely need an array of shapes.
             }
 
+            // TODO - This needs to be moved into geom obj's init routine instead of here
+            this.setColor(this.options.stroke, null, canvas, "lineTool");
+
             if(canvas.elementModel.isShape)
             {
                 this.application.ninja.selectionController.selectElement(canvas);
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index ce812398..33bf763d 100755
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -94,6 +94,9 @@ exports.OvalTool = Montage.create(ShapeTool, {
                 // TODO - update the shape's info only.  shapeModel will likely need an array of shapes.
             }
 
+            // TODO - This needs to be moved into geom obj's init routine instead of here
+            this.setColor(this.options.stroke, this.options.fill, canvas, "ovalTool");
+
             if(canvas.elementModel.isShape)
             {
                 this.application.ninja.selectionController.selectElement(canvas);
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 2cffb44d..1097f28c 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -338,22 +338,28 @@ exports.PenTool = Montage.create(ShapeTool, {
                 }
                 this._selectedSubpath.setStrokeWidth(strokeSize);