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/controllers/elements/shapes-controller.js | 40 ++++++++++++++-------------- 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 +++++++++++++++++- 7 files changed, 82 insertions(+), 40 deletions(-) (limited to 'js') 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); - 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