From 5377e963c4413640cd3c04e0406384df04144568 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 2 Apr 2012 14:52:14 -0700 Subject: Switching to Linear/RadialGradient materials will set the corresponding color. Also, dispatching an addElement event when toggling shape from WebGL/canvas2d so timeline can draw correctly. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 135 ++++++++++++++++----------- js/tools/LineTool.js | 2 +- js/tools/OvalTool.js | 4 +- js/tools/RectTool.js | 4 +- js/tools/ShapeTool.js | 27 ------ 5 files changed, 87 insertions(+), 85 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 5d3cf060..a6859361 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -14,7 +14,10 @@ exports.ShapesController = Montage.create(CanvasController, { setProperty: { value: function(el, p, value) { - var val = parseInt(value); + var val = parseInt(value), + canvas, + m, + color; switch(p) { case "strokeSize": // TODO - For now, just handling px units. @@ -68,32 +71,39 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLWorld.render(); break; case "useWebGl": - var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); + canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); canvas.width = el.width; canvas.height = el.height; this.application.ninja.elementMediator.replaceElement(el, canvas); NJevent("elementDeleted", el); - el = canvas; - this.toggleWebGlMode(el, value); - el.elementModel.shapeModel.GLWorld.render(); - this.application.ninja.selectionController.selectElement(el); - this.application.ninja.documentController.activeDocument.needsSave = true; - return; + this.toggleWebGlMode(canvas, value); + NJevent("elementAdded", canvas); + break; case "strokeMaterial": - var sm = Object.create(MaterialsModel.getMaterial(value)); - if(sm) + m = Object.create(MaterialsModel.getMaterial(value)); + if(m) { - el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm); + el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m); + color = this.getMaterialColor(value); + if(color) + { + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); + } el.elementModel.shapeModel.GLGeomObj.buildBuffers(); el.elementModel.shapeModel.GLWorld.render(); } break; case "fillMaterial": - var fm = Object.create(MaterialsModel.getMaterial(value)); - if(fm) + m = Object.create(MaterialsModel.getMaterial(value)); + if(m) { - el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); + el.elementModel.shapeModel.GLGeomObj.setFillMaterial(m); + color = this.getMaterialColor(value); + if(color) + { + el.elementModel.shapeModel.GLGeomObj.setFillColor(color); + } el.elementModel.shapeModel.GLGeomObj.buildBuffers(); el.elementModel.shapeModel.GLWorld.render(); } @@ -621,64 +631,83 @@ exports.ShapesController = Montage.create(CanvasController, { if(jObj.webGL) { - // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient - if(child.strokeColor && child.strokeColor.gradientMode) + if(child.strokeColor) { - if(child.strokeColor.gradientMode === "radial") + if(child.strokeColor.gradientMode) { - child.strokeMat = "RadialGradientMaterial"; - } - else + // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient + if(child.strokeColor.gradientMode === "radial") + { + child.strokeMat = "RadialGradientMaterial"; + } + else + { + child.strokeMat = "LinearGradientMaterial"; + } + } + else if( (child.strokeMat === "RadialGradientMaterial") || + (child.strokeMat === "LinearGradientMaterial") ) { - child.strokeMat = "LinearGradientMaterial"; + // Set Flat Material for children geometry if color has been changed to solid + child.strokeMat = "FlatMaterial"; } } - if(child.fillColor && child.fillColor.gradientMode) + if(child.fillColor) { - if(child.fillColor.gradientMode === "radial") + if(child.fillColor.gradientMode) { - child.fillMat = "RadialGradientMaterial"; + // Set Linear/Radial Gradient Material for children geometry if color in canvas 2d has gradient + if(child.fillColor.gradientMode === "radial") + { + child.fillMat = "RadialGradientMaterial"; + } + else + { + child.fillMat = "LinearGradientMaterial"; + } } - else + else if( (child.fillMat === "RadialGradientMaterial") || + (child.fillMat === "LinearGradientMaterial") ) { - child.fillMat = "LinearGradientMaterial"; + // Set Flat Material for children geometry if color has been changed to solid + child.fillMat = "FlatMaterial"; } } } -// else -// { -// // Set flat color for children geometry if color in WebGL has been changed to solid -// if(child.strokeColor && !child.strokeColor.gradientMode) -// { -// if(child.strokeColor.gradientMode === "radial") -// { -// child.strokeMat = "RadialGradientMaterial"; -// } -// else -// { -// child.strokeMat = "LinearGradientMaterial"; -// } -// } -// -// if(child.fillColor && child.fillColor.gradientMode) -// { -// if(child.fillColor.gradientMode === "radial") -// { -// child.fillMat = "RadialGradientMaterial"; -// } -// else -// { -// child.fillMat = "LinearGradientMaterial"; -// } -// } -// } } } } return jObj; } + }, + + getMaterialColor: { + value: function(m) + { + var css, + colorObj; + if(m === "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)))"; + } + else if(m === "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%)"; + } + + if(css) + { + colorObj = this.application.ninja.colorController.getColorObjFromCss(css); + if(colorObj) + { + return {gradientMode:colorObj.color.gradientMode, color:colorObj.color.stops}; + } + } + + return null; + } } }); diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 499a6b9d..9b22c629 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -216,7 +216,7 @@ exports.LineTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } - strokeColor = this._getMaterialColor(strokeM) || strokeColor; + strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index c09c9bc7..e8e88d1d 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 = this._getMaterialColor(strokeM) || strokeColor; + strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; var fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); } - fillColor = this._getMaterialColor(fillM) || fillColor; + fillColor = ShapesController.getMaterialColor(fillM) || fillColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index d69aa933..0c14a559 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 = this._getMaterialColor(strokeM) || strokeColor; + strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; var fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); } - fillColor = this._getMaterialColor(fillM) || fillColor; + fillColor = ShapesController.getMaterialColor(fillM) || fillColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 1a12401f..85009bc2 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -206,33 +206,6 @@ exports.ShapeTool = Montage.create(DrawingTool, { } }, - _getMaterialColor: { - value: function(m) - { - var css, - colorObj; - if(m === "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)))"; - } - else if(m === "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%)"; - } - - if(css) - { - colorObj = this.application.ninja.colorController.getColorObjFromCss(css); - if(colorObj) - { - return {gradientMode:colorObj.color.gradientMode, color:colorObj.color.stops}; - } - } - - return null; - } - }, - // We can draw on an existing canvas unless it has only a single shape object _useExistingCanvas: { value: function() -- cgit v1.2.3