From 32c41a56fd870f28be70c9b9cfb4fe6dfbb16654 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Sat, 23 Jun 2012 19:22:53 -0700 Subject: Adding support for gradients on chips Need to handle other color modes, currently only handling HSV and gradients. Working on getting other modes supported. Also, will need clean up color popup manager after completion. --- js/controllers/elements/body-controller.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index 0ca6c417..0b6a5bad 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js @@ -31,6 +31,8 @@ exports.BodyController = Montage.create(ElementController, { value: function(el, p) { switch(p) { case "background" : + case "background-image": + return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-image")); case "background-color": return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color")); case "border": @@ -50,6 +52,9 @@ exports.BodyController = Montage.create(ElementController, { value: function(el, p, value) { switch(p) { case "background": + case "background-image": + this.application.ninja.stylesController.setElementStyle(el, "background-image", value); + break; case "background-color": this.application.ninja.stylesController.setElementStyle(el, "background-color", value); break; -- cgit v1.2.3 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') 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') 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') 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