aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-06-26 10:41:20 -0700
committerNivesh Rajbhandari2012-06-26 10:41:20 -0700
commit2f0a29c2cc9fd399e392abfd6770caffb99fdbb5 (patch)
tree7634b0ae2dffd95ac0e7539665ac017167e0a17b /js
parent60692e2e429d3265113c89fc53ed80ccd6bbcc2e (diff)
downloadninja-2f0a29c2cc9fd399e392abfd6770caffb99fdbb5.tar.gz
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>
Diffstat (limited to 'js')
-rwxr-xr-xjs/controllers/elements/shapes-controller.js40
-rw-r--r--js/tools/BrushTool.js15
-rwxr-xr-xjs/tools/LineTool.js3
-rwxr-xr-xjs/tools/OvalTool.js3
-rwxr-xr-xjs/tools/PenTool.js32
-rwxr-xr-xjs/tools/RectTool.js3
-rwxr-xr-xjs/tools/ShapeTool.js26
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, {
278 } 278 }
279 else 279 else
280 { 280 {
281 return "FlatMaterial"; 281 return "Flat";
282 } 282 }
283 case "fillMaterial": 283 case "fillMaterial":
284 var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial(); 284 var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
@@ -288,7 +288,7 @@ exports.ShapesController = Montage.create(CanvasController, {
288 } 288 }
289 else 289 else
290 { 290 {
291 return "FlatMaterial"; 291 return "Flat";
292 } 292 }
293 default: 293 default:
294 return CanvasController.getProperty(el, p); 294 return CanvasController.getProperty(el, p);
@@ -430,16 +430,16 @@ exports.ShapesController = Montage.create(CanvasController, {
430 430
431 if(gradientMode === "radial") 431 if(gradientMode === "radial")
432 { 432 {
433 if( !m || (m.getName() !== "RadialGradientMaterial") ) 433 if( !m || (m.getName() !== "Radial Gradient") )
434 { 434 {
435 gradientM = Object.create(MaterialsModel.getMaterial("RadialGradientMaterial")); 435 gradientM = Object.create(MaterialsModel.getMaterial("Radial Gradient"));
436 } 436 }
437 } 437 }
438 else 438 else
439 { 439 {
440 if( !m || (m.getName() !== "LinearGradientMaterial") ) 440 if( !m || (m.getName() !== "Linear Gradient") )
441 { 441 {
442 gradientM = Object.create(MaterialsModel.getMaterial("LinearGradientMaterial")); 442 gradientM = Object.create(MaterialsModel.getMaterial("Linear Gradient"));
443 } 443 }
444 } 444 }
445 445
@@ -471,9 +471,9 @@ exports.ShapesController = Montage.create(CanvasController, {
471 m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial(); 471 m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
472 } 472 }
473 473
474 if(!m || ((m.getName() === "LinearGradientMaterial") || m.getName() === "RadialGradientMaterial") ) 474 if(!m || ((m.getName() === "Linear Gradient") || m.getName() === "Radial Gradient") )
475 { 475 {
476 flatM = Object.create(MaterialsModel.getMaterial("FlatMaterial")); 476 flatM = Object.create(MaterialsModel.getMaterial("Flat"));
477 if(flatM) 477 if(flatM)
478 { 478 {
479 if(isFill) 479 if(isFill)
@@ -764,18 +764,18 @@ exports.ShapesController = Montage.create(CanvasController, {
764 // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient 764 // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient
765 if(child.strokeColor.gradientMode === "radial") 765 if(child.strokeColor.gradientMode === "radial")
766 { 766 {
767 child.strokeMat = "RadialGradientMaterial"; 767 child.strokeMat = "Radial Gradient";
768 } 768 }
769 else 769 else
770 { 770 {
771 child.strokeMat = "LinearGradientMaterial"; 771 child.strokeMat = "Linear Gradient";
772 } 772 }
773 } 773 }
774 else if( (child.strokeMat === "RadialGradientMaterial") || 774 else if( (child.strokeMat === "Radial Gradient") ||
775 (child.strokeMat === "LinearGradientMaterial") ) 775 (child.strokeMat === "Linear Gradient") )
776 { 776 {
777 // Set Flat Material for children geometry if color has been changed to solid 777 // Set Flat Material for children geometry if color has been changed to solid
778 child.strokeMat = "FlatMaterial"; 778 child.strokeMat = "Flat";
779 } 779 }
780 } 780 }
781 781
@@ -786,18 +786,18 @@ exports.ShapesController = Montage.create(CanvasController, {
786 // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient 786 // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient
787 if(child.fillColor.gradientMode === "radial") 787 if(child.fillColor.gradientMode === "radial")
788 { 788 {
789 child.fillMat = "RadialGradientMaterial"; 789 child.fillMat = "Radial Gradient";
790 } 790 }
791 else 791 else
792 { 792 {
793 child.fillMat = "LinearGradientMaterial"; 793 child.fillMat = "Linear Gradient";
794 } 794 }
795 } 795 }
796 else if( (child.fillMat === "RadialGradientMaterial") || 796 else if( (child.fillMat === "Radial Gradient") ||
797 (child.fillMat === "LinearGradientMaterial") ) 797 (child.fillMat === "Linear Gradient") )
798 { 798 {
799 // Set Flat Material for children geometry if color has been changed to solid 799 // Set Flat Material for children geometry if color has been changed to solid
800 child.fillMat = "FlatMaterial"; 800 child.fillMat = "Flat";
801 } 801 }
802 } 802 }
803 } 803 }
@@ -814,11 +814,11 @@ exports.ShapesController = Montage.create(CanvasController, {
814 { 814 {
815 var css, 815 var css,
816 colorObj; 816 colorObj;
817 if(m === "LinearGradientMaterial") 817 if(m === "Linear Gradient")
818 { 818 {
819 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)))"; 819 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)))";
820 } 820 }
821 else if(m === "RadialGradientMaterial") 821 else if(m === "Radial Gradient")
822 { 822 {
823 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%)"; 823 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%)";
824 } 824 }
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, {
131 //start a new brush stroke 131 //start a new brush stroke
132 if (this._selectedBrushStroke === null){ 132 if (this._selectedBrushStroke === null){
133 this._selectedBrushStroke = new BrushStroke(); 133 this._selectedBrushStroke = new BrushStroke();
134 var colorArray=[0,0,0,0]; 134 var colorObj;
135 var color = this.options.fill.color; 135 var fill = this.options.fill;
136 if (color){ 136 var color = fill.color;
137 colorArray = [color.r/255, color.g/255, color.b/255, color.a]; 137 if(fill.colorMode === "gradient") {
138 colorObj = {gradientMode:fill.color.gradientMode, color:fill.color.stops};
139 } else if (color) {
140 colorObj = [color.r/255, color.g/255, color.b/255, color.a];
138 } else { 141 } else {
139 colorArray = [1,1,1,0]; 142 colorObj = [1,1,1,0];
140 } 143 }
141 this._selectedBrushStroke.setFillColor(colorArray); 144 this._selectedBrushStroke.setFillColor(colorObj);
142 145
143 //add this point to the brush stroke in case the user does a mouse up before doing a mouse move 146 //add this point to the brush stroke in case the user does a mouse up before doing a mouse move
144 var currMousePos = hitRec.calculateStageWorldPoint(); 147 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, {
270 // TODO - update the shape's info only. shapeModel will likely need an array of shapes. 270 // TODO - update the shape's info only. shapeModel will likely need an array of shapes.
271 } 271 }
272 272
273 // TODO - This needs to be moved into geom obj's init routine instead of here
274 this.setColor(this.options.stroke, null, canvas, "lineTool");
275
273 if(canvas.elementModel.isShape) 276 if(canvas.elementModel.isShape)
274 { 277 {
275 this.application.ninja.selectionController.selectElement(canvas); 278 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, {
94 // TODO - update the shape's info only. shapeModel will likely need an array of shapes. 94 // TODO - update the shape's info only. shapeModel will likely need an array of shapes.
95 } 95 }
96 96
97 // TODO - This needs to be moved into geom obj's init routine instead of here
98 this.setColor(this.options.stroke, this.options.fill, canvas, "ovalTool");
99
97 if(canvas.elementModel.isShape) 100 if(canvas.elementModel.isShape)
98 { 101 {
99 this.application.ninja.selectionController.selectElement(canvas); 102 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, {
338 } 338 }
339 this._selectedSubpath.setStrokeWidth(strokeSize); 339 this._selectedSubpath.setStrokeWidth(strokeSize);
340