From 7396ca7f01ca884564b1dd86a8847d28364f1a96 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 22 Jun 2012 23:48:53 -0700 Subject: Fixing bug with gradient stop limits It seems that from-to stops are omitted if using objects with no 0 and/or 100 percent stops, seems like browser induced, but can't confirmed, bug never reported, but this should fix it. --- js/controllers/color-controller.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js index 3165988d..2a6fe9bd 100755 --- a/js/controllers/color-controller.js +++ b/js/controllers/color-controller.js @@ -254,7 +254,12 @@ exports.ColorController = Montage.create(Component, { gradient.css = css; // arr = css.split('from('); - arr = arr[1].split('),'); + // + if (arr.length > 1) { + arr = arr[1].split('),'); + } else { + arr = (css.split(css.split('color-stop(')[0])[1]).split('),'); + } // for (i=0; arr[i]; i++) { arr[i] = arr[i].replace(/ color-stop\(/i, ""); @@ -264,14 +269,20 @@ exports.ColorController = Montage.create(Component, { arr[i] = arr[i].replace(/\)\)/i, ""); } // - if (i === 0) { + if (i === 0 && arr[i].indexOf('color-stop') === -1) { arr[i] = {css: arr[i], percent: 0}; } else if (i === arr.length-1) { - arr[i] = {css: arr[i], percent: 100}; + temp = arr[i].split(', rgb'); + if (temp.length > 1) { + arr[i] = {css: 'rgb'+temp[1].replace(/\)\)/i, ""), percent: Math.round(parseFloat(temp[0])*100)}; + } else { + arr[i] = {css: arr[i], percent: 100}; + } } else { // if (arr[i].indexOf('rgb') >= 0 && arr[i].indexOf('rgba') < 0) { temp = arr[i].split(', rgb'); + temp[0] = temp[0].replace(/color\-stop\(/gi, ''); arr[i] = {css: 'rgb'+temp[1], percent: Math.round(parseFloat(temp[0])*100)}; } else if (arr[i].indexOf('rgba') >= 0) { temp = arr[i].split(', rgba'); -- cgit v1.2.3 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') 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') 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