From 2a8a41711052bb557271c27f82faba8dd13fd880 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 06:12:34 -0800 Subject: preliminary support for setting gradients on webgl shapes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 125 ++++++++++++++++++++++++--- 1 file changed, 114 insertions(+), 11 deletions(-) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 3423a5a7..7079fc7f 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -259,24 +259,70 @@ exports.ShapesController = Montage.create(CanvasController, { } }, - setColor: { - value: function(el, color, isFill) { - var webGl = color.webGlColor || color.color.webGlColor; - if(!webGl) + _setGradientMaterial: { + value: function(el, gradientMode, isFill) { + var m = "LinearGradientMaterial"; + if(gradientMode === "radial") { - webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + m = "RadialGradientMaterial"; } + + if(el.elementModel.shapeModel.fillMaterial.getName() !== m) + { + var fm = Object.create(MaterialsModel.getMaterial(m)); + if(fm) + { + if(isFill) + { + el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); + el.elementModel.shapeModel.fillMaterial = fm; + } + else + { + el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); + el.elementModel.shapeModel.strokeMaterial = fm; + } + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); + } + } + } + }, + + setColor: { + value: function(el, color, isFill) { + var mode = color.mode, + webGl; if(isFill) { - el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); - this.setShapeProperty(el, "fill", webGl); - this.setShapeProperty(el, "background", color); + if(mode) + { + switch (mode) { + case 'nocolor': + el.elementModel.shapeModel.GLGeomObj.setFillColor(null); + this.setShapeProperty(el, "fill", null); + this.setShapeProperty(el, "background", color); +// el.elementModel.fill = null; + return; + case 'gradient': + this._setGradientMaterial(el, color.color.gradientMode, isFill); + el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); + el.elementModel.shapeModel.GLWorld.render(); + this.setShapeProperty(el, "fill", color.color.css); + this.setShapeProperty(el, "background", color); +// el.elementModel.fill = color; + break; + default: + webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); + this.setShapeProperty(el, "fill", webGl); + this.setShapeProperty(el, "background", color); +// el.elementModel.fill = color; + } + } } else { - el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); - this.setShapeProperty(el, "stroke", webGl); - this.setShapeProperty(el, "border", color); + // Support for ink-bottle tool if(color.strokeInfo) { var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, @@ -285,7 +331,64 @@ exports.ShapesController = Montage.create(CanvasController, { this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " + color.strokeInfo.strokeUnits); } + + if(mode) + { + switch (mode) { + case 'nocolor': + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); + this.setShapeProperty(el, "stroke", null); + this.setShapeProperty(el, "border", color); +// el.elementModel.fill = null; + return; + case 'gradient': + this._setGradientMaterial(el, color.color.gradientMode, isFill); + el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); + el.elementModel.shapeModel.GLWorld.render(); + this.setShapeProperty(el, "stroke", color.color.css); + this.setShapeProperty(el, "border", color); +// el.elementModel.fill = color; + break; + default: + webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); + el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); + this.setShapeProperty(el, "stroke", webGl); + this.setShapeProperty(el, "border", color); +// el.elementModel.fill = color; + } + } } + + + + + + +// var webGl = color.webGlColor || color.color.webGlColor; +// if(!webGl) +// { +// webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); +// } +// if(isFill) +// { +// el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); +// this.setShapeProperty(el, "fill", webGl); +// this.setShapeProperty(el, "background", color); +// } +// else +// { +// el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); +// this.setShapeProperty(el, "stroke", webGl); +// this.setShapeProperty(el, "border", color); +// if(color.strokeInfo) +// { +// var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, +// color.strokeInfo.strokeUnits); +// el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth); +// this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " +// + color.strokeInfo.strokeUnits); +// } +// } el.elementModel.shapeModel.GLWorld.render(); } }, -- cgit v1.2.3 From fc567223aded95c35982b1d1239f6d28a957a199 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 11:42:46 -0800 Subject: Gradient support for canvas-2d rectangle. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 7079fc7f..b6d97b14 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -301,22 +301,25 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.setFillColor(null); this.setShapeProperty(el, "fill", null); this.setShapeProperty(el, "background", color); -// el.elementModel.fill = null; + el.elementModel.fill = null; return; case 'gradient': - this._setGradientMaterial(el, color.color.gradientMode, isFill); + if(el.elementModel.shapeModel.useWebGl) + { + this._setGradientMaterial(el, color.color.gradientMode, isFill); + } el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); el.elementModel.shapeModel.GLWorld.render(); this.setShapeProperty(el, "fill", color.color.css); this.setShapeProperty(el, "background", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; break; default: webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); this.setShapeProperty(el, "fill", webGl); this.setShapeProperty(el, "background", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; } } } @@ -339,22 +342,25 @@ exports.ShapesController = Montage.create(CanvasController, { el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); this.setShapeProperty(el, "stroke", null); this.setShapeProperty(el, "border", color); -// el.elementModel.fill = null; + el.elementModel.fill = null; return; case 'gradient': - this._setGradientMaterial(el, color.color.gradientMode, isFill); + if(el.elementModel.shapeModel.useWebGl) + { + this._setGradientMaterial(el, color.color.gradientMode, isFill); + } el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); el.elementModel.shapeModel.GLWorld.render(); this.setShapeProperty(el, "stroke", color.color.css); this.setShapeProperty(el, "border", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; break; default: webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); this.setShapeProperty(el, "stroke", webGl); this.setShapeProperty(el, "border", color); -// el.elementModel.fill = color; + el.elementModel.fill = color; } } } -- cgit v1.2.3 From b6288e1ffe4ffe29a595bb1e146feb388503e2c4 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 7 Mar 2012 15:31:20 -0800 Subject: gradient support for canvas-2d shapes. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/shapes-controller.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index b6d97b14..d72d9c14 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -261,28 +261,37 @@ exports.ShapesController = Montage.create(CanvasController, { _setGradientMaterial: { value: function(el, gradientMode, isFill) { - var m = "LinearGradientMaterial"; + var m = "LinearGradientMaterial", + fm; if(gradientMode === "radial") { m = "RadialGradientMaterial"; } - if(el.elementModel.shapeModel.fillMaterial.getName() !== m) + if(isFill) { - var fm = Object.create(MaterialsModel.getMaterial(m)); - if(fm) + if(el.elementModel.shapeModel.fillMaterial.getName() !== m) { - if(isFill) + fm = Object.create(MaterialsModel.getMaterial(m)); + if(fm) { el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); el.elementModel.shapeModel.fillMaterial = fm; + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } - else + } + } + else + { + if(el.elementModel.shapeModel.strokeMaterial.getName() !== m) + { + fm = Object.create(MaterialsModel.getMaterial(m)); + if(fm) { el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); el.elementModel.shapeModel.strokeMaterial = fm; + el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } - el.elementModel.shapeModel.GLGeomObj.buildBuffers(); } } } -- cgit v1.2.3 From 2c6339a9191033c937c2bac3e181c2bc380f4c48 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 12 Mar 2012 12:00:07 -0700 Subject: Fixed element mediator, PI, and eye-dropper to handle different borders sides and gradients. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 32 ++++++++++++++++++--------- 1 file changed, 22 insertions(+), 10 deletions(-) (limited to 'js/controllers/elements') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index ec0335b4..9f00604f 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -74,8 +74,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, //-------------------------------------------------------------------------------------------------------- // Routines to get/set color properties + // borderSide : "top", "right", "bottom", or "left" getColor: { - value: function(el, isFill) { + value: function(el, isFill, borderSide) { var colorObj, color, image; @@ -87,22 +88,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, { return el.elementModel.fill; } -// return this.application.ninja.stylesController.getElementStyle(el, "background-color"); //TODO: Once logic for color and gradient is established, this needs to be revised color = this.getProperty(el, "background-color"); image = this.getProperty(el, "background-image"); } else { - // TODO - Need to figure out which border side user wants - if(el.elementModel.stroke) + // Try getting border color from specific side first + if(borderSide) { - return el.elementModel.stroke; + color = this.getProperty(el, "border-" + borderSide + "-color"); + image = this.getProperty(el, "border-" + borderSide + "-image"); + } + + // If no color was found, look up the shared border color + if(!color && !image) + { + if(el.elementModel.stroke) + { + return el.elementModel.stroke; + } + color = this.getProperty(el, "border-color"); + image = this.getProperty(el, "border-image"); } - // TODO - Need to figure out which border side user wants -// return this.application.ninja.stylesController.getElementStyle(el, "border-color"); - color = this.getProperty(el, "border-color"); - image = this.getProperty(el, "border-image"); } if(color || image) { @@ -120,11 +128,15 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, { el.elementModel.fill = colorObj; } - else + else if(!borderSide) { // TODO - Need to update border style and width also el.elementModel.stroke = colorObj; } + else + { + // TODO - Should update specific border sides too + } return colorObj; } -- cgit v1.2.3