From 2f0a29c2cc9fd399e392abfd6770caffb99fdbb5 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 26 Jun 2012 10:41:20 -0700 Subject: 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 --- js/tools/BrushTool.js | 15 +++++++++------ js/tools/LineTool.js | 3 +++ js/tools/OvalTool.js | 3 +++ js/tools/PenTool.js | 32 +++++++++++++++++++------------- js/tools/RectTool.js | 3 +++ js/tools/ShapeTool.js | 26 +++++++++++++++++++++++++- 6 files changed, 62 insertions(+), 20 deletions(-) (limited to 'js/tools') 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); - var colorArray=[]; - var color = this.options.stroke.color; - if (color){ - colorArray = [color.r/255, color.g/255, color.b/255, color.a]; - }else { - colorArray = [1,1,1,0]; + var colorObj; + var stroke = this.options.stroke; + var color = stroke.color; + if(stroke.colorMode === "gradient") { + colorObj = {gradientMode:stroke.color.gradientMode, color:stroke.color.stops}; + } else if (color) { + colorObj = [color.r/255, color.g/255, color.b/255, color.a]; + } else { + colorObj = [1,1,1,0]; } - this._selectedSubpath.setStrokeColor(colorArray); - - color = this.options.fill.color; - if (color){ - colorArray = [color.r/255, color.g/255, color.b/255, color.a]; + this._selectedSubpath.setStrokeColor(colorObj); + + var fill = this.options.fill; + 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._selectedSubpath.setFillColor(colorArray); + this._selectedSubpath.setFillColor(colorObj); } //if the selectedSubpath was null and needed to be constructed //build the current mouse position in stage world space in case we don't already have a canvas diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index b35a101a..df049395 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -117,6 +117,9 @@ exports.RectTool = 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, "rectTool"); + if(canvas.elementModel.isShape) { this.application.ninja.selectionController.selectElement(canvas); diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 8d381711..6ff61546 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -209,7 +209,31 @@ exports.ShapeTool = Montage.create(DrawingTool, { return target; } - } + }, + + // We can draw on an existing canvas unless it has only a single shape object + setColor: { + value: function(stroke, fill, canvas, toolId) + { + if(stroke && stroke.color) + { + this.application.ninja.elementMediator.setColor([canvas], {mode:stroke.colorMode, color:stroke.color}, false, "Change", toolId); + } + else + { + this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, false, "Change", toolId); + } + + if(fill && fill.color) + { + this.application.ninja.elementMediator.setColor([canvas], {mode:fill.colorMode, color:fill.color}, true, "Change", toolId); + } + else + { + this.application.ninja.elementMediator.setColor([canvas], {mode:"nocolor", color:null}, true, "Change", toolId); + } + } + } }); -- cgit v1.2.3