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 ++++++++++++++-------------- 1 file changed, 20 insertions(+), 20 deletions(-) (limited to 'js/controllers/elements/shapes-controller.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%)"; } -- cgit v1.2.3 From e3eb68c3a0b911acd873ee6211931b8f4e620030 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 28 Jun 2012 17:54:15 -0700 Subject: Fixed not being able to draw linear and radial gradients. Also fixed IKNINJA-1721 - File dirty marker does not show when modifying elements and IKNinja-1581 and IKNinja-1758 - Paint bucket fill bugs with lines and brush objects. Squashed commit of the following: commit 7cad082c89911d34a99feeef8e91d22b89cae8f1 Author: Nivesh Rajbhandari Date: Thu Jun 28 17:52:07 2012 -0700 Fix for not being able to draw linear and radial gradient materials. I'm turning off pre-flight support of gradients for WebGL since it conflicts with the materials' color support. Signed-off-by: Nivesh Rajbhandari commit d0df8a2bff052d855bafb7885792b1dfff8eab7d Merge: 2c67d26 b4b54f6 Author: Nivesh Rajbhandari Date: Thu Jun 28 17:50:11 2012 -0700 Merge branch 'refs/heads/ninja-internal' into ToolFixes commit 2c67d264851f0897fdca8ca887c1c82d0e434217 Author: Nivesh Rajbhandari Date: Thu Jun 28 15:06:13 2012 -0700 IKNINJA-1721 - File dirty marker does not show when modifying elements. Signed-off-by: Nivesh Rajbhandari commit bb4b6a52eb75efb2f435cdb53f810ae3bc1f1fc3 Author: Nivesh Rajbhandari Date: Thu Jun 28 11:15:34 2012 -0700 IKNinja-1581 and IKNinja-1758 - Paint bucket fill bugs with lines and brush objects. Signed-off-by: Nivesh Rajbhandari Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 74353454..5920d51a 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -138,6 +138,10 @@ exports.ShapesController = Montage.create(CanvasController, { this.application.ninja.elementMediator.replaceElement(canvas, el); break; case "strokeMaterial": + // skip shape types that don't support WebGL + if(!el.elementModel.shapeModel.GLGeomObj.useWebGl) { + return; + } m = Object.create(MaterialsModel.getMaterial(value)); if(m) { @@ -152,6 +156,10 @@ exports.ShapesController = Montage.create(CanvasController, { } break; case "fillMaterial": + // skip shape types that don't support WebGL or fill color + if(!el.elementModel.shapeModel.GLGeomObj.canFill || !el.elementModel.shapeModel.GLGeomObj.useWebGl) { + return; + } m = Object.create(MaterialsModel.getMaterial(value)); if(m) { -- cgit v1.2.3 From 01783536d2245b474eb1f89df673bfabb006cbdd Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 29 Jun 2012 11:49:51 -0700 Subject: Need to special case linear gradient, radial gradient and uber materials when applying fill and stroke colors. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 75 +++++++++++++++++++++------- 1 file changed, 56 insertions(+), 19 deletions(-) (limited to 'js/controllers/elements/shapes-controller.js') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 5920d51a..c3099459 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -139,7 +139,7 @@ exports.ShapesController = Montage.create(CanvasController, { break; case "strokeMaterial": // skip shape types that don't support WebGL - if(!el.elementModel.shapeModel.GLGeomObj.useWebGl) { + if(!el.elementModel.shapeModel.useWebGl) { return; } m = Object.create(MaterialsModel.getMaterial(value)); @@ -157,7 +157,7 @@ exports.ShapesController = Montage.create(CanvasController, { break; case "fillMaterial": // skip shape types that don't support WebGL or fill color - if(!el.elementModel.shapeModel.GLGeomObj.canFill || !el.elementModel.shapeModel.GLGeomObj.useWebGl) { + if(!el.elementModel.shapeModel.GLGeomObj.canFill || !el.elementModel.shapeModel.useWebGl) { return; } m = Object.create(MaterialsModel.getMaterial(value)); @@ -453,17 +453,17 @@ exports.ShapesController = Montage.create(CanvasController, { if(gradientM) { - if(isFill) - { + if(isFill) + { el.elementModel.shapeModel.GLGeomObj.setFillMaterial(gradientM); } else { el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(gradientM); } - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); - } - } + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + } + } }, _setFlatMaterial: { @@ -480,10 +480,13 @@ exports.ShapesController = Montage.create(CanvasController, { } if(!m || ((m.getName() === "Linear Gradient") || m.getName() === "Radial Gradient") ) - { + { + // Uber Material also supports solid colors, so don't change from Uber to Flat Material + if(m && (m.getName() === "Uber")) { return; } + flatM = Object.create(MaterialsModel.getMaterial("Flat")); if(flatM) - { + { if(isFill) { el.elementModel.shapeModel.GLGeomObj.setFillMaterial(flatM); @@ -492,10 +495,10 @@ exports.ShapesController = Montage.create(CanvasController, { { el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(flatM); } - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); - } + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } } + } }, setColor: { @@ -605,14 +608,31 @@ exports.ShapesController = Montage.create(CanvasController, { setStroke: { value: function(el, stroke, eventType, source) { - if(stroke.colorInfo) { - this.setColor(el, stroke.colorInfo, false); - } if(stroke.shapeInfo) { this.setProperty(el, "strokeSize", stroke.shapeInfo.strokeSize + " " + stroke.shapeInfo.strokeUnits, eventType, source); } + var m; if(stroke.webGLInfo) { - this.setProperty(el, "strokeMaterial", stroke.webGLInfo.material); + m = stroke.webGLInfo.material; + this.setProperty(el, "strokeMaterial", m); + if((m === "Linear Gradient") || (m === "Radial Gradient")) { + // Just use the default gradient material values + return; + } + } + if(stroke.colorInfo) { + if(el.elementModel.shapeModel.useWebGl) { + m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial().getName(); + if( ((stroke.colorInfo.mode === "gradient") && (m !== "Linear Gradient") && (m !== "Radial Gradient")) || + ((stroke.colorInfo.mode !== "gradient") && ((m === "Linear Gradient") || (m === "Radial Gradient")))) + { + return; + } else { + this.setColor(el, stroke.colorInfo, false); + } + } else { + this.setColor(el, stroke.colorInfo, false); + } } } }, @@ -646,11 +666,28 @@ exports.ShapesController = Montage.create(CanvasController, { setFill: { value: function(el, fill) { - if(fill.colorInfo) { - this.setColor(el, fill.colorInfo, true); - } + var m; if(fill.webGLInfo) { - this.setProperty(el, "fillMaterial", fill.webGLInfo.material); + m = fill.webGLInfo.material; + this.setProperty(el, "fillMaterial", m); + if((m === "Linear Gradient") || (m === "Radial Gradient")) { + // Just use the default gradient material values + return; + } + } + if(fill.colorInfo) { + if(el.elementModel.shapeModel.useWebGl) { + m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial().getName(); + if( ((fill.colorInfo.mode === "gradient") && (m !== "Linear Gradient") && (m !== "Radial Gradient")) || + ((fill.colorInfo.mode !== "gradient") && ((m === "Linear Gradient") || (m === "Radial Gradient")))) + { + return; + } else { + this.setColor(el, fill.colorInfo, true); + } + } else { + this.setColor(el, fill.colorInfo, true); + } } } }, -- cgit v1.2.3