From 5b4f6b1618cf571a6bce5a631f976a008e04a64e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 29 Mar 2012 15:52:08 -0700 Subject: Updated shapes to always check for its stroke and fill colors and materials instead of relying on the shapeModel cache because it can get out of sync. Signed-off-by: Nivesh Rajbhandari --- js/models/color-model.js | 56 +++++++++++++++++++++++++++++++++++++++--------- js/models/shape-model.js | 7 ------ 2 files changed, 46 insertions(+), 17 deletions(-) (limited to 'js/models') diff --git a/js/models/color-model.js b/js/models/color-model.js index 4189fbef..764feeb5 100755 --- a/js/models/color-model.js +++ b/js/models/color-model.js @@ -589,18 +589,54 @@ exports.ColorModel = Montage.create(Component, { } }, //////////////////////////////////////////////////////////////////// - //Returns CSS string given a WebGL color array in [r, g, b, a] format where the values are [0,1] - webGlToCss: { + //Returns a color object given a WebGL color array/object with gradient stops + webGlToColor: { enumerable: true, - value: function (color) { - if(color && (color.length === 4)) - { - return 'rgba(' + color[0]*255 + ', ' + color[1]*255 + ', ' + color[2]*255 + ', ' + color[3] +')'; - } - else - { - return null; + value: function (c) { + if(c) { + if(c.gradientMode) { + // Gradient + var i = 0, + len, + css, + stops = c.color, + gradient; + + // Create the CSS string + if (c.gradientMode === 'radial') { + css = '-webkit-radial-gradient(center, ellipse cover'; + } else { + css = '-webkit-gradient(linear, left top, right top'; + } + + //Sorting array (must be sorted for radial gradients, at least in Chrome + stops.sort(function(a,b){return a.position - b.position}); + //Looping through stops in gradient to create CSS + + len = stops.length; + for (i=0; i < len; i++) { + //Adding to CSS String + if (c.gradientMode === 'radial' && stops[i].value) { + css += ', '+stops[i].value.css+' '+stops[i].position+'% '; + } else if (stops[i].value){ + css += ', color-stop('+stops[i].position+'%,'+stops[i].value.css+')'; + } + } + //Closing the CSS strings + css += ')'; + + gradient = {stops: c.color, mode: c.gradientMode, gradientMode: c.gradientMode, css: css}; + return {mode: 'gradient', value: gradient, color: gradient}; + } else if(c.length === 4) { + // CSS + return this.application.ninja.colorController.getColorObjFromCss('rgba(' + c[0]*255 + ', ' + + c[1]*255 + ', ' + + c[2]*255 + ', ' + + c[3] +')'); + } } + + return null; } } //////////////////////////////////////////////////////////////////// diff --git a/js/models/shape-model.js b/js/models/shape-model.js index ea8c2cfc..ff69ae3c 100755 --- a/js/models/shape-model.js +++ b/js/models/shape-model.js @@ -17,15 +17,8 @@ exports.ShapeModel = Montage.create(Component, { GLGeomObj: { value: null }, strokeSize: { value: null }, - stroke: { value: null }, - strokeMaterial: { value: null }, strokeStyle: { value: null }, strokeStyleIndex: { value: null }, - border: { value: null }, // Store css value for ColorController - - fill: { value: null }, - fillMaterial: { value: null }, - background: { value: null }, // Store css value for ColorController // Line-specific slope: { value: null }, -- cgit v1.2.3